@pooder/kit 5.3.1 → 6.0.0

package/.test-dist/src/extensions/white-ink.js

@@ -7,7 +7,6 @@ const WHITE_INK_OBJECT_LAYER_ID = "white-ink.user";
 const WHITE_INK_COVER_LAYER_ID = "white-ink.cover";
 const WHITE_INK_OVERLAY_LAYER_ID = "white-ink.overlay";
 const IMAGE_OBJECT_LAYER_ID = "image.user";
-const IMAGE_OVERLAY_LAYER_ID = "image-overlay";
 const WHITE_INK_DEBUG_KEY = "whiteInk.debug";
 const WHITE_INK_PREVIEW_IMAGE_VISIBLE_KEY = "whiteInk.previewImageVisible";
 const WHITE_INK_DEFAULT_OPACITY = 0.85;
@@ -34,6 +33,9 @@ class WhiteInkTool {
         this.printWithWhiteInk = true;
         this.previewImageVisible = true;
         this.renderSeq = 0;
+        this.whiteSpecs = [];
+        this.coverSpecs = [];
+        this.overlaySpecs = [];
         this.onToolActivated = (event) => {
             const before = this.isToolActive;
             this.syncToolActiveFromWorkbench(event.id);
@@ -77,6 +79,29 @@ class WhiteInkTool {
             console.warn("CanvasService not found for WhiteInkTool");
             return;
         }
+        this.renderProducerDisposable?.dispose();
+        this.renderProducerDisposable = this.canvasService.registerRenderProducer(this.id, () => ({
+            passes: [
+                {
+                    id: WHITE_INK_COVER_LAYER_ID,
+                    stack: 220,
+                    order: 0,
+                    objects: this.coverSpecs,
+                },
+                {
+                    id: WHITE_INK_OBJECT_LAYER_ID,
+                    stack: 221,
+                    order: 0,
+                    objects: this.whiteSpecs,
+                },
+                {
+                    id: WHITE_INK_OVERLAY_LAYER_ID,
+                    stack: 790,
+                    order: 0,
+                    objects: this.overlaySpecs,
+                },
+            ],
+        }), { priority: 260 });
         context.eventBus.on("tool:activated", this.onToolActivated);
         context.eventBus.on("scene:layout:change", this.onSceneLayoutChanged);
         context.eventBus.on("object:added", this.onObjectAdded);
@@ -139,7 +164,11 @@ class WhiteInkTool {
         this.dirtyTrackerDisposable?.dispose();
         this.dirtyTrackerDisposable = undefined;
         this.clearRenderedWhiteInks();
-        this.applyImageVisibilityForWhiteInk(false);
+        this.renderProducerDisposable?.dispose();
+        this.renderProducerDisposable = undefined;
+        if (this.canvasService) {
+            void this.canvasService.flushRenderFromProducers();
+        }
         this.canvasService = undefined;
         this.context = undefined;
     }
@@ -557,11 +586,20 @@ class WhiteInkTool {
         if (!layout) {
             return { left: 0, top: 0, width: 0, height: 0 };
         }
-        return {
+        return this.canvasService.toSceneRect({
             left: layout.cutRect.left,
             top: layout.cutRect.top,
             width: layout.cutRect.width,
             height: layout.cutRect.height,
+        });
+    }
+    toLayoutSceneRect(rect) {
+        return {
+            left: rect.left,
+            top: rect.top,
+            width: rect.width,
+            height: rect.height,
+            space: "scene",
         };
     }
     getImageObjects() {
@@ -594,14 +632,20 @@ class WhiteInkTool {
         const width = Number(obj?.width || 0);
         const height = Number(obj?.height || 0);
         this.rememberSourceSize(src, { width, height });
+        const sceneScale = this.canvasService?.getSceneScale() || 1;
+        const leftScreen = Number.isFinite(obj?.left) ? Number(obj.left) : 0;
+        const topScreen = Number.isFinite(obj?.top) ? Number(obj.top) : 0;
+        const scenePoint = this.canvasService
+            ? this.canvasService.toScenePoint({ x: leftScreen, y: topScreen })
+            : { x: leftScreen, y: topScreen };
         return {
             id: String(obj?.data?.id || "image"),
             src,
             element,
-            left: Number.isFinite(obj?.left) ? Number(obj.left) : 0,
-            top: Number.isFinite(obj?.top) ? Number(obj.top) : 0,
-            scaleX: Number.isFinite(obj?.scaleX) ? Number(obj.scaleX) : 1,
-            scaleY: Number.isFinite(obj?.scaleY) ? Number(obj.scaleY) : 1,
+            left: scenePoint.x,
+            top: scenePoint.y,
+            scaleX: (Number.isFinite(obj?.scaleX) ? Number(obj.scaleX) : 1) / sceneScale,
+            scaleY: (Number.isFinite(obj?.scaleY) ? Number(obj.scaleY) : 1) / sceneScale,
             angle: Number.isFinite(obj?.angle) ? Number(obj.angle) : 0,
             originX: typeof obj?.originX === "string" ? obj.originX : "center",
             originY: typeof obj?.originY === "string" ? obj.originY : "center",
@@ -799,8 +843,11 @@ class WhiteInkTool {
             return [];
         if (frame.width <= 0 || frame.height <= 0)
             return [];
-        const canvasW = this.canvasService.canvas.width || 0;
-        const canvasH = this.canvasService.canvas.height || 0;
+        const viewport = this.canvasService.getSceneViewportRect();
+        const canvasW = viewport.width || 0;
+        const canvasH = viewport.height || 0;
+        const canvasLeft = viewport.left || 0;
+        const canvasTop = viewport.top || 0;
         const strokeColor = this.getConfig("image.frame.strokeColor", "#808080") || "#808080";
         const strokeWidthRaw = Number(this.getConfig("image.frame.strokeWidth", 2) ?? 2);
         const dashLengthRaw = Number(this.getConfig("image.frame.dashLength", 8) ?? 8);
@@ -814,15 +861,30 @@ class WhiteInkTool {
         const dashLength = Number.isFinite(dashLengthRaw)
             ? Math.max(1, dashLengthRaw)
             : 8;
-        const frameLeft = Math.max(0, Math.min(canvasW, frame.left));
-        const frameTop = Math.max(0, Math.min(canvasH, frame.top));
-        const frameRight = Math.max(frameLeft, Math.min(canvasW, frame.left + frame.width));
-        const frameBottom = Math.max(frameTop, Math.min(canvasH, frame.top + frame.height));
+        const strokeWidthScene = this.canvasService.toSceneLength(strokeWidth);
+        const dashLengthScene = this.canvasService.toSceneLength(dashLength);
+        const frameLeft = Math.max(canvasLeft, Math.min(canvasLeft + canvasW, frame.left));
+        const frameTop = Math.max(canvasTop, Math.min(canvasTop + canvasH, frame.top));
+        const frameRight = Math.max(frameLeft, Math.min(canvasLeft + canvasW, frame.left + frame.width));
+        const frameBottom = Math.max(frameTop, Math.min(canvasTop + canvasH, frame.top + frame.height));
         const visibleFrameH = Math.max(0, frameBottom - frameTop);
-        const topH = frameTop;
-        const bottomH = Math.max(0, canvasH - frameBottom);
-        const leftW = frameLeft;
-        const rightW = Math.max(0, canvasW - frameRight);
+        const topH = Math.max(0, frameTop - canvasTop);
+        const bottomH = Math.max(0, canvasTop + canvasH - frameBottom);
+        const leftW = Math.max(0, frameLeft - canvasLeft);
+        const rightW = Math.max(0, canvasLeft + canvasW - frameRight);
+        const viewportRect = this.toLayoutSceneRect({
+            left: canvasLeft,
+            top: canvasTop,
+            width: canvasW,
+            height: canvasH,
+        });
+        const visibleFrameBandRect = this.toLayoutSceneRect({
+            left: canvasLeft,
+            top: frameTop,
+            width: canvasW,
+            height: visibleFrameH,
+        });
+        const frameRect = this.toLayoutSceneRect(frame);
         const maskSpecs = [
             {
                 id: "white-ink.cropMask.top",
@@ -832,13 +894,17 @@ class WhiteInkTool {
                     layerId: WHITE_INK_OVERLAY_LAYER_ID,
                     type: "white-ink-mask",
                 },
-                props: {
-                    left: canvasW / 2,
-                    top: topH / 2,
-                    width: canvasW,
+                layout: {
+                    reference: "custom",
+                    referenceRect: viewportRect,
+                    alignX: "start",
+                    alignY: "start",
+                    width: "100%",
                     height: topH,
-                    originX: "center",
-                    originY: "center",
+                },
+                props: {
+                    originX: "left",
+                    originY: "top",
                     fill: outerBackground,
                     selectable: false,
                     evented: false,
@@ -853,13 +919,17 @@ class WhiteInkTool {
                     layerId: WHITE_INK_OVERLAY_LAYER_ID,
                     type: "white-ink-mask",
                 },
-                props: {
-                    left: canvasW / 2,
-                    top: frameBottom + bottomH / 2,
-                    width: canvasW,
+                layout: {
+                    reference: "custom",
+                    referenceRect: viewportRect,
+                    alignX: "start",
+                    alignY: "end",
+                    width: "100%",
                     height: bottomH,
-                    originX: "center",
-                    originY: "center",
+                },
+                props: {
+                    originX: "left",
+                    originY: "top",
                     fill: outerBackground,
                     selectable: false,
                     evented: false,
@@ -874,13 +944,17 @@ class WhiteInkTool {
                     layerId: WHITE_INK_OVERLAY_LAYER_ID,
                     type: "white-ink-mask",
                 },
-                props: {
-                    left: leftW / 2,
-                    top: frameTop + visibleFrameH / 2,
+                layout: {
+                    reference: "custom",
+                    referenceRect: visibleFrameBandRect,
+                    alignX: "start",
+                    alignY: "start",
                     width: leftW,
-                    height: visibleFrameH,
-                    originX: "center",
-                    originY: "center",
+                    height: "100%",
+                },
+                props: {
+                    originX: "left",
+                    originY: "top",
                     fill: outerBackground,
                     selectable: false,
                     evented: false,
@@ -895,13 +969,17 @@ class WhiteInkTool {
                     layerId: WHITE_INK_OVERLAY_LAYER_ID,
                     type: "white-ink-mask",
                 },
-                props: {
-                    left: frameRight + rightW / 2,
-                    top: frameTop + visibleFrameH / 2,
+                layout: {
+                    reference: "custom",
+                    referenceRect: visibleFrameBandRect,
+                    alignX: "end",
+                    alignY: "start",
                     width: rightW,
-                    height: visibleFrameH,
-                    originX: "center",
-                    originY: "center",
+                    height: "100%",
+                },
+                props: {
+                    originX: "left",
+                    originY: "top",
                     fill: outerBackground,
                     selectable: false,
                     evented: false,
@@ -919,17 +997,21 @@ class WhiteInkTool {
                     layerId: WHITE_INK_OVERLAY_LAYER_ID,
                     type: "white-ink-frame",
                 },
+                layout: {
+                    reference: "custom",
+                    referenceRect: frameRect,
+                    alignX: "start",
+                    alignY: "start",
+                    width: "100%",
+                    height: "100%",
+                },
                 props: {
-                    left: frame.left + frame.width / 2,
-                    top: frame.top + frame.height / 2,
-                    width: frame.width,
-                    height: frame.height,
-                    originX: "center",
-                    originY: "center",
+                    originX: "left",
+                    originY: "top",
                     fill: innerBackground,
                     stroke: strokeColor,
-                    strokeWidth,
-                    strokeDashArray: [dashLength, dashLength],
+                    strokeWidth: strokeWidthScene,
+                    strokeDashArray: [dashLengthScene, dashLengthScene],
                     selectable: false,
                     evented: false,
                     excludeFromExport: true,
@@ -937,24 +1019,6 @@ class WhiteInkTool {
             },
         ];
     }
-    applyImageVisibilityForWhiteInk(previewActive) {
-        if (!this.canvasService)
-            return;
-        const visible = !previewActive;
-        let changed = false;
-        this.canvasService.canvas.getObjects().forEach((obj) => {
-            if (obj?.data?.layerId !== IMAGE_OBJECT_LAYER_ID)
-                return;
-            if (obj.visible === visible)
-                return;
-            obj.set({ visible });
-            obj.setCoords?.();
-            changed = true;
-        });
-        if (changed) {
-            this.canvasService.requestRenderAll();
-        }
-    }
     resolveRenderItems() {
         if (this.isToolActive) {
             return this.cloneItems(this.workingItems);
@@ -980,66 +1044,13 @@ class WhiteInkTool {
             whiteScaleAdjustY: scaleAdjust.y,
         };
     }
-    resolveDefaultInsertIndex(objects) {
-        if (!this.canvasService)
-            return 0;
-        const backgroundLayer = this.canvasService.getLayer("background");
-        if (!backgroundLayer)
-            return 0;
-        const bgIndex = objects.indexOf(backgroundLayer);
-        if (bgIndex < 0)
-            return 0;
-        return bgIndex + 1;
-    }
-    syncZOrder() {
-        if (!this.canvasService)
-            return;
-        const canvas = this.canvasService.canvas;
-        const whiteObjects = this.canvasService.getRootLayerObjects(WHITE_INK_OBJECT_LAYER_ID);
-        const coverObjects = this.canvasService.getRootLayerObjects(WHITE_INK_COVER_LAYER_ID);
-        const frameObjects = this.canvasService.getRootLayerObjects(WHITE_INK_OVERLAY_LAYER_ID);
-        const currentObjects = canvas.getObjects();
-        const imageIndexes = currentObjects
-            .map((obj, index) => obj?.data?.layerId === IMAGE_OBJECT_LAYER_ID ? index : -1)
-            .filter((index) => index >= 0);
-        let whiteInsertIndex = imageIndexes.length
-            ? Math.min(...imageIndexes)
-            : this.resolveDefaultInsertIndex(currentObjects);
-        whiteObjects.forEach((obj) => {
-            canvas.moveObjectTo(obj, whiteInsertIndex);
-            whiteInsertIndex += 1;
-        });
-        const afterWhiteObjects = canvas.getObjects();
-        const afterImageIndexes = afterWhiteObjects
-            .map((obj, index) => obj?.data?.layerId === IMAGE_OBJECT_LAYER_ID ? index : -1)
-            .filter((index) => index >= 0);
-        let coverInsertIndex = afterImageIndexes.length
-            ? Math.max(...afterImageIndexes) + 1
-            : whiteInsertIndex;
-        coverObjects.forEach((obj) => {
-            canvas.moveObjectTo(obj, coverInsertIndex);
-            coverInsertIndex += 1;
-        });
-        frameObjects.forEach((obj) => canvas.bringObjectToFront(obj));
-        canvas
-            .getObjects()
-            .filter((obj) => obj?.data?.layerId === IMAGE_OVERLAY_LAYER_ID)
-            .forEach((obj) => canvas.bringObjectToFront(obj));
-        const dielineOverlay = this.canvasService.getLayer("dieline-overlay");
-        if (dielineOverlay) {
-            canvas.bringObjectToFront(dielineOverlay);
-        }
-        const rulerOverlay = this.canvasService.getLayer("ruler-overlay");
-        if (rulerOverlay) {
-            canvas.bringObjectToFront(rulerOverlay);
-        }
-    }
     clearRenderedWhiteInks() {
         if (!this.canvasService)
             return;
-        void this.canvasService.applyObjectSpecsToRootLayer(WHITE_INK_OBJECT_LAYER_ID, []);
-        void this.canvasService.applyObjectSpecsToRootLayer(WHITE_INK_COVER_LAYER_ID, []);
-        void this.canvasService.applyObjectSpecsToRootLayer(WHITE_INK_OVERLAY_LAYER_ID, []);
+        this.whiteSpecs = [];
+        this.coverSpecs = [];
+        this.overlaySpecs = [];
+        this.canvasService.requestRenderFromProducers();
     }
     purgeSourceCaches(item) {
         const sourceUrl = this.resolveSourceUrl(item);
@@ -1067,7 +1078,6 @@ class WhiteInkTool {
         this.syncToolActiveFromWorkbench();
         const seq = ++this.renderSeq;
         const previewActive = this.isPreviewActive();
-        this.applyImageVisibilityForWhiteInk(previewActive);
         const frame = this.getFrameRect();
         const frameSpecs = this.buildFrameSpecs(frame);
         let whiteSpecs = [];
@@ -1094,16 +1104,16 @@ class WhiteInkTool {
                 }
             }
         }
-        await this.canvasService.applyObjectSpecsToRootLayer(WHITE_INK_OBJECT_LAYER_ID, whiteSpecs);
+        this.whiteSpecs = whiteSpecs;
         if (seq !== this.renderSeq)
             return;
-        await this.canvasService.applyObjectSpecsToRootLayer(WHITE_INK_COVER_LAYER_ID, coverSpecs);
+        this.coverSpecs = coverSpecs;
         if (seq !== this.renderSeq)
             return;
-        await this.canvasService.applyObjectSpecsToRootLayer(WHITE_INK_OVERLAY_LAYER_ID, frameSpecs);
+        this.overlaySpecs = frameSpecs;
+        await this.canvasService.flushRenderFromProducers();
         if (seq !== this.renderSeq)
             return;
-        this.syncZOrder();
         this.canvasService.requestRenderAll();
     }
     getMaskCacheKey(sourceUrl, tint) {