@pooder/kit 6.2.2 → 6.3.1

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

@@ -11,6 +11,8 @@ 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 imagePlacement_1 = require("./imagePlacement");
 const sessionOverlay_1 = require("./sessionOverlay");
 const IMAGE_DEFAULT_CONTROL_CAPABILITIES = [
     "rotate",
@@ -62,6 +64,7 @@ class ImageTool {
         this.activeSnapX = null;
         this.activeSnapY = null;
         this.movingImageId = null;
+        this.sessionNotice = null;
         this.hasRenderedSnapGuides = false;
         this.subscriptions = new subscriptions_1.SubscriptionBag();
         this.imageControlsByCapabilityKey = new Map();
@@ -227,7 +230,11 @@ class ImageTool {
                 }
                 if (e.key.startsWith("size.") ||
                     e.key.startsWith("image.frame.") ||
+                    e.key.startsWith("image.session.") ||
                     e.key.startsWith("image.control.")) {
+                    if (e.key === "image.session.placementPolicy") {
+                        this.clearSessionNotice();
+                    }
                     if (e.key.startsWith("image.control.")) {
                         this.imageControlsByCapabilityKey.clear();
                     }
@@ -255,6 +262,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 +653,10 @@ class ImageTool {
                     name: "Image",
                     interaction: "session",
                     commands: {
-                        begin: "resetWorkingImages",
+                        begin: "imageSessionReset",
+                        validate: "validateImageSession",
                         commit: "completeImages",
-                        rollback: "resetWorkingImages",
+                        rollback: "imageSessionReset",
                     },
                     session: {
                         autoBegin: true,
@@ -685,6 +694,59 @@ class ImageTool {
     cloneItems(items) {
         return this.normalizeItems((items || []).map((i) => ({ ...i })));
     }
+    getViewItems() {
+        return this.isToolActive ? this.workingItems : this.items;
+    }
+    getPlacementPolicy() {
+        const policy = this.getConfig("image.session.placementPolicy", "free");
+        return policy === "warn" || policy === "strict" ? policy : "free";
+    }
+    areSessionNoticesEqual(a, b) {
+        if (!a && !b)
+            return true;
+        if (!a || !b)
+            return false;
+        return (a.code === b.code &&
+            a.level === b.level &&
+            a.message === b.message &&
+            a.policy === b.policy &&
+            JSON.stringify(a.imageIds) === JSON.stringify(b.imageIds));
+    }
+    setSessionNotice(notice, options = {}) {
+        if (this.areSessionNoticesEqual(this.sessionNotice, notice)) {
+            return;
+        }
+        this.sessionNotice = notice;
+        if (options.emit !== false) {
+            this.context?.eventBus.emit("image:session:notice", this.sessionNotice);
+            this.emitImageStateChange();
+        }
+    }
+    clearSessionNotice(options = {}) {
+        this.setSessionNotice(null, options);
+    }
+    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",
+            placementPolicy: this.getPlacementPolicy(),
+            sessionNotice: this.sessionNotice,
+        };
+    }
+    emitImageStateChange() {
+        this.context?.eventBus.emit("image:state:change", this.getImageViewState());
+    }
     emitWorkingChange(changedId = null) {
         this.context?.eventBus.emit("image:working:change", {
             changedId,
@@ -722,9 +784,14 @@ 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();
+        this.clearSessionNotice({ emit: false });
         const id = this.generateId();
         const newItem = this.normalizeItem({
             id,
@@ -732,13 +799,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 +821,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 +831,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";
@@ -806,6 +893,7 @@ class ImageTool {
     updateConfig(newItems, skipCanvasUpdate = false) {
         if (!this.context)
             return;
+        this.clearSessionNotice({ emit: false });
         this.applyCommittedItems(newItems);
         (0, sessionState_1.runDeferredConfigUpdate)(this, () => {
             const configService = this.context?.services.get("ConfigurationService");
@@ -825,37 +913,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 [];
@@ -929,6 +986,72 @@ class ImageTool {
     getCoverScale(frame, size) {
         return (0, sourceSizeCache_1.getCoverScale)(frame, size);
     }
+    resolvePlacementState(item) {
+        return {
+            left: Number.isFinite(item.left) ? item.left : 0.5,
+            top: Number.isFinite(item.top) ? item.top : 0.5,
+            scale: Math.max(0.05, item.scale ?? 1),
+            angle: Number.isFinite(item.angle) ? item.angle : 0,
+        };
+    }
+    async validatePlacementForItem(item) {
+        const frame = this.getFrameRect();
+        if (!frame.width || !frame.height) {
+            return true;
+        }
+        const src = item.sourceUrl || item.url;
+        if (!src) {
+            return true;
+        }
+        const source = await this.resolveImageSourceSize(item.id, src);
+        if (!source) {
+            return true;
+        }
+        return (0, imagePlacement_1.validateImagePlacement)({
+            frame,
+            source,
+            placement: this.resolvePlacementState(item),
+        }).ok;
+    }
+    async validateImageSession() {
+        const policy = this.getPlacementPolicy();
+        if (policy === "free") {
+            this.clearSessionNotice();
+            return { ok: true, policy };
+        }
+        const invalidImageIds = [];
+        for (const item of this.workingItems) {
+            const valid = await this.validatePlacementForItem(item);
+            if (!valid) {
+                invalidImageIds.push(item.id);
+            }
+        }
+        if (!invalidImageIds.length) {
+            this.clearSessionNotice();
+            return { ok: true, policy };
+        }
+        const notice = {
+            code: "image-outside-frame",
+            level: policy === "strict" ? "error" : "warning",
+            message: policy === "strict"
+                ? "图片位置不能超出 frame，请调整后再提交。"
+                : "图片位置已超出 frame，建议调整后再提交。",
+            imageIds: invalidImageIds,
+            policy,
+        };
+        this.setSessionNotice(notice);
+        this.setImageFocus(invalidImageIds[0], {
+            syncCanvasSelection: true,
+            skipRender: true,
+        });
+        return {
+            ok: policy !== "strict",
+            reason: notice.code,
+            message: notice.message,
+            imageIds: notice.imageIds,
+            policy: notice.policy,
+        };
+    }
     getFrameVisualConfig() {
         const strokeStyleRaw = (this.getConfig("image.frame.strokeStyle", "dashed") || "dashed");
         const strokeStyle = strokeStyleRaw === "dashed" || strokeStyleRaw === "hidden"
@@ -1182,15 +1305,45 @@ 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.clearSessionNotice({ emit: false });
+        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)
             return;
+        this.clearSessionNotice({ emit: false });
         const next = [...this.workingItems];
         next[index] = this.normalizeItem({ ...next[index], ...updates });
         this.workingItems = next;
@@ -1208,6 +1361,7 @@ class ImageTool {
         const index = this.items.findIndex((item) => item.id === id);
         if (index < 0)
             return;
+        this.clearSessionNotice({ emit: false });
         const replacingSource = typeof updates.url === "string" && updates.url.length > 0;
         const next = [...this.items];
         const base = next[index];
@@ -1220,23 +1374,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 +1397,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;
         }
@@ -1357,11 +1480,19 @@ class ImageTool {
             }
         }
         this.hasWorkingChanges = false;
+        this.clearSessionNotice({ emit: false });
         this.workingItems = this.cloneItems(next);
         this.updateConfig(next);
         this.emitWorkingChange(this.focusedImageId);
         return { ok: true };
     }
+    async completeImageSession() {
+        const validation = await this.validateImageSession();
+        if (!validation.ok) {
+            return validation;
+        }
+        return await this.commitWorkingImagesAsCropped();
+    }
     async exportCroppedImageByIds(imageIds, options) {
         if (!this.canvasService) {
             throw new Error("CanvasService not initialized");