@pooder/kit 5.3.1 → 6.0.0

package/.test-dist/src/extensions/background.js

@@ -3,16 +3,178 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BackgroundTool = void 0;
 const core_1 = require("@pooder/core");
 const fabric_1 = require("fabric");
+const sceneLayoutModel_1 = require("./sceneLayoutModel");
+const BACKGROUND_LAYER_ID = "background";
+const BACKGROUND_CONFIG_KEY = "background.config";
+const DEFAULT_WIDTH = 800;
+const DEFAULT_HEIGHT = 600;
+const DEFAULT_BACKGROUND_CONFIG = {
+    version: 1,
+    layers: [
+        {
+            id: "base-color",
+            kind: "color",
+            anchor: "viewport",
+            fit: "cover",
+            opacity: 1,
+            order: 0,
+            enabled: true,
+            exportable: false,
+            color: "#aaa",
+        },
+    ],
+};
+function clampOpacity(value, fallback) {
+    const numeric = Number(value);
+    if (!Number.isFinite(numeric)) {
+        return Math.max(0, Math.min(1, fallback));
+    }
+    return Math.max(0, Math.min(1, numeric));
+}
+function normalizeLayerKind(value, fallback) {
+    if (value === "color" || value === "image") {
+        return value;
+    }
+    return fallback;
+}
+function normalizeFitMode(value, fallback) {
+    if (value === "contain" || value === "cover" || value === "stretch") {
+        return value;
+    }
+    return fallback;
+}
+function normalizeAnchor(value, fallback) {
+    if (typeof value !== "string")
+        return fallback;
+    const trimmed = value.trim();
+    return trimmed || fallback;
+}
+function normalizeOrder(value, fallback) {
+    const numeric = Number(value);
+    if (!Number.isFinite(numeric))
+        return fallback;
+    return numeric;
+}
+function normalizeLayer(raw, index, fallback) {
+    const fallbackLayer = fallback || {
+        id: `layer-${index + 1}`,
+        kind: "image",
+        anchor: "viewport",
+        fit: "contain",
+        opacity: 1,
+        order: index,
+        enabled: true,
+        exportable: false,
+        src: "",
+    };
+    if (!raw || typeof raw !== "object") {
+        return { ...fallbackLayer };
+    }
+    const input = raw;
+    const kind = normalizeLayerKind(input.kind, fallbackLayer.kind);
+    return {
+        id: typeof input.id === "string" && input.id.trim().length > 0
+            ? input.id.trim()
+            : fallbackLayer.id,
+        kind,
+        anchor: normalizeAnchor(input.anchor, fallbackLayer.anchor),
+        fit: normalizeFitMode(input.fit, fallbackLayer.fit),
+        opacity: clampOpacity(input.opacity, fallbackLayer.opacity),
+        order: normalizeOrder(input.order, fallbackLayer.order),
+        enabled: typeof input.enabled === "boolean"
+            ? input.enabled
+            : fallbackLayer.enabled,
+        exportable: typeof input.exportable === "boolean"
+            ? input.exportable
+            : fallbackLayer.exportable,
+        color: kind === "color"
+            ? typeof input.color === "string"
+                ? input.color
+                : typeof fallbackLayer.color === "string"
+                    ? fallbackLayer.color
+                    : "#ffffff"
+            : undefined,
+        src: kind === "image"
+            ? typeof input.src === "string"
+                ? input.src.trim()
+                : typeof fallbackLayer.src === "string"
+                    ? fallbackLayer.src
+                    : ""
+            : undefined,
+    };
+}
+function normalizeConfig(raw) {
+    if (!raw || typeof raw !== "object") {
+        return cloneConfig(DEFAULT_BACKGROUND_CONFIG);
+    }
+    const input = raw;
+    const version = Number.isFinite(Number(input.version))
+        ? Number(input.version)
+        : DEFAULT_BACKGROUND_CONFIG.version;
+    const baseLayers = Array.isArray(input.layers)
+        ? input.layers.map((layer, index) => normalizeLayer(layer, index))
+        : cloneConfig(DEFAULT_BACKGROUND_CONFIG).layers;
+    const uniqueLayers = [];
+    const seen = new Set();
+    baseLayers.forEach((layer, index) => {
+        let nextId = layer.id || `layer-${index + 1}`;
+        let serial = 1;
+        while (seen.has(nextId)) {
+            serial += 1;
+            nextId = `${layer.id || `layer-${index + 1}`}-${serial}`;
+        }
+        seen.add(nextId);
+        uniqueLayers.push({ ...layer, id: nextId });
+    });
+    return {
+        version,
+        layers: uniqueLayers,
+    };
+}
+function cloneConfig(config) {
+    return {
+        version: config.version,
+        layers: (config.layers || []).map((layer) => ({ ...layer })),
+    };
+}
+function mergeConfig(base, patch) {
+    const merged = {
+        version: patch.version === undefined
+            ? base.version
+            : Number.isFinite(Number(patch.version))
+                ? Number(patch.version)
+                : base.version,
+        layers: Array.isArray(patch.layers)
+            ? patch.layers.map((layer, index) => normalizeLayer(layer, index))
+            : base.layers.map((layer) => ({ ...layer })),
+    };
+    return normalizeConfig(merged);
+}
+function configSignature(config) {
+    return JSON.stringify(config);
+}
 class BackgroundTool {
     constructor(options) {
         this.id = "pooder.kit.background";
         this.metadata = {
             name: "BackgroundTool",
         };
-        this.color = "";
-        this.url = "";
-        if (options) {
-            Object.assign(this, options);
+        this.config = cloneConfig(DEFAULT_BACKGROUND_CONFIG);
+        this.specs = [];
+        this.renderSeq = 0;
+        this.latestSceneLayout = null;
+        this.sourceSizeBySrc = new Map();
+        this.pendingSizeBySrc = new Map();
+        this.onCanvasResized = () => {
+            this.latestSceneLayout = null;
+            this.updateBackground();
+        };
+        this.onSceneLayoutChanged = (layout) => {
+            this.latestSceneLayout = layout;
+            this.updateBackground();
+        };
+        if (options && typeof options === "object") {
+            this.config = mergeConfig(this.config, options);
         }
     }
     activate(context) {
@@ -21,182 +183,364 @@ class BackgroundTool {
             console.warn("CanvasService not found for BackgroundTool");
             return;
         }
-        const configService = context.services.get("ConfigurationService");
-        if (configService) {
-            // Load initial config
-            this.color = configService.get("background.color", this.color);
-            this.url = configService.get("background.url", this.url);
-            // Listen for changes
-            configService.onAnyChange((e) => {
-                if (e.key.startsWith("background.")) {
-                    const prop = e.key.split(".")[1];
-                    console.log(`[BackgroundTool] Config change detected: ${e.key} -> ${e.value}, prop: ${prop}`);
-                    if (prop && prop in this) {
-                        console.log(`[BackgroundTool] Updating option ${prop} to ${e.value}`);
-                        this[prop] = e.value;
-                        this.updateBackground();
-                    }
-                    else {
-                        console.warn(`[BackgroundTool] Property ${prop} not found in options`);
-                    }
+        this.configService = context.services.get("ConfigurationService");
+        if (this.configService) {
+            this.config = normalizeConfig(this.configService.get(BACKGROUND_CONFIG_KEY, DEFAULT_BACKGROUND_CONFIG));
+            this.configChangeDisposable?.dispose();
+            this.configChangeDisposable = this.configService.onAnyChange((e) => {
+                if (e.key === BACKGROUND_CONFIG_KEY) {
+                    this.config = normalizeConfig(e.value);
+                    this.updateBackground();
+                    return;
+                }
+                if (e.key.startsWith("size.")) {
+                    this.latestSceneLayout = null;
+                    this.updateBackground();
                 }
             });
         }
-        this.initLayer();
+        this.renderProducerDisposable?.dispose();
+        this.renderProducerDisposable = this.canvasService.registerRenderProducer(this.id, () => ({
+            passes: [
+                {
+                    id: BACKGROUND_LAYER_ID,
+                    stack: 0,
+                    order: 0,
+                    objects: this.specs,
+                },
+            ],
+        }), { priority: 0 });
+        context.eventBus.on("canvas:resized", this.onCanvasResized);
+        context.eventBus.on("scene:layout:change", this.onSceneLayoutChanged);
         this.updateBackground();
     }
     deactivate(context) {
-        if (this.canvasService) {
-            const layer = this.canvasService.getLayer("background");
-            if (layer) {
-                this.canvasService.canvas.remove(layer);
-            }
-            this.canvasService = undefined;
-        }
+        context.eventBus.off("canvas:resized", this.onCanvasResized);
+        context.eventBus.off("scene:layout:change", this.onSceneLayoutChanged);
+        this.renderSeq += 1;
+        this.specs = [];
+        this.latestSceneLayout = null;
+        this.configChangeDisposable?.dispose();
+        this.configChangeDisposable = undefined;
+        this.renderProducerDisposable?.dispose();
+        this.renderProducerDisposable = undefined;
+        if (!this.canvasService)
+            return;
+        void this.canvasService.flushRenderFromProducers();
+        this.canvasService.requestRenderAll();
+        this.canvasService = undefined;
+        this.configService = undefined;
     }
     contribute() {
         return {
             [core_1.ContributionPointIds.CONFIGURATIONS]: [
                 {
-                    id: "background.color",
-                    type: "color",
-                    label: "Background Color",
-                    default: "",
-                },
-                {
-                    id: "background.url",
-                    type: "string",
-                    label: "Image URL",
-                    default: "",
+                    id: BACKGROUND_CONFIG_KEY,
+                    type: "json",
+                    label: "Background Config",
+                    default: cloneConfig(DEFAULT_BACKGROUND_CONFIG),
                 },
             ],
             [core_1.ContributionPointIds.COMMANDS]: [
                 {
-                    command: "reset",
-                    title: "Reset Background",
+                    command: "background.getConfig",
+                    title: "Get Background Config",
+                    handler: () => cloneConfig(this.config),
+                },
+                {
+                    command: "background.resetConfig",
+                    title: "Reset Background Config",
                     handler: () => {
-                        this.updateBackground();
+                        this.commitConfig(cloneConfig(DEFAULT_BACKGROUND_CONFIG));
                         return true;
                     },
                 },
                 {
-                    command: "clear",
-                    title: "Clear Background",
-                    handler: () => {
-                        this.color = "transparent";
-                        this.url = "";
-                        this.updateBackground();
+                    command: "background.replaceConfig",
+                    title: "Replace Background Config",
+                    handler: (config) => {
+                        this.commitConfig(normalizeConfig(config));
+                        return true;
+                    },
+                },
+                {
+                    command: "background.patchConfig",
+                    title: "Patch Background Config",
+                    handler: (patch) => {
+                        this.commitConfig(mergeConfig(this.config, patch || {}));
                         return true;
                     },
                 },
                 {
-                    command: "setBackgroundColor",
-                    title: "Set Background Color",
-                    handler: (color) => {
-                        if (this.color === color)
-                            return true;
-                        this.color = color;
-                        this.updateBackground();
+                    command: "background.upsertLayer",
+                    title: "Upsert Background Layer",
+                    handler: (layer) => {
+                        const normalized = normalizeLayer(layer, 0);
+                        const existingIndex = this.config.layers.findIndex((item) => item.id === normalized.id);
+                        const nextLayers = [...this.config.layers];
+                        if (existingIndex >= 0) {
+                            nextLayers[existingIndex] = normalizeLayer({ ...nextLayers[existingIndex], ...layer }, existingIndex, nextLayers[existingIndex]);
+                        }
+                        else {
+                            nextLayers.push(normalizeLayer({
+                                ...normalized,
+                                order: Number.isFinite(Number(layer.order))
+                                    ? Number(layer.order)
+                                    : nextLayers.length,
+                            }, nextLayers.length));
+                        }
+                        this.commitConfig(normalizeConfig({
+                            ...this.config,
+                            layers: nextLayers,
+                        }));
                         return true;
                     },
                 },
                 {
-                    command: "setBackgroundImage",
-                    title: "Set Background Image",
-                    handler: (url) => {
-                        if (this.url === url)
-                            return true;
-                        this.url = url;
-                        this.updateBackground();
+                    command: "background.removeLayer",
+                    title: "Remove Background Layer",
+                    handler: (id) => {
+                        const nextLayers = this.config.layers.filter((layer) => layer.id !== id);
+                        this.commitConfig(normalizeConfig({
+                            ...this.config,
+                            layers: nextLayers,
+                        }));
                         return true;
                     },
                 },
             ],
         };
     }
-    initLayer() {
-        if (!this.canvasService)
+    commitConfig(next) {
+        const normalized = normalizeConfig(next);
+        if (configSignature(normalized) === configSignature(this.config)) {
             return;
-        let backgroundLayer = this.canvasService.getLayer("background");
-        if (!backgroundLayer) {
-            backgroundLayer = this.canvasService.createLayer("background", {
-                width: this.canvasService.canvas.width,
-                height: this.canvasService.canvas.height,
-                selectable: false,
-                evented: false,
-            });
-            this.canvasService.canvas.sendObjectToBack(backgroundLayer);
         }
-    }
-    async updateBackground() {
-        if (!this.canvasService)
-            return;
-        const layer = this.canvasService.getLayer("background");
-        if (!layer) {
-            console.warn("[BackgroundTool] Background layer not found");
+        if (this.configService) {
+            this.configService.update(BACKGROUND_CONFIG_KEY, cloneConfig(normalized));
             return;
         }
-        const { color, url } = this;
-        const width = this.canvasService.canvas.width || 800;
-        const height = this.canvasService.canvas.height || 600;
-        let rect = this.canvasService.getObject("background-color-rect", "background");
-        if (rect) {
-            rect.set({
-                fill: color,
-            });
+        this.config = normalized;
+        this.updateBackground();
+    }
+    getViewportRect() {
+        const width = Number(this.canvasService?.canvas.width || 0);
+        const height = Number(this.canvasService?.canvas.height || 0);
+        return {
+            left: 0,
+            top: 0,
+            width: width > 0 ? width : DEFAULT_WIDTH,
+            height: height > 0 ? height : DEFAULT_HEIGHT,
+        };
+    }
+    resolveSceneLayout() {
+        if (this.latestSceneLayout)
+            return this.latestSceneLayout;
+        if (!this.canvasService || !this.configService)
+            return null;
+        const layout = (0, sceneLayoutModel_1.computeSceneLayout)(this.canvasService, (0, sceneLayoutModel_1.readSizeState)(this.configService));
+        this.latestSceneLayout = layout;
+        return layout;
+    }
+    resolveFocusRect() {
+        const layout = this.resolveSceneLayout();
+        if (!layout)
+            return null;
+        return {
+            left: layout.trimRect.left,
+            top: layout.trimRect.top,
+            width: layout.trimRect.width,
+            height: layout.trimRect.height,
+        };
+    }
+    resolveAnchorRect(anchor) {
+        if (anchor === "focus") {
+            return this.resolveFocusRect() || this.getViewportRect();
+        }
+        if (anchor !== "viewport") {
+            return this.getViewportRect();
         }
-        else {
-            rect = new fabric_1.Rect({
-                width,
-                height,
-                fill: color,
+        return this.getViewportRect();
+    }
+    resolveImagePlacement(target, sourceSize, fit) {
+        const targetWidth = Math.max(1, Number(target.width || 0));
+        const targetHeight = Math.max(1, Number(target.height || 0));
+        const sourceWidth = Math.max(1, Number(sourceSize.width || 0));
+        const sourceHeight = Math.max(1, Number(sourceSize.height || 0));
+        if (fit === "stretch") {
+            return {
+                left: target.left,
+                top: target.top,
+                scaleX: targetWidth / sourceWidth,
+                scaleY: targetHeight / sourceHeight,
+            };
+        }
+        const scale = fit === "contain"
+            ? Math.min(targetWidth / sourceWidth, targetHeight / sourceHeight)
+            : Math.max(targetWidth / sourceWidth, targetHeight / sourceHeight);
+        const renderWidth = sourceWidth * scale;
+        const renderHeight = sourceHeight * scale;
+        return {
+            left: target.left + (targetWidth - renderWidth) / 2,
+            top: target.top + (targetHeight - renderHeight) / 2,
+            scaleX: scale,
+            scaleY: scale,
+        };
+    }
+    buildColorLayerSpec(layer) {
+        const rect = this.resolveAnchorRect(layer.anchor);
+        return {
+            id: `background.layer.${layer.id}.color`,
+            type: "rect",
+            space: "screen",
+            data: {
+                id: `background.layer.${layer.id}.color`,
+                layerId: BACKGROUND_LAYER_ID,
+                type: "background-layer",
+                layerRef: layer.id,
+                layerKind: layer.kind,
+            },
+            props: {
+                left: rect.left,
+                top: rect.top,
+                width: rect.width,
+                height: rect.height,
+                originX: "left",
+                originY: "top",
+                fill: layer.color || "transparent",
+                opacity: layer.opacity,
                 selectable: false,
                 evented: false,
+                excludeFromExport: !layer.exportable,
+            },
+        };
+    }
+    buildImageLayerSpec(layer) {
+        const src = String(layer.src || "").trim();
+        if (!src)
+            return [];
+        const sourceSize = this.sourceSizeBySrc.get(src);
+        if (!sourceSize)
+            return [];
+        const rect = this.resolveAnchorRect(layer.anchor);
+        const placement = this.resolveImagePlacement(rect, sourceSize, layer.fit);
+        return [
+            {
+                id: `background.layer.${layer.id}.image`,
+                type: "image",
+                src,
+                space: "screen",
                 data: {
-                    id: "background-color-rect",
+                    id: `background.layer.${layer.id}.image`,
+                    layerId: BACKGROUND_LAYER_ID,
+                    type: "background-layer",
+                    layerRef: layer.id,
+                    layerKind: layer.kind,
                 },
-            });
-            layer.add(rect);
-            layer.sendObjectToBack(rect);
+                props: {
+                    left: placement.left,
+                    top: placement.top,
+                    originX: "left",
+                    originY: "top",
+                    scaleX: placement.scaleX,
+                    scaleY: placement.scaleY,
+                    opacity: layer.opacity,
+                    selectable: false,
+                    evented: false,
+                    excludeFromExport: !layer.exportable,
+                },
+            },
+        ];
+    }
+    buildBackgroundSpecs(config) {
+        const activeLayers = (config.layers || [])
+            .filter((layer) => layer.enabled)
+            .map((layer, index) => ({ layer, index }))
+            .sort((a, b) => {
+            if (a.layer.order !== b.layer.order) {
+                return a.layer.order - b.layer.order;
+            }
+            return a.index - b.index;
+        });
+        const specs = [];
+        activeLayers.forEach(({ layer }) => {
+            if (layer.kind === "color") {
+                specs.push(this.buildColorLayerSpec(layer));
+                return;
+            }
+            specs.push(...this.buildImageLayerSpec(layer));
+        });
+        return specs;
+    }
+    collectActiveImageUrls(config) {
+        const urls = new Set();
+        (config.layers || []).forEach((layer) => {
+            if (!layer.enabled || layer.kind !== "image")
+                return;
+            const src = String(layer.src || "").trim();
+            if (!src)
+                return;
+            urls.add(src);
+        });
+        return Array.from(urls);
+    }
+    async ensureImageSize(src) {
+        if (!src)
+            return null;
+        const cached = this.sourceSizeBySrc.get(src);
+        if (cached)
+            return cached;
+        const pending = this.pendingSizeBySrc.get(src);
+        if (pending) {
+            return pending;
         }
-        let img = this.canvasService.getObject("background-image", "background");
+        const task = this.loadImageSize(src);
+        this.pendingSizeBySrc.set(src, task);
         try {
-            if (img) {
-                if (img.getSrc() !== url) {
-                    if (url) {
-                        await img.setSrc(url);
-                    }
-                    else {
-                        layer.remove(img);
-                    }
-                }
+            return await task;
+        }
+        finally {
+            if (this.pendingSizeBySrc.get(src) === task) {
+                this.pendingSizeBySrc.delete(src);
             }
-            else {
-                if (url) {
-                    img = await fabric_1.FabricImage.fromURL(url, { crossOrigin: "anonymous" });
-                    img.set({
-                        originX: "left",
-                        originY: "top",
-                        left: 0,
-                        top: 0,
-                        selectable: false,
-                        evented: false,
-                        data: {
-                            id: "background-image",
-                        },
-                    });
-                    img.scaleToWidth(width);
-                    if (img.getScaledHeight() < height)
-                        img.scaleToHeight(height);
-                    layer.add(img);
-                }
+        }
+    }
+    async loadImageSize(src) {
+        try {
+            const image = await fabric_1.FabricImage.fromURL(src, {
+                crossOrigin: "anonymous",
+            });
+            const width = Number(image?.width || 0);
+            const height = Number(image?.height || 0);
+            if (width > 0 && height > 0) {
+                const size = { width, height };
+                this.sourceSizeBySrc.set(src, size);
+                return size;
             }
-            this.canvasService.requestRenderAll();
         }
-        catch (e) {
-            console.error("[BackgroundTool] Failed to load image", e);
+        catch (error) {
+            console.error("[BackgroundTool] Failed to load image", src, error);
+        }
+        return null;
+    }
+    updateBackground() {
+        void this.updateBackgroundAsync();
+    }
+    async updateBackgroundAsync() {
+        if (!this.canvasService)
+            return;
+        const seq = ++this.renderSeq;
+        const currentConfig = cloneConfig(this.config);
+        const activeUrls = this.collectActiveImageUrls(currentConfig);
+        if (activeUrls.length > 0) {
+            await Promise.all(activeUrls.map((url) => this.ensureImageSize(url)));
+            if (seq !== this.renderSeq)
+                return;
         }
-        layer.dirty = true;
+        this.specs = this.buildBackgroundSpecs(currentConfig);
+        await this.canvasService.flushRenderFromProducers();
+        if (seq !== this.renderSeq)
+            return;
         this.canvasService.requestRenderAll();
     }
 }