@pooder/kit 6.0.0 → 6.0.1

package/dist/index.mjs

@@ -923,9 +923,11 @@ import {
 } from "@pooder/core";
 import {
   Canvas as FabricCanvas,
+  Control,
   Image as FabricImage2,
   Pattern,
-  Point
+  Point,
+  controlsUtils
 } from "fabric";
 
 // src/extensions/geometry.ts
@@ -1550,6 +1552,34 @@ function getPathBounds(pathData) {
 // src/extensions/image.ts
 var IMAGE_OBJECT_LAYER_ID = "image.user";
 var IMAGE_OVERLAY_LAYER_ID = "image-overlay";
+var IMAGE_DEFAULT_CONTROL_CAPABILITIES = [
+  "rotate",
+  "scale"
+];
+var IMAGE_CONTROL_DESCRIPTORS = [
+  {
+    key: "tl",
+    capability: "rotate",
+    create: () => new Control({
+      x: -0.5,
+      y: -0.5,
+      actionName: "rotate",
+      actionHandler: controlsUtils.rotationWithSnapping,
+      cursorStyleHandler: controlsUtils.rotationStyleHandler
+    })
+  },
+  {
+    key: "br",
+    capability: "scale",
+    create: () => new Control({
+      x: 0.5,
+      y: 0.5,
+      actionName: "scale",
+      actionHandler: controlsUtils.scalingEqually,
+      cursorStyleHandler: controlsUtils.scaleCursorStyleHandler
+    })
+  }
+];
 var ImageTool = class {
   constructor() {
     this.id = "pooder.kit.image";
@@ -1568,6 +1598,7 @@ var ImageTool = class {
     this.renderSeq = 0;
     this.imageSpecs = [];
     this.overlaySpecs = [];
+    this.imageControlsByCapabilityKey = /* @__PURE__ */ new Map();
     this.onToolActivated = (event) => {
       const before = this.isToolActive;
       this.syncToolActiveFromWorkbench(event.id);
@@ -1732,7 +1763,10 @@ var ImageTool = class {
           this.updateImages();
           return;
         }
-        if (e.key.startsWith("size.") || e.key.startsWith("image.frame.")) {
+        if (e.key.startsWith("size.") || e.key.startsWith("image.frame.") || e.key.startsWith("image.control.")) {
+          if (e.key.startsWith("image.control.")) {
+            this.imageControlsByCapabilityKey.clear();
+          }
           this.updateImages();
         }
       });
@@ -1760,6 +1794,7 @@ var ImageTool = class {
     this.cropShapeHatchPatternKey = void 0;
     this.imageSpecs = [];
     this.overlaySpecs = [];
+    this.imageControlsByCapabilityKey.clear();
     this.clearRenderedImages();
     (_b = this.renderProducerDisposable) == null ? void 0 : _b.dispose();
     this.renderProducerDisposable = void 0;
@@ -1782,6 +1817,90 @@ var ImageTool = class {
   isImageEditingVisible() {
     return this.isToolActive || this.isImageSelectionActive || !!this.focusedImageId;
   }
+  getEnabledImageControlCapabilities() {
+    return IMAGE_DEFAULT_CONTROL_CAPABILITIES;
+  }
+  getImageControls(capabilities) {
+    const normalized = [...new Set(capabilities)].sort();
+    const cacheKey = normalized.join("|");
+    const cached = this.imageControlsByCapabilityKey.get(cacheKey);
+    if (cached) {
+      return cached;
+    }
+    const enabled = new Set(normalized);
+    const controls = {};
+    IMAGE_CONTROL_DESCRIPTORS.forEach((descriptor) => {
+      if (!enabled.has(descriptor.capability)) return;
+      controls[descriptor.key] = descriptor.create();
+    });
+    this.imageControlsByCapabilityKey.set(cacheKey, controls);
+    return controls;
+  }
+  getImageControlVisualConfig() {
+    var _a, _b, _c, _d;
+    const cornerSizeRaw = Number(
+      (_a = this.getConfig("image.control.cornerSize", 14)) != null ? _a : 14
+    );
+    const touchCornerSizeRaw = Number(
+      (_b = this.getConfig("image.control.touchCornerSize", 24)) != null ? _b : 24
+    );
+    const borderScaleFactorRaw = Number(
+      (_c = this.getConfig("image.control.borderScaleFactor", 1.5)) != null ? _c : 1.5
+    );
+    const paddingRaw = Number(
+      (_d = this.getConfig("image.control.padding", 0)) != null ? _d : 0
+    );
+    const cornerStyleRaw = this.getConfig(
+      "image.control.cornerStyle",
+      "circle"
+    ) || "circle";
+    const cornerStyle = cornerStyleRaw === "rect" ? "rect" : "circle";
+    return {
+      cornerSize: Number.isFinite(cornerSizeRaw) ? Math.max(4, Math.min(64, cornerSizeRaw)) : 14,
+      touchCornerSize: Number.isFinite(touchCornerSizeRaw) ? Math.max(8, Math.min(96, touchCornerSizeRaw)) : 24,
+      cornerStyle,
+      cornerColor: this.getConfig("image.control.cornerColor", "#ffffff") || "#ffffff",
+      cornerStrokeColor: this.getConfig("image.control.cornerStrokeColor", "#1677ff") || "#1677ff",
+      transparentCorners: !!this.getConfig(
+        "image.control.transparentCorners",
+        false
+      ),
+      borderColor: this.getConfig("image.control.borderColor", "#1677ff") || "#1677ff",
+      borderScaleFactor: Number.isFinite(borderScaleFactorRaw) ? Math.max(0.5, Math.min(8, borderScaleFactorRaw)) : 1.5,
+      padding: Number.isFinite(paddingRaw) ? Math.max(0, Math.min(64, paddingRaw)) : 0
+    };
+  }
+  applyImageObjectInteractionState(obj) {
+    var _a;
+    if (!obj) return;
+    const visible = this.isImageEditingVisible();
+    const visual = this.getImageControlVisualConfig();
+    obj.set({
+      selectable: visible,
+      evented: visible,
+      hasControls: visible,
+      hasBorders: visible,
+      lockScalingFlip: true,
+      cornerSize: visual.cornerSize,
+      touchCornerSize: visual.touchCornerSize,
+      cornerStyle: visual.cornerStyle,
+      cornerColor: visual.cornerColor,
+      cornerStrokeColor: visual.cornerStrokeColor,
+      transparentCorners: visual.transparentCorners,
+      borderColor: visual.borderColor,
+      borderScaleFactor: visual.borderScaleFactor,
+      padding: visual.padding
+    });
+    obj.controls = this.getImageControls(
+      this.getEnabledImageControlCapabilities()
+    );
+    (_a = obj.setCoords) == null ? void 0 : _a.call(obj);
+  }
+  refreshImageObjectInteractionState() {
+    this.getImageObjects().forEach(
+      (obj) => this.applyImageObjectInteractionState(obj)
+    );
+  }
   isDebugEnabled() {
     return !!this.getConfig("image.debug", false);
   }
@@ -1824,6 +1943,73 @@ var ImageTool = class {
           label: "Image Debug Log",
           default: false
         },
+        {
+          id: "image.control.cornerSize",
+          type: "number",
+          label: "Image Control Corner Size",
+          min: 4,
+          max: 64,
+          step: 1,
+          default: 14
+        },
+        {
+          id: "image.control.touchCornerSize",
+          type: "number",
+          label: "Image Control Touch Corner Size",
+          min: 8,
+          max: 96,
+          step: 1,
+          default: 24
+        },
+        {
+          id: "image.control.cornerStyle",
+          type: "select",
+          label: "Image Control Corner Style",
+          options: ["circle", "rect"],
+          default: "circle"
+        },
+        {
+          id: "image.control.cornerColor",
+          type: "color",
+          label: "Image Control Corner Color",
+          default: "#ffffff"
+        },
+        {
+          id: "image.control.cornerStrokeColor",
+          type: "color",
+          label: "Image Control Corner Stroke Color",
+          default: "#1677ff"
+        },
+        {
+          id: "image.control.transparentCorners",
+          type: "boolean",
+          label: "Image Control Transparent Corners",
+          default: false
+        },
+        {
+          id: "image.control.borderColor",
+          type: "color",
+          label: "Image Control Border Color",
+          default: "#1677ff"
+        },
+        {
+          id: "image.control.borderScaleFactor",
+          type: "number",
+          label: "Image Control Border Width",
+          min: 0.5,
+          max: 8,
+          step: 0.1,
+          default: 1.5
+        },
+        {
+          id: "image.control.padding",
+          type: "number",
+          label: "Image Control Padding",
+          min: 0,
+          max: 64,
+          step: 1,
+          default: 0
+        },
         {
           id: "image.frame.strokeColor",
           type: "color",
@@ -2061,12 +2247,7 @@ var ImageTool = class {
       } else {
         const obj = this.getImageObject(id);
         if (obj) {
-          obj.set({
-            selectable: true,
-            evented: true,
-            hasControls: true,
-            hasBorders: true
-          });
+          this.applyImageObjectInteractionState(obj);
           canvas.setActiveObject(obj);
         }
       }
@@ -2863,6 +3044,7 @@ var ImageTool = class {
     this.overlaySpecs = this.buildOverlaySpecs(frame, sceneGeometry);
     await this.canvasService.flushRenderFromProducers();
     if (seq !== this.renderSeq) return;
+    this.refreshImageObjectInteractionState();
     renderItems.forEach((item) => {
       if (!this.getImageObject(item.id)) return;
       const resolver = this.loadResolvers.get(item.id);
@@ -5218,6 +5400,10 @@ var DielineTool = class {
       {
         type: "clipPath",
         id: "dieline.clip.image",
+        visibility: {
+          op: "not",
+          expr: { op: "anySessionActive" }
+        },
         targetPassIds: [IMAGE_OBJECT_LAYER_ID2],
         source: {
           id: "dieline.effect.clip-path",
@@ -8871,6 +9057,9 @@ function evaluateVisibilityExpr(expr, context) {
     if (!toolId) return false;
     return context.isSessionActive ? context.isSessionActive(toolId) : false;
   }
+  if (expr.op === "anySessionActive") {
+    return context.hasAnyActiveSession ? context.hasAnyActiveSession() : false;
+  }
   if (expr.op === "layerExists") {
     return layerState(context, expr.layerId).exists === true;
   }
@@ -8904,6 +9093,7 @@ var CanvasService = class {
     this.visibilityRefreshScheduled = false;
     this.managedProducerPassIds = /* @__PURE__ */ new Set();
     this.managedPassMetas = /* @__PURE__ */ new Map();
+    this.managedPassEffects = [];
     this.canvasForwardersBound = false;
     this.forwardSelectionCreated = (e) => {
       var _a;
@@ -8931,9 +9121,11 @@ var CanvasService = class {
     };
     this.onToolActivated = () => {
       this.applyManagedPassVisibility();
+      void this.applyManagedPassEffects(void 0, { render: true });
     };
     this.onToolSessionChanged = () => {
       this.applyManagedPassVisibility();
+      void this.applyManagedPassEffects(void 0, { render: true });
     };
     this.onCanvasObjectChanged = () => {
       if (this.producerApplyInProgress) return;
@@ -8998,6 +9190,7 @@ var CanvasService = class {
     this.renderProducers.clear();
     this.managedProducerPassIds.clear();
     this.managedPassMetas.clear();
+    this.managedPassEffects = [];
     this.context = void 0;
     this.workbenchService = void 0;
     this.toolSessionService = void 0;
@@ -9104,6 +9297,7 @@ var CanvasService = class {
     return {
       type: "clipPath",
       key,
+      visibility: effect.visibility,
       source: {
         ...source,
         id: sourceId
@@ -9211,22 +9405,30 @@ var CanvasService = class {
     });
     return state;
   }
-  applyManagedPassVisibility(options = {}) {
+  isSessionActive(toolId) {
+    if (!this.toolSessionService) return false;
+    return this.toolSessionService.getState(toolId).status === "active";
+  }
+  hasAnyActiveSession() {
     var _a, _b;
+    return (_b = (_a = this.toolSessionService) == null ? void 0 : _a.hasAnyActiveSession()) != null ? _b : false;
+  }
+  buildVisibilityEvalContext(layers) {
+    var _a, _b;
+    return {
+      activeToolId: (_b = (_a = this.workbenchService) == null ? void 0 : _a.activeToolId) != null ? _b : null,
+      isSessionActive: (toolId) => this.isSessionActive(toolId),
+      hasAnyActiveSession: () => this.hasAnyActiveSession(),
+      layers
+    };
+  }
+  applyManagedPassVisibility(options = {}) {
     if (!this.managedPassMetas.size) return false;
     const layers = this.getPassRuntimeState();
-    const activeToolId = (_b = (_a = this.workbenchService) == null ? void 0 : _a.activeToolId) != null ? _b : null;
-    const isSessionActive = (toolId) => {
-      if (!this.toolSessionService) return false;
-      return this.toolSessionService.getState(toolId).status === "active";
-    };
+    const context = this.buildVisibilityEvalContext(layers);
     let changed = false;
     this.managedPassMetas.forEach((meta) => {
-      const visible = evaluateVisibilityExpr(meta.visibility, {
-        activeToolId,
-        isSessionActive,
-        layers
-      });
+      const visible = evaluateVisibilityExpr(meta.visibility, context);
       changed = this.setPassVisibility(meta.id, visible) || changed;
     });
     if (changed && options.render !== false) {
@@ -9294,18 +9496,24 @@ var CanvasService = class {
       }
       this.managedProducerPassIds = nextPassIds;
       this.managedPassMetas = nextManagedPassMetas;
+      this.managedPassEffects = nextEffects;
       this.syncManagedPassStacking(Array.from(nextManagedPassMetas.values()));
-      await this.applyManagedPassEffects(nextEffects);
+      await this.applyManagedPassEffects(nextEffects, { render: false });
       this.applyManagedPassVisibility({ render: false });
     } finally {
       this.producerApplyInProgress = false;
     }
     this.requestRenderAll();
   }
-  async applyManagedPassEffects(effects) {
+  async applyManagedPassEffects(effects = this.managedPassEffects, options = {}) {
     const effectTargetMap = /* @__PURE__ */ new Map();
+    const layers = this.getPassRuntimeState();
+    const visibilityContext = this.buildVisibilityEvalContext(layers);
     for (const effect of effects) {
       if (effect.type !== "clipPath") continue;
+      if (!evaluateVisibilityExpr(effect.visibility, visibilityContext)) {
+        continue;
+      }
       effect.targetPassIds.forEach((targetPassId) => {
         this.getPassCanvasObjects(targetPassId).forEach((obj) => {
           effectTargetMap.set(obj, effect);
@@ -9337,6 +9545,9 @@ var CanvasService = class {
         targetEffect.key
       );
     }
+    if (options.render !== false) {
+      this.requestRenderAll();
+    }
   }
   getObject(id, passId) {
     const normalizedId = String(id || "").trim();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pooder/kit",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "description": "Standard plugins for Pooder editor",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/extensions/dieline.ts

@@ -900,6 +900,10 @@ export class DielineTool implements Extension {
       {
         type: "clipPath",
         id: "dieline.clip.image",
+        visibility: {
+          op: "not",
+          expr: { op: "anySessionActive" },
+        },
         targetPassIds: [IMAGE_OBJECT_LAYER_ID],
         source: {
           id: "dieline.effect.clip-path",