1
0
Fork 0

wip(lab): More Xray work

This commit is contained in:
Joost De Cock 2022-01-30 12:21:08 +01:00
parent 7ae2c4b1eb
commit e62a862559
8 changed files with 166 additions and 105 deletions

View file

@ -3,65 +3,28 @@ import Point from '../point'
import Snippet from '../snippet'
import { getProps } from '../utils'
const raiseEvent = (evt) => console.log('raiseEVent not implemtned', evt)
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 = Object.keys(props.gist.xray?.reveal).indexOf(props.partName)%10
const { topLeft, bottomRight } = props.part
return (
<g>
<path d={`
M ${topLeft.x} ${topLeft.y}
L ${topLeft.x} ${bottomRight.y}
L ${bottomRight.x} ${bottomRight.y}
L ${bottomRight.x} ${topLeft.y}
z`} className={`fill-color-${i} opacity-10`} />
</g>
)
}
const Part = props => {
const { partName, part, app, gist, updateGist } = props
const focusPoint = (point, i) => {
const p = part.points[point]
const pathString = `M ${p.x} ${part.topLeft.y} `
+ `L ${p.x} ${part.bottomRight.y} `
+ `M ${part.topLeft.x} ${p.y} `
+ `L ${part.bottomRight.x} ${p.y} `
const classes = 'focus point c' + (i % 8) // Cycle through 8 colors
return (
<React.Fragment key={'fp' + point}>
<path d={pathString} className={classes} />
<circle
cx={p.x}
cy={p.y}
r="5"
className="contrast"
onClick={() =>
raiseEvent('clearFocus', {
part: partName,
type: 'points',
name: point
})
}
/>
</React.Fragment>
)
}
const focusCoords = (p, i) => {
let pathString = `M ${p.x} ${part.topLeft.y} `
pathString += `L ${p.x} ${part.bottomRight.y} `
pathString += `M ${part.topLeft.x} ${p.y} `
pathString += `L ${part.bottomRight.x} ${p.y} `
let classes = 'focus coords c' + (i % 4) // Cycle through 4 CSS classes
return (
<React.Fragment key={'cp' + i}>
<path d={pathString} className={classes} />
<circle
cx={p.x}
cy={p.y}
r="5"
className={classes}
onClick={() =>
raiseEvent('clearFocus', {
partName: partName,
type: 'coords',
data: p
})
}
/>
</React.Fragment>
)
}
let grid = gist.paperless ? (
const grid = gist.paperless ? (
<rect
x={part.topLeft.x}
y={part.topLeft.y}
@ -72,36 +35,10 @@ const Part = props => {
/>
) : null
let focus = []
//if (gist.debug) {
// if (focus && typeof props.focus[props.name] !== 'undefined') {
// for (let i in props.focus[props.name].points)
// focus.push(focusPoint(props.focus[props.name].points[i], i))
// for (let i in props.focus[props.name].paths) {
// let name = props.focus[props.name].paths[i]
// focus.push(
// <path
// key={'fpa-' + name}
// d={props.part.paths[name].asPathstring()}
// className={'focus path c' + (i % 4)}
// onClick={() =>
// props.raiseEvent('clearFocus', {
// part: props.name,
// type: 'paths',
// name
// })
// }
// />
// )
// }
// for (let i in props.focus[props.name].coords)
// focus.push(focusCoords(props.focus[props.name].coords[i], i))
// }
//}
return (
<g {...getProps(part)} id={`part-${partName}`}>
{grid}
{props.gist?.xray?.reveal?.[partName] && <XrayPart {...props} />}
{Object.keys(part.paths).map((pathName) => (
<Path
key={name}