@pooder/kit 6.0.1 → 6.1.0

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

@@ -0,0 +1,524 @@
+"use strict";
+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("../../shared/scene/sceneLayoutModel");
+const layers_1 = require("../../shared/constants/layers");
+const sourceSizeCache_1 = require("../../shared/imaging/sourceSizeCache");
+const subscriptions_1 = require("../../shared/runtime/subscriptions");
+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: "#fff",
+        },
+    ],
+};
+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.config = cloneConfig(DEFAULT_BACKGROUND_CONFIG);
+        this.specs = [];
+        this.subscriptions = new subscriptions_1.SubscriptionBag();
+        this.renderSeq = 0;
+        this.latestSceneLayout = null;
+        this.sourceSizeCache = (0, sourceSizeCache_1.createSourceSizeCache)((src) => this.loadImageSize(src));
+        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) {
+        this.subscriptions.disposeAll();
+        this.canvasService = context.services.get("CanvasService");
+        if (!this.canvasService) {
+            console.warn("CanvasService not found for BackgroundTool");
+            return;
+        }
+        this.configService = context.services.get("ConfigurationService");
+        if (this.configService) {
+            this.config = normalizeConfig(this.configService.get(BACKGROUND_CONFIG_KEY, DEFAULT_BACKGROUND_CONFIG));
+            this.subscriptions.onConfigChange(this.configService, (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.renderProducerDisposable?.dispose();
+        this.renderProducerDisposable = this.canvasService.registerRenderProducer(this.id, () => ({
+            passes: [
+                {
+                    id: layers_1.BACKGROUND_LAYER_ID,
+                    stack: 0,
+                    order: 0,
+                    objects: this.specs,
+                },
+            ],
+        }), { priority: 0 });
+        this.subscriptions.on(context.eventBus, "canvas:resized", this.onCanvasResized);
+        this.subscriptions.on(context.eventBus, "scene:layout:change", this.onSceneLayoutChanged);
+        this.updateBackground();
+    }
+    deactivate(context) {
+        this.subscriptions.disposeAll();
+        this.renderSeq += 1;
+        this.specs = [];
+        this.latestSceneLayout = null;
+        this.sourceSizeCache.clear();
+        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_CONFIG_KEY,
+                    type: "json",
+                    label: "Background Config",
+                    default: cloneConfig(DEFAULT_BACKGROUND_CONFIG),
+                },
+            ],
+            [core_1.ContributionPointIds.COMMANDS]: [
+                {
+                    command: "background.getConfig",
+                    title: "Get Background Config",
+                    handler: () => cloneConfig(this.config),
+                },
+                {
+                    command: "background.resetConfig",
+                    title: "Reset Background Config",
+                    handler: () => {
+                        this.commitConfig(cloneConfig(DEFAULT_BACKGROUND_CONFIG));
+                        return true;
+                    },
+                },
+                {
+                    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: "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: "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;
+                    },
+                },
+            ],
+        };
+    }
+    commitConfig(next) {
+        const normalized = normalizeConfig(next);
+        if (configSignature(normalized) === configSignature(this.config)) {
+            return;
+        }
+        if (this.configService) {
+            this.configService.update(BACKGROUND_CONFIG_KEY, cloneConfig(normalized));
+            return;
+        }
+        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();
+        }
+        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: layers_1.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.sourceSizeCache.getSourceSize(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.layer.${layer.id}.image`,
+                    layerId: layers_1.BACKGROUND_LAYER_ID,
+                    type: "background-layer",
+                    layerRef: layer.id,
+                    layerKind: layer.kind,
+                },
+                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 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) {
+                return { width, height };
+            }
+        }
+        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.sourceSizeCache.ensureImageSize(url)));
+            if (seq !== this.renderSeq)
+                return;
+        }
+        this.specs = this.buildBackgroundSpecs(currentConfig);
+        await this.canvasService.flushRenderFromProducers();
+        if (seq !== this.renderSeq)
+            return;
+        this.canvasService.requestRenderAll();
+    }
+}
+exports.BackgroundTool = BackgroundTool;

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./BackgroundTool"), exports);