@pooder/kit 5.2.0 → 5.3.1

package/package.json

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

package/src/extensions/dieline.ts

@@ -37,6 +37,8 @@ export interface DielineGeometry {
   scale?: number;
   strokeWidth?: number;
   pathData?: string;
+  customSourceWidthPx?: number;
+  customSourceHeightPx?: number;
 }
 
 export interface LineStyle {
@@ -61,6 +63,8 @@ export interface DielineState {
   showBleedLines: boolean;
   features: DielineFeature[];
   pathData?: string;
+  customSourceWidthPx?: number;
+  customSourceHeightPx?: number;
 }
 
 const IMAGE_OBJECT_LAYER_ID = "image.user";
@@ -193,6 +197,20 @@ export class DielineTool implements Extension {
       );
       s.features = configService.get("dieline.features", s.features);
       s.pathData = configService.get("dieline.pathData", s.pathData);
+      const sourceWidth = Number(
+        configService.get("dieline.customSourceWidthPx", 0),
+      );
+      const sourceHeight = Number(
+        configService.get("dieline.customSourceHeightPx", 0),
+      );
+      s.customSourceWidthPx =
+        Number.isFinite(sourceWidth) && sourceWidth > 0
+          ? sourceWidth
+          : undefined;
+      s.customSourceHeightPx =
+        Number.isFinite(sourceHeight) && sourceHeight > 0
+          ? sourceHeight
+          : undefined;
 
       // Listen for changes
       configService.onAnyChange((e: { key: string; value: any }) => {
@@ -262,6 +280,18 @@ export class DielineTool implements Extension {
             case "dieline.pathData":
               s.pathData = e.value;
               break;
+            case "dieline.customSourceWidthPx":
+              s.customSourceWidthPx =
+                Number.isFinite(Number(e.value)) && Number(e.value) > 0
+                  ? Number(e.value)
+                  : undefined;
+              break;
+            case "dieline.customSourceHeightPx":
+              s.customSourceHeightPx =
+                Number.isFinite(Number(e.value)) && Number(e.value) > 0
+                  ? Number(e.value)
+                  : undefined;
+              break;
           }
           this.updateDieline();
         }
@@ -433,10 +463,26 @@ export class DielineTool implements Extension {
         {
           command: "detectEdge",
           title: "Detect Edge from Image",
-          handler: async (imageUrl: string, options?: any) => {
+          handler: async (
+            imageUrl: string,
+            options?: {
+              expand?: number;
+              smoothing?: boolean;
+              simplifyTolerance?: number;
+              threshold?: number;
+              debug?: boolean;
+            },
+          ) => {
             try {
               const detectOptions = options || {};
               const debug = detectOptions.debug === true;
+              const tracerOptions = {
+                expand: detectOptions.expand ?? 0,
+                smoothing: detectOptions.smoothing ?? true,
+                simplifyTolerance: detectOptions.simplifyTolerance ?? 2,
+                threshold: detectOptions.threshold,
+                debug,
+              };
 
               // Helper to get image dimensions
               const loadImage = (url: string): Promise<HTMLImageElement> => {
@@ -451,7 +497,7 @@ export class DielineTool implements Extension {
 
               const [img, traced] = await Promise.all([
                 loadImage(imageUrl),
-                ImageTracer.traceWithBounds(imageUrl, detectOptions),
+                ImageTracer.traceWithBounds(imageUrl, tracerOptions),
               ]);
               const { pathData, baseBounds, bounds } = traced;
 
@@ -463,21 +509,8 @@ export class DielineTool implements Extension {
                   expandedBounds: bounds,
                   currentDielineWidth: s.width,
                   currentDielineHeight: s.height,
-                  options: {
-                    expand: detectOptions.expand ?? 0,
-                    morphologyRadius: detectOptions.morphologyRadius,
-                    connectRadiusMax: detectOptions.connectRadiusMax,
-                    smoothing: detectOptions.smoothing,
-                    simplifyTolerance: detectOptions.simplifyTolerance,
-                    threshold: detectOptions.threshold,
-                    maskMode: detectOptions.maskMode,
-                    whiteThreshold: detectOptions.whiteThreshold,
-                    alphaOpaqueCutoff: detectOptions.alphaOpaqueCutoff,
-                    noChannels: detectOptions.noChannels,
-                    componentMode: detectOptions.componentMode,
-                    minComponentArea: detectOptions.minComponentArea,
-                    forceConnected: detectOptions.forceConnected,
-                  },
+                  options: tracerOptions,
+                  strategy: "single-connected-silhouette",
                 });
               }
 
@@ -653,6 +686,8 @@ export class DielineTool implements Extension {
       y: cy,
       features: cutFeatures,
       pathData: this.state.pathData,
+      customSourceWidthPx: this.state.customSourceWidthPx,
+      customSourceHeightPx: this.state.customSourceHeightPx,
     });
     const mask = new Path(maskPathData, {
       fill: outsideColor,
@@ -680,6 +715,8 @@ export class DielineTool implements Extension {
         y: cy,
         features: cutFeatures,
         pathData: this.state.pathData,
+        customSourceWidthPx: this.state.customSourceWidthPx,
+        customSourceHeightPx: this.state.customSourceHeightPx,
         canvasWidth: canvasW,
         canvasHeight: canvasH,
       });
@@ -706,6 +743,8 @@ export class DielineTool implements Extension {
           y: cy,
           features: cutFeatures,
           pathData: this.state.pathData,
+          customSourceWidthPx: this.state.customSourceWidthPx,
+          customSourceHeightPx: this.state.customSourceHeightPx,
           canvasWidth: canvasW,
           canvasHeight: canvasH,
         },
@@ -718,6 +757,8 @@ export class DielineTool implements Extension {
           y: cy,
           features: cutFeatures,
           pathData: this.state.pathData,
+          customSourceWidthPx: this.state.customSourceWidthPx,
+          customSourceHeightPx: this.state.customSourceHeightPx,
           canvasWidth: canvasW,
           canvasHeight: canvasH,
         },
@@ -749,6 +790,8 @@ export class DielineTool implements Extension {
         y: cy,
         features: cutFeatures,
         pathData: this.state.pathData,
+        customSourceWidthPx: this.state.customSourceWidthPx,
+        customSourceHeightPx: this.state.customSourceHeightPx,
         canvasWidth: canvasW,
         canvasHeight: canvasH,
       });
@@ -778,6 +821,8 @@ export class DielineTool implements Extension {
       y: cy,
       features: absoluteFeatures,
       pathData: this.state.pathData,
+      customSourceWidthPx: this.state.customSourceWidthPx,
+      customSourceHeightPx: this.state.customSourceHeightPx,
       canvasWidth: canvasW,
       canvasHeight: canvasH,
     });
@@ -835,6 +880,8 @@ export class DielineTool implements Extension {
       ...sceneGeometry,
       strokeWidth: this.state.mainLine.width,
       pathData: this.state.pathData,
+      customSourceWidthPx: this.state.customSourceWidthPx,
+      customSourceHeightPx: this.state.customSourceHeightPx,
     } as DielineGeometry;
   }
 
@@ -901,6 +948,8 @@ export class DielineTool implements Extension {
       y: cy,
       features: cutFeatures,
       pathData,
+      customSourceWidthPx: this.state.customSourceWidthPx,
+      customSourceHeightPx: this.state.customSourceHeightPx,
       canvasWidth: canvasW,
       canvasHeight: canvasH,
     });

package/src/extensions/geometry.ts

@@ -35,6 +35,8 @@ export interface GeometryOptions {
   y: number;
   features: Array<DielineFeature>;
   pathData?: string;
+  customSourceWidthPx?: number;
+  customSourceHeightPx?: number;
   canvasWidth?: number;
   canvasHeight?: number;
 }
@@ -191,7 +193,17 @@ function selectOuterChain(args: {
  * Creates the base dieline shape (Rect/Circle/Ellipse/Custom)
  */
 function createBaseShape(options: GeometryOptions): paper.PathItem {
-  const { shape, width, height, radius, x, y, pathData } = options;
+  const {
+    shape,
+    width,
+    height,
+    radius,
+    x,
+    y,
+    pathData,
+    customSourceWidthPx,
+    customSourceHeightPx,
+  } = options;
   const center = new paper.Point(x, y);
 
   if (shape === "rect") {
@@ -220,16 +232,37 @@ function createBaseShape(options: GeometryOptions): paper.PathItem {
           single.pathData = pathData;
           return single;
         })();
-    // Align center
-    path.position = center;
+    const sourceWidth = Number(customSourceWidthPx ?? 0);
+    const sourceHeight = Number(customSourceHeightPx ?? 0);
+    if (
+      Number.isFinite(sourceWidth) &&
+      Number.isFinite(sourceHeight) &&
+      sourceWidth > 0 &&
+      sourceHeight > 0 &&
+      width > 0 &&
+      height > 0
+    ) {
+      // Preserve original detect-space offset/expand by mapping source image
+      // coordinates directly into the target dieline frame.
+      const targetLeft = x - width / 2;
+      const targetTop = y - height / 2;
+      path.scale(width / sourceWidth, height / sourceHeight, new paper.Point(0, 0));
+      path.translate(new paper.Point(targetLeft, targetTop));
+      return path;
+    }
+
     if (
       width > 0 &&
       height > 0 &&
       path.bounds.width > 0 &&
       path.bounds.height > 0
     ) {
+      // Fallback for malformed custom-path metadata.
+      path.position = center;
       path.scale(width / path.bounds.width, height / path.bounds.height);
+      return path;
     }
+    path.position = center;
     return path;
   } else {
     return new paper.Path.Rectangle({

package/src/extensions/image.ts

@@ -1794,6 +1794,8 @@ export class ImageTool implements Extension {
         this.normalizeItem({
           ...item,
           url,
+          // Keep original source for next image-tool session editing,
+          // and use committedUrl as non-image-tools render source.
           sourceUrl,
           committedUrl: url,
         }),

package/src/extensions/maskOps.ts

@@ -106,15 +106,21 @@ export function circularMorphology(
   radius: number,
   op: "dilate" | "erode" | "closing" | "opening",
 ): Uint8Array {
-  const dilate = (m: Uint8Array, r: number) => {
+  const r = Math.max(0, Math.floor(radius));
+  if (r <= 0) {
+    return mask.slice();
+  }
+
+  // Disk kernel dilation (Euclidean metric).
+  const dilateDisk = (m: Uint8Array, radiusPx: number) => {
     const horizontalDist = new Int32Array(width * height);
     for (let y = 0; y < height; y++) {
-      let lastSolid = -r * 2;
+      let lastSolid = -radiusPx * 2;
       for (let x = 0; x < width; x++) {
         if (m[y * width + x]) lastSolid = x;
         horizontalDist[y * width + x] = x - lastSolid;
       }
-      lastSolid = width + r * 2;
+      lastSolid = width + radiusPx * 2;
       for (let x = width - 1; x >= 0; x--) {
         if (m[y * width + x]) lastSolid = x;
         horizontalDist[y * width + x] = Math.min(
@@ -125,12 +131,12 @@ export function circularMorphology(
     }
 
     const result = new Uint8Array(width * height);
-    const r2 = r * r;
+    const r2 = radiusPx * radiusPx;
     for (let x = 0; x < width; x++) {
       for (let y = 0; y < height; y++) {
         let found = false;
-        const minY = Math.max(0, y - r);
-        const maxY = Math.min(height - 1, y + r);
+        const minY = Math.max(0, y - radiusPx);
+        const maxY = Math.min(height - 1, y + radiusPx);
         for (let dy = minY; dy <= maxY; dy++) {
           const dY = dy - y;
           const hDist = horizontalDist[dy * width + x];
@@ -145,24 +151,84 @@ export function circularMorphology(
     return result;
   };
 
-  const erode = (m: Uint8Array, r: number) => {
-    const inverted = new Uint8Array(m.length);
-    for (let i = 0; i < m.length; i++) inverted[i] = m[i] ? 0 : 1;
-    const dilatedInverted = dilate(inverted, r);
-    const result = new Uint8Array(m.length);
-    for (let i = 0; i < m.length; i++) result[i] = dilatedInverted[i] ? 0 : 1;
-    return result;
+  // Diamond kernel erosion (L1 metric), implemented as radius iterations of
+  // 4-neighbor erosion. This is intentionally different from dilation kernel.
+  const erodeDiamond = (m: Uint8Array, radiusPx: number) => {
+    if (radiusPx <= 0) return m.slice();
+
+    let current = m;
+    for (let step = 0; step < radiusPx; step++) {
+      const next = new Uint8Array(width * height);
+      for (let y = 1; y < height - 1; y++) {
+        const row = y * width;
+        for (let x = 1; x < width - 1; x++) {
+          const idx = row + x;
+          if (
+            current[idx] &&
+            current[idx - 1] &&
+            current[idx + 1] &&
+            current[idx - width] &&
+            current[idx + width]
+          ) {
+            next[idx] = 1;
+          }
+        }
+      }
+      current = next;
+    }
+
+    return current;
+  };
+
+  // Restore thin bridges removed by erosion: if a removed pixel links two
+  // opposite neighbors in the source mask, bring it back.
+  const restoreBridgePixels = (source: Uint8Array, eroded: Uint8Array) => {
+    const restored = eroded.slice();
+    for (let y = 1; y < height - 1; y++) {
+      const row = y * width;
+      for (let x = 1; x < width - 1; x++) {
+        const idx = row + x;
+        if (!source[idx] || restored[idx]) continue;
+
+        const up = source[idx - width] === 1;
+        const down = source[idx + width] === 1;
+        const left = source[idx - 1] === 1;
+        const right = source[idx + 1] === 1;
+        const upLeft = source[idx - width - 1] === 1;
+        const upRight = source[idx - width + 1] === 1;
+        const downLeft = source[idx + width - 1] === 1;
+        const downRight = source[idx + width + 1] === 1;
+
+        const keepsBridge =
+          (left && right) ||
+          (up && down) ||
+          (upLeft && downRight) ||
+          (upRight && downLeft);
+        if (keepsBridge) {
+          restored[idx] = 1;
+        }
+      }
+    }
+
+    return restored;
+  };
+
+  const erodePreservingBridges = (m: Uint8Array, radiusPx: number) => {
+    const eroded = erodeDiamond(m, radiusPx);
+    return restoreBridgePixels(m, eroded);
   };
 
   switch (op) {
     case "dilate":
-      return dilate(mask, radius);
+      return dilateDisk(mask, r);
     case "erode":
-      return erode(mask, radius);
-    case "closing":
-      return erode(dilate(mask, radius), radius);
+      return erodePreservingBridges(mask, r);
+    case "closing": {
+      const erodeRadius = Math.max(1, Math.floor(r * 0.65));
+      return erodePreservingBridges(dilateDisk(mask, r), erodeRadius);
+    }
     case "opening":
-      return dilate(erode(mask, radius), radius);
+      return dilateDisk(erodePreservingBridges(mask, r), r);
     default:
       return mask;
   }

package/src/extensions/sceneLayoutModel.ts

@@ -56,6 +56,8 @@ export interface SceneGeometrySnapshot {
   offset: number;
   scale: number;
   pathData?: string;
+  customSourceWidthPx?: number;
+  customSourceHeightPx?: number;
 }
 
 const DEFAULT_SIZE_STATE: SizeState = {
@@ -325,6 +327,10 @@ export function buildSceneGeometry(
     "mm",
   );
   const offset = (layout.cutRect.width - layout.trimRect.width) / 2;
+  const sourceWidth = Number(configService.get("dieline.customSourceWidthPx", 0));
+  const sourceHeight = Number(
+    configService.get("dieline.customSourceHeightPx", 0),
+  );
 
   return {
     shape: configService.get("dieline.shape", "rect"),
@@ -338,5 +344,9 @@ export function buildSceneGeometry(
     offset,
     scale: layout.scale,
     pathData: configService.get("dieline.pathData"),
+    customSourceWidthPx:
+      Number.isFinite(sourceWidth) && sourceWidth > 0 ? sourceWidth : undefined,
+    customSourceHeightPx:
+      Number.isFinite(sourceHeight) && sourceHeight > 0 ? sourceHeight : undefined,
   };
 }