1
0
Fork 0

chore(workbench): move xray to _state in gist

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

View file

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

View file

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

View file

@ -8,7 +8,7 @@ const XrayPath = props => (
{...getProps(props.path)}
className="opacity-0 stroke-3xl stroke-contrast hover:opacity-25 hover:cursor-pointer"
onClick={() => props.updateGist(
['xray', 'parts', props.partName, 'paths', props.pathName],
['_state', 'xray', 'parts', props.partName, 'paths', props.pathName],
1
)}
/>
@ -26,7 +26,7 @@ const Path = props => {
)
if (path.attributes.get('data-text'))
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
}

View file

@ -6,7 +6,7 @@ const RevealPoint = props => {
const r = 15 * props.gist.scale
const { x, y } = props.point
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`
return (
<g>
@ -93,7 +93,7 @@ const ActiveXrayPoint = props => {
const r = 15 * props.gist.scale
const { x, y } = props.point
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 posProps = {
id,
@ -117,12 +117,12 @@ const PassiveXrayPoint = props => (
cy={props.point.y}
r={7.5 * props.gist.scale}
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(
['xray', 'parts', props.partName, 'points', props.pointName]
['_state', 'xray', 'parts', props.partName, 'points', props.pointName]
)
: () => props.updateGist(
['xray', 'parts', props.partName, 'points', props.pointName],
['_state', 'xray', 'parts', props.partName, 'points', props.pointName],
1
)
}
@ -134,14 +134,16 @@ const PassiveXrayPoint = props => (
const Point = props => {
const { point, pointName, partName, gist } = props
const output = []
if (gist._state?.xray?.enabled) {
// Passive indication for points
if (gist.xray) output.push(<PassiveXrayPoint {...props} key={'xp-' + pointName} />)
output.push(<PassiveXrayPoint {...props} key={'xp-' + pointName} />)
// Active indication for points (point that have been clicked on)
if (gist.xray?.parts?.[partName]?.points?.[pointName])
if (gist._state?.xray?.parts?.[partName]?.points?.[pointName])
output.push(<ActiveXrayPoint {...props} key={'rp-' + pointName} />)
// Reveal (based on clicking the seach icon in sidebar
if (gist.xray?.reveal?.[partName]?.points?.[pointName])
if (gist._state?.xray?.reveal?.[partName]?.points?.[pointName])
output.push(<RevealPoint {...props} key={'rp-' + pointName} />)
}
// Render text
if (point.attributes && point.attributes.get('data-text'))
output.push(<Text {...props} key={'point-' + pointName} />)

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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