wip(lab): More Xray work
This commit is contained in:
Joost De Cock
parent
7ae2c4b1eb
commit
e62a862559
8 changed files with 166 additions and 105 deletions
7
packages/freesewing.shared/components/icons/filter.js
Normal file
7
packages/freesewing.shared/components/icons/filter.js
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
const FilterIcon = () => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
export default FilterIcon
|
||||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,29 @@
|
|||
import Text from '../text'
|
||||
import Circle from '../circle'
|
||||
|
||||
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 classes = `stroke-sm stroke-color-${i} stroke-dashed`
|
||||
return (
|
||||
<g>
|
||||
<circle
|
||||
cx={x}
|
||||
cy={y}
|
||||
r={r}
|
||||
className={classes}
|
||||
/>
|
||||
<path d={`
|
||||
M ${x} ${topLeft.y} L ${x} ${y - r}
|
||||
m 0 ${2*r} L ${x} ${bottomRight.y}
|
||||
M ${topLeft.x} ${y} L ${x - r} ${y}
|
||||
m ${2*r} 0 L ${bottomRight.x} ${y}`} className={classes} />
|
||||
</g>
|
||||
)
|
||||
}
|
||||
|
||||
const XrayPoint = props => (
|
||||
<g>
|
||||
<circle
|
||||
|
|
@ -23,9 +46,11 @@ const XrayPoint = props => (
|
|||
|
||||
|
||||
const Point = props => {
|
||||
const { point, pointName } = props
|
||||
const { point, pointName, partName, gist } = props
|
||||
const output = []
|
||||
if (props.gist.xray) output.push(<XrayPoint {...props} key={'xp-' + pointName} />)
|
||||
if (gist.xray) output.push(<XrayPoint {...props} key={'xp-' + pointName} />)
|
||||
if (gist.xray?.reveal?.[partName]?.points?.[pointName])
|
||||
output.push(<RevealPoint {...props} key={'rp-' + pointName} />)
|
||||
if (point.attributes && point.attributes.get('data-text'))
|
||||
output.push(<Text {...props} key={'point-' + pointName} />)
|
||||
if (point.attributes && point.attributes.get('data-circle'))
|
||||
|
|
|
|||
|
|
@ -29,7 +29,10 @@ const SvgWrapper = props => {
|
|||
const { patternProps, gist, app, updateGist, unsetGist } = props
|
||||
|
||||
return <SizeMe>{({ size }) => (
|
||||
<TransformWrapper>
|
||||
<TransformWrapper
|
||||
minScale={0.1}
|
||||
centerZoomedOut={true}
|
||||
>
|
||||
<TransformComponent>
|
||||
<div style={{ width: size.width+'px', }}>
|
||||
<Svg {...patternProps} embed={gist.embed}>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,11 @@ import CoreSettings from './core-settings'
|
|||
import Xray from './xray'
|
||||
|
||||
export const Ul = props => <ul className="pl-5 list-inside">{props.children}</ul>
|
||||
export const Li = props => <li className="flex flex-row">{props.children}</li>
|
||||
export const Li = props => (
|
||||
<li className="flex flex-row hover:border-r-2 hover:border-r-secondary">
|
||||
{props.children}
|
||||
</li>
|
||||
)
|
||||
export const Details = props => (
|
||||
<details className="grow" open={props.open || false}>
|
||||
{props.children}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { Chevron } from 'shared/components/navigation/primary.js'
|
||||
import ClearIcon from 'shared/components/icons/clear.js'
|
||||
import FilterIcon from 'shared/components/icons/filter.js'
|
||||
import SearchIcon from 'shared/components/icons/search.js'
|
||||
import { Ul, Li, Details, Summary, SumDiv, Deg } from 'shared/components/workbench/menu'
|
||||
import Path from './path.js'
|
||||
|
|
@ -17,6 +18,13 @@ const XrayList = props => {
|
|||
|
||||
const part = props.gist.xray.parts[props.partName]
|
||||
|
||||
// Is this the only part on display?
|
||||
const only = (
|
||||
props.gist.only &&
|
||||
props.gist.only.length === 1 &&
|
||||
props.gist.only[0] === props.partName
|
||||
)
|
||||
|
||||
return (
|
||||
<Li>
|
||||
<Details>
|
||||
|
|
@ -26,6 +34,16 @@ const XrayList = props => {
|
|||
<span>{title}</span>
|
||||
<span className="ml-2 opacity-60">[{props.partName}]</span>
|
||||
</SumDiv>
|
||||
<button
|
||||
className={`px-3 hover:text-secondary-focus ${only ? 'text-accent' : 'text-secondary'}`}
|
||||
title={props.app.t('app.filter')}
|
||||
onClick={only
|
||||
? () => props.unsetGist(['only'])
|
||||
: () => props.updateGist(['only'], [props.partName])
|
||||
}
|
||||
>
|
||||
<FilterIcon />
|
||||
</button>
|
||||
<button
|
||||
className="text-accent px-3 hover:text-secondary-focus"
|
||||
onClick={() => props.unsetGist(['xray', 'parts', props.partName])}
|
||||
|
|
@ -62,11 +80,11 @@ const XrayList = props => {
|
|||
</SumDiv>
|
||||
<button
|
||||
className={`px-3 hover:text-secondary-focus"
|
||||
${props.gist.xray.reveal[props.partName][type][id]
|
||||
${props.gist?.xray?.reveal?.[props.partName]?.[type]?.[id]
|
||||
? 'text-accent'
|
||||
: 'text-secondary'
|
||||
}`}
|
||||
onClick={props.gist.xray.reveal[props.partName][type][id]
|
||||
onClick={props.gist.xray?.reveal?.[props.partName]?.[type]?.[id]
|
||||
? () => props.unsetGist(
|
||||
['xray', 'reveal', props.partName, type, id]
|
||||
)
|
||||
|
|
@ -80,7 +98,10 @@ const XrayList = props => {
|
|||
</button>
|
||||
<button
|
||||
className="text-accent px-3 hover:text-secondary-focus"
|
||||
onClick={() => props.unsetGist(['xray', 'parts', props.partName, type, id])}
|
||||
onClick={() => {
|
||||
props.unsetGist(['xray', 'parts', props.partName, type, id])
|
||||
props.unsetGist(['xray', 'reveal', props.partName, type, id])
|
||||
}}
|
||||
>
|
||||
<ClearIcon />
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -106,6 +106,66 @@
|
|||
svg.freesewing.pattern tspan.fill-note,
|
||||
svg.freesewing.pattern path.fill-note,
|
||||
svg.freesewing.pattern circle.fill-note { @apply fs-fill-note }
|
||||
.fs-stroke-color-0 { stroke: var(--pattern-color-0); }
|
||||
.fs-stroke-color-1 { stroke: var(--pattern-color-1); }
|
||||
.fs-stroke-color-2 { stroke: var(--pattern-color-2); }
|
||||
.fs-stroke-color-3 { stroke: var(--pattern-color-3); }
|
||||
.fs-stroke-color-4 { stroke: var(--pattern-color-4); }
|
||||
.fs-stroke-color-5 { stroke: var(--pattern-color-5); }
|
||||
.fs-stroke-color-6 { stroke: var(--pattern-color-6); }
|
||||
.fs-stroke-color-7 { stroke: var(--pattern-color-7); }
|
||||
.fs-stroke-color-8 { stroke: var(--pattern-color-8); }
|
||||
.fs-stroke-color-9 { stroke: var(--pattern-color-9); }
|
||||
svg.freesewing.pattern circle.stroke-color-0,
|
||||
svg.freesewing.pattern path.stroke-color-0 { @apply fs-stroke-color-0 }
|
||||
svg.freesewing.pattern circle.stroke-color-1,
|
||||
svg.freesewing.pattern path.stroke-color-1 { @apply fs-stroke-color-1 }
|
||||
svg.freesewing.pattern circle.stroke-color-2,
|
||||
svg.freesewing.pattern path.stroke-color-2 { @apply fs-stroke-color-2 }
|
||||
svg.freesewing.pattern circle.stroke-color-3,
|
||||
svg.freesewing.pattern path.stroke-color-3 { @apply fs-stroke-color-3 }
|
||||
svg.freesewing.pattern circle.stroke-color-4,
|
||||
svg.freesewing.pattern path.stroke-color-4 { @apply fs-stroke-color-4 }
|
||||
svg.freesewing.pattern circle.stroke-color-5,
|
||||
svg.freesewing.pattern path.stroke-color-5 { @apply fs-stroke-color-5 }
|
||||
svg.freesewing.pattern circle.stroke-color-6,
|
||||
svg.freesewing.pattern path.stroke-color-6 { @apply fs-stroke-color-6 }
|
||||
svg.freesewing.pattern circle.stroke-color-7,
|
||||
svg.freesewing.pattern path.stroke-color-7 { @apply fs-stroke-color-7 }
|
||||
svg.freesewing.pattern circle.stroke-color-8,
|
||||
svg.freesewing.pattern path.stroke-color-8 { @apply fs-stroke-color-8 }
|
||||
svg.freesewing.pattern circle.stroke-color-9,
|
||||
svg.freesewing.pattern path.stroke-color-9 { @apply fs-stroke-color-9 }
|
||||
.fs-fill-color-0 { fill: var(--pattern-color-0); }
|
||||
.fs-fill-color-1 { fill: var(--pattern-color-1); }
|
||||
.fs-fill-color-2 { fill: var(--pattern-color-2); }
|
||||
.fs-fill-color-3 { fill: var(--pattern-color-3); }
|
||||
.fs-fill-color-4 { fill: var(--pattern-color-4); }
|
||||
.fs-fill-color-5 { fill: var(--pattern-color-5); }
|
||||
.fs-fill-color-6 { fill: var(--pattern-color-6); }
|
||||
.fs-fill-color-7 { fill: var(--pattern-color-7); }
|
||||
.fs-fill-color-8 { fill: var(--pattern-color-8); }
|
||||
.fs-fill-color-9 { fill: var(--pattern-color-9); }
|
||||
svg.freesewing.pattern circle.fill-color-0,
|
||||
svg.freesewing.pattern path.fill-color-0 { @apply fs-fill-color-0 }
|
||||
svg.freesewing.pattern circle.fill-color-1,
|
||||
svg.freesewing.pattern path.fill-color-1 { @apply fs-fill-color-1 }
|
||||
svg.freesewing.pattern circle.fill-color-2,
|
||||
svg.freesewing.pattern path.fill-color-2 { @apply fs-fill-color-2 }
|
||||
svg.freesewing.pattern circle.fill-color-3,
|
||||
svg.freesewing.pattern path.fill-color-3 { @apply fs-fill-color-3 }
|
||||
svg.freesewing.pattern circle.fill-color-4,
|
||||
svg.freesewing.pattern path.fill-color-4 { @apply fs-fill-color-4 }
|
||||
svg.freesewing.pattern circle.fill-color-5,
|
||||
svg.freesewing.pattern path.fill-color-5 { @apply fs-fill-color-5 }
|
||||
svg.freesewing.pattern circle.fill-color-6,
|
||||
svg.freesewing.pattern path.fill-color-6 { @apply fs-fill-color-6 }
|
||||
svg.freesewing.pattern circle.fill-color-7,
|
||||
svg.freesewing.pattern path.fill-color-7 { @apply fs-fill-color-7 }
|
||||
svg.freesewing.pattern circle.fill-color-8,
|
||||
svg.freesewing.pattern path.fill-color-8 { @apply fs-fill-color-8 }
|
||||
svg.freesewing.pattern circle.fill-color-9,
|
||||
svg.freesewing.pattern path.fill-color-9 { @apply fs-fill-color-9 }
|
||||
|
||||
.fs-fill-bg { fill: var(--pattern-bg); }
|
||||
.fs-fill-current { fill: currentColor; }
|
||||
|
|
|
|||
|
|
@ -194,22 +194,26 @@ module.exports = {
|
|||
// Color for noting things on a pattern
|
||||
'--pattern-note': colors.violet['500'],
|
||||
|
||||
// Color 0 in develop mode
|
||||
'--pattern-dev-0': colors.red['500'],
|
||||
// Color 1 in develop mode
|
||||
'--pattern-dev-1': colors.green['500'],
|
||||
// Color 2 in develop mode
|
||||
'--pattern-dev-2': colors.blue['500'],
|
||||
// Color 3 in develop mode
|
||||
'--pattern-dev-3': colors.yellow['500'],
|
||||
// Color 4 in develop mode
|
||||
'--pattern-dev-4': colors.pink['500'],
|
||||
// Color 5 in develop mode
|
||||
'--pattern-dev-5': colors.violet['500'],
|
||||
// Color 6 in develop mode
|
||||
'--pattern-dev-6': colors.teal['500'],
|
||||
// Color 7 in develop mode
|
||||
'--pattern-dev-7': colors.neutral['500'],
|
||||
// Color 0 in xray reveals
|
||||
'--pattern-color-0': colors.red['500'],
|
||||
// Color 1 in xray reveals
|
||||
'--pattern-color-1': colors.green['500'],
|
||||
// Color 2 in xray reveals
|
||||
'--pattern-color-2': colors.blue['500'],
|
||||
// Color 3 in xray reveals
|
||||
'--pattern-color-3': colors.yellow['500'],
|
||||
// Color 4 in xray reveals
|
||||
'--pattern-color-4': colors.pink['500'],
|
||||
// Color 5 in xray reveals
|
||||
'--pattern-color-5': colors.violet['500'],
|
||||
// Color 6 in xray reveals
|
||||
'--pattern-color-6': colors.teal['500'],
|
||||
// Color 7 in xray reveals
|
||||
'--pattern-color-7': colors.amber['500'],
|
||||
// Color 8 in xray reveals
|
||||
'--pattern-color-8': colors.fuchsia['500'],
|
||||
// Color 9 in xray reveals
|
||||
'--pattern-color-9': colors.cyan['500'],
|
||||
|
||||
// Pattern xs text size
|
||||
'--pattern-text-xs': '0.2rem',
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue