freesewing/packages/react/components/Xray/path.mjs

import React from 'react'
import {
  getProps,
  defaultComponents as patternComponents,
} from '@freesewing/react/components/Pattern'

const coords = (point) => `${point.x},${point.y}`

const Cp = ({ at }) => (
  <circle cx={at.x} cy={at.y} r={0.75} className="stroke-md opacity-50  text-warning" />
)

export const Xray = ({ path, components }) => {
  const output = []
  let prev
  let i = 0
  for (const op of path.ops) {
    if (op.type === 'curve') {
      output.push(
        <Cp at={op.cp1} key={`${i}-cp1`} />,
        <Cp at={op.cp2} key={`${i}-cp2`} />,
        <path
          key={i}
          d={`M ${coords(prev.to)} L ${coords(op.cp1)} M ${coords(op.to)} L ${coords(op.cp2)}`}
          className={`text-warning stroke-sm dashed opacity-50`}
          markerStart="none"
          markerEnd="none"
        />
      )
    }
    prev = op
    i++
  }
  output.push(
    <path key="path" d={path.d} {...getProps(path)} markerStart="none" markerEnd="none" />
  )

  return output
}

export const PathXray = ({ stackName, pathName, part, path, settings, components, t }) => {
  /*
   * We use the Path component from Pattern here
   * If we would extract Path from the components passed down,
   * we'd create a recursion loop as the Path we call below
   * would be this very PathXray component.
   */
  const { Path } = patternComponents
  return (
    <g>
      <Xray path={path} />
      <Path {...{ stackName, pathName, path, part, settings, components, t }} />
    </g>
  )
}