VSinerva/freesewing
1
0
Fork 0
Code Activity

feat(lab): More dev info on Xray mode

Browse source
This commit is contained in:
Joost De Cock 2022-06-18 18:15:17 +02:00
parent 026c7adcd2
commit 70e0da6ced
6 changed files with 245 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

87
sites/shared/components/workbench/draft/path/index.js
View file

@ -330,49 +330,61 @@ export const Attributes = ({ list }) => list
</ul>
) : null
const pathInfo = (props) => {
export const pathInfo = (props) => {
const bbox = props.path.boundary()
return (
<div className="p-4 border bg-neutral bg-opacity-40 shadow rounded-lg">
<h5 className="text-neutral-content text-center pb-4">Path info</h5>
<div className="flex flex-row flex-wrap overflow-scroll" style={{ maxHeight: '80vh' }}>
<table className="border-collapse h-fit">
<tbody>
<Tr>
<KeyTd>Name</KeyTd>
<ValTd>{bbox.name}</ValTd>
</Tr>
<Tr>
<KeyTd>Length</KeyTd>
<ValTd>{round(props.path.length(), 2)}mm</ValTd>
</Tr>
<Tr>
<KeyTd>Width</KeyTd>
<ValTd>{round(bbox.bottomRight.x - bbox.topLeft.x, 2)}mm</ValTd>
</Tr>
<Tr>
<KeyTd>Height</KeyTd>
<ValTd>{round(bbox.bottomRight.y - bbox.topLeft.y, 2)}mm</ValTd>
</Tr>
<Tr>
<KeyTd>Top Left</KeyTd>
<ValTd>{pointCoords(bbox.topLeft)}</ValTd>
</Tr>
<Tr>
<KeyTd>Bottom Right</KeyTd>
<ValTd>{pointCoords(bbox.bottomRight)}</ValTd>
</Tr>
<Tr>
<KeyTd>Part</KeyTd>
<ValTd>{props.partName}</ValTd>
</Tr>
<Tr>
<KeyTd>Attributes</KeyTd>
<ValTd><Attributes list={bbox.attributes.list} /></ValTd>
</Tr>
</tbody>
</table>
<div>
<table className="border-collapse h-fit">
<tbody>
<Tr>
<KeyTd>Name</KeyTd>
<ValTd>{bbox.name}</ValTd>
</Tr>
<Tr>
<KeyTd>Length</KeyTd>
<ValTd>{round(props.path.length(), 2)}mm</ValTd>
</Tr>
<Tr>
<KeyTd>Width</KeyTd>
<ValTd>{round(bbox.bottomRight.x - bbox.topLeft.x, 2)}mm</ValTd>
</Tr>
<Tr>
<KeyTd>Height</KeyTd>
<ValTd>{round(bbox.bottomRight.y - bbox.topLeft.y, 2)}mm</ValTd>
</Tr>
<Tr>
<KeyTd>Top Left</KeyTd>
<ValTd>{pointCoords(bbox.topLeft)}</ValTd>
</Tr>
<Tr>
<KeyTd>Bottom Right</KeyTd>
<ValTd>{pointCoords(bbox.bottomRight)}</ValTd>
</Tr>
<Tr>
<KeyTd>Part</KeyTd>
<ValTd>{props.partName}</ValTd>
</Tr>
<Tr>
<KeyTd>Attributes</KeyTd>
<ValTd><Attributes list={bbox.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(props.path)}
>console.log(path)</button>
<button
className="btn btn-success"
onClick={() => console.table(props.path)}
>console.table(path)</button>
</div>
</div>
<table className="border-collapse h-fit">
<tbody>
{props.path.ops.map((op, i) => (
@ -438,6 +450,7 @@ const XrayPath = props => {
{...getProps(props.path)}
className="opacity-0 stroke-7xl stroke-contrast hover:opacity-25 hover:cursor-pointer"
onClick={(evt) => { evt.preventDefault(); props.showInfo(pathInfo(props)) }}
markerStart="none" markerEnd="none"
/>
{ops.length > 0
? ops.map((op,i) => (op.ops[1].type === 'curve')