@pooder/kit 4.3.0 → 5.0.0

package/.test-dist/src/ruler.js

@@ -0,0 +1,343 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RulerTool = void 0;
+const core_1 = require("@pooder/core");
+const fabric_1 = require("fabric");
+const units_1 = require("./units");
+const sceneLayoutModel_1 = require("./sceneLayoutModel");
+class RulerTool {
+    constructor(options) {
+        this.id = "pooder.kit.ruler";
+        this.metadata = {
+            name: "RulerTool",
+        };
+        this.thickness = 20;
+        this.gap = 15;
+        this.backgroundColor = "#f0f0f0";
+        this.textColor = "#333333";
+        this.lineColor = "#999999";
+        this.fontSize = 10;
+        this.onCanvasResized = () => {
+            this.updateRuler();
+        };
+        if (options) {
+            Object.assign(this, options);
+        }
+    }
+    activate(context) {
+        this.context = context;
+        this.canvasService = context.services.get("CanvasService");
+        if (!this.canvasService) {
+            console.warn("CanvasService not found for RulerTool");
+            return;
+        }
+        const configService = context.services.get("ConfigurationService");
+        if (configService) {
+            // Load initial config
+            this.thickness = configService.get("ruler.thickness", this.thickness);
+            this.gap = configService.get("ruler.gap", this.gap);
+            this.backgroundColor = configService.get("ruler.backgroundColor", this.backgroundColor);
+            this.textColor = configService.get("ruler.textColor", this.textColor);
+            this.lineColor = configService.get("ruler.lineColor", this.lineColor);
+            this.fontSize = configService.get("ruler.fontSize", this.fontSize);
+            // Listen for changes
+            configService.onAnyChange((e) => {
+                let shouldUpdate = false;
+                if (e.key.startsWith("ruler.")) {
+                    const prop = e.key.split(".")[1];
+                    if (prop && prop in this) {
+                        this[prop] = e.value;
+                        shouldUpdate = true;
+                    }
+                }
+                else if (e.key.startsWith("size.")) {
+                    shouldUpdate = true;
+                }
+                if (shouldUpdate) {
+                    this.updateRuler();
+                }
+            });
+        }
+        this.createLayer();
+        context.eventBus.on("canvas:resized", this.onCanvasResized);
+        this.updateRuler();
+    }
+    deactivate(context) {
+        context.eventBus.off("canvas:resized", this.onCanvasResized);
+        this.destroyLayer();
+        this.canvasService = undefined;
+        this.context = undefined;
+    }
+    contribute() {
+        return {
+            [core_1.ContributionPointIds.CONFIGURATIONS]: [
+                {
+                    id: "ruler.thickness",
+                    type: "number",
+                    label: "Thickness",
+                    min: 10,
+                    max: 100,
+                    default: 20,
+                },
+                {
+                    id: "ruler.gap",
+                    type: "number",
+                    label: "Gap",
+                    min: 0,
+                    max: 100,
+                    default: 15,
+                },
+                {
+                    id: "ruler.backgroundColor",
+                    type: "color",
+                    label: "Background Color",
+                    default: "#f0f0f0",
+                },
+                {
+                    id: "ruler.textColor",
+                    type: "color",
+                    label: "Text Color",
+                    default: "#333333",
+                },
+                {
+                    id: "ruler.lineColor",
+                    type: "color",
+                    label: "Line Color",
+                    default: "#999999",
+                },
+                {
+                    id: "ruler.fontSize",
+                    type: "number",
+                    label: "Font Size",
+                    min: 8,
+                    max: 24,
+                    default: 10,
+                },
+            ],
+            [core_1.ContributionPointIds.COMMANDS]: [
+                {
+                    command: "setTheme",
+                    title: "Set Ruler Theme",
+                    handler: (theme) => {
+                        const oldState = {
+                            backgroundColor: this.backgroundColor,
+                            textColor: this.textColor,
+                            lineColor: this.lineColor,
+                            fontSize: this.fontSize,
+                            thickness: this.thickness,
+                        };
+                        const newState = { ...oldState, ...theme };
+                        if (JSON.stringify(newState) === JSON.stringify(oldState))
+                            return true;
+                        Object.assign(this, newState);
+                        this.updateRuler();
+                        return true;
+                    },
+                },
+            ],
+        };
+    }
+    getLayer() {
+        return this.canvasService?.getLayer("ruler-overlay");
+    }
+    createLayer() {
+        if (!this.canvasService)
+            return;
+        const canvas = this.canvasService.canvas;
+        const width = canvas.width || 800;
+        const height = canvas.height || 600;
+        const layer = this.canvasService.createLayer("ruler-overlay", {
+            width,
+            height,
+            selectable: false,
+            evented: false,
+            left: 0,
+            top: 0,
+            originX: "left",
+            originY: "top",
+        });
+        canvas.bringObjectToFront(layer);
+    }
+    destroyLayer() {
+        if (!this.canvasService)
+            return;
+        const layer = this.getLayer();
+        if (layer) {
+            this.canvasService.canvas.remove(layer);
+        }
+    }
+    createArrowLine(x1, y1, x2, y2, color) {
+        const line = new fabric_1.Line([x1, y1, x2, y2], {
+            stroke: color,
+            strokeWidth: this.thickness / 20, // Scale stroke width relative to thickness (default 1)
+            selectable: false,
+            evented: false,
+        });
+        // Arrow size proportional to thickness
+        const arrowSize = Math.max(4, this.thickness * 0.3);
+        const angle = Math.atan2(y2 - y1, x2 - x1);
+        // End Arrow (at x2, y2)
+        const endArrow = new fabric_1.Polygon([
+            { x: 0, y: 0 },
+            { x: -arrowSize, y: -arrowSize / 2 },
+            { x: -arrowSize, y: arrowSize / 2 },
+        ], {
+            fill: color,
+            left: x2,
+            top: y2,
+            originX: "right",
+            originY: "center",
+            angle: (angle * 180) / Math.PI,
+            selectable: false,
+            evented: false,
+        });
+        // Start Arrow (at x1, y1)
+        const startArrow = new fabric_1.Polygon([
+            { x: 0, y: 0 },
+            { x: arrowSize, y: -arrowSize / 2 },
+            { x: arrowSize, y: arrowSize / 2 },
+        ], {
+            fill: color,
+            left: x1,
+            top: y1,
+            originX: "left",
+            originY: "center",
+            angle: (angle * 180) / Math.PI,
+            selectable: false,
+            evented: false,
+        });
+        return new fabric_1.Group([line, startArrow, endArrow], {
+            selectable: false,
+            evented: false,
+        });
+    }
+    updateRuler() {
+        if (!this.canvasService)
+            return;
+        const layer = this.getLayer();
+        if (!layer)
+            return;
+        layer.remove(...layer.getObjects());
+        const { backgroundColor, lineColor, textColor, fontSize } = this;
+        const configService = this.context?.services.get("ConfigurationService");
+        if (!configService)
+            return;
+        const sizeState = (0, sceneLayoutModel_1.readSizeState)(configService);
+        const layout = (0, sceneLayoutModel_1.computeSceneLayout)(this.canvasService, sizeState);
+        if (!layout)
+            return;
+        const trimRect = layout.trimRect;
+        const cutRect = layout.cutRect;
+        const useCutAsRuler = layout.cutMode === "outset";
+        const rulerRect = useCutAsRuler ? cutRect : trimRect;
+        // Use gap configuration
+        const gap = this.gap || 15;
+        // New Bounding Box for Ruler
+        const rulerLeft = rulerRect.left;
+        const rulerTop = rulerRect.top;
+        const rulerRight = rulerRect.left + rulerRect.width;
+        const rulerBottom = rulerRect.top + rulerRect.height;
+        // Display Dimensions (Physical)
+        const displayWidthMm = useCutAsRuler ? layout.cutWidthMm : layout.trimWidthMm;
+        const displayHeightMm = useCutAsRuler
+            ? layout.cutHeightMm
+            : layout.trimHeightMm;
+        const displayUnit = sizeState.unit;
+        // Ruler Placement Coordinates
+        // Top Ruler: Above the top boundary
+        const topRulerY = rulerTop - gap;
+        const topRulerXStart = rulerLeft;
+        const topRulerXEnd = rulerRight;
+        // Left Ruler: Left of the left boundary
+        const leftRulerX = rulerLeft - gap;
+        const leftRulerYStart = rulerTop;
+        const leftRulerYEnd = rulerBottom;
+        // 1. Top Dimension Line (X-Axis)
+        const topDimLine = this.createArrowLine(topRulerXStart, topRulerY, topRulerXEnd, topRulerY, lineColor);
+        layer.add(topDimLine);
+        // Top Extension Lines
+        const extLen = 5;
+        layer.add(new fabric_1.Line([
+            topRulerXStart,
+            topRulerY - extLen,
+            topRulerXStart,
+            topRulerY + extLen,
+        ], {
+            stroke: lineColor,
+            strokeWidth: 1,
+            selectable: false,
+            evented: false,
+        }));
+        layer.add(new fabric_1.Line([topRulerXEnd, topRulerY - extLen, topRulerXEnd, topRulerY + extLen], {
+            stroke: lineColor,
+            strokeWidth: 1,
+            selectable: false,
+            evented: false,
+        }));
+        // Top Text (Centered)
+        const widthStr = (0, units_1.formatMm)(displayWidthMm, displayUnit);
+        const topTextContent = `${widthStr} ${displayUnit}`;
+        const topText = new fabric_1.Text(topTextContent, {
+            left: topRulerXStart + (rulerRight - rulerLeft) / 2,
+            top: topRulerY,
+            fontSize: fontSize,
+            fill: textColor,
+            fontFamily: "Arial",
+            originX: "center",
+            originY: "center",
+            backgroundColor: backgroundColor, // Background mask for readability
+            selectable: false,
+            evented: false,
+        });
+        // Add small padding to text background if Fabric supports it directly or via separate rect
+        // Fabric Text backgroundColor is tight.
+        layer.add(topText);
+        // 2. Left Dimension Line (Y-Axis)
+        const leftDimLine = this.createArrowLine(leftRulerX, leftRulerYStart, leftRulerX, leftRulerYEnd, lineColor);
+        layer.add(leftDimLine);
+        // Left Extension Lines
+        layer.add(new fabric_1.Line([
+            leftRulerX - extLen,
+            leftRulerYStart,
+            leftRulerX + extLen,
+            leftRulerYStart,
+        ], {
+            stroke: lineColor,
+            strokeWidth: 1,
+            selectable: false,
+            evented: false,
+        }));
+        layer.add(new fabric_1.Line([
+            leftRulerX - extLen,
+            leftRulerYEnd,
+            leftRulerX + extLen,
+            leftRulerYEnd,
+        ], {
+            stroke: lineColor,
+            strokeWidth: 1,
+            selectable: false,
+            evented: false,
+        }));
+        // Left Text (Centered, Rotated)
+        const heightStr = (0, units_1.formatMm)(displayHeightMm, displayUnit);
+        const leftTextContent = `${heightStr} ${displayUnit}`;
+        const leftText = new fabric_1.Text(leftTextContent, {
+            left: leftRulerX,
+            top: leftRulerYStart + (rulerBottom - rulerTop) / 2,
+            angle: -90,
+            fontSize: fontSize,
+            fill: textColor,
+            fontFamily: "Arial",
+            originX: "center",
+            originY: "center",
+            backgroundColor: backgroundColor,
+            selectable: false,
+            evented: false,
+        });
+        layer.add(leftText);
+        // Always bring ruler to front
+        this.canvasService.canvas.bringObjectToFront(layer);
+        this.canvasService.canvas.requestRenderAll();
+    }
+}
+exports.RulerTool = RulerTool;

package/.test-dist/src/sceneLayout.js

@@ -0,0 +1,99 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SceneLayoutService = void 0;
+const core_1 = require("@pooder/core");
+const sceneLayoutModel_1 = require("./sceneLayoutModel");
+const GEOMETRY_KEYS = new Set([
+    "dieline.shape",
+    "dieline.radius",
+    "dieline.pathData",
+    "size.unit",
+]);
+class SceneLayoutService {
+    constructor() {
+        this.id = "pooder.kit.sceneLayout";
+        this.metadata = {
+            name: "SceneLayoutService",
+        };
+        this.lastLayout = null;
+        this.lastGeometry = null;
+        this.onCanvasResized = () => {
+            this.refresh(true);
+        };
+    }
+    activate(context) {
+        this.context = context;
+        this.canvasService = context.services.get("CanvasService");
+        this.configService = context.services.get("ConfigurationService");
+        if (!this.canvasService || !this.configService)
+            return;
+        this.onConfigChange = this.configService.onAnyChange((e) => {
+            if (e.key.startsWith("size.") || e.key.startsWith("dieline.")) {
+                this.refresh(GEOMETRY_KEYS.has(e.key));
+            }
+        });
+        context.eventBus.on("canvas:resized", this.onCanvasResized);
+        this.refresh(true);
+    }
+    deactivate(context) {
+        context.eventBus.off("canvas:resized", this.onCanvasResized);
+        this.onConfigChange?.dispose();
+        this.onConfigChange = undefined;
+        this.context = undefined;
+        this.canvasService = undefined;
+        this.configService = undefined;
+        this.lastLayout = null;
+        this.lastGeometry = null;
+    }
+    contribute() {
+        return {
+            [core_1.ContributionPointIds.COMMANDS]: [
+                {
+                    command: "getSceneLayout",
+                    title: "Get Scene Layout",
+                    handler: () => this.getLayout(),
+                },
+                {
+                    command: "getSceneGeometry",
+                    title: "Get Scene Geometry",
+                    handler: () => this.getGeometry(),
+                },
+            ],
+        };
+    }
+    refresh(forceGeometry = false) {
+        const layout = this.getLayout(true);
+        if (!layout)
+            return;
+        this.context?.eventBus.emit("scene:layout:change", layout);
+        if (forceGeometry || !this.lastGeometry) {
+            const geometry = this.getGeometry(true);
+            if (geometry) {
+                this.context?.eventBus.emit("scene:geometry:change", geometry);
+            }
+        }
+    }
+    getLayout(forceRefresh = false) {
+        if (!this.canvasService || !this.configService)
+            return null;
+        if (!forceRefresh && this.lastLayout)
+            return this.lastLayout;
+        const state = (0, sceneLayoutModel_1.readSizeState)(this.configService);
+        const layout = (0, sceneLayoutModel_1.computeSceneLayout)(this.canvasService, state);
+        this.lastLayout = layout;
+        return layout;
+    }
+    getGeometry(forceRefresh = false) {
+        if (!this.configService)
+            return null;
+        const layout = this.getLayout(forceRefresh);
+        if (!layout)
+            return null;
+        if (!forceRefresh && this.lastGeometry)
+            return this.lastGeometry;
+        const geometry = (0, sceneLayoutModel_1.buildSceneGeometry)(this.configService, layout);
+        this.lastGeometry = geometry;
+        return geometry;
+    }
+}
+exports.SceneLayoutService = SceneLayoutService;

package/.test-dist/src/sceneLayoutModel.js

@@ -0,0 +1,196 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sanitizeMmValue = sanitizeMmValue;
+exports.normalizeUnit = normalizeUnit;
+exports.normalizeConstraintMode = normalizeConstraintMode;
+exports.normalizeCutMode = normalizeCutMode;
+exports.toMm = toMm;
+exports.fromMm = fromMm;
+exports.resolvePaddingPx = resolvePaddingPx;
+exports.readSizeState = readSizeState;
+exports.computeSceneLayout = computeSceneLayout;
+exports.buildSceneGeometry = buildSceneGeometry;
+const coordinate_1 = require("./coordinate");
+const units_1 = require("./units");
+const DEFAULT_SIZE_STATE = {
+    unit: "mm",
+    actualWidthMm: 500,
+    actualHeightMm: 500,
+    constraintMode: "free",
+    aspectRatio: 1,
+    cutMode: "trim",
+    cutMarginMm: 0,
+    viewPadding: 140,
+    minMm: 10,
+    maxMm: 2000,
+    stepMm: 0.1,
+};
+function clamp(value, min, max) {
+    return Math.max(min, Math.min(max, value));
+}
+function roundToStep(value, step) {
+    if (!Number.isFinite(step) || step <= 0)
+        return value;
+    return Math.round(value / step) * step;
+}
+function sanitizeMmValue(valueMm, limits) {
+    if (!Number.isFinite(valueMm))
+        return limits.minMm;
+    const rounded = roundToStep(valueMm, limits.stepMm);
+    return clamp(rounded, limits.minMm, limits.maxMm);
+}
+function normalizeUnit(value) {
+    if (value === "cm" || value === "in")
+        return value;
+    return "mm";
+}
+function normalizeConstraintMode(value) {
+    if (value === "lockAspect" || value === "equal")
+        return value;
+    return "free";
+}
+function normalizeCutMode(value) {
+    if (value === "outset" || value === "inset")
+        return value;
+    return "trim";
+}
+function toMm(value, fromUnit) {
+    return coordinate_1.Coordinate.convertUnit(value, fromUnit, "mm");
+}
+function fromMm(valueMm, toUnit) {
+    return coordinate_1.Coordinate.convertUnit(valueMm, "mm", toUnit);
+}
+function resolvePaddingPx(raw, containerWidth, containerHeight) {
+    if (typeof raw === "number")
+        return Math.max(0, raw);
+    if (typeof raw === "string") {
+        if (raw.endsWith("%")) {
+            const percent = parseFloat(raw) / 100;
+            if (!Number.isFinite(percent))
+                return 0;
+            return Math.max(0, Math.min(containerWidth, containerHeight) * percent);
+        }
+        const fixed = parseFloat(raw);
+        return Number.isFinite(fixed) ? Math.max(0, fixed) : 0;
+    }
+    return 0;
+}
+function readSizeState(configService) {
+    const unit = normalizeUnit(configService.get("size.unit", DEFAULT_SIZE_STATE.unit));
+    const minMm = Math.max(0.1, Number(configService.get("size.minMm", DEFAULT_SIZE_STATE.minMm)));
+    const maxMm = Math.max(minMm, Number(configService.get("size.maxMm", DEFAULT_SIZE_STATE.maxMm)));
+    const stepMm = Math.max(0.001, Number(configService.get("size.stepMm", DEFAULT_SIZE_STATE.stepMm)));
+    const actualWidthMm = sanitizeMmValue((0, units_1.parseLengthToMm)(configService.get("size.actualWidthMm", DEFAULT_SIZE_STATE.actualWidthMm), "mm"), { minMm, maxMm, stepMm });
+    const actualHeightMm = sanitizeMmValue((0, units_1.parseLengthToMm)(configService.get("size.actualHeightMm", DEFAULT_SIZE_STATE.actualHeightMm), "mm"), { minMm, maxMm, stepMm });
+    const aspectRaw = Number(configService.get("size.aspectRatio", DEFAULT_SIZE_STATE.aspectRatio));
+    const aspectRatio = Number.isFinite(aspectRaw) && aspectRaw > 0
+        ? aspectRaw
+        : actualWidthMm / Math.max(0.001, actualHeightMm);
+    const cutMarginMm = Math.max(0, (0, units_1.parseLengthToMm)(configService.get("size.cutMarginMm", DEFAULT_SIZE_STATE.cutMarginMm), "mm"));
+    const viewPadding = configService.get("size.viewPadding", DEFAULT_SIZE_STATE.viewPadding);
+    return {
+        unit,
+        actualWidthMm,
+        actualHeightMm,
+        constraintMode: normalizeConstraintMode(configService.get("size.constraintMode", DEFAULT_SIZE_STATE.constraintMode)),
+        aspectRatio,
+        cutMode: normalizeCutMode(configService.get("size.cutMode", DEFAULT_SIZE_STATE.cutMode)),
+        cutMarginMm,
+        viewPadding,
+        minMm,
+        maxMm,
+        stepMm,
+    };
+}
+function rectByCenter(centerX, centerY, width, height) {
+    return {
+        left: centerX - width / 2,
+        top: centerY - height / 2,
+        width,
+        height,
+        centerX,
+        centerY,
+    };
+}
+function getCutSizeMm(size) {
+    if (size.cutMode === "trim") {
+        return { widthMm: size.actualWidthMm, heightMm: size.actualHeightMm };
+    }
+    const delta = size.cutMarginMm * 2;
+    if (size.cutMode === "outset") {
+        return {
+            widthMm: size.actualWidthMm + delta,
+            heightMm: size.actualHeightMm + delta,
+        };
+    }
+    return {
+        widthMm: Math.max(size.minMm, size.actualWidthMm - delta),
+        heightMm: Math.max(size.minMm, size.actualHeightMm - delta),
+    };
+}
+function computeSceneLayout(canvasService, size) {
+    const canvasWidth = canvasService.canvas.width || 0;
+    const canvasHeight = canvasService.canvas.height || 0;
+    if (canvasWidth <= 0 || canvasHeight <= 0)
+        return null;
+    const { widthMm: cutWidthMm, heightMm: cutHeightMm } = getCutSizeMm(size);
+    const viewWidthMm = Math.max(size.actualWidthMm, cutWidthMm);
+    const viewHeightMm = Math.max(size.actualHeightMm, cutHeightMm);
+    if (!Number.isFinite(viewWidthMm) ||
+        !Number.isFinite(viewHeightMm) ||
+        viewWidthMm <= 0 ||
+        viewHeightMm <= 0) {
+        return null;
+    }
+    const paddingPx = resolvePaddingPx(size.viewPadding, canvasWidth, canvasHeight);
+    canvasService.viewport.updateContainer(canvasWidth, canvasHeight);
+    canvasService.viewport.setPadding(paddingPx);
+    canvasService.viewport.updatePhysical(viewWidthMm, viewHeightMm);
+    const layout = canvasService.viewport.layout;
+    if (!Number.isFinite(layout.scale) ||
+        !Number.isFinite(layout.offsetX) ||
+        !Number.isFinite(layout.offsetY) ||
+        layout.scale <= 0) {
+        return null;
+    }
+    const centerX = layout.offsetX + layout.width / 2;
+    const centerY = layout.offsetY + layout.height / 2;
+    const trimWidthPx = size.actualWidthMm * layout.scale;
+    const trimHeightPx = size.actualHeightMm * layout.scale;
+    const cutWidthPx = cutWidthMm * layout.scale;
+    const cutHeightPx = cutHeightMm * layout.scale;
+    const trimRect = rectByCenter(centerX, centerY, trimWidthPx, trimHeightPx);
+    const cutRect = rectByCenter(centerX, centerY, cutWidthPx, cutHeightPx);
+    const bleedRect = rectByCenter(centerX, centerY, Math.max(trimWidthPx, cutWidthPx), Math.max(trimHeightPx, cutHeightPx));
+    return {
+        scale: layout.scale,
+        canvasWidth,
+        canvasHeight,
+        trimRect,
+        cutRect,
+        bleedRect,
+        trimWidthMm: size.actualWidthMm,
+        trimHeightMm: size.actualHeightMm,
+        cutWidthMm,
+        cutHeightMm,
+        cutMode: size.cutMode,
+        cutMarginMm: size.cutMarginMm,
+    };
+}
+function buildSceneGeometry(configService, layout) {
+    const radiusMm = (0, units_1.parseLengthToMm)(configService.get("dieline.radius", 0), "mm");
+    const offset = (layout.cutRect.width - layout.trimRect.width) / 2;
+    return {
+        shape: configService.get("dieline.shape", "rect"),
+        unit: "mm",
+        displayUnit: normalizeUnit(configService.get("size.unit", "mm")),
+        x: layout.trimRect.centerX,
+        y: layout.trimRect.centerY,
+        width: layout.trimRect.width,
+        height: layout.trimRect.height,
+        radius: radiusMm * layout.scale,
+        offset,
+        scale: layout.scale,
+        pathData: configService.get("dieline.pathData"),
+    };
+}

package/.test-dist/src/sceneView.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SceneViewService = void 0;
+class SceneViewService {
+    constructor() {
+        this.id = "pooder.kit.sceneView";
+        this.metadata = {
+            name: "SceneViewService",
+        };
+        this.onToolActivated = (e) => {
+            this.activeToolId = e.id;
+            this.apply();
+        };
+        this.onObjectAdded = () => {
+            this.apply();
+        };
+    }
+    activate(context) {
+        this.canvasService = context.services.get("CanvasService");
+        context.eventBus.on("tool:activated", this.onToolActivated);
+        context.eventBus.on("object:added", this.onObjectAdded);
+    }
+    deactivate(context) {
+        context.eventBus.off("tool:activated", this.onToolActivated);
+        context.eventBus.off("object:added", this.onObjectAdded);
+        this.activeToolId = undefined;
+        this.canvasService = undefined;
+    }
+    apply() {
+        if (!this.canvasService || !this.activeToolId)
+            return;
+        const dielineLayer = this.canvasService.getLayer("dieline-overlay");
+        if (dielineLayer) {
+            const visible = this.activeToolId !== "pooder.kit.image";
+            dielineLayer.set({ visible });
+        }
+        this.canvasService.requestRenderAll();
+    }
+}
+exports.SceneViewService = SceneViewService;