[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>

designs/lumina/src/leg.mjs

@@ -22,6 +22,7 @@ export const leg = {
       .join(paths.frontWaistband)
       .join(paths.frontSplit)
       .close()
+      .addClass('fabric')
 
     if (sa) paths.sa = paths.seam.offset(sa).attr('class', 'fabric sa')
 

designs/lumina/src/panel.mjs

@@ -25,6 +25,7 @@ export const panel = {
       .join(paths.panelHem.reverse())
       .reverse()
       .close()
+      .addClass('fabric')
 
     if (sa) paths.sa = paths.seam.offset(sa).attr('class', 'fabric sa')
 

designs/lumina/src/pocket.mjs

@@ -80,6 +80,7 @@ export const pocket = {
       .join(paths.frontPocket.reverse())
       .close()
       .reverse()
+      .addClass('fabric')
 
     if (sa) paths.sa = paths.seam.offset(sa).attr('class', 'fabric sa')
 

designs/lumina/src/waistband.mjs

@@ -109,6 +109,8 @@ export const waistband = {
         .join(paths.waistband.reverse())
     }
 
+    points.anchor = points.waistFront
+
     paths.front = new Path()
       .move(points.waistbandFront)
       .line(points.waistFront)
@@ -152,7 +154,11 @@ export const waistband = {
       .join(paths.waistband)
       .hide()
 
-    paths.seam = new Path().move(points.waistbandFront).line(points.waistFront).join(paths.seamSA)
+    paths.seam = new Path()
+      .move(points.waistbandFront)
+      .line(points.waistFront)
+      .join(paths.seamSA)
+      .addClass('fabric')
 
     if (sa) {
       const seamSA = paths.seamSA.offset(sa)

packages/core/src/part.mjs

@@ -62,6 +62,7 @@ Part.prototype.asRenderProps = function () {
     paths,
     points,
     snippets,
+    anchor: points.anchor ?? new Point(0, 0),
     attributes: this.attributes.asRenderProps(),
     height: this.height,
     width: this.width,

packages/core/src/stack.mjs

@@ -58,8 +58,19 @@ Stack.prototype.home = function () {
   for (const part of this.getPartList()) {
     part.__boundary()
 
+    let partAnchor = part.points.anchor
+
+    let bounds = part
+
+    if (partAnchor) {
+      bounds = {
+        topLeft: part.topLeft.translate(-partAnchor.x, -partAnchor.y),
+        bottomRight: part.bottomRight.translate(-partAnchor.x, -partAnchor.y),
+      }
+    }
+
     const { topLeft, bottomRight } = utils.getTransformedBounds(
-      part,
+      bounds,
       part.attributes.getAsArray('transform')
     )
 

packages/core/src/svg.mjs

@@ -301,9 +301,15 @@ Svg.prototype.__renderPathText = function (path) {
  * @return {string} svg - The SVG markup for the Part object
  */
 Svg.prototype.__renderPart = function (part) {
+  const attributes = part.attributes.clone()
+  attributes.add(
+    'transform',
+    `translate(${-part.asRenderProps().anchor.x}, ${-part.asRenderProps().anchor.y})`
+  )
+
   let svg = this.__openGroup(
     `${this.idPrefix}stack-${this.activeStack}-part-${part.name}`,
-    part.attributes
+    attributes
   )
   for (let key in part.paths) {
     let path = part.paths[key]

packages/react/components/Pattern/part.mjs

@@ -54,7 +54,11 @@ export const Part = ({ stackName, partName, part, settings, components, strings,
   const { Group } = components
 
   return (
-    <Group {...getProps(part)} id={getId({ settings, stackName, partName })}>
+    <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>
   )