chore(shared): Updated ui settings and work on render view
This commit is contained in:
parent
1ac287e6f5
commit
c95ebd5934
8 changed files with 57 additions and 39 deletions
|
@ -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"
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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]
|
||||
|
|
|
@ -56,4 +56,4 @@ export const RendererSettingInput = ({ name, config, current, update, t }) => (
|
|||
/>
|
||||
)
|
||||
|
||||
export const XRaySettingInput = (props) => <ListSetting {...props} />
|
||||
export const InspectSettingInput = (props) => <ListSetting {...props} />
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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" />
|
||||
|
|
|
@ -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}>
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
)
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue