@pooder/kit 6.2.2 → 6.3.0

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

@@ -11,6 +11,7 @@ const sessionState_1 = require("../../shared/runtime/sessionState");
 const layers_1 = require("../../shared/constants/layers");
 const commands_1 = require("./commands");
 const config_1 = require("./config");
+const imageOperations_1 = require("./imageOperations");
 const sessionOverlay_1 = require("./sessionOverlay");
 const IMAGE_DEFAULT_CONTROL_CAPABILITIES = [
     "rotate",
@@ -255,6 +256,7 @@ class ImageTool {
         this.clearRenderedImages();
         this.renderProducerDisposable?.dispose();
         this.renderProducerDisposable = undefined;
+        this.emitImageStateChange();
         if (this.canvasService) {
             void this.canvasService.flushRenderFromProducers();
             this.canvasService = undefined;
@@ -645,9 +647,9 @@ class ImageTool {
                     name: "Image",
                     interaction: "session",
                     commands: {
-                        begin: "resetWorkingImages",
+                        begin: "imageSessionReset",
                         commit: "completeImages",
-                        rollback: "resetWorkingImages",
+                        rollback: "imageSessionReset",
                     },
                     session: {
                         autoBegin: true,
@@ -685,6 +687,29 @@ class ImageTool {
     cloneItems(items) {
         return this.normalizeItems((items || []).map((i) => ({ ...i })));
     }
+    getViewItems() {
+        return this.isToolActive ? this.workingItems : this.items;
+    }
+    getImageViewState() {
+        this.syncToolActiveFromWorkbench();
+        const items = this.cloneItems(this.getViewItems());
+        const focusedItem = this.focusedImageId == null
+            ? null
+            : items.find((item) => item.id === this.focusedImageId) || null;
+        return {
+            items,
+            hasAnyImage: items.length > 0,
+            focusedId: this.focusedImageId,
+            focusedItem,
+            isToolActive: this.isToolActive,
+            isImageSelectionActive: this.isImageSelectionActive,
+            hasWorkingChanges: this.hasWorkingChanges,
+            source: this.isToolActive ? "working" : "committed",
+        };
+    }
+    emitImageStateChange() {
+        this.context?.eventBus.emit("image:state:change", this.getImageViewState());
+    }
     emitWorkingChange(changedId = null) {
         this.context?.eventBus.emit("image:working:change", {
             changedId,
@@ -722,9 +747,13 @@ class ImageTool {
         if (!options.skipRender) {
             this.updateImages();
         }
+        else {
+            this.emitImageStateChange();
+        }
         return { ok: true, id };
     }
-    async addImageEntry(url, options, fitOnAdd = true) {
+    async addImageEntry(url, options, operation) {
+        this.syncToolActiveFromWorkbench();
         const id = this.generateId();
         const newItem = this.normalizeItem({
             id,
@@ -732,13 +761,21 @@ class ImageTool {
             opacity: 1,
             ...options,
         });
-        const sessionDirtyBeforeAdd = this.isToolActive && this.hasWorkingChanges;
         const waitLoaded = this.waitImageLoaded(id, true);
-        this.updateConfig([...this.items, newItem]);
-        this.addItemToWorkingSessionIfNeeded(newItem, sessionDirtyBeforeAdd);
+        if (this.isToolActive) {
+            this.workingItems = this.cloneItems([...this.workingItems, newItem]);
+            this.hasWorkingChanges = true;
+            this.updateImages();
+            this.emitWorkingChange(id);
+        }
+        else {
+            this.updateConfig([...this.items, newItem]);
+        }
         const loaded = await waitLoaded;
-        if (loaded && fitOnAdd) {
-            await this.fitImageToDefaultArea(id);
+        if (loaded && operation) {
+            await this.applyImageOperation(id, operation, {
+                target: this.isToolActive ? "working" : "config",
+            });
         }
         if (loaded) {
             this.setImageFocus(id);
@@ -746,8 +783,8 @@ class ImageTool {
         return id;
     }
     async upsertImageEntry(url, options = {}) {
+        this.syncToolActiveFromWorkbench();
         const mode = options.mode || (options.id ? "replace" : "add");
-        const fitOnAdd = options.fitOnAdd !== false;
         if (mode === "replace") {
             if (!options.id) {
                 throw new Error("replace-target-id-required");
@@ -756,21 +793,33 @@ class ImageTool {
             if (!this.hasImageItem(targetId)) {
                 throw new Error("replace-target-not-found");
             }
-            await this.updateImageInConfig(targetId, { url });
+            if (this.isToolActive) {
+                const current = this.workingItems.find((item) => item.id === targetId) ||
+                    this.items.find((item) => item.id === targetId);
+                this.purgeSourceSizeCacheForItem(current);
+                this.updateImageInWorking(targetId, {
+                    url,
+                    sourceUrl: url,
+                    committedUrl: undefined,
+                });
+            }
+            else {
+                await this.updateImageInConfig(targetId, { url });
+            }
+            const loaded = await this.waitImageLoaded(targetId, true);
+            if (loaded && options.operation) {
+                await this.applyImageOperation(targetId, options.operation, {
+                    target: this.isToolActive ? "working" : "config",
+                });
+            }
+            if (loaded) {
+                this.setImageFocus(targetId);
+            }
             return { id: targetId, mode: "replace" };
         }
-        const id = await this.addImageEntry(url, options.addOptions, fitOnAdd);
+        const id = await this.addImageEntry(url, options.addOptions, options.operation);
         return { id, mode: "add" };
     }
-    addItemToWorkingSessionIfNeeded(item, sessionDirtyBeforeAdd) {
-        if (!sessionDirtyBeforeAdd || !this.isToolActive)
-            return;
-        if (this.workingItems.some((existing) => existing.id === item.id))
-            return;
-        this.workingItems = this.cloneItems([...this.workingItems, item]);
-        this.updateImages();
-        this.emitWorkingChange(item.id);
-    }
     async updateImage(id, updates, options = {}) {
         this.syncToolActiveFromWorkbench();
         const target = options.target || "auto";
@@ -825,37 +874,6 @@ class ImageTool {
         }
         return this.canvasService.toScreenRect(frame || this.getFrameRect());
     }
-    async resolveDefaultFitArea() {
-        if (!this.canvasService)
-            return null;
-        const frame = this.getFrameRect();
-        if (frame.width <= 0 || frame.height <= 0)
-            return null;
-        return {
-            width: Math.max(1, frame.width),
-            height: Math.max(1, frame.height),
-            left: frame.left + frame.width / 2,
-            top: frame.top + frame.height / 2,
-        };
-    }
-    async fitImageToDefaultArea(id) {
-        if (!this.canvasService)
-            return;
-        const area = await this.resolveDefaultFitArea();
-        if (area) {
-            await this.fitImageToArea(id, area);
-            return;
-        }
-        const viewport = this.canvasService.getSceneViewportRect();
-        const canvasW = Math.max(1, viewport.width || 0);
-        const canvasH = Math.max(1, viewport.height || 0);
-        await this.fitImageToArea(id, {
-            width: canvasW,
-            height: canvasH,
-            left: viewport.left + canvasW / 2,
-            top: viewport.top + canvasH / 2,
-        });
-    }
     getImageObjects() {
         if (!this.canvasService)
             return [];
@@ -1182,11 +1200,39 @@ class ImageTool {
             isImageSelectionActive: this.isImageSelectionActive,
             focusedImageId: this.focusedImageId,
         });
+        this.emitImageStateChange();
         this.canvasService.requestRenderAll();
     }
     clampNormalized(value) {
         return Math.max(-1, Math.min(2, value));
     }
+    async setImageTransform(id, updates, options = {}) {
+        const next = {};
+        if (Number.isFinite(updates.scale)) {
+            next.scale = Math.max(0.05, Number(updates.scale));
+        }
+        if (Number.isFinite(updates.angle)) {
+            next.angle = Number(updates.angle);
+        }
+        if (Number.isFinite(updates.left)) {
+            next.left = this.clampNormalized(Number(updates.left));
+        }
+        if (Number.isFinite(updates.top)) {
+            next.top = this.clampNormalized(Number(updates.top));
+        }
+        if (Number.isFinite(updates.opacity)) {
+            next.opacity = Math.max(0, Math.min(1, Number(updates.opacity)));
+        }
+        if (!Object.keys(next).length)
+            return;
+        await this.updateImage(id, next, options);
+    }
+    resetImageSession() {
+        this.workingItems = this.cloneItems(this.items);
+        this.hasWorkingChanges = false;
+        this.updateImages();
+        this.emitWorkingChange();
+    }
     updateImageInWorking(id, updates) {
         const index = this.workingItems.findIndex((item) => item.id === id);
         if (index < 0)
@@ -1220,23 +1266,12 @@ class ImageTool {
                     url: replacingUrl,
                     sourceUrl: replacingUrl,
                     committedUrl: undefined,
-                    scale: updates.scale ?? 1,
-                    angle: updates.angle ?? 0,
-                    left: updates.left ?? 0.5,
-                    top: updates.top ?? 0.5,
                 }
                 : {}),
         });
         this.updateConfig(next);
         if (replacingSource) {
-            this.debug("replace:image:begin", { id, replacingUrl });
             this.purgeSourceSizeCacheForItem(base);
-            const loaded = await this.waitImageLoaded(id, true);
-            this.debug("replace:image:loaded", { id, loaded });
-            if (loaded) {
-                await this.refitImageToFrame(id);
-                this.setImageFocus(id);
-            }
         }
     }
     waitImageLoaded(id, forceWait = false) {
@@ -1254,73 +1289,53 @@ class ImageTool {
             });
         });
     }
-    async refitImageToFrame(id) {
+    async resolveImageSourceSize(id, src) {
         const obj = this.getImageObject(id);
-        if (!obj || !this.canvasService)
-            return;
-        const current = this.items.find((item) => item.id === id);
-        if (!current)
-            return;
-        const render = this.resolveRenderImageState(current);
-        this.rememberSourceSize(render.src, obj);
-        const source = this.getSourceSize(render.src, obj);
-        const frame = this.getFrameRect();
-        const coverScale = this.getCoverScale(frame, source);
-        const currentScale = this.toSceneObjectScale(obj.scaleX || 1);
-        const zoom = Math.max(0.05, currentScale / coverScale);
-        const updated = {
-            scale: Number.isFinite(zoom) ? zoom : 1,
-            angle: 0,
-            left: 0.5,
-            top: 0.5,
-        };
-        const index = this.items.findIndex((item) => item.id === id);
-        if (index < 0)
-            return;
-        const next = [...this.items];
-        next[index] = this.normalizeItem({ ...next[index], ...updated });
-        this.updateConfig(next);
-        this.workingItems = this.cloneItems(next);
-        this.hasWorkingChanges = false;
-        this.updateImages();
-        this.emitWorkingChange(id);
+        if (obj) {
+            this.rememberSourceSize(src, obj);
+        }
+        const ensured = await this.ensureSourceSize(src);
+        if (ensured)
+            return ensured;
+        if (!obj)
+            return null;
+        const width = Number(obj?.width || 0);
+        const height = Number(obj?.height || 0);
+        if (width <= 0 || height <= 0)
+            return null;
+        return { width, height };
     }
-    async fitImageToArea(id, area) {
+    async applyImageOperation(id, operation, options = {}) {
         if (!this.canvasService)
             return;
-        const loaded = await this.waitImageLoaded(id, false);
-        if (!loaded)
-            return;
-        const obj = this.getImageObject(id);
-        if (!obj)
-            return;
-        const renderItems = this.isToolActive ? this.workingItems : this.items;
+        this.syncToolActiveFromWorkbench();
+        const target = options.target || "auto";
+        const renderItems = target === "working" || (target === "auto" && this.isToolActive)
+            ? this.workingItems
+            : this.items;
         const current = renderItems.find((item) => item.id === id);
         if (!current)
             return;
         const render = this.resolveRenderImageState(current);
-        this.rememberSourceSize(render.src, obj);
-        const source = this.getSourceSize(render.src, obj);
+        const source = await this.resolveImageSourceSize(id, render.src);
+        if (!source)
+            return;
         const frame = this.getFrameRect();
-        const baseCover = this.getCoverScale(frame, source);
-        const desiredScale = Math.max(Math.max(1, area.width) / Math.max(1, source.width), Math.max(1, area.height) / Math.max(1, source.height));
         const viewport = this.canvasService.getSceneViewportRect();
-        const canvasW = viewport.width || 1;
-        const canvasH = viewport.height || 1;
-        const areaLeftInput = area.left ?? 0.5;
-        const areaTopInput = area.top ?? 0.5;
-        const areaLeftPx = areaLeftInput <= 1.5
-            ? viewport.left + areaLeftInput * canvasW
-            : areaLeftInput;
-        const areaTopPx = areaTopInput <= 1.5
-            ? viewport.top + areaTopInput * canvasH
-            : areaTopInput;
-        const updates = {
-            scale: Math.max(0.05, desiredScale / baseCover),
-            left: this.clampNormalized((areaLeftPx - frame.left) / Math.max(1, frame.width)),
-            top: this.clampNormalized((areaTopPx - frame.top) / Math.max(1, frame.height)),
-        };
-        if (this.isToolActive) {
+        const area = operation.type === "resetTransform"
+            ? (0, imageOperations_1.resolveImageOperationArea)({ frame, viewport })
+            : (0, imageOperations_1.resolveImageOperationArea)({
+                frame,
+                viewport,
+                area: operation.area,
+            });
+        const updates = (0, imageOperations_1.computeImageOperationUpdates)({
+            frame,
+            source,
+            operation,
+            area,
+        });
+        if (target === "working" || (target === "auto" && this.isToolActive)) {
             this.updateImageInWorking(id, updates);
             return;
         }

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

@@ -24,30 +24,35 @@ function createImageCommands(tool) {
             },
         },
         {
-            command: "getWorkingImages",
-            id: "getWorkingImages",
-            title: "Get Working Images",
+            command: "applyImageOperation",
+            id: "applyImageOperation",
+            title: "Apply Image Operation",
+            handler: async (id, operation, options = {}) => {
+                await tool.applyImageOperation(id, operation, options);
+            },
+        },
+        {
+            command: "getImageViewState",
+            id: "getImageViewState",
+            title: "Get Image View State",
             handler: () => {
-                return tool.cloneItems(tool.workingItems);
+                return tool.getImageViewState();
             },
         },
         {
-            command: "setWorkingImage",
-            id: "setWorkingImage",
-            title: "Set Working Image",
-            handler: (id, updates) => {
-                tool.updateImageInWorking(id, updates);
+            command: "setImageTransform",
+            id: "setImageTransform",
+            title: "Set Image Transform",
+            handler: async (id, updates, options = {}) => {
+                await tool.setImageTransform(id, updates, options);
             },
         },
         {
-            command: "resetWorkingImages",
-            id: "resetWorkingImages",
-            title: "Reset Working Images",
+            command: "imageSessionReset",
+            id: "imageSessionReset",
+            title: "Reset Image Session",
             handler: () => {
-                tool.workingItems = tool.cloneItems(tool.items);
-                tool.hasWorkingChanges = false;
-                tool.updateImages();
-                tool.emitWorkingChange();
+                tool.resetImageSession();
             },
         },
         {
@@ -66,22 +71,6 @@ function createImageCommands(tool) {
                 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",
@@ -95,9 +84,10 @@ function createImageCommands(tool) {
             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) {
+                const sourceItems = tool.isToolActive ? tool.workingItems : tool.items;
+                const removed = sourceItems.find((item) => item.id === id);
+                const next = sourceItems.filter((item) => item.id !== id);
+                if (next.length !== sourceItems.length) {
                     tool.purgeSourceSizeCacheForItem(removed);
                     if (tool.focusedImageId === id) {
                         tool.setImageFocus(null, {
@@ -105,6 +95,13 @@ function createImageCommands(tool) {
                             skipRender: true,
                         });
                     }
+                    if (tool.isToolActive) {
+                        tool.workingItems = tool.cloneItems(next);
+                        tool.hasWorkingChanges = true;
+                        tool.updateImages();
+                        tool.emitWorkingChange(id);
+                        return;
+                    }
                     tool.updateConfig(next);
                 }
             },
@@ -127,6 +124,13 @@ function createImageCommands(tool) {
                     syncCanvasSelection: true,
                     skipRender: true,
                 });
+                if (tool.isToolActive) {
+                    tool.workingItems = [];
+                    tool.hasWorkingChanges = true;
+                    tool.updateImages();
+                    tool.emitWorkingChange();
+                    return;
+                }
                 tool.updateConfig([]);
             },
         },
@@ -135,11 +139,19 @@ function createImageCommands(tool) {
             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 sourceItems = tool.isToolActive ? tool.workingItems : tool.items;
+                const index = sourceItems.findIndex((item) => item.id === id);
+                if (index !== -1 && index < sourceItems.length - 1) {
+                    const next = [...sourceItems];
                     const [item] = next.splice(index, 1);
                     next.push(item);
+                    if (tool.isToolActive) {
+                        tool.workingItems = tool.cloneItems(next);
+                        tool.hasWorkingChanges = true;
+                        tool.updateImages();
+                        tool.emitWorkingChange(id);
+                        return;
+                    }
                     tool.updateConfig(next);
                 }
             },
@@ -149,11 +161,19 @@ function createImageCommands(tool) {
             id: "sendToBack",
             title: "Send Image to Back",
             handler: (id) => {
-                const index = tool.items.findIndex((item) => item.id === id);
+                const sourceItems = tool.isToolActive ? tool.workingItems : tool.items;
+                const index = sourceItems.findIndex((item) => item.id === id);
                 if (index > 0) {
-                    const next = [...tool.items];
+                    const next = [...sourceItems];
                     const [item] = next.splice(index, 1);
                     next.unshift(item);
+                    if (tool.isToolActive) {
+                        tool.workingItems = tool.cloneItems(next);
+                        tool.hasWorkingChanges = true;
+                        tool.updateImages();
+                        tool.emitWorkingChange(id);
+                        return;
+                    }
                     tool.updateConfig(next);
                 }
             },

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

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveImageOperationArea = resolveImageOperationArea;
+exports.computeImageOperationUpdates = computeImageOperationUpdates;
+const sourceSizeCache_1 = require("../../shared/imaging/sourceSizeCache");
+function clampNormalizedAnchor(value) {
+    return Math.max(-1, Math.min(2, value));
+}
+function toNormalizedAnchor(center, start, size) {
+    return clampNormalizedAnchor((center - start) / Math.max(1, size));
+}
+function resolveAbsoluteScale(operation, area, source) {
+    const widthScale = Math.max(1, area.width) / Math.max(1, source.width);
+    const heightScale = Math.max(1, area.height) / Math.max(1, source.height);
+    switch (operation.type) {
+        case "cover":
+            return Math.max(widthScale, heightScale);
+        case "contain":
+            return Math.min(widthScale, heightScale);
+        case "maximizeWidth":
+            return widthScale;
+        case "maximizeHeight":
+            return heightScale;
+        default:
+            return null;
+    }
+}
+function resolveImageOperationArea(args) {
+    const spec = args.area || { type: "frame" };
+    if (spec.type === "custom") {
+        return {
+            width: Math.max(1, spec.width),
+            height: Math.max(1, spec.height),
+            centerX: spec.centerX,
+            centerY: spec.centerY,
+        };
+    }
+    if (spec.type === "viewport") {
+        return {
+            width: Math.max(1, args.viewport.width),
+            height: Math.max(1, args.viewport.height),
+            centerX: args.viewport.left + args.viewport.width / 2,
+            centerY: args.viewport.top + args.viewport.height / 2,
+        };
+    }
+    return {
+        width: Math.max(1, args.frame.width),
+        height: Math.max(1, args.frame.height),
+        centerX: args.frame.left + args.frame.width / 2,
+        centerY: args.frame.top + args.frame.height / 2,
+    };
+}
+function computeImageOperationUpdates(args) {
+    const { frame, source, operation, area } = args;
+    if (operation.type === "resetTransform") {
+        return {
+            scale: 1,
+            left: 0.5,
+            top: 0.5,
+            angle: 0,
+        };
+    }
+    const left = toNormalizedAnchor(area.centerX, frame.left, frame.width);
+    const top = toNormalizedAnchor(area.centerY, frame.top, frame.height);
+    if (operation.type === "center") {
+        return { left, top };
+    }
+    const absoluteScale = resolveAbsoluteScale(operation, area, source);
+    const coverScale = (0, sourceSizeCache_1.getCoverScale)(frame, source);
+    return {
+        scale: Math.max(0.05, (absoluteScale || coverScale) / coverScale),
+        left,
+        top,
+    };
+}

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

@@ -17,5 +17,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./ImageTool"), exports);
 __exportStar(require("./commands"), exports);
 __exportStar(require("./config"), exports);
+__exportStar(require("./imageOperations"), exports);
 __exportStar(require("./model"), exports);
 __exportStar(require("./renderer"), exports);

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

@@ -1,2 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.hasAnyImageInViewState = hasAnyImageInViewState;
+function hasAnyImageInViewState(state) {
+    return Boolean(state?.hasAnyImage);
+}