chore(workbench): move xray to _state in gist
This commit is contained in:
parent
7e5e3b2665
commit
99232fe020
10 changed files with 50 additions and 36 deletions
|
@ -11,7 +11,6 @@ const defaultSettings = {
|
|||
renderer: 'react',
|
||||
embed: true,
|
||||
debug: true,
|
||||
xray: false,
|
||||
}
|
||||
|
||||
export default defaultSettings
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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} />)
|
||||
|
|
|
@ -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(
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
)}
|
||||
|
|
|
@ -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 />
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue