wip(lab): Work on xray mode
This commit is contained in:
Joost De Cock
parent
c05d9dce23
commit
ec2fd35208
9 changed files with 215 additions and 89 deletions
|
|
@ -3,13 +3,17 @@ import Point from '../point'
|
|||
import Snippet from '../snippet'
|
||||
import { getProps } from '../utils'
|
||||
|
||||
const Part = (props) => {
|
||||
const raiseEvent = (evt) => console.log('raiseEVent not implemtned', evt)
|
||||
|
||||
const Part = props => {
|
||||
const { partName, part, app, gist, updateGist } = props
|
||||
|
||||
const focusPoint = (point, i) => {
|
||||
const p = props.part.points[point]
|
||||
const pathString = `M ${p.x} ${props.part.topLeft.y} `
|
||||
+ `L ${p.x} ${props.part.bottomRight.y} `
|
||||
+ `M ${props.part.topLeft.x} ${p.y} `
|
||||
+ `L ${props.part.bottomRight.x} ${p.y} `
|
||||
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}>
|
||||
|
|
@ -20,8 +24,8 @@ const Part = (props) => {
|
|||
r="5"
|
||||
className="contrast"
|
||||
onClick={() =>
|
||||
props.raiseEvent('clearFocus', {
|
||||
part: props.name,
|
||||
raiseEvent('clearFocus', {
|
||||
part: partName,
|
||||
type: 'points',
|
||||
name: point
|
||||
})
|
||||
|
|
@ -32,10 +36,10 @@ const Part = (props) => {
|
|||
}
|
||||
|
||||
const focusCoords = (p, i) => {
|
||||
let pathString = `M ${p.x} ${props.part.topLeft.y} `
|
||||
pathString += `L ${p.x} ${props.part.bottomRight.y} `
|
||||
pathString += `M ${props.part.topLeft.x} ${p.y} `
|
||||
pathString += `L ${props.part.bottomRight.x} ${p.y} `
|
||||
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}>
|
||||
|
|
@ -46,8 +50,8 @@ const Part = (props) => {
|
|||
r="5"
|
||||
className={classes}
|
||||
onClick={() =>
|
||||
props.raiseEvent('clearFocus', {
|
||||
part: props.name,
|
||||
raiseEvent('clearFocus', {
|
||||
partName: partName,
|
||||
type: 'coords',
|
||||
data: p
|
||||
})
|
||||
|
|
@ -57,79 +61,74 @@ const Part = (props) => {
|
|||
)
|
||||
}
|
||||
|
||||
let grid = props.paperless ? (
|
||||
let grid = gist.paperless ? (
|
||||
<rect
|
||||
x={props.part.topLeft.x}
|
||||
y={props.part.topLeft.y}
|
||||
width={props.part.width}
|
||||
height={props.part.height}
|
||||
x={part.topLeft.x}
|
||||
y={part.topLeft.y}
|
||||
width={part.width}
|
||||
height={part.height}
|
||||
className="grid"
|
||||
fill={'url(#grid-' + props.name + ')'}
|
||||
fill={'url(#grid-' + partName + ')'}
|
||||
/>
|
||||
) : null
|
||||
|
||||
let focus = []
|
||||
if (props.develop) {
|
||||
if (props.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))
|
||||
}
|
||||
}
|
||||
//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(props.part)} id={`part-${props.name}`}>
|
||||
<g {...getProps(part)} id={`part-${partName}`}>
|
||||
{grid}
|
||||
{Object.keys(props.part.paths).map((name) => (
|
||||
{Object.keys(part.paths).map((pathName) => (
|
||||
<Path
|
||||
key={name}
|
||||
name={name}
|
||||
part={props.name}
|
||||
locale={props.locale}
|
||||
path={props.part.paths[name]}
|
||||
focus={props.focus}
|
||||
pathName={pathName}
|
||||
path={part.paths[pathName]}
|
||||
topLeft={props.part.topLeft}
|
||||
bottomRight={props.part.bottomRight}
|
||||
develop={props.develop}
|
||||
raiseEvent={props.raiseEvent}
|
||||
app={props.app}
|
||||
{...props}
|
||||
/>
|
||||
))}
|
||||
{Object.keys(props.part.points).map((name) => (
|
||||
<Point
|
||||
key={name}
|
||||
name={name}
|
||||
part={props.name}
|
||||
locale={props.locale}
|
||||
pointName={name}
|
||||
point={props.part.points[name]}
|
||||
focus={props.focus}
|
||||
topLeft={props.part.topLeft}
|
||||
bottomRight={props.part.bottomRight}
|
||||
develop={props.develop}
|
||||
raiseEvent={props.raiseEvent}
|
||||
app={props.app}
|
||||
{...props}
|
||||
/>
|
||||
))}
|
||||
{Object.keys(props.part.snippets).map((name) => (
|
||||
<Snippet key={name} name={name} snippet={props.part.snippets[name]} />
|
||||
{Object.keys(props.part.snippets).map((snippetName) => (
|
||||
<Snippet
|
||||
key={name}
|
||||
snippetName={snippetName}
|
||||
snippet={props.part.snippets[snippetName]}
|
||||
{...props}
|
||||
/>
|
||||
))}
|
||||
{focus}
|
||||
</g>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue