customized-fabric 1.2.4 → 1.2.6

package/lib/ImagePlaceholderObject/index.js

@@ -42,6 +42,11 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
         if (options?.hideStroke) {
             this.rectObject.set({ strokeWidth: 0 });
         }
+        else {
+            if (options?.maskUrl) {
+                this.loadMask(options?.maskUrl);
+            }
+        }
         if (options?.image) {
             const { image } = options;
             const { url, data, clipPath } = image;
@@ -68,9 +73,6 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
                 }
             }
         }
-        if (options?.maskUrl) {
-            this.loadMask(options?.maskUrl);
-        }
     },
     loadImage: async function (image) {
         const loadedImage = await (0, utils_1.loadImage)(image);
@@ -128,9 +130,18 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
                 top: this.top,
                 left: this.left,
             });
-            if (this.maskObject) {
+            if (this.maskUrl) {
+                const maskObject = await (0, utils_1.loadImage)(this.maskUrl);
+                maskObject?.set({
+                    top: this.top,
+                    left: this.left,
+                    absolutePositioned: true,
+                    scaleX: this.width / (maskObject?.width ?? this.width),
+                    scaleY: this.height / (maskObject?.height ?? this.height),
+                    angle: this.angle,
+                });
                 loadedImage.set({
-                    clipPath: this.maskObject,
+                    clipPath: maskObject,
                 });
             }
             else {
@@ -194,13 +205,20 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
                 scaleY: this.height / loadedMask.height,
                 absolutePositioned: false,
             });
+            this.remove(this.imageObject);
+            this.remove(this.maskObject);
             this.maskObject = loadedMask;
+            this.add(this.maskObject);
+            this.imageObject && this.add(this.imageObject);
             this.set({ clipPath: this.maskObject });
             this.canvas?.renderAll();
         }
     },
     removeMask: async function () {
-        this.set({ clipPath: undefined });
+        this.set({ clipPath: undefined, maskUrl: undefined });
+        this.remove(this.maskObject);
+        this.maskObject = undefined;
+        this.canvas?.renderAll();
     },
 });
 const toImagePlaceholderObject = (imagePlaceholderObject) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "customized-fabric",
-  "version": "1.2.4",
+  "version": "1.2.6",
   "description": "Customized fabric",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",