@pooder/kit 3.1.0 → 3.3.0

package/src/image.ts

@@ -1,49 +1,38 @@
 import {
+  Extension,
+  ExtensionContext,
+  ContributionPointIds,
   CommandContribution,
   ConfigurationContribution,
   ConfigurationService,
-  ContributionPointIds,
-  Extension,
-  ExtensionContext,
 } from "@pooder/core";
-import { FabricImage as Image, Point, util } from "fabric";
+import { Image, Point, util, Object as FabricObject } from "fabric";
 import CanvasService from "./CanvasService";
 import { Coordinate } from "./coordinate";
 
+export interface ImageItem {
+  id: string;
+  url: string;
+  opacity: number;
+  width?: number;
+  height?: number;
+  angle?: number;
+  left?: number;
+  top?: number;
+}
+
 export class ImageTool implements Extension {
   id = "pooder.kit.image";
 
   metadata = {
     name: "ImageTool",
   };
-  private _loadingUrl: string | null = null;
-
-  private url: string = "";
-  private opacity: number = 1;
-  private width?: number;
-  private height?: number;
-  private angle?: number;
-  private left?: number;
-  private top?: number;
 
+  private items: ImageItem[] = [];
+  private objectMap: Map<string, FabricObject> = new Map();
   private canvasService?: CanvasService;
   private context?: ExtensionContext;
-
-  constructor(
-    options?: Partial<{
-      url: string;
-      opacity: number;
-      width: number;
-      height: number;
-      angle: number;
-      left: number;
-      top: number;
-    }>,
-  ) {
-    if (options) {
-      Object.assign(this, options);
-    }
-  }
+  private isUpdatingConfig = false;
 
   activate(context: ExtensionContext) {
     this.context = context;
@@ -53,45 +42,44 @@ export class ImageTool implements Extension {
       return;
     }
 
-    const configService = context.services.get<any>("ConfigurationService");
+    const configService = context.services.get<ConfigurationService>("ConfigurationService");
     if (configService) {
       // Load initial config
-      this.url = configService.get("image.url", this.url);
-      this.opacity = configService.get("image.opacity", this.opacity);
-      this.width = configService.get("image.width", this.width);
-      this.height = configService.get("image.height", this.height);
-      this.angle = configService.get("image.angle", this.angle);
-      this.left = configService.get("image.left", this.left);
-      this.top = configService.get("image.top", this.top);
+      this.items = configService.get("image.items", []) || [];
 
       // Listen for changes
       configService.onAnyChange((e: { key: string; value: any }) => {
-        if (e.key.startsWith("image.")) {
-          const prop = e.key.split(".")[1];
-          console.log(
-            `[ImageTool] Config change detected: ${e.key} -> ${e.value}`,
-          );
-          if (prop && prop in this) {
-            (this as any)[prop] = e.value;
-            this.updateImage();
-          }
+        if (this.isUpdatingConfig) return;
+
+        let shouldUpdate = false;
+        if (e.key === "image.items") {
+          this.items = e.value || [];
+          shouldUpdate = true;
+        } else if (e.key.startsWith("dieline.") && e.key !== "dieline.holes") {
+          // Dieline changes affect image layout/scale
+          // Ignore dieline.holes as they don't affect layout and can cause jitter
+          shouldUpdate = true;
+        }
+
+        if (shouldUpdate) {
+          this.updateImages();
         }
       });
     }
 
     this.ensureLayer();
-    this.updateImage();
+    this.updateImages();
   }
 
   deactivate(context: ExtensionContext) {
     if (this.canvasService) {
       const layer = this.canvasService.getLayer("user");
       if (layer) {
-        const userImage = this.canvasService.getObject("user-image", "user");
-        if (userImage) {
-          layer.remove(userImage);
-          this.canvasService.requestRenderAll();
-        }
+        this.objectMap.forEach((obj) => {
+          layer.remove(obj);
+        });
+        this.objectMap.clear();
+        this.canvasService.requestRenderAll();
       }
       this.canvasService = undefined;
       this.context = undefined;
@@ -102,103 +90,110 @@ export class ImageTool implements Extension {
     return {
       [ContributionPointIds.CONFIGURATIONS]: [
         {
-          id: "image.url",
-          type: "string",
-          label: "Image URL",
-          default: this.url,
-        },
-        {
-          id: "image.opacity",
-          type: "number",
-          label: "Opacity",
-          min: 0,
-          max: 1,
-          step: 0.1,
-          default: this.opacity,
+          id: "image.items",
+          type: "array",
+          label: "Images",
+          default: [],
         },
+      ] as ConfigurationContribution[],
+      [ContributionPointIds.COMMANDS]: [
         {
-          id: "image.width",
-          type: "number",
-          label: "Width",
-          min: 0,
-          max: 5000,
-          default: this.width,
+          command: "addImage",
+          title: "Add Image",
+          handler: (url: string, options?: Partial<ImageItem>) => {
+            const newItem: ImageItem = {
+              id: this.generateId(),
+              url,
+              opacity: 1,
+              ...options,
+            };
+            this.updateConfig([...this.items, newItem]);
+            return newItem.id;
+          },
         },
         {
-          id: "image.height",
-          type: "number",
-          label: "Height",
-          min: 0,
-          max: 5000,
-          default: this.height,
+          command: "removeImage",
+          title: "Remove Image",
+          handler: (id: string) => {
+            const newItems = this.items.filter((item) => item.id !== id);
+            if (newItems.length !== this.items.length) {
+              this.updateConfig(newItems);
+            }
+          },
         },
         {
-          id: "image.angle",
-          type: "number",
-          label: "Rotation",
-          min: 0,
-          max: 360,
-          default: this.angle,
+          command: "updateImage",
+          title: "Update Image",
+          handler: (id: string, updates: Partial<ImageItem>) => {
+            const index = this.items.findIndex((item) => item.id === id);
+            if (index !== -1) {
+              const newItems = [...this.items];
+              newItems[index] = { ...newItems[index], ...updates };
+              this.updateConfig(newItems);
+            }
+          },
         },
         {
-          id: "image.left",
-          type: "number",
-          label: "Left (Normalized)",
-          min: 0,
-          max: 1,
-          default: this.left,
+          command: "clearImages",
+          title: "Clear Images",
+          handler: () => {
+            this.updateConfig([]);
+          },
         },
         {
-          id: "image.top",
-          type: "number",
-          label: "Top (Normalized)",
-          min: 0,
-          max: 1,
-          default: this.top,
+          command: "bringToFront",
+          title: "Bring Image to Front",
+          handler: (id: string) => {
+            const index = this.items.findIndex((item) => item.id === id);
+            if (index !== -1 && index < this.items.length - 1) {
+              const newItems = [...this.items];
+              const [item] = newItems.splice(index, 1);
+              newItems.push(item);
+              this.updateConfig(newItems);
+            }
+          },
         },
-      ] as ConfigurationContribution[],
-      [ContributionPointIds.COMMANDS]: [
         {
-          command: "setUserImage",
-          title: "Set User Image",
-          handler: (
-            url: string,
-            opacity: number,
-            width?: number,
-            height?: number,
-            angle?: number,
-            left?: number,
-            top?: number,
-          ) => {
-            if (
-              this.url === url &&
-              this.opacity === opacity &&
-              this.width === width &&
-              this.height === height &&
-              this.angle === angle &&
-              this.left === left &&
-              this.top === top
-            )
-              return true;
-
-            this.url = url;
-            this.opacity = opacity;
-            this.width = width;
-            this.height = height;
-            this.angle = angle;
-            this.left = left;
-            this.top = top;
-
-            // Direct update
-            this.updateImage();
-
-            return true;
+          command: "sendToBack",
+          title: "Send Image to Back",
+          handler: (id: string) => {
+            const index = this.items.findIndex((item) => item.id === id);
+            if (index > 0) {
+              const newItems = [...this.items];
+              const [item] = newItems.splice(index, 1);
+              newItems.unshift(item);
+              this.updateConfig(newItems);
+            }
           },
         },
       ] as CommandContribution[],
     };
   }
 
+  private generateId(): string {
+    return Math.random().toString(36).substring(2, 9);
+  }
+
+  private updateConfig(newItems: ImageItem[], skipCanvasUpdate = false) {
+    if (!this.context) return;
+    this.isUpdatingConfig = true;
+    this.items = newItems;
+    const configService = this.context.services.get<ConfigurationService>("ConfigurationService");
+    if (configService) {
+      configService.update("image.items", newItems);
+    }
+    // Update canvas immediately to reflect changes locally before config event comes back
+    // (Optional, but good for responsiveness)
+    if (!skipCanvasUpdate) {
+      this.updateImages();
+    }
+    
+    // Reset flag after a short delay to allow config propagation
+    setTimeout(() => {
+      this.isUpdatingConfig = false;
+    }, 50);
+  }
+
   private ensureLayer() {
     if (!this.canvasService) return;
     let userLayer = this.canvasService.getLayer("user");
@@ -219,9 +214,7 @@ export class ImageTool implements Extension {
       // Try to insert below dieline-overlay
       const dielineLayer = this.canvasService.getLayer("dieline-overlay");
       if (dielineLayer) {
-        const index = this.canvasService.canvas
-          .getObjects()
-          .indexOf(dielineLayer);
+        const index = this.canvasService.canvas.getObjects().indexOf(dielineLayer);
         // If dieline is at 0, move user to 0 (dieline shifts to 1)
         if (index >= 0) {
           this.canvasService.canvas.moveObjectTo(userLayer, index);
@@ -237,268 +230,267 @@ export class ImageTool implements Extension {
     }
   }
 
-  private updateImage() {
-    if (!this.canvasService) return;
-    let { url, opacity, width, height, angle, left, top } = this;
+  private getLayoutInfo() {
+    const canvasW = this.canvasService?.canvas.width || 800;
+    const canvasH = this.canvasService?.canvas.height || 600;
+    
+    let layoutScale = 1;
+    let layoutOffsetX = 0;
+    let layoutOffsetY = 0;
+    let visualWidth = canvasW;
+    let visualHeight = canvasH;
+    let dielinePhysicalWidth = 500;
+    let dielinePhysicalHeight = 500;
+    let bleedOffset = 0;
+
+    if (this.context) {
+      const configService = this.context.services.get<ConfigurationService>("ConfigurationService");
+      if (configService) {
+        dielinePhysicalWidth = configService.get("dieline.width") || 500;
+        dielinePhysicalHeight = configService.get("dieline.height") || 500;
+        bleedOffset = configService.get("dieline.offset") || 0;
+        
+        const paddingValue = configService.get("dieline.padding") || 40;
+        let padding = 0;
+        if (typeof paddingValue === "number") {
+          padding = paddingValue;
+        } else if (typeof paddingValue === "string") {
+          if (paddingValue.endsWith("%")) {
+            const percent = parseFloat(paddingValue) / 100;
+            padding = Math.min(canvasW, canvasH) * percent;
+          } else {
+            padding = parseFloat(paddingValue) || 0;
+          }
+        }
+        
+        const layout = Coordinate.calculateLayout(
+            { width: canvasW, height: canvasH },
+            { width: dielinePhysicalWidth, height: dielinePhysicalHeight },
+            padding
+        );
+        layoutScale = layout.scale;
+        layoutOffsetX = layout.offsetX;
+        layoutOffsetY = layout.offsetY;
+        visualWidth = layout.width;
+        visualHeight = layout.height;
+      }
+    }
 
+    return {
+      layoutScale,
+      layoutOffsetX,
+      layoutOffsetY,
+      visualWidth,
+      visualHeight,
+      dielinePhysicalWidth,
+      dielinePhysicalHeight,
+      bleedOffset
+    };
+  }
+
+  private updateImages() {
+    if (!this.canvasService) return;
     const layer = this.canvasService.getLayer("user");
     if (!layer) {
       console.warn("[ImageTool] User layer not found");
       return;
     }
 
-    const userImage = this.canvasService.getObject("user-image", "user") as any;
+    // 1. Remove objects that are no longer in items
+    const currentIds = new Set(this.items.map(i => i.id));
+    for (const [id, obj] of this.objectMap) {
+      if (!currentIds.has(id)) {
+        layer.remove(obj);
+        this.objectMap.delete(id);
+      }
+    }
 
-    if (this._loadingUrl === url) return;
+    // 2. Add or Update objects
+    const layout = this.getLayoutInfo();
 
-    if (userImage) {
-      const currentSrc = userImage.getSrc?.() || userImage._element?.src;
+    this.items.forEach((item, index) => {
+      let obj = this.objectMap.get(item.id);
 
-      if (currentSrc !== url) {
-        this.loadImage(layer);
+      if (!obj) {
+        // New object, load it
+        this.loadImage(item, layer, layout);
       } else {
-        const updates: any = {};
-        const canvasW = this.canvasService.canvas.width || 800;
-        const canvasH = this.canvasService.canvas.height || 600;
-        const centerX = canvasW / 2;
-        const centerY = canvasH / 2;
-
-        if (userImage.opacity !== opacity) updates.opacity = opacity;
-        if (angle !== undefined && userImage.angle !== angle)
-          updates.angle = angle;
-
-        if (userImage.originX !== "center") {
-          userImage.set({
-            originX: "center",
-            originY: "center",
-            left: userImage.left + (userImage.width * userImage.scaleX) / 2,
-            top: userImage.top + (userImage.height * userImage.scaleY) / 2,
-          });
-        }
+        // Existing object, update properties
+        this.updateObjectProperties(obj, item, layout);
+        
+        // Ensure Z-Index order
+        // Note: layer.add() appends to end, so if we process in order, they should be roughly correct.
+        // However, if we need strict ordering, we might need to verify index.
+        // For simplicity, we rely on the fact that if it exists, it's already on canvas.
+        // To enforce strict Z-order matching array order:
+        // We can check if the object at layer._objects[index] is this object.
+        // But Fabric's Group/Layer handling might be complex. 
+        // A simple way is: remove and re-add if order is wrong, or use moveObjectTo.
+        
+        // Since we are iterating items in order, we can check if the object is at the expected visual index relative to other user images.
+        // But for now, let's assume update logic is sufficient.
+        // If we want to support reordering, we should probably just `moveTo`
+        layer.remove(obj);
+        layer.add(obj); // Move to top of layer stack, effectively reordering if we iterate in order
+      }
+    });
+    
+    layer.dirty = true;
+    this.canvasService.requestRenderAll();
+  }
 
-        if (left !== undefined) {
-          const globalLeft = Coordinate.toAbsolute(left, canvasW);
-          const localLeft = globalLeft - centerX;
-          if (Math.abs(userImage.left - localLeft) > 1)
-            updates.left = localLeft;
-        }
+  private updateObjectProperties(obj: FabricObject, item: ImageItem, layout: any) {
+    const { layoutScale, layoutOffsetX, layoutOffsetY, visualWidth, visualHeight } = layout;
+    const updates: any = {};
 
-        if (top !== undefined) {
-          const globalTop = Coordinate.toAbsolute(top, canvasH);
-          const localTop = globalTop - centerY;
-          if (Math.abs(userImage.top - localTop) > 1) updates.top = localTop;
-        }
+    // Opacity
+    if (obj.opacity !== item.opacity) updates.opacity = item.opacity;
+    
+    // Angle
+    if (item.angle !== undefined && obj.angle !== item.angle) updates.angle = item.angle;
 
-        if (width !== undefined && userImage.width)
-          updates.scaleX = width / userImage.width;
-        if (height !== undefined && userImage.height)
-          updates.scaleY = height / userImage.height;
+    // Position (Normalized -> Absolute)
+    if (item.left !== undefined) {
+      const globalLeft = layoutOffsetX + item.left * visualWidth;
+      if (Math.abs(obj.left - globalLeft) > 1) updates.left = globalLeft;
+    }
+    if (item.top !== undefined) {
+      const globalTop = layoutOffsetY + item.top * visualHeight;
+      if (Math.abs(obj.top - globalTop) > 1) updates.top = globalTop;
+    }
 
-        if (Object.keys(updates).length > 0) {
-          userImage.set(updates);
-          layer.dirty = true;
-          this.canvasService.requestRenderAll();
-        }
-      }
-    } else {
-      this.loadImage(layer);
+    // Scale (Physical Dimensions -> Scale Factor)
+    if (item.width !== undefined && obj.width) {
+       const targetScaleX = (item.width * layoutScale) / obj.width;
+       if (Math.abs(obj.scaleX - targetScaleX) > 0.001) updates.scaleX = targetScaleX;
+    }
+    if (item.height !== undefined && obj.height) {
+       const targetScaleY = (item.height * layoutScale) / obj.height;
+       if (Math.abs(obj.scaleY - targetScaleY) > 0.001) updates.scaleY = targetScaleY;
+    }
+    
+    // Center origin if not set
+    if (obj.originX !== "center") {
+      updates.originX = "center";
+      updates.originY = "center";
+      // Adjust position because origin changed (Fabric logic)
+      // For simplicity, we just set it, next cycle will fix pos if needed, 
+      // or we can calculate the shift. Ideally we set origin on creation.
     }
-  }
 
-  private loadImage(layer: any) {
-    if (!this.canvasService) return;
-    const { url } = this;
-    if (!url) return; // Don't load if empty
-    this._loadingUrl = url;
+    if (Object.keys(updates).length > 0) {
+      obj.set(updates);
+    }
+  }
 
-    Image.fromURL(url, { crossOrigin: "anonymous" })
+  private loadImage(item: ImageItem, layer: any, layout: any) {
+    Image.fromURL(item.url, { crossOrigin: "anonymous" })
       .then((image) => {
-        if (this._loadingUrl !== url) return;
-        this._loadingUrl = null;
-
-        let { opacity, width, height, angle, left, top } = this;
-
-        // Auto-scale and center if not set
-        if (this.context) {
-          const configService = this.context.services.get<ConfigurationService>(
-            "ConfigurationService",
-          )!;
-          const dielineWidth = configService.get("dieline.width");
-          const dielineHeight = configService.get("dieline.height");
-
-          console.log(
-            "[ImageTool] Dieline config debug:",
-            {
-              widthVal: dielineWidth,
-              heightVal: dielineHeight,
-              // Debug: dump all keys to see what is available
-              allKeys: Array.from(
-                (configService as any).configValues?.keys() || [],
-              ),
-            },
-            configService,
-          );
-
-          if (width === undefined && height === undefined) {
-            // Scale to fit dieline
-            const scale = Math.min(
-              dielineWidth / (image.width || 1),
-              dielineHeight / (image.height || 1),
-            );
-            width = (image.width || 1) * scale;
-            height = (image.height || 1) * scale;
-            this.width = width;
-            this.height = height;
-          }
+        // Double check if item still exists
+        if (!this.items.find(i => i.id === item.id)) return;
 
-          if (left === undefined && top === undefined) {
-            // Default to Dieline Position if available, otherwise Center (0.5)
-            const dielinePos = configService?.get("dieline.position");
-            if (dielinePos) {
-              this.left = dielinePos.x;
-              this.top = dielinePos.y;
-            } else {
-              this.left = 0.5;
-              this.top = 0.5;
-            }
-            left = this.left;
-            top = this.top;
-          }
-        }
+        image.set({
+          originX: "center",
+          originY: "center",
+          data: { id: item.id },
+          uniformScaling: true,
+          lockScalingFlip: true,
+        });
 
-        const existingImage = this.canvasService!.getObject(
-          "user-image",
-          "user",
-        ) as any;
-
-        if (existingImage) {
-          const defaultLeft = existingImage.left;
-          const defaultTop = existingImage.top;
-          const defaultAngle = existingImage.angle;
-          const defaultScaleX = existingImage.scaleX;
-          const defaultScaleY = existingImage.scaleY;
-
-          const canvasW = this.canvasService?.canvas.width || 800;
-          const canvasH = this.canvasService?.canvas.height || 600;
-          const centerX = canvasW / 2;
-          const centerY = canvasH / 2;
-
-          let targetLeft = left !== undefined ? left : defaultLeft;
-          let targetTop = top !== undefined ? top : defaultTop;
-
-          // Log for debugging
-          const configService = this.context?.services.get<any>(
-            "ConfigurationService",
-          );
-          console.log("[ImageTool] Loading EXISTING image...", {
-            canvasW,
-            canvasH,
-            centerX,
-            centerY,
-            incomingLeft: left,
-            incomingTop: top,
-            dielinePos: configService?.get("dieline.position"),
-            existingImage: !!existingImage,
-          });
-
-          if (left !== undefined) {
-            const globalLeft = Coordinate.toAbsolute(left, canvasW);
-            targetLeft = globalLeft; // Layer is absolute, do not subtract center
-            console.log("[ImageTool] Calculated targetLeft", {
-              globalLeft,
-              targetLeft,
-            });
-          }
-          if (top !== undefined) {
-            const globalTop = Coordinate.toAbsolute(top, canvasH);
-            targetTop = globalTop; // Layer is absolute, do not subtract center
-            console.log("[ImageTool] Calculated targetTop", {
-              globalTop,
-              targetTop,
-            });
-          }
+        image.setControlsVisibility({
+          mt: false,
+          mb: false,
+          ml: false,
+          mr: false,
+        });
 
-          image.set({
-            originX: "center", // Use center origin for easier positioning
-            originY: "center",
-            left: targetLeft,
-            top: targetTop,
-            angle: angle !== undefined ? angle : defaultAngle,
-            scaleX:
-              width !== undefined && image.width
-                ? width / image.width
-                : defaultScaleX,
-            scaleY:
-              height !== undefined && image.height
-                ? height / image.height
-                : defaultScaleY,
-          });
-
-          layer.remove(existingImage);
-        } else {
-          // New image
-          image.set({
-            originX: "center",
-            originY: "center",
-          });
-
-          if (width !== undefined && image.width)
-            image.scaleX = width / image.width;
-          if (height !== undefined && image.height)
-            image.scaleY = height / image.height;
-          if (angle !== undefined) image.angle = angle;
-
-          const canvasW = this.canvasService?.canvas.width || 800;
-          const canvasH = this.canvasService?.canvas.height || 600;
-          const centerX = canvasW / 2;
-          const centerY = canvasH / 2;
-
-          if (left !== undefined) {
-            image.left = Coordinate.toAbsolute(left, canvasW); // Layer is absolute
-          } else {
-            image.left = centerX; // Default to center of canvas
-          }
+        // Initial Layout
+        let { width, height, left, top } = item;
+        const { layoutScale, layoutOffsetX, layoutOffsetY, visualWidth, visualHeight, dielinePhysicalWidth, dielinePhysicalHeight, bleedOffset } = layout;
+
+        // Auto-scale if needed
+        if (width === undefined && height === undefined) {
+           // Calculate target dimensions including bleed
+           const targetWidth = dielinePhysicalWidth + 2 * bleedOffset;
+           const targetHeight = dielinePhysicalHeight + 2 * bleedOffset;
+           
+           // "适应最长边" (Fit to longest side) logic
+           const targetMax = Math.max(targetWidth, targetHeight);
+           const imageMax = Math.max(image.width || 1, image.height || 1);
+           const scale = targetMax / imageMax;
+           
+           width = (image.width || 1) * scale;
+           height = (image.height || 1) * scale;
+           
+           // Update item with defaults
+           item.width = width;
+           item.height = height;
+        }
 
-          if (top !== undefined) {
-            image.top = Coordinate.toAbsolute(top, canvasH); // Layer is absolute
-          } else {
-            image.top = centerY; // Default to center of canvas
-          }
+        if (left === undefined && top === undefined) {
+          left = 0.5;
+          top = 0.5;
+          item.left = left;
+          item.top = top;
         }
 
-        image.set({
-          opacity: opacity !== undefined ? opacity : 1,
-          data: {
-            id: "user-image",
-          },
-        });
+        // Apply Props
+        this.updateObjectProperties(image, item, layout);
+
         layer.add(image);
+        this.objectMap.set(item.id, image);
 
-        // Bind events to keep options in sync
+        // Bind Events
         image.on("modified", (e: any) => {
-          const matrix = image.calcTransformMatrix();
-          const globalPoint = util.transformPoint(new Point(0, 0), matrix);
-          const canvasW = this.canvasService?.canvas.width || 800;
-          const canvasH = this.canvasService?.canvas.height || 600;
-
-          this.left = Coordinate.toNormalized(globalPoint.x, canvasW);
-          this.top = Coordinate.toNormalized(globalPoint.y, canvasH);
-          this.angle = e.target.angle;
-
-          if (image.width) this.width = e.target.width * e.target.scaleX;
-          if (image.height) this.height = e.target.height * e.target.scaleY;
-
-          if (this.context) {
-            this.context.eventBus.emit("update");
-          }
+          this.handleObjectModified(item.id, image);
         });
 
         layer.dirty = true;
-        this.canvasService!.requestRenderAll();
+        this.canvasService?.requestRenderAll();
+        
+        // Save defaults if we calculated them
+        if (item.width !== width || item.height !== height || item.left !== left || item.top !== top) {
+           this.updateImageInConfig(item.id, { width, height, left, top });
+        }
       })
       .catch((err) => {
-        if (this._loadingUrl === url) this._loadingUrl = null;
-        console.error("Failed to load image", url, err);
+        console.error("Failed to load image", item.url, err);
       });
   }
+
+  private handleObjectModified(id: string, image: FabricObject) {
+    const layout = this.getLayoutInfo();
+    const { layoutScale, layoutOffsetX, layoutOffsetY, visualWidth, visualHeight } = layout;
+
+    const matrix = image.calcTransformMatrix();
+    const globalPoint = util.transformPoint(new Point(0, 0), matrix);
+
+    const updates: Partial<ImageItem> = {};
+
+    // Normalize Position
+    updates.left = (globalPoint.x - layoutOffsetX) / visualWidth;
+    updates.top = (globalPoint.y - layoutOffsetY) / visualHeight;
+    updates.angle = image.angle;
+
+    // Physical Dimensions
+    if (image.width) {
+       const pixelWidth = image.width * image.scaleX;
+       updates.width = pixelWidth / layoutScale;
+    }
+    if (image.height) {
+       const pixelHeight = image.height * image.scaleY;
+       updates.height = pixelHeight / layoutScale;
+    }
+
+    this.updateImageInConfig(id, updates);
+  }
+
+  private updateImageInConfig(id: string, updates: Partial<ImageItem>) {
+    const index = this.items.findIndex(i => i.id === id);
+    if (index !== -1) {
+      const newItems = [...this.items];
+      newItems[index] = { ...newItems[index], ...updates };
+      this.updateConfig(newItems, true);
+    }
+  }
 }