@pooder/kit 5.3.1 → 6.0.0

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

@@ -3,6 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilmTool = void 0;
 const core_1 = require("@pooder/core");
 const fabric_1 = require("fabric");
+const FILM_LAYER_ID = "overlay";
+const FILM_IMAGE_ID = "film-image";
+const DEFAULT_WIDTH = 800;
+const DEFAULT_HEIGHT = 600;
 class FilmTool {
     constructor(options) {
         this.id = "pooder.kit.film";
@@ -11,6 +15,14 @@ class FilmTool {
         };
         this.url = "";
         this.opacity = 0.5;
+        this.specs = [];
+        this.renderSeq = 0;
+        this.renderImageUrl = "";
+        this.sourceSizeBySrc = new Map();
+        this.pendingSizeBySrc = new Map();
+        this.onCanvasResized = () => {
+            this.updateFilm();
+        };
         if (options) {
             Object.assign(this, options);
         }
@@ -21,6 +33,17 @@ class FilmTool {
             console.warn("CanvasService not found for FilmTool");
             return;
         }
+        this.renderProducerDisposable?.dispose();
+        this.renderProducerDisposable = this.canvasService.registerRenderProducer(this.id, () => ({
+            passes: [
+                {
+                    id: FILM_LAYER_ID,
+                    stack: 1000,
+                    order: 0,
+                    objects: this.specs,
+                },
+            ],
+        }), { priority: 500 });
         const configService = context.services.get("ConfigurationService");
         if (configService) {
             // Load initial config
@@ -38,21 +61,21 @@ class FilmTool {
                 }
             });
         }
-        this.initLayer();
+        context.eventBus.on("canvas:resized", this.onCanvasResized);
         this.updateFilm();
     }
     deactivate(context) {
-        if (this.canvasService) {
-            const layer = this.canvasService.getLayer("overlay");
-            if (layer) {
-                const img = this.canvasService.getObject("film-image", "overlay");
-                if (img) {
-                    layer.remove(img);
-                    this.canvasService.requestRenderAll();
-                }
-            }
-            this.canvasService = undefined;
-        }
+        context.eventBus.off("canvas:resized", this.onCanvasResized);
+        this.renderSeq += 1;
+        this.specs = [];
+        this.renderImageUrl = "";
+        this.renderProducerDisposable?.dispose();
+        this.renderProducerDisposable = undefined;
+        if (!this.canvasService)
+            return;
+        void this.canvasService.flushRenderFromProducers();
+        this.canvasService.requestRenderAll();
+        this.canvasService = undefined;
     }
     contribute() {
         return {
@@ -89,78 +112,114 @@ class FilmTool {
             ],
         };
     }
-    initLayer() {
-        if (!this.canvasService)
-            return;
-        let overlayLayer = this.canvasService.getLayer("overlay");
-        if (!overlayLayer) {
-            const width = this.canvasService.canvas.width || 800;
-            const height = this.canvasService.canvas.height || 600;
-            const layer = this.canvasService.createLayer("overlay", {
-                width,
-                height,
-                left: 0,
-                top: 0,
-                originX: "left",
-                originY: "top",
-                selectable: false,
-                evented: false,
-                subTargetCheck: false,
-                interactive: false,
-            });
-            this.canvasService.canvas.bringObjectToFront(layer);
-        }
+    getViewportSize() {
+        const width = Number(this.canvasService?.canvas.width || 0);
+        const height = Number(this.canvasService?.canvas.height || 0);
+        return {
+            width: width > 0 ? width : DEFAULT_WIDTH,
+            height: height > 0 ? height : DEFAULT_HEIGHT,
+        };
     }
-    async updateFilm() {
-        if (!this.canvasService)
-            return;
-        const layer = this.canvasService.getLayer("overlay");
-        if (!layer) {
-            console.warn("[FilmTool] Overlay layer not found");
-            return;
-        }
-        const { url, opacity } = this;
-        if (!url) {
-            const img = this.canvasService.getObject("film-image", "overlay");
-            if (img) {
-                layer.remove(img);
-                this.canvasService.requestRenderAll();
-            }
-            return;
+    clampOpacity(value) {
+        return Math.max(0, Math.min(1, Number(value)));
+    }
+    buildFilmSpecs(imageUrl, opacity) {
+        if (!imageUrl) {
+            return [];
         }
-        const width = this.canvasService.canvas.width || 800;
-        const height = this.canvasService.canvas.height || 600;
-        let img = this.canvasService.getObject("film-image", "overlay");
-        try {
-            if (img) {
-                if (img.getSrc() !== url) {
-                    await img.setSrc(url);
-                }
-                img.set({ opacity });
-            }
-            else {
-                img = await fabric_1.FabricImage.fromURL(url, { crossOrigin: "anonymous" });
-                img.scaleToWidth(width);
-                if (img.getScaledHeight() < height)
-                    img.scaleToHeight(height);
-                img.set({
-                    originX: "left",
-                    originY: "top",
+        const { width, height } = this.getViewportSize();
+        const sourceSize = this.sourceSizeBySrc.get(imageUrl);
+        const sourceWidth = Math.max(1, Number(sourceSize?.width || width));
+        const sourceHeight = Math.max(1, Number(sourceSize?.height || height));
+        const coverScale = Math.max(width / sourceWidth, height / sourceHeight);
+        return [
+            {
+                id: FILM_IMAGE_ID,
+                type: "image",
+                src: imageUrl,
+                space: "screen",
+                data: {
+                    id: FILM_IMAGE_ID,
+                    layerId: FILM_LAYER_ID,
+                    type: "film-image",
+                },
+                props: {
                     left: 0,
                     top: 0,
-                    opacity,
+                    originX: "left",
+                    originY: "top",
+                    opacity: this.clampOpacity(opacity),
+                    scaleX: coverScale,
+                    scaleY: coverScale,
                     selectable: false,
                     evented: false,
-                    data: { id: "film-image" },
-                });
-                layer.add(img);
+                    excludeFromExport: true,
+                },
+            },
+        ];
+    }
+    async ensureImageSize(src) {
+        if (!src)
+            return null;
+        const cached = this.sourceSizeBySrc.get(src);
+        if (cached)
+            return cached;
+        const pending = this.pendingSizeBySrc.get(src);
+        if (pending) {
+            return pending;
+        }
+        const task = this.loadImageSize(src);
+        this.pendingSizeBySrc.set(src, task);
+        try {
+            return await task;
+        }
+        finally {
+            if (this.pendingSizeBySrc.get(src) === task) {
+                this.pendingSizeBySrc.delete(src);
+            }
+        }
+    }
+    async loadImageSize(src) {
+        try {
+            const image = await fabric_1.FabricImage.fromURL(src, {
+                crossOrigin: "anonymous",
+            });
+            const width = Number(image?.width || 0);
+            const height = Number(image?.height || 0);
+            if (width > 0 && height > 0) {
+                const size = { width, height };
+                this.sourceSizeBySrc.set(src, size);
+                return size;
             }
-            this.canvasService.requestRenderAll();
         }
         catch (error) {
-            console.error("[FilmTool] Failed to load film image", url, error);
+            console.error("[FilmTool] Failed to load film image", src, error);
+        }
+        return null;
+    }
+    updateFilm() {
+        void this.updateFilmAsync();
+    }
+    async updateFilmAsync() {
+        if (!this.canvasService)
+            return;
+        const seq = ++this.renderSeq;
+        const nextUrl = String(this.url || "").trim();
+        if (!nextUrl) {
+            this.renderImageUrl = "";
         }
-        layer.dirty = true;
+        else if (nextUrl !== this.renderImageUrl) {
+            const loaded = await this.ensureImageSize(nextUrl);
+            if (seq !== this.renderSeq)
+                return;
+            if (loaded) {
+                this.renderImageUrl = nextUrl;
+            }
+        }
+        this.specs = this.buildFilmSpecs(this.renderImageUrl, this.opacity);
+        await this.canvasService.flushRenderFromProducers();
+        if (seq !== this.renderSeq)
+            return;
         this.canvasService.requestRenderAll();
     }
 }

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

@@ -5,13 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.resolveFeaturePosition = resolveFeaturePosition;
 exports.generateDielinePath = generateDielinePath;
-exports.generateMaskPath = generateMaskPath;
 exports.generateBleedZonePath = generateBleedZonePath;
 exports.getLowestPointOnDieline = getLowestPointOnDieline;
 exports.getNearestPointOnDieline = getNearestPointOnDieline;
 exports.getPathBounds = getPathBounds;
 const paper_1 = __importDefault(require("paper"));
 const bridgeSelection_1 = require("./bridgeSelection");
+const dielineShape_1 = require("./dielineShape");
 const wrappedOffsets_1 = require("./wrappedOffsets");
 /**
  * Resolves the absolute position of a feature based on normalized coordinates.
@@ -121,57 +121,142 @@ function selectOuterChain(args) {
         return scoreA > scoreB ? pointsA : pointsB;
     return pointsA.length <= pointsB.length ? pointsA : pointsB;
 }
-/**
- * Creates the base dieline shape (Rect/Circle/Ellipse/Custom)
- */
-function createBaseShape(options) {
-    const { shape, width, height, radius, x, y, pathData } = options;
-    const center = new paper_1.default.Point(x, y);
-    if (shape === "rect") {
+function fitPathItemToRect(item, rect, fitMode) {
+    const { left, top, width, height } = rect;
+    const bounds = item.bounds;
+    if (width <= 0 ||
+        height <= 0 ||
+        !Number.isFinite(bounds.width) ||
+        !Number.isFinite(bounds.height) ||
+        bounds.width <= 0 ||
+        bounds.height <= 0) {
+        item.position = new paper_1.default.Point(left + width / 2, top + height / 2);
+        return item;
+    }
+    item.translate(new paper_1.default.Point(-bounds.left, -bounds.top));
+    if (fitMode === "stretch") {
+        item.scale(width / bounds.width, height / bounds.height, new paper_1.default.Point(0, 0));
+        item.translate(new paper_1.default.Point(left, top));
+        return item;
+    }
+    const uniformScale = Math.min(width / bounds.width, height / bounds.height);
+    item.scale(uniformScale, uniformScale, new paper_1.default.Point(0, 0));
+    const scaledWidth = bounds.width * uniformScale;
+    const scaledHeight = bounds.height * uniformScale;
+    item.translate(new paper_1.default.Point(left + (width - scaledWidth) / 2, top + (height - scaledHeight) / 2));
+    return item;
+}
+function createNormalizedHeartPath(params) {
+    const { lobeSpread, notchDepth, tipSharpness } = params;
+    const halfSpread = 0.22 + lobeSpread * 0.18;
+    const notchY = 0.06 + notchDepth * 0.2;
+    const shoulderY = 0.24 + notchDepth * 0.2;
+    const topLift = 0.12 + (1 - notchDepth) * 0.06;
+    const topY = notchY - topLift;
+    const sideCtrlY = shoulderY - (0.18 - notchDepth * 0.08);
+    const lowerCtrlY = 0.58 + (1 - tipSharpness) * 0.16;
+    const tipCtrlX = 0.34 - tipSharpness * 0.2;
+    const notchCtrlX = 0.06 + lobeSpread * 0.06;
+    const lobeCtrlX = 0.1 + lobeSpread * 0.08;
+    const notchCtrlY = notchY - topLift * 0.45;
+    const xPeakL = 0.5 - halfSpread;
+    const xPeakR = 0.5 + halfSpread;
+    const heartPath = new paper_1.default.Path({ insert: false });
+    heartPath.moveTo(new paper_1.default.Point(0.5, notchY));
+    heartPath.cubicCurveTo(new paper_1.default.Point(0.5 - notchCtrlX, notchCtrlY), new paper_1.default.Point(xPeakL + lobeCtrlX, topY), new paper_1.default.Point(xPeakL, topY));
+    heartPath.cubicCurveTo(new paper_1.default.Point(xPeakL - lobeCtrlX, topY), new paper_1.default.Point(0, sideCtrlY), new paper_1.default.Point(0, shoulderY));
+    heartPath.cubicCurveTo(new paper_1.default.Point(0, lowerCtrlY), new paper_1.default.Point(tipCtrlX, 1), new paper_1.default.Point(0.5, 1));
+    heartPath.cubicCurveTo(new paper_1.default.Point(1 - tipCtrlX, 1), new paper_1.default.Point(1, lowerCtrlY), new paper_1.default.Point(1, shoulderY));
+    heartPath.cubicCurveTo(new paper_1.default.Point(1, sideCtrlY), new paper_1.default.Point(xPeakR + lobeCtrlX, topY), new paper_1.default.Point(xPeakR, topY));
+    heartPath.cubicCurveTo(new paper_1.default.Point(xPeakR - lobeCtrlX, topY), new paper_1.default.Point(0.5 + notchCtrlX, notchCtrlY), new paper_1.default.Point(0.5, notchY));
+    heartPath.closed = true;
+    return heartPath;
+}
+function createHeartBaseShape(options) {
+    const { x, y, width, height } = options;
+    const w = Math.max(0, width);
+    const h = Math.max(0, height);
+    const left = x - w / 2;
+    const top = y - h / 2;
+    const fitMode = (0, dielineShape_1.getShapeFitMode)(options.shapeStyle);
+    const heartParams = (0, dielineShape_1.getHeartShapeParams)(options.shapeStyle);
+    const rawHeart = createNormalizedHeartPath(heartParams);
+    return fitPathItemToRect(rawHeart, { left, top, width: w, height: h }, fitMode);
+}
+const BUILTIN_SHAPE_BUILDERS = {
+    rect: (options) => {
+        const { x, y, width, height, radius } = options;
         return new paper_1.default.Path.Rectangle({
             point: [x - width / 2, y - height / 2],
             size: [Math.max(0, width), Math.max(0, height)],
             radius: Math.max(0, radius),
         });
-    }
-    else if (shape === "circle") {
+    },
+    circle: (options) => {
+        const { x, y, width, height } = options;
         const r = Math.min(width, height) / 2;
         return new paper_1.default.Path.Circle({
-            center: center,
+            center: new paper_1.default.Point(x, y),
             radius: Math.max(0, r),
         });
-    }
-    else if (shape === "ellipse") {
+    },
+    ellipse: (options) => {
+        const { x, y, width, height } = options;
         return new paper_1.default.Path.Ellipse({
-            center: center,
+            center: new paper_1.default.Point(x, y),
             radius: [Math.max(0, width / 2), Math.max(0, height / 2)],
         });
+    },
+    heart: createHeartBaseShape,
+};
+function createCustomBaseShape(options) {
+    const { pathData, customSourceWidthPx, customSourceHeightPx, x, y, width, height, } = options;
+    if (typeof pathData !== "string" || pathData.trim().length === 0) {
+        return null;
+    }
+    const center = new paper_1.default.Point(x, y);
+    const hasMultipleSubPaths = ((pathData.match(/[Mm]/g) || []).length ?? 0) > 1;
+    const path = hasMultipleSubPaths
+        ? new paper_1.default.CompoundPath(pathData)
+        : (() => {
+            const single = new paper_1.default.Path();
+            single.pathData = pathData;
+            return single;
+        })();
+    const sourceWidth = Number(customSourceWidthPx ?? 0);
+    const sourceHeight = Number(customSourceHeightPx ?? 0);
+    if (Number.isFinite(sourceWidth) &&
+        Number.isFinite(sourceHeight) &&
+        sourceWidth > 0 &&
+        sourceHeight > 0 &&
+        width > 0 &&
+        height > 0) {
+        // Preserve original detect-space offset/expand by mapping source image
+        // coordinates directly into the target dieline frame.
+        const targetLeft = x - width / 2;
+        const targetTop = y - height / 2;
+        path.scale(width / sourceWidth, height / sourceHeight, new paper_1.default.Point(0, 0));
+        path.translate(new paper_1.default.Point(targetLeft, targetTop));
+        return path;
     }
-    else if (shape === "custom" && pathData) {
-        const hasMultipleSubPaths = ((pathData.match(/[Mm]/g) || []).length ?? 0) > 1;
-        const path = hasMultipleSubPaths
-            ? new paper_1.default.CompoundPath(pathData)
-            : (() => {
-                const single = new paper_1.default.Path();
-                single.pathData = pathData;
-                return single;
-            })();
-        // Align center
+    if (width > 0 && height > 0 && path.bounds.width > 0 && path.bounds.height > 0) {
+        // Fallback for malformed custom-path metadata.
         path.position = center;
-        if (width > 0 &&
-            height > 0 &&
-            path.bounds.width > 0 &&
-            path.bounds.height > 0) {
-            path.scale(width / path.bounds.width, height / path.bounds.height);
-        }
+        path.scale(width / path.bounds.width, height / path.bounds.height);
         return path;
     }
-    else {
-        return new paper_1.default.Path.Rectangle({
-            point: [x - width / 2, y - height / 2],
-            size: [Math.max(0, width), Math.max(0, height)],
-        });
+    path.position = center;
+    return path;
+}
+function createBaseShape(options) {
+    const { shape } = options;
+    if (shape === "custom") {
+        const customShape = createCustomBaseShape(options);
+        if (customShape)
+            return customShape;
+        return BUILTIN_SHAPE_BUILDERS[dielineShape_1.DEFAULT_DIELINE_SHAPE](options);
     }
+    return BUILTIN_SHAPE_BUILDERS[shape](options);
 }
 function resolveBridgeBasePath(shape, anchor) {
     if (shape instanceof paper_1.default.Path) {
@@ -447,27 +532,6 @@ function generateDielinePath(options) {
     finalShape.remove();
     return pathData;
 }
-/**
- * Generates the path data for the Mask (Background Overlay).
- * Logic: Canvas SUBTRACT ProductShape
- */
-function generateMaskPath(options) {
-    ensurePaper(options.canvasWidth, options.canvasHeight);
-    paper_1.default.project.activeLayer.removeChildren();
-    const { canvasWidth, canvasHeight } = options;
-    const maskRect = new paper_1.default.Path.Rectangle({
-        point: [0, 0],
-        size: [canvasWidth, canvasHeight],
-    });
-    const perimeter = getPerimeterShape(options);
-    const mainShape = applySurfaceFeatures(perimeter, options.features, options);
-    const finalMask = maskRect.subtract(mainShape);
-    maskRect.remove();
-    mainShape.remove();
-    const pathData = finalMask.pathData;
-    finalMask.remove();
-    return pathData;
-}
 /**
  * Generates the path data for the Bleed Zone.
  */