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
|
@ -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 = []
|
||||
// Passive indication for points
|
||||
if (gist.xray) output.push(<PassiveXrayPoint {...props} key={'xp-' + pointName} />)
|
||||
// Active indication for points (point that have been clicked on)
|
||||
if (gist.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])
|
||||
output.push(<RevealPoint {...props} key={'rp-' + pointName} />)
|
||||
if (gist._state?.xray?.enabled) {
|
||||
// Passive indication for points
|
||||
output.push(<PassiveXrayPoint {...props} key={'xp-' + pointName} />)
|
||||
// Active indication for points (point that have been clicked on)
|
||||
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._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} />)
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue