wip(lab): Work on xray mode

packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-nr.js

@@ -0,0 +1,69 @@
+import { useState } from 'react'
+import ClearIcon from 'shared/components/icons/clear.js'
+import EditIcon from 'shared/components/icons/edit.js'
+
+const CoreSettingNr = props => {
+  const { dflt, min, max } = props
+  const val = props.gist?.[props.setting]
+
+  const [value, setValue] = useState(val)
+
+  const handleChange = evt => {
+    const newVal = parseFloat(evt.target.value)
+
+    if (newVal === dflt) reset()
+    else {
+      setValue(newVal)
+      props.updateGist([props.setting], newVal)
+    }
+  }
+  const reset = () => {
+    setValue(props.dflt)
+    props.updateGist([props.setting], props.dflt)
+  }
+
+
+  return (
+    <div className="py-4 mx-6 border-l-2 pl-2">
+      <p className="m-0 p-0 px-2 mb-2 text-neutral-content opacity-60 italic">
+        {props.app.t(`settings.${props.setting}.description`)}
+      </p>
+      <div className="flex flex-row justify-between">
+        <span className="opacity-50">
+          {min}
+        </span>
+        <span className={`font-bold ${val===dflt ? 'text-secondary' : 'text-accent'}`}>
+          {val}
+        </span>
+        <span className="opacity-50">
+          {max}
+        </span>
+      </div>
+      <input
+        type="range"
+        max={max}
+        min={min}
+        step={0.1}
+        value={value}
+        onChange={handleChange}
+        className={`
+          range range-sm mt-1
+          ${val === dflt ? 'range-secondary' : 'range-accent'}
+        `}
+      />
+      <div className="flex flex-row justify-between">
+        <span />
+        <button
+          title={props.app.t('app.reset')}
+          className="btn btn-ghost btn-xs text-accent"
+          disabled={val === dflt}
+          onClick={reset}
+        >
+          <ClearIcon />
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default CoreSettingNr

packages/freesewing.shared/components/workbench/menu/core-settings/index.js

@@ -29,6 +29,11 @@ const settings = {
     max: 25,
     dflt: 2,
   },
+  scale: {
+    min: 0.1,
+    max: 5,
+    dflt: 1,
+  },
   renderer: {
     list: ['react', 'svg'],
     titles: {
@@ -39,6 +44,9 @@ const settings = {
   debug: {
     dflt: false,
   },
+  xray: {
+    dflt: false,
+  },
 }
 
 const CoreSettings = props => {

packages/freesewing.shared/components/workbench/menu/core-settings/setting.js

@@ -4,6 +4,7 @@ import CountOption from 'shared/components/workbench/inputs/design-option-count'
 import ListSetting from './core-setting-list'
 import OnlySetting from './core-setting-only'
 import MmSetting from './core-setting-mm'
+import NrSetting from './core-setting-nr'
 import BoolSetting from './core-setting-bool.js'
 import SaBoolSetting from './core-setting-sa-bool.js'
 import SaMmSetting from './core-setting-sa-mm.js'
@@ -52,6 +53,9 @@ const settings = {
       }} />
     )
   },
+  scale: props => props.gist.scale === 1
+    ? <span className="text-secondary">{props.gist.scale}</span>
+    : <span className="text-accent">{props.gist.scale}</span>,
   saMm: props => {
     return (
       <span className="text-secondary" dangerouslySetInnerHTML={{
@@ -85,6 +89,7 @@ const inputs = {
     }))}
   />,
   margin: props => <MmSetting {...props} {...props.config} />,
+  scale: props => <NrSetting {...props} {...props.config} />,
   saMm: props => <SaMmSetting {...props} {...props.config} />,
   renderer: props => <ListSetting
     {...props}
@@ -100,7 +105,7 @@ const Setting = props => {
 
   if (props.setting === 'saBool')
     return <SaBoolSetting {...props} {...props.config} />
-  if (['paperless', 'complete', 'debug'].indexOf(props.setting) !== -1)
+  if (['paperless', 'complete', 'debug', 'xray'].indexOf(props.setting) !== -1)
     return <BoolSetting {...props} {...props.config} />
 
   const Input = inputs[props.setting]