@pooder/kit 3.2.0 → 3.4.0

package/src/image.ts

@@ -14,8 +14,7 @@ export interface ImageItem {
   id: string;
   url: string;
   opacity: number;
-  width?: number;
-  height?: number;
+  scale?: number;
   angle?: number;
   left?: number;
   top?: number;
@@ -30,6 +29,7 @@ export class ImageTool implements Extension {
 
   private items: ImageItem[] = [];
   private objectMap: Map<string, FabricObject> = new Map();
+  private loadResolvers: Map<string, () => void> = new Map();
   private canvasService?: CanvasService;
   private context?: ExtensionContext;
   private isUpdatingConfig = false;
@@ -42,7 +42,9 @@ export class ImageTool implements Extension {
       return;
     }
 
-    const configService = context.services.get<ConfigurationService>("ConfigurationService");
+    const configService = context.services.get<ConfigurationService>(
+      "ConfigurationService",
+    );
     if (configService) {
       // Load initial config
       this.items = configService.get("image.items", []) || [];
@@ -51,17 +53,8 @@ export class ImageTool implements Extension {
       configService.onAnyChange((e: { key: string; value: any }) => {
         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();
         }
       });
@@ -100,15 +93,43 @@ export class ImageTool implements Extension {
         {
           command: "addImage",
           title: "Add Image",
-          handler: (url: string, options?: Partial<ImageItem>) => {
+          handler: async (url: string, options?: Partial<ImageItem>) => {
+            const id = this.generateId();
             const newItem: ImageItem = {
-              id: this.generateId(),
+              id,
               url,
               opacity: 1,
               ...options,
             };
+
+            const promise = new Promise<string>((resolve) => {
+              this.loadResolvers.set(id, () => resolve(id));
+            });
+
             this.updateConfig([...this.items, newItem]);
-            return newItem.id;
+            return promise;
+          },
+        },
+        {
+          command: "fitImageToArea",
+          title: "Fit Image to Area",
+          handler: (
+            id: string,
+            area: { width: number; height: number; left?: number; top?: number },
+          ) => {
+            const item = this.items.find((i) => i.id === id);
+            const obj = this.objectMap.get(id);
+            if (item && obj && obj.width && obj.height) {
+              const scale = Math.max(
+                area.width / obj.width,
+                area.height / obj.height,
+              );
+              this.updateImageInConfig(id, {
+                scale,
+                left: area.left ?? 0.5,
+                top: area.top ?? 0.5,
+              });
+            }
           },
         },
         {
@@ -178,7 +199,9 @@ export class ImageTool implements Extension {
     if (!this.context) return;
     this.isUpdatingConfig = true;
     this.items = newItems;
-    const configService = this.context.services.get<ConfigurationService>("ConfigurationService");
+    const configService = this.context.services.get<ConfigurationService>(
+      "ConfigurationService",
+    );
     if (configService) {
       configService.update("image.items", newItems);
     }
@@ -187,7 +210,7 @@ export class ImageTool implements Extension {
     if (!skipCanvasUpdate) {
       this.updateImages();
     }
-    
+
     // Reset flag after a short delay to allow config propagation
     setTimeout(() => {
       this.isUpdatingConfig = false;
@@ -214,7 +237,9 @@ 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);
@@ -233,43 +258,13 @@ export class ImageTool implements Extension {
   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;
-
-    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;
-        const padding = configService.get("dieline.padding") || 40;
-        
-        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
+      layoutScale: 1,
+      layoutOffsetX: 0,
+      layoutOffsetY: 0,
+      visualWidth: canvasW,
+      visualHeight: canvasH,
     };
   }
 
@@ -282,7 +277,7 @@ export class ImageTool implements Extension {
     }
 
     // 1. Remove objects that are no longer in items
-    const currentIds = new Set(this.items.map(i => i.id));
+    const currentIds = new Set(this.items.map((i) => i.id));
     for (const [id, obj] of this.objectMap) {
       if (!currentIds.has(id)) {
         layer.remove(obj);
@@ -301,38 +296,38 @@ export class ImageTool implements Extension {
         this.loadImage(item, layer, layout);
       } else {
         // 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`
+        // We remove and re-add to ensure coordinates are correctly converted 
+        // from absolute (updateObjectProperties) to relative (layer.add)
         layer.remove(obj);
-        layer.add(obj); // Move to top of layer stack, effectively reordering if we iterate in order
+        this.updateObjectProperties(obj, item, layout);
+        layer.add(obj);
       }
     });
-    
+
     layer.dirty = true;
     this.canvasService.requestRenderAll();
   }
 
-  private updateObjectProperties(obj: FabricObject, item: ImageItem, layout: any) {
-    const { layoutScale, layoutOffsetX, layoutOffsetY, visualWidth, visualHeight } = layout;
+  private updateObjectProperties(
+    obj: FabricObject,
+    item: ImageItem,
+    layout: any,
+  ) {
+    const {
+      layoutScale,
+      layoutOffsetX,
+      layoutOffsetY,
+      visualWidth,
+      visualHeight,
+    } = layout;
     const updates: any = {};
 
     // Opacity
     if (obj.opacity !== item.opacity) updates.opacity = item.opacity;
-    
+
     // Angle
-    if (item.angle !== undefined && obj.angle !== item.angle) updates.angle = item.angle;
+    if (item.angle !== undefined && obj.angle !== item.angle)
+      updates.angle = item.angle;
 
     // Position (Normalized -> Absolute)
     if (item.left !== undefined) {
@@ -344,27 +339,27 @@ export class ImageTool implements Extension {
       if (Math.abs(obj.top - globalTop) > 1) updates.top = globalTop;
     }
 
-    // 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;
+    // Scale
+    if (item.scale !== undefined) {
+      const targetScale = item.scale * layoutScale;
+      if (Math.abs(obj.scaleX - targetScale) > 0.001) {
+        updates.scaleX = targetScale;
+        updates.scaleY = targetScale;
+      }
     }
-    
+
     // 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, 
+      // 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.
     }
 
     if (Object.keys(updates).length > 0) {
       obj.set(updates);
+      obj.setCoords();
     }
   }
 
@@ -372,36 +367,29 @@ export class ImageTool implements Extension {
     Image.fromURL(item.url, { crossOrigin: "anonymous" })
       .then((image) => {
         // Double check if item still exists
-        if (!this.items.find(i => i.id === item.id)) return;
+        if (!this.items.find((i) => i.id === item.id)) return;
 
         image.set({
           originX: "center",
           originY: "center",
           data: { id: item.id },
+          uniformScaling: true,
+          lockScalingFlip: true,
+        });
+
+        image.setControlsVisibility({
+          mt: false,
+          mb: false,
+          ml: false,
+          mr: false,
         });
 
         // Initial Layout
-        let { width, height, left, top } = item;
-        const { layoutScale, layoutOffsetX, layoutOffsetY, visualWidth, visualHeight, dielinePhysicalWidth, dielinePhysicalHeight } = layout;
-
-        // Auto-scale if needed
-        if (width === undefined && height === undefined) {
-           const imgAspect = (image.width || 1) / (image.height || 1);
-           const dielineAspect = dielinePhysicalWidth / dielinePhysicalHeight;
-           
-           if (imgAspect > dielineAspect) {
-             const w = dielinePhysicalWidth;
-             width = w;
-             height = w / imgAspect;
-           } else {
-             const h = dielinePhysicalHeight;
-             height = h;
-             width = h * imgAspect;
-           }
-           
-           // Update item with defaults
-           item.width = width;
-           item.height = height;
+        let { scale, left, top } = item;
+
+        if (scale === undefined) {
+          scale = 1; // Default scale if not provided and not fitted yet
+          item.scale = scale;
         }
 
         if (left === undefined && top === undefined) {
@@ -417,6 +405,13 @@ export class ImageTool implements Extension {
         layer.add(image);
         this.objectMap.set(item.id, image);
 
+        // Notify addImage that load is complete
+        const resolver = this.loadResolvers.get(item.id);
+        if (resolver) {
+          resolver();
+          this.loadResolvers.delete(item.id);
+        }
+
         // Bind Events
         image.on("modified", (e: any) => {
           this.handleObjectModified(item.id, image);
@@ -424,10 +419,10 @@ export class ImageTool implements Extension {
 
         layer.dirty = true;
         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 });
+
+        // Save defaults if we set them
+        if (item.scale !== scale || item.left !== left || item.top !== top) {
+          this.updateImageInConfig(item.id, { scale, left, top }, true);
         }
       })
       .catch((err) => {
@@ -437,7 +432,13 @@ export class ImageTool implements Extension {
 
   private handleObjectModified(id: string, image: FabricObject) {
     const layout = this.getLayoutInfo();
-    const { layoutScale, layoutOffsetX, layoutOffsetY, visualWidth, visualHeight } = layout;
+    const {
+      layoutScale,
+      layoutOffsetX,
+      layoutOffsetY,
+      visualWidth,
+      visualHeight,
+    } = layout;
 
     const matrix = image.calcTransformMatrix();
     const globalPoint = util.transformPoint(new Point(0, 0), matrix);
@@ -449,25 +450,22 @@ export class ImageTool implements Extension {
     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;
-    }
+    // Scale
+    updates.scale = image.scaleX / layoutScale;
 
-    this.updateImageInConfig(id, updates);
+    this.updateImageInConfig(id, updates, true);
   }
 
-  private updateImageInConfig(id: string, updates: Partial<ImageItem>) {
-    const index = this.items.findIndex(i => i.id === id);
+  private updateImageInConfig(
+    id: string,
+    updates: Partial<ImageItem>,
+    skipCanvasUpdate = false,
+  ) {
+    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);
+      this.updateConfig(newItems, skipCanvasUpdate);
     }
   }
 }