@pooder/kit 6.0.1 → 6.1.0

package/.test-dist/src/extensions/feature/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("./FeatureTool"), exports);

package/.test-dist/src/extensions/film/FilmTool.js

@@ -0,0 +1,207 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilmTool = void 0;
+const core_1 = require("@pooder/core");
+const fabric_1 = require("fabric");
+const layers_1 = require("../../shared/constants/layers");
+const sourceSizeCache_1 = require("../../shared/imaging/sourceSizeCache");
+const subscriptions_1 = require("../../shared/runtime/subscriptions");
+const FILM_IMAGE_ID = "film-image";
+const DEFAULT_WIDTH = 800;
+const DEFAULT_HEIGHT = 600;
+class FilmTool {
+    constructor(options) {
+        this.id = "pooder.kit.film";
+        this.metadata = {
+            name: "FilmTool",
+        };
+        this.url = "";
+        this.opacity = 0.5;
+        this.specs = [];
+        this.renderSeq = 0;
+        this.renderImageUrl = "";
+        this.sourceSizeCache = (0, sourceSizeCache_1.createSourceSizeCache)((src) => this.loadImageSize(src));
+        this.subscriptions = new subscriptions_1.SubscriptionBag();
+        this.onCanvasResized = () => {
+            this.updateFilm();
+        };
+        if (options) {
+            Object.assign(this, options);
+        }
+    }
+    activate(context) {
+        this.subscriptions.disposeAll();
+        this.canvasService = context.services.get("CanvasService");
+        if (!this.canvasService) {
+            console.warn("CanvasService not found for FilmTool");
+            return;
+        }
+        this.renderProducerDisposable?.dispose();
+        this.renderProducerDisposable = this.canvasService.registerRenderProducer(this.id, () => ({
+            passes: [
+                {
+                    id: layers_1.FILM_LAYER_ID,
+                    stack: 1000,
+                    order: 0,
+                    objects: this.specs,
+                },
+            ],
+        }), { priority: 500 });
+        const configService = context.services.get("ConfigurationService");
+        if (configService) {
+            // Load initial config
+            this.url = configService.get("film.url", this.url);
+            this.opacity = configService.get("film.opacity", this.opacity);
+            // Listen for changes
+            this.subscriptions.onConfigChange(configService, (e) => {
+                if (e.key.startsWith("film.")) {
+                    const prop = e.key.split(".")[1];
+                    console.log(`[FilmTool] Config change detected: ${e.key} -> ${e.value}`);
+                    if (prop && prop in this) {
+                        this[prop] = e.value;
+                        this.updateFilm();
+                    }
+                }
+            });
+        }
+        this.subscriptions.on(context.eventBus, "canvas:resized", this.onCanvasResized);
+        this.updateFilm();
+    }
+    deactivate(context) {
+        this.subscriptions.disposeAll();
+        this.renderSeq += 1;
+        this.specs = [];
+        this.renderImageUrl = "";
+        this.sourceSizeCache.clear();
+        this.renderProducerDisposable?.dispose();
+        this.renderProducerDisposable = undefined;
+        if (!this.canvasService)
+            return;
+        void this.canvasService.flushRenderFromProducers();
+        this.canvasService.requestRenderAll();
+        this.canvasService = undefined;
+    }
+    contribute() {
+        return {
+            [core_1.ContributionPointIds.CONFIGURATIONS]: [
+                {
+                    id: "film.url",
+                    type: "string",
+                    label: "Film Image URL",
+                    default: "",
+                },
+                {
+                    id: "film.opacity",
+                    type: "number",
+                    label: "Opacity",
+                    min: 0,
+                    max: 1,
+                    step: 0.1,
+                    default: 0.5,
+                },
+            ],
+            [core_1.ContributionPointIds.COMMANDS]: [
+                {
+                    command: "setFilmImage",
+                    title: "Set Film Image",
+                    handler: (url, opacity) => {
+                        if (this.url === url && this.opacity === opacity)
+                            return true;
+                        this.url = url;
+                        this.opacity = opacity;
+                        this.updateFilm();
+                        return true;
+                    },
+                },
+            ],
+        };
+    }
+    getViewportSize() {
+        const width = Number(this.canvasService?.canvas.width || 0);
+        const height = Number(this.canvasService?.canvas.height || 0);
+        return {
+            width: width > 0 ? width : DEFAULT_WIDTH,
+            height: height > 0 ? height : DEFAULT_HEIGHT,
+        };
+    }
+    clampOpacity(value) {
+        return Math.max(0, Math.min(1, Number(value)));
+    }
+    buildFilmSpecs(imageUrl, opacity) {
+        if (!imageUrl) {
+            return [];
+        }
+        const { width, height } = this.getViewportSize();
+        const sourceSize = this.sourceSizeCache.getSourceSize(imageUrl);
+        const sourceWidth = Math.max(1, Number(sourceSize?.width || width));
+        const sourceHeight = Math.max(1, Number(sourceSize?.height || height));
+        const coverScale = (0, sourceSizeCache_1.getCoverScale)({ width, height }, { width: sourceWidth, height: sourceHeight });
+        return [
+            {
+                id: FILM_IMAGE_ID,
+                type: "image",
+                src: imageUrl,
+                space: "screen",
+                data: {
+                    id: FILM_IMAGE_ID,
+                    layerId: layers_1.FILM_LAYER_ID,
+                    type: "film-image",
+                },
+                props: {
+                    left: 0,
+                    top: 0,
+                    originX: "left",
+                    originY: "top",
+                    opacity: this.clampOpacity(opacity),
+                    scaleX: coverScale,
+                    scaleY: coverScale,
+                    selectable: false,
+                    evented: false,
+                    excludeFromExport: true,
+                },
+            },
+        ];
+    }
+    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("[FilmTool] Failed to load film image", src, error);
+        }
+        return null;
+    }
+    updateFilm() {
+        void this.updateFilmAsync();
+    }
+    async updateFilmAsync() {
+        if (!this.canvasService)
+            return;
+        const seq = ++this.renderSeq;
+        const nextUrl = String(this.url || "").trim();
+        if (!nextUrl) {
+            this.renderImageUrl = "";
+        }
+        else if (nextUrl !== this.renderImageUrl) {
+            const loaded = await this.sourceSizeCache.ensureImageSize(nextUrl);
+            if (seq !== this.renderSeq)
+                return;
+            if (loaded) {
+                this.renderImageUrl = nextUrl;
+            }
+        }
+        this.specs = this.buildFilmSpecs(this.renderImageUrl, this.opacity);
+        await this.canvasService.flushRenderFromProducers();
+        if (seq !== this.renderSeq)
+            return;
+        this.canvasService.requestRenderAll();
+    }
+}
+exports.FilmTool = FilmTool;

package/.test-dist/src/extensions/film/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("./FilmTool"), exports);