1
0
Fork 0

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

This commit is contained in:
joostdecock 2023-06-01 17:01:48 +02:00
parent 1ac287e6f5
commit c95ebd5934
8 changed files with 57 additions and 39 deletions

View file

@ -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"

View file

@ -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',

View file

@ -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]

View file

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

View file

@ -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

View file

@ -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" />

View file

@ -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}>

View file

@ -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>
)
)
}