@pooder/kit 6.2.2 → 6.3.0

package/src/extensions/image/ImageTool.ts

@@ -39,6 +39,11 @@ import {
 } from "../../shared/constants/layers";
 import { createImageCommands } from "./commands";
 import { createImageConfigurations } from "./config";
+import {
+  computeImageOperationUpdates,
+  resolveImageOperationArea,
+  type ImageOperation,
+} from "./imageOperations";
 import { buildImageSessionOverlaySpecs } from "./sessionOverlay";
 
 export interface ImageItem {
@@ -53,6 +58,25 @@ export interface ImageItem {
   committedUrl?: string;
 }
 
+export interface ImageTransformUpdates {
+  scale?: number;
+  angle?: number;
+  left?: number;
+  top?: number;
+  opacity?: number;
+}
+
+export interface ImageViewState {
+  items: ImageItem[];
+  hasAnyImage: boolean;
+  focusedId: string | null;
+  focusedItem: ImageItem | null;
+  isToolActive: boolean;
+  isImageSelectionActive: boolean;
+  hasWorkingChanges: boolean;
+  source: "working" | "committed";
+}
+
 interface RenderImageState {
   src: string;
   left: number;
@@ -92,14 +116,7 @@ interface UpsertImageOptions {
   id?: string;
   mode?: "replace" | "add";
   addOptions?: Partial<ImageItem>;
-  fitOnAdd?: boolean;
-}
-
-interface DielineFitArea {
-  width: number;
-  height: number;
-  left: number;
-  top: number;
+  operation?: ImageOperation;
 }
 
 interface UpdateImageOptions {
@@ -370,6 +387,7 @@ export class ImageTool implements Extension {
     this.clearRenderedImages();
     this.renderProducerDisposable?.dispose();
     this.renderProducerDisposable = undefined;
+    this.emitImageStateChange();
     if (this.canvasService) {
       void this.canvasService.flushRenderFromProducers();
       this.canvasService = undefined;
@@ -932,9 +950,9 @@ export class ImageTool implements Extension {
           name: "Image",
           interaction: "session",
           commands: {
-            begin: "resetWorkingImages",
+            begin: "imageSessionReset",
             commit: "completeImages",
-            rollback: "resetWorkingImages",
+            rollback: "imageSessionReset",
           },
           session: {
             autoBegin: true,
@@ -979,6 +997,34 @@ export class ImageTool implements Extension {
     return this.normalizeItems((items || []).map((i) => ({ ...i })));
   }
 
+  private getViewItems(): ImageItem[] {
+    return this.isToolActive ? this.workingItems : this.items;
+  }
+
+  private getImageViewState(): ImageViewState {
+    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",
+    };
+  }
+
+  private emitImageStateChange() {
+    this.context?.eventBus.emit("image:state:change", this.getImageViewState());
+  }
+
   private emitWorkingChange(changedId: string | null = null) {
     this.context?.eventBus.emit("image:working:change", {
       changedId,
@@ -1026,6 +1072,8 @@ export class ImageTool implements Extension {
 
     if (!options.skipRender) {
       this.updateImages();
+    } else {
+      this.emitImageStateChange();
     }
 
     return { ok: true, id };
@@ -1034,8 +1082,9 @@ export class ImageTool implements Extension {
   private async addImageEntry(
     url: string,
     options?: Partial<ImageItem>,
-    fitOnAdd = true,
+    operation?: ImageOperation,
   ): Promise<string> {
+    this.syncToolActiveFromWorkbench();
     const id = this.generateId();
     const newItem = this.normalizeItem({
       id,
@@ -1044,13 +1093,20 @@ export class ImageTool implements Extension {
       ...options,
     } as ImageItem);
 
-    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);
@@ -1062,8 +1118,8 @@ export class ImageTool implements Extension {
     url: string,
     options: UpsertImageOptions = {},
   ): Promise<{ id: string; mode: "replace" | "add" }> {
+    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");
@@ -1072,25 +1128,35 @@ export class ImageTool implements Extension {
       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" };
   }
 
-  private addItemToWorkingSessionIfNeeded(
-    item: ImageItem,
-    sessionDirtyBeforeAdd: boolean,
-  ) {
-    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);
-  }
-
   private async updateImage(
     id: string,
     updates: Partial<ImageItem>,
@@ -1165,38 +1231,6 @@ export class ImageTool implements Extension {
     return this.canvasService.toScreenRect(frame || this.getFrameRect());
   }
 
-  private async resolveDefaultFitArea(): Promise<DielineFitArea | null> {
-    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,
-    };
-  }
-
-  private async fitImageToDefaultArea(id: string) {
-    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,
-    });
-  }
-
   private getImageObjects(): any[] {
     if (!this.canvasService) return [];
     return this.canvasService.canvas.getObjects().filter((obj: any) => {
@@ -1587,6 +1621,7 @@ export class ImageTool implements Extension {
       isImageSelectionActive: this.isImageSelectionActive,
       focusedImageId: this.focusedImageId,
     });
+    this.emitImageStateChange();
     this.canvasService.requestRenderAll();
   }
 
@@ -1594,6 +1629,40 @@ export class ImageTool implements Extension {
     return Math.max(-1, Math.min(2, value));
   }
 
+  private async setImageTransform(
+    id: string,
+    updates: ImageTransformUpdates,
+    options: UpdateImageOptions = {},
+  ) {
+    const next: Partial<ImageItem> = {};
+
+    if (Number.isFinite(updates.scale as number)) {
+      next.scale = Math.max(0.05, Number(updates.scale));
+    }
+    if (Number.isFinite(updates.angle as number)) {
+      next.angle = Number(updates.angle);
+    }
+    if (Number.isFinite(updates.left as number)) {
+      next.left = this.clampNormalized(Number(updates.left));
+    }
+    if (Number.isFinite(updates.top as number)) {
+      next.top = this.clampNormalized(Number(updates.top));
+    }
+    if (Number.isFinite(updates.opacity as number)) {
+      next.opacity = Math.max(0, Math.min(1, Number(updates.opacity)));
+    }
+
+    if (!Object.keys(next).length) return;
+    await this.updateImage(id, next, options);
+  }
+
+  private resetImageSession() {
+    this.workingItems = this.cloneItems(this.items);
+    this.hasWorkingChanges = false;
+    this.updateImages();
+    this.emitWorkingChange();
+  }
+
   private onObjectModified = (e: any) => {
     if (!this.isToolActive) return;
     const target = e?.target;
@@ -1669,10 +1738,6 @@ export class ImageTool implements Extension {
             url: replacingUrl,
             sourceUrl: replacingUrl,
             committedUrl: undefined,
-            scale: updates.scale ?? 1,
-            angle: updates.angle ?? 0,
-            left: updates.left ?? 0.5,
-            top: updates.top ?? 0.5,
           }
         : {}),
     });
@@ -1680,14 +1745,7 @@ export class ImageTool implements Extension {
     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);
-      }
     }
   }
 
@@ -1709,93 +1767,62 @@ export class ImageTool implements Extension {
     });
   }
 
-  private async refitImageToFrame(id: string) {
+  private async resolveImageSourceSize(
+    id: string,
+    src: string,
+  ): Promise<SourceSize | null> {
     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: Partial<ImageItem> = {
-      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;
+    if (obj) {
+      this.rememberSourceSize(src, obj);
+    }
+    const ensured = await this.ensureSourceSize(src);
+    if (ensured) return ensured;
+    if (!obj) return null;
 
-    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);
+    const width = Number(obj?.width || 0);
+    const height = Number(obj?.height || 0);
+    if (width <= 0 || height <= 0) return null;
+    return { width, height };
   }
 
-  private async fitImageToArea(
+  private async applyImageOperation(
     id: string,
-    area: { width: number; height: number; left?: number; top?: number },
+    operation: ImageOperation,
+    options: UpdateImageOptions = {},
   ) {
     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);
+    const source = await this.resolveImageSourceSize(id, render.src);
+    if (!source) return;
 
-    this.rememberSourceSize(render.src, obj);
-    const source = this.getSourceSize(render.src, obj);
     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: Partial<ImageItem> = {
-      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),
-      ),
-    };
+    const area =
+      operation.type === "resetTransform"
+        ? resolveImageOperationArea({ frame, viewport })
+        : resolveImageOperationArea({
+            frame,
+            viewport,
+            area: operation.area,
+          });
+    const updates = computeImageOperationUpdates({
+      frame,
+      source,
+      operation,
+      area,
+    });
 
-    if (this.isToolActive) {
+    if (target === "working" || (target === "auto" && this.isToolActive)) {
       this.updateImageInWorking(id, updates);
       return;
     }

package/src/extensions/image/commands.ts

@@ -1,4 +1,5 @@
 import type { CommandContribution } from "@pooder/core";
+import type { ImageOperation } from "./imageOperations";
 
 export function createImageCommands(tool: any): CommandContribution[] {
   return [
@@ -23,30 +24,43 @@ export function createImageCommands(tool: any): CommandContribution[] {
       },
     },
     {
-      command: "getWorkingImages",
-      id: "getWorkingImages",
-      title: "Get Working Images",
+      command: "applyImageOperation",
+      id: "applyImageOperation",
+      title: "Apply Image Operation",
+      handler: async (
+        id: string,
+        operation: ImageOperation,
+        options: Record<string, any> = {},
+      ) => {
+        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: string, updates: Record<string, any>) => {
-        tool.updateImageInWorking(id, updates);
+      command: "setImageTransform",
+      id: "setImageTransform",
+      title: "Set Image Transform",
+      handler: async (
+        id: string,
+        updates: Record<string, any>,
+        options: Record<string, any> = {},
+      ) => {
+        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();
       },
     },
     {
@@ -65,30 +79,6 @@ export function createImageCommands(tool: any): CommandContribution[] {
         return await tool.exportUserCroppedImage(options);
       },
     },
-    {
-      command: "fitImageToArea",
-      id: "fitImageToArea",
-      title: "Fit Image to Area",
-      handler: async (
-        id: string,
-        area: {
-          width: number;
-          height: number;
-          left?: number;
-          top?: number;
-        },
-      ) => {
-        await tool.fitImageToArea(id, area);
-      },
-    },
-    {
-      command: "fitImageToDefaultArea",
-      id: "fitImageToDefaultArea",
-      title: "Fit Image to Default Area",
-      handler: async (id: string) => {
-        await tool.fitImageToDefaultArea(id);
-      },
-    },
     {
       command: "focusImage",
       id: "focusImage",
@@ -105,9 +95,10 @@ export function createImageCommands(tool: any): CommandContribution[] {
       id: "removeImage",
       title: "Remove Image",
       handler: (id: string) => {
-        const removed = tool.items.find((item: any) => item.id === id);
-        const next = tool.items.filter((item: any) => item.id !== id);
-        if (next.length !== tool.items.length) {
+        const sourceItems = tool.isToolActive ? tool.workingItems : tool.items;
+        const removed = sourceItems.find((item: any) => item.id === id);
+        const next = sourceItems.filter((item: any) => item.id !== id);
+        if (next.length !== sourceItems.length) {
           tool.purgeSourceSizeCacheForItem(removed);
           if (tool.focusedImageId === id) {
             tool.setImageFocus(null, {
@@ -115,6 +106,13 @@ export function createImageCommands(tool: any): CommandContribution[] {
               skipRender: true,
             });
           }
+          if (tool.isToolActive) {
+            tool.workingItems = tool.cloneItems(next);
+            tool.hasWorkingChanges = true;
+            tool.updateImages();
+            tool.emitWorkingChange(id);
+            return;
+          }
           tool.updateConfig(next);
         }
       },
@@ -141,6 +139,13 @@ export function createImageCommands(tool: any): CommandContribution[] {
           syncCanvasSelection: true,
           skipRender: true,
         });
+        if (tool.isToolActive) {
+          tool.workingItems = [];
+          tool.hasWorkingChanges = true;
+          tool.updateImages();
+          tool.emitWorkingChange();
+          return;
+        }
         tool.updateConfig([]);
       },
     },
@@ -149,11 +154,19 @@ export function createImageCommands(tool: any): CommandContribution[] {
       id: "bringToFront",
       title: "Bring Image to Front",
       handler: (id: string) => {
-        const index = tool.items.findIndex((item: any) => 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: any) => 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);
         }
       },
@@ -163,11 +176,19 @@ export function createImageCommands(tool: any): CommandContribution[] {
       id: "sendToBack",
       title: "Send Image to Back",
       handler: (id: string) => {
-        const index = tool.items.findIndex((item: any) => item.id === id);
+        const sourceItems = tool.isToolActive ? tool.workingItems : tool.items;
+        const index = sourceItems.findIndex((item: any) => 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);
         }
       },