@pooder/kit 5.0.1 → 5.0.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @pooder/kit
 
+## 5.0.2
+
+### Patch Changes
+
+- bugfix
+
 ## 5.0.1
 
 ### Patch Changes

package/dist/index.d.mts

@@ -286,6 +286,7 @@ declare class ImageTool implements Extension {
     private normalizeItem;
     private normalizeItems;
     private cloneItems;
+    private emitWorkingChange;
     private generateId;
     private getImageIdFromActiveObject;
     private resolveReplaceTargetId;

package/dist/index.d.ts

@@ -286,6 +286,7 @@ declare class ImageTool implements Extension {
     private normalizeItem;
     private normalizeItems;
     private cloneItems;
+    private emitWorkingChange;
     private generateId;
     private getImageIdFromActiveObject;
     private resolveReplaceTargetId;

package/dist/index.js

@@ -3847,10 +3847,7 @@ var ImageTool = class {
     context.eventBus.on("selection:created", this.onSelectionChanged);
     context.eventBus.on("selection:updated", this.onSelectionChanged);
     context.eventBus.on("selection:cleared", this.onSelectionCleared);
-    context.eventBus.on(
-      "scene:layout:change",
-      this.onSceneLayoutChanged
-    );
+    context.eventBus.on("scene:layout:change", this.onSceneLayoutChanged);
     const configService = context.services.get(
       "ConfigurationService"
     );
@@ -3890,10 +3887,7 @@ var ImageTool = class {
     context.eventBus.off("selection:created", this.onSelectionChanged);
     context.eventBus.off("selection:updated", this.onSelectionChanged);
     context.eventBus.off("selection:cleared", this.onSelectionCleared);
-    context.eventBus.off(
-      "scene:layout:change",
-      this.onSceneLayoutChanged
-    );
+    context.eventBus.off("scene:layout:change", this.onSceneLayoutChanged);
     (_a = this.dirtyTrackerDisposable) == null ? void 0 : _a.dispose();
     this.dirtyTrackerDisposable = void 0;
     this.clearRenderedImages();
@@ -4002,7 +3996,7 @@ var ImageTool = class {
           id: "image.frame.outerBackground",
           type: "color",
           label: "Image Frame Outer Background",
-          default: "rgba(0,0,0,0.18)"
+          default: "#f5f5f5"
         }
       ],
       [import_core5.ContributionPointIds.COMMANDS]: [
@@ -4045,6 +4039,7 @@ var ImageTool = class {
             this.workingItems = this.cloneItems(this.items);
             this.hasWorkingChanges = false;
             this.updateImages();
+            this.emitWorkingChange();
           }
         },
         {
@@ -4159,6 +4154,13 @@ var ImageTool = class {
   cloneItems(items) {
     return this.normalizeItems((items || []).map((i) => ({ ...i })));
   }
+  emitWorkingChange(changedId = null) {
+    var _a;
+    (_a = this.context) == null ? void 0 : _a.eventBus.emit("image:working:change", {
+      changedId,
+      items: this.cloneItems(this.workingItems)
+    });
+  }
   generateId() {
     return Math.random().toString(36).substring(2, 9);
   }
@@ -4227,6 +4229,7 @@ var ImageTool = class {
     if (this.workingItems.some((existing) => existing.id === item.id)) return;
     this.workingItems = this.cloneItems([...this.workingItems, item]);
     this.updateImages();
+    this.emitWorkingChange(item.id);
   }
   async updateImage(id, updates, options = {}) {
     this.syncToolActiveFromWorkbench();
@@ -4410,10 +4413,7 @@ var ImageTool = class {
         "image.frame.innerBackground",
         "rgba(0,0,0,0)"
       ) || "rgba(0,0,0,0)",
-      outerBackground: this.getConfig(
-        "image.frame.outerBackground",
-        "rgba(0,0,0,0.18)"
-      ) || "rgba(0,0,0,0.18)"
+      outerBackground: "#f5f5f5"
     };
   }
   resolveRenderImageState(item) {
@@ -4557,10 +4557,21 @@ var ImageTool = class {
     const canvasW = this.canvasService.canvas.width || 0;
     const canvasH = this.canvasService.canvas.height || 0;
     const visual = this.getFrameVisualConfig();
-    const topH = Math.max(0, frame.top);
-    const bottomH = Math.max(0, canvasH - (frame.top + frame.height));
-    const leftW = Math.max(0, frame.left);
-    const rightW = Math.max(0, canvasW - (frame.left + frame.width));
+    const frameLeft = Math.max(0, Math.min(canvasW, frame.left));
+    const frameTop = Math.max(0, Math.min(canvasH, frame.top));
+    const frameRight = Math.max(
+      frameLeft,
+      Math.min(canvasW, frame.left + frame.width)
+    );
+    const frameBottom = Math.max(
+      frameTop,
+      Math.min(canvasH, frame.top + frame.height)
+    );
+    const visibleFrameH = Math.max(0, frameBottom - frameTop);
+    const topH = frameTop;
+    const bottomH = Math.max(0, canvasH - frameBottom);
+    const leftW = frameLeft;
+    const rightW = Math.max(0, canvasW - frameRight);
     const mask = [
       {
         id: "image.cropMask.top",
@@ -4584,7 +4595,7 @@ var ImageTool = class {
         data: { id: "image.cropMask.bottom", zIndex: 2 },
         props: {
           left: canvasW / 2,
-          top: frame.top + frame.height + bottomH / 2,
+          top: frameBottom + bottomH / 2,
           width: canvasW,
           height: bottomH,
           originX: "center",
@@ -4600,9 +4611,9 @@ var ImageTool = class {
         data: { id: "image.cropMask.left", zIndex: 3 },
         props: {
           left: leftW / 2,
-          top: frame.top + frame.height / 2,
+          top: frameTop + visibleFrameH / 2,
           width: leftW,
-          height: frame.height,
+          height: visibleFrameH,
           originX: "center",
           originY: "center",
           fill: visual.outerBackground,
@@ -4615,10 +4626,10 @@ var ImageTool = class {
         type: "rect",
         data: { id: "image.cropMask.right", zIndex: 4 },
         props: {
-          left: frame.left + frame.width + rightW / 2,
-          top: frame.top + frame.height / 2,
+          left: frameRight + rightW / 2,
+          top: frameTop + visibleFrameH / 2,
           width: rightW,
-          height: frame.height,
+          height: visibleFrameH,
           originX: "center",
           originY: "center",
           fill: visual.outerBackground,
@@ -4708,6 +4719,7 @@ var ImageTool = class {
     if (this.isToolActive) {
       this.updateImages();
     }
+    this.emitWorkingChange(id);
   }
   async updateImageInConfig(id, updates) {
     var _a, _b, _c, _d;
@@ -4788,6 +4800,7 @@ var ImageTool = class {
     this.isImageSelectionActive = true;
     this.focusedImageId = id;
     this.updateImages();
+    this.emitWorkingChange(id);
   }
   focusImageSelection(id) {
     if (!this.canvasService) return;
@@ -4880,6 +4893,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;

package/dist/index.mjs

@@ -3798,10 +3798,7 @@ var ImageTool = class {
     context.eventBus.on("selection:created", this.onSelectionChanged);
     context.eventBus.on("selection:updated", this.onSelectionChanged);
     context.eventBus.on("selection:cleared", this.onSelectionCleared);
-    context.eventBus.on(
-      "scene:layout:change",
-      this.onSceneLayoutChanged
-    );
+    context.eventBus.on("scene:layout:change", this.onSceneLayoutChanged);
     const configService = context.services.get(
       "ConfigurationService"
     );
@@ -3841,10 +3838,7 @@ var ImageTool = class {
     context.eventBus.off("selection:created", this.onSelectionChanged);
     context.eventBus.off("selection:updated", this.onSelectionChanged);
     context.eventBus.off("selection:cleared", this.onSelectionCleared);
-    context.eventBus.off(
-      "scene:layout:change",
-      this.onSceneLayoutChanged
-    );
+    context.eventBus.off("scene:layout:change", this.onSceneLayoutChanged);
     (_a = this.dirtyTrackerDisposable) == null ? void 0 : _a.dispose();
     this.dirtyTrackerDisposable = void 0;
     this.clearRenderedImages();
@@ -3953,7 +3947,7 @@ var ImageTool = class {
           id: "image.frame.outerBackground",
           type: "color",
           label: "Image Frame Outer Background",
-          default: "rgba(0,0,0,0.18)"
+          default: "#f5f5f5"
         }
       ],
       [ContributionPointIds5.COMMANDS]: [
@@ -3996,6 +3990,7 @@ var ImageTool = class {
             this.workingItems = this.cloneItems(this.items);
             this.hasWorkingChanges = false;
             this.updateImages();
+            this.emitWorkingChange();
           }
         },
         {
@@ -4110,6 +4105,13 @@ var ImageTool = class {
   cloneItems(items) {
     return this.normalizeItems((items || []).map((i) => ({ ...i })));
   }
+  emitWorkingChange(changedId = null) {
+    var _a;
+    (_a = this.context) == null ? void 0 : _a.eventBus.emit("image:working:change", {
+      changedId,
+      items: this.cloneItems(this.workingItems)
+    });
+  }
   generateId() {
     return Math.random().toString(36).substring(2, 9);
   }
@@ -4178,6 +4180,7 @@ var ImageTool = class {
     if (this.workingItems.some((existing) => existing.id === item.id)) return;
     this.workingItems = this.cloneItems([...this.workingItems, item]);
     this.updateImages();
+    this.emitWorkingChange(item.id);
   }
   async updateImage(id, updates, options = {}) {
     this.syncToolActiveFromWorkbench();
@@ -4361,10 +4364,7 @@ var ImageTool = class {
         "image.frame.innerBackground",
         "rgba(0,0,0,0)"
       ) || "rgba(0,0,0,0)",
-      outerBackground: this.getConfig(
-        "image.frame.outerBackground",
-        "rgba(0,0,0,0.18)"
-      ) || "rgba(0,0,0,0.18)"
+      outerBackground: "#f5f5f5"
     };
   }
   resolveRenderImageState(item) {
@@ -4508,10 +4508,21 @@ var ImageTool = class {
     const canvasW = this.canvasService.canvas.width || 0;
     const canvasH = this.canvasService.canvas.height || 0;
     const visual = this.getFrameVisualConfig();
-    const topH = Math.max(0, frame.top);
-    const bottomH = Math.max(0, canvasH - (frame.top + frame.height));
-    const leftW = Math.max(0, frame.left);
-    const rightW = Math.max(0, canvasW - (frame.left + frame.width));
+    const frameLeft = Math.max(0, Math.min(canvasW, frame.left));
+    const frameTop = Math.max(0, Math.min(canvasH, frame.top));
+    const frameRight = Math.max(
+      frameLeft,
+      Math.min(canvasW, frame.left + frame.width)
+    );
+    const frameBottom = Math.max(
+      frameTop,
+      Math.min(canvasH, frame.top + frame.height)
+    );
+    const visibleFrameH = Math.max(0, frameBottom - frameTop);
+    const topH = frameTop;
+    const bottomH = Math.max(0, canvasH - frameBottom);
+    const leftW = frameLeft;
+    const rightW = Math.max(0, canvasW - frameRight);
     const mask = [
       {
         id: "image.cropMask.top",
@@ -4535,7 +4546,7 @@ var ImageTool = class {
         data: { id: "image.cropMask.bottom", zIndex: 2 },
         props: {
           left: canvasW / 2,
-          top: frame.top + frame.height + bottomH / 2,
+          top: frameBottom + bottomH / 2,
           width: canvasW,
           height: bottomH,
           originX: "center",
@@ -4551,9 +4562,9 @@ var ImageTool = class {
         data: { id: "image.cropMask.left", zIndex: 3 },
         props: {
           left: leftW / 2,
-          top: frame.top + frame.height / 2,
+          top: frameTop + visibleFrameH / 2,
           width: leftW,
-          height: frame.height,
+          height: visibleFrameH,
           originX: "center",
           originY: "center",
           fill: visual.outerBackground,
@@ -4566,10 +4577,10 @@ var ImageTool = class {
         type: "rect",
         data: { id: "image.cropMask.right", zIndex: 4 },
         props: {
-          left: frame.left + frame.width + rightW / 2,
-          top: frame.top + frame.height / 2,
+          left: frameRight + rightW / 2,
+          top: frameTop + visibleFrameH / 2,
           width: rightW,
-          height: frame.height,
+          height: visibleFrameH,
           originX: "center",
           originY: "center",
           fill: visual.outerBackground,
@@ -4659,6 +4670,7 @@ var ImageTool = class {
     if (this.isToolActive) {
       this.updateImages();
     }
+    this.emitWorkingChange(id);
   }
   async updateImageInConfig(id, updates) {
     var _a, _b, _c, _d;
@@ -4739,6 +4751,7 @@ var ImageTool = class {
     this.isImageSelectionActive = true;
     this.focusedImageId = id;
     this.updateImages();
+    this.emitWorkingChange(id);
   }
   focusImageSelection(id) {
     if (!this.canvasService) return;
@@ -4831,6 +4844,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;

package/package.json

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

package/src/image.ts

@@ -148,10 +148,7 @@ export class ImageTool implements Extension {
     context.eventBus.on("selection:created", this.onSelectionChanged);
     context.eventBus.on("selection:updated", this.onSelectionChanged);
     context.eventBus.on("selection:cleared", this.onSelectionCleared);
-    context.eventBus.on(
-      "scene:layout:change",
-      this.onSceneLayoutChanged,
-    );
+    context.eventBus.on("scene:layout:change", this.onSceneLayoutChanged);
 
     const configService = context.services.get<ConfigurationService>(
       "ConfigurationService",
@@ -198,10 +195,7 @@ export class ImageTool implements Extension {
     context.eventBus.off("selection:created", this.onSelectionChanged);
     context.eventBus.off("selection:updated", this.onSelectionChanged);
     context.eventBus.off("selection:cleared", this.onSelectionCleared);
-    context.eventBus.off(
-      "scene:layout:change",
-      this.onSceneLayoutChanged,
-    );
+    context.eventBus.off("scene:layout:change", this.onSceneLayoutChanged);
     this.dirtyTrackerDisposable?.dispose();
     this.dirtyTrackerDisposable = undefined;
 
@@ -396,7 +390,7 @@ export class ImageTool implements Extension {
           id: "image.frame.outerBackground",
           type: "color",
           label: "Image Frame Outer Background",
-          default: "rgba(0,0,0,0.18)",
+          default: "#f5f5f5",
         },
       ] as ConfigurationContribution[],
       [ContributionPointIds.COMMANDS]: [
@@ -439,6 +433,7 @@ export class ImageTool implements Extension {
             this.workingItems = this.cloneItems(this.items);
             this.hasWorkingChanges = false;
             this.updateImages();
+            this.emitWorkingChange();
           },
         },
         {
@@ -578,6 +573,13 @@ export class ImageTool implements Extension {
     return this.normalizeItems((items || []).map((i) => ({ ...i })));
   }
 
+  private emitWorkingChange(changedId: string | null = null) {
+    this.context?.eventBus.emit("image:working:change", {
+      changedId,
+      items: this.cloneItems(this.workingItems),
+    });
+  }
+
   private generateId(): string {
     return Math.random().toString(36).substring(2, 9);
   }
@@ -670,6 +672,7 @@ export class ImageTool implements Extension {
     if (this.workingItems.some((existing) => existing.id === item.id)) return;
     this.workingItems = this.cloneItems([...this.workingItems, item]);
     this.updateImages();
+    this.emitWorkingChange(item.id);
   }
 
   private async updateImage(
@@ -893,11 +896,7 @@ export class ImageTool implements Extension {
           "image.frame.innerBackground",
           "rgba(0,0,0,0)",
         ) || "rgba(0,0,0,0)",
-      outerBackground:
-        this.getConfig<string>(
-          "image.frame.outerBackground",
-          "rgba(0,0,0,0.18)",
-        ) || "rgba(0,0,0,0.18)",
+      outerBackground: "#f5f5f5",
     };
   }
 
@@ -1074,10 +1073,22 @@ export class ImageTool implements Extension {
     const canvasH = this.canvasService.canvas.height || 0;
     const visual = this.getFrameVisualConfig();
 
-    const topH = Math.max(0, frame.top);
-    const bottomH = Math.max(0, canvasH - (frame.top + frame.height));
-    const leftW = Math.max(0, frame.left);
-    const rightW = Math.max(0, canvasW - (frame.left + frame.width));
+    const frameLeft = Math.max(0, Math.min(canvasW, frame.left));
+    const frameTop = Math.max(0, Math.min(canvasH, frame.top));
+    const frameRight = Math.max(
+      frameLeft,
+      Math.min(canvasW, frame.left + frame.width),
+    );
+    const frameBottom = Math.max(
+      frameTop,
+      Math.min(canvasH, frame.top + frame.height),
+    );
+    const visibleFrameH = Math.max(0, frameBottom - frameTop);
+
+    const topH = frameTop;
+    const bottomH = Math.max(0, canvasH - frameBottom);
+    const leftW = frameLeft;
+    const rightW = Math.max(0, canvasW - frameRight);
 
     const mask: RenderObjectSpec[] = [
       {
@@ -1102,7 +1113,7 @@ export class ImageTool implements Extension {
         data: { id: "image.cropMask.bottom", zIndex: 2 },
         props: {
           left: canvasW / 2,
-          top: frame.top + frame.height + bottomH / 2,
+          top: frameBottom + bottomH / 2,
           width: canvasW,
           height: bottomH,
           originX: "center",
@@ -1118,9 +1129,9 @@ export class ImageTool implements Extension {
         data: { id: "image.cropMask.left", zIndex: 3 },
         props: {
           left: leftW / 2,
-          top: frame.top + frame.height / 2,
+          top: frameTop + visibleFrameH / 2,
           width: leftW,
-          height: frame.height,
+          height: visibleFrameH,
           originX: "center",
           originY: "center",
           fill: visual.outerBackground,
@@ -1133,10 +1144,10 @@ export class ImageTool implements Extension {
         type: "rect",
         data: { id: "image.cropMask.right", zIndex: 4 },
         props: {
-          left: frame.left + frame.width + rightW / 2,
-          top: frame.top + frame.height / 2,
+          left: frameRight + rightW / 2,
+          top: frameTop + visibleFrameH / 2,
           width: rightW,
-          height: frame.height,
+          height: visibleFrameH,
           originX: "center",
           originY: "center",
           fill: visual.outerBackground,
@@ -1275,6 +1286,7 @@ export class ImageTool implements Extension {
     if (this.isToolActive) {
       this.updateImages();
     }
+    this.emitWorkingChange(id);
   }
 
   private async updateImageInConfig(id: string, updates: Partial<ImageItem>) {
@@ -1371,6 +1383,7 @@ export class ImageTool implements Extension {
     this.isImageSelectionActive = true;
     this.focusedImageId = id;
     this.updateImages();
+    this.emitWorkingChange(id);
   }
 
   private focusImageSelection(id: string) {
@@ -1489,6 +1502,7 @@ export class ImageTool implements Extension {
     this.hasWorkingChanges = false;
     this.workingItems = this.cloneItems(next);
     this.updateConfig(next);
+    this.emitWorkingChange(focusId);
     if (focusId) {
       this.focusedImageId = focusId;
       this.isImageSelectionActive = true;