@pooder/kit 3.2.0 → 3.4.0

package/dist/index.mjs

@@ -215,7 +215,7 @@ var ImageTracer = class {
    * @param options Configuration options.
    */
   static async trace(imageUrl, options = {}) {
-    var _a, _b;
+    var _a, _b, _c, _d, _e;
     const img = await this.loadImage(imageUrl);
     const width = img.width;
     const height = img.height;
@@ -226,21 +226,213 @@ var ImageTracer = class {
     if (!ctx) throw new Error("Could not get 2D context");
     ctx.drawImage(img, 0, 0);
     const imageData = ctx.getImageData(0, 0, width, height);
-    const points = this.marchingSquares(imageData, (_a = options.threshold) != null ? _a : 10);
-    let finalPoints = points;
-    if (options.scaleToWidth && options.scaleToHeight && points.length > 0) {
+    const threshold = (_a = options.threshold) != null ? _a : 10;
+    const adaptiveRadius = Math.max(
+      5,
+      Math.floor(Math.max(width, height) * 0.02)
+    );
+    const radius = (_b = options.morphologyRadius) != null ? _b : adaptiveRadius;
+    let mask = this.createMask(imageData, threshold);
+    if (radius > 0) {
+      mask = this.dilate(mask, width, height, radius);
+      mask = this.erode(mask, width, height, radius);
+      mask = this.fillHoles(mask, width, height);
+    }
+    const allContourPoints = this.traceAllContours(mask, width, height);
+    if (allContourPoints.length === 0) {
+      const w = (_c = options.scaleToWidth) != null ? _c : width;
+      const h = (_d = options.scaleToHeight) != null ? _d : height;
+      return `M 0 0 L ${w} 0 L ${w} ${h} L 0 ${h} Z`;
+    }
+    const primaryContour = allContourPoints.sort(
+      (a, b) => b.length - a.length
+    )[0];
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const p of primaryContour) {
+      if (p.x < minX) minX = p.x;
+      if (p.y < minY) minY = p.y;
+      if (p.x > maxX) maxX = p.x;
+      if (p.y > maxY) maxY = p.y;
+    }
+    const globalBounds = {
+      minX,
+      minY,
+      width: maxX - minX,
+      height: maxY - minY
+    };
+    let finalPoints = primaryContour;
+    if (options.scaleToWidth && options.scaleToHeight) {
       finalPoints = this.scalePoints(
-        points,
+        primaryContour,
         options.scaleToWidth,
-        options.scaleToHeight
+        options.scaleToHeight,
+        globalBounds
       );
     }
     const simplifiedPoints = this.douglasPeucker(
       finalPoints,
-      (_b = options.simplifyTolerance) != null ? _b : 0.5
+      (_e = options.simplifyTolerance) != null ? _e : 2
     );
     return this.pointsToSVG(simplifiedPoints);
   }
+  static createMask(imageData, threshold) {
+    const { width, height, data } = imageData;
+    const mask = new Uint8Array(width * height);
+    for (let i = 0; i < width * height; i++) {
+      const idx = i * 4;
+      const r = data[idx];
+      const g = data[idx + 1];
+      const b = data[idx + 2];
+      const a = data[idx + 3];
+      if (a > threshold && !(r > 240 && g > 240 && b > 240)) {
+        mask[i] = 1;
+      } else {
+        mask[i] = 0;
+      }
+    }
+    return mask;
+  }
+  /**
+   * Fast 1D-separable Dilation
+   */
+  static dilate(mask, width, height, radius) {
+    const horizontal = new Uint8Array(width * height);
+    for (let y = 0; y < height; y++) {
+      let count = 0;
+      for (let x = -radius; x < width; x++) {
+        if (x + radius < width && mask[y * width + x + radius]) count++;
+        if (x - radius - 1 >= 0 && mask[y * width + x - radius - 1]) count--;
+        if (x >= 0) horizontal[y * width + x] = count > 0 ? 1 : 0;
+      }
+    }
+    const vertical = new Uint8Array(width * height);
+    for (let x = 0; x < width; x++) {
+      let count = 0;
+      for (let y = -radius; y < height; y++) {
+        if (y + radius < height && horizontal[(y + radius) * width + x])
+          count++;
+        if (y - radius - 1 >= 0 && horizontal[(y - radius - 1) * width + x])
+          count--;
+        if (y >= 0) vertical[y * width + x] = count > 0 ? 1 : 0;
+      }
+    }
+    return vertical;
+  }
+  /**
+   * Fast 1D-separable Erosion
+   */
+  static erode(mask, width, height, radius) {
+    const horizontal = new Uint8Array(width * height);
+    for (let y = 0; y < height; y++) {
+      let count = 0;
+      for (let x = -radius; x < width; x++) {
+        if (x + radius < width && mask[y * width + x + radius]) count++;
+        if (x - radius - 1 >= 0 && mask[y * width + x - radius - 1]) count--;
+        if (x >= 0) {
+          const winWidth = Math.min(x + radius, width - 1) - Math.max(x - radius, 0) + 1;
+          horizontal[y * width + x] = count === winWidth ? 1 : 0;
+        }
+      }
+    }
+    const vertical = new Uint8Array(width * height);
+    for (let x = 0; x < width; x++) {
+      let count = 0;
+      for (let y = -radius; y < height; y++) {
+        if (y + radius < height && horizontal[(y + radius) * width + x])
+          count++;
+        if (y - radius - 1 >= 0 && horizontal[(y - radius - 1) * width + x])
+          count--;
+        if (y >= 0) {
+          const winHeight = Math.min(y + radius, height - 1) - Math.max(y - radius, 0) + 1;
+          vertical[y * width + x] = count === winHeight ? 1 : 0;
+        }
+      }
+    }
+    return vertical;
+  }
+  /**
+   * Fills internal holes in the binary mask using flood fill from edges.
+   */
+  static fillHoles(mask, width, height) {
+    const background = new Uint8Array(width * height);
+    const queue = [];
+    for (let x = 0; x < width; x++) {
+      if (mask[x] === 0) {
+        background[x] = 1;
+        queue.push([x, 0]);
+      }
+      const lastRow = (height - 1) * width + x;
+      if (mask[lastRow] === 0) {
+        background[lastRow] = 1;
+        queue.push([x, height - 1]);
+      }
+    }
+    for (let y = 1; y < height - 1; y++) {
+      if (mask[y * width] === 0) {
+        background[y * width] = 1;
+        queue.push([0, y]);
+      }
+      if (mask[y * width + width - 1] === 0) {
+        background[y * width + width - 1] = 1;
+        queue.push([width - 1, y]);
+      }
+    }
+    const dirs = [
+      [0, 1],
+      [0, -1],
+      [1, 0],
+      [-1, 0]
+    ];
+    let head = 0;
+    while (head < queue.length) {
+      const [cx, cy] = queue[head++];
+      for (const [dx, dy] of dirs) {
+        const nx = cx + dx;
+        const ny = cy + dy;
+        if (nx >= 0 && nx < width && ny >= 0 && ny < height) {
+          const nidx = ny * width + nx;
+          if (mask[nidx] === 0 && background[nidx] === 0) {
+            background[nidx] = 1;
+            queue.push([nx, ny]);
+          }
+        }
+      }
+    }
+    const filledMask = new Uint8Array(width * height);
+    for (let i = 0; i < width * height; i++) {
+      filledMask[i] = background[i] === 0 ? 1 : 0;
+    }
+    return filledMask;
+  }
+  /**
+   * Traces all contours in the mask with optimized start-point detection
+   */
+  static traceAllContours(mask, width, height) {
+    const visited = new Uint8Array(width * height);
+    const allContours = [];
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        const idx = y * width + x;
+        if (mask[idx] && !visited[idx]) {
+          const isLeftEdge = x === 0 || mask[idx - 1] === 0;
+          if (isLeftEdge) {
+            const contour = this.marchingSquares(
+              mask,
+              visited,
+              x,
+              y,
+              width,
+              height
+            );
+            if (contour.length > 2) {
+              allContours.push(contour);
+            }
+          }
+        }
+      }
+    }
+    return allContours;
+  }
   static loadImage(url) {
     return new Promise((resolve, reject) => {
       const img = new Image();
@@ -254,33 +446,11 @@ var ImageTracer = class {
    * Moore-Neighbor Tracing Algorithm
    * More robust for irregular shapes than simple Marching Squares walker.
    */
-  static marchingSquares(imageData, alphaThreshold) {
-    const width = imageData.width;
-    const height = imageData.height;
-    const data = imageData.data;
+  static marchingSquares(mask, visited, startX, startY, width, height) {
     const isSolid = (x, y) => {
       if (x < 0 || x >= width || y < 0 || y >= height) return false;
-      const index = (y * width + x) * 4;
-      const r = data[index];
-      const g = data[index + 1];
-      const b = data[index + 2];
-      const a = data[index + 3];
-      if (a <= alphaThreshold) return false;
-      if (r > 240 && g > 240 && b > 240) return false;
-      return true;
+      return mask[y * width + x] === 1;
     };
-    let startX = -1;
-    let startY = -1;
-    searchLoop: for (let y = 0; y < height; y++) {
-      for (let x = 0; x < width; x++) {
-        if (isSolid(x, y)) {
-          startX = x;
-          startY = y;
-          break searchLoop;
-        }
-      }
-    }
-    if (startX === -1) return [];
     const points = [];
     let cx = startX;
     let cy = startY;
@@ -299,6 +469,7 @@ var ImageTracer = class {
     let steps = 0;
     do {
       points.push({ x: cx, y: cy });
+      visited[cy * width + cx] = 1;
       let found = false;
       for (let i = 0; i < 8; i++) {
         const idx = (backtrack + 1 + i) % 8;
@@ -307,16 +478,12 @@ var ImageTracer = class {
         if (isSolid(nx, ny)) {
           cx = nx;
           cy = ny;
-          backtrack = (idx + 4) % 8;
-          backtrack = (idx + 4 + 1) % 8;
           backtrack = (idx + 4 + 1) % 8;
           found = true;
           break;
         }
       }
-      if (!found) {
-        break;
-      }
+      if (!found) break;
       steps++;
     } while ((cx !== startX || cy !== startY) && steps < maxSteps);
     return points;
@@ -365,23 +532,14 @@ var ImageTracer = class {
     dy = p.y - y;
     return dx * dx + dy * dy;
   }
-  static scalePoints(points, targetWidth, targetHeight) {
+  static scalePoints(points, targetWidth, targetHeight, bounds) {
     if (points.length === 0) return points;
-    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-    for (const p of points) {
-      if (p.x < minX) minX = p.x;
-      if (p.y < minY) minY = p.y;
-      if (p.x > maxX) maxX = p.x;
-      if (p.y > maxY) maxY = p.y;
-    }
-    const srcW = maxX - minX;
-    const srcH = maxY - minY;
-    if (srcW === 0 || srcH === 0) return points;
-    const scaleX = targetWidth / srcW;
-    const scaleY = targetHeight / srcH;
+    if (bounds.width === 0 || bounds.height === 0) return points;
+    const scaleX = targetWidth / bounds.width;
+    const scaleY = targetHeight / bounds.height;
     return points.map((p) => ({
-      x: (p.x - minX) * scaleX,
-      y: (p.y - minY) * scaleY
+      x: (p.x - bounds.minX) * scaleX,
+      y: (p.y - bounds.minY) * scaleY
     }));
   }
   static pointsToSVG(points) {
@@ -574,12 +732,25 @@ function getDielineShape(options) {
     let lugsPath = null;
     let cutsPath = null;
     holes.forEach((hole) => {
-      const lug = new paper.Path.Circle({
-        center: [hole.x, hole.y],
+      const center = new paper.Point(hole.x, hole.y);
+      const lug = hole.shape === "square" ? new paper.Path.Rectangle({
+        point: [
+          center.x - hole.outerRadius,
+          center.y - hole.outerRadius
+        ],
+        size: [hole.outerRadius * 2, hole.outerRadius * 2]
+      }) : new paper.Path.Circle({
+        center,
         radius: hole.outerRadius
       });
-      const cut = new paper.Path.Circle({
-        center: [hole.x, hole.y],
+      const cut = hole.shape === "square" ? new paper.Path.Rectangle({
+        point: [
+          center.x - hole.innerRadius,
+          center.y - hole.innerRadius
+        ],
+        size: [hole.innerRadius * 2, hole.innerRadius * 2]
+      }) : new paper.Path.Circle({
+        center,
         radius: hole.innerRadius
       });
       if (!lugsPath) {
@@ -636,7 +807,9 @@ function getDielineShape(options) {
   return mainShape;
 }
 function generateDielinePath(options) {
-  ensurePaper(options.width * 2, options.height * 2);
+  const paperWidth = options.canvasWidth || options.width * 2 || 2e3;
+  const paperHeight = options.canvasHeight || options.height * 2 || 2e3;
+  ensurePaper(paperWidth, paperHeight);
   paper.project.activeLayer.removeChildren();
   const mainShape = getDielineShape(options);
   const pathData = mainShape.pathData;
@@ -660,8 +833,9 @@ function generateMaskPath(options) {
   return pathData;
 }
 function generateBleedZonePath(options, offset) {
-  const maxDim = Math.max(options.width, options.height) + Math.abs(offset) * 4;
-  ensurePaper(maxDim, maxDim);
+  const paperWidth = options.canvasWidth || options.width * 2 || 2e3;
+  const paperHeight = options.canvasHeight || options.height * 2 || 2e3;
+  ensurePaper(paperWidth, paperHeight);
   paper.project.activeLayer.removeChildren();
   const shapeOriginal = getDielineShape(options);
   let shapeOffset;
@@ -1105,7 +1279,9 @@ var DielineTool = class {
         x: cx,
         y: cy,
         holes: absoluteHoles,
-        pathData: this.pathData
+        pathData: this.pathData,
+        canvasWidth: canvasW,
+        canvasHeight: canvasH
       });
       const insideObj = new Path(productPathData, {
         fill: insideColor,
@@ -1128,7 +1304,9 @@ var DielineTool = class {
           x: cx,
           y: cy,
           holes: absoluteHoles,
-          pathData: this.pathData
+          pathData: this.pathData,
+          canvasWidth: canvasW,
+          canvasHeight: canvasH
         },
         visualOffset
       );
@@ -1155,7 +1333,9 @@ var DielineTool = class {
         x: cx,
         y: cy,
         holes: absoluteHoles,
-        pathData: this.pathData
+        pathData: this.pathData,
+        canvasWidth: canvasW,
+        canvasHeight: canvasH
       });
       const offsetBorderObj = new Path(offsetPathData, {
         fill: null,
@@ -1179,7 +1359,9 @@ var DielineTool = class {
       x: cx,
       y: cy,
       holes: absoluteHoles,
-      pathData: this.pathData
+      pathData: this.pathData,
+      canvasWidth: canvasW,
+      canvasHeight: canvasH
     });
     const borderObj = new Path(borderPathData, {
       fill: "transparent",
@@ -1294,7 +1476,9 @@ var DielineTool = class {
       x: cx,
       y: cy,
       holes: absoluteHoles,
-      pathData: this.pathData
+      pathData: this.pathData,
+      canvasWidth: canvasW,
+      canvasHeight: canvasH
     });
     const clonedLayer = await userLayer.clone();
     const clipPath = new Path(pathData, {
@@ -1485,7 +1669,7 @@ var FilmTool = class {
 import {
   ContributionPointIds as ContributionPointIds4
 } from "@pooder/core";
-import { Circle, Group, Point } from "fabric";
+import { Circle, Group, Point, Rect as Rect2 } from "fabric";
 var HoleTool = class {
   constructor(options) {
     this.id = "pooder.kit.hole";
@@ -1591,7 +1775,7 @@ var HoleTool = class {
           command: "addHole",
           title: "Add Hole",
           handler: (x, y) => {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             if (!this.canvasService) return false;
             let normalizedX = 0.5;
             let normalizedY = 0.5;
@@ -1614,9 +1798,11 @@ var HoleTool = class {
               const lastHole = currentHoles[currentHoles.length - 1];
               const innerRadius = (_b = lastHole == null ? void 0 : lastHole.innerRadius) != null ? _b : 15;
               const outerRadius = (_c = lastHole == null ? void 0 : lastHole.outerRadius) != null ? _c : 25;
+              const shape = (_d = lastHole == null ? void 0 : lastHole.shape) != null ? _d : "circle";
               const newHole = {
                 x: normalizedX,
                 y: normalizedY,
+                shape,
                 innerRadius,
                 outerRadius
               };
@@ -1648,6 +1834,7 @@ var HoleTool = class {
     if (!this.handleDielineChange) {
       this.handleDielineChange = (geometry) => {
         this.currentGeometry = geometry;
+        this.redraw();
         const changed = this.enforceConstraints();
         if (changed) {
           this.syncHolesToDieline();
@@ -1761,10 +1948,16 @@ var HoleTool = class {
   }
   syncHolesFromCanvas() {
     if (!this.canvasService) return;
-    const objects = this.canvasService.canvas.getObjects().filter((obj) => {
-      var _a;
-      return ((_a = obj.data) == null ? void 0 : _a.type) === "hole-marker";
-    });
+    const objects = this.canvasService.canvas.getObjects().filter(
+      (obj) => {
+        var _a;
+        return ((_a = obj.data) == null ? void 0 : _a.type) === "hole-marker" || obj.name === "hole-marker";
+      }
+    );
+    if (objects.length === 0 && this.holes.length > 0) {
+      console.warn("HoleTool: No markers found on canvas to sync from");
+      return;
+    }
     objects.sort(
       (a, b) => {
         var _a, _b, _c, _d;
@@ -1776,6 +1969,13 @@ var HoleTool = class {
       const original = this.holes[i];
       const newAbsX = obj.left;
       const newAbsY = obj.top;
+      if (isNaN(newAbsX) || isNaN(newAbsY)) {
+        console.error("HoleTool: Invalid marker coordinates", {
+          newAbsX,
+          newAbsY
+        });
+        return original;
+      }
       const scale = ((_a = this.currentGeometry) == null ? void 0 : _a.scale) || 1;
       const unit = ((_b = this.currentGeometry) == null ? void 0 : _b.unit) || "mm";
       const unitScale = Coordinate.convertUnit(1, "mm", unit);
@@ -1832,7 +2032,11 @@ var HoleTool = class {
           offsetY: (newAbsY - by) / scale / unitScale,
           // Clear direct coordinates if we use anchor
           x: void 0,
-          y: void 0
+          y: void 0,
+          // Ensure other properties are preserved
+          innerRadius: original.innerRadius,
+          outerRadius: original.outerRadius,
+          shape: original.shape || "circle"
         };
       }
       let normalizedX = 0.5;
@@ -1852,9 +2056,13 @@ var HoleTool = class {
         ...original,
         x: normalizedX,
         y: normalizedY,
-        // Ensure radii are preserved
+        // Clear offsets if we are using direct normalized coordinates
+        offsetX: void 0,
+        offsetY: void 0,
+        // Ensure other properties are preserved
         innerRadius: (_c = original == null ? void 0 : original.innerRadius) != null ? _c : 15,
-        outerRadius: (_d = original == null ? void 0 : original.outerRadius) != null ? _d : 25
+        outerRadius: (_d = original == null ? void 0 : original.outerRadius) != null ? _d : 25,
+        shape: (original == null ? void 0 : original.shape) || "circle"
       };
     });
     this.holes = newHoles;
@@ -1912,7 +2120,16 @@ var HoleTool = class {
         { width: geometry.width, height: geometry.height }
         // Use geometry dims instead of canvas
       );
-      const innerCircle = new Circle({
+      const isSquare = hole.shape === "square";
+      const innerMarker = isSquare ? new Rect2({
+        width: visualInnerRadius * 2,
+        height: visualInnerRadius * 2,
+        fill: "transparent",
+        stroke: "red",
+        strokeWidth: 2,
+        originX: "center",
+        originY: "center"
+      }) : new Circle({
         radius: visualInnerRadius,
         fill: "transparent",
         stroke: "red",
@@ -1920,7 +2137,16 @@ var HoleTool = class {
         originX: "center",
         originY: "center"
       });
-      const outerCircle = new Circle({
+      const outerMarker = isSquare ? new Rect2({
+        width: visualOuterRadius * 2,
+        height: visualOuterRadius * 2,
+        fill: "transparent",
+        stroke: "#666",
+        strokeWidth: 1,
+        strokeDashArray: [5, 5],
+        originX: "center",
+        originY: "center"
+      }) : new Circle({
         radius: visualOuterRadius,
         fill: "transparent",
         stroke: "#666",
@@ -1929,7 +2155,7 @@ var HoleTool = class {
         originX: "center",
         originY: "center"
       });
-      const holeGroup = new Group([outerCircle, innerCircle], {
+      const holeGroup = new Group([outerMarker, innerMarker], {
         left: pos.x,
         top: pos.y,
         originX: "center",
@@ -2073,6 +2299,7 @@ var ImageTool = class {
     };
     this.items = [];
     this.objectMap = /* @__PURE__ */ new Map();
+    this.loadResolvers = /* @__PURE__ */ new Map();
     this.isUpdatingConfig = false;
   }
   activate(context) {
@@ -2082,19 +2309,15 @@ var ImageTool = class {
       console.warn("CanvasService not found for ImageTool");
       return;
     }
-    const configService = context.services.get("ConfigurationService");
+    const configService = context.services.get(
+      "ConfigurationService"
+    );
     if (configService) {
       this.items = configService.get("image.items", []) || [];
       configService.onAnyChange((e) => {
         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") {
-          shouldUpdate = true;
-        }
-        if (shouldUpdate) {
           this.updateImages();
         }
       });
@@ -2130,15 +2353,39 @@ var ImageTool = class {
         {
           command: "addImage",
           title: "Add Image",
-          handler: (url, options) => {
+          handler: async (url, options) => {
+            const id = this.generateId();
             const newItem = {
-              id: this.generateId(),
+              id,
               url,
               opacity: 1,
               ...options
             };
+            const promise = new Promise((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, area) => {
+            var _a, _b;
+            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: (_a = area.left) != null ? _a : 0.5,
+                top: (_b = area.top) != null ? _b : 0.5
+              });
+            }
           }
         },
         {
@@ -2206,7 +2453,9 @@ var ImageTool = class {
     if (!this.context) return;
     this.isUpdatingConfig = true;
     this.items = newItems;
-    const configService = this.context.services.get("ConfigurationService");
+    const configService = this.context.services.get(
+      "ConfigurationService"
+    );
     if (configService) {
       configService.update("image.items", newItems);
     }
@@ -2252,39 +2501,12 @@ var ImageTool = class {
     var _a, _b;
     const canvasW = ((_a = this.canvasService) == null ? void 0 : _a.canvas.width) || 800;
     const canvasH = ((_b = this.canvasService) == null ? void 0 : _b.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");
-      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
     };
   }
   updateImages() {
@@ -2307,8 +2529,8 @@ var ImageTool = class {
       if (!obj) {
         this.loadImage(item, layer, layout);
       } else {
-        this.updateObjectProperties(obj, item, layout);
         layer.remove(obj);
+        this.updateObjectProperties(obj, item, layout);
         layer.add(obj);
       }
     });
@@ -2316,10 +2538,17 @@ var ImageTool = class {
     this.canvasService.requestRenderAll();
   }
   updateObjectProperties(obj, item, layout) {
-    const { layoutScale, layoutOffsetX, layoutOffsetY, visualWidth, visualHeight } = layout;
+    const {
+      layoutScale,
+      layoutOffsetX,
+      layoutOffsetY,
+      visualWidth,
+      visualHeight
+    } = layout;
     const updates = {};
     if (obj.opacity !== item.opacity) updates.opacity = item.opacity;
-    if (item.angle !== void 0 && obj.angle !== item.angle) updates.angle = item.angle;
+    if (item.angle !== void 0 && obj.angle !== item.angle)
+      updates.angle = item.angle;
     if (item.left !== void 0) {
       const globalLeft = layoutOffsetX + item.left * visualWidth;
       if (Math.abs(obj.left - globalLeft) > 1) updates.left = globalLeft;
@@ -2328,13 +2557,12 @@ var ImageTool = class {
       const globalTop = layoutOffsetY + item.top * visualHeight;
       if (Math.abs(obj.top - globalTop) > 1) updates.top = globalTop;
     }
-    if (item.width !== void 0 && obj.width) {
-      const targetScaleX = item.width * layoutScale / obj.width;
-      if (Math.abs(obj.scaleX - targetScaleX) > 1e-3) updates.scaleX = targetScaleX;
-    }
-    if (item.height !== void 0 && obj.height) {
-      const targetScaleY = item.height * layoutScale / obj.height;
-      if (Math.abs(obj.scaleY - targetScaleY) > 1e-3) updates.scaleY = targetScaleY;
+    if (item.scale !== void 0) {
+      const targetScale = item.scale * layoutScale;
+      if (Math.abs(obj.scaleX - targetScale) > 1e-3) {
+        updates.scaleX = targetScale;
+        updates.scaleY = targetScale;
+      }
     }
     if (obj.originX !== "center") {
       updates.originX = "center";
@@ -2342,6 +2570,7 @@ var ImageTool = class {
     }
     if (Object.keys(updates).length > 0) {
       obj.set(updates);
+      obj.setCoords();
     }
   }
   loadImage(item, layer, layout) {
@@ -2351,24 +2580,20 @@ var ImageTool = class {
       image.set({
         originX: "center",
         originY: "center",
-        data: { id: item.id }
+        data: { id: item.id },
+        uniformScaling: true,
+        lockScalingFlip: true
       });
-      let { width, height, left, top } = item;
-      const { layoutScale, layoutOffsetX, layoutOffsetY, visualWidth, visualHeight, dielinePhysicalWidth, dielinePhysicalHeight } = layout;
-      if (width === void 0 && height === void 0) {
-        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;
-        }
-        item.width = width;
-        item.height = height;
+      image.setControlsVisibility({
+        mt: false,
+        mb: false,
+        ml: false,
+        mr: false
+      });
+      let { scale, left, top } = item;
+      if (scale === void 0) {
+        scale = 1;
+        item.scale = scale;
       }
       if (left === void 0 && top === void 0) {
         left = 0.5;
@@ -2379,13 +2604,18 @@ var ImageTool = class {
       this.updateObjectProperties(image, item, layout);
       layer.add(image);
       this.objectMap.set(item.id, image);
+      const resolver = this.loadResolvers.get(item.id);
+      if (resolver) {
+        resolver();
+        this.loadResolvers.delete(item.id);
+      }
       image.on("modified", (e) => {
         this.handleObjectModified(item.id, image);
       });
       layer.dirty = true;
       (_a = this.canvasService) == null ? void 0 : _a.requestRenderAll();
-      if (item.width !== width || item.height !== height || item.left !== left || item.top !== top) {
-        this.updateImageInConfig(item.id, { width, height, left, top });
+      if (item.scale !== scale || item.left !== left || item.top !== top) {
+        this.updateImageInConfig(item.id, { scale, left, top }, true);
       }
     }).catch((err) => {
       console.error("Failed to load image", item.url, err);
@@ -2393,29 +2623,28 @@ var ImageTool = class {
   }
   handleObjectModified(id, image) {
     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 Point2(0, 0), matrix);
     const updates = {};
     updates.left = (globalPoint.x - layoutOffsetX) / visualWidth;
     updates.top = (globalPoint.y - layoutOffsetY) / visualHeight;
     updates.angle = image.angle;
-    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);
+    updates.scale = image.scaleX / layoutScale;
+    this.updateImageInConfig(id, updates, true);
   }
-  updateImageInConfig(id, updates) {
+  updateImageInConfig(id, updates, 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);
     }
   }
 };