@pooder/kit 3.5.0 → 4.0.0

package/dist/index.mjs

@@ -753,13 +753,16 @@ function createFeatureItem(feature, center) {
   }
   return item;
 }
-function getDielineShape(options) {
+function getPerimeterShape(options) {
   let mainShape = createBaseShape(options);
   const { features } = options;
   if (features && features.length > 0) {
+    const edgeFeatures = features.filter(
+      (f) => !f.placement || f.placement === "edge"
+    );
     const adds = [];
     const subtracts = [];
-    features.forEach((f) => {
+    edgeFeatures.forEach((f) => {
       const pos = resolveFeaturePosition(f, options);
       const center = new paper2.Point(pos.x, pos.y);
       const item = createFeatureItem(f, center);
@@ -798,14 +801,42 @@ function getDielineShape(options) {
   }
   return mainShape;
 }
+function applySurfaceFeatures(shape, features, options) {
+  const internalFeatures = features.filter((f) => f.placement === "internal");
+  if (internalFeatures.length === 0) return shape;
+  let result = shape;
+  for (const f of internalFeatures) {
+    const pos = resolveFeaturePosition(f, options);
+    const center = new paper2.Point(pos.x, pos.y);
+    const item = createFeatureItem(f, center);
+    try {
+      if (f.operation === "add") {
+        const temp = result.unite(item);
+        result.remove();
+        item.remove();
+        result = temp;
+      } else {
+        const temp = result.subtract(item);
+        result.remove();
+        item.remove();
+        result = temp;
+      }
+    } catch (e) {
+      console.error("Geometry: Failed to apply surface feature", e);
+      item.remove();
+    }
+  }
+  return result;
+}
 function generateDielinePath(options) {
   const paperWidth = options.canvasWidth || options.width * 2 || 2e3;
   const paperHeight = options.canvasHeight || options.height * 2 || 2e3;
   ensurePaper(paperWidth, paperHeight);
   paper2.project.activeLayer.removeChildren();
-  const mainShape = getDielineShape(options);
-  const pathData = mainShape.pathData;
-  mainShape.remove();
+  const perimeter = getPerimeterShape(options);
+  const finalShape = applySurfaceFeatures(perimeter, options.features, options);
+  const pathData = finalShape.pathData;
+  finalShape.remove();
   return pathData;
 }
 function generateMaskPath(options) {
@@ -816,7 +847,8 @@ function generateMaskPath(options) {
     point: [0, 0],
     size: [canvasWidth, canvasHeight]
   });
-  const mainShape = getDielineShape(options);
+  const perimeter = getPerimeterShape(options);
+  const mainShape = applySurfaceFeatures(perimeter, options.features, options);
   const finalMask = maskRect.subtract(mainShape);
   maskRect.remove();
   mainShape.remove();
@@ -829,8 +861,10 @@ function generateBleedZonePath(originalOptions, offsetOptions, offset) {
   const paperHeight = originalOptions.canvasHeight || originalOptions.height * 2 || 2e3;
   ensurePaper(paperWidth, paperHeight);
   paper2.project.activeLayer.removeChildren();
-  const shapeOriginal = getDielineShape(originalOptions);
-  const shapeOffset = getDielineShape(offsetOptions);
+  const pOriginal = getPerimeterShape(originalOptions);
+  const shapeOriginal = applySurfaceFeatures(pOriginal, originalOptions.features, originalOptions);
+  const pOffset = getPerimeterShape(offsetOptions);
+  const shapeOffset = applySurfaceFeatures(pOffset, offsetOptions.features, offsetOptions);
   let bleedZone;
   if (offset > 0) {
     bleedZone = shapeOffset.subtract(shapeOriginal);
@@ -1304,16 +1338,10 @@ var DielineTool = class {
         radius: (f.radius || 0) * featureScale
       };
     });
-    const originalFeatures = absoluteFeatures.filter(
-      (f) => !f.target || f.target === "original" || f.target === "both"
-    );
-    const offsetFeatures = absoluteFeatures.filter(
-      (f) => f.target === "offset" || f.target === "both"
-    );
+    const cutFeatures = absoluteFeatures.filter((f) => !f.skipCut);
     const cutW = Math.max(0, visualWidth + visualOffset * 2);
     const cutH = Math.max(0, visualHeight + visualOffset * 2);
     const cutR = visualRadius === 0 ? 0 : Math.max(0, visualRadius + visualOffset);
-    const maskFeatures = visualOffset !== 0 ? offsetFeatures : originalFeatures;
     const maskPathData = generateMaskPath({
       canvasWidth: canvasW,
       canvasHeight: canvasH,
@@ -1323,7 +1351,7 @@ var DielineTool = class {
       radius: cutR,
       x: cx,
       y: cy,
-      features: maskFeatures,
+      features: cutFeatures,
       pathData: this.state.pathData
     });
     const mask = new Path(maskPathData, {
@@ -1345,7 +1373,7 @@ var DielineTool = class {
         radius: cutR,
         x: cx,
         y: cy,
-        features: maskFeatures,
+        features: cutFeatures,
         // Use same features as mask for consistency
         pathData: this.state.pathData,
         canvasWidth: canvasW,
@@ -1371,7 +1399,7 @@ var DielineTool = class {
           radius: visualRadius,
           x: cx,
           y: cy,
-          features: originalFeatures,
+          features: cutFeatures,
           pathData: this.state.pathData,
           canvasWidth: canvasW,
           canvasHeight: canvasH
@@ -1383,7 +1411,7 @@ var DielineTool = class {
           radius: cutR,
           x: cx,
           y: cy,
-          features: offsetFeatures,
+          features: cutFeatures,
           pathData: this.state.pathData,
           canvasWidth: canvasW,
           canvasHeight: canvasH
@@ -1412,7 +1440,7 @@ var DielineTool = class {
         radius: cutR,
         x: cx,
         y: cy,
-        features: offsetFeatures,
+        features: cutFeatures,
         pathData: this.state.pathData,
         canvasWidth: canvasW,
         canvasHeight: canvasH
@@ -1436,7 +1464,7 @@ var DielineTool = class {
       radius: visualRadius,
       x: cx,
       y: cy,
-      features: originalFeatures,
+      features: absoluteFeatures,
       pathData: this.state.pathData,
       canvasWidth: canvasW,
       canvasHeight: canvasH
@@ -1536,9 +1564,7 @@ var DielineTool = class {
         radius: (f.radius || 0) * featureScale
       };
     });
-    const originalFeatures = absoluteFeatures.filter(
-      (f) => !f.target || f.target === "original" || f.target === "both"
-    );
+    const cutFeatures = absoluteFeatures.filter((f) => !f.skipCut);
     const generatedPathData = generateDielinePath({
       shape,
       width: visualWidth,
@@ -1546,7 +1572,7 @@ var DielineTool = class {
       radius: visualRadius,
       x: cx,
       y: cy,
-      features: originalFeatures,
+      features: cutFeatures,
       pathData,
       canvasWidth: canvasW,
       canvasHeight: canvasH
@@ -1747,10 +1773,15 @@ var FeatureTool = class {
     };
     this.features = [];
     this.isUpdatingConfig = false;
+    this.isToolActive = false;
     this.handleMoving = null;
     this.handleModified = null;
     this.handleDielineChange = null;
     this.currentGeometry = null;
+    this.onToolActivated = (event) => {
+      this.isToolActive = event.id === this.id;
+      this.updateVisibility();
+    };
     if (options) {
       Object.assign(this, options);
     }
@@ -1775,13 +1806,32 @@ var FeatureTool = class {
         }
       });
     }
+    context.eventBus.on("tool:activated", this.onToolActivated);
     this.setup();
   }
   deactivate(context) {
+    context.eventBus.off("tool:activated", this.onToolActivated);
     this.teardown();
     this.canvasService = void 0;
     this.context = void 0;
   }
+  updateVisibility() {
+    if (!this.canvasService) return;
+    const canvas = this.canvasService.canvas;
+    const markers = canvas.getObjects().filter((obj) => {
+      var _a;
+      return ((_a = obj.data) == null ? void 0 : _a.type) === "feature-marker";
+    });
+    markers.forEach((marker) => {
+      marker.set({
+        visible: this.isToolActive,
+        // Or just selectable: false if we want them visible but locked
+        selectable: this.isToolActive,
+        evented: this.isToolActive
+      });
+    });
+    canvas.requestRenderAll();
+  }
   contribute() {
     return {
       [ContributionPointIds4.COMMANDS]: [
@@ -1834,7 +1884,7 @@ var FeatureTool = class {
     const newFeature = {
       id: Date.now().toString(),
       operation: type,
-      target: "original",
+      placement: "edge",
       shape: "rect",
       x: 0.5,
       y: 0,
@@ -1868,6 +1918,7 @@ var FeatureTool = class {
       groupId,
       operation: "add",
       shape: "circle",
+      placement: "edge",
       x: 0.5,
       y: 0,
       radius: lugRadius,
@@ -1879,6 +1930,7 @@ var FeatureTool = class {
       groupId,
       operation: "subtract",
       shape: "circle",
+      placement: "edge",
       x: 0.5,
       y: 0,
       radius: holeRadius,
@@ -1895,14 +1947,6 @@ var FeatureTool = class {
     return true;
   }
   getGeometryForFeature(geometry, feature) {
-    if ((feature == null ? void 0 : feature.target) === "offset" && geometry.offset !== 0) {
-      return {
-        ...geometry,
-        width: geometry.width + geometry.offset * 2,
-        height: geometry.height + geometry.offset * 2,
-        radius: geometry.radius === 0 ? 0 : Math.max(0, geometry.radius + geometry.offset)
-      };
-    }
     return geometry;
   }
   setup() {
@@ -1959,7 +2003,7 @@ var FeatureTool = class {
         const markerStrokeWidth = (target.strokeWidth || 2) * (target.scaleX || 1);
         const minDim = Math.min(target.getScaledWidth(), target.getScaledHeight());
         const limit = Math.max(0, minDim / 2 - markerStrokeWidth);
-        const snapped = this.constrainPosition(p, geometry, limit);
+        const snapped = this.constrainPosition(p, geometry, limit, feature);
         target.set({
           left: snapped.x,
           top: snapped.y
@@ -2043,7 +2087,17 @@ var FeatureTool = class {
     objects.forEach((obj) => canvas.remove(obj));
     this.canvasService.requestRenderAll();
   }
-  constrainPosition(p, geometry, limit) {
+  constrainPosition(p, geometry, limit, feature) {
+    if (feature && feature.placement === "internal") {
+      const minX = geometry.x - geometry.width / 2;
+      const maxX = geometry.x + geometry.width / 2;
+      const minY = geometry.y - geometry.height / 2;
+      const maxY = geometry.y + geometry.height / 2;
+      return {
+        x: Math.max(minX, Math.min(maxX, p.x)),
+        y: Math.max(minY, Math.min(maxY, p.y))
+      };
+    }
     const nearest = getNearestPointOnDieline({ x: p.x, y: p.y }, {
       ...geometry,
       features: []
@@ -2168,7 +2222,9 @@ var FeatureTool = class {
       const pos = resolveFeaturePosition(feature, geometry2);
       const marker = createMarkerShape(feature, pos);
       marker.set({
-        selectable: true,
+        visible: this.isToolActive,
+        selectable: this.isToolActive,
+        evented: this.isToolActive,
         hasControls: false,
         hasBorders: false,
         hoverCursor: "move",
@@ -2211,7 +2267,9 @@ var FeatureTool = class {
         return createMarkerShape(feature, pos);
       });
       const groupObj = new Group(shapes, {
-        selectable: true,
+        visible: this.isToolActive,
+        selectable: this.isToolActive,
+        evented: this.isToolActive,
         hasControls: false,
         hasBorders: false,
         hoverCursor: "move",
@@ -2285,7 +2343,8 @@ var FeatureTool = class {
       const snapped = this.constrainPosition(
         new Point(marker.left, marker.top),
         geometry,
-        limit
+        limit,
+        feature
       );
       marker.set({ left: snapped.x, top: snapped.y });
       marker.setCoords();
@@ -2309,6 +2368,11 @@ var ImageTool = class {
     this.objectMap = /* @__PURE__ */ new Map();
     this.loadResolvers = /* @__PURE__ */ new Map();
     this.isUpdatingConfig = false;
+    this.isToolActive = false;
+    this.onToolActivated = (event) => {
+      this.isToolActive = event.id === this.id;
+      this.updateInteractivity();
+    };
   }
   activate(context) {
     this.context = context;
@@ -2317,6 +2381,7 @@ var ImageTool = class {
       console.warn("CanvasService not found for ImageTool");
       return;
     }
+    context.eventBus.on("tool:activated", this.onToolActivated);
     const configService = context.services.get(
       "ConfigurationService"
     );
@@ -2334,6 +2399,7 @@ var ImageTool = class {
     this.updateImages();
   }
   deactivate(context) {
+    context.eventBus.off("tool:activated", this.onToolActivated);
     if (this.canvasService) {
       const layer = this.canvasService.getLayer("user");
       if (layer) {
@@ -2347,6 +2413,18 @@ var ImageTool = class {
       this.context = void 0;
     }
   }
+  updateInteractivity() {
+    var _a;
+    this.objectMap.forEach((obj) => {
+      obj.set({
+        selectable: this.isToolActive,
+        evented: this.isToolActive,
+        hasControls: this.isToolActive,
+        hasBorders: this.isToolActive
+      });
+    });
+    (_a = this.canvasService) == null ? void 0 : _a.requestRenderAll();
+  }
   contribute() {
     return {
       [ContributionPointIds5.CONFIGURATIONS]: [
@@ -2534,6 +2612,14 @@ var ImageTool = class {
     const layout = this.getLayoutInfo();
     this.items.forEach((item, index) => {
       let obj = this.objectMap.get(item.id);
+      if (obj && obj.getSrc) {
+        const currentSrc = obj.getSrc();
+        if (currentSrc !== item.url) {
+          layer.remove(obj);
+          this.objectMap.delete(item.id);
+          obj = void 0;
+        }
+      }
       if (!obj) {
         this.loadImage(item, layer, layout);
       } else {
@@ -2590,7 +2676,11 @@ var ImageTool = class {
         originY: "center",
         data: { id: item.id },
         uniformScaling: true,
-        lockScalingFlip: true
+        lockScalingFlip: true,
+        selectable: this.isToolActive,
+        evented: this.isToolActive,
+        hasControls: this.isToolActive,
+        hasBorders: this.isToolActive
       });
       image.setControlsVisibility({
         mt: false,
@@ -3447,6 +3537,24 @@ var CanvasService = class {
         ...options
       });
     }
+    if (options == null ? void 0 : options.eventBus) {
+      this.setEventBus(options.eventBus);
+    }
+  }
+  setEventBus(eventBus) {
+    this.eventBus = eventBus;
+    this.setupEvents();
+  }
+  setupEvents() {
+    if (!this.eventBus) return;
+    const bus = this.eventBus;
+    const forward = (name) => (e) => bus.emit(name, e);
+    this.canvas.on("selection:created", forward("selection:created"));
+    this.canvas.on("selection:updated", forward("selection:updated"));
+    this.canvas.on("selection:cleared", forward("selection:cleared"));
+    this.canvas.on("object:modified", forward("object:modified"));
+    this.canvas.on("object:added", forward("object:added"));
+    this.canvas.on("object:removed", forward("object:removed"));
   }
   dispose() {
     this.canvas.dispose();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pooder/kit",
-  "version": "3.5.0",
+  "version": "4.0.0",
   "description": "Standard plugins for Pooder editor",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -19,7 +19,7 @@
   "dependencies": {
     "paper": "^0.12.18",
     "fabric": "^7.0.0",
-    "@pooder/core": "1.2.0"
+    "@pooder/core": "2.0.0"
   },
   "scripts": {
     "build": "tsup src/index.ts --format cjs,esm --dts",

package/src/CanvasService.ts

@@ -1,65 +1,89 @@
-import { Canvas, Group, FabricObject } from "fabric";
-import { Service } from "@pooder/core";
-
-export default class CanvasService implements Service {
-  public canvas: Canvas;
-
-  constructor(el: HTMLCanvasElement | string | Canvas, options?: any) {
-    if (el instanceof Canvas) {
-      this.canvas = el;
-    } else {
-      this.canvas = new Canvas(el, {
-        preserveObjectStacking: true,
-        ...options,
-      });
-    }
-  }
-
-  dispose() {
-    this.canvas.dispose();
-  }
-
-  /**
-   * Get a layer (Group) by its ID.
-   * We assume layers are Groups directly on the canvas with a data.id property.
-   */
-  getLayer(id: string): Group | undefined {
-    return this.canvas.getObjects().find((obj: any) => obj.data?.id === id) as
-      | Group
-      | undefined;
-  }
-
-  /**
-   * Create a layer (Group) with the given ID if it doesn't exist.
-   */
-  createLayer(id: string, options: any = {}): Group {
-    let layer = this.getLayer(id);
-    if (!layer) {
-      const defaultOptions = {
-        selectable: false,
-        evented: false,
-        ...options,
-        data: { ...options.data, id },
-      };
-      layer = new Group([], defaultOptions);
-      this.canvas.add(layer);
-    }
-    return layer;
-  }
-
-  /**
-   * Find an object by ID, optionally within a specific layer.
-   */
-  getObject(id: string, layerId?: string): FabricObject | undefined {
-    if (layerId) {
-      const layer = this.getLayer(layerId);
-      if (!layer) return undefined;
-      return layer.getObjects().find((obj: any) => obj.data?.id === id);
-    }
-    return this.canvas.getObjects().find((obj: any) => obj.data?.id === id);
-  }
-
-  requestRenderAll() {
-    this.canvas.requestRenderAll();
-  }
-}
+import { Canvas, Group, FabricObject } from "fabric";
+import { Service, EventBus } from "@pooder/core";
+
+export default class CanvasService implements Service {
+  public canvas: Canvas;
+  private eventBus?: EventBus;
+
+  constructor(el: HTMLCanvasElement | string | Canvas, options?: any) {
+    if (el instanceof Canvas) {
+      this.canvas = el;
+    } else {
+      this.canvas = new Canvas(el, {
+        preserveObjectStacking: true,
+        ...options,
+      });
+    }
+    
+    if (options?.eventBus) {
+      this.setEventBus(options.eventBus);
+    }
+  }
+
+  setEventBus(eventBus: EventBus) {
+    this.eventBus = eventBus;
+    this.setupEvents();
+  }
+
+  private setupEvents() {
+    if (!this.eventBus) return;
+    const bus = this.eventBus;
+
+    const forward = (name: string) => (e: any) => bus.emit(name, e);
+
+    this.canvas.on("selection:created", forward("selection:created"));
+    this.canvas.on("selection:updated", forward("selection:updated"));
+    this.canvas.on("selection:cleared", forward("selection:cleared"));
+    this.canvas.on("object:modified", forward("object:modified"));
+    this.canvas.on("object:added", forward("object:added"));
+    this.canvas.on("object:removed", forward("object:removed"));
+  }
+
+  dispose() {
+    this.canvas.dispose();
+  }
+
+  /**
+   * Get a layer (Group) by its ID.
+   * We assume layers are Groups directly on the canvas with a data.id property.
+   */
+  getLayer(id: string): Group | undefined {
+    return this.canvas.getObjects().find((obj: any) => obj.data?.id === id) as
+      | Group
+      | undefined;
+  }
+
+  /**
+   * Create a layer (Group) with the given ID if it doesn't exist.
+   */
+  createLayer(id: string, options: any = {}): Group {
+    let layer = this.getLayer(id);
+    if (!layer) {
+      const defaultOptions = {
+        selectable: false,
+        evented: false,
+        ...options,
+        data: { ...options.data, id },
+      };
+      layer = new Group([], defaultOptions);
+      this.canvas.add(layer);
+    }
+    return layer;
+  }
+
+  /**
+   * Find an object by ID, optionally within a specific layer.
+   */
+  getObject(id: string, layerId?: string): FabricObject | undefined {
+    if (layerId) {
+      const layer = this.getLayer(layerId);
+      if (!layer) return undefined;
+      return layer.getObjects().find((obj: any) => obj.data?.id === id);
+    }
+    return this.canvas.getObjects().find((obj: any) => obj.data?.id === id);
+  }
+
+  requestRenderAll() {
+    this.canvas.requestRenderAll();
+  }
+}