wip(shared): Paths support in Inspector
This commit is contained in:
joostdecock
parent
4075e35641
commit
9c7ea25e3b
11 changed files with 317 additions and 651 deletions
|
|
@ -224,9 +224,9 @@ export const CoreSettings = ({
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="px-2 mt-8">
|
||||
<div className="px-2">
|
||||
{control > 4 ? (
|
||||
<div className="border-t border-solid border-base-300 pb-2 mx-36"></div>
|
||||
<div className="border-t border-solid border-base-300 mx-36"></div>
|
||||
) : (
|
||||
<>
|
||||
<h5 className="flex flex-row gap-2 items-center">
|
||||
|
|
|
|||
|
|
@ -246,7 +246,7 @@ export const DesignOptions = ({
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="px-2 mt-8">
|
||||
<div className="px-2">
|
||||
{control > 4 ? null : (
|
||||
<>
|
||||
<h5 className="flex flex-row gap-2 items-center">
|
||||
|
|
|
|||
|
|
@ -103,12 +103,16 @@ export const Setting = ({ name, config, current, update, t, changed, loadDocs, c
|
|||
|
||||
if (control > 4) {
|
||||
// Save gurus some clicks
|
||||
if (name === 'renderer')
|
||||
const onClick = {
|
||||
renderer: () => (current === 'svg' ? update.ui([name]) : update.ui([name], 'svg')),
|
||||
inspect: () => (current === 1 ? update.ui([name]) : update.ui([name], 1)),
|
||||
}
|
||||
if (['renderer', 'inspect'].includes(name))
|
||||
return (
|
||||
<Collapse
|
||||
color={changed ? 'accent' : 'primary'}
|
||||
title={<UiTitle {...titleProps} />}
|
||||
onClick={() => (current === 'svg' ? update.ui([name]) : update.ui([name], 'svg'))}
|
||||
onClick={onClick[name]}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
@ -149,9 +153,9 @@ export const UiSettings = ({ design, update, settings, ui, control, language, Dy
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="px-2 mt-8">
|
||||
<div className="px-2">
|
||||
{control > 4 ? (
|
||||
<div className="border-t border-solid border-base-300 pb-2 mx-36"></div>
|
||||
<div className="border-t border-solid border-base-300 mx-36"></div>
|
||||
) : (
|
||||
<>
|
||||
<h5 className="flex flex-row gap-2 items-center">
|
||||
|
|
|
|||
|
|
@ -1,608 +0,0 @@
|
|||
// Dependencies
|
||||
import { getProps } from './utils.mjs'
|
||||
import { round, formatMm, getId } from 'shared/utils.mjs'
|
||||
// Hooks
|
||||
import { useTranslation } from 'next-i18next'
|
||||
// Components
|
||||
import { TextOnPath } from './text.mjs'
|
||||
import { RawSpan } from 'shared/components/raw-span.mjs'
|
||||
|
||||
export const pointCoords = (point) =>
|
||||
point ? `[ ${round(point.x, 2)}, ${round(point.y, 2)} ]` : null
|
||||
|
||||
export const Tr = ({ children }) => <tr className="border border-base-300">{children}</tr>
|
||||
export const KeyTd = ({ children }) => <td className="p-3 text-right">{children}:</td>
|
||||
export const ValTd = ({ children }) => <td className="p-3">{children}</td>
|
||||
|
||||
export const TextAlongPath = ({ id, size, txt }) => (
|
||||
<text>
|
||||
<textPath xlinkHref={`#${id}`} startOffset="50%">
|
||||
<tspan
|
||||
style={{ textAnchor: 'middle', fontSize: size }}
|
||||
className="fill-neutral-content fill-opacity-50"
|
||||
dy={size * -0.4}
|
||||
>
|
||||
{txt}
|
||||
</tspan>
|
||||
</textPath>
|
||||
</text>
|
||||
)
|
||||
export const PointCircle = ({ point, size, className = 'stroke-neutral-content' }) => (
|
||||
<circle
|
||||
cx={point.x}
|
||||
cy={point.y}
|
||||
r={size / 50}
|
||||
className={className}
|
||||
fill="none"
|
||||
strokeWidth={size / 150}
|
||||
strokeOpacity="0.5"
|
||||
/>
|
||||
)
|
||||
|
||||
const CpCircle = ({ point, className = 'fill-lining no-stroke' }) => (
|
||||
<circle cx={point.x} cy={point.y} r={1.5} className={className} />
|
||||
)
|
||||
|
||||
const EpCircle = ({ point, className = 'fill-note no-stroke' }) => (
|
||||
<circle cx={point.x} cy={point.y} r={1.5} className={className} />
|
||||
)
|
||||
|
||||
const pathDimensions = (from, to, cp1 = false, cp2 = false, path = false) => {
|
||||
const topLeft = {
|
||||
x: to.x < from.x ? to.x : from.x,
|
||||
y: to.y < from.y ? to.y : from.y,
|
||||
}
|
||||
const bottomRight = {
|
||||
x: to.x > from.x ? to.x : from.x,
|
||||
y: to.y > from.y ? to.y : from.y,
|
||||
}
|
||||
let bbox = false
|
||||
// Deal with curves
|
||||
if (cp1 && cp2) {
|
||||
if (cp1.x < topLeft.x) topLeft.x = cp1.x
|
||||
if (cp2.x < topLeft.x) topLeft.x = cp2.x
|
||||
if (cp1.x > bottomRight.x) bottomRight.x = cp1.x
|
||||
if (cp2.x > bottomRight.x) bottomRight.x = cp2.x
|
||||
if (cp1.y < topLeft.y) topLeft.y = cp1.y
|
||||
if (cp2.y < topLeft.y) topLeft.y = cp2.y
|
||||
if (cp1.y > bottomRight.y) bottomRight.y = cp1.y
|
||||
if (cp2.y > bottomRight.y) bottomRight.y = cp2.y
|
||||
// This undocumented core methods returns the curve's bounding box
|
||||
bbox = path.bbox()
|
||||
}
|
||||
const w = bottomRight.x - topLeft.x
|
||||
const h = bottomRight.y - topLeft.y
|
||||
const size = w > h ? w : h
|
||||
|
||||
return {
|
||||
topLeft,
|
||||
bottomRight,
|
||||
w,
|
||||
h,
|
||||
size,
|
||||
bbox,
|
||||
}
|
||||
}
|
||||
|
||||
export const Defs = () => (
|
||||
<defs>
|
||||
<marker orient="auto" refY="0.0" refX="0.0" id="arrowTo" style={{ overflow: 'visible' }}>
|
||||
<path
|
||||
className="fill-neutral-content"
|
||||
d="M 0,0 L -12,-4 C -10,-2 -10,2 -12, 4 z"
|
||||
fillOpacity="0.5"
|
||||
></path>
|
||||
</marker>
|
||||
<marker orient="auto" refY="0.0" refX="0.0" id="arrowFrom" style={{ overflow: 'visible' }}>
|
||||
<path
|
||||
className="fill-neutral-content"
|
||||
d="M 0,0 L 12,-4 C 10,-2 10,2 12, 4 z"
|
||||
fillOpacity="0.5"
|
||||
></path>
|
||||
</marker>
|
||||
</defs>
|
||||
)
|
||||
|
||||
export const svgProps = {
|
||||
xmlns: 'http://www.w3.org/2000/svg',
|
||||
xmlnsSvg: 'http://www.w3.org/2000/svg',
|
||||
xmlnsXlink: 'http://www.w3.org/1999/xlink',
|
||||
style: { maxHeight: 'inherit', strokeLinecap: 'round', strokeLinejoin: 'round' },
|
||||
}
|
||||
|
||||
const Line = ({ path, pathName, partName, i, units }) => {
|
||||
const ops = path.ops
|
||||
const from = ops[0].to
|
||||
const to = ops[1].to
|
||||
const { topLeft, bottomRight, w, h, size } = pathDimensions(from, to)
|
||||
const id = `${partName}_${pathName}_${i}`
|
||||
|
||||
const xyProps = {
|
||||
className: 'stroke-neutral-content',
|
||||
strokeOpacity: '0.5',
|
||||
fill: 'none',
|
||||
strokeWidth: size / 300,
|
||||
}
|
||||
|
||||
return (
|
||||
<svg
|
||||
{...svgProps}
|
||||
viewBox={`${topLeft.x - size / 10} ${topLeft.y - size / 10} ${w + size / 5} ${h + size / 5}`}
|
||||
>
|
||||
<path
|
||||
id={`${id}_x`}
|
||||
{...xyProps}
|
||||
d={`M ${topLeft.x},${bottomRight.y} L ${bottomRight.x},${bottomRight.y}`}
|
||||
/>
|
||||
<TextAlongPath
|
||||
id={`${id}_x`}
|
||||
size={size / 18}
|
||||
txt={formatMm(bottomRight.x - topLeft.x, units, 'notags')}
|
||||
/>
|
||||
<path
|
||||
id={`${id}_y`}
|
||||
{...xyProps}
|
||||
d={`M ${topLeft.x},${bottomRight.y} L ${topLeft.x},${topLeft.y}`}
|
||||
/>
|
||||
<TextAlongPath
|
||||
id={`${id}_y`}
|
||||
size={size / 18}
|
||||
txt={formatMm(bottomRight.y - topLeft.y, units, 'notags')}
|
||||
/>
|
||||
<path
|
||||
id={id}
|
||||
d={`M ${from.x},${from.y} L ${to.x},${to.y}`}
|
||||
className="stroke-neutral-content"
|
||||
strokeLinecap="round"
|
||||
strokeWidth={size / 100}
|
||||
/>
|
||||
<TextAlongPath id={id} size={size / 18} txt={formatMm(path.length(), units, 'notags')} />
|
||||
<PointCircle point={from} size={size} />
|
||||
<PointCircle point={to} size={size} />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
const Curve = ({ path, pathName, partName, i }) => {
|
||||
const ops = path.ops
|
||||
const from = ops[0].to
|
||||
const { to, cp1, cp2 } = ops[1]
|
||||
const { topLeft, w, h, size, bbox } = pathDimensions(from, to, cp1, cp2, path)
|
||||
const id = `${partName}_${pathName}_${i}`
|
||||
|
||||
const cpProps = {
|
||||
className: 'stroke-success',
|
||||
strokeOpacity: '0.85',
|
||||
fill: 'none',
|
||||
strokeWidth: size / 300,
|
||||
}
|
||||
const xyProps = {
|
||||
...cpProps,
|
||||
strokeOpacity: '0.5',
|
||||
className: 'stroke-neutral-content',
|
||||
markerEnd: 'url(#arrowTo)',
|
||||
markerStart: 'url(#arrowFrom)',
|
||||
}
|
||||
|
||||
return (
|
||||
<svg
|
||||
{...svgProps}
|
||||
viewBox={`${topLeft.x - size / 10} ${topLeft.y - size / 10} ${w + size / 5} ${h + size / 5}`}
|
||||
>
|
||||
<Defs />
|
||||
<path
|
||||
id={`${id}_x`}
|
||||
{...xyProps}
|
||||
d={`M ${bbox.topLeft.x},${bbox.bottomRight.y} L ${bbox.bottomRight.x},${bbox.bottomRight.y}`}
|
||||
/>
|
||||
<TextAlongPath
|
||||
id={`${id}_x`}
|
||||
size={size / 18}
|
||||
txt={formatMm(bbox.bottomRight.x - bbox.topLeft.x, units, 'notags')}
|
||||
/>
|
||||
<path
|
||||
id={`${id}_y`}
|
||||
{...xyProps}
|
||||
d={`M ${bbox.topLeft.x},${bbox.bottomRight.y} L ${bbox.topLeft.x},${bbox.topLeft.y}`}
|
||||
/>
|
||||
<TextAlongPath
|
||||
id={`${id}_y`}
|
||||
size={size / 18}
|
||||
txt={formatMm(bbox.bottomRight.y - bbox.topLeft.y, units, 'notags')}
|
||||
/>
|
||||
<path id={`${id}_cp1`} {...cpProps} d={`M ${from.x},${from.y} L ${cp1.x},${cp1.y}`} />
|
||||
<PointCircle point={cp1} size={size} className="stroke-success" />
|
||||
<path id={`${id}_cp2`} {...cpProps} d={`M ${to.x},${to.y} L ${cp2.x},${cp2.y}`} />
|
||||
<PointCircle point={cp2} size={size} className="stroke-success" />
|
||||
<path
|
||||
id={id}
|
||||
d={`M ${from.x},${from.y} C ${cp1.x},${cp1.y} ${cp2.x},${cp2.y} ${to.x},${to.y}`}
|
||||
className="stroke-neutral-content"
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeWidth={size / 100}
|
||||
/>
|
||||
<TextAlongPath id={id} size={size / 18} txt={formatMm(path.length(), units, 'notags')} />
|
||||
<PointCircle point={from} size={size} />
|
||||
<PointCircle point={to} size={size} />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
const MiniPath = ({ path, pathName, partName, units }) => {
|
||||
const bbox = path.bbox()
|
||||
const id = `${partName}_${pathName}_mini}`
|
||||
const w = bbox.bottomRight.x - bbox.topLeft.x
|
||||
const h = bbox.bottomRight.y - bbox.topLeft.y
|
||||
const size = w > h ? w : h
|
||||
|
||||
const xyProps = {
|
||||
fill: 'none',
|
||||
strokeWidth: size / 300,
|
||||
strokeOpacity: '0.5',
|
||||
className: 'stroke-neutral-content',
|
||||
markerEnd: 'url(#arrowTo)',
|
||||
markerStart: 'url(#arrowFrom)',
|
||||
}
|
||||
|
||||
return (
|
||||
<svg
|
||||
{...svgProps}
|
||||
viewBox={`${bbox.topLeft.x - size / 10} ${bbox.topLeft.y - size / 10} ${w + size / 5} ${
|
||||
h + size / 5
|
||||
}`}
|
||||
className="freesewing pattern z-50"
|
||||
>
|
||||
<Defs />
|
||||
<path
|
||||
id={`${id}_x`}
|
||||
{...xyProps}
|
||||
d={`M ${bbox.topLeft.x},${bbox.bottomRight.y} L ${bbox.bottomRight.x},${bbox.bottomRight.y}`}
|
||||
/>
|
||||
<TextAlongPath
|
||||
id={`${id}_x`}
|
||||
size={size / 18}
|
||||
txt={formatMm(bbox.bottomRight.x - bbox.topLeft.x, units, 'notags')}
|
||||
/>
|
||||
<path
|
||||
id={`${id}_y`}
|
||||
{...xyProps}
|
||||
d={`M ${bbox.topLeft.x},${bbox.bottomRight.y} L ${bbox.topLeft.x},${bbox.topLeft.y}`}
|
||||
/>
|
||||
<TextAlongPath
|
||||
id={`${id}_y`}
|
||||
size={size / 18}
|
||||
txt={formatMm(bbox.bottomRight.y - bbox.topLeft.y, units, 'notags')}
|
||||
/>
|
||||
<path
|
||||
id={id}
|
||||
d={path.asPathstring()}
|
||||
className="stroke-neutral-content"
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeWidth={size / 100}
|
||||
/>
|
||||
<TextAlongPath id={id} size={size / 18} txt={formatMm(path.length(), units, 'notags')} />
|
||||
<XrayPath {...props} />)
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
const lineInfo = ({ path, partName, units, i }) => (
|
||||
<div className="p-4 border bg-neutral bg-opacity-60 shadow rounded-lg">
|
||||
<h5 className="text-neutral-content text-center pb-4">Line info</h5>
|
||||
<div className="flex flex-row flex-wrap">
|
||||
<table className="border-collapse h-fit">
|
||||
<tbody>
|
||||
<Tr>
|
||||
<KeyTd>From</KeyTd>
|
||||
<ValTd>{pointCoords(path.ops[0].to)}</ValTd>
|
||||
</Tr>
|
||||
<Tr>
|
||||
<KeyTd>To</KeyTd>
|
||||
<ValTd>{pointCoords(path.ops[1].to)}</ValTd>
|
||||
</Tr>
|
||||
<Tr>
|
||||
<KeyTd>Length</KeyTd>
|
||||
<ValTd>{formatMm(path.length(), units, 'notags')}</ValTd>
|
||||
</Tr>
|
||||
<Tr>
|
||||
<KeyTd>Width</KeyTd>
|
||||
<ValTd>
|
||||
<RawSpan html={formatMm(Math.abs(path.ops[0].to.dx(path.ops[1].to)), units)} />
|
||||
</ValTd>
|
||||
</Tr>
|
||||
<Tr>
|
||||
<KeyTd>Height</KeyTd>
|
||||
<ValTd>
|
||||
<RawSpan html={formatMm(Math.abs(path.ops[0].to.dy(path.ops[1].to)), units)} />
|
||||
</ValTd>
|
||||
</Tr>
|
||||
<Tr>
|
||||
<KeyTd>Part</KeyTd>
|
||||
<ValTd>{partName}</ValTd>
|
||||
</Tr>
|
||||
<Tr>
|
||||
<KeyTd>Draw Op</KeyTd>
|
||||
<ValTd>
|
||||
{i}/{ops.length}
|
||||
</ValTd>
|
||||
</Tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="max-w-md" style={{ maxHeight: '80vh' }}>
|
||||
<Line {...props} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
const XrayLine = ({ i, path, partName, units, showInfo }) => (
|
||||
<>
|
||||
<path
|
||||
d={path.asPathstring()}
|
||||
{...getProps(path)}
|
||||
className="opacity-0 stroke-4xl stroke-note hover:opacity-25 hover:cursor-pointer"
|
||||
onClick={(evt) => showInfo(evt, lineInfo({ path, partName, units, i }))}
|
||||
/>
|
||||
<EpCircle point={path.ops[0].to} />
|
||||
<EpCircle point={path.ops[1].to} />
|
||||
</>
|
||||
)
|
||||
|
||||
const curveInfo = ({ i, path, partName, units }) => (
|
||||
<div className="p-4 border bg-neutral bg-opacity-40 shadow rounded-lg">
|
||||
<h5 className="text-neutral-content text-center pb-4">Curve info</h5>
|
||||
<div className="flex flex-row flex-wrap">
|
||||
<table className="border-collapse h-fit">
|
||||
<tbody>
|
||||
<Tr>
|
||||
<KeyTd>From</KeyTd>
|
||||
<ValTd>{pointCoords(path.ops[0].to)}</ValTd>
|
||||
</Tr>
|
||||
<Tr>
|
||||
<KeyTd>Cp1</KeyTd>
|
||||
<ValTd>{pointCoords(path.ops[1].cp1)}</ValTd>
|
||||
</Tr>
|
||||
<Tr>
|
||||
<KeyTd>Cp2</KeyTd>
|
||||
<ValTd>{pointCoords(path.ops[1].cp2)}</ValTd>
|
||||
</Tr>
|
||||
<Tr>
|
||||
<KeyTd>To</KeyTd>
|
||||
<ValTd>{pointCoords(path.ops[1].to)}</ValTd>
|
||||
</Tr>
|
||||
<Tr>
|
||||
<KeyTd>Length</KeyTd>
|
||||
<ValTd>
|
||||
<RawSpan html={formatMm(path.length(), units)} />
|
||||
</ValTd>
|
||||
</Tr>
|
||||
<Tr>
|
||||
<KeyTd>Width</KeyTd>
|
||||
<ValTd>
|
||||
<RawSpan html={formatMm(Math.abs(path.ops[0].to.dx(path.ops[1].to)), units)} />
|
||||
</ValTd>
|
||||
</Tr>
|
||||
<Tr>
|
||||
<KeyTd>Height</KeyTd>
|
||||
<ValTd>
|
||||
<RawSpan html={formatMm(Math.abs(path.ops[0].to.dy(path.ops[1].to)), units)} />
|
||||
</ValTd>
|
||||
</Tr>
|
||||
<Tr>
|
||||
<KeyTd>Part</KeyTd>
|
||||
<ValTd>{partName}</ValTd>
|
||||
</Tr>
|
||||
<Tr>
|
||||
<KeyTd>Draw Op</KeyTd>
|
||||
<ValTd>
|
||||
{i}/{ops.length}
|
||||
</ValTd>
|
||||
</Tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="max-w-md" style={{ maxHeight: '80vh' }}>
|
||||
<Curve {...props} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
export const Attributes = ({ list }) =>
|
||||
list ? (
|
||||
<ul>
|
||||
{Object.keys(list).map((key) => (
|
||||
<li key={key}>
|
||||
<strong>{key}</strong>: {list[key]}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : null
|
||||
|
||||
export const pathInfo = ({ pathName, path, partName, units, showInfo }) => {
|
||||
const { t } = useTranslation(['workbench'])
|
||||
const bbox = path.bbox()
|
||||
|
||||
return (
|
||||
<div className="p-4 border bg-neutral bg-opacity-40 shadow rounded-lg">
|
||||
<h5 className="text-neutral-content text-center pb-4">{t('pathInfo')}</h5>
|
||||
<div className="flex flex-row flex-wrap overflow-scroll" style={{ maxHeight: '80vh' }}>
|
||||
<div>
|
||||
<table className="border-collapse h-fit">
|
||||
<tbody>
|
||||
<Tr>
|
||||
<KeyTd>{t('name')}</KeyTd>
|
||||
<ValTd>{pathName}</ValTd>
|
||||
</Tr>
|
||||
<Tr>
|
||||
<KeyTd>{t('length')}</KeyTd>
|
||||
<ValTd>
|
||||
<RawSpan html={formatMm(path.length(), units)} />
|
||||
</ValTd>
|
||||
</Tr>
|
||||
<Tr>
|
||||
<KeyTd>{t('width')}</KeyTd>
|
||||
<ValTd>
|
||||
<RawSpan html={formatMm(Math.abs(bbox.bottomRight.x - bbox.topLeft.x), units)} />
|
||||
</ValTd>
|
||||
</Tr>
|
||||
<Tr>
|
||||
<KeyTd>{t('height')}</KeyTd>
|
||||
<ValTd>
|
||||
<RawSpan html={formatMm(Math.abs(bbox.bottomRight.y - bbox.topLeft.y), units)} />
|
||||
</ValTd>
|
||||
</Tr>
|
||||
<Tr>
|
||||
<KeyTd>{t('topLeft')}</KeyTd>
|
||||
<ValTd>{pointCoords(bbox.topLeft)}</ValTd>
|
||||
</Tr>
|
||||
<Tr>
|
||||
<KeyTd>{t('bottomRight')}</KeyTd>
|
||||
<ValTd>{pointCoords(bbox.bottomRight)}</ValTd>
|
||||
</Tr>
|
||||
<Tr>
|
||||
<KeyTd>{t('part')}</KeyTd>
|
||||
<ValTd>{partName}</ValTd>
|
||||
</Tr>
|
||||
<Tr>
|
||||
<KeyTd>{t('attributes')}</KeyTd>
|
||||
<ValTd>
|
||||
<Attributes list={path.attributes.list} />
|
||||
</ValTd>
|
||||
</Tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="flex flex-row flex-wrap gap-2 mt-4">
|
||||
<button className="btn btn-success" onClick={() => console.log(path)}>
|
||||
console.log(path)
|
||||
</button>
|
||||
<button className="btn btn-success" onClick={() => console.table(path)}>
|
||||
console.table(path)
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<table className="border-collapse h-fit">
|
||||
<tbody>
|
||||
{path.ops.map((op, i) => (
|
||||
<Tr key={i}>
|
||||
<KeyTd>{i}</KeyTd>
|
||||
<ValTd>
|
||||
<PathOp op={op} />
|
||||
</ValTd>
|
||||
</Tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="max-w-md">
|
||||
<MiniPath {...{ pathName, path, partName, units, showInfo }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const PathOp = ({ op }) => {
|
||||
if (op.type === 'move')
|
||||
return (
|
||||
<span>
|
||||
<strong>Move</strong> to {pointCoords(op.to)}
|
||||
</span>
|
||||
)
|
||||
else if (op.type === 'line')
|
||||
return (
|
||||
<span>
|
||||
<strong>Line</strong> to {pointCoords(op.to)}
|
||||
</span>
|
||||
)
|
||||
else if (op.type === 'curve')
|
||||
return (
|
||||
<span>
|
||||
<strong>Curve</strong> to {pointCoords(op.to)}
|
||||
<br />
|
||||
Cp1: {pointCoords(op.cp1)}
|
||||
<br />
|
||||
Cp2: {pointCoords(op.cp2)}
|
||||
</span>
|
||||
)
|
||||
else if (op.type === 'noop') return <strong>NOOP</strong>
|
||||
else if (op.type === 'close') return <strong>Close</strong>
|
||||
else return <strong>FIXME: unknown path operation type: {op.type}</strong>
|
||||
}
|
||||
|
||||
const XrayCurve = ({ i, path, ops, units, showInfo }) => {
|
||||
const from = path.ops[0].to
|
||||
const { cp1, cp2, to } = path.ops[1]
|
||||
|
||||
return (
|
||||
<>
|
||||
<path
|
||||
d={path.asPathstring()}
|
||||
{...getProps(path)}
|
||||
className="opacity-0 stroke-4xl stroke-lining hover:opacity-25 hover:cursor-pointer"
|
||||
onClick={(evt) => showInfo(evt, curveInfo({ i, path, partName, units }))}
|
||||
/>
|
||||
<path d={`M ${from.x},${from.y} L ${cp1.x},${cp1.y}`} className="lining dotted" />
|
||||
<path d={`M ${to.x},${to.y} L ${cp2.x},${cp2.y}`} className="lining dotted" />
|
||||
<CpCircle point={cp1} />
|
||||
<CpCircle point={cp2} />
|
||||
<EpCircle point={from} />
|
||||
<EpCircle point={to} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const XrayPath = ({ path, pathName, partName, units, showInfo }) => {
|
||||
const classes = path.attributes.get('class')
|
||||
if (typeof classes === 'string' && classes.includes('noxray')) return null
|
||||
const ops = path.divide()
|
||||
|
||||
return (
|
||||
<g>
|
||||
<path
|
||||
d={path.asPathstring()}
|
||||
{...getProps(path)}
|
||||
className="opacity-0 stroke-7xl stroke-contrast hover:opacity-25 hover:cursor-pointer"
|
||||
onClick={(evt) => showInfo(evt, pathInfo({ pathName, path, partName, units }))}
|
||||
markerStart="none"
|
||||
markerEnd="none"
|
||||
/>
|
||||
{ops.length > 0
|
||||
? ops.map((op, i) =>
|
||||
op.ops[1].type === 'curve' ? (
|
||||
<XrayCurve path={op} ops={ops} i={i} pathName={`${pathName}_test`} key={i} />
|
||||
) : (
|
||||
<XrayLine path={op} ops={ops} i={i} pathName={`${pathName}_test`} key={i} />
|
||||
)
|
||||
)
|
||||
: null}
|
||||
</g>
|
||||
)
|
||||
}
|
||||
|
||||
export const Path = ({ pathName, path, partName, part, units, showInfo, ui, update }) => {
|
||||
if (path.hidden) return null
|
||||
const output = []
|
||||
const pathId = 'path-' + partName + '-' + pathName
|
||||
let d = ''
|
||||
try {
|
||||
d = path.asPathstring()
|
||||
} catch (err) {
|
||||
// Bail out
|
||||
console.log(`Failed to generate pathstring for path ${pathId} in part ${partName}`, err)
|
||||
return null
|
||||
}
|
||||
|
||||
output.push(<path id={pathId} key={pathId} d={d} {...getProps(path)} />)
|
||||
if (path.attributes.get('data-text'))
|
||||
output.push(
|
||||
<TextOnPath
|
||||
key={'text-on-path-' + getId(pathId)}
|
||||
pathId={pathId}
|
||||
{...{ path, ui, showInfo }}
|
||||
/>
|
||||
)
|
||||
if (ui.xray?.enabled) output.push(<XrayPath key={'xpath' + pathId} />)
|
||||
|
||||
return output
|
||||
}
|
||||
|
|
@ -46,6 +46,7 @@ export const DraftView = ({
|
|||
setInspect(newInspect)
|
||||
},
|
||||
data: inspect,
|
||||
pattern: pattern,
|
||||
}
|
||||
|
||||
let output = null
|
||||
|
|
|
|||
|
|
@ -28,10 +28,8 @@ export const Inspector = ({
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="px-2 mt-8">
|
||||
{control > 4 ? (
|
||||
<div className="border-t border-solid border-base-300 pb-2 mx-36"></div>
|
||||
) : (
|
||||
<div className="px-2">
|
||||
{control > 4 ? null : (
|
||||
<>
|
||||
<h5 className="flex flex-row gap-2 items-center">
|
||||
<WrenchIcon />
|
||||
|
|
@ -44,6 +42,7 @@ export const Inspector = ({
|
|||
{Object.values(inspector.data.show).map((props) => (
|
||||
<Collapse {...props} />
|
||||
))}
|
||||
{control > 4 ? <div className="border-t border-solid border-base-300 mx-36"></div> : null}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
278
sites/shared/components/workbench/views/draft/inspector/path.mjs
Normal file
278
sites/shared/components/workbench/views/draft/inspector/path.mjs
Normal file
|
|
@ -0,0 +1,278 @@
|
|||
// Components
|
||||
import { Path as ShowPath, utils } from 'pkgs/react-components/src/index.mjs'
|
||||
import { Attributes, pointCoords, KeyValTable } from './shared.mjs'
|
||||
import { round, formatMm } from 'shared/utils.mjs'
|
||||
import { TrashIcon, PrintIcon, SearchIcon } from 'shared/components/icons.mjs'
|
||||
import { Path as CorePath } from '@freesewing/core'
|
||||
|
||||
const { withinPartBounds, getId, getProps } = utils
|
||||
|
||||
const CpCircle = ({ point }) => (
|
||||
<circle cx={point.x} cy={point.y} r={2.5} className="stroke-contrast dotted stroke-sm no-fill" />
|
||||
)
|
||||
|
||||
const EpCircle = ({ point }) => (
|
||||
<circle cx={point.x} cy={point.y} r={2.5} className="stroke-note no-fill stroke-sm" />
|
||||
)
|
||||
|
||||
const InspectCurveOp = ({ op }) => {
|
||||
const from = op.ops[0].to
|
||||
const { cp1, cp2, to } = op.ops[1]
|
||||
|
||||
return (
|
||||
<>
|
||||
<path d={`M ${from.x},${from.y} L ${cp1.x},${cp1.y}`} className="contrast dotted stroke-sm" />
|
||||
<path d={`M ${to.x},${to.y} L ${cp2.x},${cp2.y}`} className="contrast dotted stroke-sm" />
|
||||
<CpCircle point={cp1} />
|
||||
<CpCircle point={cp2} />
|
||||
<EpCircle point={from} />
|
||||
<EpCircle point={to} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const Op = ({ op, len, i }) => (
|
||||
<tr
|
||||
className={`${['move', 'close'].includes(op.type) ? 'text-base-300' : ''} bg-primary w-full ${
|
||||
i % 2 === 0 ? 'bg-opacity-0' : 'bg-opacity-10'
|
||||
}`}
|
||||
>
|
||||
<td className="text-right px-1">{op.type}</td>
|
||||
<td className="text-center px-1">{pointCoords(op.to)}</td>
|
||||
<td className="text-center px-1">{op.cp1 ? pointCoords(op.cp1) : ''}</td>
|
||||
<td className="text-center px-1">{op.cp2 ? pointCoords(op.cp2) : ''}</td>
|
||||
<td className="text-center px-1">{len ? formatMm(len) : ''}</td>
|
||||
</tr>
|
||||
)
|
||||
|
||||
const Ops = ({ ops, path }) => (
|
||||
<table className="text-sm border-collapse h-fit border w-full border-primary shadow">
|
||||
<thead className="bg-primary bg-opacity-30">
|
||||
<th className="text-right">Type</th>
|
||||
<th>To</th>
|
||||
<th>Cp1</th>
|
||||
<th>Cp2</th>
|
||||
<th>Length</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
{path.ops.map((op, i) => {
|
||||
const len = typeof ops[i - 1] === 'undefined' ? 0 : ops[i - 1].length
|
||||
return <Op op={op} key={i} i={i} len={len} />
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
)
|
||||
|
||||
const RevealPath = ({ path, pathName, id, inspector }) => (
|
||||
<path d={path.d} className="stroke-3xl text-warning pulse-stroke" />
|
||||
)
|
||||
|
||||
const InspectOp = ({ stackName, pathName, op, i, inspector, t, path }) => {
|
||||
const id = utils.getId({ stackName, pathName, settings: { idPrefix: `pathOp-${i}-` } })
|
||||
const info = {
|
||||
id,
|
||||
title: (
|
||||
<div className="flex flex-row justify-between w-full">
|
||||
<span>
|
||||
<b className="capitalize">{op.ops[1].type}</b>: {pathName} | {stackName}
|
||||
</span>
|
||||
</div>
|
||||
),
|
||||
buttons: [
|
||||
<button key={1} className="btn btn-error" onClick={(evt) => inspector.hide(id)}>
|
||||
<TrashIcon />
|
||||
</button>,
|
||||
],
|
||||
openButtons: [
|
||||
<button
|
||||
className="btn btn-xs btn-ghost px-0"
|
||||
key="log"
|
||||
onClick={(evt) => {
|
||||
evt.stopPropagation()
|
||||
console.log(op)
|
||||
}}
|
||||
>
|
||||
<PrintIcon className="w-4 h-4" />
|
||||
</button>,
|
||||
<button
|
||||
className="btn btn-xs btn-ghost px-0"
|
||||
key="reveal"
|
||||
onClick={(evt) => {
|
||||
evt.stopPropagation()
|
||||
inspector.reveal(id)
|
||||
}}
|
||||
>
|
||||
<SearchIcon className="w-4 h-4" />
|
||||
</button>,
|
||||
<button
|
||||
className="btn btn-xs btn-ghost px-0"
|
||||
key="remove"
|
||||
onClick={(evt) => {
|
||||
evt.stopPropagation()
|
||||
inspector.hide(id)
|
||||
}}
|
||||
>
|
||||
<TrashIcon className="w-4 h-4" />
|
||||
</button>,
|
||||
],
|
||||
children: (
|
||||
<KeyValTable
|
||||
rows={[
|
||||
['Type', op.ops[1].type],
|
||||
['Path', pathName],
|
||||
['Stack', stackName],
|
||||
[t('topLeft'), pointCoords(op.topLeft)],
|
||||
[t('bottomRight'), pointCoords(op.bottomRight)],
|
||||
[t('width'), formatMm(op.width)],
|
||||
[t('height'), formatMm(op.height)],
|
||||
[t('length'), formatMm(op.length)],
|
||||
]}
|
||||
/>
|
||||
),
|
||||
color: 'secondary',
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{inspector.data.reveal[id] ? (
|
||||
<path d={op.d} className="stroke-3xl text-warning pulse-stroke" />
|
||||
) : null}
|
||||
{op.ops[1].type === 'curve' ? <InspectCurveOp op={op} /> : null}
|
||||
<path
|
||||
d={op.d}
|
||||
className="opacity-0 stroke-3xl text-secondary hover:opacity-25 hover:cursor-pointer"
|
||||
onClick={(evt) => inspector.show(info)}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const InspectPath = ({ stackName, pathName, path, part, settings, t, inspector }) => {
|
||||
const classes = path.attributes.list.class
|
||||
if (typeof classes === 'string' && classes.includes('skip-inspector')) return null
|
||||
|
||||
// Pull the instantiated path from the pattern
|
||||
const pathObj = [...inspector.pattern.stacks[stackName].parts][0].paths[pathName]
|
||||
const ops = pathObj.divide().map((p) => {
|
||||
const result = p.asRenderProps()
|
||||
result.length = p.length()
|
||||
const bbox = p.bbox()
|
||||
|
||||
return {
|
||||
...result,
|
||||
...bbox,
|
||||
width: bbox.bottomRight.x - bbox.topLeft.x,
|
||||
height: bbox.bottomRight.y - bbox.topLeft.y,
|
||||
}
|
||||
})
|
||||
|
||||
const id = utils.getId({ stackName, pathName, settings: { idPrefix: 'path-' } })
|
||||
const info = {
|
||||
id,
|
||||
title: (
|
||||
<div className="flex flex-row justify-between w-full">
|
||||
<span>
|
||||
<b>Path</b>: {pathName} | {stackName}
|
||||
</span>
|
||||
{path.ops.length} ops
|
||||
</div>
|
||||
),
|
||||
openTitle: (
|
||||
<span>
|
||||
<b>Path</b>: {pathName} | {stackName}
|
||||
</span>
|
||||
),
|
||||
buttons: [
|
||||
<button key={1} className="btn btn-error" onClick={(evt) => inspector.hide(id)}>
|
||||
<TrashIcon />
|
||||
</button>,
|
||||
],
|
||||
openButtons: [
|
||||
<button
|
||||
className="btn btn-xs btn-ghost px-0"
|
||||
key="log"
|
||||
onClick={(evt) => {
|
||||
evt.stopPropagation()
|
||||
console.log(path)
|
||||
}}
|
||||
>
|
||||
<PrintIcon className="w-4 h-4" />
|
||||
</button>,
|
||||
<button
|
||||
className="btn btn-xs btn-ghost px-0"
|
||||
key="reveal"
|
||||
onClick={(evt) => {
|
||||
evt.stopPropagation()
|
||||
inspector.reveal(id)
|
||||
}}
|
||||
>
|
||||
<SearchIcon className="w-4 h-4" />
|
||||
</button>,
|
||||
<button
|
||||
className="btn btn-xs btn-ghost px-0"
|
||||
key="remove"
|
||||
onClick={(evt) => {
|
||||
evt.stopPropagation()
|
||||
inspector.hide(id)
|
||||
}}
|
||||
>
|
||||
<TrashIcon className="w-4 h-4" />
|
||||
</button>,
|
||||
],
|
||||
children: (
|
||||
<>
|
||||
<KeyValTable
|
||||
rows={[
|
||||
[t('name'), pathName],
|
||||
['Stack', stackName],
|
||||
[t('attributes'), <Attributes list={path.attributes.list} />],
|
||||
[t('topLeft'), pointCoords(path.topLeft)],
|
||||
[t('bottomRight'), pointCoords(path.bottomRight)],
|
||||
[t('width'), formatMm(path.width)],
|
||||
[t('height'), formatMm(path.height)],
|
||||
[t('length'), formatMm(pathObj.length())],
|
||||
]}
|
||||
/>
|
||||
<Ops ops={ops} path={path} />
|
||||
</>
|
||||
),
|
||||
color: 'primary',
|
||||
}
|
||||
|
||||
return (
|
||||
<g>
|
||||
{inspector.data.reveal[id] ? (
|
||||
<path d={path.d} className="stroke-3xl text-warning pulse-stroke" />
|
||||
) : null}
|
||||
<path
|
||||
d={path.d}
|
||||
{...getProps(path)}
|
||||
className="opacity-0 stroke-5xl text-primary hover:opacity-25 hover:cursor-pointer"
|
||||
onClick={(evt) => inspector.show(info)}
|
||||
markerStart="none"
|
||||
markerEnd="none"
|
||||
/>
|
||||
{ops.map((op, i) => (
|
||||
<InspectOp key={i} {...{ i, op, t, path, stackName, pathName, inspector }} />
|
||||
))}
|
||||
</g>
|
||||
)
|
||||
}
|
||||
|
||||
export const Path = ({
|
||||
stackName,
|
||||
pathName,
|
||||
part,
|
||||
path,
|
||||
settings,
|
||||
components,
|
||||
t,
|
||||
ui,
|
||||
update,
|
||||
inspector,
|
||||
}) => (
|
||||
<>
|
||||
<ShowPath {...{ stackName, pathName, path, part, settings, components, t }} />
|
||||
<InspectPath {...{ stackName, pathName, path, part, settings, t, inspector }} />
|
||||
</>
|
||||
)
|
||||
|
|
@ -4,6 +4,7 @@ import { useTranslation } from 'next-i18next'
|
|||
// Components
|
||||
import { PanZoomPattern } from 'shared/components/workbench/pan-zoom-pattern.mjs'
|
||||
import { Point } from './point.mjs'
|
||||
import { Path } from './path.mjs'
|
||||
|
||||
export const InspectorPattern = (props) => {
|
||||
const { t } = useTranslation(['workbench'])
|
||||
|
|
@ -11,6 +12,7 @@ export const InspectorPattern = (props) => {
|
|||
|
||||
const components = {
|
||||
Point: (props) => <Point {...props} inspector={inspector} />,
|
||||
Path: (props) => <Path {...props} inspector={inspector} />,
|
||||
}
|
||||
|
||||
return <PanZoomPattern {...props} {...{ t, components }} />
|
||||
|
|
|
|||
|
|
@ -1,10 +1,6 @@
|
|||
// Hooks
|
||||
import { useState, useEffect, useContext } from 'react'
|
||||
// Context
|
||||
import { ModalContext } from 'shared/context/modal-context.mjs'
|
||||
// Components
|
||||
import { Point as ShowPoint, Text, Circle, utils } from 'pkgs/react-components/src/index.mjs'
|
||||
import { Tr, KeyTd, ValTd, Attributes, pointCoords, useInfoLoader, KeyValTable } from './shared.mjs'
|
||||
import { Attributes, pointCoords, KeyValTable } from './shared.mjs'
|
||||
import { round } from 'shared/utils.mjs'
|
||||
import { TrashIcon, PrintIcon, SearchIcon } from 'shared/components/icons.mjs'
|
||||
|
||||
|
|
@ -142,21 +138,7 @@ const InspectPoint = ({
|
|||
</g>
|
||||
)
|
||||
}
|
||||
/*
|
||||
title,
|
||||
openTitle = false,
|
||||
children = [],
|
||||
buttons = [],
|
||||
top = true,
|
||||
bottom = false,
|
||||
color = 'primary',
|
||||
opened = false,
|
||||
toggle = false,
|
||||
toggleClasses = '',
|
||||
onClick = false,
|
||||
openButtons = null,
|
||||
className = '',
|
||||
*/
|
||||
|
||||
export const Point = ({
|
||||
stackName,
|
||||
pointName,
|
||||
|
|
@ -169,19 +151,12 @@ export const Point = ({
|
|||
update,
|
||||
inspector,
|
||||
}) => {
|
||||
const showInfo = useInfoLoader()
|
||||
|
||||
// Don't include parts outside the part bounding box
|
||||
if (!withinPartBounds(point, part)) return null
|
||||
|
||||
const pointProps = { stackName, pointName, part, point, settings, components, t }
|
||||
|
||||
return (
|
||||
<>
|
||||
<ShowPoint
|
||||
{...pointProps}
|
||||
{...{ stackName, pointName, part, point, settings, components, t }}
|
||||
/>
|
||||
<ShowPoint {...{ stackName, pointName, part, point, settings, components, t }} />
|
||||
<InspectPoint
|
||||
{...{ point, pointName, stackName, inspector, t, part }}
|
||||
scale={settings.scale}
|
||||
|
|
|
|||
|
|
@ -18,12 +18,12 @@ export const useInfoLoader = () => {
|
|||
}
|
||||
|
||||
export const KeyValTable = ({ rows }) => (
|
||||
<table className="border-collapse h-fit">
|
||||
<table className="border-collapse h-fit mb-2">
|
||||
<tbody>
|
||||
{rows.map((row) => (
|
||||
<tr>
|
||||
<td className="font-bold p-2 pr-0 text-right">{row[0]}:</td>
|
||||
<td className="p-2">{row[1]}</td>
|
||||
<td className="font-bold p-0 text-right">{row[0]}:</td>
|
||||
<td className="px-1">{row[1]}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
|
|
@ -31,7 +31,7 @@ export const KeyValTable = ({ rows }) => (
|
|||
)
|
||||
|
||||
export const pointCoords = (point) =>
|
||||
point ? `[ ${round(point.x, 2)}, ${round(point.y, 2)} ]` : null
|
||||
point ? `[${round(point.x, 1)}, ${round(point.y, 1)}]` : null
|
||||
|
||||
export const Tr = ({ children }) => <tr className="border border-base-300">{children}</tr>
|
||||
export const KeyTd = ({ children }) => <td className="p-3 text-right">{children}:</td>
|
||||
|
|
|
|||
|
|
@ -278,6 +278,10 @@
|
|||
fill: currentColor;
|
||||
animation: pulsefill 3s infinite;
|
||||
}
|
||||
.pulse-stroke {
|
||||
stroke: currentColor;
|
||||
animation: pulsestroke 3s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulsefill {
|
||||
|
|
@ -291,6 +295,17 @@
|
|||
fill-opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes pulsestroke {
|
||||
0% {
|
||||
stroke-opacity: 0;
|
||||
}
|
||||
50% {
|
||||
stroke-opacity: 0.3;
|
||||
}
|
||||
100% {
|
||||
stroke-opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Override DaisyUI button text color */
|
||||
.btn-info {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue