diff --git a/config/software/packages.json b/config/software/packages.json index 165a748b285..04d3268570f 100644 --- a/config/software/packages.json +++ b/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" diff --git a/sites/shared/components/workbench/menus/ui-settings/config.mjs b/sites/shared/components/workbench/menus/ui-settings/config.mjs index 3c1811081e7..845657c2b29 100644 --- a/sites/shared/components/workbench/menus/ui-settings/config.mjs +++ b/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', diff --git a/sites/shared/components/workbench/menus/ui-settings/index.mjs b/sites/shared/components/workbench/menus/ui-settings/index.mjs index 612ffac57d1..cdf58ba7061 100644 --- a/sites/shared/components/workbench/menus/ui-settings/index.mjs +++ b/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] diff --git a/sites/shared/components/workbench/menus/ui-settings/inputs.mjs b/sites/shared/components/workbench/menus/ui-settings/inputs.mjs index 5182c647645..609038b4edf 100644 --- a/sites/shared/components/workbench/menus/ui-settings/inputs.mjs +++ b/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) => +export const InspectSettingInput = (props) => diff --git a/sites/shared/components/workbench/menus/ui-settings/ui-settings.en.yaml b/sites/shared/components/workbench/menus/ui-settings/ui-settings.en.yaml index 24f8f98b868..e22b2251407 100644 --- a/sites/shared/components/workbench/menus/ui-settings/ui-settings.en.yaml +++ b/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 diff --git a/sites/shared/components/workbench/menus/ui-settings/values.mjs b/sites/shared/components/workbench/menus/ui-settings/values.mjs index 062c40fbb8b..d8d24f26146 100644 --- a/sites/shared/components/workbench/menus/ui-settings/values.mjs +++ b/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 }) => diff --git a/sites/shared/components/workbench/pattern/part.mjs b/sites/shared/components/workbench/pattern/part.mjs index 44ddae3c533..4bb947f1f4a 100644 --- a/sites/shared/components/workbench/pattern/part.mjs +++ b/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 ( diff --git a/sites/shared/components/workbench/views/draft/index.mjs b/sites/shared/components/workbench/views/draft/index.mjs index f25d018bb9a..b049a865860 100644 --- a/sites/shared/components/workbench/views/draft/index.mjs +++ b/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, -}) => ( -
-
- +}) => { + let output = null + if (ui.renderer === 'svg') { + try { + const __html = pattern.render() + output =
+ } catch (err) { + console.log(err) + } + } else output = + + console.log(pattern.getRenderProps()) + return 
{JSON.stringify(pattern.getRenderProps(), null, 2)}
+ + return ( +
+
+ 
{JSON.stringify(ui, null, 2)}
+ {output} +
+
+ +
-
- -
-
-) + ) +}