@pooder/kit 5.3.1 → 6.0.0

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

@@ -5,9 +5,11 @@ const core_1 = require("@pooder/core");
 const fabric_1 = require("fabric");
 const tracer_1 = require("./tracer");
 const units_1 = require("../units");
+const dielineShape_1 = require("./dielineShape");
 const geometry_1 = require("./geometry");
 const sceneLayoutModel_1 = require("./sceneLayoutModel");
 const IMAGE_OBJECT_LAYER_ID = "image.user";
+const DIELINE_LAYER_ID = "dieline-overlay";
 class DielineTool {
     constructor(options) {
         this.id = "pooder.kit.dieline";
@@ -15,8 +17,8 @@ class DielineTool {
             name: "DielineTool",
         };
         this.state = {
-            displayUnit: "mm",
-            shape: "rect",
+            shape: dielineShape_1.DEFAULT_DIELINE_SHAPE,
+            shapeStyle: { ...dielineShape_1.DEFAULT_DIELINE_SHAPE_STYLE },
             width: 500,
             height: 500,
             radius: 0,
@@ -35,10 +37,12 @@ class DielineTool {
                 style: "solid",
             },
             insideColor: "rgba(0,0,0,0)",
-            outsideColor: "#ffffff",
             showBleedLines: true,
             features: [],
         };
+        this.specs = [];
+        this.effects = [];
+        this.renderSeq = 0;
         this.onCanvasResized = () => {
             this.updateDieline();
         };
@@ -52,7 +56,12 @@ class DielineTool {
                 Object.assign(this.state.offsetLine, options.offsetLine);
                 delete options.offsetLine;
             }
+            if (options.shapeStyle) {
+                this.state.shapeStyle = (0, dielineShape_1.normalizeShapeStyle)(options.shapeStyle, this.state.shapeStyle);
+                delete options.shapeStyle;
+            }
             Object.assign(this.state, options);
+            this.state.shape = (0, dielineShape_1.normalizeDielineShape)(options.shape, this.state.shape);
         }
     }
     activate(context) {
@@ -62,13 +71,33 @@ class DielineTool {
             console.warn("CanvasService not found for DielineTool");
             return;
         }
+        this.renderProducerDisposable?.dispose();
+        this.renderProducerDisposable = this.canvasService.registerRenderProducer(this.id, () => ({
+            passes: [
+                {
+                    id: DIELINE_LAYER_ID,
+                    stack: 700,
+                    order: 0,
+                    replace: true,
+                    visibility: {
+                        op: "not",
+                        expr: {
+                            op: "activeToolIn",
+                            ids: ["pooder.kit.image", "pooder.kit.white-ink"],
+                        },
+                    },
+                    effects: this.effects,
+                    objects: this.specs,
+                },
+            ],
+        }), { 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.displayUnit = sizeState.unit;
-            s.shape = configService.get("dieline.shape", s.shape);
+            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");
@@ -90,15 +119,23 @@ class DielineTool {
             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.outsideColor = configService.get("dieline.outsideColor", s.outsideColor);
             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;
             // Listen for changes
             configService.onAnyChange((e) => {
                 if (e.key.startsWith("size.")) {
                     const nextSize = (0, sceneLayoutModel_1.readSizeState)(configService);
-                    s.displayUnit = nextSize.unit;
                     s.width = nextSize.actualWidthMm;
                     s.height = nextSize.actualHeightMm;
                     s.padding = nextSize.viewPadding;
@@ -114,7 +151,10 @@ class DielineTool {
                 if (e.key.startsWith("dieline.")) {
                     switch (e.key) {
                         case "dieline.shape":
-                            s.shape = e.value;
+                            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");
@@ -146,9 +186,6 @@ class DielineTool {
                         case "dieline.insideColor":
                             s.insideColor = e.value;
                             break;
-                        case "dieline.outsideColor":
-                            s.outsideColor = e.value;
-                            break;
                         case "dieline.showBleedLines":
                             s.showBleedLines = e.value;
                             break;
@@ -158,18 +195,36 @@ class DielineTool {
                         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;
                     }
                     this.updateDieline();
                 }
             });
         }
         context.eventBus.on("canvas:resized", this.onCanvasResized);
-        this.createLayer();
         this.updateDieline();
     }
     deactivate(context) {
         context.eventBus.off("canvas:resized", this.onCanvasResized);
-        this.destroyLayer();
+        this.renderSeq += 1;
+        this.specs = [];
+        this.effects = [];
+        this.renderProducerDisposable?.dispose();
+        this.renderProducerDisposable = undefined;
+        if (this.canvasService) {
+            void this.canvasService.flushRenderFromProducers();
+        }
         this.canvasService = undefined;
         this.context = undefined;
     }
@@ -192,7 +247,7 @@ class DielineTool {
                     id: "dieline.shape",
                     type: "select",
                     label: "Shape",
-                    options: ["rect", "circle", "ellipse", "custom"],
+                    options: Array.from(dielineShape_1.DIELINE_SHAPES),
                     default: s.shape,
                 },
                 {
@@ -203,6 +258,12 @@ class DielineTool {
                     max: 500,
                     default: s.radius,
                 },
+                {
+                    id: "dieline.shapeStyle",
+                    type: "json",
+                    label: "Shape Style",
+                    default: s.shapeStyle,
+                },
                 {
                     id: "dieline.showBleedLines",
                     type: "boolean",
@@ -275,12 +336,6 @@ class DielineTool {
                     label: "Inside Color",
                     default: s.insideColor,
                 },
-                {
-                    id: "dieline.outsideColor",
-                    type: "color",
-                    label: "Outside Color",
-                    default: s.outsideColor,
-                },
                 {
                     id: "dieline.features",
                     type: "json",
@@ -326,6 +381,13 @@ class DielineTool {
                         try {
                             const detectOptions = options || {};
                             const debug = detectOptions.debug === true;
+                            const tracerOptions = {
+                                expand: detectOptions.expand ?? 0,
+                                smoothing: detectOptions.smoothing ?? true,
+                                simplifyTolerance: detectOptions.simplifyTolerance ?? 2,
+                                threshold: detectOptions.threshold,
+                                debug,
+                            };
                             // Helper to get image dimensions
                             const loadImage = (url) => {
                                 return new Promise((resolve, reject) => {
@@ -338,7 +400,7 @@ class DielineTool {
                             };
                             const [img, traced] = await Promise.all([
                                 loadImage(imageUrl),
-                                tracer_1.ImageTracer.traceWithBounds(imageUrl, detectOptions),
+                                tracer_1.ImageTracer.traceWithBounds(imageUrl, tracerOptions),
                             ]);
                             const { pathData, baseBounds, bounds } = traced;
                             if (debug) {
@@ -349,21 +411,8 @@ class DielineTool {
                                     expandedBounds: bounds,
                                     currentDielineWidth: s.width,
                                     currentDielineHeight: s.height,
-                                    options: {
-                                        expand: detectOptions.expand ?? 0,
-                                        morphologyRadius: detectOptions.morphologyRadius,
-                                        connectRadiusMax: detectOptions.connectRadiusMax,
-                                        smoothing: detectOptions.smoothing,
-                                        simplifyTolerance: detectOptions.simplifyTolerance,
-                                        threshold: detectOptions.threshold,
-                                        maskMode: detectOptions.maskMode,
-                                        whiteThreshold: detectOptions.whiteThreshold,
-                                        alphaOpaqueCutoff: detectOptions.alphaOpaqueCutoff,
-                                        noChannels: detectOptions.noChannels,
-                                        componentMode: detectOptions.componentMode,
-                                        minComponentArea: detectOptions.minComponentArea,
-                                        forceConnected: detectOptions.forceConnected,
-                                    },
+                                    options: tracerOptions,
+                                    strategy: "single-connected-silhouette",
                                 });
                             }
                             return {
@@ -383,38 +432,6 @@ class DielineTool {
             ],
         };
     }
-    getLayer() {
-        return this.canvasService?.getLayer("dieline-overlay");
-    }
-    createLayer() {
-        if (!this.canvasService)
-            return;
-        const width = this.canvasService.canvas.width || 800;
-        const height = this.canvasService.canvas.height || 600;
-        const layer = this.canvasService.createLayer("dieline-overlay", {
-            width,
-            height,
-            selectable: false,
-            evented: false,
-        });
-        this.canvasService.canvas.bringObjectToFront(layer);
-        // Ensure above user layer
-        const userLayer = this.canvasService.getLayer("user");
-        if (userLayer) {
-            const userIndex = this.canvasService.canvas
-                .getObjects()
-                .indexOf(userLayer);
-            this.canvasService.canvas.moveObjectTo(layer, userIndex + 1);
-        }
-    }
-    destroyLayer() {
-        if (!this.canvasService)
-            return;
-        const layer = this.getLayer();
-        if (layer) {
-            this.canvasService.canvas.remove(layer);
-        }
-    }
     createHatchPattern(color = "rgba(0, 0, 0, 0.3)") {
         if (typeof document === "undefined") {
             return undefined;
@@ -441,9 +458,15 @@ class DielineTool {
     getConfigService() {
         return this.context?.services.get("ConfigurationService");
     }
+    hasImageItems() {
+        const configService = this.getConfigService();
+        if (!configService)
+            return false;
+        const items = configService.get("image.items", []);
+        return Array.isArray(items) && items.length > 0;
+    }
     syncSizeState(configService) {
         const sizeState = (0, sceneLayoutModel_1.readSizeState)(configService);
-        this.state.displayUnit = sizeState.unit;
         this.state.width = sizeState.actualWidthMm;
         this.state.height = sizeState.actualHeightMm;
         this.state.padding = sizeState.viewPadding;
@@ -454,31 +477,11 @@ class DielineTool {
                     ? -sizeState.cutMarginMm
                     : 0;
     }
-    bringFeatureMarkersToFront() {
-        if (!this.canvasService)
-            return;
-        const canvas = this.canvasService.canvas;
-        canvas
-            .getObjects()
-            .filter((obj) => obj?.data?.type === "feature-marker")
-            .forEach((obj) => canvas.bringObjectToFront(obj));
-    }
-    updateDieline(_emitEvent = true) {
-        if (!this.canvasService)
-            return;
-        const layer = this.getLayer();
-        if (!layer)
-            return;
-        const configService = this.getConfigService();
-        if (!configService)
-            return;
-        this.syncSizeState(configService);
-        const sceneLayout = (0, sceneLayoutModel_1.computeSceneLayout)(this.canvasService, (0, sceneLayoutModel_1.readSizeState)(configService));
-        if (!sceneLayout)
-            return;
-        const { shape, radius, mainLine, offsetLine, insideColor, outsideColor, showBleedLines, features, } = this.state;
-        const canvasW = sceneLayout.canvasWidth || this.canvasService.canvas.width || 800;
-        const canvasH = sceneLayout.canvasHeight || this.canvasService.canvas.height || 600;
+    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;
@@ -489,7 +492,6 @@ class DielineTool {
         const cutH = sceneLayout.cutRect.height;
         const visualOffset = (cutW - visualWidth) / 2;
         const cutR = visualRadius === 0 ? 0 : Math.max(0, visualRadius + visualOffset);
-        layer.remove(...layer.getObjects());
         const absoluteFeatures = (features || []).map((f) => ({
             ...f,
             x: f.x,
@@ -499,32 +501,11 @@ class DielineTool {
             radius: (f.radius || 0) * scale,
         }));
         const cutFeatures = absoluteFeatures.filter((f) => !f.skipCut);
-        const maskPathData = (0, geometry_1.generateMaskPath)({
-            canvasWidth: canvasW,
-            canvasHeight: canvasH,
-            shape,
-            width: cutW,
-            height: cutH,
-            radius: cutR,
-            x: cx,
-            y: cy,
-            features: cutFeatures,
-            pathData: this.state.pathData,
-        });
-        const mask = new fabric_1.Path(maskPathData, {
-            fill: outsideColor,
-            stroke: null,
-            selectable: false,
-            evented: false,
-            originX: "left",
-            originY: "top",
-            left: 0,
-            top: 0,
-        });
-        layer.add(mask);
+        const specs = [];
         if (insideColor &&
             insideColor !== "transparent" &&
-            insideColor !== "rgba(0,0,0,0)") {
+            insideColor !== "rgba(0,0,0,0)" &&
+            !hasImages) {
             const productPathData = (0, geometry_1.generateDielinePath)({
                 shape,
                 width: cutW,
@@ -533,19 +514,28 @@ class DielineTool {
                 x: cx,
                 y: cy,
                 features: cutFeatures,
+                shapeStyle,
                 pathData: this.state.pathData,
+                customSourceWidthPx: this.state.customSourceWidthPx,
+                customSourceHeightPx: this.state.customSourceHeightPx,
                 canvasWidth: canvasW,
                 canvasHeight: canvasH,
             });
-            const insideObj = new fabric_1.Path(productPathData, {
-                fill: insideColor,
-                stroke: null,
-                selectable: false,
-                evented: false,
-                originX: "left",
-                originY: "top",
+            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",
+                },
             });
-            layer.add(insideObj);
         }
         if (Math.abs(visualOffset) > 0.0001) {
             const bleedPathData = (0, geometry_1.generateBleedZonePath)({
@@ -556,7 +546,10 @@ class DielineTool {
                 x: cx,
                 y: cy,
                 features: cutFeatures,
+                shapeStyle,
                 pathData: this.state.pathData,
+                customSourceWidthPx: this.state.customSourceWidthPx,
+                customSourceHeightPx: this.state.customSourceHeightPx,
                 canvasWidth: canvasW,
                 canvasHeight: canvasH,
             }, {
@@ -567,23 +560,32 @@ class DielineTool {
                 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) {
-                    const bleedObj = new fabric_1.Path(bleedPathData, {
-                        fill: pattern,
-                        stroke: null,
-                        selectable: false,
-                        evented: false,
-                        objectCaching: false,
-                        originX: "left",
-                        originY: "top",
+                    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",
+                        },
                     });
-                    layer.add(bleedObj);
                 }
             }
             const offsetPathData = (0, geometry_1.generateDielinePath)({
@@ -594,23 +596,32 @@ class DielineTool {
                 x: cx,
                 y: cy,
                 features: cutFeatures,
+                shapeStyle,
                 pathData: this.state.pathData,
+                customSourceWidthPx: this.state.customSourceWidthPx,
+                customSourceHeightPx: this.state.customSourceHeightPx,
                 canvasWidth: canvasW,
                 canvasHeight: canvasH,
             });
-            const offsetBorderObj = new fabric_1.Path(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",
+            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",
+                },
             });
-            layer.add(offsetBorderObj);
         }
         const borderPathData = (0, geometry_1.generateDielinePath)({
             shape,
@@ -620,43 +631,130 @@ class DielineTool {
             x: cx,
             y: cy,
             features: absoluteFeatures,
+            shapeStyle,
             pathData: this.state.pathData,
+            customSourceWidthPx: this.state.customSourceWidthPx,
+            customSourceHeightPx: this.state.customSourceHeightPx,
             canvasWidth: canvasW,
             canvasHeight: canvasH,
         });
-        const borderObj = new fabric_1.Path(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",
+        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",
+            },
         });
-        layer.add(borderObj);
-        const userLayer = this.canvasService.getLayer("user");
-        if (layer && userLayer) {
-            const layerIndex = this.canvasService.canvas.getObjects().indexOf(layer);
-            const userIndex = this.canvasService.canvas
-                .getObjects()
-                .indexOf(userLayer);
-            if (layerIndex < userIndex) {
-                this.canvasService.canvas.moveObjectTo(layer, userIndex + 1);
-            }
-        }
-        else {
-            this.canvasService.canvas.bringObjectToFront(layer);
-        }
-        // Feature tool markers can extend outside trim. Keep them above dieline mask.
-        this.bringFeatureMarkersToFront();
-        const rulerLayer = this.canvasService.getLayer("ruler-overlay");
-        if (rulerLayer) {
-            this.canvasService.canvas.bringObjectToFront(rulerLayer);
+        return 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",
+                targetPassIds: [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,
+                    },
+                },
+            },
+        ];
+    }
+    updateDieline(_emitEvent = true) {
+        void this.updateDielineAsync();
+    }
+    async updateDielineAsync() {
+        if (!this.canvasService)
+            return;
+        const configService = this.getConfigService();
+        if (!configService)
+            return;
+        const seq = ++this.renderSeq;
+        this.syncSizeState(configService);
+        const sceneLayout = (0, sceneLayoutModel_1.computeSceneLayout)(this.canvasService, (0, sceneLayoutModel_1.readSizeState)(configService));
+        if (!sceneLayout) {
+            if (seq !== this.renderSeq)
+                return;
+            this.specs = [];
+            this.effects = [];
+            await this.canvasService.flushRenderFromProducers();
+            return;
         }
-        layer.dirty = true;
+        const nextSpecs = this.buildDielineSpecs(sceneLayout);
+        const nextEffects = this.buildImageClipEffects(sceneLayout);
+        if (seq !== this.renderSeq)
+            return;
+        this.specs = nextSpecs;
+        this.effects = nextEffects;
+        await this.canvasService.flushRenderFromProducers();
+        if (seq !== this.renderSeq)
+            return;
         this.canvasService.requestRenderAll();
     }
     getGeometry() {
@@ -673,6 +771,8 @@ class DielineTool {
             ...sceneGeometry,
             strokeWidth: this.state.mainLine.width,
             pathData: this.state.pathData,
+            customSourceWidthPx: this.state.customSourceWidthPx,
+            customSourceHeightPx: this.state.customSourceHeightPx,
         };
     }
     async exportCutImage(options) {
@@ -692,7 +792,7 @@ class DielineTool {
             console.warn("[DielineTool] exportCutImage returned null: scene-layout-null");
             return null;
         }
-        const { shape, radius, features, pathData } = this.state;
+        const { shape, shapeStyle, radius, features, pathData } = this.state;
         const canvasW = sceneLayout.canvasWidth || this.canvasService.canvas.width || 800;
         const canvasH = sceneLayout.canvasHeight || this.canvasService.canvas.height || 600;
         const scale = sceneLayout.scale;
@@ -720,7 +820,10 @@ class DielineTool {
             x: cx,
             y: cy,
             features: cutFeatures,
+            shapeStyle,
             pathData,
+            customSourceWidthPx: this.state.customSourceWidthPx,
+            customSourceHeightPx: this.state.customSourceHeightPx,
             canvasWidth: canvasW,
             canvasHeight: canvasH,
         });