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

@ -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 = []
// 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} />)