@pooder/kit 3.5.0 → 4.1.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);
@@ -866,6 +900,105 @@ function getPathBounds(pathData) {
   };
 }
 
+// src/constraints.ts
+var ConstraintRegistry = class {
+  static register(type, handler) {
+    this.handlers.set(type, handler);
+  }
+  static apply(x, y, feature, context) {
+    if (!feature.constraints || !feature.constraints.type) {
+      return { x, y };
+    }
+    const handler = this.handlers.get(feature.constraints.type);
+    if (handler) {
+      return handler(x, y, feature, context);
+    }
+    return { x, y };
+  }
+};
+ConstraintRegistry.handlers = /* @__PURE__ */ new Map();
+var edgeConstraint = (x, y, feature, context) => {
+  var _a;
+  const { dielineWidth, dielineHeight } = context;
+  const params = ((_a = feature.constraints) == null ? void 0 : _a.params) || {};
+  const allowedEdges = params.allowedEdges || [
+    "top",
+    "bottom",
+    "left",
+    "right"
+  ];
+  const confine = params.confine || false;
+  const offset = params.offset || 0;
+  const distances = [];
+  if (allowedEdges.includes("top"))
+    distances.push({ edge: "top", dist: y * dielineHeight });
+  if (allowedEdges.includes("bottom"))
+    distances.push({ edge: "bottom", dist: (1 - y) * dielineHeight });
+  if (allowedEdges.includes("left"))
+    distances.push({ edge: "left", dist: x * dielineWidth });
+  if (allowedEdges.includes("right"))
+    distances.push({ edge: "right", dist: (1 - x) * dielineWidth });
+  if (distances.length === 0) return { x, y };
+  distances.sort((a, b) => a.dist - b.dist);
+  const nearest = distances[0].edge;
+  let newX = x;
+  let newY = y;
+  const fw = feature.width || 0;
+  const fh = feature.height || 0;
+  switch (nearest) {
+    case "top":
+      newY = 0 + offset / dielineHeight;
+      if (confine) {
+        const minX = fw / 2 / dielineWidth;
+        const maxX = 1 - minX;
+        newX = Math.max(minX, Math.min(newX, maxX));
+      }
+      break;
+    case "bottom":
+      newY = 1 - offset / dielineHeight;
+      if (confine) {
+        const minX = fw / 2 / dielineWidth;
+        const maxX = 1 - minX;
+        newX = Math.max(minX, Math.min(newX, maxX));
+      }
+      break;
+    case "left":
+      newX = 0 + offset / dielineWidth;
+      if (confine) {
+        const minY = fh / 2 / dielineHeight;
+        const maxY = 1 - minY;
+        newY = Math.max(minY, Math.min(newY, maxY));
+      }
+      break;
+    case "right":
+      newX = 1 - offset / dielineWidth;
+      if (confine) {
+        const minY = fh / 2 / dielineHeight;
+        const maxY = 1 - minY;
+        newY = Math.max(minY, Math.min(newY, maxY));
+      }
+      break;
+  }
+  return { x: newX, y: newY };
+};
+var internalConstraint = (x, y, feature, context) => {
+  var _a;
+  const { dielineWidth, dielineHeight } = context;
+  const params = ((_a = feature.constraints) == null ? void 0 : _a.params) || {};
+  const margin = params.margin || 0;
+  const fw = feature.width || 0;
+  const fh = feature.height || 0;
+  const minX = (margin + fw / 2) / dielineWidth;
+  const maxX = 1 - (margin + fw / 2) / dielineWidth;
+  const minY = (margin + fh / 2) / dielineHeight;
+  const maxY = 1 - (margin + fh / 2) / dielineHeight;
+  const clampedX = minX > maxX ? 0.5 : Math.max(minX, Math.min(x, maxX));
+  const clampedY = minY > maxY ? 0.5 : Math.max(minY, Math.min(y, maxY));
+  return { x: clampedX, y: clampedY };
+};
+ConstraintRegistry.register("edge", edgeConstraint);
+ConstraintRegistry.register("internal", internalConstraint);
+
 // src/dieline.ts
 var DielineTool = class {
   constructor(options) {
@@ -1160,6 +1293,37 @@ var DielineTool = class {
         }
       ],
       [ContributionPointIds2.COMMANDS]: [
+        {
+          command: "updateFeaturePosition",
+          title: "Update Feature Position",
+          handler: (groupId, x, y) => {
+            var _a;
+            const configService = (_a = this.context) == null ? void 0 : _a.services.get(
+              "ConfigurationService"
+            );
+            if (!configService) return;
+            const features = configService.get("dieline.features") || [];
+            const dielineWidth = configService.get("dieline.width") || 500;
+            const dielineHeight = configService.get("dieline.height") || 500;
+            let changed = false;
+            const newFeatures = features.map((f) => {
+              if (f.groupId === groupId) {
+                const constrained = ConstraintRegistry.apply(x, y, f, {
+                  dielineWidth,
+                  dielineHeight
+                });
+                if (f.x !== constrained.x || f.y !== constrained.y) {
+                  changed = true;
+                  return { ...f, x: constrained.x, y: constrained.y };
+                }
+              }
+              return f;
+            });
+            if (changed) {
+              configService.update("dieline.features", newFeatures);
+            }
+          }
+        },
         {
           command: "getGeometry",
           title: "Get Geometry",
@@ -1304,16 +1468,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 +1481,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 +1503,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 +1529,7 @@ var DielineTool = class {
           radius: visualRadius,
           x: cx,
           y: cy,
-          features: originalFeatures,
+          features: cutFeatures,
           pathData: this.state.pathData,
           canvasWidth: canvasW,
           canvasHeight: canvasH
@@ -1383,7 +1541,7 @@ var DielineTool = class {
           radius: cutR,
           x: cx,
           y: cy,
-          features: offsetFeatures,
+          features: cutFeatures,
           pathData: this.state.pathData,
           canvasWidth: canvasW,
           canvasHeight: canvasH
@@ -1412,7 +1570,7 @@ var DielineTool = class {
         radius: cutR,
         x: cx,
         y: cy,
-        features: offsetFeatures,
+        features: cutFeatures,
         pathData: this.state.pathData,
         canvasWidth: canvasW,
         canvasHeight: canvasH
@@ -1436,7 +1594,7 @@ var DielineTool = class {
       radius: visualRadius,
       x: cx,
       y: cy,
-      features: originalFeatures,
+      features: absoluteFeatures,
       pathData: this.state.pathData,
       canvasWidth: canvasW,
       canvasHeight: canvasH
@@ -1536,9 +1694,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 +1702,7 @@ var DielineTool = class {
       radius: visualRadius,
       x: cx,
       y: cy,
-      features: originalFeatures,
+      features: cutFeatures,
       pathData,
       canvasWidth: canvasW,
       canvasHeight: canvasH
@@ -1747,10 +1903,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 +1936,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 +2014,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 +2048,7 @@ var FeatureTool = class {
       groupId,
       operation: "add",
       shape: "circle",
+      placement: "edge",
       x: 0.5,
       y: 0,
       radius: lugRadius,
@@ -1879,6 +2060,7 @@ var FeatureTool = class {
       groupId,
       operation: "subtract",
       shape: "circle",
+      placement: "edge",
       x: 0.5,
       y: 0,
       radius: holeRadius,
@@ -1895,14 +2077,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 +2133,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 +2217,34 @@ var FeatureTool = class {
     objects.forEach((obj) => canvas.remove(obj));
     this.canvasService.requestRenderAll();
   }
-  constrainPosition(p, geometry, limit) {
+  constrainPosition(p, geometry, limit, feature) {
+    if (feature && feature.constraints) {
+      const minX = geometry.x - geometry.width / 2;
+      const minY = geometry.y - geometry.height / 2;
+      const nx = geometry.width > 0 ? (p.x - minX) / geometry.width : 0.5;
+      const ny = geometry.height > 0 ? (p.y - minY) / geometry.height : 0.5;
+      const scale2 = geometry.scale || 1;
+      const dielineWidth = geometry.width / scale2;
+      const dielineHeight = geometry.height / scale2;
+      const constrained = ConstraintRegistry.apply(nx, ny, feature, {
+        dielineWidth,
+        dielineHeight
+      });
+      return {
+        x: minX + constrained.x * geometry.width,
+        y: minY + constrained.y * geometry.height
+      };
+    }
+    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 +2369,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 +2414,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 +2490,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 +2515,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 +2528,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 +2546,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 +2560,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 +2759,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 +2823,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 +3684,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.1.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",