VSinerva/freesewing
1
0
Fork 0
Code Activity

chore(workbench): move xray to _state in gist

Browse source
This commit is contained in:
Joost De Cock 2022-02-20 19:02:25 +01:00
parent 7e5e3b2665
commit 99232fe020
10 changed files with 50 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

1
packages/freesewing.shared/components/workbench/default-settings.js
View file

@ -11,7 +11,6 @@ const defaultSettings = {
renderer: 'react', renderer: 'react',
embed: true, embed: true,
debug: true, debug: true,
xray: false,
} }
export default defaultSettings export default defaultSettings

10
packages/freesewing.shared/components/workbench/draft/part/index.js
View file

@ -6,8 +6,8 @@ import { getProps } from '../utils'
const XrayPart = props => { const XrayPart = props => {
// Don't bother if this is the only part on display // Don't bother if this is the only part on display
if (props.gist.only && props.gist.only.length === 1) return null if (props.gist.only && props.gist.only.length === 1) return null
const i = props.gist.xray?.reveal const i = props.gist._state?.xray?.reveal
? Object.keys(props.gist.xray.reveal).indexOf(props.partName)%10 ? Object.keys(props.gist._state?.xray.reveal).indexOf(props.partName)%10
: 0 : 0
const { topLeft, bottomRight } = props.part const { topLeft, bottomRight } = props.part
@ -40,7 +40,11 @@ const Part = props => {
return ( return (
<g {...getProps(part)} id={`part-${partName}`}> <g {...getProps(part)} id={`part-${partName}`}>
{grid} {grid}
{props.gist?.xray?.reveal?.[partName] && <XrayPart {...props} />} {
props.gist?._state?.xray?.enabled &&
props.gist?._state?.xray?.reveal?.[partName]
&& <XrayPart {...props} />
}
{Object.keys(part.paths).map((pathName) => ( {Object.keys(part.paths).map((pathName) => (
<Path <Path
key={pathName} key={pathName}

4
packages/freesewing.shared/components/workbench/draft/path/index.js
View file

@ -8,7 +8,7 @@ const XrayPath = props => (
{...getProps(props.path)} {...getProps(props.path)}
className="opacity-0 stroke-3xl stroke-contrast hover:opacity-25 hover:cursor-pointer" className="opacity-0 stroke-3xl stroke-contrast hover:opacity-25 hover:cursor-pointer"
onClick={() => props.updateGist( onClick={() => props.updateGist(
['xray', 'parts', props.partName, 'paths', props.pathName], ['_state', 'xray', 'parts', props.partName, 'paths', props.pathName],
1 1
)} )}
/> />
@ -26,7 +26,7 @@ const Path = props => {
) )
if (path.attributes.get('data-text')) if (path.attributes.get('data-text'))
output.push(<TextOnPath key={'text-on-path-' + name} pathId={pathId} {...props} />) output.push(<TextOnPath key={'text-on-path-' + name} pathId={pathId} {...props} />)
if (props.gist.xray) output.push(<XrayPath {...props} key={'xpath'+pathId} />) if (props.gist._state?.xray?.enabled) output.push(<XrayPath {...props} key={'xpath'+pathId} />)
return output return output
} }

28
packages/freesewing.shared/components/workbench/draft/point/index.js
View file

@ -6,7 +6,7 @@ const RevealPoint = props => {
const r = 15 * props.gist.scale const r = 15 * props.gist.scale
const { x, y } = props.point const { x, y } = props.point
const { topLeft, bottomRight } = props.part const { topLeft, bottomRight } = props.part
const i = Object.keys(props.gist.xray.reveal[props.partName].points).indexOf(props.pointName)%10 const i = Object.keys(props.gist._state.xray.reveal[props.partName].points).indexOf(props.pointName)%10
const classes = `stroke-sm stroke-color-${i} stroke-dashed` const classes = `stroke-sm stroke-color-${i} stroke-dashed`
return ( return (
<g> <g>
@ -93,7 +93,7 @@ const ActiveXrayPoint = props => {
const r = 15 * props.gist.scale const r = 15 * props.gist.scale
const { x, y } = props.point const { x, y } = props.point
const { topLeft, bottomRight } = props.part const { topLeft, bottomRight } = props.part
const i = Object.keys(props.gist.xray.parts[props.partName].points).indexOf(props.pointName)%10 const i = Object.keys(props.gist._state.xray.parts[props.partName].points).indexOf(props.pointName)%10
const classes = `stroke-sm stroke-color-${i} stroke-dashed` const classes = `stroke-sm stroke-color-${i} stroke-dashed`
const posProps = { const posProps = {
id, id,
@ -117,12 +117,12 @@ const PassiveXrayPoint = props => (
cy={props.point.y} cy={props.point.y}
r={7.5 * props.gist.scale} r={7.5 * props.gist.scale}
className="opacity-0 stroke-lining fill-lining hover:opacity-25 hover:cursor-pointer" className="opacity-0 stroke-lining fill-lining hover:opacity-25 hover:cursor-pointer"
onClick={props.gist.xray?.parts?.[props.partName]?.points?.[props.pointName] onClick={props.gist._state.xray?.parts?.[props.partName]?.points?.[props.pointName]
? () => props.unsetGist( ? () => props.unsetGist(
['xray', 'parts', props.partName, 'points', props.pointName] ['_state', 'xray', 'parts', props.partName, 'points', props.pointName]
) )
: () => props.updateGist( : () => props.updateGist(
['xray', 'parts', props.partName, 'points', props.pointName], ['_state', 'xray', 'parts', props.partName, 'points', props.pointName],
1 1
) )
} }
@ -134,14 +134,16 @@ const PassiveXrayPoint = props => (
const Point = props => { const Point = props => {
const { point, pointName, partName, gist } = props const { point, pointName, partName, gist } = props
const output = [] const output = []
// Passive indication for points if (gist._state?.xray?.enabled) {
if (gist.xray) output.push(<PassiveXrayPoint {...props} key={'xp-' + pointName} />) // Passive indication for points
// Active indication for points (point that have been clicked on) output.push(<PassiveXrayPoint {...props} key={'xp-' + pointName} />)
if (gist.xray?.parts?.[partName]?.points?.[pointName]) // Active indication for points (point that have been clicked on)
output.push(<ActiveXrayPoint {...props} key={'rp-' + pointName} />) if (gist._state?.xray?.parts?.[partName]?.points?.[pointName])
// Reveal (based on clicking the seach icon in sidebar output.push(<ActiveXrayPoint {...props} key={'rp-' + pointName} />)
if (gist.xray?.reveal?.[partName]?.points?.[pointName]) // Reveal (based on clicking the seach icon in sidebar
output.push(<RevealPoint {...props} key={'rp-' + pointName} />) if (gist._state?.xray?.reveal?.[partName]?.points?.[pointName])
output.push(<RevealPoint {...props} key={'rp-' + pointName} />)
}
// Render text // Render text
if (point.attributes && point.attributes.get('data-text')) if (point.attributes && point.attributes.get('data-text'))
output.push(<Text {...props} key={'point-' + pointName} />) output.push(<Text {...props} key={'point-' + pointName} />)

9
packages/freesewing.shared/components/workbench/layout/print/index.js
View file

@ -1,3 +1,4 @@
import { useEffect } from 'react'
import { useTranslation } from 'next-i18next' import { useTranslation } from 'next-i18next'
import Settings from './settings' import Settings from './settings'
import Draft from '../draft' import Draft from '../draft'
@ -9,6 +10,14 @@ const addPages = (gist) => {
const PrintLayout = props => { const PrintLayout = props => {
useEffect(() => {
if (props.gist?._state?.xray?.enabled) props.updateGist(
['_state', 'xray', 'enabled'],
false
)
}, [])
const { t } = useTranslation(['workbench']) const { t } = useTranslation(['workbench'])
const draft = new props.pattern(props.gist).use(pluginBuilder( const draft = new props.pattern(props.gist).use(pluginBuilder(

2
packages/freesewing.shared/components/workbench/layout/print/settings.js
View file

@ -12,7 +12,7 @@ const PrintLayoutSettings = props => {
<div className="flex flex-row gap-4 justify-center"> <div className="flex flex-row gap-4 justify-center">
<PageSizePicker {...props} /> <PageSizePicker {...props} />
<OrientationPicker {...props} /> <OrientationPicker {...props} />
<pre>{JSON.stringify(props.gist._state, null ,2)}</pre> <pre>{JSON.stringify(props.gist, null ,2)}</pre>
</div> </div>
) )
} }

2
packages/freesewing.shared/components/workbench/menu/xray/disable.js
View file

@ -6,7 +6,7 @@ const DisableXray = props => {
return ( return (
<Li> <Li>
<SumButton onClick={() => props.updateGist(['xray', 'enabled'], false)}> <SumButton onClick={() => props.updateGist(['_state', 'xray', 'enabled'], false)}>
<SumDiv> <SumDiv>
<Deg /> <Deg />
<span> <span>

10
packages/freesewing.shared/components/workbench/menu/xray/index.js
View file

@ -12,7 +12,7 @@ const Xray = props => {
return ( return (
<Details open> <Details open>
<TopSummary icon={<XrayIcon />}> <TopSummary icon={<XrayIcon />}>
{props.gist?.xray?.enabled {props.gist?._state?.xray?.enabled
? ( ? (
<> <>
<span className={`grow ${linkClasses} hover:cursor-resize font-bold uppercase`}> <span className={`grow ${linkClasses} hover:cursor-resize font-bold uppercase`}>
@ -24,7 +24,7 @@ const Xray = props => {
<> <>
<button <button
className={`grow ${linkClasses} hover:cursor-resize uppercase font-bold text-left`} className={`grow ${linkClasses} hover:cursor-resize uppercase font-bold text-left`}
onClick={() => props.updateGist(['xray', 'enabled'], true)} onClick={() => props.updateGist(['_state', 'xray', 'enabled'], true)}
> >
{t('settings:xray.t')} {t('settings:xray.t')}
</button> </button>
@ -35,13 +35,13 @@ const Xray = props => {
) )
} }
</TopSummary> </TopSummary>
{props.gist?.xray?.enabled && ( {props.gist?._state?.xray?.enabled && (
<Ul> <Ul>
<Disable {...props} /> <Disable {...props} />
<Reset {...props} /> <Reset {...props} />
{ {
props.gist?.xray?.parts && props.gist?._state?.xray?.parts &&
Object.keys(props.gist.xray.parts).map(partName => <List {...props} partName={partName} />) Object.keys(props.gist._state?.xray.parts).map(partName => <List {...props} partName={partName} />)
} }
</Ul> </Ul>
)} )}

18
packages/freesewing.shared/components/workbench/menu/xray/list.js
View file

@ -17,7 +17,7 @@ const XrayList = props => {
const title = t(`parts:${props.partName}`) + ` (${props.partName})` const title = t(`parts:${props.partName}`) + ` (${props.partName})`
const part = props.gist.xray.parts[props.partName] const part = props.gist._state.xray.parts[props.partName]
// Is this the only part on display? // Is this the only part on display?
const only = ( const only = (
@ -47,7 +47,7 @@ const XrayList = props => {
</button> </button>
<button <button
className="text-accent px-3 hover:text-secondary-focus" className="text-accent px-3 hover:text-secondary-focus"
onClick={() => props.unsetGist(['xray', 'parts', props.partName])} onClick={() => props.unsetGist(['_state', 'xray', 'parts', props.partName])}
> >
<ClearIcon /> <ClearIcon />
</button> </button>
@ -63,7 +63,7 @@ const XrayList = props => {
</SumDiv> </SumDiv>
<button <button
className="text-accent px-3 hover:text-secondary-focus" className="text-accent px-3 hover:text-secondary-focus"
onClick={() => props.unsetGist(['xray', 'parts', props.partName, type])} onClick={() => props.unsetGist(['_state', 'xray', 'parts', props.partName, type])}
> >
<ClearIcon /> <ClearIcon />
</button> </button>
@ -81,16 +81,16 @@ const XrayList = props => {
</SumDiv> </SumDiv>
<button <button
className={`px-3 hover:text-secondary-focus" className={`px-3 hover:text-secondary-focus"
${props.gist.xray?.reveal?.[props.partName]?.[type]?.[id] ${props.gist._state?.xray?.reveal?.[props.partName]?.[type]?.[id]
? 'text-accent' ? 'text-accent'
: 'text-secondary' : 'text-secondary'
}`} }`}
onClick={props.gist.xray?.reveal?.[props.partName]?.[type]?.[id] onClick={props.gist._state?.xray?.reveal?.[props.partName]?.[type]?.[id]
? () => props.unsetGist( ? () => props.unsetGist(
['xray', 'reveal', props.partName, type, id] ['_state', 'xray', 'reveal', props.partName, type, id]
) )
: () => props.updateGist( : () => props.updateGist(
['xray', 'reveal', props.partName, type, id], ['_state', 'xray', 'reveal', props.partName, type, id],
id id
) )
} }
@ -100,8 +100,8 @@ const XrayList = props => {
<button <button
className="text-accent px-3 hover:text-secondary-focus" className="text-accent px-3 hover:text-secondary-focus"
onClick={() => { onClick={() => {
props.unsetGist(['xray', 'parts', props.partName, type, id]) props.unsetGist(['_state', 'xray', 'parts', props.partName, type, id])
props.unsetGist(['xray', 'reveal', props.partName, type, id]) props.unsetGist(['_state', 'xray', 'reveal', props.partName, type, id])
}} }}
> >
<ClearIcon /> <ClearIcon />

2
packages/freesewing.shared/components/workbench/menu/xray/reset.js
View file

@ -6,7 +6,7 @@ const ResetXray = props => {
return ( return (
<Li> <Li>
<SumButton onClick={() => props.updateGist(['xray'], { enabled: true })}> <SumButton onClick={() => props.updateGist(['_state', 'xray'], { enabled: true })}>
<SumDiv> <SumDiv>
<Deg /> <Deg />
<span>{ t(`reset`) }</span> <span>{ t(`reset`) }</span>