@pooder/kit 6.2.0 → 6.2.2

package/.test-dist/src/extensions/dieline/DielineTool.js

@@ -11,6 +11,7 @@ const commands_1 = require("./commands");
 const config_1 = require("./config");
 const model_1 = require("./model");
 const renderBuilder_1 = require("./renderBuilder");
+const featurePlacement_1 = require("../featurePlacement");
 class DielineTool {
     constructor(options) {
         this.id = "pooder.kit.dieline";
@@ -250,15 +251,27 @@ class DielineTool {
         const visualRadius = radius * scale;
         const visualOffset = (cutW - sceneLayout.trimRect.width) / 2;
         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 = (0, featurePlacement_1.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 = (0, featurePlacement_1.projectPlacedFeatures)(placements.filter((placement) => !placement.feature.skipCut), {
+            x: cx,
+            y: cy,
+            width: cutW,
+            height: cutH,
+        }, scale);
         const generatedPathData = (0, geometry_1.generateDielinePath)({
             shape,
             width: cutW,

package/.test-dist/src/extensions/dieline/renderBuilder.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.buildDielineRenderBundle = buildDielineRenderBundle;
 const geometry_1 = require("../geometry");
+const featurePlacement_1 = require("../featurePlacement");
 const layers_1 = require("../../shared/constants/layers");
 const DEFAULT_IDS = {
     inside: "dieline.inside",
@@ -11,16 +12,6 @@ const DEFAULT_IDS = {
     clip: "dieline.clip.image",
     clipSource: "dieline.effect.clip-path",
 };
-function scaleFeatures(state, scale) {
-    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,
-    }));
-}
 function buildDielineRenderBundle(options) {
     const ids = { ...DEFAULT_IDS, ...(options.ids || {}) };
     const { state, sceneLayout, canvasWidth, canvasHeight, hasImages, createHatchPattern, includeImageClipEffect = true, clipTargetPassIds = [layers_1.IMAGE_OBJECT_LAYER_ID], clipVisibility, } = options;
@@ -35,8 +26,33 @@ function buildDielineRenderBundle(options) {
     const cutH = sceneLayout.cutRect.height;
     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 = (0, featurePlacement_1.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 = (0, featurePlacement_1.projectPlacedFeatures)(placements, {
+        x: cx,
+        y: cy,
+        width: visualWidth,
+        height: visualHeight,
+    }, scale);
+    const cutFeatures = (0, featurePlacement_1.projectPlacedFeatures)(placements.filter((placement) => !placement.feature.skipCut), {
+        x: cx,
+        y: cy,
+        width: cutW,
+        height: cutH,
+    }, scale);
     const common = {
         shape,
         shapeStyle,
@@ -46,6 +62,13 @@ function buildDielineRenderBundle(options) {
         canvasWidth,
         canvasHeight,
     };
+    const cutFrameRect = {
+        left: cx - cutW / 2,
+        top: cy - cutH / 2,
+        width: cutW,
+        height: cutH,
+        space: "screen",
+    };
     const specs = [];
     if (insideColor &&
         insideColor !== "transparent" &&
@@ -170,9 +193,13 @@ function buildDielineRenderBundle(options) {
         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) {
         return { specs, effects: [] };
@@ -189,6 +216,12 @@ function buildDielineRenderBundle(options) {
                     id: ids.clipSource,
                     type: "path",
                     space: "screen",
+                    layout: {
+                        reference: "custom",
+                        referenceRect: cutFrameRect,
+                        alignX: "start",
+                        alignY: "start",
+                    },
                     data: {
                         id: ids.clipSource,
                         type: "dieline-effect",

package/.test-dist/src/extensions/feature/FeatureTool.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FeatureTool = void 0;
 const core_1 = require("@pooder/core");
 const fabric_1 = require("fabric");
-const geometry_1 = require("../geometry");
 const constraints_1 = require("../constraints");
 const featureComplete_1 = require("../featureComplete");
+const featurePlacement_1 = require("../featurePlacement");
 const sceneLayoutModel_1 = require("../../shared/scene/sceneLayoutModel");
 const layers_1 = require("../../shared/constants/layers");
 const subscriptions_1 = require("../../shared/runtime/subscriptions");
@@ -726,9 +726,26 @@ class FeatureTool {
         }
         const groups = new Map();
         const singles = [];
-        this.workingFeatures.forEach((feature, index) => {
+        const placements = (0, featurePlacement_1.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,
+        });
+        placements.forEach((placement, index) => {
+            const feature = placement.feature;
             const geometry = this.getGeometryForFeature(this.currentGeometry, feature);
-            const position = (0, geometry_1.resolveFeaturePosition)(feature, geometry);
+            const position = {
+                x: placement.centerX,
+                y: placement.centerY,
+            };
             const scale = geometry.scale || 1;
             const marker = {
                 feature,

package/.test-dist/src/extensions/featureCoordinates.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveFeaturePosition = resolveFeaturePosition;
+exports.normalizePointInGeometry = normalizePointInGeometry;
+function resolveFeaturePosition(feature, geometry) {
+    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,
+    };
+}
+function normalizePointInGeometry(point, geometry) {
+    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/.test-dist/src/extensions/featurePlacement.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveFeaturePlacements = resolveFeaturePlacements;
+exports.projectPlacedFeatures = projectPlacedFeatures;
+const constraints_1 = require("./constraints");
+const featureCoordinates_1 = require("./featureCoordinates");
+function scaleFeatureForRender(feature, scale, x, y) {
+    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,
+    };
+}
+function resolveFeaturePlacements(features, geometry) {
+    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 = constraints_1.ConstraintRegistry.apply(feature.x, feature.y, feature, {
+            dielineWidth,
+            dielineHeight,
+            geometry,
+        }, activeConstraints);
+        const center = (0, featureCoordinates_1.resolveFeaturePosition)({
+            ...feature,
+            x: constrained.x,
+            y: constrained.y,
+        }, geometry);
+        return {
+            feature,
+            normalizedX: constrained.x,
+            normalizedY: constrained.y,
+            centerX: center.x,
+            centerY: center.y,
+        };
+    });
+}
+function projectPlacedFeatures(placements, geometry, scale) {
+    return placements.map((placement) => {
+        const normalized = (0, featureCoordinates_1.normalizePointInGeometry)({ x: placement.centerX, y: placement.centerY }, geometry);
+        return scaleFeatureForRender(placement.feature, scale, normalized.x, normalized.y);
+    });
+}