@pooder/kit 4.3.1 → 5.0.0

package/src/index.ts

@@ -1,10 +1,14 @@
-export * from "./background";
-export * from "./dieline";
-export * from "./film";
-export * from "./feature";
-export * from "./image";
-export * from "./white-ink";
-export * from "./ruler";
-export * from "./mirror";
-export * from "./units";
-export { default as CanvasService } from "./CanvasService";
+export * from "./background";
+export * from "./dieline";
+export * from "./film";
+export * from "./feature";
+export * from "./image";
+export * from "./white-ink";
+export * from "./ruler";
+export * from "./mirror";
+export * from "./size";
+export * from "./sceneLayout";
+export * from "./sceneLayoutModel";
+export * from "./sceneVisibility";
+export * from "./units";
+export { default as CanvasService } from "./CanvasService";

package/src/maskOps.ts

@@ -0,0 +1,326 @@
+export type MaskMode = "auto" | "alpha" | "whitebg";
+
+export interface CreateMaskOptions {
+  threshold: number;
+  padding: number;
+  paddedWidth: number;
+  paddedHeight: number;
+  maskMode?: MaskMode;
+  whiteThreshold?: number;
+  alphaOpaqueCutoff?: number;
+}
+
+export function createMask(
+  imageData: ImageData,
+  options: CreateMaskOptions,
+): Uint8Array {
+  const { width, height, data } = imageData;
+  const {
+    threshold,
+    padding,
+    paddedWidth,
+    paddedHeight,
+    maskMode = "auto",
+    whiteThreshold = 240,
+    alphaOpaqueCutoff = 250,
+  } = options;
+
+  const resolvedMode =
+    maskMode === "auto" ? inferMaskMode(imageData, alphaOpaqueCutoff) : maskMode;
+
+  const mask = new Uint8Array(paddedWidth * paddedHeight);
+
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      const srcIdx = (y * width + x) * 4;
+      const r = data[srcIdx];
+      const g = data[srcIdx + 1];
+      const b = data[srcIdx + 2];
+      const a = data[srcIdx + 3];
+      const destIdx = (y + padding) * paddedWidth + (x + padding);
+
+      if (resolvedMode === "alpha") {
+        if (a > threshold) mask[destIdx] = 1;
+      } else {
+        if (
+          a > threshold &&
+          !(r > whiteThreshold && g > whiteThreshold && b > whiteThreshold)
+        ) {
+          mask[destIdx] = 1;
+        }
+      }
+    }
+  }
+
+  return mask;
+}
+
+function inferMaskMode(imageData: ImageData, alphaOpaqueCutoff: number): MaskMode {
+  const { data } = imageData;
+  const total = data.length / 4;
+
+  let belowOpaque = 0;
+  let veryTransparent = 0;
+  let minAlpha = 255;
+
+  for (let i = 3; i < data.length; i += 4) {
+    const a = data[i];
+    if (a < minAlpha) minAlpha = a;
+    if (a < alphaOpaqueCutoff) belowOpaque++;
+    if (a < 32) veryTransparent++;
+  }
+
+  if (minAlpha === 255) return "whitebg";
+
+  const belowOpaqueRatio = belowOpaque / total;
+  const veryTransparentRatio = veryTransparent / total;
+
+  if (veryTransparentRatio >= 0.0005) return "alpha";
+  if (belowOpaqueRatio >= 0.01) return "alpha";
+
+  return "whitebg";
+}
+
+export function circularMorphology(
+  mask: Uint8Array,
+  width: number,
+  height: number,
+  radius: number,
+  op: "dilate" | "erode" | "closing" | "opening",
+): Uint8Array {
+  const dilate = (m: Uint8Array, r: number) => {
+    const horizontalDist = new Int32Array(width * height);
+    for (let y = 0; y < height; y++) {
+      let lastSolid = -r * 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;
+      for (let x = width - 1; x >= 0; x--) {
+        if (m[y * width + x]) lastSolid = x;
+        horizontalDist[y * width + x] = Math.min(
+          horizontalDist[y * width + x],
+          lastSolid - x,
+        );
+      }
+    }
+
+    const result = new Uint8Array(width * height);
+    const r2 = r * r;
+    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);
+        for (let dy = minY; dy <= maxY; dy++) {
+          const dY = dy - y;
+          const hDist = horizontalDist[dy * width + x];
+          if (hDist * hDist + dY * dY <= r2) {
+            found = true;
+            break;
+          }
+        }
+        if (found) result[y * width + x] = 1;
+      }
+    }
+    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;
+  };
+
+  switch (op) {
+    case "dilate":
+      return dilate(mask, radius);
+    case "erode":
+      return erode(mask, radius);
+    case "closing":
+      return erode(dilate(mask, radius), radius);
+    case "opening":
+      return dilate(erode(mask, radius), radius);
+    default:
+      return mask;
+  }
+}
+
+export function fillHoles(
+  mask: Uint8Array,
+  width: number,
+  height: number,
+): Uint8Array {
+  const background = new Uint8Array(width * height);
+  const queue: number[] = [];
+
+  for (let x = 0; x < width; x++) {
+    if (mask[x] === 0) {
+      background[x] = 1;
+      queue.push(x);
+    }
+    const lastRowIdx = (height - 1) * width + x;
+    if (mask[lastRowIdx] === 0) {
+      background[lastRowIdx] = 1;
+      queue.push(lastRowIdx);
+    }
+  }
+  for (let y = 1; y < height - 1; y++) {
+    const leftIdx = y * width;
+    const rightIdx = y * width + (width - 1);
+    if (mask[leftIdx] === 0) {
+      background[leftIdx] = 1;
+      queue.push(leftIdx);
+    }
+    if (mask[rightIdx] === 0) {
+      background[rightIdx] = 1;
+      queue.push(rightIdx);
+    }
+  }
+
+  let head = 0;
+  while (head < queue.length) {
+    const idx = queue[head++];
+    const x = idx % width;
+    const y = (idx - x) / width;
+
+    const up = y > 0 ? idx - width : -1;
+    const down = y < height - 1 ? idx + width : -1;
+    const left = x > 0 ? idx - 1 : -1;
+    const right = x < width - 1 ? idx + 1 : -1;
+
+    if (up >= 0 && mask[up] === 0 && background[up] === 0) {
+      background[up] = 1;
+      queue.push(up);
+    }
+    if (down >= 0 && mask[down] === 0 && background[down] === 0) {
+      background[down] = 1;
+      queue.push(down);
+    }
+    if (left >= 0 && mask[left] === 0 && background[left] === 0) {
+      background[left] = 1;
+      queue.push(left);
+    }
+    if (right >= 0 && mask[right] === 0 && background[right] === 0) {
+      background[right] = 1;
+      queue.push(right);
+    }
+  }
+
+  const filledMask = new Uint8Array(width * height);
+  for (let i = 0; i < width * height; i++) {
+    filledMask[i] = background[i] === 0 ? 1 : 0;
+  }
+
+  return filledMask;
+}
+
+export function countForeground(mask: Uint8Array): number {
+  let c = 0;
+  for (let i = 0; i < mask.length; i++) c += mask[i] ? 1 : 0;
+  return c;
+}
+
+export function isMaskConnected8(
+  mask: Uint8Array,
+  width: number,
+  height: number,
+): boolean {
+  const total = countForeground(mask);
+  if (total === 0) return true;
+
+  let start = -1;
+  for (let i = 0; i < mask.length; i++) {
+    if (mask[i]) {
+      start = i;
+      break;
+    }
+  }
+  if (start === -1) return true;
+
+  const visited = new Uint8Array(mask.length);
+  const queue: number[] = [start];
+  visited[start] = 1;
+  let seen = 1;
+
+  let head = 0;
+  while (head < queue.length) {
+    const idx = queue[head++];
+    const x = idx % width;
+    const y = (idx - x) / width;
+
+    for (let dy = -1; dy <= 1; dy++) {
+      const ny = y + dy;
+      if (ny < 0 || ny >= height) continue;
+      for (let dx = -1; dx <= 1; dx++) {
+        if (dx === 0 && dy === 0) continue;
+        const nx = x + dx;
+        if (nx < 0 || nx >= width) continue;
+        const nidx = ny * width + nx;
+        if (mask[nidx] && !visited[nidx]) {
+          visited[nidx] = 1;
+          queue.push(nidx);
+          seen++;
+        }
+      }
+    }
+  }
+
+  return seen === total;
+}
+
+export function findMinimalConnectRadius(
+  mask: Uint8Array,
+  width: number,
+  height: number,
+  maxRadius: number,
+): number {
+  if (maxRadius <= 0) return 0;
+  if (isMaskConnected8(mask, width, height)) return 0;
+
+  let low = 0;
+  let high = 1;
+  while (high <= maxRadius) {
+    const closed = circularMorphology(mask, width, height, high, "closing");
+    if (isMaskConnected8(closed, width, height)) break;
+    high *= 2;
+  }
+  if (high > maxRadius) high = maxRadius;
+
+  if (
+    !isMaskConnected8(
+      circularMorphology(mask, width, height, high, "closing"),
+      width,
+      height,
+    )
+  ) {
+    return high;
+  }
+
+  while (low + 1 < high) {
+    const mid = Math.floor((low + high) / 2);
+    const closed = circularMorphology(mask, width, height, mid, "closing");
+    if (isMaskConnected8(closed, width, height)) {
+      high = mid;
+    } else {
+      low = mid;
+    }
+  }
+
+  return high;
+}
+
+export function polygonSignedArea(points: Array<{ x: number; y: number }>): number {
+  if (points.length < 3) return 0;
+  let sum = 0;
+  for (let i = 0; i < points.length; i++) {
+    const a = points[i];
+    const b = points[(i + 1) % points.length];
+    sum += a.x * b.y - b.x * a.y;
+  }
+  return sum / 2;
+}

package/src/mirror.ts

@@ -1,128 +1,128 @@
-import {
-  Extension,
-  ExtensionContext,
-  ContributionPointIds,
-  CommandContribution,
-  ConfigurationContribution,
-} from "@pooder/core";
-import CanvasService from "./CanvasService";
-
-export class MirrorTool implements Extension {
-  id = "pooder.kit.mirror";
-
-  public metadata = {
-    name: "MirrorTool",
-  };
-  private enabled = false;
-
-  private canvasService?: CanvasService;
-
-  constructor(
-    options?: Partial<{
-      enabled: boolean;
-    }>,
-  ) {
-    if (options) {
-      Object.assign(this, options);
-    }
-  }
-
-  toJSON() {
-    return {
-      enabled: this.enabled,
-    };
-  }
-
-  loadFromJSON(json: any) {
-    this.enabled = json.enabled;
-  }
-
-  activate(context: ExtensionContext) {
-    this.canvasService = context.services.get<CanvasService>("CanvasService");
-    if (!this.canvasService) {
-      console.warn("CanvasService not found for MirrorTool");
-      return;
-    }
-
-    const configService = context.services.get<any>("ConfigurationService");
-    if (configService) {
-      // Load initial config
-      this.enabled = configService.get("mirror.enabled", this.enabled);
-
-      // Listen for changes
-      configService.onAnyChange((e: { key: string; value: any }) => {
-        if (e.key === "mirror.enabled") {
-          this.applyMirror(e.value);
-        }
-      });
-    }
-
-    // Initialize with current state (if enabled was persisted)
-    if (this.enabled) {
-      this.applyMirror(true);
-    }
-  }
-
-  deactivate(context: ExtensionContext) {
-    this.applyMirror(false);
-    this.canvasService = undefined;
-  }
-
-  contribute() {
-    return {
-      [ContributionPointIds.CONFIGURATIONS]: [
-        {
-          id: "mirror.enabled",
-          type: "boolean",
-          label: "Enable Mirror",
-          default: false,
-        },
-      ] as ConfigurationContribution[],
-      [ContributionPointIds.COMMANDS]: [
-        {
-          command: "setMirror",
-          title: "Set Mirror",
-          handler: (enabled: boolean) => {
-            this.applyMirror(enabled);
-            return true;
-          },
-        },
-      ] as CommandContribution[],
-    };
-  }
-
-  private applyMirror(enabled: boolean) {
-    if (!this.canvasService) return;
-    const canvas = this.canvasService.canvas;
-    if (!canvas) return;
-
-    const width = canvas.width || 800;
-
-    // Fabric.js v6+ uses viewportTransform property
-    let vpt = canvas.viewportTransform || [1, 0, 0, 1, 0, 0];
-    // Create a copy to avoid mutating the reference directly before setting
-    vpt = [...vpt];
-
-    // If we are enabling and currently not flipped (scaleX > 0)
-    // Or disabling and currently flipped (scaleX < 0)
-    const isFlipped = vpt[0] < 0;
-
-    if (enabled && !isFlipped) {
-      // Flip scale X
-      vpt[0] = -vpt[0]; // Flip scale
-      vpt[4] = width - vpt[4]; // Adjust pan X
-
-      canvas.setViewportTransform(vpt as any);
-      canvas.requestRenderAll();
-      this.enabled = true;
-    } else if (!enabled && isFlipped) {
-      // Restore
-      vpt[0] = -vpt[0]; // Unflip scale
-      vpt[4] = width - vpt[4]; // Restore pan X
-
-      canvas.setViewportTransform(vpt as any);
-      canvas.requestRenderAll();
-      this.enabled = false;
-    }
-  }
-}
+import {
+  Extension,
+  ExtensionContext,
+  ContributionPointIds,
+  CommandContribution,
+  ConfigurationContribution,
+} from "@pooder/core";
+import CanvasService from "./CanvasService";
+
+export class MirrorTool implements Extension {
+  id = "pooder.kit.mirror";
+
+  public metadata = {
+    name: "MirrorTool",
+  };
+  private enabled = false;
+
+  private canvasService?: CanvasService;
+
+  constructor(
+    options?: Partial<{
+      enabled: boolean;
+    }>,
+  ) {
+    if (options) {
+      Object.assign(this, options);
+    }
+  }
+
+  toJSON() {
+    return {
+      enabled: this.enabled,
+    };
+  }
+
+  loadFromJSON(json: any) {
+    this.enabled = json.enabled;
+  }
+
+  activate(context: ExtensionContext) {
+    this.canvasService = context.services.get<CanvasService>("CanvasService");
+    if (!this.canvasService) {
+      console.warn("CanvasService not found for MirrorTool");
+      return;
+    }
+
+    const configService = context.services.get<any>("ConfigurationService");
+    if (configService) {
+      // Load initial config
+      this.enabled = configService.get("mirror.enabled", this.enabled);
+
+      // Listen for changes
+      configService.onAnyChange((e: { key: string; value: any }) => {
+        if (e.key === "mirror.enabled") {
+          this.applyMirror(e.value);
+        }
+      });
+    }
+
+    // Initialize with current state (if enabled was persisted)
+    if (this.enabled) {
+      this.applyMirror(true);
+    }
+  }
+
+  deactivate(context: ExtensionContext) {
+    this.applyMirror(false);
+    this.canvasService = undefined;
+  }
+
+  contribute() {
+    return {
+      [ContributionPointIds.CONFIGURATIONS]: [
+        {
+          id: "mirror.enabled",
+          type: "boolean",
+          label: "Enable Mirror",
+          default: false,
+        },
+      ] as ConfigurationContribution[],
+      [ContributionPointIds.COMMANDS]: [
+        {
+          command: "setMirror",
+          title: "Set Mirror",
+          handler: (enabled: boolean) => {
+            this.applyMirror(enabled);
+            return true;
+          },
+        },
+      ] as CommandContribution[],
+    };
+  }
+
+  private applyMirror(enabled: boolean) {
+    if (!this.canvasService) return;
+    const canvas = this.canvasService.canvas;
+    if (!canvas) return;
+
+    const width = canvas.width || 800;
+
+    // Fabric.js v6+ uses viewportTransform property
+    let vpt = canvas.viewportTransform || [1, 0, 0, 1, 0, 0];
+    // Create a copy to avoid mutating the reference directly before setting
+    vpt = [...vpt];
+
+    // If we are enabling and currently not flipped (scaleX > 0)
+    // Or disabling and currently flipped (scaleX < 0)
+    const isFlipped = vpt[0] < 0;
+
+    if (enabled && !isFlipped) {
+      // Flip scale X
+      vpt[0] = -vpt[0]; // Flip scale
+      vpt[4] = width - vpt[4]; // Adjust pan X
+
+      canvas.setViewportTransform(vpt as any);
+      canvas.requestRenderAll();
+      this.enabled = true;
+    } else if (!enabled && isFlipped) {
+      // Restore
+      vpt[0] = -vpt[0]; // Unflip scale
+      vpt[4] = width - vpt[4]; // Restore pan X
+
+      canvas.setViewportTransform(vpt as any);
+      canvas.requestRenderAll();
+      this.enabled = false;
+    }
+  }
+}

package/src/renderSpec.ts

@@ -0,0 +1,18 @@
+export type RenderObjectType = "rect" | "image" | "path";
+
+export type RenderProps = Record<string, any>;
+
+export interface RenderObjectSpec {
+  id: string;
+  type: RenderObjectType;
+  props: RenderProps;
+  data?: Record<string, any>;
+  src?: string;
+}
+
+export interface RenderLayerSpec {
+  id: string;
+  objects: RenderObjectSpec[];
+  props?: RenderProps;
+}
+