@pooder/kit 5.0.2 → 5.0.4

package/dist/index.mjs

@@ -2954,6 +2954,8 @@ var FeatureTool = class {
     this.workingFeatures = [];
     this.isUpdatingConfig = false;
     this.isToolActive = false;
+    this.isFeatureSessionActive = false;
+    this.sessionOriginalFeatures = null;
     this.hasWorkingChanges = false;
     this.handleMoving = null;
     this.handleModified = null;
@@ -2961,6 +2963,9 @@ var FeatureTool = class {
     this.currentGeometry = null;
     this.onToolActivated = (event) => {
       this.isToolActive = event.id === this.id;
+      if (!this.isToolActive) {
+        this.restoreSessionFeaturesToConfig();
+      }
       this.updateVisibility();
     };
     if (options) {
@@ -2984,6 +2989,7 @@ var FeatureTool = class {
       configService.onAnyChange((e) => {
         if (this.isUpdatingConfig) return;
         if (e.key === "dieline.features") {
+          if (this.isFeatureSessionActive) return;
           const next = e.value || [];
           this.workingFeatures = this.cloneFeatures(next);
           this.hasWorkingChanges = false;
@@ -3003,6 +3009,7 @@ var FeatureTool = class {
   deactivate(context) {
     var _a;
     context.eventBus.off("tool:activated", this.onToolActivated);
+    this.restoreSessionFeaturesToConfig();
     (_a = this.dirtyTrackerDisposable) == null ? void 0 : _a.dispose();
     this.dirtyTrackerDisposable = void 0;
     this.teardown();
@@ -3034,9 +3041,9 @@ var FeatureTool = class {
           name: "Feature",
           interaction: "session",
           commands: {
-            begin: "resetWorkingFeatures",
+            begin: "beginFeatureSession",
             commit: "completeFeatures",
-            rollback: "resetWorkingFeatures"
+            rollback: "rollbackFeatureSession"
           },
           session: {
             autoBegin: false,
@@ -3045,6 +3052,25 @@ var FeatureTool = class {
         }
       ],
       [ContributionPointIds4.COMMANDS]: [
+        {
+          command: "beginFeatureSession",
+          title: "Begin Feature Session",
+          handler: async () => {
+            if (this.isFeatureSessionActive) {
+              return { ok: true };
+            }
+            const original = this.getCommittedFeatures();
+            this.sessionOriginalFeatures = this.cloneFeatures(original);
+            this.isFeatureSessionActive = true;
+            await this.refreshGeometry();
+            this.setWorkingFeatures(this.cloneFeatures(original));
+            this.hasWorkingChanges = false;
+            this.redraw();
+            this.emitWorkingChange();
+            this.updateCommittedFeatures([]);
+            return { ok: true };
+          }
+        },
         {
           command: "addFeature",
           title: "Add Edge Feature",
@@ -3097,19 +3123,27 @@ var FeatureTool = class {
           }
         },
         {
-          command: "resetWorkingFeatures",
-          title: "Reset Working Features",
+          command: "rollbackFeatureSession",
+          title: "Rollback Feature Session",
           handler: async () => {
-            var _a;
-            const configService = (_a = this.context) == null ? void 0 : _a.services.get(
-              "ConfigurationService"
+            const original = this.cloneFeatures(
+              this.sessionOriginalFeatures || this.getCommittedFeatures()
             );
-            const next = (configService == null ? void 0 : configService.get("dieline.features", [])) || [];
             await this.refreshGeometry();
-            this.setWorkingFeatures(this.cloneFeatures(next));
+            this.setWorkingFeatures(original);
             this.hasWorkingChanges = false;
             this.redraw();
             this.emitWorkingChange();
+            this.updateCommittedFeatures(original);
+            this.clearFeatureSessionState();
+            return { ok: true };
+          }
+        },
+        {
+          command: "resetWorkingFeatures",
+          title: "Reset Working Features",
+          handler: async () => {
+            await this.resetWorkingFeaturesFromSource();
             return { ok: true };
           }
         },
@@ -3133,6 +3167,37 @@ var FeatureTool = class {
   cloneFeatures(features) {
     return JSON.parse(JSON.stringify(features || []));
   }
+  getConfigService() {
+    var _a;
+    return (_a = this.context) == null ? void 0 : _a.services.get("ConfigurationService");
+  }
+  getCommittedFeatures() {
+    const configService = this.getConfigService();
+    const committed = (configService == null ? void 0 : configService.get("dieline.features", [])) || [];
+    return this.cloneFeatures(committed);
+  }
+  updateCommittedFeatures(next) {
+    const configService = this.getConfigService();
+    if (!configService) return;
+    this.isUpdatingConfig = true;
+    try {
+      configService.update("dieline.features", next);
+    } finally {
+      this.isUpdatingConfig = false;
+    }
+  }
+  clearFeatureSessionState() {
+    this.isFeatureSessionActive = false;
+    this.sessionOriginalFeatures = null;
+  }
+  restoreSessionFeaturesToConfig() {
+    if (!this.isFeatureSessionActive) return;
+    const original = this.cloneFeatures(
+      this.sessionOriginalFeatures || this.getCommittedFeatures()
+    );
+    this.updateCommittedFeatures(original);
+    this.clearFeatureSessionState();
+  }
   emitWorkingChange() {
     var _a;
     (_a = this.context) == null ? void 0 : _a.eventBus.emit("feature:working:change", {
@@ -3151,6 +3216,16 @@ var FeatureTool = class {
     } catch (e) {
     }
   }
+  async resetWorkingFeaturesFromSource() {
+    const next = this.cloneFeatures(
+      this.isFeatureSessionActive && this.sessionOriginalFeatures ? this.sessionOriginalFeatures : this.getCommittedFeatures()
+    );
+    await this.refreshGeometry();
+    this.setWorkingFeatures(next);
+    this.hasWorkingChanges = false;
+    this.redraw();
+    this.emitWorkingChange();
+  }
   setWorkingFeatures(next) {
     this.workingFeatures = next;
   }
@@ -3207,12 +3282,7 @@ var FeatureTool = class {
       this.workingFeatures,
       { dielineWidth, dielineHeight },
       (next) => {
-        this.isUpdatingConfig = true;
-        try {
-          configService.update("dieline.features", next);
-        } finally {
-          this.isUpdatingConfig = false;
-        }
+        this.updateCommittedFeatures(next);
         this.workingFeatures = this.cloneFeatures(next);
         this.emitWorkingChange();
       }
@@ -3224,6 +3294,7 @@ var FeatureTool = class {
       };
     }
     this.hasWorkingChanges = false;
+    this.clearFeatureSessionState();
     this.redraw();
     return { ok: true };
   }
@@ -3670,7 +3741,6 @@ import {
 import { Canvas as FabricCanvas2, Image as FabricImage, Point as Point2 } from "fabric";
 var IMAGE_OBJECT_LAYER_ID2 = "image.user";
 var IMAGE_OVERLAY_LAYER_ID = "image-overlay";
-var IMAGE_REPLACE_GUARD_MS = 2500;
 var ImageTool = class {
   constructor() {
     this.id = "pooder.kit.image";
@@ -3686,18 +3756,15 @@ var ImageTool = class {
     this.isToolActive = false;
     this.isImageSelectionActive = false;
     this.focusedImageId = null;
-    this.suppressSelectionClearUntil = 0;
     this.renderSeq = 0;
     this.onToolActivated = (event) => {
       const before = this.isToolActive;
       this.syncToolActiveFromWorkbench(event.id);
       if (!this.isToolActive) {
-        const now = Date.now();
-        const inGuardWindow = now <= this.suppressSelectionClearUntil && !!this.focusedImageId;
-        if (!inGuardWindow) {
-          this.isImageSelectionActive = false;
-          this.focusedImageId = null;
-        }
+        this.setImageFocus(null, {
+          syncCanvasSelection: true,
+          skipRender: true
+        });
       }
       this.debug("tool:activated", {
         id: event.id,
@@ -3705,8 +3772,7 @@ var ImageTool = class {
         reason: event.reason,
         before,
         isToolActive: this.isToolActive,
-        focusedImageId: this.focusedImageId,
-        suppressSelectionClearUntil: this.suppressSelectionClearUntil
+        focusedImageId: this.focusedImageId
       });
       if (!this.isToolActive && this.isDebugEnabled()) {
         console.trace("[ImageTool] tool deactivated trace");
@@ -3745,16 +3811,10 @@ var ImageTool = class {
       this.updateImages();
     };
     this.onSelectionCleared = () => {
-      const now = Date.now();
-      if (now <= this.suppressSelectionClearUntil && this.focusedImageId) {
-        this.debug("selection:cleared ignored", {
-          suppressUntil: this.suppressSelectionClearUntil,
-          focusedImageId: this.focusedImageId
-        });
-        return;
-      }
-      this.isImageSelectionActive = false;
-      this.focusedImageId = null;
+      this.setImageFocus(null, {
+        syncCanvasSelection: false,
+        skipRender: true
+      });
       this.debug("selection:cleared applied");
       this.updateImages();
     };
@@ -3910,7 +3970,7 @@ var ImageTool = class {
           id: "image.frame.strokeColor",
           type: "color",
           label: "Image Frame Stroke Color",
-          default: "#FF0000"
+          default: "#808080"
         },
         {
           id: "image.frame.strokeWidth",
@@ -3926,7 +3986,7 @@ var ImageTool = class {
           type: "select",
           label: "Image Frame Stroke Style",
           options: ["solid", "dashed", "hidden"],
-          default: "solid"
+          default: "dashed"
         },
         {
           id: "image.frame.dashLength",
@@ -4021,6 +4081,13 @@ var ImageTool = class {
             await this.fitImageToDefaultArea(id);
           }
         },
+        {
+          command: "focusImage",
+          title: "Focus Image",
+          handler: (id, options = {}) => {
+            return this.setImageFocus(id, options);
+          }
+        },
         {
           command: "removeImage",
           title: "Remove Image",
@@ -4030,8 +4097,10 @@ var ImageTool = class {
             if (next.length !== this.items.length) {
               this.purgeSourceSizeCacheForItem(removed);
               if (this.focusedImageId === id) {
-                this.focusedImageId = null;
-                this.isImageSelectionActive = false;
+                this.setImageFocus(null, {
+                  syncCanvasSelection: true,
+                  skipRender: true
+                });
               }
               this.updateConfig(next);
             }
@@ -4049,8 +4118,10 @@ var ImageTool = class {
           title: "Clear Images",
           handler: () => {
             this.sourceSizeBySrc.clear();
-            this.focusedImageId = null;
-            this.isImageSelectionActive = false;
+            this.setImageFocus(null, {
+              syncCanvasSelection: true,
+              skipRender: true
+            });
             this.updateConfig([]);
           }
         },
@@ -4115,22 +4186,38 @@ var ImageTool = class {
   generateId() {
     return Math.random().toString(36).substring(2, 9);
   }
-  getImageIdFromActiveObject() {
-    var _a, _b, _c;
-    const active = (_a = this.canvasService) == null ? void 0 : _a.canvas.getActiveObject();
-    if (((_b = active == null ? void 0 : active.data) == null ? void 0 : _b.layerId) === IMAGE_OBJECT_LAYER_ID2 && typeof ((_c = active == null ? void 0 : active.data) == null ? void 0 : _c.id) === "string") {
-      return active.data.id;
-    }
-    return null;
+  hasImageItem(id) {
+    return this.items.some((item) => item.id === id) || this.workingItems.some((item) => item.id === id);
   }
-  resolveReplaceTargetId(explicitId) {
-    const has = (id) => !!id && this.items.some((item) => item.id === id);
-    if (has(explicitId)) return explicitId;
-    if (has(this.focusedImageId)) return this.focusedImageId;
-    const activeId = this.getImageIdFromActiveObject();
-    if (has(activeId)) return activeId;
-    if (this.items.length === 1) return this.items[0].id;
-    return null;
+  setImageFocus(id, options = {}) {
+    const syncCanvasSelection = options.syncCanvasSelection !== false;
+    if (id && !this.hasImageItem(id)) {
+      return { ok: false, reason: "image-not-found" };
+    }
+    this.focusedImageId = id;
+    this.isImageSelectionActive = !!id;
+    if (syncCanvasSelection && this.canvasService) {
+      const canvas = this.canvasService.canvas;
+      if (!id) {
+        canvas.discardActiveObject();
+      } else {
+        const obj = this.getImageObject(id);
+        if (obj) {
+          obj.set({
+            selectable: true,
+            evented: true,
+            hasControls: true,
+            hasBorders: true
+          });
+          canvas.setActiveObject(obj);
+        }
+      }
+      this.canvasService.requestRenderAll();
+    }
+    if (!options.skipRender) {
+      this.updateImages();
+    }
+    return { ok: true, id };
   }
   async addImageEntry(url, options, fitOnAdd = true) {
     const id = this.generateId();
@@ -4140,9 +4227,6 @@ var ImageTool = class {
       opacity: 1,
       ...options
     });
-    this.focusedImageId = id;
-    this.isImageSelectionActive = true;
-    this.suppressSelectionClearUntil = Date.now() + IMAGE_REPLACE_GUARD_MS;
     const sessionDirtyBeforeAdd = this.isToolActive && this.hasWorkingChanges;
     const waitLoaded = this.waitImageLoaded(id, true);
     this.updateConfig([...this.items, newItem]);
@@ -4152,26 +4236,24 @@ var ImageTool = class {
       await this.fitImageToDefaultArea(id);
     }
     if (loaded) {
-      this.focusImageSelection(id);
+      this.setImageFocus(id);
     }
     return id;
   }
   async upsertImageEntry(url, options = {}) {
-    var _a;
-    const mode = options.mode || "auto";
+    const mode = options.mode || (options.id ? "replace" : "add");
     const fitOnAdd = options.fitOnAdd !== false;
-    if (mode === "add") {
-      const id2 = await this.addImageEntry(url, options.addOptions, fitOnAdd);
-      return { id: id2, mode: "add" };
-    }
-    const targetId = this.resolveReplaceTargetId((_a = options.id) != null ? _a : null);
-    if (targetId) {
+    if (mode === "replace") {
+      if (!options.id) {
+        throw new Error("replace-target-id-required");
+      }
+      const targetId = options.id;
+      if (!this.hasImageItem(targetId)) {
+        throw new Error("replace-target-not-found");
+      }
       await this.updateImageInConfig(targetId, { url });
       return { id: targetId, mode: "replace" };
     }
-    if (mode === "replace" || options.createIfMissing === false) {
-      throw new Error("replace-target-not-found");
-    }
     const id = await this.addImageEntry(url, options.addOptions, fitOnAdd);
     return { id, mode: "add" };
   }
@@ -4346,9 +4428,9 @@ var ImageTool = class {
     var _a, _b;
     const strokeStyleRaw = this.getConfig(
       "image.frame.strokeStyle",
-      "solid"
-    ) || "solid";
-    const strokeStyle = strokeStyleRaw === "dashed" || strokeStyleRaw === "hidden" ? strokeStyleRaw : "solid";
+      "dashed"
+    ) || "dashed";
+    const strokeStyle = strokeStyleRaw === "dashed" || strokeStyleRaw === "hidden" ? strokeStyleRaw : "dashed";
     const strokeWidth = Number(
       (_a = this.getConfig("image.frame.strokeWidth", 2)) != null ? _a : 2
     );
@@ -4356,7 +4438,7 @@ var ImageTool = class {
       (_b = this.getConfig("image.frame.dashLength", 8)) != null ? _b : 8
     );
     return {
-      strokeColor: this.getConfig("image.frame.strokeColor", "#FF0000") || "#FF0000",
+      strokeColor: this.getConfig("image.frame.strokeColor", "#808080") || "#808080",
       strokeWidth: Number.isFinite(strokeWidth) ? Math.max(0, strokeWidth) : 2,
       strokeStyle,
       dashLength: Number.isFinite(dashLength) ? Math.max(1, dashLength) : 8,
@@ -4621,8 +4703,10 @@ var ImageTool = class {
     const frame = this.getFrameRect();
     const desiredIds = new Set(renderItems.map((item) => item.id));
     if (this.focusedImageId && !desiredIds.has(this.focusedImageId)) {
-      this.focusedImageId = null;
-      this.isImageSelectionActive = false;
+      this.setImageFocus(null, {
+        syncCanvasSelection: false,
+        skipRender: true
+      });
     }
     this.getImageObjects().forEach((obj) => {
       var _a, _b;
@@ -4665,8 +4749,10 @@ var ImageTool = class {
     next[index] = this.normalizeItem({ ...next[index], ...updates });
     this.workingItems = next;
     this.hasWorkingChanges = true;
-    this.isImageSelectionActive = true;
-    this.focusedImageId = id;
+    this.setImageFocus(id, {
+      syncCanvasSelection: false,
+      skipRender: true
+    });
     if (this.isToolActive) {
       this.updateImages();
     }
@@ -4695,16 +4781,13 @@ var ImageTool = class {
     });
     this.updateConfig(next);
     if (replacingSource) {
-      this.focusedImageId = id;
-      this.isImageSelectionActive = true;
-      this.suppressSelectionClearUntil = Date.now() + IMAGE_REPLACE_GUARD_MS;
       this.debug("replace:image:begin", { id, replacingUrl });
       this.purgeSourceSizeCacheForItem(base);
       const loaded = await this.waitImageLoaded(id, true);
       this.debug("replace:image:loaded", { id, loaded });
       if (loaded) {
         await this.refitImageToFrame(id);
-        this.focusImageSelection(id);
+        this.setImageFocus(id);
       }
     }
   }
@@ -4748,29 +4831,9 @@ var ImageTool = class {
     this.updateConfig(next);
     this.workingItems = this.cloneItems(next);
     this.hasWorkingChanges = false;
-    this.isImageSelectionActive = true;
-    this.focusedImageId = id;
     this.updateImages();
     this.emitWorkingChange(id);
   }
-  focusImageSelection(id) {
-    if (!this.canvasService) return;
-    const obj = this.getImageObject(id);
-    if (!obj) return;
-    this.isImageSelectionActive = true;
-    this.focusedImageId = id;
-    this.suppressSelectionClearUntil = Date.now() + 700;
-    obj.set({
-      selectable: true,
-      evented: true,
-      hasControls: true,
-      hasBorders: true
-    });
-    this.canvasService.canvas.setActiveObject(obj);
-    this.debug("focus:image", { id });
-    this.canvasService.requestRenderAll();
-    this.updateImages();
-  }
   async fitImageToArea(id, area) {
     var _a, _b;
     if (!this.canvasService) return;
@@ -4820,7 +4883,6 @@ var ImageTool = class {
     if (!frame.width || !frame.height) {
       return { ok: false, reason: "frame-not-ready" };
     }
-    const focusId = this.resolveReplaceTargetId(this.focusedImageId) || (this.workingItems.length === 1 ? this.workingItems[0].id : null);
     const next = [];
     for (const item of this.workingItems) {
       const url = await this.exportCroppedImageByIds([item.id], {
@@ -4844,13 +4906,7 @@ var ImageTool = class {
     this.hasWorkingChanges = false;
     this.workingItems = this.cloneItems(next);
     this.updateConfig(next);
-    this.emitWorkingChange(focusId);
-    if (focusId) {
-      this.focusedImageId = focusId;
-      this.isImageSelectionActive = true;
-      this.suppressSelectionClearUntil = Date.now() + IMAGE_REPLACE_GUARD_MS;
-      this.focusImageSelection(focusId);
-    }
+    this.emitWorkingChange(this.focusedImageId);
     return { ok: true };
   }
   async exportCroppedImageByIds(imageIds, options) {

package/package.json

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