@pooder/kit 2.0.0 → 3.0.0

package/src/film.ts

@@ -1,66 +1,128 @@
 import {
-  Command,
-  Editor,
-  EditorState,
   Extension,
-  Image,
-  OptionSchema,
-  PooderLayer,
+  ExtensionContext,
+  ContributionPointIds,
+  CommandContribution,
+  ConfigurationContribution,
 } from "@pooder/core";
+import { FabricImage as Image } from "fabric";
+import CanvasService from "./CanvasService";
 
-interface FilmToolOptions {
-  url: string;
-  opacity: number;
-}
+export class FilmTool implements Extension {
+  id = "pooder.kit.film";
 
-export class FilmTool implements Extension<FilmToolOptions> {
-  public name = "FilmTool";
-  public options: FilmToolOptions = {
-    url: "",
-    opacity: 0.5,
+  public metadata = {
+    name: "FilmTool",
   };
 
-  public schema: Record<keyof FilmToolOptions, OptionSchema> = {
-    url: {
-      type: "string",
-      label: "Film Image URL",
-    },
-    opacity: {
-      type: "number",
-      min: 0,
-      max: 1,
-      step: 0.1,
-      label: "Opacity",
-    },
-  };
+  private url: string = "";
+  private opacity: number = 0.5;
+
+  private canvasService?: CanvasService;
 
-  onMount(editor: Editor) {
-    this.initLayer(editor);
-    this.updateFilm(editor, this.options);
+  constructor(
+    options?: Partial<{
+      url: string;
+      opacity: number;
+    }>,
+  ) {
+    if (options) {
+      Object.assign(this, options);
+    }
   }
 
-  onUnmount(editor: Editor) {
-    const layer = editor.getLayer("overlay");
-    if (layer) {
-      const img = editor.getObject("film-image", "overlay");
-      if (img) {
-        layer.remove(img);
-        editor.canvas.requestRenderAll();
+  activate(context: ExtensionContext) {
+    this.canvasService = context.services.get<CanvasService>("CanvasService");
+    if (!this.canvasService) {
+      console.warn("CanvasService not found for FilmTool");
+      return;
+    }
+
+    const configService = context.services.get<any>("ConfigurationService");
+    if (configService) {
+      // Load initial config
+      this.url = configService.get("film.url", this.url);
+      this.opacity = configService.get("film.opacity", this.opacity);
+
+      // Listen for changes
+      configService.onAnyChange((e: { key: string; value: any }) => {
+        if (e.key.startsWith("film.")) {
+          const prop = e.key.split(".")[1];
+          console.log(
+            `[FilmTool] Config change detected: ${e.key} -> ${e.value}`,
+          );
+          if (prop && prop in this) {
+            (this as any)[prop] = e.value;
+            this.updateFilm();
+          }
+        }
+      });
+    }
+
+    this.initLayer();
+    this.updateFilm();
+  }
+
+  deactivate(context: ExtensionContext) {
+    if (this.canvasService) {
+      const layer = this.canvasService.getLayer("overlay");
+      if (layer) {
+        const img = this.canvasService.getObject("film-image", "overlay");
+        if (img) {
+          layer.remove(img);
+          this.canvasService.requestRenderAll();
+        }
       }
+      this.canvasService = undefined;
     }
   }
 
-  onUpdate(editor: Editor, state: EditorState) {
-    this.updateFilm(editor, this.options);
+  contribute() {
+    return {
+      [ContributionPointIds.CONFIGURATIONS]: [
+        {
+          id: "film.url",
+          type: "string",
+          label: "Film Image URL",
+          default: "",
+        },
+        {
+          id: "film.opacity",
+          type: "number",
+          label: "Opacity",
+          min: 0,
+          max: 1,
+          step: 0.1,
+          default: 0.5,
+        },
+      ] as ConfigurationContribution[],
+      [ContributionPointIds.COMMANDS]: [
+        {
+          command: "setFilmImage",
+          title: "Set Film Image",
+          handler: (url: string, opacity: number) => {
+            if (this.url === url && this.opacity === opacity) return true;
+
+            this.url = url;
+            this.opacity = opacity;
+
+            this.updateFilm();
+
+            return true;
+          },
+        },
+      ] as CommandContribution[],
+    };
   }
 
-  private initLayer(editor: Editor) {
-    let overlayLayer = editor.getLayer("overlay");
+  private initLayer() {
+    if (!this.canvasService) return;
+    let overlayLayer = this.canvasService.getLayer("overlay");
     if (!overlayLayer) {
-      const width = editor.state.width;
-      const height = editor.state.height;
+      const width = this.canvasService.canvas.width || 800;
+      const height = this.canvasService.canvas.height || 600;
 
-      const layer = new PooderLayer([], {
+      const layer = this.canvasService.createLayer("overlay", {
         width,
         height,
         left: 0,
@@ -71,38 +133,35 @@ export class FilmTool implements Extension<FilmToolOptions> {
         evented: false,
         subTargetCheck: false,
         interactive: false,
-        data: {
-          id: "overlay",
-        },
       });
 
-      editor.canvas.add(layer);
-      editor.canvas.bringObjectToFront(layer);
+      this.canvasService.canvas.bringObjectToFront(layer);
     }
   }
 
-  private async updateFilm(editor: Editor, options: FilmToolOptions) {
-    const layer = editor.getLayer("overlay");
+  private async updateFilm() {
+    if (!this.canvasService) return;
+    const layer = this.canvasService.getLayer("overlay");
     if (!layer) {
       console.warn("[FilmTool] Overlay layer not found");
       return;
     }
 
-    const { url, opacity } = options;
+    const { url, opacity } = this;
 
     if (!url) {
-      const img = editor.getObject("film-image", "overlay");
+      const img = this.canvasService.getObject("film-image", "overlay");
       if (img) {
         layer.remove(img);
-        editor.canvas.requestRenderAll();
+        this.canvasService.requestRenderAll();
       }
       return;
     }
 
-    const width = editor.state.width;
-    const height = editor.state.height;
+    const width = this.canvasService.canvas.width || 800;
+    const height = this.canvasService.canvas.height || 600;
 
-    let img = editor.getObject("film-image", "overlay") as Image;
+    let img = this.canvasService.getObject("film-image", "overlay") as Image;
     try {
       if (img) {
         if (img.getSrc() !== url) {
@@ -125,39 +184,11 @@ export class FilmTool implements Extension<FilmToolOptions> {
         });
         layer.add(img);
       }
-      editor.canvas.requestRenderAll();
+      this.canvasService.requestRenderAll();
     } catch (error) {
       console.error("[FilmTool] Failed to load film image", url, error);
     }
+    layer.dirty = true;
+    this.canvasService.requestRenderAll();
   }
-
-  commands: Record<string, Command> = {
-    setFilmImage: {
-      execute: (editor: Editor, url: string, opacity: number) => {
-        if (this.options.url === url && this.options.opacity === opacity)
-          return true;
-
-        this.options.url = url;
-        this.options.opacity = opacity;
-
-        this.updateFilm(editor, this.options);
-
-        return true;
-      },
-      schema: {
-        url: {
-          type: "string",
-          label: "Image URL",
-          required: true,
-        },
-        opacity: {
-          type: "number",
-          label: "Opacity",
-          min: 0,
-          max: 1,
-          required: true,
-        },
-      },
-    },
-  };
 }

package/src/geometry.ts

@@ -8,13 +8,14 @@ export interface HoleData {
 }
 
 export interface GeometryOptions {
-  shape: "rect" | "circle" | "ellipse";
+  shape: "rect" | "circle" | "ellipse" | "custom";
   width: number;
   height: number;
   radius: number;
   x: number;
   y: number;
   holes: Array<HoleData>;
+  pathData?: string;
 }
 
 export interface MaskGeometryOptions extends GeometryOptions {
@@ -28,14 +29,16 @@ export interface MaskGeometryOptions extends GeometryOptions {
 function ensurePaper(width: number, height: number) {
   if (!paper.project) {
     paper.setup(new paper.Size(width, height));
+  } else {
+    paper.view.viewSize = new paper.Size(width, height);
   }
 }
 
 /**
- * Creates the base dieline shape (Rect/Circle/Ellipse)
+ * Creates the base dieline shape (Rect/Circle/Ellipse/Custom)
  */
 function createBaseShape(options: GeometryOptions): paper.PathItem {
-  const { shape, width, height, radius, x, y } = options;
+  const { shape, width, height, radius, x, y, pathData } = options;
   const center = new paper.Point(x, y);
 
   if (shape === "rect") {
@@ -50,13 +53,136 @@ function createBaseShape(options: GeometryOptions): paper.PathItem {
       center: center,
       radius: Math.max(0, r),
     });
-  } else {
-    // ellipse
+  } else if (shape === "ellipse") {
     return new paper.Path.Ellipse({
       center: center,
       radius: [Math.max(0, width / 2), Math.max(0, height / 2)],
     });
+  } else if (shape === "custom" && pathData) {
+    const path = new paper.Path();
+    path.pathData = pathData;
+    // Align center
+    path.position = center;
+    // Scale to match width/height if needed?
+    // For now, assume pathData is correct size, but we might want to support resizing.
+    // If width/height are provided and different from bounds, we could scale.
+    if (
+      width > 0 &&
+      height > 0 &&
+      path.bounds.width > 0 &&
+      path.bounds.height > 0
+    ) {
+      path.scale(width / path.bounds.width, height / path.bounds.height);
+    }
+    return path;
+  } else {
+    // Fallback
+    return new paper.Path.Rectangle({
+      point: [x - width / 2, y - height / 2],
+      size: [Math.max(0, width), Math.max(0, height)],
+    });
+  }
+}
+
+/**
+ * Creates an offset version of the base shape.
+ * For Rect/Circle, we can just adjust params.
+ * For Custom shapes, we need a true offset algorithm (Paper.js doesn't have a robust one built-in for all cases,
+ * but we can simulate it or use a simple scaling if offset is small, OR rely on a library like Clipper.js.
+ * However, since we want to avoid heavy deps, let's try a simple approach:
+ * If it's a simple shape, we re-create it.
+ * If it's custom, we unfortunately have to scale it for now as a poor-man's offset,
+ * UNLESS we implement a stroke expansion.
+ *
+ * Stroke Expansion Trick:
+ * 1. Create path
+ * 2. Set strokeWidth = offset * 2
+ * 3. Convert stroke to path (paper.js has path.expand())
+ * 4. Union original + expanded (for positive offset) or Subtract (for negative).
+ */
+function createOffsetShape(
+  options: GeometryOptions,
+  offset: number,
+): paper.PathItem {
+  const { shape, width, height, radius, x, y, pathData } = options;
+  const center = new paper.Point(x, y);
+
+  if (shape === "rect" || shape === "circle" || shape === "ellipse") {
+    // For standard shapes, we can just adjust the dimensions
+    const offsetOptions = {
+      ...options,
+      width: Math.max(0, width + offset * 2),
+      height: Math.max(0, height + offset * 2),
+      radius: radius === 0 ? 0 : Math.max(0, radius + offset),
+    };
+    return createBaseShape(offsetOptions);
+  } else if (shape === "custom" && pathData) {
+    const original = createBaseShape(options);
+    if (offset === 0) return original;
+
+    // Use Stroke Expansion for Offset
+    // Create a copy for stroking
+    const stroker = original.clone() as paper.Path;
+    stroker.strokeColor = new paper.Color("black");
+    stroker.strokeWidth = Math.abs(offset) * 2;
+    // Round join usually looks better for offsets
+    stroker.strokeJoin = "round";
+    stroker.strokeCap = "round";
+
+    // Expand stroke to path
+    // @ts-ignore - paper.js types might be missing expand depending on version, but it exists in recent versions
+    // If expand is not available, we might fallback to scaling.
+    // Assuming modern paper.js
+    let expanded: paper.Item;
+    try {
+      // @ts-ignore
+      expanded = stroker.expand({ stroke: true, fill: false, insert: false });
+    } catch (e) {
+      // Fallback if expand fails or not present
+      stroker.remove();
+      // Fallback to scaling (imperfect)
+      const scaleX =
+        (original.bounds.width + offset * 2) / original.bounds.width;
+      const scaleY =
+        (original.bounds.height + offset * 2) / original.bounds.height;
+      original.scale(scaleX, scaleY);
+      return original;
+    }
+
+    stroker.remove();
+
+    // The expanded stroke is a "ring".
+    // For positive offset: Union(Original, Ring)
+    // For negative offset: Subtract(Original, Ring) ? No, that makes a hole.
+    // For negative offset: We want the "inner" boundary of the ring.
+
+    // Actually, expand() returns a Group or Path.
+    // If it's a closed path, the ring has an outer and inner boundary.
+
+    let result: paper.PathItem;
+
+    if (offset > 0) {
+      // @ts-ignore
+      result = original.unite(expanded);
+    } else {
+      // For negative offset (shrink), we want the original MINUS the stroke?
+      // No, the stroke is centered on the line.
+      // So the inner edge of the stroke is at -offset.
+      // We want the area INSIDE the inner edge.
+      // That is Original SUBTRACT the Ring?
+      // Yes, if we subtract the ring, we lose the border area.
+      // @ts-ignore
+      result = original.subtract(expanded);
+    }
+
+    // Cleanup
+    original.remove();
+    expanded.remove();
+
+    return result;
   }
+
+  return createBaseShape(options);
 }
 
 /**
@@ -80,13 +206,9 @@ function getDielineShape(options: GeometryOptions): paper.PathItem {
         radius: hole.outerRadius,
       });
 
-      // Check intersection with main body
-      // Only add lug if it intersects (or is contained in) the main shape
-      // This prevents floating islands when bleed shrinks
-      if (!mainShape.intersects(lug) && !mainShape.contains(lug.position)) {
-        lug.remove();
-        return; // Skip this lug
-      }
+      // REMOVED: Intersects check. We want to process all holes defined in config.
+      // If a hole is completely outside, it might form an island, but that's better than missing it.
+      // Users can remove the hole if they don't want it.
 
       // Create Cut (Inner Radius)
       const cut = new paper.Path.Circle({
@@ -98,39 +220,58 @@ function getDielineShape(options: GeometryOptions): paper.PathItem {
       if (!lugsPath) {
         lugsPath = lug;
       } else {
-        const temp = lugsPath.unite(lug);
-        lugsPath.remove();
-        lug.remove();
-        lugsPath = temp;
+        try {
+          const temp = lugsPath.unite(lug);
+          lugsPath.remove();
+          lug.remove();
+          lugsPath = temp;
+        } catch (e) {
+          console.error("Geometry: Failed to unite lug", e);
+          // Keep previous lugsPath, ignore this one to prevent crash
+          lug.remove();
+        }
       }
 
       // Union Cuts
       if (!cutsPath) {
         cutsPath = cut;
       } else {
-        const temp = cutsPath.unite(cut);
-        cutsPath.remove();
-        cut.remove();
-        cutsPath = temp;
+        try {
+          const temp = cutsPath.unite(cut);
+          cutsPath.remove();
+          cut.remove();
+          cutsPath = temp;
+        } catch (e) {
+          console.error("Geometry: Failed to unite cut", e);
+          cut.remove();
+        }
       }
     });
 
     // 2. Add Lugs to Main Shape (Union) - Additive Fusion
     if (lugsPath) {
-      const temp = mainShape.unite(lugsPath);
-      mainShape.remove();
-      // @ts-ignore
-      lugsPath.remove();
-      mainShape = temp;
+      try {
+        const temp = mainShape.unite(lugsPath);
+        mainShape.remove();
+        // @ts-ignore
+        lugsPath.remove();
+        mainShape = temp;
+      } catch (e) {
+        console.error("Geometry: Failed to unite lugsPath to mainShape", e);
+      }
     }
 
     // 3. Subtract Cuts from Main Shape (Difference)
     if (cutsPath) {
-      const temp = mainShape.subtract(cutsPath);
-      mainShape.remove();
-      // @ts-ignore
-      cutsPath.remove();
-      mainShape = temp;
+      try {
+        const temp = mainShape.subtract(cutsPath);
+        mainShape.remove();
+        // @ts-ignore
+        cutsPath.remove();
+        mainShape = temp;
+      } catch (e) {
+        console.error("Geometry: Failed to subtract cutsPath from mainShape", e);
+      }
     }
   }
 
@@ -200,15 +341,76 @@ export function generateBleedZonePath(
   const shapeOriginal = getDielineShape(options);
 
   // 2. Offset Shape
-  // Adjust dimensions for offset
-  const offsetOptions: GeometryOptions = {
-    ...options,
-    width: Math.max(0, options.width + offset * 2),
-    height: Math.max(0, options.height + offset * 2),
-    radius: options.radius === 0 ? 0 : Math.max(0, options.radius + offset),
-  };
+  // We use createOffsetShape for more accurate offset (especially for custom shapes)
+  // But we still need to respect holes if they exist.
+  // getDielineShape handles holes.
+  // The issue is: do holes shrink/expand with bleed?
+  // Usually, bleed is only for the outer cut. Holes are internal cuts.
+  // Internal cuts usually also have bleed if they are die-cut, but maybe different direction?
+  // For simplicity, let's assume we offset the FINAL shape (including holes).
+
+  // Actually, getDielineShape calls createBaseShape.
+  // Let's modify generateBleedZonePath to use createOffsetShape logic if possible,
+  // OR just perform offset on the final shape result.
+
+  // The previous logic was: create base shape with adjusted width/height/radius.
+  // This works for Rect/Circle.
+  // For Custom, we need createOffsetShape.
+
+  let shapeOffset: paper.PathItem;
+
+  if (options.shape === "custom") {
+    // For custom shape, we offset the base shape first, then apply holes?
+    // Or offset the final result?
+    // Bleed is usually "outside" the cut line.
+    // If we have a donut, bleed is outside the outer circle AND inside the inner circle?
+    // Or just outside the outer?
+    // Let's assume bleed expands the solid area.
+
+    // So we take the final shape (Original) and expand it.
+    // We can use the same Stroke Expansion trick on the final shape.
+
+    // Since shapeOriginal is already the final shape (Base - Holes),
+    // we can try to offset it directly.
+
+    const stroker = shapeOriginal.clone() as paper.Path;
+    stroker.strokeColor = new paper.Color("black");
+    stroker.strokeWidth = Math.abs(offset) * 2;
+    stroker.strokeJoin = "round";
+    stroker.strokeCap = "round";
+
+    let expanded: paper.Item;
+    try {
+      // @ts-ignore
+      expanded = stroker.expand({ stroke: true, fill: false, insert: false });
+    } catch (e) {
+      // Fallback
+      stroker.remove();
+      shapeOffset = shapeOriginal.clone();
+      // scaling fallback...
+      return shapeOffset.pathData; // Fail gracefully
+    }
+    stroker.remove();
 
-  const shapeOffset = getDielineShape(offsetOptions);
+    if (offset > 0) {
+      // @ts-ignore
+      shapeOffset = shapeOriginal.unite(expanded);
+    } else {
+      // @ts-ignore
+      shapeOffset = shapeOriginal.subtract(expanded);
+    }
+    expanded.remove();
+  } else {
+    // Legacy logic for standard shapes (still valid and fast)
+    // Adjust dimensions for offset
+    const offsetOptions: GeometryOptions = {
+      ...options,
+      width: Math.max(0, options.width + offset * 2),
+      height: Math.max(0, options.height + offset * 2),
+      radius: options.radius === 0 ? 0 : Math.max(0, options.radius + offset),
+    };
+    shapeOffset = getDielineShape(offsetOptions);
+  }
 
   // 3. Calculate Difference
   let bleedZone: paper.PathItem;
@@ -249,3 +451,14 @@ export function getNearestPointOnDieline(
 
   return result;
 }
+
+export function getPathBounds(pathData: string): {
+  width: number;
+  height: number;
+} {
+  const path = new paper.Path();
+  path.pathData = pathData;
+  const bounds = path.bounds;
+  path.remove();
+  return { width: bounds.width, height: bounds.height };
+}