chore(shared): Updated ui settings and work on render view

config/software/packages.json

@@ -4,6 +4,7 @@
   "models": "Body measurements data for a range of default sizes",
   "new-design": "Initializer package for a new FreeSewing design: npx @freesewing/new-design",
   "prettier-config": "FreeSewing's shared configuration for prettier",
+  "react-components": "React components by/for FreeSewing",
   "snapseries": "A series of common sizes for elastics and other series to be used with snapped percentage options",
   "rehype-jargon": "A Rehype plugin for jargon terms",
   "rehype-highlight-lines": "A Rehype plugin to add highlighted lines to code blocks"

sites/shared/components/workbench/menus/ui-settings/config.mjs

@@ -17,12 +17,12 @@ export const loadSettingsConfig = () => ({
     dflt: 'react',
     emoji: '🚀',
   },
-  xray: {
+  inspect: {
     control: 4, // Show when control > 3
     list: [0, 1],
     choiceTitles: {
-      0: 'xrayNo',
-      1: 'xrayYes',
+      0: 'inspectNo',
+      1: 'inspectYes',
     },
     valueTitles: {
       0: 'no',

sites/shared/components/workbench/menus/ui-settings/index.mjs

@@ -9,8 +9,8 @@ import { ModalContext } from 'shared/context/modal-context.mjs'
 import { ModalWrapper } from 'shared/components/wrappers/modal.mjs'
 import { Collapse } from 'shared/components/collapse.mjs'
 import { HelpIcon, DesktopIcon, ClearIcon } from 'shared/components/icons.mjs'
-import { ControlSettingInput, RendererSettingInput, XRaySettingInput } from './inputs.mjs'
-import { ControlSettingValue, RendererSettingValue, XRaySettingValue } from './values.mjs'
+import { ControlSettingInput, RendererSettingInput, InspectSettingInput } from './inputs.mjs'
+import { ControlSettingValue, RendererSettingValue, InspectSettingValue } from './values.mjs'
 //import { ConsoleLog } from './log.mjs'
 //import { XrayReset } from './reset.mjs'
 //import { XrayList } from './list.mjs'
@@ -21,14 +21,14 @@ export const ns = ['ui-settings']
 const values = {
   control: ControlSettingValue,
   renderer: RendererSettingValue,
-  xray: XRaySettingValue,
+  inspect: InspectSettingValue,
 }
 
 // Facilitate lookup of the input component
 const inputs = {
   control: ControlSettingInput,
   renderer: RendererSettingInput,
-  xray: XRaySettingInput,
+  inspect: InspectSettingInput,
 }
 
 const wasChanged = (current, name, settingsConfig) => {
@@ -54,8 +54,8 @@ export const UiTitle = ({ name, t, current = null, open = false, emoji = '' }) =
 export const Setting = ({ name, config, current, update, t, changed, loadDocs, control, ui }) => {
   const drillProps = { name, config, current, update, t, changed, control }
 
-  // Don't bother with X-Ray in SVG mode
-  if (name === 'xray' && ui.renderer === 'svg') return null
+  // Don't bother with inspect in SVG mode
+  if (name === 'inspect' && ui.renderer === 'svg') return null
 
   const Input = inputs[name]
   const Value = values[name]

sites/shared/components/workbench/menus/ui-settings/inputs.mjs

@@ -56,4 +56,4 @@ export const RendererSettingInput = ({ name, config, current, update, t }) => (
   />
 )
 
-export const XRaySettingInput = (props) => <ListSetting {...props} />
+export const InspectSettingInput = (props) => <ListSetting {...props} />

sites/shared/components/workbench/menus/ui-settings/ui-settings.en.yaml

@@ -8,11 +8,11 @@ renderWithCore.t: Render with Freesewing's Core library
 renderWithCore.d: Render directly to SVG from Core. Allows no interactivity and is optimized for print. Use this if you want to know what it will look like when exported.
 control.t: User Experience
 control.d: Which user experience do you prefer? Please note that this is an account setting, so it will impact the entire website.
-xray.t: Inspect
-xray.d: Enabling this will allow you to drill down into the pattern, and pull up information about its various parts, paths, and points.
-xrayNo.t: Disable the inspector
-xrayNo.d: This is the default, the pattern inspector is disabled and the pattern is displayed as usual.
-xrayYes.t: Enable the inspector
-xrayYes.d: With the pattern inspector enabled and the React rendering engine selected, we will add interactivity to the pattern to allow you to inspect the various elements that make up the pattern.
+inspect.t: Inspect
+inspect.d: Enabling this will allow you to drill down into the pattern, and pull up information about its various parts, paths, and points.
+inspectNo.t: Disable the inspector
+inspectNo.d: This is the default, the pattern inspector is disabled and the pattern is displayed as usual.
+inspectYes.t: Enable the inspector
+inspectYes.d: With the pattern inspector enabled and the React rendering engine selected, we will add interactivity to the pattern to allow you to inspect the various elements that make up the pattern.
 no: No
 yes: Yes

sites/shared/components/workbench/menus/ui-settings/values.mjs

@@ -6,5 +6,5 @@ const ListValue = ({ current, t, config, changed }) =>
     : t(`ui-settings:${config.valueTitles[config.dflt]}`)
 
 export const RendererSettingValue = ListValue
-export const XRaySettingValue = ListValue
+export const InspectSettingValue = ListValue
 export const ControlSettingValue = ({ control }) => <Difficulty score={control} color="primary" />

sites/shared/components/workbench/pattern/part.mjs

@@ -102,6 +102,7 @@ export const PartInner = forwardRef(({ partName, part, settings, showInfo, ui, u
         fill={'url(#grid-' + partName + ')'}
       />
     ) : null
+  console.log({ part })
 
   return (
     <g ref={ref}>

sites/shared/components/workbench/views/draft/index.mjs

@@ -1,4 +1,4 @@
-import { Pattern } from 'shared/components/workbench/pattern/index.mjs'
+import { Pattern as ReactPattern } from 'pkgs/react-components/src/pattern/index.mjs'
 import { DraftMenu, ns as menuNs } from './menu.mjs'
 
 export const ns = menuNs
@@ -14,25 +14,41 @@ export const DraftView = ({
   language,
   account,
   DynamicDocs,
-}) => (
-  <div className="flex flex-row">
-    <div className="w-2/3 shrink-0 grow lg:p-4 sticky top-0">
-      <Pattern {...{ pattern, setView, settings, ui, update }} />
+}) => {
+  let output = null
+  if (ui.renderer === 'svg') {
+    try {
+      const __html = pattern.render()
+      output = <div dangerouslySetInnerHTML={{ __html }} />
+    } catch (err) {
+      console.log(err)
+    }
+  } else output = <ReactPattern renderProps={pattern.getRenderProps()} />
+
+  console.log(pattern.getRenderProps())
+  return <pre>{JSON.stringify(pattern.getRenderProps(), null, 2)}</pre>
+
+  return (
+    <div className="flex flex-row">
+      <div className="w-2/3 shrink-0 grow lg:p-4 sticky top-0">
+        <pre>{JSON.stringify(ui, null, 2)}</pre>
+        {output}
+      </div>
+      <div className="w-1/3 shrink grow-0 lg:p-4 max-w-2xl h-screen overflow-scroll">
+        <DraftMenu
+          {...{
+            design,
+            pattern,
+            patternConfig,
+            settings,
+            ui,
+            update,
+            language,
+            account,
+            DynamicDocs,
+          }}
+        />
+      </div>
     </div>
-    <div className="w-1/3 shrink grow-0 lg:p-4 max-w-2xl h-screen overflow-scroll">
-      <DraftMenu
-        {...{
-          design,
-          pattern,
-          patternConfig,
-          settings,
-          ui,
-          update,
-          language,
-          account,
-          DynamicDocs,
-        }}
-      />
-    </div>
-  </div>
-)
+  )
+}