@pooder/kit 6.0.1 → 6.1.1

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

@@ -0,0 +1,1003 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WhiteInkTool = void 0;
+const core_1 = require("@pooder/core");
+const frame_1 = require("../../shared/scene/frame");
+const sourceSizeCache_1 = require("../../shared/imaging/sourceSizeCache");
+const subscriptions_1 = require("../../shared/runtime/subscriptions");
+const sessionState_1 = require("../../shared/runtime/sessionState");
+const layers_1 = require("../../shared/constants/layers");
+const commands_1 = require("./commands");
+const config_1 = require("./config");
+const WHITE_INK_DEBUG_KEY = "whiteInk.debug";
+const WHITE_INK_PREVIEW_IMAGE_VISIBLE_KEY = "whiteInk.previewImageVisible";
+const WHITE_INK_DEFAULT_OPACITY = 0.85;
+const WHITE_INK_AUTO_ITEM_ID = "white-ink-auto";
+const WHITE_INK_COVER_OPACITY_FACTOR = 0.45;
+const WHITE_INK_COVER_OPACITY_MIN = 0.15;
+const WHITE_INK_COVER_OPACITY_MAX = 0.65;
+const WHITE_MASK_TINT = { r: 255, g: 255, b: 255, key: "white" };
+const COVER_MASK_TINT = { r: 52, g: 136, b: 255, key: "blue" };
+class WhiteInkTool {
+    constructor() {
+        this.id = "pooder.kit.white-ink";
+        this.metadata = {
+            name: "WhiteInkTool",
+        };
+        this.items = [];
+        this.workingItems = [];
+        this.hasWorkingChanges = false;
+        this.sourceSizeCache = (0, sourceSizeCache_1.createSourceSizeCache)((src) => this.loadImageSize(src));
+        this.previewMaskBySource = new Map();
+        this.pendingPreviewMaskBySource = new Map();
+        this.isUpdatingConfig = false;
+        this.isToolActive = false;
+        this.printWithWhiteInk = true;
+        this.previewImageVisible = true;
+        this.renderSeq = 0;
+        this.whiteSpecs = [];
+        this.coverSpecs = [];
+        this.overlaySpecs = [];
+        this.subscriptions = new subscriptions_1.SubscriptionBag();
+        this.onToolActivated = (event) => {
+            const before = this.isToolActive;
+            this.syncToolActiveFromWorkbench(event.id);
+            this.debug("tool:activated", {
+                id: event.id,
+                previous: event.previous,
+                before,
+                isToolActive: this.isToolActive,
+            });
+            this.updateWhiteInks();
+        };
+        this.onSceneLayoutChanged = () => {
+            this.updateWhiteInks();
+        };
+        this.onObjectAdded = (e) => {
+            const layerId = e?.target?.data?.layerId;
+            if (layerId !== layers_1.IMAGE_OBJECT_LAYER_ID)
+                return;
+            this.updateWhiteInks();
+        };
+        this.onObjectModified = (e) => {
+            const layerId = e?.target?.data?.layerId;
+            if (layerId !== layers_1.IMAGE_OBJECT_LAYER_ID)
+                return;
+            this.updateWhiteInks();
+        };
+        this.onObjectRemoved = (e) => {
+            const layerId = e?.target?.data?.layerId;
+            if (layerId !== layers_1.IMAGE_OBJECT_LAYER_ID)
+                return;
+            this.updateWhiteInks();
+        };
+        this.onImageWorkingChanged = () => {
+            this.updateWhiteInks();
+        };
+    }
+    activate(context) {
+        this.subscriptions.disposeAll();
+        this.context = context;
+        this.canvasService = context.services.get("CanvasService");
+        if (!this.canvasService) {
+            console.warn("CanvasService not found for WhiteInkTool");
+            return;
+        }
+        this.renderProducerDisposable?.dispose();
+        this.renderProducerDisposable = this.canvasService.registerRenderProducer(this.id, () => ({
+            passes: [
+                {
+                    id: layers_1.WHITE_INK_COVER_LAYER_ID,
+                    stack: 220,
+                    order: 0,
+                    objects: this.coverSpecs,
+                },
+                {
+                    id: layers_1.WHITE_INK_OBJECT_LAYER_ID,
+                    stack: 221,
+                    order: 0,
+                    objects: this.whiteSpecs,
+                },
+                {
+                    id: layers_1.WHITE_INK_OVERLAY_LAYER_ID,
+                    stack: 790,
+                    order: 0,
+                    objects: this.overlaySpecs,
+                },
+            ],
+        }), { priority: 260 });
+        this.subscriptions.on(context.eventBus, "tool:activated", this.onToolActivated);
+        this.subscriptions.on(context.eventBus, "scene:layout:change", this.onSceneLayoutChanged);
+        this.subscriptions.on(context.eventBus, "object:added", this.onObjectAdded);
+        this.subscriptions.on(context.eventBus, "object:modified", this.onObjectModified);
+        this.subscriptions.on(context.eventBus, "object:removed", this.onObjectRemoved);
+        this.subscriptions.on(context.eventBus, "image:working:change", this.onImageWorkingChanged);
+        const configService = context.services.get("ConfigurationService");
+        if (configService) {
+            this.applyCommittedItems(configService.get("whiteInk.items", []) || []);
+            this.printWithWhiteInk = !!configService.get("whiteInk.printWithWhiteInk", true);
+            this.previewImageVisible = !!configService.get(WHITE_INK_PREVIEW_IMAGE_VISIBLE_KEY, true);
+            this.migrateLegacyConfigIfNeeded(configService);
+            this.subscriptions.onConfigChange(configService, (e) => {
+                if (this.isUpdatingConfig)
+                    return;
+                if (e.key === "whiteInk.items") {
+                    this.applyCommittedItems(e.value || []);
+                    this.updateWhiteInks();
+                    return;
+                }
+                if (e.key === "whiteInk.printWithWhiteInk") {
+                    this.printWithWhiteInk = !!e.value;
+                    this.updateWhiteInks();
+                    return;
+                }
+                if (e.key === WHITE_INK_PREVIEW_IMAGE_VISIBLE_KEY) {
+                    this.previewImageVisible = !!e.value;
+                    this.updateWhiteInks();
+                    return;
+                }
+                if (e.key === "image.items") {
+                    this.updateWhiteInks();
+                    return;
+                }
+                if (e.key === WHITE_INK_DEBUG_KEY) {
+                    return;
+                }
+                if (e.key.startsWith("size.")) {
+                    this.updateWhiteInks();
+                }
+            });
+        }
+        const toolSessionService = context.services.get("ToolSessionService");
+        this.dirtyTrackerDisposable = toolSessionService?.registerDirtyTracker(this.id, () => this.hasWorkingChanges);
+        this.updateWhiteInks();
+    }
+    deactivate(context) {
+        this.subscriptions.disposeAll();
+        this.dirtyTrackerDisposable?.dispose();
+        this.dirtyTrackerDisposable = undefined;
+        this.sourceSizeCache.clear();
+        this.clearRenderedWhiteInks();
+        this.renderProducerDisposable?.dispose();
+        this.renderProducerDisposable = undefined;
+        if (this.canvasService) {
+            void this.canvasService.flushRenderFromProducers();
+        }
+        this.canvasService = undefined;
+        this.context = undefined;
+    }
+    contribute() {
+        return {
+            [core_1.ContributionPointIds.TOOLS]: [
+                {
+                    id: this.id,
+                    name: "White Ink",
+                    interaction: "session",
+                    commands: {
+                        begin: "resetWorkingWhiteInks",
+                        commit: "completeWhiteInks",
+                        rollback: "resetWorkingWhiteInks",
+                    },
+                    session: {
+                        autoBegin: true,
+                        leavePolicy: "block",
+                    },
+                },
+            ],
+            [core_1.ContributionPointIds.CONFIGURATIONS]: (0, config_1.createWhiteInkConfigurations)(),
+            [core_1.ContributionPointIds.COMMANDS]: (0, commands_1.createWhiteInkCommands)(this),
+        };
+    }
+    migrateLegacyConfigIfNeeded(configService) {
+        if (this.items.length > 0)
+            return;
+        const legacyMask = configService.get("whiteInk.customMask", "");
+        if (typeof legacyMask !== "string" || legacyMask.length === 0)
+            return;
+        const item = this.normalizeItem({
+            id: this.generateId(),
+            sourceUrl: legacyMask,
+            opacity: WHITE_INK_DEFAULT_OPACITY,
+        });
+        this.applyCommittedItems([item]);
+        (0, sessionState_1.runDeferredConfigUpdate)(this, () => {
+            configService.update("whiteInk.items", this.items);
+        });
+    }
+    syncToolActiveFromWorkbench(fallbackId) {
+        const wb = this.context?.services.get("WorkbenchService");
+        const activeId = wb?.activeToolId;
+        if (typeof activeId === "string" || activeId === null) {
+            this.isToolActive = activeId === this.id;
+            return;
+        }
+        this.isToolActive = fallbackId === this.id;
+    }
+    isPreviewActive() {
+        return this.isToolActive && this.printWithWhiteInk;
+    }
+    isDebugEnabled() {
+        return !!this.getConfig(WHITE_INK_DEBUG_KEY, false);
+    }
+    debug(message, payload) {
+        if (!this.isDebugEnabled())
+            return;
+        if (payload === undefined) {
+            console.log(`[WhiteInkTool] ${message}`);
+            return;
+        }
+        console.log(`[WhiteInkTool] ${message}`, payload);
+    }
+    resolveSourceUrl(item) {
+        if (!item)
+            return "";
+        if (typeof item.sourceUrl === "string" && item.sourceUrl.length > 0) {
+            return item.sourceUrl;
+        }
+        if (typeof item.url === "string" && item.url.length > 0) {
+            return item.url;
+        }
+        return "";
+    }
+    normalizeItem(item) {
+        const sourceUrl = this.resolveSourceUrl(item);
+        return {
+            id: String(item.id || this.generateId()),
+            sourceUrl,
+            url: sourceUrl,
+            opacity: WHITE_INK_DEFAULT_OPACITY,
+        };
+    }
+    normalizeItems(items) {
+        return (items || [])
+            .map((item) => this.normalizeItem(item))
+            .filter((item) => !!item.id);
+    }
+    cloneItems(items) {
+        return this.normalizeItems((items || []).map((item) => ({ ...item })));
+    }
+    getEffectiveWhiteInkItem(items) {
+        const normalized = this.cloneItems(items || []);
+        if (normalized.length > 0) {
+            return normalized[0];
+        }
+        if (!this.getPrimaryImageSource()) {
+            return null;
+        }
+        return {
+            id: WHITE_INK_AUTO_ITEM_ID,
+            opacity: WHITE_INK_DEFAULT_OPACITY,
+        };
+    }
+    generateId() {
+        return `white-ink-${Math.random().toString(36).slice(2, 9)}`;
+    }
+    getConfig(key, fallback) {
+        if (!this.context)
+            return fallback;
+        const configService = this.context.services.get("ConfigurationService");
+        if (!configService)
+            return fallback;
+        return configService.get(key, fallback) ?? fallback;
+    }
+    resolveReplaceTargetId(explicitId) {
+        const has = (id) => !!id && this.items.some((item) => item.id === id);
+        if (has(explicitId))
+            return explicitId;
+        if (this.items.length >= 1) {
+            return this.items[0].id;
+        }
+        return null;
+    }
+    applyCommittedItems(nextItems) {
+        const session = {
+            committed: this.items,
+            working: this.workingItems,
+            hasWorkingChanges: this.hasWorkingChanges,
+        };
+        (0, sessionState_1.applyCommittedSnapshot)(session, this.normalizeItems(nextItems), {
+            clone: (items) => this.cloneItems(items),
+            toolActive: this.isToolActive,
+            preserveDirtyWorking: true,
+        });
+        this.items = session.committed;
+        this.workingItems = session.working;
+        this.hasWorkingChanges = session.hasWorkingChanges;
+    }
+    updateConfig(newItems, skipCanvasUpdate = false) {
+        if (!this.context)
+            return;
+        this.applyCommittedItems(newItems);
+        (0, sessionState_1.runDeferredConfigUpdate)(this, () => {
+            const configService = this.context?.services.get("ConfigurationService");
+            configService?.update("whiteInk.items", this.items);
+            if (!skipCanvasUpdate) {
+                this.updateWhiteInks();
+            }
+        }, 50);
+    }
+    async addWhiteInkEntry(url, options) {
+        const id = this.generateId();
+        const item = this.normalizeItem({
+            id,
+            sourceUrl: url,
+            opacity: WHITE_INK_DEFAULT_OPACITY,
+            ...options,
+        });
+        const sessionDirtyBeforeAdd = this.isToolActive && this.hasWorkingChanges;
+        this.updateConfig([...this.items, item]);
+        this.addItemToWorkingSessionIfNeeded(item, sessionDirtyBeforeAdd);
+        return id;
+    }
+    async upsertWhiteInkEntry(url, options = {}) {
+        const mode = options.mode || "auto";
+        if (mode === "add") {
+            const id = await this.addWhiteInkEntry(url, options.addOptions);
+            return { id, mode: "add" };
+        }
+        const targetId = this.resolveReplaceTargetId(options.id ?? null);
+        if (targetId) {
+            this.updateWhiteInkInConfig(targetId, {
+                ...(options.addOptions || {}),
+                sourceUrl: url,
+                url,
+            });
+            return { id: targetId, mode: "replace" };
+        }
+        if (mode === "replace" || options.createIfMissing === false) {
+            throw new Error("replace-target-not-found");
+        }
+        const id = await this.addWhiteInkEntry(url, options.addOptions);
+        return { id, mode: "add" };
+    }
+    addItemToWorkingSessionIfNeeded(item, sessionDirtyBeforeAdd) {
+        if (!sessionDirtyBeforeAdd || !this.isToolActive)
+            return;
+        if (this.workingItems.some((existing) => existing.id === item.id))
+            return;
+        this.workingItems = this.cloneItems([...this.workingItems, item]);
+        this.updateWhiteInks();
+    }
+    async updateWhiteInkItem(id, updates, options = {}) {
+        this.syncToolActiveFromWorkbench();
+        const target = options.target || "auto";
+        if (target === "working" || (target === "auto" && this.isToolActive)) {
+            this.updateWhiteInkInWorking(id, updates);
+            return;
+        }
+        this.updateWhiteInkInConfig(id, updates);
+    }
+    updateWhiteInkInWorking(id, updates) {
+        let changed = false;
+        const next = this.workingItems.map((item) => {
+            if (item.id !== id)
+                return item;
+            changed = true;
+            return this.normalizeItem({
+                ...item,
+                ...updates,
+            });
+        });
+        if (!changed)
+            return;
+        this.workingItems = this.cloneItems(next);
+        this.hasWorkingChanges = true;
+        this.updateWhiteInks();
+    }
+    updateWhiteInkInConfig(id, updates) {
+        let changed = false;
+        const next = this.items.map((item) => {
+            if (item.id !== id)
+                return item;
+            changed = true;
+            const merged = this.normalizeItem({
+                ...item,
+                ...updates,
+            });
+            if (this.resolveSourceUrl(item) !== this.resolveSourceUrl(merged)) {
+                this.purgeSourceCaches(item);
+            }
+            return merged;
+        });
+        if (!changed)
+            return;
+        this.updateConfig(next);
+    }
+    removeWhiteInk(id) {
+        const removed = this.items.find((item) => item.id === id);
+        const next = this.items.filter((item) => item.id !== id);
+        if (next.length === this.items.length)
+            return;
+        this.purgeSourceCaches(removed);
+        this.updateConfig(next);
+    }
+    clearWhiteInks() {
+        this.sourceSizeCache.clear();
+        this.previewMaskBySource.clear();
+        this.pendingPreviewMaskBySource.clear();
+        this.updateConfig([]);
+    }
+    async completeWhiteInks() {
+        this.updateConfig(this.cloneItems(this.workingItems));
+        this.hasWorkingChanges = false;
+        return { ok: true };
+    }
+    getFrameRect() {
+        const configService = this.context?.services.get("ConfigurationService");
+        return (0, frame_1.resolveCutFrameRect)(this.canvasService, configService);
+    }
+    toLayoutSceneRect(rect) {
+        return (0, frame_1.toLayoutSceneRect)(rect);
+    }
+    getImageObjects() {
+        if (!this.canvasService)
+            return [];
+        return this.canvasService.canvas.getObjects().filter((obj) => {
+            return obj?.data?.layerId === layers_1.IMAGE_OBJECT_LAYER_ID;
+        });
+    }
+    getPrimaryImageObject() {
+        return this.getImageObjects()[0];
+    }
+    getPrimaryImageSource() {
+        return this.getCurrentSrc(this.getPrimaryImageObject()) || "";
+    }
+    getCurrentSrc(obj) {
+        if (!obj)
+            return undefined;
+        if (typeof obj.getSrc === "function")
+            return obj.getSrc();
+        return obj?._originalElement?.src;
+    }
+    getImageSnapshot(obj) {
+        if (!obj)
+            return null;
+        const src = this.getCurrentSrc(obj);
+        if (!src)
+            return null;
+        const element = this.getImageElementFromObject(obj);
+        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: 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",
+            flipX: !!obj?.flipX,
+            flipY: !!obj?.flipY,
+            skewX: Number.isFinite(obj?.skewX) ? Number(obj.skewX) : 0,
+            skewY: Number.isFinite(obj?.skewY) ? Number(obj.skewY) : 0,
+            width,
+            height,
+        };
+    }
+    getImagePlacementState(id) {
+        const rawItems = this.getConfig("image.items", []);
+        if (!Array.isArray(rawItems) || rawItems.length === 0)
+            return null;
+        const matched = (id
+            ? rawItems.find((item) => item &&
+                typeof item === "object" &&
+                typeof item.id === "string" &&
+                item.id === id)
+            : undefined) || rawItems[0];
+        if (!matched || typeof matched !== "object")
+            return null;
+        const sourceUrl = typeof matched.sourceUrl === "string" && matched.sourceUrl.length > 0
+            ? matched.sourceUrl
+            : typeof matched.url === "string"
+                ? matched.url
+                : "";
+        const committedUrl = typeof matched.committedUrl === "string" ? matched.committedUrl : "";
+        return {
+            id: typeof matched.id === "string" && matched.id.length > 0
+                ? matched.id
+                : id || "image",
+            sourceUrl,
+            committedUrl,
+            left: Number.isFinite(matched.left) ? Number(matched.left) : 0.5,
+            top: Number.isFinite(matched.top) ? Number(matched.top) : 0.5,
+            scale: Number.isFinite(matched.scale) ? Math.max(0.05, matched.scale) : 1,
+            angle: Number.isFinite(matched.angle) ? matched.angle : 0,
+        };
+    }
+    shouldRestoreSnapshotToSource(snapshot, placement) {
+        if (!placement.sourceUrl || !placement.committedUrl)
+            return false;
+        if (placement.sourceUrl === placement.committedUrl)
+            return false;
+        return snapshot.src === placement.committedUrl;
+    }
+    getCoverScale(frame, source) {
+        return (0, sourceSizeCache_1.getCoverScale)(frame, source);
+    }
+    async ensureSourceSize(sourceUrl) {
+        return this.sourceSizeCache.ensureImageSize(sourceUrl);
+    }
+    async loadImageSize(sourceUrl) {
+        try {
+            const image = await this.loadImageElement(sourceUrl);
+            const size = this.getElementSize(image);
+            if (!size)
+                return null;
+            return {
+                width: size.width,
+                height: size.height,
+            };
+        }
+        catch {
+            return null;
+        }
+    }
+    async resolveAlignedImageSnapshot(snapshot) {
+        const placement = this.getImagePlacementState(snapshot.id);
+        if (!placement)
+            return snapshot;
+        if (!this.shouldRestoreSnapshotToSource(snapshot, placement)) {
+            return snapshot;
+        }
+        const frame = this.getFrameRect();
+        if (frame.width <= 0 || frame.height <= 0) {
+            return snapshot;
+        }
+        const sourceSize = await this.ensureSourceSize(placement.sourceUrl);
+        if (!sourceSize)
+            return snapshot;
+        const coverScale = this.getCoverScale(frame, sourceSize);
+        return {
+            ...snapshot,
+            src: placement.sourceUrl,
+            element: undefined,
+            left: frame.left + placement.left * frame.width,
+            top: frame.top + placement.top * frame.height,
+            scaleX: coverScale * placement.scale,
+            scaleY: coverScale * placement.scale,
+            angle: placement.angle,
+            originX: "center",
+            originY: "center",
+            width: sourceSize.width,
+            height: sourceSize.height,
+        };
+    }
+    getImageElementFromObject(obj) {
+        if (!obj)
+            return null;
+        if (typeof obj.getElement === "function") {
+            return obj.getElement();
+        }
+        return obj?._element || obj?._originalElement || null;
+    }
+    rememberSourceSize(src, size) {
+        this.sourceSizeCache.rememberSourceSize(src, size);
+    }
+    getSourceSize(src) {
+        return this.sourceSizeCache.getSourceSize(src);
+    }
+    computeWhiteScaleAdjust(baseSource, whiteSource) {
+        if (!baseSource || !whiteSource || baseSource === whiteSource) {
+            return { x: 1, y: 1 };
+        }
+        const baseSize = this.getSourceSize(baseSource);
+        const whiteSize = this.getSourceSize(whiteSource);
+        if (!baseSize || !whiteSize) {
+            return { x: 1, y: 1 };
+        }
+        if (whiteSize.width <= 0 || whiteSize.height <= 0) {
+            return { x: 1, y: 1 };
+        }
+        return {
+            x: baseSize.width / whiteSize.width,
+            y: baseSize.height / whiteSize.height,
+        };
+    }
+    computeCoverOpacity() {
+        const raw = WHITE_INK_DEFAULT_OPACITY * WHITE_INK_COVER_OPACITY_FACTOR;
+        return Math.max(WHITE_INK_COVER_OPACITY_MIN, Math.min(WHITE_INK_COVER_OPACITY_MAX, raw));
+    }
+    buildCloneImageSpec(id, snapshot, src, opacity, layerId, type, scaleAdjustX = 1, scaleAdjustY = 1) {
+        return {
+            id,
+            type: "image",
+            src,
+            data: {
+                id,
+                layerId,
+                type,
+                imageId: snapshot.id,
+            },
+            props: {
+                left: snapshot.left,
+                top: snapshot.top,
+                originX: snapshot.originX,
+                originY: snapshot.originY,
+                angle: snapshot.angle,
+                scaleX: snapshot.scaleX * scaleAdjustX,
+                scaleY: snapshot.scaleY * scaleAdjustY,
+                flipX: snapshot.flipX,
+                flipY: snapshot.flipY,
+                skewX: snapshot.skewX,
+                skewY: snapshot.skewY,
+                selectable: false,
+                evented: false,
+                hasControls: false,
+                hasBorders: false,
+                uniformScaling: true,
+                lockScalingFlip: true,
+                opacity: Math.max(0, Math.min(1, Number(opacity))),
+                excludeFromExport: true,
+            },
+        };
+    }
+    buildFrameSpecs(frame) {
+        if (!this.isToolActive || !this.canvasService)
+            return [];
+        if (frame.width <= 0 || frame.height <= 0)
+            return [];
+        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);
+        const outerBackground = this.getConfig("image.frame.outerBackground", "#f5f5f5") ||
+            "#f5f5f5";
+        const innerBackground = this.getConfig("image.frame.innerBackground", "rgba(0,0,0,0)") ||
+            "rgba(0,0,0,0)";
+        const strokeWidth = Number.isFinite(strokeWidthRaw)
+            ? Math.max(0, strokeWidthRaw)
+            : 2;
+        const dashLength = Number.isFinite(dashLengthRaw)
+            ? Math.max(1, dashLengthRaw)
+            : 8;
+        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 = 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",
+                type: "rect",
+                data: {
+                    id: "white-ink.cropMask.top",
+                    layerId: layers_1.WHITE_INK_OVERLAY_LAYER_ID,
+                    type: "white-ink-mask",
+                },
+                layout: {
+                    reference: "custom",
+                    referenceRect: viewportRect,
+                    alignX: "start",
+                    alignY: "start",
+                    width: "100%",
+                    height: topH,
+                },
+                props: {
+                    originX: "left",
+                    originY: "top",
+                    fill: outerBackground,
+                    selectable: false,
+                    evented: false,
+                    excludeFromExport: true,
+                },
+            },
+            {
+                id: "white-ink.cropMask.bottom",
+                type: "rect",
+                data: {
+                    id: "white-ink.cropMask.bottom",
+                    layerId: layers_1.WHITE_INK_OVERLAY_LAYER_ID,
+                    type: "white-ink-mask",
+                },
+                layout: {
+                    reference: "custom",
+                    referenceRect: viewportRect,
+                    alignX: "start",
+                    alignY: "end",
+                    width: "100%",
+                    height: bottomH,
+                },
+                props: {
+                    originX: "left",
+                    originY: "top",
+                    fill: outerBackground,
+                    selectable: false,
+                    evented: false,
+                    excludeFromExport: true,
+                },
+            },
+            {
+                id: "white-ink.cropMask.left",
+                type: "rect",
+                data: {
+                    id: "white-ink.cropMask.left",
+                    layerId: layers_1.WHITE_INK_OVERLAY_LAYER_ID,
+                    type: "white-ink-mask",
+                },
+                layout: {
+                    reference: "custom",
+                    referenceRect: visibleFrameBandRect,
+                    alignX: "start",
+                    alignY: "start",
+                    width: leftW,
+                    height: "100%",
+                },
+                props: {
+                    originX: "left",
+                    originY: "top",
+                    fill: outerBackground,
+                    selectable: false,
+                    evented: false,
+                    excludeFromExport: true,
+                },
+            },
+            {
+                id: "white-ink.cropMask.right",
+                type: "rect",
+                data: {
+                    id: "white-ink.cropMask.right",
+                    layerId: layers_1.WHITE_INK_OVERLAY_LAYER_ID,
+                    type: "white-ink-mask",
+                },
+                layout: {
+                    reference: "custom",
+                    referenceRect: visibleFrameBandRect,
+                    alignX: "end",
+                    alignY: "start",
+                    width: rightW,
+                    height: "100%",
+                },
+                props: {
+                    originX: "left",
+                    originY: "top",
+                    fill: outerBackground,
+                    selectable: false,
+                    evented: false,
+                    excludeFromExport: true,
+                },
+            },
+        ];
+        return [
+            ...maskSpecs,
+            {
+                id: "white-ink.cropFrame",
+                type: "rect",
+                data: {
+                    id: "white-ink.cropFrame",
+                    layerId: layers_1.WHITE_INK_OVERLAY_LAYER_ID,
+                    type: "white-ink-frame",
+                },
+                layout: {
+                    reference: "custom",
+                    referenceRect: frameRect,
+                    alignX: "start",
+                    alignY: "start",
+                    width: "100%",
+                    height: "100%",
+                },
+                props: {
+                    originX: "left",
+                    originY: "top",
+                    fill: innerBackground,
+                    stroke: strokeColor,
+                    strokeWidth: strokeWidthScene,
+                    strokeDashArray: [dashLengthScene, dashLengthScene],
+                    selectable: false,
+                    evented: false,
+                    excludeFromExport: true,
+                },
+            },
+        ];
+    }
+    resolveRenderItems() {
+        if (this.isToolActive) {
+            return this.cloneItems(this.workingItems);
+        }
+        return this.cloneItems(this.items);
+    }
+    async resolveRenderSources(snapshot, item) {
+        const imageSource = snapshot.src;
+        if (!imageSource)
+            return null;
+        const whiteSource = this.resolveSourceUrl(item) || imageSource;
+        const imageElement = snapshot.element;
+        const whiteElement = whiteSource === imageSource ? imageElement : undefined;
+        const [whiteMaskSrc, coverMaskSrc] = await Promise.all([
+            this.getPreviewMaskSource(whiteSource, WHITE_MASK_TINT, whiteElement),
+            this.getPreviewMaskSource(imageSource, COVER_MASK_TINT, imageElement),
+        ]);
+        const scaleAdjust = this.computeWhiteScaleAdjust(imageSource, whiteSource);
+        return {
+            whiteSrc: whiteMaskSrc || "",
+            coverSrc: coverMaskSrc || "",
+            whiteScaleAdjustX: scaleAdjust.x,
+            whiteScaleAdjustY: scaleAdjust.y,
+        };
+    }
+    clearRenderedWhiteInks() {
+        if (!this.canvasService)
+            return;
+        this.whiteSpecs = [];
+        this.coverSpecs = [];
+        this.overlaySpecs = [];
+        this.canvasService.requestRenderFromProducers();
+    }
+    purgeSourceCaches(item) {
+        const sourceUrl = this.resolveSourceUrl(item);
+        if (!sourceUrl)
+            return;
+        this.sourceSizeCache.deleteSourceSize(sourceUrl);
+        const prefix = `${sourceUrl}::`;
+        Array.from(this.previewMaskBySource.keys()).forEach((cacheKey) => {
+            if (cacheKey.startsWith(prefix)) {
+                this.previewMaskBySource.delete(cacheKey);
+            }
+        });
+        Array.from(this.pendingPreviewMaskBySource.keys()).forEach((cacheKey) => {
+            if (cacheKey.startsWith(prefix)) {
+                this.pendingPreviewMaskBySource.delete(cacheKey);
+            }
+        });
+    }
+    updateWhiteInks() {
+        void this.updateWhiteInksAsync();
+    }
+    async updateWhiteInksAsync() {
+        if (!this.canvasService)
+            return;
+        this.syncToolActiveFromWorkbench();
+        const seq = ++this.renderSeq;
+        const previewActive = this.isPreviewActive();
+        const frame = this.getFrameRect();
+        const frameSpecs = this.buildFrameSpecs(frame);
+        let whiteSpecs = [];
+        let coverSpecs = [];
+        if (previewActive) {
+            const baseSnapshot = this.getImageSnapshot(this.getPrimaryImageObject());
+            const item = this.getEffectiveWhiteInkItem(this.resolveRenderItems());
+            if (baseSnapshot && item) {
+                const snapshot = await this.resolveAlignedImageSnapshot(baseSnapshot);
+                if (seq !== this.renderSeq)
+                    return;
+                const sources = await this.resolveRenderSources(snapshot, item);
+                if (seq !== this.renderSeq)
+                    return;
+                if (sources?.whiteSrc) {
+                    whiteSpecs = [
+                        this.buildCloneImageSpec("white-ink.main", snapshot, sources.whiteSrc, WHITE_INK_DEFAULT_OPACITY, layers_1.WHITE_INK_OBJECT_LAYER_ID, "white-ink", sources.whiteScaleAdjustX, sources.whiteScaleAdjustY),
+                    ];
+                }
+                if (this.previewImageVisible && sources?.coverSrc) {
+                    coverSpecs = [
+                        this.buildCloneImageSpec("white-ink.cover", snapshot, sources.coverSrc, this.computeCoverOpacity(), layers_1.WHITE_INK_COVER_LAYER_ID, "white-ink-cover"),
+                    ];
+                }
+            }
+        }
+        this.whiteSpecs = whiteSpecs;
+        if (seq !== this.renderSeq)
+            return;
+        this.coverSpecs = coverSpecs;
+        if (seq !== this.renderSeq)
+            return;
+        this.overlaySpecs = frameSpecs;
+        await this.canvasService.flushRenderFromProducers();
+        if (seq !== this.renderSeq)
+            return;
+        this.canvasService.requestRenderAll();
+    }
+    getMaskCacheKey(sourceUrl, tint) {
+        return `${sourceUrl}::${tint.key}`;
+    }
+    async getPreviewMaskSource(sourceUrl, tint = WHITE_MASK_TINT, fallbackElement) {
+        if (!sourceUrl)
+            return "";
+        if (typeof document === "undefined" || typeof Image === "undefined") {
+            return "";
+        }
+        const cacheKey = this.getMaskCacheKey(sourceUrl, tint);
+        const cached = this.previewMaskBySource.get(cacheKey);
+        if (cached)
+            return cached;
+        const pending = this.pendingPreviewMaskBySource.get(cacheKey);
+        if (pending) {
+            const loaded = await pending;
+            return loaded || "";
+        }
+        const task = this.createOpaqueMaskSource(sourceUrl, tint, fallbackElement);
+        this.pendingPreviewMaskBySource.set(cacheKey, task);
+        const loaded = await task;
+        this.pendingPreviewMaskBySource.delete(cacheKey);
+        if (!loaded)
+            return "";
+        this.previewMaskBySource.set(cacheKey, loaded);
+        return loaded;
+    }
+    getElementSize(element) {
+        if (!element)
+            return null;
+        const width = Number(element?.naturalWidth || element?.videoWidth || element?.width || 0);
+        const height = Number(element?.naturalHeight || element?.videoHeight || element?.height || 0);
+        if (!Number.isFinite(width) || !Number.isFinite(height))
+            return null;
+        if (width <= 0 || height <= 0)
+            return null;
+        return { width, height };
+    }
+    async createOpaqueMaskSource(sourceUrl, tint = WHITE_MASK_TINT, fallbackElement) {
+        try {
+            const element = fallbackElement || (await this.loadImageElement(sourceUrl));
+            const size = this.getElementSize(element);
+            if (!size)
+                return null;
+            const width = Math.max(1, size.width);
+            const height = Math.max(1, size.height);
+            this.rememberSourceSize(sourceUrl, { width, height });
+            const canvas = document.createElement("canvas");
+            canvas.width = width;
+            canvas.height = height;
+            const ctx = canvas.getContext("2d");
+            if (!ctx)
+                return null;
+            ctx.drawImage(element, 0, 0, width, height);
+            const imageData = ctx.getImageData(0, 0, width, height);
+            const data = imageData.data;
+            for (let i = 0; i < data.length; i += 4) {
+                const alpha = data[i + 3];
+                data[i] = tint.r;
+                data[i + 1] = tint.g;
+                data[i + 2] = tint.b;
+                data[i + 3] = alpha;
+            }
+            ctx.putImageData(imageData, 0, 0);
+            return canvas.toDataURL("image/png");
+        }
+        catch (error) {
+            this.debug("mask:extract:failed", { sourceUrl, tint: tint.key, error });
+            return null;
+        }
+    }
+    loadImageElement(sourceUrl) {
+        return new Promise((resolve, reject) => {
+            const image = new Image();
+            image.crossOrigin = "anonymous";
+            image.onload = () => resolve(image);
+            image.onerror = () => reject(new Error("white-ink-image-load-failed"));
+            image.src = sourceUrl;
+        });
+    }
+}
+exports.WhiteInkTool = WhiteInkTool;