@pooder/kit 3.5.0 → 4.1.0

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);
@@ -906,6 +940,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) {
@@ -1200,6 +1333,37 @@ var DielineTool = class {
         }
       ],
       [import_core2.ContributionPointIds.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",
@@ -1344,16 +1508,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 +1521,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 +1543,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 +1569,7 @@ var DielineTool = class {
           radius: visualRadius,
           x: cx,
           y: cy,
-          features: originalFeatures,
+          features: cutFeatures,
           pathData: this.state.pathData,
           canvasWidth: canvasW,
           canvasHeight: canvasH
@@ -1423,7 +1581,7 @@ var DielineTool = class {
           radius: cutR,
           x: cx,
           y: cy,
-          features: offsetFeatures,
+          features: cutFeatures,
           pathData: this.state.pathData,
           canvasWidth: canvasW,
           canvasHeight: canvasH
@@ -1452,7 +1610,7 @@ var DielineTool = class {
         radius: cutR,
         x: cx,
         y: cy,
-        features: offsetFeatures,
+        features: cutFeatures,
         pathData: this.state.pathData,
         canvasWidth: canvasW,
         canvasHeight: canvasH
@@ -1476,7 +1634,7 @@ var DielineTool = class {
       radius: visualRadius,
       x: cx,
       y: cy,
-      features: originalFeatures,
+      features: absoluteFeatures,
       pathData: this.state.pathData,
       canvasWidth: canvasW,
       canvasHeight: canvasH
@@ -1576,9 +1734,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 +1742,7 @@ var DielineTool = class {
       radius: visualRadius,
       x: cx,
       y: cy,
-      features: originalFeatures,
+      features: cutFeatures,
       pathData,
       canvasWidth: canvasW,
       canvasHeight: canvasH
@@ -1783,10 +1939,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 +1972,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 +2050,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 +2084,7 @@ var FeatureTool = class {
       groupId,
       operation: "add",
       shape: "circle",
+      placement: "edge",
       x: 0.5,
       y: 0,
       radius: lugRadius,
@@ -1915,6 +2096,7 @@ var FeatureTool = class {
       groupId,
       operation: "subtract",
       shape: "circle",
+      placement: "edge",
       x: 0.5,
       y: 0,
       radius: holeRadius,
@@ -1931,14 +2113,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 +2169,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 +2253,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: []
@@ -2204,7 +2405,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 +2450,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 +2526,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 +2549,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 +2562,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 +2580,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 +2594,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 +2793,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 +2857,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 +3712,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();