@pooder/kit 5.3.1 → 6.0.0

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

@@ -1,9 +1,50 @@
 "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;
         }
@@ -21,60 +62,414 @@ class CanvasService {
             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.eventBus)
+        if (this.canvasForwardersBound)
             return;
-        const bus = this.eventBus;
-        const forward = (name) => (e) => bus.emit(name, e);
-        this.canvas.on("selection:created", forward("selection:created"));
-        this.canvas.on("selection:updated", forward("selection:updated"));
-        this.canvas.on("selection:cleared", forward("selection:cleared"));
-        this.canvas.on("object:modified", forward("object:modified"));
-        this.canvas.on("object:added", forward("object:added"));
-        this.canvas.on("object:removed", forward("object:removed"));
+        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();
     }
-    /**
-     * Get a layer (Group) by its ID.
-     * We assume layers are Groups directly on the canvas with a data.id property.
-     */
-    getLayer(id) {
-        return this.canvas.getObjects().find((obj) => obj.data?.id === id);
-    }
-    /**
-     * Create a layer (Group) with the given ID if it doesn't exist.
-     */
-    createLayer(id, options = {}) {
-        let layer = this.getLayer(id);
-        if (!layer) {
-            const defaultOptions = {
-                selectable: false,
-                evented: false,
-                ...options,
-                data: { ...options.data, id },
-            };
-            layer = new fabric_1.Group([], defaultOptions);
-            this.canvas.add(layer);
-        }
-        return layer;
-    }
-    /**
-     * Find an object by ID, optionally within a specific layer.
-     */
-    getObject(id, layerId) {
-        if (layerId) {
-            const layer = this.getLayer(layerId);
-            if (!layer)
-                return undefined;
-            return layer.getObjects().find((obj) => obj.data?.id === id);
+    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 });
         }
-        return this.canvas.getObjects().find((obj) => obj.data?.id === id);
+        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();
@@ -85,42 +480,353 @@ class CanvasService {
         this.eventBus?.emit("canvas:resized", { width, height });
         this.requestRenderAll();
     }
-    async applyLayerSpec(spec) {
-        const layer = this.createLayer(spec.id, spec.props || {});
-        await this.applyObjectSpecsToContainer(layer, spec.objects);
+    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,
+        };
     }
-    async applyObjectSpecsToLayer(layerId, objects) {
-        const layer = this.createLayer(layerId, {});
-        await this.applyObjectSpecsToContainer(layer, objects);
+    toScreenPoint(point) {
+        const scale = this.getSceneScale();
+        const offset = this.getSceneOffset();
+        return {
+            x: point.x * scale + offset.x,
+            y: point.y * scale + offset.y,
+        };
     }
-    getRootLayerObjects(layerId) {
-        return this.canvas
-            .getObjects()
-            .filter((obj) => obj?.data?.layerId === layerId);
-    }
-    async applyObjectSpecsToRootLayer(layerId, specs) {
-        const desiredIds = new Set(specs.map((s) => s.id));
-        const existing = this.getRootLayerObjects(layerId);
-        existing.forEach((obj) => {
-            const id = obj?.data?.id;
-            if (typeof id === "string" && !desiredIds.has(id)) {
-                this.canvas.remove(obj);
-            }
+    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.getRootLayerObjects(layerId).forEach((obj) => {
+        this.getPassCanvasObjects(normalizedPassId).forEach((obj) => {
             const id = obj?.data?.id;
             if (typeof id === "string")
                 byId.set(id, obj);
         });
-        for (let index = 0; index < specs.length; index += 1) {
-            const spec = specs[index];
+        for (let index = 0; index < normalizedSpecs.length; index += 1) {
+            const spec = normalizedSpecs[index];
             let current = byId.get(spec.id);
-            if (current &&
-                spec.type === "image" &&
-                spec.src &&
-                current.getSrc &&
-                current.getSrc() !== spec.src) {
+            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;
@@ -129,57 +835,24 @@ class CanvasService {
                 const created = await this.createFabricObject(spec);
                 if (!created)
                     continue;
-                this.patchFabricObject(created, spec, { layerId });
+                this.patchFabricObject(created, spec, {
+                    passId: normalizedPassId,
+                    layerId: normalizedPassId,
+                    passOrder: index,
+                });
                 this.canvas.add(created);
                 byId.set(spec.id, created);
                 continue;
             }
-            this.patchFabricObject(current, spec, { layerId });
+            this.patchFabricObject(current, spec, {
+                passId: normalizedPassId,
+                layerId: normalizedPassId,
+                passOrder: index,
+            });
         }
-        this.requestRenderAll();
-    }
-    async applyObjectSpecsToContainer(container, specs) {
-        const desiredIds = new Set(specs.map((s) => s.id));
-        const existing = container.getObjects();
-        existing.forEach((obj) => {
-            const id = obj?.data?.id;
-            if (typeof id === "string" && !desiredIds.has(id)) {
-                container.remove(obj);
-            }
-        });
-        const byId = new Map();
-        container.getObjects().forEach((obj) => {
-            const id = obj?.data?.id;
-            if (typeof id === "string")
-                byId.set(id, obj);
-        });
-        for (let index = 0; index < specs.length; index += 1) {
-            const spec = specs[index];
-            let current = byId.get(spec.id);
-            if (current &&
-                spec.type === "image" &&
-                spec.src &&
-                current.getSrc &&
-                current.getSrc() !== spec.src) {
-                container.remove(current);
-                byId.delete(spec.id);
-                current = undefined;
-            }
-            if (!current) {
-                const created = await this.createFabricObject(spec);
-                if (!created)
-                    continue;
-                container.add(created);
-                current = created;
-                byId.set(spec.id, current);
-            }
-            else {
-                this.patchFabricObject(current, spec);
-            }
-            this.moveObjectInContainer(container, current, index);
+        if (options.render !== false) {
+            this.requestRenderAll();
         }
-        container.dirty = true;
-        this.requestRenderAll();
     }
     patchFabricObject(obj, spec, extraData) {
         const nextData = {
@@ -188,18 +861,94 @@ class CanvasService {
             ...(extraData || {}),
             id: spec.id,
         };
-        obj.set({ ...(spec.props || {}), data: nextData });
+        nextData.__renderSourceKey = this.getSpecRenderSourceKey(spec);
+        const props = this.resolveFabricProps(spec, spec.props || {});
+        obj.set({ ...props, data: nextData });
         obj.setCoords();
     }
-    moveObjectInContainer(container, obj, index) {
+    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 = container.moveObjectTo;
+        const moveObjectTo = this.canvas.moveObjectTo;
         if (typeof moveObjectTo === "function") {
-            moveObjectTo.call(container, obj, index);
+            moveObjectTo.call(this.canvas, obj, index);
             return;
         }
-        const list = container._objects;
+        const list = this.canvas._objects;
         if (!Array.isArray(list))
             return;
         const from = list.indexOf(obj);
@@ -208,25 +957,27 @@ class CanvasService {
         list.splice(from, 1);
         const target = Math.max(0, Math.min(index, list.length));
         list.splice(target, 0, obj);
-        if (typeof container._onStackOrderChanged === "function") {
-            container._onStackOrderChanged();
+        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({
-                ...(spec.props || {}),
+                ...props,
                 data: { ...(spec.data || {}), id: spec.id },
             });
             rect.setCoords();
             return rect;
         }
         if (spec.type === "path") {
-            const pathData = spec.props?.path || spec.props?.pathData;
+            const pathData = this.readPathDataFromSpec(spec);
             if (!pathData)
                 return undefined;
+            const props = this.resolveFabricProps(spec, spec.props || {});
             const path = new fabric_1.Path(pathData, {
-                ...(spec.props || {}),
+                ...props,
                 data: { ...(spec.data || {}), id: spec.id },
             });
             path.setCoords();
@@ -236,13 +987,24 @@ class CanvasService {
             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({
-                ...(spec.props || {}),
+                ...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;
     }
 }