66 lines
1.5 KiB
JavaScript
66 lines
1.5 KiB
JavaScript
import { Chevron } from 'shared/components/navigation/primary'
|
|
import { Ul, Li, Details, Summary, SumDiv, NoSumDiv, Deg } from 'shared/components/workbench/menu'
|
|
import { XrayPoint } from './point'
|
|
|
|
const MoveLine = ({ op }) => <XrayPoint point={op.to} />
|
|
const Curve = ({ op }) =>
|
|
['cp1', 'cp2', 'to'].map((pnt) => (
|
|
<Li key={pnt}>
|
|
<Details>
|
|
<Summary>
|
|
<SumDiv>
|
|
<Deg />
|
|
<span className="font-bold">{pnt}</span>
|
|
</SumDiv>
|
|
<Chevron />
|
|
</Summary>
|
|
<XrayPoint point={op[pnt]} />
|
|
</Details>
|
|
</Li>
|
|
))
|
|
|
|
const XrayPathOp = ({ op }) => (
|
|
<Li>
|
|
{op.type === 'close' ? (
|
|
<NoSumDiv>
|
|
<Deg />
|
|
<span className="font-bold">{op.type}</span>
|
|
</NoSumDiv>
|
|
) : (
|
|
<Details>
|
|
<Summary>
|
|
<SumDiv>
|
|
<Deg />
|
|
<span className="font-bold">{op.type}</span>
|
|
<span>To</span>
|
|
</SumDiv>
|
|
<Chevron />
|
|
</Summary>
|
|
<Ul>{op.type === 'curve' ? <Curve op={op} /> : <MoveLine op={op} />}</Ul>
|
|
</Details>
|
|
)}
|
|
</Li>
|
|
)
|
|
|
|
export const XrayPathOps = ({ ops = false }) => {
|
|
if (!ops || ops.length < 1) return null
|
|
|
|
return (
|
|
<Li>
|
|
<Details>
|
|
<Summary>
|
|
<SumDiv>
|
|
<Deg />
|
|
<span className="font-bold">path.ops</span>
|
|
</SumDiv>
|
|
<Chevron />
|
|
</Summary>
|
|
<Ul>
|
|
{ops.map((op) => (
|
|
<XrayPathOp op={op} key={op} />
|
|
))}
|
|
</Ul>
|
|
</Details>
|
|
</Li>
|
|
)
|
|
}
|