@pooder/kit 3.5.0 → 4.0.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @pooder/kit
 
+## 4.0.0
+
+### Major Changes
+
+- Virtual Features
+
+### Patch Changes
+
+- Updated dependencies
+  - @pooder/core@2.0.0
+
 ## 3.5.0
 
 ### Minor Changes

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { Extension, ExtensionContext, ContributionPointIds, ConfigurationContribution, CommandContribution, Service } from '@pooder/core';
+import { Extension, ExtensionContext, ContributionPointIds, ConfigurationContribution, CommandContribution, Service, EventBus } from '@pooder/core';
 import { Canvas, Group, FabricObject } from 'fabric';
 
 declare class BackgroundTool implements Extension {
@@ -27,7 +27,7 @@ type Unit = "px" | "mm" | "cm" | "in";
 
 type FeatureOperation = "add" | "subtract";
 type FeatureShape = "rect" | "circle";
-interface EdgeFeature {
+interface DielineFeature {
     id: string;
     groupId?: string;
     operation: FeatureOperation;
@@ -38,9 +38,10 @@ interface EdgeFeature {
     height?: number;
     radius?: number;
     rotation?: number;
-    target?: "original" | "offset" | "both";
+    placement?: "edge" | "internal";
     color?: string;
     strokeDash?: number[];
+    skipCut?: boolean;
 }
 
 interface DielineGeometry {
@@ -76,7 +77,7 @@ interface DielineState {
     insideColor: string;
     outsideColor: string;
     showBleedLines: boolean;
-    features: EdgeFeature[];
+    features: DielineFeature[];
     pathData?: string;
 }
 declare class DielineTool implements Extension {
@@ -135,15 +136,18 @@ declare class FeatureTool implements Extension {
     private canvasService?;
     private context?;
     private isUpdatingConfig;
+    private isToolActive;
     private handleMoving;
     private handleModified;
     private handleDielineChange;
     private currentGeometry;
     constructor(options?: Partial<{
-        features: EdgeFeature[];
+        features: DielineFeature[];
     }>);
     activate(context: ExtensionContext): void;
     deactivate(context: ExtensionContext): void;
+    private onToolActivated;
+    private updateVisibility;
     contribute(): {
         [ContributionPointIds.COMMANDS]: CommandContribution[];
     };
@@ -178,8 +182,11 @@ declare class ImageTool implements Extension {
     private canvasService?;
     private context?;
     private isUpdatingConfig;
+    private isToolActive;
     activate(context: ExtensionContext): void;
     deactivate(context: ExtensionContext): void;
+    private onToolActivated;
+    private updateInteractivity;
     contribute(): {
         [ContributionPointIds.CONFIGURATIONS]: ConfigurationContribution[];
         [ContributionPointIds.COMMANDS]: CommandContribution[];
@@ -288,7 +295,10 @@ declare class MirrorTool implements Extension {
 
 declare class CanvasService implements Service {
     canvas: Canvas;
+    private eventBus?;
     constructor(el: HTMLCanvasElement | string | Canvas, options?: any);
+    setEventBus(eventBus: EventBus): void;
+    private setupEvents;
     dispose(): void;
     /**
      * Get a layer (Group) by its ID.

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { Extension, ExtensionContext, ContributionPointIds, ConfigurationContribution, CommandContribution, Service } from '@pooder/core';
+import { Extension, ExtensionContext, ContributionPointIds, ConfigurationContribution, CommandContribution, Service, EventBus } from '@pooder/core';
 import { Canvas, Group, FabricObject } from 'fabric';
 
 declare class BackgroundTool implements Extension {
@@ -27,7 +27,7 @@ type Unit = "px" | "mm" | "cm" | "in";
 
 type FeatureOperation = "add" | "subtract";
 type FeatureShape = "rect" | "circle";
-interface EdgeFeature {
+interface DielineFeature {
     id: string;
     groupId?: string;
     operation: FeatureOperation;
@@ -38,9 +38,10 @@ interface EdgeFeature {
     height?: number;
     radius?: number;
     rotation?: number;
-    target?: "original" | "offset" | "both";
+    placement?: "edge" | "internal";
     color?: string;
     strokeDash?: number[];
+    skipCut?: boolean;
 }
 
 interface DielineGeometry {
@@ -76,7 +77,7 @@ interface DielineState {
     insideColor: string;
     outsideColor: string;
     showBleedLines: boolean;
-    features: EdgeFeature[];
+    features: DielineFeature[];
     pathData?: string;
 }
 declare class DielineTool implements Extension {
@@ -135,15 +136,18 @@ declare class FeatureTool implements Extension {
     private canvasService?;
     private context?;
     private isUpdatingConfig;
+    private isToolActive;
     private handleMoving;
     private handleModified;
     private handleDielineChange;
     private currentGeometry;
     constructor(options?: Partial<{
-        features: EdgeFeature[];
+        features: DielineFeature[];
     }>);
     activate(context: ExtensionContext): void;
     deactivate(context: ExtensionContext): void;
+    private onToolActivated;
+    private updateVisibility;
     contribute(): {
         [ContributionPointIds.COMMANDS]: CommandContribution[];
     };
@@ -178,8 +182,11 @@ declare class ImageTool implements Extension {
     private canvasService?;
     private context?;
     private isUpdatingConfig;
+    private isToolActive;
     activate(context: ExtensionContext): void;
     deactivate(context: ExtensionContext): void;
+    private onToolActivated;
+    private updateInteractivity;
     contribute(): {
         [ContributionPointIds.CONFIGURATIONS]: ConfigurationContribution[];
         [ContributionPointIds.COMMANDS]: CommandContribution[];
@@ -288,7 +295,10 @@ declare class MirrorTool implements Extension {
 
 declare class CanvasService implements Service {
     canvas: Canvas;
+    private eventBus?;
     constructor(el: HTMLCanvasElement | string | Canvas, options?: any);
+    setEventBus(eventBus: EventBus): void;
+    private setupEvents;
     dispose(): void;
     /**
      * Get a layer (Group) by its ID.

package/dist/index.js

@@ -793,13 +793,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 import_paper2.default.Point(pos.x, pos.y);
       const item = createFeatureItem(f, center);
@@ -838,14 +841,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 import_paper2.default.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);
   import_paper2.default.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) {
@@ -856,7 +887,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();
@@ -869,8 +901,10 @@ function generateBleedZonePath(originalOptions, offsetOptions, offset) {
   const paperHeight = originalOptions.canvasHeight || originalOptions.height * 2 || 2e3;
   ensurePaper(paperWidth, paperHeight);
   import_paper2.default.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);
@@ -1344,16 +1378,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,
@@ -1363,7 +1391,7 @@ var DielineTool = class {
       radius: cutR,
       x: cx,
       y: cy,
-      features: maskFeatures,
+      features: cutFeatures,
       pathData: this.state.pathData
     });
     const mask = new import_fabric2.Path(maskPathData, {
@@ -1385,7 +1413,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,
@@ -1411,7 +1439,7 @@ var DielineTool = class {
           radius: visualRadius,
           x: cx,
           y: cy,
-          features: originalFeatures,
+          features: cutFeatures,
           pathData: this.state.pathData,
           canvasWidth: canvasW,
           canvasHeight: canvasH
@@ -1423,7 +1451,7 @@ var DielineTool = class {
           radius: cutR,
           x: cx,
           y: cy,
-          features: offsetFeatures,
+          features: cutFeatures,
           pathData: this.state.pathData,
           canvasWidth: canvasW,
           canvasHeight: canvasH
@@ -1452,7 +1480,7 @@ var DielineTool = class {
         radius: cutR,
         x: cx,
         y: cy,
-        features: offsetFeatures,
+        features: cutFeatures,
         pathData: this.state.pathData,
         canvasWidth: canvasW,
         canvasHeight: canvasH
@@ -1476,7 +1504,7 @@ var DielineTool = class {
       radius: visualRadius,
       x: cx,
       y: cy,
-      features: originalFeatures,
+      features: absoluteFeatures,
       pathData: this.state.pathData,
       canvasWidth: canvasW,
       canvasHeight: canvasH
@@ -1576,9 +1604,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,
@@ -1586,7 +1612,7 @@ var DielineTool = class {
       radius: visualRadius,
       x: cx,
       y: cy,
-      features: originalFeatures,
+      features: cutFeatures,
       pathData,
       canvasWidth: canvasW,
       canvasHeight: canvasH
@@ -1783,10 +1809,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);
     }
@@ -1811,13 +1842,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 {
       [import_core4.ContributionPointIds.COMMANDS]: [
@@ -1870,7 +1920,7 @@ var FeatureTool = class {
     const newFeature = {
       id: Date.now().toString(),
       operation: type,
-      target: "original",
+      placement: "edge",
       shape: "rect",
       x: 0.5,
       y: 0,
@@ -1904,6 +1954,7 @@ var FeatureTool = class {
       groupId,
       operation: "add",
       shape: "circle",
+      placement: "edge",
       x: 0.5,
       y: 0,
       radius: lugRadius,
@@ -1915,6 +1966,7 @@ var FeatureTool = class {
       groupId,
       operation: "subtract",
       shape: "circle",
+      placement: "edge",
       x: 0.5,
       y: 0,
       radius: holeRadius,
@@ -1931,14 +1983,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() {
@@ -1995,7 +2039,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
@@ -2079,7 +2123,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: []
@@ -2204,7 +2258,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",
@@ -2247,7 +2303,9 @@ var FeatureTool = class {
         return createMarkerShape(feature, pos);
       });
       const groupObj = new import_fabric4.Group(shapes, {
-        selectable: true,
+        visible: this.isToolActive,
+        selectable: this.isToolActive,
+        evented: this.isToolActive,
         hasControls: false,
         hasBorders: false,
         hoverCursor: "move",
@@ -2321,7 +2379,8 @@ var FeatureTool = class {
       const snapped = this.constrainPosition(
         new import_fabric4.Point(marker.left, marker.top),
         geometry,
-        limit
+        limit,
+        feature
       );
       marker.set({ left: snapped.x, top: snapped.y });
       marker.setCoords();
@@ -2343,6 +2402,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;
@@ -2351,6 +2415,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"
     );
@@ -2368,6 +2433,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) {
@@ -2381,6 +2447,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 {
       [import_core5.ContributionPointIds.CONFIGURATIONS]: [
@@ -2568,6 +2646,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 {
@@ -2624,7 +2710,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,
@@ -3475,6 +3565,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();