feat(lab): Handling count options

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

@@ -0,0 +1,114 @@
+import { useState } from 'react'
+import ClearIcon from 'shared/components/icons/clear.js'
+import EditIcon from 'shared/components/icons/edit.js'
+import { formatMm, round } from 'shared/utils.js'
+
+const EditCount = props => (
+  <div className="form-control mb-2 w-full">
+    <label className="label">
+      <span className="label-text text-neutral-content">{props.min}</span>
+      <span className="label-text font-bold text-neutral-content">{props.value}</span>
+      <span className="label-text text-neutral-content">{props.max}</span>
+    </label>
+    <label className="input-group input-group-sm">
+      <input
+        type="number"
+        className={`
+          input input-sm input-bordered grow text-base-content
+        `}
+        value={props.value}
+        onChange={props.handleChange}
+      />
+      <span className="text-neutral-content font-bold">#</span>
+    </label>
+  </div>
+)
+
+
+const DesignOptionCount = props => {
+  const { count, max, min } = props.pattern.config.options[props.option]
+  const val = (typeof props.gist?.options?.[props.option] === 'undefined')
+    ? count
+    : props.gist.options[props.option]
+
+  const [value, setValue] = useState(val)
+  const [editCount, setEditCount] = useState(false)
+
+  const handleChange = (evt) => {
+    const newVal = evt.target.value
+    setValue(newVal)
+    props.updateGist(['options', props.option], newVal)
+  }
+  const reset = () => {
+    setValue(count)
+    props.unsetGist(['options', props.option])
+  }
+
+  return (
+    <div className="py-4 mx-6 border-l-2 pl-2">
+      <div className="flex flex-row justify-between">
+        {editCount
+          ? <EditCount
+              value={value}
+              handleChange={handleChange}
+              min={min}
+              max={max}
+              setEditCount={setEditCount}
+              t={props.app.t}
+            />
+          : (
+            <>
+              <span className="opacity-50">{min}</span>
+              <span className={
+                `font-bold ${val===count ? 'text-secondary' : 'text-accent'}`}
+              >
+                {val}
+              </span>
+              <span className="opacity-50">{max}</span>
+            </>
+          )
+        }
+      </div>
+      <input
+        type="range"
+        max={max}
+        min={min}
+        step={1}
+        value={value}
+        onChange={handleChange}
+        className={`
+          range range-sm mt-1
+          ${val === count ? 'range-secondary' : 'range-accent'}
+        `}
+      />
+      <div className="flex flex-row justify-between">
+        <span></span>
+        <div>
+          <button
+            title={props.app.t('app.reset')}
+            className="btn btn-ghost btn-xs text-accent"
+            disabled={val === count}
+            onClick={reset}
+          >
+            <ClearIcon />
+          </button>
+          <button
+            title={props.app.t('app.editThing', { thing: '#' })}
+            className={`
+              btn btn-ghost btn-xs hover:text-secondary-focus
+              ${editCount
+                ? 'text-accent'
+                : 'text-secondary'
+              }
+            `}
+            onClick={() => setEditCount(!editCount)}
+          >
+            <EditIcon />
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default DesignOptionCount

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

@@ -1,5 +1,7 @@
 import { linkClasses, Chevron } from 'shared/components/navigation/primary.js'
 import PercentOption from 'shared/components/workbench/inputs/design-option-percentage'
+import CountOption from 'shared/components/workbench/inputs/design-option-count'
+import ListOption from 'shared/components/workbench/inputs/design-option-list'
 import { formatMm, formatPercentage, optionType } from 'shared/utils.js'
 
 const values = {
@@ -38,7 +40,11 @@ const values = {
     )
   },
   count: props => {
-    return <p>No val yet</p>
+    const dflt = props.pattern.config.options[props.option].count
+    const current = props.gist?.options?.[props.option]
+    return (dflt==current || typeof current === 'undefined')
+      ? <span className="text-secondary">{dflt}</span>
+      : <span className="text-secondary">{current}</span>
   },
   deg: props => {
     return <p>No val yet</p>
@@ -58,10 +64,9 @@ const Tmp = props => <p>not yet</p>
 
 const inputs = {
   pct: PercentOption,
-  bool: Tmp,
-  count: Tmp,
+  count: CountOption,
   deg: Tmp,
-  list: Tmp,
+  list: ListOption,
   mm: Tmp,
   constant: Tmp,
 }
@@ -78,7 +83,6 @@ const Option = props => {
     if (typeof current === 'undefined')
       props.updateGist(['options', props.option], !dflt)
     else props.unsetGist(['options', props.option])
-
   }
 
   if (type === 'bool') return (