@pooder/kit 6.1.1 → 6.2.0

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

@@ -3,43 +3,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DielineTool = void 0;
 const core_1 = require("@pooder/core");
 const fabric_1 = require("fabric");
-const units_1 = require("../../units");
-const dielineShape_1 = require("../dielineShape");
 const geometry_1 = require("../geometry");
+const dielineShape_1 = require("../dielineShape");
 const sceneLayoutModel_1 = require("../../shared/scene/sceneLayoutModel");
 const layers_1 = require("../../shared/constants/layers");
 const commands_1 = require("./commands");
 const config_1 = require("./config");
+const model_1 = require("./model");
+const renderBuilder_1 = require("./renderBuilder");
 class DielineTool {
     constructor(options) {
         this.id = "pooder.kit.dieline";
         this.metadata = {
             name: "DielineTool",
         };
-        this.state = {
-            shape: dielineShape_1.DEFAULT_DIELINE_SHAPE,
-            shapeStyle: { ...dielineShape_1.DEFAULT_DIELINE_SHAPE_STYLE },
-            width: 500,
-            height: 500,
-            radius: 0,
-            offset: 0,
-            padding: 140,
-            mainLine: {
-                width: 2.7,
-                color: "#FF0000",
-                dashLength: 5,
-                style: "solid",
-            },
-            offsetLine: {
-                width: 2.7,
-                color: "#FF0000",
-                dashLength: 5,
-                style: "solid",
-            },
-            insideColor: "rgba(0,0,0,0)",
-            showBleedLines: true,
-            features: [],
-        };
+        this.state = (0, model_1.createDefaultDielineState)();
         this.specs = [];
         this.effects = [];
         this.renderSeq = 0;
@@ -93,121 +71,11 @@ class DielineTool {
         }), { priority: 250 });
         const configService = context.services.get("ConfigurationService");
         if (configService) {
-            // Load initial config
-            const s = this.state;
-            const sizeState = (0, sceneLayoutModel_1.readSizeState)(configService);
-            s.shape = (0, dielineShape_1.normalizeDielineShape)(configService.get("dieline.shape", s.shape), s.shape);
-            s.shapeStyle = (0, dielineShape_1.normalizeShapeStyle)(configService.get("dieline.shapeStyle", s.shapeStyle), s.shapeStyle);
-            s.width = sizeState.actualWidthMm;
-            s.height = sizeState.actualHeightMm;
-            s.radius = (0, units_1.parseLengthToMm)(configService.get("dieline.radius", s.radius), "mm");
-            s.padding = sizeState.viewPadding;
-            s.offset =
-                sizeState.cutMode === "outset"
-                    ? sizeState.cutMarginMm
-                    : sizeState.cutMode === "inset"
-                        ? -sizeState.cutMarginMm
-                        : 0;
-            // Main Line
-            s.mainLine.width = configService.get("dieline.strokeWidth", s.mainLine.width);
-            s.mainLine.color = configService.get("dieline.strokeColor", s.mainLine.color);
-            s.mainLine.dashLength = configService.get("dieline.dashLength", s.mainLine.dashLength);
-            s.mainLine.style = configService.get("dieline.style", s.mainLine.style);
-            // Offset Line
-            s.offsetLine.width = configService.get("dieline.offsetStrokeWidth", s.offsetLine.width);
-            s.offsetLine.color = configService.get("dieline.offsetStrokeColor", s.offsetLine.color);
-            s.offsetLine.dashLength = configService.get("dieline.offsetDashLength", s.offsetLine.dashLength);
-            s.offsetLine.style = configService.get("dieline.offsetStyle", s.offsetLine.style);
-            s.insideColor = configService.get("dieline.insideColor", s.insideColor);
-            s.showBleedLines = configService.get("dieline.showBleedLines", s.showBleedLines);
-            s.features = configService.get("dieline.features", s.features);
-            s.pathData = configService.get("dieline.pathData", s.pathData);
-            const sourceWidth = Number(configService.get("dieline.customSourceWidthPx", 0));
-            const sourceHeight = Number(configService.get("dieline.customSourceHeightPx", 0));
-            s.customSourceWidthPx =
-                Number.isFinite(sourceWidth) && sourceWidth > 0
-                    ? sourceWidth
-                    : undefined;
-            s.customSourceHeightPx =
-                Number.isFinite(sourceHeight) && sourceHeight > 0
-                    ? sourceHeight
-                    : undefined;
+            Object.assign(this.state, (0, model_1.readDielineState)(configService, this.state));
             // Listen for changes
             configService.onAnyChange((e) => {
-                if (e.key.startsWith("size.")) {
-                    const nextSize = (0, sceneLayoutModel_1.readSizeState)(configService);
-                    s.width = nextSize.actualWidthMm;
-                    s.height = nextSize.actualHeightMm;
-                    s.padding = nextSize.viewPadding;
-                    s.offset =
-                        nextSize.cutMode === "outset"
-                            ? nextSize.cutMarginMm
-                            : nextSize.cutMode === "inset"
-                                ? -nextSize.cutMarginMm
-                                : 0;
-                    this.updateDieline();
-                    return;
-                }
-                if (e.key.startsWith("dieline.")) {
-                    switch (e.key) {
-                        case "dieline.shape":
-                            s.shape = (0, dielineShape_1.normalizeDielineShape)(e.value, s.shape);
-                            break;
-                        case "dieline.shapeStyle":
-                            s.shapeStyle = (0, dielineShape_1.normalizeShapeStyle)(e.value, s.shapeStyle);
-                            break;
-                        case "dieline.radius":
-                            s.radius = (0, units_1.parseLengthToMm)(e.value, "mm");
-                            break;
-                        case "dieline.strokeWidth":
-                            s.mainLine.width = e.value;
-                            break;
-                        case "dieline.strokeColor":
-                            s.mainLine.color = e.value;
-                            break;
-                        case "dieline.dashLength":
-                            s.mainLine.dashLength = e.value;
-                            break;
-                        case "dieline.style":
-                            s.mainLine.style = e.value;
-                            break;
-                        case "dieline.offsetStrokeWidth":
-                            s.offsetLine.width = e.value;
-                            break;
-                        case "dieline.offsetStrokeColor":
-                            s.offsetLine.color = e.value;
-                            break;
-                        case "dieline.offsetDashLength":
-                            s.offsetLine.dashLength = e.value;
-                            break;
-                        case "dieline.offsetStyle":
-                            s.offsetLine.style = e.value;
-                            break;
-                        case "dieline.insideColor":
-                            s.insideColor = e.value;
-                            break;
-                        case "dieline.showBleedLines":
-                            s.showBleedLines = e.value;
-                            break;
-                        case "dieline.features":
-                            s.features = e.value;
-                            break;
-                        case "dieline.pathData":
-                            s.pathData = e.value;
-                            break;
-                        case "dieline.customSourceWidthPx":
-                            s.customSourceWidthPx =
-                                Number.isFinite(Number(e.value)) && Number(e.value) > 0
-                                    ? Number(e.value)
-                                    : undefined;
-                            break;
-                        case "dieline.customSourceHeightPx":
-                            s.customSourceHeightPx =
-                                Number.isFinite(Number(e.value)) && Number(e.value) > 0
-                                    ? Number(e.value)
-                                    : undefined;
-                            break;
-                    }
+                if (e.key.startsWith("size.") || e.key.startsWith("dieline.")) {
+                    Object.assign(this.state, (0, model_1.readDielineState)(configService, this.state));
                     this.updateDieline();
                 }
             });
@@ -278,270 +146,32 @@ class DielineTool {
         const items = configService.get("image.items", []);
         return Array.isArray(items) && items.length > 0;
     }
-    syncSizeState(configService) {
-        const sizeState = (0, sceneLayoutModel_1.readSizeState)(configService);
-        this.state.width = sizeState.actualWidthMm;
-        this.state.height = sizeState.actualHeightMm;
-        this.state.padding = sizeState.viewPadding;
-        this.state.offset =
-            sizeState.cutMode === "outset"
-                ? sizeState.cutMarginMm
-                : sizeState.cutMode === "inset"
-                    ? -sizeState.cutMarginMm
-                    : 0;
-    }
     buildDielineSpecs(sceneLayout) {
-        const { shape, shapeStyle, radius, mainLine, offsetLine, insideColor, showBleedLines, features, } = this.state;
         const hasImages = this.hasImageItems();
-        const canvasW = sceneLayout.canvasWidth || this.canvasService?.canvas.width || 800;
-        const canvasH = sceneLayout.canvasHeight || this.canvasService?.canvas.height || 600;
-        const scale = sceneLayout.scale;
-        const cx = sceneLayout.trimRect.centerX;
-        const cy = sceneLayout.trimRect.centerY;
-        const visualWidth = sceneLayout.trimRect.width;
-        const visualHeight = sceneLayout.trimRect.height;
-        const visualRadius = radius * scale;
-        const cutW = sceneLayout.cutRect.width;
-        const cutH = sceneLayout.cutRect.height;
-        const visualOffset = (cutW - visualWidth) / 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 specs = [];
-        if (insideColor &&
-            insideColor !== "transparent" &&
-            insideColor !== "rgba(0,0,0,0)" &&
-            !hasImages) {
-            const productPathData = (0, geometry_1.generateDielinePath)({
-                shape,
-                width: cutW,
-                height: cutH,
-                radius: cutR,
-                x: cx,
-                y: cy,
-                features: cutFeatures,
-                shapeStyle,
-                pathData: this.state.pathData,
-                customSourceWidthPx: this.state.customSourceWidthPx,
-                customSourceHeightPx: this.state.customSourceHeightPx,
-                canvasWidth: canvasW,
-                canvasHeight: canvasH,
-            });
-            specs.push({
-                id: "dieline.inside",
-                type: "path",
-                space: "screen",
-                data: { id: "dieline.inside", type: "dieline" },
-                props: {
-                    pathData: productPathData,
-                    fill: insideColor,
-                    stroke: null,
-                    selectable: false,
-                    evented: false,
-                    originX: "left",
-                    originY: "top",
-                },
-            });
-        }
-        if (Math.abs(visualOffset) > 0.0001) {
-            const bleedPathData = (0, geometry_1.generateBleedZonePath)({
-                shape,
-                width: visualWidth,
-                height: visualHeight,
-                radius: visualRadius,
-                x: cx,
-                y: cy,
-                features: cutFeatures,
-                shapeStyle,
-                pathData: this.state.pathData,
-                customSourceWidthPx: this.state.customSourceWidthPx,
-                customSourceHeightPx: this.state.customSourceHeightPx,
-                canvasWidth: canvasW,
-                canvasHeight: canvasH,
-            }, {
-                shape,
-                width: cutW,
-                height: cutH,
-                radius: cutR,
-                x: cx,
-                y: cy,
-                features: cutFeatures,
-                shapeStyle,
-                pathData: this.state.pathData,
-                customSourceWidthPx: this.state.customSourceWidthPx,
-                customSourceHeightPx: this.state.customSourceHeightPx,
-                canvasWidth: canvasW,
-                canvasHeight: canvasH,
-            }, visualOffset);
-            if (showBleedLines !== false) {
-                const pattern = this.createHatchPattern(mainLine.color);
-                if (pattern) {
-                    specs.push({
-                        id: "dieline.bleed-zone",
-                        type: "path",
-                        space: "screen",
-                        data: { id: "dieline.bleed-zone", type: "dieline" },
-                        props: {
-                            pathData: bleedPathData,
-                            fill: pattern,
-                            stroke: null,
-                            selectable: false,
-                            evented: false,
-                            objectCaching: false,
-                            originX: "left",
-                            originY: "top",
-                        },
-                    });
-                }
-            }
-            const offsetPathData = (0, geometry_1.generateDielinePath)({
-                shape,
-                width: cutW,
-                height: cutH,
-                radius: cutR,
-                x: cx,
-                y: cy,
-                features: cutFeatures,
-                shapeStyle,
-                pathData: this.state.pathData,
-                customSourceWidthPx: this.state.customSourceWidthPx,
-                customSourceHeightPx: this.state.customSourceHeightPx,
-                canvasWidth: canvasW,
-                canvasHeight: canvasH,
-            });
-            specs.push({
-                id: "dieline.offset-border",
-                type: "path",
-                space: "screen",
-                data: { id: "dieline.offset-border", type: "dieline" },
-                props: {
-                    pathData: offsetPathData,
-                    fill: null,
-                    stroke: offsetLine.style === "hidden" ? null : offsetLine.color,
-                    strokeWidth: offsetLine.width,
-                    strokeDashArray: offsetLine.style === "dashed"
-                        ? [offsetLine.dashLength, offsetLine.dashLength]
-                        : undefined,
-                    selectable: false,
-                    evented: false,
-                    originX: "left",
-                    originY: "top",
-                },
-            });
-        }
-        const borderPathData = (0, geometry_1.generateDielinePath)({
-            shape,
-            width: visualWidth,
-            height: visualHeight,
-            radius: visualRadius,
-            x: cx,
-            y: cy,
-            features: absoluteFeatures,
-            shapeStyle,
-            pathData: this.state.pathData,
-            customSourceWidthPx: this.state.customSourceWidthPx,
-            customSourceHeightPx: this.state.customSourceHeightPx,
-            canvasWidth: canvasW,
-            canvasHeight: canvasH,
-        });
-        specs.push({
-            id: "dieline.border",
-            type: "path",
-            space: "screen",
-            data: { id: "dieline.border", type: "dieline" },
-            props: {
-                pathData: borderPathData,
-                fill: "transparent",
-                stroke: mainLine.style === "hidden" ? null : mainLine.color,
-                strokeWidth: mainLine.width,
-                strokeDashArray: mainLine.style === "dashed"
-                    ? [mainLine.dashLength, mainLine.dashLength]
-                    : undefined,
-                selectable: false,
-                evented: false,
-                originX: "left",
-                originY: "top",
-            },
-        });
-        return specs;
+        return (0, renderBuilder_1.buildDielineRenderBundle)({
+            state: this.state,
+            sceneLayout,
+            canvasWidth: sceneLayout.canvasWidth || this.canvasService?.canvas.width || 800,
+            canvasHeight: sceneLayout.canvasHeight || this.canvasService?.canvas.height || 600,
+            hasImages,
+            createHatchPattern: (color) => this.createHatchPattern(color),
+            includeImageClipEffect: false,
+        }).specs;
     }
     buildImageClipEffects(sceneLayout) {
-        const { shape, shapeStyle, radius, features } = this.state;
-        const canvasW = sceneLayout.canvasWidth || this.canvasService?.canvas.width || 800;
-        const canvasH = sceneLayout.canvasHeight || this.canvasService?.canvas.height || 600;
-        const scale = sceneLayout.scale;
-        const cx = sceneLayout.trimRect.centerX;
-        const cy = sceneLayout.trimRect.centerY;
-        const visualWidth = sceneLayout.trimRect.width;
-        const visualRadius = radius * scale;
-        const cutW = sceneLayout.cutRect.width;
-        const cutH = sceneLayout.cutRect.height;
-        const visualOffset = (cutW - visualWidth) / 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 clipPathData = (0, geometry_1.generateDielinePath)({
-            shape,
-            width: cutW,
-            height: cutH,
-            radius: cutR,
-            x: cx,
-            y: cy,
-            features: cutFeatures,
-            shapeStyle,
-            pathData: this.state.pathData,
-            customSourceWidthPx: this.state.customSourceWidthPx,
-            customSourceHeightPx: this.state.customSourceHeightPx,
-            canvasWidth: canvasW,
-            canvasHeight: canvasH,
-        });
-        if (!clipPathData)
-            return [];
-        return [
-            {
-                type: "clipPath",
-                id: "dieline.clip.image",
-                visibility: {
-                    op: "not",
-                    expr: { op: "anySessionActive" },
-                },
-                targetPassIds: [layers_1.IMAGE_OBJECT_LAYER_ID],
-                source: {
-                    id: "dieline.effect.clip-path",
-                    type: "path",
-                    space: "screen",
-                    data: {
-                        id: "dieline.effect.clip-path",
-                        type: "dieline-effect",
-                        effect: "clipPath",
-                    },
-                    props: {
-                        pathData: clipPathData,
-                        fill: "#000000",
-                        stroke: null,
-                        originX: "left",
-                        originY: "top",
-                        selectable: false,
-                        evented: false,
-                        excludeFromExport: true,
-                    },
-                },
+        return (0, renderBuilder_1.buildDielineRenderBundle)({
+            state: this.state,
+            sceneLayout,
+            canvasWidth: sceneLayout.canvasWidth || this.canvasService?.canvas.width || 800,
+            canvasHeight: sceneLayout.canvasHeight || this.canvasService?.canvas.height || 600,
+            hasImages: this.hasImageItems(),
+            includeImageClipEffect: true,
+            clipTargetPassIds: [layers_1.IMAGE_OBJECT_LAYER_ID],
+            clipVisibility: {
+                op: "not",
+                expr: { op: "anySessionActive" },
             },
-        ];
+        }).effects;
     }
     updateDieline(_emitEvent = true) {
         void this.updateDielineAsync();
@@ -553,7 +183,7 @@ class DielineTool {
         if (!configService)
             return;
         const seq = ++this.renderSeq;
-        this.syncSizeState(configService);
+        Object.assign(this.state, (0, model_1.readDielineState)(configService, this.state));
         const sceneLayout = (0, sceneLayoutModel_1.computeSceneLayout)(this.canvasService, (0, sceneLayoutModel_1.readSizeState)(configService));
         if (!sceneLayout) {
             if (seq !== this.renderSeq)
@@ -603,7 +233,7 @@ class DielineTool {
             console.warn("[DielineTool] exportCutImage returned null: config-service-not-ready");
             return null;
         }
-        this.syncSizeState(configService);
+        this.state = (0, model_1.readDielineState)(configService, this.state);
         const sceneLayout = (0, sceneLayoutModel_1.computeSceneLayout)(this.canvasService, (0, sceneLayoutModel_1.readSizeState)(configService));
         if (!sceneLayout) {
             console.warn("[DielineTool] exportCutImage returned null: scene-layout-null");

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveConstrainedFeaturesForGeometry = resolveConstrainedFeaturesForGeometry;
+function resolveConstrainedFeaturesForGeometry(args) {
+    const { features, geometry, applyConstraints } = args;
+    const context = {
+        dielineWidth: geometry.width,
+        dielineHeight: geometry.height,
+        geometry: {
+            ...geometry,
+            features: [],
+        },
+    };
+    return (features || []).map((feature) => {
+        const activeConstraints = feature.constraints?.filter((constraint) => !constraint.validateOnly);
+        if (!activeConstraints?.length) {
+            return feature;
+        }
+        const constrained = applyConstraints(feature.x, feature.y, feature, context, activeConstraints);
+        if (constrained.x === feature.x && constrained.y === feature.y) {
+            return feature;
+        }
+        return {
+            ...feature,
+            x: constrained.x,
+            y: constrained.y,
+        };
+    });
+}

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

@@ -1,2 +1,85 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.createDefaultDielineState = createDefaultDielineState;
+exports.readDielineState = readDielineState;
+const units_1 = require("../../units");
+const dielineShape_1 = require("../dielineShape");
+const sceneLayoutModel_1 = require("../../shared/scene/sceneLayoutModel");
+function createDefaultDielineState() {
+    return {
+        shape: dielineShape_1.DEFAULT_DIELINE_SHAPE,
+        shapeStyle: { ...dielineShape_1.DEFAULT_DIELINE_SHAPE_STYLE },
+        width: 500,
+        height: 500,
+        radius: 0,
+        offset: 0,
+        padding: 140,
+        mainLine: {
+            width: 2.7,
+            color: "#FF0000",
+            dashLength: 5,
+            style: "solid",
+        },
+        offsetLine: {
+            width: 2.7,
+            color: "#FF0000",
+            dashLength: 5,
+            style: "solid",
+        },
+        insideColor: "rgba(0,0,0,0)",
+        showBleedLines: true,
+        features: [],
+    };
+}
+function readDielineState(configService, fallback) {
+    const base = createDefaultDielineState();
+    if (fallback) {
+        Object.assign(base, fallback);
+        if (fallback.mainLine) {
+            base.mainLine = { ...base.mainLine, ...fallback.mainLine };
+        }
+        if (fallback.offsetLine) {
+            base.offsetLine = { ...base.offsetLine, ...fallback.offsetLine };
+        }
+        if (fallback.shapeStyle) {
+            base.shapeStyle = (0, dielineShape_1.normalizeShapeStyle)(fallback.shapeStyle, base.shapeStyle);
+        }
+    }
+    const sizeState = (0, sceneLayoutModel_1.readSizeState)(configService);
+    const sourceWidth = Number(configService.get("dieline.customSourceWidthPx", 0));
+    const sourceHeight = Number(configService.get("dieline.customSourceHeightPx", 0));
+    return {
+        ...base,
+        shape: (0, dielineShape_1.normalizeDielineShape)(configService.get("dieline.shape", base.shape), base.shape),
+        shapeStyle: (0, dielineShape_1.normalizeShapeStyle)(configService.get("dieline.shapeStyle", base.shapeStyle), base.shapeStyle),
+        width: sizeState.actualWidthMm,
+        height: sizeState.actualHeightMm,
+        radius: (0, units_1.parseLengthToMm)(configService.get("dieline.radius", base.radius), "mm"),
+        padding: sizeState.viewPadding,
+        offset: sizeState.cutMode === "outset"
+            ? sizeState.cutMarginMm
+            : sizeState.cutMode === "inset"
+                ? -sizeState.cutMarginMm
+                : 0,
+        mainLine: {
+            width: configService.get("dieline.strokeWidth", base.mainLine.width),
+            color: configService.get("dieline.strokeColor", base.mainLine.color),
+            dashLength: configService.get("dieline.dashLength", base.mainLine.dashLength),
+            style: configService.get("dieline.style", base.mainLine.style),
+        },
+        offsetLine: {
+            width: configService.get("dieline.offsetStrokeWidth", base.offsetLine.width),
+            color: configService.get("dieline.offsetStrokeColor", base.offsetLine.color),
+            dashLength: configService.get("dieline.offsetDashLength", base.offsetLine.dashLength),
+            style: configService.get("dieline.offsetStyle", base.offsetLine.style),
+        },
+        insideColor: configService.get("dieline.insideColor", base.insideColor),
+        showBleedLines: configService.get("dieline.showBleedLines", base.showBleedLines),
+        features: configService.get("dieline.features", base.features),
+        pathData: configService.get("dieline.pathData", base.pathData),
+        customSourceWidthPx: Number.isFinite(sourceWidth) && sourceWidth > 0 ? sourceWidth : undefined,
+        customSourceHeightPx: Number.isFinite(sourceHeight) && sourceHeight > 0
+            ? sourceHeight
+            : undefined,
+    };
+}