freesewing/packages/react/components/Pattern/snippet.mjs

import React from 'react'
import { getProps } from './utils.mjs'

/**
 * A component to render a FreeSewing Snippet in a pattern
 *
 * @component
 * @param {object} props - All component props
 * @param {object} props.snippet - The snippet object itself
 * @param {object} props.settings - The pattern settings object
 * @returns {JSX.Element}
 */
export const Snippet = ({ snippet, settings }) => {
  if (!snippet?.anchor || !snippet.def) return null
  if (!settings[0].complete && !snippet.attributes.list?.['data-force']?.[0]) return null
  const snippetProps = {
    xlinkHref: '#' + snippet.def,
    x: snippet.anchor.x,
    y: snippet.anchor.y,
  }
  const scale = snippet.attributes.list['data-scale']?.[0] || false
  const rotate = snippet.attributes.list['data-rotate']?.[0] || false
  if (scale || rotate) {
    snippetProps.transform = ''
    if (scale) {
      snippetProps.transform += `translate(${snippetProps.x}, ${snippetProps.y}) `
      snippetProps.transform += `scale(${scale}) `
      snippetProps.transform += `translate(${snippetProps.x * -1}, ${snippetProps.y * -1}) `
    }
    if (rotate) {
      snippetProps.transform += `rotate(${rotate}, ${snippetProps.x}, ${snippetProps.y}) `
    }
  }

  return <use {...snippetProps} {...getProps(snippet)} color="currentColor" />
}