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 (

packages/freesewing.shared/package.json

@@ -16,6 +16,7 @@
     "@tailwindcss/typography": "^0.5.0",
     "daisyui": "^1.16.2",
     "lodash.orderby": "^4.6.0",
+    "lodash.unset": "^4.5.2",
     "react-markdown": "^7.1.1",
     "react-timeago": "^6.2.1",
     "rehype-highlight": "^5.0.1",

packages/freesewing.shared/utils.js

@@ -0,0 +1,76 @@
+// Generic rounding method
+export const round = (val, decimals=1) => Math.round(val*Math.pow(10, decimals))/Math.pow(10, decimals)
+
+// Rounds a value in mm
+export const roundMm = (val, units) => {
+  if (units === "imperial") return Math.round(val * 1000000) / 1000000;
+  else return Math.round(val * 10) / 10;
+}
+
+// Formatting for imperial values
+export const formatImperial = (neg, inch, numo = false, deno = false, format = 'html') => {
+  if (format === 'html') {
+    if (numo) return `<span>${neg}${inch}&nbsp;<sup>${numo}</sup>/<sub>${deno}</sub></span>`
+    else return `<span>${neg}${inch}</span>`
+  } else {
+    if (numo) return `${neg}${inch} ${numo}/${deno}`
+    else return `${neg}${inch}`
+  }
+}
+
+// Format a value in mm based on the user's units
+export const formatMm = (val, units, format = 'html') => {
+  val = roundMm(val)
+  if (units === 'imperial') {
+    if (val == 0) return formatImperial('', 0, false, false, format)
+    let negative = ''
+    let inches = ''
+    let rest = ''
+    let fraction = val / 25.4
+    if (fraction < 0) {
+      fraction = fraction * -1
+      negative = '-'
+    }
+    if (Math.abs(fraction) < 1) rest = fraction
+    else {
+      inches = Math.floor(fraction)
+      rest = fraction - inches
+    }
+    let suffix = ''
+    if (format === 'html') suffix = '"'
+    let fraction128 = Math.round(rest * 128)
+    if (fraction128 == 0) return formatImperial(negative, inches, false, false, format)
+    if (fraction128 % 64 == 0)
+      return formatImperial(negative, inches, fraction128 / 64, 2, format) + suffix
+    if (fraction128 % 32 == 0)
+      return formatImperial(negative, inches, fraction128 / 32, 4, format) + suffix
+    if (fraction128 % 16 == 0)
+      return formatImperial(negative, inches, fraction128 / 16, 8, format) + suffix
+    if (fraction128 % 8 == 0)
+      return formatImperial(negative, inches, fraction128 / 8, 16, format) + suffix
+    if (fraction128 % 4 == 0)
+      return formatImperial(negative, inches, fraction128 / 4, 32, format) + suffix
+    if (fraction128 % 2 == 0)
+      return formatImperial(negative, inches, fraction128 / 2, 64, format) + suffix
+
+    return negative + Math.round(fraction * 100) / 100 + suffix
+  } else {
+    if (format === 'html') return roundMm(val / 10) + 'cm'
+    else return roundMm(val / 10)
+  }
+}
+
+// Format a percentage (as in, between 0 and 1)
+export const formatPercentage = val => Math.round(1000*val)/10+'%'
+
+export const optionType = option => {
+  if (typeof option?.pct !== 'undefined') return 'pct'
+  if (typeof option?.bool !== 'undefined') return 'bool'
+  if (typeof option?.count !== 'undefined') return 'count'
+  if (typeof option?.deg !== 'undefined') return 'deg'
+  if (typeof option?.list !== 'undefined') return 'list'
+  if (typeof option?.mm !== 'undefined') return 'mm'
+
+  return 'constant'
+}
+

yarn.lock

@@ -17514,6 +17514,11 @@ lodash.uniqby@^4.7.0:
   resolved "https://registry.yarnpkg.com/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz#d99c07a669e9e6d24e1362dfe266c67616af1302"
   integrity sha1-2ZwHpmnp5tJOE2Lf4mbGdhavEwI=
 
+lodash.unset@^4.5.2:
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/lodash.unset/-/lodash.unset-4.5.2.tgz#370d1d3e85b72a7e1b0cdf2d272121306f23e4ed"
+  integrity sha1-Nw0dPoW3Kn4bDN8tJyEhMG8j5O0=
+
 lodash@4.17.21, "lodash@>=3.5 <5", lodash@^4.1.1, lodash@^4.11.2, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.7.0, lodash@~4.17.10:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"