@pooder/kit 5.4.0 → 6.0.0

package/.test-dist/src/services/CanvasService.js

@@ -0,0 +1,1011 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fabric_1 = require("fabric");
+const core_1 = require("@pooder/core");
+const ViewportSystem_1 = require("./ViewportSystem");
+const visibility_1 = require("./visibility");
+class CanvasService {
+    constructor(el, options) {
+        this.renderProducers = new Map();
+        this.producerOrder = 0;
+        this.producerFlushRequested = false;
+        this.producerLoopPending = false;
+        this.producerLoopPromise = null;
+        this.producerApplyInProgress = false;
+        this.visibilityRefreshScheduled = false;
+        this.managedProducerPassIds = new Set();
+        this.managedPassMetas = new Map();
+        this.canvasForwardersBound = false;
+        this.forwardSelectionCreated = (e) => {
+            this.eventBus?.emit("selection:created", e);
+        };
+        this.forwardSelectionUpdated = (e) => {
+            this.eventBus?.emit("selection:updated", e);
+        };
+        this.forwardSelectionCleared = (e) => {
+            this.eventBus?.emit("selection:cleared", e);
+        };
+        this.forwardObjectModified = (e) => {
+            this.eventBus?.emit("object:modified", e);
+        };
+        this.forwardObjectAdded = (e) => {
+            this.eventBus?.emit("object:added", e);
+        };
+        this.forwardObjectRemoved = (e) => {
+            this.eventBus?.emit("object:removed", e);
+        };
+        this.onToolActivated = () => {
+            this.applyManagedPassVisibility();
+        };
+        this.onToolSessionChanged = () => {
+            this.applyManagedPassVisibility();
+        };
+        this.onCanvasObjectChanged = () => {
+            if (this.producerApplyInProgress)
+                return;
+            this.scheduleManagedPassVisibilityRefresh();
+        };
+        if (el instanceof fabric_1.Canvas) {
+            this.canvas = el;
+        }
+        else {
+            this.canvas = new fabric_1.Canvas(el, {
+                preserveObjectStacking: true,
+                ...options,
+            });
+        }
+        this.viewport = new ViewportSystem_1.ViewportSystem();
+        if (this.canvas.width !== undefined && this.canvas.height !== undefined) {
+            this.viewport.updateContainer(this.canvas.width, this.canvas.height);
+        }
+        if (options?.eventBus) {
+            this.setEventBus(options.eventBus);
+        }
+    }
+    init(context) {
+        if (this.context) {
+            this.detachContextEvents(this.context.eventBus);
+        }
+        this.context = context;
+        this.workbenchService = context.get(core_1.WORKBENCH_SERVICE);
+        this.toolSessionService = context.get(core_1.TOOL_SESSION_SERVICE);
+        this.setEventBus(context.eventBus);
+        this.attachContextEvents(context.eventBus);
+    }
+    attachContextEvents(eventBus) {
+        eventBus.on("tool:activated", this.onToolActivated);
+        eventBus.on("tool:session:change", this.onToolSessionChanged);
+        eventBus.on("object:added", this.onCanvasObjectChanged);
+        eventBus.on("object:removed", this.onCanvasObjectChanged);
+    }
+    detachContextEvents(eventBus) {
+        eventBus.off("tool:activated", this.onToolActivated);
+        eventBus.off("tool:session:change", this.onToolSessionChanged);
+        eventBus.off("object:added", this.onCanvasObjectChanged);
+        eventBus.off("object:removed", this.onCanvasObjectChanged);
+    }
+    setEventBus(eventBus) {
+        this.eventBus = eventBus;
+        this.setupEvents();
+    }
+    setupEvents() {
+        if (this.canvasForwardersBound)
+            return;
+        this.canvas.on("selection:created", this.forwardSelectionCreated);
+        this.canvas.on("selection:updated", this.forwardSelectionUpdated);
+        this.canvas.on("selection:cleared", this.forwardSelectionCleared);
+        this.canvas.on("object:modified", this.forwardObjectModified);
+        this.canvas.on("object:added", this.forwardObjectAdded);
+        this.canvas.on("object:removed", this.forwardObjectRemoved);
+        this.canvasForwardersBound = true;
+    }
+    dispose() {
+        if (this.context) {
+            this.detachContextEvents(this.context.eventBus);
+        }
+        this.renderProducers.clear();
+        this.managedProducerPassIds.clear();
+        this.managedPassMetas.clear();
+        this.context = undefined;
+        this.workbenchService = undefined;
+        this.toolSessionService = undefined;
+        this.producerFlushRequested = false;
+        this.canvas.dispose();
+    }
+    registerRenderProducer(toolId, producer, options = {}) {
+        const normalizedToolId = String(toolId || "").trim();
+        if (!normalizedToolId) {
+            throw new Error("[CanvasService] registerRenderProducer requires a toolId.");
+        }
+        if (typeof producer !== "function") {
+            throw new Error(`[CanvasService] registerRenderProducer("${normalizedToolId}") requires a producer function.`);
+        }
+        const entry = {
+            toolId: normalizedToolId,
+            producer,
+            priority: Number.isFinite(options.priority)
+                ? Number(options.priority)
+                : 0,
+            order: this.producerOrder++,
+        };
+        this.renderProducers.set(normalizedToolId, entry);
+        this.requestRenderFromProducers();
+        return {
+            dispose: () => {
+                this.unregisterRenderProducer(normalizedToolId);
+            },
+        };
+    }
+    unregisterRenderProducer(toolId) {
+        const normalizedToolId = String(toolId || "").trim();
+        if (!normalizedToolId)
+            return false;
+        const removed = this.renderProducers.delete(normalizedToolId);
+        if (removed) {
+            this.requestRenderFromProducers();
+        }
+        return removed;
+    }
+    requestRenderFromProducers() {
+        this.producerFlushRequested = true;
+        this.scheduleProducerLoop();
+    }
+    async flushRenderFromProducers() {
+        this.requestRenderFromProducers();
+        if (this.producerLoopPromise) {
+            await this.producerLoopPromise;
+        }
+    }
+    scheduleProducerLoop() {
+        if (this.producerLoopPending)
+            return;
+        this.producerLoopPending = true;
+        this.producerLoopPromise = Promise.resolve()
+            .then(() => this.runProducerLoop())
+            .catch((error) => {
+            console.error("[CanvasService] render producer loop failed.", error);
+        })
+            .finally(() => {
+            this.producerLoopPending = false;
+            if (this.producerFlushRequested) {
+                this.scheduleProducerLoop();
+            }
+        });
+    }
+    async runProducerLoop() {
+        while (this.producerFlushRequested) {
+            this.producerFlushRequested = false;
+            await this.collectAndApplyProducerSpecs();
+        }
+    }
+    sortedRenderProducerEntries() {
+        return Array.from(this.renderProducers.values()).sort((a, b) => {
+            if (a.priority !== b.priority) {
+                return a.priority - b.priority;
+            }
+            if (a.order !== b.order) {
+                return a.order - b.order;
+            }
+            return a.toolId.localeCompare(b.toolId);
+        });
+    }
+    normalizePassSpecValue(spec) {
+        const id = String(spec.id || "").trim();
+        if (!id)
+            return null;
+        return {
+            id,
+            stack: Number.isFinite(spec.stack) ? Number(spec.stack) : 0,
+            order: Number.isFinite(spec.order) ? Number(spec.order) : 0,
+            replace: spec.replace !== false,
+            visibility: spec.visibility,
+            effects: Array.isArray(spec.effects)
+                ? [...spec.effects]
+                : [],
+            objects: Array.isArray(spec.objects) ? [...spec.objects] : [],
+        };
+    }
+    normalizeClipPathEffectSpec(effect, passId, index) {
+        if (!effect || effect.type !== "clipPath")
+            return null;
+        const source = effect.source;
+        if (!source || typeof source !== "object")
+            return null;
+        const sourceId = String(source.id || "").trim();
+        if (!sourceId)
+            return null;
+        const targetPassIds = Array.isArray(effect.targetPassIds)
+            ? effect.targetPassIds
+                .map((item) => String(item || "").trim())
+                .filter((item) => item.length > 0)
+            : [];
+        if (!targetPassIds.length)
+            return null;
+        const customId = String(effect.id || "").trim();
+        const key = customId || `${passId}.effect.clipPath.${index}`;
+        return {
+            type: "clipPath",
+            key,
+            source: {
+                ...source,
+                id: sourceId,
+            },
+            targetPassIds,
+        };
+    }
+    mergePassSpec(map, rawSpec, producerId) {
+        const normalized = this.normalizePassSpecValue(rawSpec);
+        if (!normalized)
+            return;
+        const existing = map.get(normalized.id);
+        if (!existing) {
+            map.set(normalized.id, normalized);
+            return;
+        }
+        existing.objects.push(...normalized.objects);
+        existing.replace = existing.replace || normalized.replace;
+        existing.stack = normalized.stack;
+        existing.order = normalized.order;
+        if (normalized.visibility !== undefined) {
+            existing.visibility = normalized.visibility;
+        }
+        existing.effects.push(...normalized.effects);
+        if (normalized.objects.length === 0 && normalized.effects.length === 0) {
+            console.debug(`[CanvasService] pass "${normalized.id}" from producer "${producerId}" updated ordering/visibility only.`);
+        }
+    }
+    comparePassMeta(a, b) {
+        if (a.stack !== b.stack)
+            return a.stack - b.stack;
+        if (a.order !== b.order)
+            return a.order - b.order;
+        return a.id.localeCompare(b.id);
+    }
+    getPassObjectOrder(obj) {
+        const raw = Number(obj?.data?.passOrder);
+        return Number.isFinite(raw) ? raw : Number.MAX_SAFE_INTEGER;
+    }
+    getPassCanvasObjects(passId) {
+        const all = this.canvas.getObjects();
+        return all
+            .filter((obj) => obj?.data?.passId === passId)
+            .sort((a, b) => {
+            const orderA = this.getPassObjectOrder(a);
+            const orderB = this.getPassObjectOrder(b);
+            if (orderA !== orderB)
+                return orderA - orderB;
+            return all.indexOf(a) - all.indexOf(b);
+        });
+    }
+    getPassObjects(passId) {
+        return this.getPassCanvasObjects(passId);
+    }
+    getRootLayerObjects(layerId) {
+        return this.getPassCanvasObjects(layerId);
+    }
+    isManagedPassObject(obj) {
+        const passId = obj?.data?.passId;
+        return typeof passId === "string" && this.managedPassMetas.has(passId);
+    }
+    syncManagedPassStacking(passes) {
+        const orderedPasses = [...passes].sort((a, b) => this.comparePassMeta(a, b));
+        if (!orderedPasses.length)
+            return;
+        const canvasObjects = this.canvas.getObjects();
+        const managedObjects = canvasObjects.filter((obj) => this.isManagedPassObject(obj));
+        if (!managedObjects.length)
+            return;
+        const firstManagedIndex = managedObjects
+            .map((obj) => canvasObjects.indexOf(obj))
+            .filter((index) => index >= 0)
+            .reduce((min, value) => Math.min(min, value), Number.MAX_SAFE_INTEGER);
+        let targetIndex = Number.isFinite(firstManagedIndex)
+            ? firstManagedIndex
+            : 0;
+        orderedPasses.forEach((meta) => {
+            const objects = this.getPassCanvasObjects(meta.id);
+            objects.forEach((obj) => {
+                this.moveObjectInCanvas(obj, targetIndex);
+                targetIndex += 1;
+            });
+        });
+    }
+    getPassRuntimeState() {
+        const state = new Map();
+        const ensure = (passId) => {
+            const id = String(passId || "").trim();
+            if (!id)
+                return { exists: false, objectCount: 0 };
+            let item = state.get(id);
+            if (!item) {
+                item = { exists: false, objectCount: 0 };
+                state.set(id, item);
+            }
+            return item;
+        };
+        this.canvas.getObjects().forEach((obj) => {
+            const passId = obj?.data?.passId;
+            if (typeof passId === "string") {
+                const item = ensure(passId);
+                item.exists = true;
+                item.objectCount += 1;
+            }
+        });
+        this.managedPassMetas.forEach((meta) => {
+            const item = ensure(meta.id);
+            item.exists = true;
+        });
+        return state;
+    }
+    applyManagedPassVisibility(options = {}) {
+        if (!this.managedPassMetas.size)
+            return false;
+        const layers = this.getPassRuntimeState();
+        const activeToolId = this.workbenchService?.activeToolId ?? null;
+        const isSessionActive = (toolId) => {
+            if (!this.toolSessionService)
+                return false;
+            return this.toolSessionService.getState(toolId).status === "active";
+        };
+        let changed = false;
+        this.managedPassMetas.forEach((meta) => {
+            const visible = (0, visibility_1.evaluateVisibilityExpr)(meta.visibility, {
+                activeToolId,
+                isSessionActive,
+                layers,
+            });
+            changed = this.setPassVisibility(meta.id, visible) || changed;
+        });
+        if (changed && options.render !== false) {
+            this.requestRenderAll();
+        }
+        return changed;
+    }
+    scheduleManagedPassVisibilityRefresh() {
+        if (this.visibilityRefreshScheduled)
+            return;
+        this.visibilityRefreshScheduled = true;
+        void Promise.resolve().then(() => {
+            this.visibilityRefreshScheduled = false;
+            this.applyManagedPassVisibility();
+        });
+    }
+    async collectAndApplyProducerSpecs() {
+        const passes = new Map();
+        const entries = this.sortedRenderProducerEntries();
+        this.producerApplyInProgress = true;
+        try {
+            for (const entry of entries) {
+                try {
+                    const result = await entry.producer();
+                    if (!result)
+                        continue;
+                    const specs = Array.isArray(result.passes) ? result.passes : [];
+                    specs.forEach((spec) => this.mergePassSpec(passes, spec, entry.toolId));
+                }
+                catch (error) {
+                    console.error(`[CanvasService] render producer "${entry.toolId}" failed.`, error);
+                }
+            }
+            const nextPassIds = new Set();
+            const nextManagedPassMetas = new Map();
+            const nextEffects = [];
+            for (const pass of passes.values()) {
+                nextPassIds.add(pass.id);
+                nextManagedPassMetas.set(pass.id, {
+                    id: pass.id,
+                    stack: pass.stack,
+                    order: pass.order,
+                    visibility: pass.visibility,
+                });
+                await this.applyObjectSpecsToPass(pass.id, pass.objects, {
+                    render: false,
+                    replace: pass.replace,
+                });
+                pass.effects.forEach((effect, index) => {
+                    const normalized = this.normalizeClipPathEffectSpec(effect, pass.id, index);
+                    if (!normalized)
+                        return;
+                    nextEffects.push(normalized);
+                });
+            }
+            for (const passId of this.managedProducerPassIds) {
+                if (nextPassIds.has(passId))
+                    continue;
+                await this.applyObjectSpecsToPass(passId, [], {
+                    render: false,
+                    replace: true,
+                });
+            }
+            this.managedProducerPassIds = nextPassIds;
+            this.managedPassMetas = nextManagedPassMetas;
+            this.syncManagedPassStacking(Array.from(nextManagedPassMetas.values()));
+            await this.applyManagedPassEffects(nextEffects);
+            this.applyManagedPassVisibility({ render: false });
+        }
+        finally {
+            this.producerApplyInProgress = false;
+        }
+        this.requestRenderAll();
+    }
+    async applyManagedPassEffects(effects) {
+        const effectTargetMap = new Map();
+        for (const effect of effects) {
+            if (effect.type !== "clipPath")
+                continue;
+            effect.targetPassIds.forEach((targetPassId) => {
+                this.getPassCanvasObjects(targetPassId).forEach((obj) => {
+                    effectTargetMap.set(obj, effect);
+                });
+            });
+        }
+        const managedObjects = this.canvas.getObjects().filter((obj) => this.isManagedPassObject(obj));
+        const effectTemplateCache = new Map();
+        for (const obj of managedObjects) {
+            const targetEffect = effectTargetMap.get(obj);
+            if (!targetEffect) {
+                this.clearClipPathEffectFromObject(obj);
+                continue;
+            }
+            let template = effectTemplateCache.get(targetEffect.key);
+            if (template === undefined) {
+                template = await this.createClipPathTemplate(targetEffect);
+                effectTemplateCache.set(targetEffect.key, template);
+            }
+            if (!template) {
+                this.clearClipPathEffectFromObject(obj);
+                continue;
+            }
+            await this.applyClipPathEffectToObject(obj, template, targetEffect.key);
+        }
+    }
+    getObject(id, passId) {
+        const normalizedId = String(id || "").trim();
+        if (!normalizedId)
+            return undefined;
+        return this.canvas.getObjects().find((obj) => {
+            if (obj?.data?.id !== normalizedId)
+                return false;
+            if (!passId)
+                return true;
+            return obj?.data?.passId === passId;
+        });
+    }
+    requestRenderAll() {
+        this.canvas.requestRenderAll();
+    }
+    resize(width, height) {
+        this.canvas.setDimensions({ width, height });
+        this.viewport.updateContainer(width, height);
+        this.eventBus?.emit("canvas:resized", { width, height });
+        this.requestRenderAll();
+    }
+    getSceneScale() {
+        const scale = Number(this.viewport.scale);
+        return Number.isFinite(scale) && scale > 0 ? scale : 1;
+    }
+    getSceneOffset() {
+        const offset = this.viewport.offset;
+        const x = Number(offset.x);
+        const y = Number(offset.y);
+        return {
+            x: Number.isFinite(x) ? x : 0,
+            y: Number.isFinite(y) ? y : 0,
+        };
+    }
+    toScreenPoint(point) {
+        const scale = this.getSceneScale();
+        const offset = this.getSceneOffset();
+        return {
+            x: point.x * scale + offset.x,
+            y: point.y * scale + offset.y,
+        };
+    }
+    toScenePoint(point) {
+        const scale = this.getSceneScale();
+        const offset = this.getSceneOffset();
+        return {
+            x: (point.x - offset.x) / scale,
+            y: (point.y - offset.y) / scale,
+        };
+    }
+    toScreenLength(value) {
+        return value * this.getSceneScale();
+    }
+    toSceneLength(value) {
+        return value / this.getSceneScale();
+    }
+    toScreenRect(rect) {
+        const start = this.toScreenPoint({ x: rect.left, y: rect.top });
+        return {
+            left: start.x,
+            top: start.y,
+            width: this.toScreenLength(rect.width),
+            height: this.toScreenLength(rect.height),
+        };
+    }
+    toSceneRect(rect) {
+        const start = this.toScenePoint({ x: rect.left, y: rect.top });
+        return {
+            left: start.x,
+            top: start.y,
+            width: this.toSceneLength(rect.width),
+            height: this.toSceneLength(rect.height),
+        };
+    }
+    getSceneViewportRect() {
+        const width = Number(this.canvas.width || 0);
+        const height = Number(this.canvas.height || 0);
+        return this.toSceneRect({ left: 0, top: 0, width, height });
+    }
+    getScreenViewportRect() {
+        return {
+            left: 0,
+            top: 0,
+            width: Number(this.canvas.width || 0),
+            height: Number(this.canvas.height || 0),
+        };
+    }
+    toSpaceRect(rect, from, to) {
+        if (from === to)
+            return { ...rect };
+        if (from === "scene") {
+            return this.toScreenRect(rect);
+        }
+        return this.toSceneRect(rect);
+    }
+    resolveLayoutLength(value, base) {
+        if (typeof value === "number") {
+            return Number.isFinite(value) ? value : undefined;
+        }
+        if (typeof value !== "string") {
+            return undefined;
+        }
+        const raw = value.trim();
+        if (!raw)
+            return undefined;
+        if (raw.endsWith("%")) {
+            const percent = parseFloat(raw.slice(0, -1));
+            if (!Number.isFinite(percent))
+                return undefined;
+            return (base * percent) / 100;
+        }
+        const parsed = parseFloat(raw);
+        return Number.isFinite(parsed) ? parsed : undefined;
+    }
+    resolveLayoutInsets(inset, reference) {
+        if (typeof inset === "number" || typeof inset === "string") {
+            const all = this.resolveLayoutLength(inset, Math.min(reference.width, reference.height)) ?? 0;
+            return { top: all, right: all, bottom: all, left: all };
+        }
+        const source = inset || {};
+        const top = this.resolveLayoutLength(source.top, reference.height) ?? 0;
+        const right = this.resolveLayoutLength(source.right, reference.width) ?? 0;
+        const bottom = this.resolveLayoutLength(source.bottom, reference.height) ?? 0;
+        const left = this.resolveLayoutLength(source.left, reference.width) ?? 0;
+        return { top, right, bottom, left };
+    }
+    resolveLayoutReferenceRect(layout, space) {
+        if (layout.referenceRect) {
+            const sourceSpace = layout.referenceRect.space || space;
+            return this.toSpaceRect(layout.referenceRect, sourceSpace, space);
+        }
+        const reference = layout.reference || "sceneViewport";
+        if (reference === "screenViewport") {
+            const screenRect = this.getScreenViewportRect();
+            return space === "screen" ? screenRect : this.toSceneRect(screenRect);
+        }
+        const sceneRect = this.getSceneViewportRect();
+        return space === "scene" ? sceneRect : this.toScreenRect(sceneRect);
+    }
+    alignFactor(value) {
+        if (value === "end")
+            return 1;
+        if (value === "center")
+            return 0.5;
+        return 0;
+    }
+    normalizeOriginX(value) {
+        if (value === "center")
+            return "center";
+        if (value === "right")
+            return "right";
+        return "left";
+    }
+    normalizeOriginY(value) {
+        if (value === "center")
+            return "center";
+        if (value === "bottom")
+            return "bottom";
+        return "top";
+    }
+    originFactor(value) {
+        if (value === "center")
+            return 0.5;
+        if (value === "right" || value === "bottom")
+            return 1;
+        return 0;
+    }
+    resolveLayoutProps(spec, props) {
+        const layout = spec.layout;
+        if (!layout) {
+            return { ...props };
+        }
+        const space = spec.space || "scene";
+        const reference = this.resolveLayoutReferenceRect(layout, space);
+        const inset = this.resolveLayoutInsets(layout.inset, reference);
+        const area = {
+            left: reference.left + inset.left,
+            top: reference.top + inset.top,
+            width: Math.max(0, reference.width - inset.left - inset.right),
+            height: Math.max(0, reference.height - inset.top - inset.bottom),
+        };
+        const next = { ...props };
+        const width = this.resolveLayoutLength(layout.width, area.width) ??
+            (Number.isFinite(next.width) ? Number(next.width) : undefined);
+        const height = this.resolveLayoutLength(layout.height, area.height) ??
+            (Number.isFinite(next.height) ? Number(next.height) : undefined);
+        if (width !== undefined)
+            next.width = width;
+        if (height !== undefined)
+            next.height = height;
+        const alignX = this.alignFactor(layout.alignX);
+        const alignY = this.alignFactor(layout.alignY);
+        const offsetX = this.resolveLayoutLength(layout.offsetX, area.width) ?? 0;
+        const offsetY = this.resolveLayoutLength(layout.offsetY, area.height) ?? 0;
+        const objectWidth = Number.isFinite(next.width) ? Number(next.width) : 0;
+        const objectHeight = Number.isFinite(next.height) ? Number(next.height) : 0;
+        const objectLeft = area.left + (area.width - objectWidth) * alignX + offsetX;
+        const objectTop = area.top + (area.height - objectHeight) * alignY + offsetY;
+        const originX = this.normalizeOriginX(next.originX);
+        const originY = this.normalizeOriginY(next.originY);
+        next.left = objectLeft + objectWidth * this.originFactor(originX);
+        next.top = objectTop + objectHeight * this.originFactor(originY);
+        return next;
+    }
+    setPassVisibility(passId, visible) {
+        const objects = this.getPassCanvasObjects(passId);
+        let changed = false;
+        objects.forEach((obj) => {
+            if (obj.visible === visible)
+                return;
+            obj.set?.({ visible });
+            obj.setCoords?.();
+            changed = true;
+        });
+        return changed;
+    }
+    setLayerVisibility(layerId, visible) {
+        return this.setPassVisibility(layerId, visible);
+    }
+    bringPassToFront(passId) {
+        const objects = this.getPassCanvasObjects(passId);
+        objects.forEach((obj) => this.canvas.bringObjectToFront(obj));
+    }
+    bringLayerToFront(layerId) {
+        this.bringPassToFront(layerId);
+    }
+    async applyPassSpec(spec, options = {}) {
+        await this.applyObjectSpecsToPass(spec.id, spec.objects, {
+            render: options.render,
+            replace: spec.replace !== false,
+        });
+    }
+    async applyObjectSpecsToRootLayer(passId, specs, options = {}) {
+        await this.applyObjectSpecsToPass(passId, specs, {
+            render: options.render,
+            replace: true,
+        });
+    }
+    normalizeObjectSpecs(specs) {
+        const seen = new Set();
+        const normalized = [];
+        (specs || []).forEach((spec) => {
+            const id = String(spec?.id || "").trim();
+            if (!id || seen.has(id))
+                return;
+            seen.add(id);
+            normalized.push({
+                ...spec,
+                id,
+            });
+        });
+        return normalized;
+    }
+    async cloneFabricObject(source) {
+        const clone = source.clone;
+        if (typeof clone !== "function")
+            return undefined;
+        const result = clone.call(source);
+        if (!result || typeof result.then !== "function") {
+            return undefined;
+        }
+        try {
+            const copied = (await result);
+            return copied;
+        }
+        catch {
+            return undefined;
+        }
+    }
+    async createClipPathTemplate(effect) {
+        const source = effect.source;
+        const sourceId = String(source.id || "").trim();
+        if (!sourceId)
+            return null;
+        const template = await this.createFabricObject({
+            ...source,
+            id: sourceId,
+            data: {
+                ...(source.data || {}),
+                id: sourceId,
+                type: "clip-path-effect-template",
+                effectKey: effect.key,
+            },
+            props: {
+                ...(source.props || {}),
+                selectable: false,
+                evented: false,
+                excludeFromExport: true,
+            },
+        });
+        if (!template)
+            return null;
+        template.set?.({
+            selectable: false,
+            evented: false,
+            excludeFromExport: true,
+            absolutePositioned: true,
+        });
+        template.setCoords?.();
+        return template;
+    }
+    isClipPathEffectManaged(target) {
+        return typeof target?.__pooderEffectClipKey === "string";
+    }
+    clearClipPathEffectFromObject(target) {
+        if (!target)
+            return;
+        if (!this.isClipPathEffectManaged(target))
+            return;
+        target.set?.({ clipPath: undefined });
+        target.setCoords?.();
+        delete target.__pooderEffectClipKey;
+    }
+    async applyClipPathEffectToObject(target, clipTemplate, effectKey) {
+        if (!target)
+            return;
+        const clipPath = await this.cloneFabricObject(clipTemplate);
+        if (!clipPath) {
+            this.clearClipPathEffectFromObject(target);
+            return;
+        }
+        clipPath.set?.({
+            selectable: false,
+            evented: false,
+            excludeFromExport: true,
+            absolutePositioned: true,
+        });
+        clipPath.setCoords?.();
+        target.set?.({ clipPath });
+        target.setCoords?.();
+        target.__pooderEffectClipKey = effectKey;
+    }
+    async applyObjectSpecsToPass(passId, specs, options = {}) {
+        const normalizedPassId = String(passId || "").trim();
+        if (!normalizedPassId)
+            return;
+        const replace = options.replace !== false;
+        const normalizedSpecs = this.normalizeObjectSpecs(specs);
+        const desiredIds = new Set(normalizedSpecs.map((s) => s.id));
+        const existing = this.getPassCanvasObjects(normalizedPassId);
+        if (replace) {
+            existing.forEach((obj) => {
+                const id = obj?.data?.id;
+                if (typeof id === "string" && !desiredIds.has(id)) {
+                    this.canvas.remove(obj);
+                }
+            });
+        }
+        const byId = new Map();
+        this.getPassCanvasObjects(normalizedPassId).forEach((obj) => {
+            const id = obj?.data?.id;
+            if (typeof id === "string")
+                byId.set(id, obj);
+        });
+        for (let index = 0; index < normalizedSpecs.length; index += 1) {
+            const spec = normalizedSpecs[index];
+            let current = byId.get(spec.id);
+            if (spec.type === "path") {
+                const nextPathData = this.readPathDataFromSpec(spec);
+                if (!nextPathData || !nextPathData.trim()) {
+                    if (current) {
+                        this.canvas.remove(current);
+                        byId.delete(spec.id);
+                    }
+                    continue;
+                }
+            }
+            if (current && this.shouldRecreateObject(current, spec)) {
+                this.canvas.remove(current);
+                byId.delete(spec.id);
+                current = undefined;
+            }
+            if (!current) {
+                const created = await this.createFabricObject(spec);
+                if (!created)
+                    continue;
+                this.patchFabricObject(created, spec, {
+                    passId: normalizedPassId,
+                    layerId: normalizedPassId,
+                    passOrder: index,
+                });
+                this.canvas.add(created);
+                byId.set(spec.id, created);
+                continue;
+            }
+            this.patchFabricObject(current, spec, {
+                passId: normalizedPassId,
+                layerId: normalizedPassId,
+                passOrder: index,
+            });
+        }
+        if (options.render !== false) {
+            this.requestRenderAll();
+        }
+    }
+    patchFabricObject(obj, spec, extraData) {
+        const nextData = {
+            ...(obj.data || {}),
+            ...(spec.data || {}),
+            ...(extraData || {}),
+            id: spec.id,
+        };
+        nextData.__renderSourceKey = this.getSpecRenderSourceKey(spec);
+        const props = this.resolveFabricProps(spec, spec.props || {});
+        obj.set({ ...props, data: nextData });
+        obj.setCoords();
+    }
+    readPathDataFromSpec(spec) {
+        if (spec.type !== "path")
+            return undefined;
+        const raw = spec.props?.path ||
+            spec.props?.pathData;
+        if (typeof raw !== "string")
+            return undefined;
+        return raw;
+    }
+    hashText(value) {
+        let hash = 2166136261;
+        for (let i = 0; i < value.length; i += 1) {
+            hash ^= value.charCodeAt(i);
+            hash +=
+                (hash << 1) + (hash << 4) + (hash << 7) + (hash << 8) + (hash << 24);
+        }
+        return (hash >>> 0).toString(16);
+    }
+    getSpecRenderSourceKey(spec) {
+        switch (spec.type) {
+            case "path": {
+                const pathData = this.readPathDataFromSpec(spec) || "";
+                return `path:${this.hashText(pathData)}`;
+            }
+            case "image":
+                return `image:${String(spec.src || "")}`;
+            case "text":
+                return `text:${String(spec.props?.text ?? "")}`;
+            case "rect":
+                return "rect";
+            default:
+                return String(spec.type || "");
+        }
+    }
+    shouldRecreateObject(current, spec) {
+        if (!current)
+            return true;
+        const currentType = String(current?.type || "").toLowerCase();
+        if (currentType !== spec.type)
+            return true;
+        const expectedKey = this.getSpecRenderSourceKey(spec);
+        const currentKey = String(current?.data?.__renderSourceKey || "");
+        if (currentKey && expectedKey && currentKey !== expectedKey)
+            return true;
+        if (spec.type === "image" && spec.src && current.getSrc) {
+            return current.getSrc() !== spec.src;
+        }
+        return false;
+    }
+    resolveFabricProps(spec, props) {
+        const space = spec.space || "scene";
+        const next = this.resolveLayoutProps(spec, props);
+        if (space === "screen") {
+            return next;
+        }
+        const hasLeft = Number.isFinite(next.left);
+        const hasTop = Number.isFinite(next.top);
+        if (hasLeft || hasTop) {
+            const mapped = this.toScreenPoint({
+                x: hasLeft ? Number(next.left) : 0,
+                y: hasTop ? Number(next.top) : 0,
+            });
+            if (hasLeft)
+                next.left = mapped.x;
+            if (hasTop)
+                next.top = mapped.y;
+        }
+        const rawScaleX = Number.isFinite(next.scaleX) ? Number(next.scaleX) : 1;
+        const rawScaleY = Number.isFinite(next.scaleY) ? Number(next.scaleY) : 1;
+        const sceneScale = this.getSceneScale();
+        next.scaleX = rawScaleX * sceneScale;
+        next.scaleY = rawScaleY * sceneScale;
+        return next;
+    }
+    moveObjectInCanvas(obj, index) {
+        if (!obj)
+            return;
+        const moveObjectTo = this.canvas.moveObjectTo;
+        if (typeof moveObjectTo === "function") {
+            moveObjectTo.call(this.canvas, obj, index);
+            return;
+        }
+        const list = this.canvas._objects;
+        if (!Array.isArray(list))
+            return;
+        const from = list.indexOf(obj);
+        if (from < 0 || from === index)
+            return;
+        list.splice(from, 1);
+        const target = Math.max(0, Math.min(index, list.length));
+        list.splice(target, 0, obj);
+        if (typeof this.canvas._onStackOrderChanged === "function") {
+            this.canvas._onStackOrderChanged();
+        }
+    }
+    async createFabricObject(spec) {
+        if (spec.type === "rect") {
+            const props = this.resolveFabricProps(spec, spec.props || {});
+            const rect = new fabric_1.Rect({
+                ...props,
+                data: { ...(spec.data || {}), id: spec.id },
+            });
+            rect.setCoords();
+            return rect;
+        }
+        if (spec.type === "path") {
+            const pathData = this.readPathDataFromSpec(spec);
+            if (!pathData)
+                return undefined;
+            const props = this.resolveFabricProps(spec, spec.props || {});
+            const path = new fabric_1.Path(pathData, {
+                ...props,
+                data: { ...(spec.data || {}), id: spec.id },
+            });
+            path.setCoords();
+            return path;
+        }
+        if (spec.type === "image") {
+            if (!spec.src)
+                return undefined;
+            const image = await fabric_1.Image.fromURL(spec.src, { crossOrigin: "anonymous" });
+            const props = this.resolveFabricProps(spec, spec.props || {});
+            image.set({
+                ...props,
+                data: { ...(spec.data || {}), id: spec.id },
+            });
+            image.setCoords();
+            return image;
+        }
+        if (spec.type === "text") {
+            const content = String(spec.props?.text ?? "");
+            const props = this.resolveFabricProps(spec, spec.props || {});
+            const text = new fabric_1.Text(content, {
+                ...props,
+                data: { ...(spec.data || {}), id: spec.id },
+            });
+            text.setCoords();
+            return text;
+        }
+        return undefined;
+    }
+}
+exports.default = CanvasService;