@pooder/kit 6.2.0 → 6.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pooder/kit",
-  "version": "6.2.0",
+  "version": "6.2.2",
   "description": "Standard plugins for Pooder editor",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/extensions/dieline/DielineTool.ts

@@ -26,6 +26,10 @@ import {
   readDielineState,
 } from "./model";
 import { buildDielineRenderBundle } from "./renderBuilder";
+import {
+  projectPlacedFeatures,
+  resolveFeaturePlacements,
+} from "../featurePlacement";
 
 export class DielineTool implements Extension {
   id = "pooder.kit.dieline";
@@ -320,15 +324,31 @@ export class DielineTool implements Extension {
     const cutR =
       visualRadius === 0 ? 0 : Math.max(0, visualRadius + visualOffset);
 
-    const absoluteFeatures = (features || []).map((f) => ({
-      ...f,
-      x: f.x,
-      y: f.y,
-      width: (f.width || 0) * scale,
-      height: (f.height || 0) * scale,
-      radius: (f.radius || 0) * scale,
-    }));
-    const cutFeatures = absoluteFeatures.filter((f) => !f.skipCut);
+    const placements = resolveFeaturePlacements(features || [], {
+      shape,
+      shapeStyle,
+      pathData,
+      customSourceWidthPx: this.state.customSourceWidthPx,
+      customSourceHeightPx: this.state.customSourceHeightPx,
+      canvasWidth: canvasW,
+      canvasHeight: canvasH,
+      x: cx,
+      y: cy,
+      width: sceneLayout.trimRect.width,
+      height: sceneLayout.trimRect.height,
+      radius: visualRadius,
+      scale,
+    });
+    const cutFeatures = projectPlacedFeatures(
+      placements.filter((placement) => !placement.feature.skipCut),
+      {
+        x: cx,
+        y: cy,
+        width: cutW,
+        height: cutH,
+      },
+      scale,
+    );
 
     const generatedPathData = generateDielinePath({
       shape,

package/src/extensions/dieline/renderBuilder.ts

@@ -1,7 +1,15 @@
 import type { Pattern } from "fabric";
-import type { RenderEffectSpec, RenderObjectSpec, VisibilityExpr } from "../../services";
+import type {
+  RenderEffectSpec,
+  RenderObjectSpec,
+  VisibilityExpr,
+} from "../../services";
 import type { SceneLayoutSnapshot } from "../../shared/scene/sceneLayoutModel";
 import { generateBleedZonePath, generateDielinePath } from "../geometry";
+import {
+  projectPlacedFeatures,
+  resolveFeaturePlacements,
+} from "../featurePlacement";
 import { IMAGE_OBJECT_LAYER_ID } from "../../shared/constants/layers";
 import type { DielineState } from "./model";
 
@@ -41,17 +49,6 @@ const DEFAULT_IDS: DielineRenderIds = {
   clipSource: "dieline.effect.clip-path",
 };
 
-function scaleFeatures(state: DielineState, scale: number) {
-  return (state.features || []).map((feature) => ({
-    ...feature,
-    x: feature.x,
-    y: feature.y,
-    width: (feature.width || 0) * scale,
-    height: (feature.height || 0) * scale,
-    radius: (feature.radius || 0) * scale,
-  }));
-}
-
 export function buildDielineRenderBundle(
   options: DielineRenderOptions,
 ): DielineRenderBundle {
@@ -67,7 +64,8 @@ export function buildDielineRenderBundle(
     clipTargetPassIds = [IMAGE_OBJECT_LAYER_ID],
     clipVisibility,
   } = options;
-  const { shape, shapeStyle, radius, mainLine, offsetLine, insideColor } = state;
+  const { shape, shapeStyle, radius, mainLine, offsetLine, insideColor } =
+    state;
 
   const scale = sceneLayout.scale;
   const cx = sceneLayout.trimRect.centerX;
@@ -80,8 +78,41 @@ export function buildDielineRenderBundle(
   const visualOffset = (cutW - visualWidth) / 2;
   const cutR =
     visualRadius === 0 ? 0 : Math.max(0, visualRadius + visualOffset);
-  const absoluteFeatures = scaleFeatures(state, scale);
-  const cutFeatures = absoluteFeatures.filter((feature) => !feature.skipCut);
+  const placements = resolveFeaturePlacements(state.features || [], {
+    shape,
+    shapeStyle,
+    pathData: state.pathData,
+    customSourceWidthPx: state.customSourceWidthPx,
+    customSourceHeightPx: state.customSourceHeightPx,
+    canvasWidth,
+    canvasHeight,
+    x: cx,
+    y: cy,
+    width: visualWidth,
+    height: visualHeight,
+    radius: visualRadius,
+    scale,
+  });
+  const absoluteFeatures = projectPlacedFeatures(
+    placements,
+    {
+      x: cx,
+      y: cy,
+      width: visualWidth,
+      height: visualHeight,
+    },
+    scale,
+  );
+  const cutFeatures = projectPlacedFeatures(
+    placements.filter((placement) => !placement.feature.skipCut),
+    {
+      x: cx,
+      y: cy,
+      width: cutW,
+      height: cutH,
+    },
+    scale,
+  );
 
   const common = {
     shape,
@@ -92,6 +123,13 @@ export function buildDielineRenderBundle(
     canvasWidth,
     canvasHeight,
   };
+  const cutFrameRect = {
+    left: cx - cutW / 2,
+    top: cy - cutH / 2,
+    width: cutW,
+    height: cutH,
+    space: "screen" as const,
+  };
 
   const specs: RenderObjectSpec[] = [];
 
@@ -232,9 +270,13 @@ export function buildDielineRenderBundle(
     width: cutW,
     height: cutH,
     radius: cutR,
-    x: cx,
-    y: cy,
+    // Build the clip path in the cut frame's local coordinates so Fabric
+    // does not have to infer placement from the standalone path bounds.
+    x: cutW / 2,
+    y: cutH / 2,
     features: cutFeatures,
+    canvasWidth: cutW,
+    canvasHeight: cutH,
   });
 
   if (!clipPathData) {
@@ -253,6 +295,12 @@ export function buildDielineRenderBundle(
           id: ids.clipSource,
           type: "path",
           space: "screen",
+          layout: {
+            reference: "custom",
+            referenceRect: cutFrameRect,
+            alignX: "start",
+            alignY: "start",
+          },
           data: {
             id: ids.clipSource,
             type: "dieline-effect",

package/src/extensions/feature/FeatureTool.ts

@@ -13,9 +13,9 @@ import {
   RenderObjectSpec,
   RenderPassSpec,
 } from "../../services";
-import { resolveFeaturePosition } from "../geometry";
 import { ConstraintRegistry, ConstraintFeature } from "../constraints";
 import { completeFeaturesStrict } from "../featureComplete";
+import { resolveFeaturePlacements } from "../featurePlacement";
 import {
   computeSceneLayout,
   readSizeState,
@@ -935,10 +935,30 @@ export class FeatureTool implements Extension {
 
     const groups = new Map<string, MarkerRenderState[]>();
     const singles: MarkerRenderState[] = [];
+    const placements = resolveFeaturePlacements(
+      this.workingFeatures,
+      {
+        shape: this.currentGeometry.shape,
+        shapeStyle: this.currentGeometry.shapeStyle,
+        pathData: this.currentGeometry.pathData,
+        customSourceWidthPx: this.currentGeometry.customSourceWidthPx,
+        customSourceHeightPx: this.currentGeometry.customSourceHeightPx,
+        x: this.currentGeometry.x,
+        y: this.currentGeometry.y,
+        width: this.currentGeometry.width,
+        height: this.currentGeometry.height,
+        radius: this.currentGeometry.radius,
+        scale: this.currentGeometry.scale || 1,
+      },
+    );
 
-    this.workingFeatures.forEach((feature, index) => {
+    placements.forEach((placement, index) => {
+      const feature = placement.feature;
       const geometry = this.getGeometryForFeature(this.currentGeometry!, feature);
-      const position = resolveFeaturePosition(feature, geometry);
+      const position = {
+        x: placement.centerX,
+        y: placement.centerY,
+      };
       const scale = geometry.scale || 1;
       const marker: MarkerRenderState = {
         feature,

package/src/extensions/featureCoordinates.ts

@@ -0,0 +1,35 @@
+import type { DielineFeature } from "./geometry";
+
+export interface FeatureCoordinateGeometry {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export function resolveFeaturePosition(
+  feature: Pick<DielineFeature, "x" | "y">,
+  geometry: FeatureCoordinateGeometry,
+): { x: number; y: number } {
+  const { x, y, width, height } = geometry;
+  const left = x - width / 2;
+  const top = y - height / 2;
+
+  return {
+    x: left + feature.x * width,
+    y: top + feature.y * height,
+  };
+}
+
+export function normalizePointInGeometry(
+  point: { x: number; y: number },
+  geometry: FeatureCoordinateGeometry,
+): { x: number; y: number } {
+  const left = geometry.x - geometry.width / 2;
+  const top = geometry.y - geometry.height / 2;
+
+  return {
+    x: geometry.width > 0 ? (point.x - left) / geometry.width : 0.5,
+    y: geometry.height > 0 ? (point.y - top) / geometry.height : 0.5,
+  };
+}

package/src/extensions/featurePlacement.ts

@@ -0,0 +1,118 @@
+import { ConstraintFeature, ConstraintRegistry } from "./constraints";
+import type { GeometryOptions } from "./geometry";
+import {
+  normalizePointInGeometry,
+  resolveFeaturePosition,
+} from "./featureCoordinates";
+
+export interface FeaturePlacementGeometry
+  extends Pick<
+    GeometryOptions,
+    | "shape"
+    | "shapeStyle"
+    | "pathData"
+    | "customSourceWidthPx"
+    | "customSourceHeightPx"
+    | "canvasWidth"
+    | "canvasHeight"
+  > {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  radius: number;
+  scale: number;
+}
+
+export interface FeatureProjectionGeometry {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface FeaturePlacement<TFeature extends ConstraintFeature = ConstraintFeature> {
+  feature: TFeature;
+  normalizedX: number;
+  normalizedY: number;
+  centerX: number;
+  centerY: number;
+}
+
+function scaleFeatureForRender<TFeature extends ConstraintFeature>(
+  feature: TFeature,
+  scale: number,
+  x: number,
+  y: number,
+): TFeature {
+  return {
+    ...feature,
+    x,
+    y,
+    width: feature.width !== undefined ? feature.width * scale : undefined,
+    height: feature.height !== undefined ? feature.height * scale : undefined,
+    radius: feature.radius !== undefined ? feature.radius * scale : undefined,
+  };
+}
+
+export function resolveFeaturePlacements<TFeature extends ConstraintFeature>(
+  features: TFeature[],
+  geometry: FeaturePlacementGeometry,
+): FeaturePlacement<TFeature>[] {
+  const dielineWidth =
+    geometry.scale > 0 ? geometry.width / geometry.scale : geometry.width;
+  const dielineHeight =
+    geometry.scale > 0 ? geometry.height / geometry.scale : geometry.height;
+
+  return (features || []).map((feature) => {
+    const activeConstraints = feature.constraints?.filter(
+      (constraint) => !constraint.validateOnly,
+    );
+    const constrained = ConstraintRegistry.apply(
+      feature.x,
+      feature.y,
+      feature,
+      {
+        dielineWidth,
+        dielineHeight,
+        geometry,
+      },
+      activeConstraints,
+    );
+    const center = resolveFeaturePosition(
+      {
+        ...feature,
+        x: constrained.x,
+        y: constrained.y,
+      },
+      geometry,
+    );
+
+    return {
+      feature,
+      normalizedX: constrained.x,
+      normalizedY: constrained.y,
+      centerX: center.x,
+      centerY: center.y,
+    };
+  });
+}
+
+export function projectPlacedFeatures<TFeature extends ConstraintFeature>(
+  placements: FeaturePlacement<TFeature>[],
+  geometry: FeatureProjectionGeometry,
+  scale: number,
+): TFeature[] {
+  return placements.map((placement) => {
+    const normalized = normalizePointInGeometry(
+      { x: placement.centerX, y: placement.centerY },
+      geometry,
+    );
+    return scaleFeatureForRender(
+      placement.feature,
+      scale,
+      normalized.x,
+      normalized.y,
+    );
+  });
+}