1
0
Fork 0
freesewing/packages/react/components/Pattern/part.mjs
Jonathan Haas c9300e6739 [core] fix: stack anchoring (#261)
Fixes #54

Also adds the fabric class to lumina parts for proper line width and rainbow coloring.

The last commit is probably not right. It works, but I'm not sure if these are the right functions to change.

![image](/attachments/7a017a76-c7ba-4078-a1a1-e6c900f7d5ee)

Reviewed-on: https://codeberg.org/freesewing/freesewing/pulls/261
Reviewed-by: Joost De Cock <joostdecock@noreply.codeberg.org>
Co-authored-by: Jonathan Haas <haasjona@gmail.com>
Co-committed-by: Jonathan Haas <haasjona@gmail.com>
2025-04-18 13:00:40 +00:00

65 lines
2 KiB
JavaScript

// eslint-disable-next-line no-unused-vars
import React, { forwardRef } from 'react'
import { getId, getProps } from './utils.mjs'
export const PartInner = forwardRef(
({ stackName, partName, part, settings, components, strings, drillProps }, ref) => {
const { Group, Path, Point, Snippet } = components
return (
<Group ref={ref} id={getId({ settings, stackName, partName, name: 'inner' })}>
{Object.keys(part.paths).map((pathName) => (
<Path
key={pathName}
path={part.paths[pathName]}
topLeft={part.topLeft}
bottomRight={part.bottomRight}
units={settings[0].units}
{...{ stackName, partName, pathName, part, settings, components, strings, drillProps }}
/>
))}
{Object.keys(part.points).map((pointName) => (
<Point
key={pointName}
point={part.points[pointName]}
topLeft={part.topLeft}
bottomRight={part.bottomRight}
{...{ stackName, partName, pointName, part, settings, components, strings, drillProps }}
/>
))}
{Object.keys(part.snippets).map((snippetName) => (
<Snippet
key={snippetName}
snippet={part.snippets[snippetName]}
{...{
stackName,
partName,
snippetName,
part,
settings,
components,
strings,
drillProps,
}}
/>
))}
</Group>
)
}
)
PartInner.displayName = 'PartInner'
export const Part = ({ stackName, partName, part, settings, components, strings, drillProps }) => {
const { Group } = components
return (
<Group
{...getProps(part)}
id={getId({ settings, stackName, partName })}
transform={`translate(${-part.anchor.x}, ${-part.anchor.y})`}
>
<PartInner {...{ stackName, partName, part, settings, components, strings, drillProps }} />
</Group>
)
}