@pooder/kit 6.0.0 → 6.1.0

package/package.json

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

package/src/extensions/{background.ts → background/BackgroundTool.ts}

@@ -7,17 +7,18 @@ import {
   ConfigurationService,
 } from "@pooder/core";
 import { FabricImage } from "fabric";
-import { CanvasService, RenderObjectSpec } from "../services";
+import { CanvasService, RenderObjectSpec } from "../../services";
 import {
   computeSceneLayout,
   readSizeState,
   type SceneLayoutSnapshot,
-} from "./sceneLayoutModel";
-
-interface SourceSize {
-  width: number;
-  height: number;
-}
+} from "../../shared/scene/sceneLayoutModel";
+import { BACKGROUND_LAYER_ID } from "../../shared/constants/layers";
+import {
+  createSourceSizeCache,
+  type SourceSize,
+} from "../../shared/imaging/sourceSizeCache";
+import { SubscriptionBag } from "../../shared/runtime/subscriptions";
 
 interface Rect {
   left: number;
@@ -47,7 +48,6 @@ export interface BackgroundConfig {
   layers: BackgroundLayer[];
 }
 
-const BACKGROUND_LAYER_ID = "background";
 const BACKGROUND_CONFIG_KEY = "background.config";
 
 const DEFAULT_WIDTH = 800;
@@ -65,7 +65,7 @@ const DEFAULT_BACKGROUND_CONFIG: BackgroundConfig = {
       order: 0,
       enabled: true,
       exportable: false,
-      color: "#fff",
+      color: "#eee",
     },
   ],
 };
@@ -245,13 +245,13 @@ export class BackgroundTool implements Extension {
 
   private specs: RenderObjectSpec[] = [];
   private renderProducerDisposable?: { dispose: () => void };
-  private configChangeDisposable?: { dispose: () => void };
+  private readonly subscriptions = new SubscriptionBag();
 
   private renderSeq = 0;
   private latestSceneLayout: SceneLayoutSnapshot | null = null;
-
-  private sourceSizeBySrc: Map<string, SourceSize> = new Map();
-  private pendingSizeBySrc: Map<string, Promise<SourceSize | null>> = new Map();
+  private sourceSizeCache = createSourceSizeCache((src) =>
+    this.loadImageSize(src),
+  );
 
   private onCanvasResized = () => {
     this.latestSceneLayout = null;
@@ -270,6 +270,7 @@ export class BackgroundTool implements Extension {
   }
 
   activate(context: ExtensionContext) {
+    this.subscriptions.disposeAll();
     this.canvasService = context.services.get<CanvasService>("CanvasService");
     if (!this.canvasService) {
       console.warn("CanvasService not found for BackgroundTool");
@@ -286,8 +287,8 @@ export class BackgroundTool implements Extension {
           DEFAULT_BACKGROUND_CONFIG,
         ),
       );
-      this.configChangeDisposable?.dispose();
-      this.configChangeDisposable = this.configService.onAnyChange(
+      this.subscriptions.onConfigChange(
+        this.configService,
         (e: { key: string; value: any }) => {
           if (e.key === BACKGROUND_CONFIG_KEY) {
             this.config = normalizeConfig(e.value);
@@ -319,21 +320,26 @@ export class BackgroundTool implements Extension {
       { priority: 0 },
     );
 
-    context.eventBus.on("canvas:resized", this.onCanvasResized);
-    context.eventBus.on("scene:layout:change", this.onSceneLayoutChanged);
+    this.subscriptions.on(
+      context.eventBus,
+      "canvas:resized",
+      this.onCanvasResized,
+    );
+    this.subscriptions.on(
+      context.eventBus,
+      "scene:layout:change",
+      this.onSceneLayoutChanged,
+    );
     this.updateBackground();
   }
 
   deactivate(context: ExtensionContext) {
-    context.eventBus.off("canvas:resized", this.onCanvasResized);
-    context.eventBus.off("scene:layout:change", this.onSceneLayoutChanged);
+    this.subscriptions.disposeAll();
 
     this.renderSeq += 1;
     this.specs = [];
     this.latestSceneLayout = null;
-
-    this.configChangeDisposable?.dispose();
-    this.configChangeDisposable = undefined;
+    this.sourceSizeCache.clear();
 
     this.renderProducerDisposable?.dispose();
     this.renderProducerDisposable = undefined;
@@ -576,7 +582,7 @@ export class BackgroundTool implements Extension {
     const src = String(layer.src || "").trim();
     if (!src) return [];
 
-    const sourceSize = this.sourceSizeBySrc.get(src);
+    const sourceSize = this.sourceSizeCache.getSourceSize(src);
     if (!sourceSize) return [];
 
     const rect = this.resolveAnchorRect(layer.anchor);
@@ -648,29 +654,6 @@ export class BackgroundTool implements Extension {
     return Array.from(urls);
   }
 
-  private async ensureImageSize(src: string): Promise<SourceSize | null> {
-    if (!src) return null;
-
-    const cached = this.sourceSizeBySrc.get(src);
-    if (cached) return cached;
-
-    const pending = this.pendingSizeBySrc.get(src);
-    if (pending) {
-      return pending;
-    }
-
-    const task = this.loadImageSize(src);
-    this.pendingSizeBySrc.set(src, task);
-
-    try {
-      return await task;
-    } finally {
-      if (this.pendingSizeBySrc.get(src) === task) {
-        this.pendingSizeBySrc.delete(src);
-      }
-    }
-  }
-
   private async loadImageSize(src: string): Promise<SourceSize | null> {
     try {
       const image = await FabricImage.fromURL(src, {
@@ -679,9 +662,7 @@ export class BackgroundTool implements Extension {
       const width = Number(image?.width || 0);
       const height = Number(image?.height || 0);
       if (width > 0 && height > 0) {
-        const size = { width, height };
-        this.sourceSizeBySrc.set(src, size);
-        return size;
+        return { width, height };
       }
     } catch (error) {
       console.error("[BackgroundTool] Failed to load image", src, error);
@@ -702,7 +683,9 @@ export class BackgroundTool implements Extension {
     const activeUrls = this.collectActiveImageUrls(currentConfig);
 
     if (activeUrls.length > 0) {
-      await Promise.all(activeUrls.map((url) => this.ensureImageSize(url)));
+      await Promise.all(
+        activeUrls.map((url) => this.sourceSizeCache.ensureImageSize(url)),
+      );
       if (seq !== this.renderSeq) return;
     }
 

package/src/extensions/background/index.ts

@@ -0,0 +1 @@
+export * from "./BackgroundTool";

package/src/extensions/{dieline.ts → dieline/DielineTool.ts}

@@ -2,32 +2,34 @@ import {
   Extension,
   ExtensionContext,
   ContributionPointIds,
-  CommandContribution,
-  ConfigurationContribution,
   ConfigurationService,
 } from "@pooder/core";
 import { Canvas as FabricCanvas, Path, Pattern } from "fabric";
-import { CanvasService, RenderEffectSpec, RenderObjectSpec } from "../services";
-import { ImageTracer } from "./tracer";
-import { parseLengthToMm } from "../units";
+import { CanvasService, RenderEffectSpec, RenderObjectSpec } from "../../services";
+import { parseLengthToMm } from "../../units";
 import {
   DEFAULT_DIELINE_SHAPE,
   DEFAULT_DIELINE_SHAPE_STYLE,
-  DIELINE_SHAPES,
   normalizeShapeStyle,
   normalizeDielineShape,
-} from "./dielineShape";
-import type { DielineShape, DielineShapeStyle } from "./dielineShape";
+} from "../dielineShape";
+import type { DielineShape, DielineShapeStyle } from "../dielineShape";
 import {
   generateDielinePath,
   generateBleedZonePath,
   DielineFeature,
-} from "./geometry";
+} from "../geometry";
 import {
   buildSceneGeometry,
   computeSceneLayout,
   readSizeState,
-} from "./sceneLayoutModel";
+} from "../../shared/scene/sceneLayoutModel";
+import {
+  DIELINE_LAYER_ID,
+  IMAGE_OBJECT_LAYER_ID,
+} from "../../shared/constants/layers";
+import { createDielineCommands } from "./commands";
+import { createDielineConfigurations } from "./config";
 
 export interface DielineGeometry {
   shape: DielineShape;
@@ -72,9 +74,6 @@ export interface DielineState {
   customSourceHeightPx?: number;
 }
 
-const IMAGE_OBJECT_LAYER_ID = "image.user";
-const DIELINE_LAYER_ID = "dieline-overlay";
-
 export class DielineTool implements Extension {
   id = "pooder.kit.dieline";
   public metadata = {
@@ -359,7 +358,6 @@ export class DielineTool implements Extension {
   }
 
   contribute() {
-    const s = this.state;
     return {
       [ContributionPointIds.TOOLS]: [
         {
@@ -372,210 +370,8 @@ export class DielineTool implements Extension {
           },
         },
       ],
-      [ContributionPointIds.CONFIGURATIONS]: [
-        {
-          id: "dieline.shape",
-          type: "select",
-          label: "Shape",
-          options: Array.from(DIELINE_SHAPES),
-          default: s.shape,
-        },
-        {
-          id: "dieline.radius",
-          type: "number",
-          label: "Corner Radius (mm)",
-          min: 0,
-          max: 500,
-          default: s.radius,
-        },
-        {
-          id: "dieline.shapeStyle",
-          type: "json",
-          label: "Shape Style",
-          default: s.shapeStyle,
-        },
-        {
-          id: "dieline.showBleedLines",
-          type: "boolean",
-          label: "Show Bleed Lines",
-          default: s.showBleedLines,
-        },
-        {
-          id: "dieline.strokeWidth",
-          type: "number",
-          label: "Line Width",
-          min: 0.1,
-          max: 10,
-          step: 0.1,
-          default: s.mainLine.width,
-        },
-        {
-          id: "dieline.strokeColor",
-          type: "color",
-          label: "Line Color",
-          default: s.mainLine.color,
-        },
-        {
-          id: "dieline.dashLength",
-          type: "number",
-          label: "Dash Length",
-          min: 1,
-          max: 50,
-          default: s.mainLine.dashLength,
-        },
-        {
-          id: "dieline.style",
-          type: "select",
-          label: "Line Style",
-          options: ["solid", "dashed", "hidden"],
-          default: s.mainLine.style,
-        },
-        {
-          id: "dieline.offsetStrokeWidth",
-          type: "number",
-          label: "Offset Line Width",
-          min: 0.1,
-          max: 10,
-          step: 0.1,
-          default: s.offsetLine.width,
-        },
-        {
-          id: "dieline.offsetStrokeColor",
-          type: "color",
-          label: "Offset Line Color",
-          default: s.offsetLine.color,
-        },
-        {
-          id: "dieline.offsetDashLength",
-          type: "number",
-          label: "Offset Dash Length",
-          min: 1,
-          max: 50,
-          default: s.offsetLine.dashLength,
-        },
-        {
-          id: "dieline.offsetStyle",
-          type: "select",
-          label: "Offset Line Style",
-          options: ["solid", "dashed", "hidden"],
-          default: s.offsetLine.style,
-        },
-        {
-          id: "dieline.insideColor",
-          type: "color",
-          label: "Inside Color",
-          default: s.insideColor,
-        },
-        {
-          id: "dieline.features",
-          type: "json",
-          label: "Edge Features",
-          default: s.features,
-        },
-      ] as ConfigurationContribution[],
-      [ContributionPointIds.COMMANDS]: [
-        {
-          command: "updateFeaturePosition",
-          title: "Update Feature Position",
-          handler: (groupId: string, x: number, y: number) => {
-            const configService = this.context?.services.get<any>(
-              "ConfigurationService",
-            );
-            if (!configService) return;
-
-            const features = configService.get("dieline.features") || [];
-
-            let changed = false;
-            const newFeatures = features.map((f: any) => {
-              if (f.groupId === groupId) {
-                if (f.x !== x || f.y !== y) {
-                  changed = true;
-                  return { ...f, x, y };
-                }
-              }
-              return f;
-            });
-
-            if (changed) {
-              configService.update("dieline.features", newFeatures);
-            }
-          },
-        },
-        {
-          command: "exportCutImage",
-          title: "Export Cut Image",
-          handler: (options?: { debug?: boolean }) => {
-            return this.exportCutImage(options);
-          },
-        },
-        {
-          command: "detectEdge",
-          title: "Detect Edge from Image",
-          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> => {
-                return new Promise((resolve, reject) => {
-                  const img = new Image();
-                  img.crossOrigin = "Anonymous";
-                  img.onload = () => resolve(img);
-                  img.onerror = (e) => reject(e);
-                  img.src = url;
-                });
-              };
-
-              const [img, traced] = await Promise.all([
-                loadImage(imageUrl),
-                ImageTracer.traceWithBounds(imageUrl, tracerOptions),
-              ]);
-              const { pathData, baseBounds, bounds } = traced;
-
-              if (debug) {
-                console.info("[DielineTool] detectEdge", {
-                  imageWidth: img.width,
-                  imageHeight: img.height,
-                  baseBounds,
-                  expandedBounds: bounds,
-                  currentDielineWidth: s.width,
-                  currentDielineHeight: s.height,
-                  options: tracerOptions,
-                  strategy: "single-connected-silhouette",
-                });
-              }
-
-              return {
-                pathData,
-                rawBounds: bounds,
-                baseBounds,
-                imageWidth: img.width,
-                imageHeight: img.height,
-              };
-            } catch (e) {
-              console.error("Edge detection failed", e);
-              throw e;
-            }
-          },
-        },
-      ] as CommandContribution[],
+      [ContributionPointIds.CONFIGURATIONS]: createDielineConfigurations(this.state),
+      [ContributionPointIds.COMMANDS]: createDielineCommands(this, this.state),
     };
   }
 
@@ -900,6 +696,10 @@ export class DielineTool implements Extension {
       {
         type: "clipPath",
         id: "dieline.clip.image",
+        visibility: {
+          op: "not",
+          expr: { op: "anySessionActive" },
+        },
         targetPassIds: [IMAGE_OBJECT_LAYER_ID],
         source: {
           id: "dieline.effect.clip-path",

package/src/extensions/dieline/commands.ts

@@ -0,0 +1,109 @@
+import type { CommandContribution } from "@pooder/core";
+
+export function createDielineCommands(tool: any, state: any): CommandContribution[] {
+  return [
+    {
+      command: "updateFeaturePosition",
+      id: "updateFeaturePosition",
+      title: "Update Feature Position",
+      handler: (groupId: string, x: number, y: number) => {
+        const configService = tool.context?.services.get("ConfigurationService");
+        if (!configService) return;
+
+        const features = configService.get("dieline.features") || [];
+
+        let changed = false;
+        const newFeatures = features.map((f: any) => {
+          if (f.groupId === groupId) {
+            if (f.x !== x || f.y !== y) {
+              changed = true;
+              return { ...f, x, y };
+            }
+          }
+          return f;
+        });
+
+        if (changed) {
+          configService.update("dieline.features", newFeatures);
+        }
+      },
+    },
+    {
+      command: "exportCutImage",
+      id: "exportCutImage",
+      title: "Export Cut Image",
+      handler: (options?: { debug?: boolean }) => {
+        return tool.exportCutImage(options);
+      },
+    },
+    {
+      command: "detectEdge",
+      id: "detectEdge",
+      title: "Detect Edge from Image",
+      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,
+          };
+
+          const loadImage = (url: string): Promise<HTMLImageElement> => {
+            return new Promise((resolve, reject) => {
+              const img = new Image();
+              img.crossOrigin = "Anonymous";
+              img.onload = () => resolve(img);
+              img.onerror = (e) => reject(e);
+              img.src = url;
+            });
+          };
+
+          const [img, traced] = await Promise.all([
+            loadImage(imageUrl),
+            import("../tracer").then(({ ImageTracer }) =>
+              ImageTracer.traceWithBounds(imageUrl, tracerOptions),
+            ),
+          ]);
+          const { pathData, baseBounds, bounds } = traced;
+
+          if (debug) {
+            console.info("[DielineTool] detectEdge", {
+              imageWidth: img.width,
+              imageHeight: img.height,
+              baseBounds,
+              expandedBounds: bounds,
+              currentDielineWidth: state.width,
+              currentDielineHeight: state.height,
+              options: tracerOptions,
+              strategy: "single-connected-silhouette",
+            });
+          }
+
+          return {
+            pathData,
+            rawBounds: bounds,
+            baseBounds,
+            imageWidth: img.width,
+            imageHeight: img.height,
+          };
+        } catch (e) {
+          console.error("Edge detection failed", e);
+          throw e;
+        }
+      },
+    },
+  ];
+}

package/src/extensions/dieline/config.ts

@@ -0,0 +1,106 @@
+import type { ConfigurationContribution } from "@pooder/core";
+import { DIELINE_SHAPES } from "../dielineShape";
+
+export function createDielineConfigurations(state: any): ConfigurationContribution[] {
+  return [
+    {
+      id: "dieline.shape",
+      type: "select",
+      label: "Shape",
+      options: Array.from(DIELINE_SHAPES),
+      default: state.shape,
+    },
+    {
+      id: "dieline.radius",
+      type: "number",
+      label: "Corner Radius (mm)",
+      min: 0,
+      max: 500,
+      default: state.radius,
+    },
+    {
+      id: "dieline.shapeStyle",
+      type: "json",
+      label: "Shape Style",
+      default: state.shapeStyle,
+    },
+    {
+      id: "dieline.showBleedLines",
+      type: "boolean",
+      label: "Show Bleed Lines",
+      default: state.showBleedLines,
+    },
+    {
+      id: "dieline.strokeWidth",
+      type: "number",
+      label: "Line Width",
+      min: 0.1,
+      max: 10,
+      step: 0.1,
+      default: state.mainLine.width,
+    },
+    {
+      id: "dieline.strokeColor",
+      type: "color",
+      label: "Line Color",
+      default: state.mainLine.color,
+    },
+    {
+      id: "dieline.dashLength",
+      type: "number",
+      label: "Dash Length",
+      min: 1,
+      max: 50,
+      default: state.mainLine.dashLength,
+    },
+    {
+      id: "dieline.style",
+      type: "select",
+      label: "Line Style",
+      options: ["solid", "dashed", "hidden"],
+      default: state.mainLine.style,
+    },
+    {
+      id: "dieline.offsetStrokeWidth",
+      type: "number",
+      label: "Offset Line Width",
+      min: 0.1,
+      max: 10,
+      step: 0.1,
+      default: state.offsetLine.width,
+    },
+    {
+      id: "dieline.offsetStrokeColor",
+      type: "color",
+      label: "Offset Line Color",
+      default: state.offsetLine.color,
+    },
+    {
+      id: "dieline.offsetDashLength",
+      type: "number",
+      label: "Offset Dash Length",
+      min: 1,
+      max: 50,
+      default: state.offsetLine.dashLength,
+    },
+    {
+      id: "dieline.offsetStyle",
+      type: "select",
+      label: "Offset Line Style",
+      options: ["solid", "dashed", "hidden"],
+      default: state.offsetLine.style,
+    },
+    {
+      id: "dieline.insideColor",
+      type: "color",
+      label: "Inside Color",
+      default: state.insideColor,
+    },
+    {
+      id: "dieline.features",
+      type: "json",
+      label: "Edge Features",
+      default: state.features,
+    },
+  ];
+}

package/src/extensions/dieline/index.ts

@@ -0,0 +1,5 @@
+export * from "./DielineTool";
+export * from "./commands";
+export * from "./config";
+export * from "./model";
+export * from "./renderer";

package/src/extensions/dieline/model.ts

@@ -0,0 +1 @@
+export type { DielineGeometry, DielineState, LineStyle } from "./DielineTool";

package/src/extensions/dieline/renderer.ts

@@ -0,0 +1 @@
+export type { RenderEffectSpec, RenderObjectSpec } from "../../services";