feat(lab): Allow manual edit of pct options

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

@@ -0,0 +1,7 @@
+const EditIcon = () => (
+  <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+  </svg>
+)
+
+export default EditIcon

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

@@ -1,7 +1,30 @@
 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 EditPercentage = 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 DesignOptionPercentage = props => {
   const { pct, max, min } = props.pattern.config.options[props.option]
   const val = (typeof props.gist?.options?.[props.option] === 'undefined')
@@ -9,6 +32,7 @@ const DesignOptionPercentage = props => {
     : props.gist.options[props.option] * 100
 
   const [value, setValue] = useState(val)
+  const [editPercentage, setEditPercentage] = useState(false)
 
   const handleChange = (evt) => {
     const newVal = evt.target.value
@@ -23,9 +47,27 @@ const DesignOptionPercentage = props => {
   return (
     <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>
+        {editPercentage
+          ? <EditPercentage
+              value={value}
+              handleChange={handleChange}
+              min={min}
+              max={max}
+              setEditPercentage={setEditPercentage}
+              t={props.app.t}
+            />
+          : (
+            <>
+              <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"
@@ -35,7 +77,7 @@ const DesignOptionPercentage = props => {
         value={value}
         onChange={handleChange}
         className={`
-          range range-sm
+          range range-sm mt-1
           ${val === pct ? 'range-secondary' : 'range-accent'}
         `}
       />
@@ -46,14 +88,29 @@ const DesignOptionPercentage = props => {
             : ' '
           }
         </span>
-        <button
-          title={props.app.t('app.reset')}
-          className="btn btn-ghost btn-xs text-accent"
-          disabled={val === pct}
-          onClick={reset}
-        >
-          <ClearIcon />
-        </button>
+        <div>
+          <button
+            title={props.app.t('app.reset')}
+            className="btn btn-ghost btn-xs text-accent"
+            disabled={val === pct}
+            onClick={reset}
+          >
+            <ClearIcon />
+          </button>
+          <button
+            title={props.app.t('app.editThing', { thing: '%' })}
+            className={`
+              btn btn-ghost btn-xs hover:text-secondary-focus
+              ${editPercentage
+                ? 'text-accent'
+                : 'text-secondary'
+              }
+            `}
+            onClick={() => setEditPercentage(!editPercentage)}
+          >
+            <EditIcon />
+          </button>
+        </div>
       </div>
     </div>
   )