@pooder/kit 6.0.0 → 6.1.0

package/.test-dist/src/extensions/image/commands.js

@@ -0,0 +1,162 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createImageCommands = createImageCommands;
+function createImageCommands(tool) {
+    return [
+        {
+            command: "addImage",
+            id: "addImage",
+            title: "Add Image",
+            handler: async (url, options) => {
+                const result = await tool.upsertImageEntry(url, {
+                    mode: "add",
+                    addOptions: options,
+                });
+                return result.id;
+            },
+        },
+        {
+            command: "upsertImage",
+            id: "upsertImage",
+            title: "Upsert Image",
+            handler: async (url, options = {}) => {
+                return await tool.upsertImageEntry(url, options);
+            },
+        },
+        {
+            command: "getWorkingImages",
+            id: "getWorkingImages",
+            title: "Get Working Images",
+            handler: () => {
+                return tool.cloneItems(tool.workingItems);
+            },
+        },
+        {
+            command: "setWorkingImage",
+            id: "setWorkingImage",
+            title: "Set Working Image",
+            handler: (id, updates) => {
+                tool.updateImageInWorking(id, updates);
+            },
+        },
+        {
+            command: "resetWorkingImages",
+            id: "resetWorkingImages",
+            title: "Reset Working Images",
+            handler: () => {
+                tool.workingItems = tool.cloneItems(tool.items);
+                tool.hasWorkingChanges = false;
+                tool.updateImages();
+                tool.emitWorkingChange();
+            },
+        },
+        {
+            command: "completeImages",
+            id: "completeImages",
+            title: "Complete Images",
+            handler: async () => {
+                return await tool.commitWorkingImagesAsCropped();
+            },
+        },
+        {
+            command: "exportUserCroppedImage",
+            id: "exportUserCroppedImage",
+            title: "Export User Cropped Image",
+            handler: async (options = {}) => {
+                return await tool.exportUserCroppedImage(options);
+            },
+        },
+        {
+            command: "fitImageToArea",
+            id: "fitImageToArea",
+            title: "Fit Image to Area",
+            handler: async (id, area) => {
+                await tool.fitImageToArea(id, area);
+            },
+        },
+        {
+            command: "fitImageToDefaultArea",
+            id: "fitImageToDefaultArea",
+            title: "Fit Image to Default Area",
+            handler: async (id) => {
+                await tool.fitImageToDefaultArea(id);
+            },
+        },
+        {
+            command: "focusImage",
+            id: "focusImage",
+            title: "Focus Image",
+            handler: (id, options = {}) => {
+                return tool.setImageFocus(id, options);
+            },
+        },
+        {
+            command: "removeImage",
+            id: "removeImage",
+            title: "Remove Image",
+            handler: (id) => {
+                const removed = tool.items.find((item) => item.id === id);
+                const next = tool.items.filter((item) => item.id !== id);
+                if (next.length !== tool.items.length) {
+                    tool.purgeSourceSizeCacheForItem(removed);
+                    if (tool.focusedImageId === id) {
+                        tool.setImageFocus(null, {
+                            syncCanvasSelection: true,
+                            skipRender: true,
+                        });
+                    }
+                    tool.updateConfig(next);
+                }
+            },
+        },
+        {
+            command: "updateImage",
+            id: "updateImage",
+            title: "Update Image",
+            handler: async (id, updates, options = {}) => {
+                await tool.updateImage(id, updates, options);
+            },
+        },
+        {
+            command: "clearImages",
+            id: "clearImages",
+            title: "Clear Images",
+            handler: () => {
+                tool.sourceSizeCache.clear();
+                tool.setImageFocus(null, {
+                    syncCanvasSelection: true,
+                    skipRender: true,
+                });
+                tool.updateConfig([]);
+            },
+        },
+        {
+            command: "bringToFront",
+            id: "bringToFront",
+            title: "Bring Image to Front",
+            handler: (id) => {
+                const index = tool.items.findIndex((item) => item.id === id);
+                if (index !== -1 && index < tool.items.length - 1) {
+                    const next = [...tool.items];
+                    const [item] = next.splice(index, 1);
+                    next.push(item);
+                    tool.updateConfig(next);
+                }
+            },
+        },
+        {
+            command: "sendToBack",
+            id: "sendToBack",
+            title: "Send Image to Back",
+            handler: (id) => {
+                const index = tool.items.findIndex((item) => item.id === id);
+                if (index > 0) {
+                    const next = [...tool.items];
+                    const [item] = next.splice(index, 1);
+                    next.unshift(item);
+                    tool.updateConfig(next);
+                }
+            },
+        },
+    ];
+}

package/.test-dist/src/extensions/image/config.js

@@ -0,0 +1,129 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createImageConfigurations = createImageConfigurations;
+function createImageConfigurations() {
+    return [
+        {
+            id: "image.items",
+            type: "array",
+            label: "Images",
+            default: [],
+        },
+        {
+            id: "image.debug",
+            type: "boolean",
+            label: "Image Debug Log",
+            default: false,
+        },
+        {
+            id: "image.control.cornerSize",
+            type: "number",
+            label: "Image Control Corner Size",
+            min: 4,
+            max: 64,
+            step: 1,
+            default: 14,
+        },
+        {
+            id: "image.control.touchCornerSize",
+            type: "number",
+            label: "Image Control Touch Corner Size",
+            min: 8,
+            max: 96,
+            step: 1,
+            default: 24,
+        },
+        {
+            id: "image.control.cornerStyle",
+            type: "select",
+            label: "Image Control Corner Style",
+            options: ["circle", "rect"],
+            default: "circle",
+        },
+        {
+            id: "image.control.cornerColor",
+            type: "color",
+            label: "Image Control Corner Color",
+            default: "#ffffff",
+        },
+        {
+            id: "image.control.cornerStrokeColor",
+            type: "color",
+            label: "Image Control Corner Stroke Color",
+            default: "#1677ff",
+        },
+        {
+            id: "image.control.transparentCorners",
+            type: "boolean",
+            label: "Image Control Transparent Corners",
+            default: false,
+        },
+        {
+            id: "image.control.borderColor",
+            type: "color",
+            label: "Image Control Border Color",
+            default: "#1677ff",
+        },
+        {
+            id: "image.control.borderScaleFactor",
+            type: "number",
+            label: "Image Control Border Width",
+            min: 0.5,
+            max: 8,
+            step: 0.1,
+            default: 1.5,
+        },
+        {
+            id: "image.control.padding",
+            type: "number",
+            label: "Image Control Padding",
+            min: 0,
+            max: 64,
+            step: 1,
+            default: 0,
+        },
+        {
+            id: "image.frame.strokeColor",
+            type: "color",
+            label: "Image Frame Stroke Color",
+            default: "#808080",
+        },
+        {
+            id: "image.frame.strokeWidth",
+            type: "number",
+            label: "Image Frame Stroke Width",
+            min: 0,
+            max: 20,
+            step: 0.5,
+            default: 2,
+        },
+        {
+            id: "image.frame.strokeStyle",
+            type: "select",
+            label: "Image Frame Stroke Style",
+            options: ["solid", "dashed", "hidden"],
+            default: "dashed",
+        },
+        {
+            id: "image.frame.dashLength",
+            type: "number",
+            label: "Image Frame Dash Length",
+            min: 1,
+            max: 40,
+            step: 1,
+            default: 8,
+        },
+        {
+            id: "image.frame.innerBackground",
+            type: "color",
+            label: "Image Frame Inner Background",
+            default: "rgba(0,0,0,0)",
+        },
+        {
+            id: "image.frame.outerBackground",
+            type: "color",
+            label: "Image Frame Outer Background",
+            default: "#f5f5f5",
+        },
+    ];
+}

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

@@ -0,0 +1,21 @@
+"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("./ImageTool"), exports);
+__exportStar(require("./commands"), exports);
+__exportStar(require("./config"), exports);
+__exportStar(require("./model"), exports);
+__exportStar(require("./renderer"), exports);

package/.test-dist/src/extensions/image/model.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/.test-dist/src/extensions/image/renderer.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.computeImageCoverScale = void 0;
+var sourceSizeCache_1 = require("../../shared/imaging/sourceSizeCache");
+Object.defineProperty(exports, "computeImageCoverScale", { enumerable: true, get: function () { return sourceSizeCache_1.getCoverScale; } });

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

@@ -8,6 +8,34 @@ const geometry_1 = require("./geometry");
 const sceneLayoutModel_1 = require("./sceneLayoutModel");
 const IMAGE_OBJECT_LAYER_ID = "image.user";
 const IMAGE_OVERLAY_LAYER_ID = "image-overlay";
+const IMAGE_DEFAULT_CONTROL_CAPABILITIES = [
+    "rotate",
+    "scale",
+];
+const IMAGE_CONTROL_DESCRIPTORS = [
+    {
+        key: "tl",
+        capability: "rotate",
+        create: () => new fabric_1.Control({
+            x: -0.5,
+            y: -0.5,
+            actionName: "rotate",
+            actionHandler: fabric_1.controlsUtils.rotationWithSnapping,
+            cursorStyleHandler: fabric_1.controlsUtils.rotationStyleHandler,
+        }),
+    },
+    {
+        key: "br",
+        capability: "scale",
+        create: () => new fabric_1.Control({
+            x: 0.5,
+            y: 0.5,
+            actionName: "scale",
+            actionHandler: fabric_1.controlsUtils.scalingEqually,
+            cursorStyleHandler: fabric_1.controlsUtils.scaleCursorStyleHandler,
+        }),
+    },
+];
 class ImageTool {
     constructor() {
         this.id = "pooder.kit.image";
@@ -26,6 +54,7 @@ class ImageTool {
         this.renderSeq = 0;
         this.imageSpecs = [];
         this.overlaySpecs = [];
+        this.imageControlsByCapabilityKey = new Map();
         this.onToolActivated = (event) => {
             const before = this.isToolActive;
             this.syncToolActiveFromWorkbench(event.id);
@@ -183,7 +212,12 @@ class ImageTool {
                     this.updateImages();
                     return;
                 }
-                if (e.key.startsWith("size.") || e.key.startsWith("image.frame.")) {
+                if (e.key.startsWith("size.") ||
+                    e.key.startsWith("image.frame.") ||
+                    e.key.startsWith("image.control.")) {
+                    if (e.key.startsWith("image.control.")) {
+                        this.imageControlsByCapabilityKey.clear();
+                    }
                     this.updateImages();
                 }
             });
@@ -207,6 +241,7 @@ class ImageTool {
         this.cropShapeHatchPatternKey = undefined;
         this.imageSpecs = [];
         this.overlaySpecs = [];
+        this.imageControlsByCapabilityKey.clear();
         this.clearRenderedImages();
         this.renderProducerDisposable?.dispose();
         this.renderProducerDisposable = undefined;
@@ -228,6 +263,83 @@ class ImageTool {
     isImageEditingVisible() {
         return (this.isToolActive || this.isImageSelectionActive || !!this.focusedImageId);
     }
+    getEnabledImageControlCapabilities() {
+        return IMAGE_DEFAULT_CONTROL_CAPABILITIES;
+    }
+    getImageControls(capabilities) {
+        const normalized = [...new Set(capabilities)].sort();
+        const cacheKey = normalized.join("|");
+        const cached = this.imageControlsByCapabilityKey.get(cacheKey);
+        if (cached) {
+            return cached;
+        }
+        const enabled = new Set(normalized);
+        const controls = {};
+        IMAGE_CONTROL_DESCRIPTORS.forEach((descriptor) => {
+            if (!enabled.has(descriptor.capability))
+                return;
+            controls[descriptor.key] = descriptor.create();
+        });
+        this.imageControlsByCapabilityKey.set(cacheKey, controls);
+        return controls;
+    }
+    getImageControlVisualConfig() {
+        const cornerSizeRaw = Number(this.getConfig("image.control.cornerSize", 14) ?? 14);
+        const touchCornerSizeRaw = Number(this.getConfig("image.control.touchCornerSize", 24) ?? 24);
+        const borderScaleFactorRaw = Number(this.getConfig("image.control.borderScaleFactor", 1.5) ?? 1.5);
+        const paddingRaw = Number(this.getConfig("image.control.padding", 0) ?? 0);
+        const cornerStyleRaw = (this.getConfig("image.control.cornerStyle", "circle") || "circle");
+        const cornerStyle = cornerStyleRaw === "rect" ? "rect" : "circle";
+        return {
+            cornerSize: Number.isFinite(cornerSizeRaw)
+                ? Math.max(4, Math.min(64, cornerSizeRaw))
+                : 14,
+            touchCornerSize: Number.isFinite(touchCornerSizeRaw)
+                ? Math.max(8, Math.min(96, touchCornerSizeRaw))
+                : 24,
+            cornerStyle,
+            cornerColor: this.getConfig("image.control.cornerColor", "#ffffff") ||
+                "#ffffff",
+            cornerStrokeColor: this.getConfig("image.control.cornerStrokeColor", "#1677ff") ||
+                "#1677ff",
+            transparentCorners: !!this.getConfig("image.control.transparentCorners", false),
+            borderColor: this.getConfig("image.control.borderColor", "#1677ff") ||
+                "#1677ff",
+            borderScaleFactor: Number.isFinite(borderScaleFactorRaw)
+                ? Math.max(0.5, Math.min(8, borderScaleFactorRaw))
+                : 1.5,
+            padding: Number.isFinite(paddingRaw)
+                ? Math.max(0, Math.min(64, paddingRaw))
+                : 0,
+        };
+    }
+    applyImageObjectInteractionState(obj) {
+        if (!obj)
+            return;
+        const visible = this.isImageEditingVisible();
+        const visual = this.getImageControlVisualConfig();
+        obj.set({
+            selectable: visible,
+            evented: visible,
+            hasControls: visible,
+            hasBorders: visible,
+            lockScalingFlip: true,
+            cornerSize: visual.cornerSize,
+            touchCornerSize: visual.touchCornerSize,
+            cornerStyle: visual.cornerStyle,
+            cornerColor: visual.cornerColor,
+            cornerStrokeColor: visual.cornerStrokeColor,
+            transparentCorners: visual.transparentCorners,
+            borderColor: visual.borderColor,
+            borderScaleFactor: visual.borderScaleFactor,
+            padding: visual.padding,
+        });
+        obj.controls = this.getImageControls(this.getEnabledImageControlCapabilities());
+        obj.setCoords?.();
+    }
+    refreshImageObjectInteractionState() {
+        this.getImageObjects().forEach((obj) => this.applyImageObjectInteractionState(obj));
+    }
     isDebugEnabled() {
         return !!this.getConfig("image.debug", false);
     }
@@ -271,6 +383,73 @@ class ImageTool {
                     label: "Image Debug Log",
                     default: false,
                 },
+                {
+                    id: "image.control.cornerSize",
+                    type: "number",
+                    label: "Image Control Corner Size",
+                    min: 4,
+                    max: 64,
+                    step: 1,
+                    default: 14,
+                },
+                {
+                    id: "image.control.touchCornerSize",
+                    type: "number",
+                    label: "Image Control Touch Corner Size",
+                    min: 8,
+                    max: 96,
+                    step: 1,
+                    default: 24,
+                },
+                {
+                    id: "image.control.cornerStyle",
+                    type: "select",
+                    label: "Image Control Corner Style",
+                    options: ["circle", "rect"],
+                    default: "circle",
+                },
+                {
+                    id: "image.control.cornerColor",
+                    type: "color",
+                    label: "Image Control Corner Color",
+                    default: "#ffffff",
+                },
+                {
+                    id: "image.control.cornerStrokeColor",
+                    type: "color",
+                    label: "Image Control Corner Stroke Color",
+                    default: "#1677ff",
+                },
+                {
+                    id: "image.control.transparentCorners",
+                    type: "boolean",
+                    label: "Image Control Transparent Corners",
+                    default: false,
+                },
+                {
+                    id: "image.control.borderColor",
+                    type: "color",
+                    label: "Image Control Border Color",
+                    default: "#1677ff",
+                },
+                {
+                    id: "image.control.borderScaleFactor",
+                    type: "number",
+                    label: "Image Control Border Width",
+                    min: 0.5,
+                    max: 8,
+                    step: 0.1,
+                    default: 1.5,
+                },
+                {
+                    id: "image.control.padding",
+                    type: "number",
+                    label: "Image Control Padding",
+                    min: 0,
+                    max: 64,
+                    step: 1,
+                    default: 0,
+                },
                 {
                     id: "image.frame.strokeColor",
                     type: "color",
@@ -513,12 +692,7 @@ class ImageTool {
             else {
                 const obj = this.getImageObject(id);
                 if (obj) {
-                    obj.set({
-                        selectable: true,
-                        evented: true,
-                        hasControls: true,
-                        hasBorders: true,
-                    });
+                    this.applyImageObjectInteractionState(obj);
                     canvas.setActiveObject(obj);
                 }
             }
@@ -1317,6 +1491,7 @@ class ImageTool {
         await this.canvasService.flushRenderFromProducers();
         if (seq !== this.renderSeq)
             return;
+        this.refreshImageObjectInteractionState();
         renderItems.forEach((item) => {
             if (!this.getImageObject(item.id))
                 return;

package/.test-dist/src/extensions/mirror/MirrorTool.js

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MirrorTool = void 0;
+const core_1 = require("@pooder/core");
+class MirrorTool {
+    constructor(options) {
+        this.id = "pooder.kit.mirror";
+        this.metadata = {
+            name: "MirrorTool",
+        };
+        this.enabled = false;
+        if (options) {
+            Object.assign(this, options);
+        }
+    }
+    toJSON() {
+        return {
+            enabled: this.enabled,
+        };
+    }
+    loadFromJSON(json) {
+        this.enabled = json.enabled;
+    }
+    activate(context) {
+        this.canvasService = context.services.get("CanvasService");
+        if (!this.canvasService) {
+            console.warn("CanvasService not found for MirrorTool");
+            return;
+        }
+        const configService = context.services.get("ConfigurationService");
+        if (configService) {
+            // Load initial config
+            this.enabled = configService.get("mirror.enabled", this.enabled);
+            // Listen for changes
+            configService.onAnyChange((e) => {
+                if (e.key === "mirror.enabled") {
+                    this.applyMirror(e.value);
+                }
+            });
+        }
+        // Initialize with current state (if enabled was persisted)
+        if (this.enabled) {
+            this.applyMirror(true);
+        }
+    }
+    deactivate(context) {
+        this.applyMirror(false);
+        this.canvasService = undefined;
+    }
+    contribute() {
+        return {
+            [core_1.ContributionPointIds.CONFIGURATIONS]: [
+                {
+                    id: "mirror.enabled",
+                    type: "boolean",
+                    label: "Enable Mirror",
+                    default: false,
+                },
+            ],
+            [core_1.ContributionPointIds.COMMANDS]: [
+                {
+                    command: "setMirror",
+                    title: "Set Mirror",
+                    handler: (enabled) => {
+                        this.applyMirror(enabled);
+                        return true;
+                    },
+                },
+            ],
+        };
+    }
+    applyMirror(enabled) {
+        if (!this.canvasService)
+            return;
+        const canvas = this.canvasService.canvas;
+        if (!canvas)
+            return;
+        const width = canvas.width || 800;
+        // Fabric.js v6+ uses viewportTransform property
+        let vpt = canvas.viewportTransform || [1, 0, 0, 1, 0, 0];
+        // Create a copy to avoid mutating the reference directly before setting
+        vpt = [...vpt];
+        // If we are enabling and currently not flipped (scaleX > 0)
+        // Or disabling and currently flipped (scaleX < 0)
+        const isFlipped = vpt[0] < 0;
+        if (enabled && !isFlipped) {
+            // Flip scale X
+            vpt[0] = -vpt[0]; // Flip scale
+            vpt[4] = width - vpt[4]; // Adjust pan X
+            canvas.setViewportTransform(vpt);
+            canvas.requestRenderAll();
+            this.enabled = true;
+        }
+        else if (!enabled && isFlipped) {
+            // Restore
+            vpt[0] = -vpt[0]; // Unflip scale
+            vpt[4] = width - vpt[4]; // Restore pan X
+            canvas.setViewportTransform(vpt);
+            canvas.requestRenderAll();
+            this.enabled = false;
+        }
+    }
+}
+exports.MirrorTool = MirrorTool;

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