wip(fs.lab): Work on workbench components

packages/freesewing.shared/components/workbench/input-measurement.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 
 /*
  * This is a single input for a measurements
@@ -11,7 +11,6 @@ import React, { useState } from 'react'
 const MeasurementInput = ({ m, gist, app, updateMeasurements }) => {
   const prefix = (app.site === 'org') ? '' : 'https://freesewing.org'
   const title = app.t(`measurements.${m}`)
-  console.log('render', m)
   const isValid = input => {
     if (input === null || input === '') return null
     return !isNaN(input)
@@ -23,7 +22,7 @@ const MeasurementInput = ({ m, gist, app, updateMeasurements }) => {
     console.log({ok})
     if (ok) {
       setValid(true)
-      updateMeasurements(evt.target.value, m)
+      updateMeasurements(evt.target.value*10, m)
     } else setValid(false)
   }
 
@@ -33,6 +32,11 @@ const MeasurementInput = ({ m, gist, app, updateMeasurements }) => {
     isValid(gist.measurements[m])
   )
 
+  useEffect(() => {
+    console.log(gist.measurements)
+    if (gist?.measurements?.[m]) setVal(gist.measurements[m]/10)
+  }, [gist])
+
   if (!m) return null
 
   return (

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

@@ -1,4 +1,27 @@
 import MeasurementInput from './input-measurement.js'
+import { withBreasts, withoutBreasts } from 'pkgs/models/src/index.js'
+import nonHuman from './non-human-measurements.js'
+import WithBreastsIcon from 'shared/components/icons/with-breasts.js'
+import WithoutBreastsIcon from 'shared/components/icons/without-breasts.js'
+
+const groups = {
+  people: {
+    with: withBreasts,
+    without: withoutBreasts,
+  },
+  dolls: {
+    with: nonHuman.withBreasts.dolls,
+    without: nonHuman.withoutBreasts.dolls,
+  },
+  giants: {
+    with: nonHuman.withBreasts.giants,
+    without: nonHuman.withoutBreasts.giants,
+  }
+}
+const icons = {
+  with: <WithBreastsIcon />,
+  without: <WithoutBreastsIcon />,
+}
 
 const WorkbenchMeasurements = ({ app, pattern, gist, updateGist }) => {
 
@@ -6,10 +29,11 @@ const WorkbenchMeasurements = ({ app, pattern, gist, updateGist }) => {
   const updateMeasurements = (value, m=false) => {
     if (m === false) {
       // Set all measurements
+      updateGist('measurements', value)
     } else {
       // Set one measurement
       const newValues = {...gist.measurements}
-      newValues[m] = value.trim()
+      newValues[m] = value
       updateGist('measurements', newValues)
     }
   }
@@ -24,9 +48,47 @@ const WorkbenchMeasurements = ({ app, pattern, gist, updateGist }) => {
         </span>
         {app.t('measurements')}
       </h1>
+      <details open>
+        <summary><h2 className="inline-block">{app.t('cfp.preloadMeasurements')}</h2></summary>
+        <div className="ml-2 pl-4 border-l-2">
+          {Object.keys(groups).map(group => (
+            <details>
+              <summary><h3 className="inline-block">{app.t(`app.${group}`)}</h3></summary>
+              <div className="ml-2 pl-4 border-l-2">
+                {Object.keys(icons).map(type => (
+                  <>
+                    <h4>{app.t(`app.${type}Breasts`)}</h4>
+                    <ul className="flex flex-row flex-wrap gap-2">
+                      {Object.keys(groups[group][type]).map((m) => (
+                        <li key={`${m}-${type}-${group}`} className="">
+                          <button
+                            className="flex flex-row btn btn-outline"
+                            onClick={() => updateMeasurements(groups[group][type][m], false)}
+                          >
+                            {icons[type]}
+                            {app.t('cfp.size')}&nbsp;
+                            { group === 'people'
+                              ? m.slice(-2)
+                              : m
+                            }
+                          </button>
+                        </li>
+                      ))}
+                    </ul>
+                  </>
+                ))}
+              </div>
+            </details>
+          ))}
+        </div>
+      </details>
+
+      <details>
+        <summary><h2 className="inline-block">{app.t('cfp.enterMeasurements')}</h2></summary>
+        <div className="ml-2 pl-4 border-l-2">
           {pattern.config.measurements && (
             <>
-          <h2>{app.t('requiredMeasurements')}</h2>
+              <h3>{app.t('requiredMeasurements')}</h3>
               {pattern.config.measurements.map(m => (
                 <MeasurementInput key={m} m={m} {...inputProps} />
               ))}
@@ -34,13 +96,16 @@ const WorkbenchMeasurements = ({ app, pattern, gist, updateGist }) => {
           )}
           {pattern.config.optionalMeasurements && (
             <>
-          <h2>{app.t('optionalMeasurements')}</h2>
+              <h3>{app.t('optionalMeasurements')}</h3>
               {pattern.config.optionalMeasurements.map(m => (
                 <MeasurementInput key={m} m={m} {...inputProps} />
               ))}
             </>
           )}
         </div>
+      </details>
+
+    </div>
   )
 }
 

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

@@ -3,21 +3,91 @@ import Link from 'next/link'
 import orderBy from 'lodash.orderby'
 import OptionsIcon from 'shared/components/icons/options.js'
 import SettingsIcon from 'shared/components/icons/settings.js'
+import MenuIcon from 'shared/components/icons/menu.js'
 import { linkClasses, Chevron } from 'shared/components/navigation/primary.js'
 
-const structure = (pattern, app) => ({
-  modes: [
-    { title: `Draft ${pattern.config.name}`, action: '' },
-  ],
-  options: [
-    { title: `Draft ${pattern.config.name}`, action: '' },
-  ],
-  settings: [
-    { title: `Draft ${pattern.config.name}`, action: '' },
-  ],
+// Component that renders a sublevel of navigation
+const ModeButtons = props => props.children.length === 0
+  ? null
+  : (
+    <ul className="pl-5 list-inside">
+      {props.children.map(mode => (
+        <li key={mode.title} className="flex flex-row">
+          <button title={mode.title} className={`
+            grow pl-2 border-l-2
+            ${linkClasses}
+            hover:border-secondary
+            sm:hover:border-secondary-focus
+            text-left
+            ${mode.name === props.mode
+              ? 'text-secondary border-secondary sm:text-secondary-focus sm:border-secondary-focus'
+              : 'text-base-content sm:text-neutral-content'
+            }
+          `}>
+            <span className={`
+              text-3xl mr-2 inline-block p-0 leading-3
+              ${mode.name === props.mode
+                ? 'text-secondary sm:text-secondary-focus translate-y-1'
+                : 'translate-y-3'
+              }
+            `}>
+              {mode.name === props.mode ? <>&bull;</> : <>&deg;</>}
+            </span>
+            <span className={mode.name === props.mode ? 'font-bold' : ''}>
+              { mode.title }
+            </span>
+          </button>
+        </li>
+      ))}
+    </ul>
+  )
+
+const groupMaker = (t, setMode, pattern) => ({
+  modes: {
+    icon: <MenuIcon />,
+    title: t('app.modes'),
+    children: [
+      {
+        name: 'measurements',
+        title: t('app.measurements'),
+        onClick: () => setMode('measurements')
+      },
+      {
+        name: 'draft',
+        title: t('app.draftThing', { thing: pattern }),
+        onClick: () => setMode('draft')
+      },
+      {
+        name: 'test',
+        title: t('app.testThing', { thing: pattern }),
+        onClick: () => setMode('test')
+      },
+      {
+        name: 'export',
+        title: t('app.export'),
+        onClick: () => setMode('export')
+      },
+    ]
+  },
+  toggles: {
+    icon: <OptionsIcon />,
+    title: `${t('cfp.turnOn')} / ${t('cfp.turnOff')}`,
+  },
+  options: {
+    icon: <OptionsIcon />,
+    title: t('app.designOptions'),
+  },
+  settings: {
+    icon: <SettingsIcon />,
+    title: t('app.settings')
+  },
 })
 
-const TopLevel = ({ icon, title }) => (
+const WorkbenchMenu = props => {
+  const groups = groupMaker(props.app.t, props.setMode, props.pattern)
+  return (
+    <nav className="smmax-w-96 grow mb-12">
+      {Object.keys(groups).map(group => (
         <details className='py-1'>
           <summary className={`
             flex flex-row uppercase gap-4 font-bold text-lg
@@ -26,28 +96,18 @@ const TopLevel = ({ icon, title }) => (
             text-base-content
             sm:text-neutral-content
             items-center
-    `}>
-      <span className="text-secondary-focus mr-4">{icon}</span>
+          `} open={'modes' === group}>
+            <span className="text-secondary-focus mr-4">{groups[group].icon}</span>
             <span className={`grow ${linkClasses}`}>
-        {title}
+              {groups[group].title}
             </span>
             <Chevron />
           </summary>
-    fixme
+          {group === 'modes' && <ModeButtons {...props} {...groups[group]} />}
         </details>
-)
-
-const Menu = ({ app, pattern }) => ([
-  <TopLevel key='a' title='Toggles' icon={<OptionsIcon />} pattern={pattern} />,
-  <TopLevel key='b' title='Modes' icon={<OptionsIcon />} pattern={pattern} />,
-  <TopLevel key='c' title='Design Options' icon={<OptionsIcon />} pattern={pattern} />,
-  <TopLevel key='d' title='Pattern Settings' icon={<SettingsIcon />} pattern={pattern} />,
-])
-
-const WorkbenchMenu = ({ app, pattern }) => (
-  <nav className="smmax-w-96 grow mb-12">
-    <Menu app={app} pattern={pattern} />
+      ))}
     </nav>
-)
+  )
+}
 
 export default WorkbenchMenu

packages/freesewing.shared/components/workbench/non-human-measurements.js

@@ -0,0 +1,51 @@
+import { withBreasts, withoutBreasts } from '@freesewing/models'
+
+const nonHuman = {
+  withoutBreasts: {
+    dolls: {},
+    giants: {}
+  },
+  withBreasts: {
+    dolls: {},
+    giants: {}
+  }
+}
+const round = val => Math.round(val*10)/10
+
+for (let i=0.1;i<0.7;i+=0.1) {
+  const name = `${Math.round(i*10)}/10`
+  nonHuman.withBreasts.dolls[name] = {}
+  // withBreasts: Based on Anneke (size 34)
+  for (const [m, val] of Object.entries(withBreasts.size34)) {
+    nonHuman.withBreasts.dolls[name][m] = (m === 'shoulderSlope')
+      ? val
+      : round(val * i)
+  }
+  // withoutBreasts: Based on Ronan (size 42)
+  nonHuman.withoutBreasts.dolls[name] = {}
+  for (const [m, val] of Object.entries(withoutBreasts.size42)) {
+    nonHuman.withoutBreasts.dolls[name][m] = (m === 'shoulderSlope')
+      ? val
+      : round(val * i)
+  }
+}
+for (let i=1.5;i<=3;i+=0.5) {
+  const name = `${i}/1`
+  nonHuman.withBreasts.giants[name] = {}
+  // withBreasts: Based on Anneke (size 34)
+  for (const [m, val] of Object.entries(withBreasts.size34)) {
+    nonHuman.withBreasts.giants[name][m] = (m === 'shoulderSlope')
+      ? val
+      : round(val * i)
+  }
+  nonHuman.withoutBreasts.giants[name] = {}
+  // withoutBreasts: Based on Ronan (size 42)
+  for (const [m, val] of Object.entries(withoutBreasts.size42)) {
+    nonHuman.withoutBreasts.giants[name][m] = (m === 'shoulderSlope')
+      ? val
+      : round(val * i)
+  }
+}
+
+export default nonHuman
+

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

@@ -62,7 +62,7 @@ const WorkbenchWrapper = ({ app, pattern }) => {
     app: app,
     noSearch: true,
     workbench: true,
-    AltMenu: Menu
+    AltMenu: <Menu app={app} pattern={pattern} mode={mode} setMode={setMode} gist={gist} updateGist={updateGist} />
   }
 
   return (
@@ -75,7 +75,6 @@ const WorkbenchWrapper = ({ app, pattern }) => {
           updateGist={updateGist}
         />
       )}
-      <pre>{JSON.stringify(gist, null, 2)}</pre>
     </Layout>
   )
 }