@pooder/kit 3.3.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) {
@@ -2141,6 +2299,7 @@ var ImageTool = class {
     };
     this.items = [];
     this.objectMap = /* @__PURE__ */ new Map();
+    this.loadResolvers = /* @__PURE__ */ new Map();
     this.isUpdatingConfig = false;
   }
   activate(context) {
@@ -2150,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();
         }
       });
@@ -2198,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
+              });
+            }
           }
         },
         {
@@ -2274,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);
     }
@@ -2320,53 +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;
-    let bleedOffset = 0;
-    if (this.context) {
-      const configService = this.context.services.get("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
+      layoutScale: 1,
+      layoutOffsetX: 0,
+      layoutOffsetY: 0,
+      visualWidth: canvasW,
+      visualHeight: canvasH
     };
   }
   updateImages() {
@@ -2389,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);
       }
     });
@@ -2398,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;
@@ -2410,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";
@@ -2424,6 +2570,7 @@ var ImageTool = class {
     }
     if (Object.keys(updates).length > 0) {
       obj.set(updates);
+      obj.setCoords();
     }
   }
   loadImage(item, layer, layout) {
@@ -2443,18 +2590,10 @@ var ImageTool = class {
         ml: false,
         mr: false
       });
-      let { width, height, left, top } = item;
-      const { layoutScale, layoutOffsetX, layoutOffsetY, visualWidth, visualHeight, dielinePhysicalWidth, dielinePhysicalHeight, bleedOffset } = layout;
-      if (width === void 0 && height === void 0) {
-        const targetWidth = dielinePhysicalWidth + 2 * bleedOffset;
-        const targetHeight = dielinePhysicalHeight + 2 * bleedOffset;
-        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;
-        item.width = width;
-        item.height = height;
+      let { scale, left, top } = item;
+      if (scale === void 0) {
+        scale = 1;
+        item.scale = scale;
       }
       if (left === void 0 && top === void 0) {
         left = 0.5;
@@ -2465,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);
@@ -2479,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);
     }
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pooder/kit",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "description": "Standard plugins for Pooder editor",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",