customized-fabric 1.2.5 → 1.2.7

package/lib/ImagePlaceholderObject/index.js

@@ -56,17 +56,12 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
                     const { top, left, scaleX, width, originX, originY } = data;
                     const ratioWidth = (width * scaleX) / (clipPath.width * clipPath.scaleX);
                     const ratioPosition = this.width / clipPath.width;
+                    const originalClipPath = await this.getClipPath(clipPath);
                     loadedImage.set({
                         ...data,
                         top: this.top + ratioPosition * top,
                         left: this.left + ratioPosition * left,
-                        clipPath: new fabric_1.fabric.Rect({
-                            width: this.width,
-                            height: this.height,
-                            top: this.top,
-                            left: this.left,
-                            absolutePositioned: true,
-                        }),
+                        clipPath: originalClipPath,
                     });
                     loadedImage.scaleToWidth(ratioWidth * this.width);
                     this?.canvas?.add(loadedImage);
@@ -138,6 +133,7 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
                     absolutePositioned: true,
                     scaleX: this.width / (maskObject?.width ?? this.width),
                     scaleY: this.height / (maskObject?.height ?? this.height),
+                    angle: this.angle,
                 });
                 loadedImage.set({
                     clipPath: maskObject,
@@ -219,6 +215,19 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
         this.maskObject = undefined;
         this.canvas?.renderAll();
     },
+    getClipPath: async function (clipPath) {
+        if (clipPath?.url) {
+        }
+        else {
+            return new fabric_1.fabric.Rect({
+                width: this.width,
+                height: this.height,
+                top: this.top,
+                left: this.left,
+                absolutePositioned: true,
+            });
+        }
+    },
 });
 const toImagePlaceholderObject = (imagePlaceholderObject) => {
     return {

package/lib/ImagePlaceholderObject/interfaces.d.ts

@@ -1,4 +1,21 @@
 import { ObjectId } from "../utils/objectId";
+export interface IClipPathOptions {
+    url?: string;
+    originX: string;
+    originY: string;
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    scaleX: number;
+    scaleY: number;
+    angle: number;
+    flipX: boolean;
+    flipY: boolean;
+    skewX: number;
+    skewY: number;
+    opacity: number;
+}
 export interface IImagePlaceholderOptions extends fabric.IGroupOptions {
     _id?: ObjectId;
     personalizeId?: number;
@@ -24,22 +41,7 @@ export interface IImagePlaceholderOptions extends fabric.IGroupOptions {
             skewY: number;
             opacity: number;
         };
-        clipPath: {
-            originX: string;
-            originY: string;
-            left: number;
-            top: number;
-            width: number;
-            height: number;
-            scaleX: number;
-            scaleY: number;
-            angle: number;
-            flipX: boolean;
-            flipY: boolean;
-            skewX: number;
-            skewY: number;
-            opacity: number;
-        };
+        clipPath: IClipPathOptions;
     };
     maskUrl?: string;
 }

package/lib/utils/index.d.ts

@@ -6,7 +6,7 @@ export declare const loadFontFromUrl: (url: string, name: string) => Promise<voi
 export declare const isFontLoaded: (name: string) => boolean;
 export declare const loadImageFromFile: (image: File) => Promise<fabric.Image>;
 export declare const loadImageFromUrl: (url: string) => Promise<fabric.Image>;
-export declare const loadImage: (imageInput: File | string) => Promise<fabric.Image | undefined>;
+export declare const loadImage: (imageInput: File | string) => Promise<fabric.Image>;
 export declare const lockObject: (object: fabric.Object | any, locked: boolean, selectable?: boolean) => void;
 export declare const lockAllObjects: (canvas: fabric.Canvas, locked: boolean, selectable?: boolean) => void;
 export declare const getObject: (object: any, options?: {

package/lib/utils/index.js

@@ -77,12 +77,12 @@ const loadImageFromUrl = (url) => {
 exports.loadImageFromUrl = loadImageFromUrl;
 const loadImage = async (imageInput) => {
     let loadedImage = undefined;
-    if (imageInput instanceof File) {
-        loadedImage = await (0, exports.loadImageFromFile)(imageInput);
-    }
-    else if (typeof imageInput == "string") {
+    if (typeof imageInput == "string") {
         loadedImage = await (0, exports.loadImageFromUrl)(imageInput);
     }
+    else {
+        loadedImage = await (0, exports.loadImageFromFile)(imageInput);
+    }
     return loadedImage;
 };
 exports.loadImage = loadImage;

package/package.json

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