feat(lab): Working on reporting back absolute options

packages/freesewing.shared/components/icons/clear.js

@@ -0,0 +1,7 @@
+const ClearIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2M3 12l6.414 6.414a2 2 0 001.414.586H19a2 2 0 002-2V7a2 2 0 00-2-2h-8.172a2 2 0 00-1.414.586L3 12z" />
+  </svg>
+)
+
+export default ClearIcon

packages/freesewing.shared/components/workbench/inputs/design-option-percentage.js

@@ -1,6 +1,61 @@
+import { useState } from 'react'
+import ClearIcon from 'shared/components/icons/clear.js'
+import { formatMm, round } from 'shared/utils.js'
+
 const DesignOptionPercentage = props => {
+  const { pct, max, min } = props.pattern.config.options[props.option]
+  const val = (typeof props.gist?.options?.[props.option] === 'undefined')
+    ? pct
+    : props.gist.options[props.option] * 100
+
+  const [value, setValue] = useState(val)
+
+  const handleChange = (evt) => {
+    const newVal = evt.target.value
+    setValue(newVal)
+    props.updateGist(['options', props.option], newVal/100)
+  }
+  const reset = () => {
+    setValue(pct)
+    props.unsetGist(['options', props.option])
+  }
+
   return (
-    <input type="range" max="100" value="50" className="range range-secondary range-sm" />
+    <div className="py-4 mx-6 border-l-2 pl-2">
+      <div className="flex flex-row justify-between">
+        <span className="opacity-50">{round(min)}%</span>
+        <span className={`font-bold ${val===pct ? 'text-secondary' : 'text-accent'}`}>{round(val)}%</span>
+        <span className="opacity-50">{round(max)}%</span>
+      </div>
+      <input
+        type="range"
+        max={max}
+        min={min}
+        step={0.1}
+        value={value}
+        onChange={handleChange}
+        className={`
+          range range-sm
+          ${val === pct ? 'range-secondary' : 'range-accent'}
+        `}
+      />
+      <div className="flex flex-row justify-between">
+        <span className={val===pct ? 'text-secondary' : 'text-accent'}>
+          {props.pattern.config.options[props.option]?.toAbs
+            ? formatMm(props.pattern.config.options[props.option].toAbs(value/100, props.gist))
+            : ' '
+          }
+        </span>
+        <button
+          title={props.app.t('app.reset')}
+          className="btn btn-ghost btn-xs text-accent"
+          disabled={val === pct}
+          onClick={reset}
+        >
+          <ClearIcon />
+        </button>
+      </div>
+    </div>
   )
 }
 

packages/freesewing.shared/components/workbench/menu/design-options/option.js

@@ -1,7 +1,46 @@
 import { linkClasses, Chevron } from 'shared/components/navigation/primary.js'
 import PercentOption from 'shared/components/workbench/inputs/design-option-percentage'
+import { formatMm, formatPercentage, optionType } from 'shared/utils.js'
+
+const values = {
+  pct: props => {
+    const val = (typeof props.gist?.options?.[props.option] === 'undefined')
+      ? props.pattern.config.options[props.option].pct/100
+      : props.gist.options[props.option]
+    return (
+      <span className={
+        val=== props.pattern.config.options[props.option].pct/100
+          ? 'text-secondary'
+          : 'text-accent'
+      }>
+        {formatPercentage(val)}
+        {props.pattern.config.options[props.option]?.toAbs
+          ? ' | ' +formatMm(props.pattern.config.options[props.option]?.toAbs(val, props.gist))
+          : null
+        }
+      </span>
+    )
+  }
+}
+
+const Tmp = props => <p>not yet</p>
+
+const inputs = {
+  pct: PercentOption,
+  bool: Tmp,
+  count: Tmp,
+  deg: Tmp,
+  list: Tmp,
+  mm: Tmp,
+  constant: Tmp,
+}
+
 
 const Option = props => {
+  const type = optionType(props.pattern.config.options[props.option])
+  const Input = inputs[type]
+  const Value = values[type]
+
   return (
     <li className="flex flex-row">
       <details className="grow">
@@ -30,16 +69,13 @@ const Option = props => {
               { props.app.t(`options.${props.pattern.config.name}.${props.option}.title`) }
             </span>
           </div>
+          <Value type={type} {...props} />
           <Chevron w={6} m={3}/>
         </summary>
-        {props.pattern.config.options[props.option]?.pct && <PercentOption {...props} />}
-        <pre>{JSON.stringify(props.pattern.config.options[props.option],null,2)}</pre>
-
-        fixme
+        <Input {...props} />
       </details>
     </li>
   )
 }
 
-    //props.pattern.config.optionsgroups[props.group].map(option => (
 export default Option

packages/freesewing.shared/components/wrappers/workbench.js

@@ -5,6 +5,7 @@ import Menu from 'shared/components/workbench/menu/index.js'
 import Measurements, { Input } from 'shared/components/workbench/measurements/index.js'
 import LabDraft from 'shared/components/workbench/draft/index.js'
 import set from 'lodash.set'
+import unset from 'lodash.unset'
 
 // Generates a default pattern gist to start from
 const defaultGist = (pattern, language='en') => ({
@@ -60,13 +61,27 @@ const WorkbenchWrapper = ({ app, pattern }) => {
     set(newGist, path, content)
     setGist(newGist)
   }
+  const unsetGist = (path) => {
+    const newGist = {...gist}
+    unset(newGist, path)
+    setGist(newGist)
+  }
+
 
   // Required props for layout
   const layoutProps = {
     app: app,
     noSearch: true,
     workbench: true,
-    AltMenu: <Menu app={app} pattern={pattern} mode={mode} setMode={setMode} gist={gist} updateGist={updateGist} />
+    AltMenu: <Menu
+      app={app}
+      pattern={pattern}
+      mode={mode}
+      setMode={setMode}
+      gist={gist}
+      updateGist={updateGist}
+      unsetGist={unsetGist}
+    />
   }
 
   return (