customized-fabric 1.3.0 → 1.3.1

package/lib/ClipartObject/index.d.ts

@@ -28,12 +28,12 @@ export default class Clipart extends fabric.Group {
     clipartOptionId?: number;
     clipartUrl?: string;
     imageObject?: fabric.Image;
-    loadImageFromFile?: (imageFile: File) => void;
-    loadImageFromUrl?: (imageUrl: string) => void;
+    loadImage?: (imageFile: File | string) => Promise<void>;
     getSettings?: (attribute: string) => any;
     setSizes?: (options: {
         width?: number;
         height?: number;
     }) => void;
+    loadCustomizedClipart?: (clipartUrl: string) => Promise<fabric.Image>;
     constructor(options?: IClipartOptions);
 }

package/lib/ClipartObject/index.js

@@ -47,28 +47,17 @@ const ClipartClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
             layerId: options?.personalizeId ?? options?.layerId,
             objectCaching: false,
         });
-        if (options?.clipartUrl) {
-            this.loadImageFromUrl(options.clipartUrl);
-        }
-        if (options?.clipartFile) {
-            this.loadImageFromFile(options.clipartFile);
-        }
-        if (options?.hideStroke) {
+        if (options?.isOriginal) {
             this.rectObject.set({ strokeWidth: 0 });
         }
+        else {
+            if (options?.clipartFile || options?.clipartUrl) {
+                this.loadImage(options?.clipartFile ?? options.clipartUrl);
+            }
+        }
     },
-    loadImageFromUrl: async function (url) {
-        fabric_1.fabric.Image.fromURL(url, (loadedImage) => {
-            this.loadImage(loadedImage);
-        }, {
-            crossOrigin: "anonymous",
-        });
-    },
-    loadImageFromFile: async function (imageFile) {
-        const loadedImage = await (0, utils_1.loadImageFromFile)(imageFile);
-        this.loadImage(loadedImage);
-    },
-    loadImage: function (image) {
+    loadImage: async function (imageInput) {
+        const image = await (0, utils_1.loadImage)(imageInput);
         if (image.width && image.height) {
             image.set({
                 originX: "center",
@@ -119,6 +108,20 @@ const ClipartClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
         this.set(attributes);
         this.rectObject.set(attributes);
     },
+    loadCustomizedClipart: async function (clipartUrl) {
+        const image = await (0, utils_1.loadImageFromUrl)(clipartUrl);
+        if (image.width && image.height) {
+            image.scaleToWidth(this.width);
+            image.set({
+                originX: "center",
+                originY: "center",
+                top: this.top,
+                left: this.left,
+                angle: this.angle,
+            });
+            return image;
+        }
+    },
 });
 const toClipartObject = (clipartObject) => {
     return {

package/lib/ClipartObject/interfaces.d.ts

@@ -5,6 +5,6 @@ export interface IClipartOptions extends fabric.IGroupOptions {
     layerId: number;
     clipartUrl?: string;
     clipartFile?: File;
-    hideStroke?: boolean;
+    isOriginal?: boolean;
     isAdditional?: boolean;
 }

package/lib/ImagePlaceholderObject/index.d.ts

@@ -16,6 +16,7 @@ export default class ImagePlaceholder extends fabric.Group {
     layerId?: number;
     locked?: boolean;
     imageFile?: File;
+    maskFile?: File;
     maskUrl?: string;
     isAdditional?: boolean;
     getSettings?: (attribute: string) => any;

package/lib/ImagePlaceholderObject/index.js

@@ -35,12 +35,12 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
         if (options?.imageFile) {
             this.loadImage(options?.imageFile);
         }
-        if (options?.hideStroke) {
+        if (options?.isOriginal) {
             this.rectObject.set({ strokeWidth: 0 });
         }
         else {
-            if (options?.maskUrl) {
-                this.loadMask(options?.maskUrl);
+            if (options?.maskFile || options?.maskUrl) {
+                this.loadMask(options?.maskFile ?? options?.maskUrl);
             }
         }
     },

package/lib/ImagePlaceholderObject/interfaces.d.ts

@@ -41,8 +41,9 @@ export interface IImagePlaceholderOptions extends fabric.IGroupOptions {
     personalizeId?: number;
     layerId: number;
     imageFile?: File;
-    hideStroke?: boolean;
+    isOriginal?: boolean;
     isAdditional?: boolean;
     image?: IImageOptions;
     maskUrl?: string;
+    maskFile?: File;
 }

package/lib/TextInputObject/index.js

@@ -55,14 +55,16 @@ const TextInputClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
         this.textObject.set({
             width: this.width,
         });
-        if (options?.fontUrl) {
-            (0, utils_1.loadFontFromUrl)(options?.fontUrl, text?.fontFamily ?? "").then(() => {
-                this.canvas?.renderAll?.();
-            });
-        }
-        if (options?.hideStroke) {
+        if (options?.isOriginal) {
             this.rectObject.set({ strokeWidth: 0 });
         }
+        else {
+            if (options?.fontUrl) {
+                (0, utils_1.loadFontFromUrl)(options?.fontUrl, text?.fontFamily ?? "").then(() => {
+                    this.canvas?.renderAll?.();
+                });
+            }
+        }
     },
     autoChangeFontSize: function (changeSpeed) {
         if (this.width <= this.textObject.__lineWidths ||

package/lib/TextInputObject/interfaces.d.ts

@@ -20,6 +20,6 @@ export interface ITextInputOptions extends fabric.IGroupOptions {
         suffix?: string;
     };
     fontUrl?: string;
-    hideStroke?: boolean;
+    isOriginal?: boolean;
     isAdditional?: boolean;
 }

package/lib/utils/index.d.ts

@@ -14,5 +14,5 @@ export declare const getObject: (object: any, options?: {
 }) => Clipart | ImagePlaceholder | TextInput | undefined;
 export declare const asyncGetObject: (object: any, options?: {
     isOriginal?: boolean;
-}) => Promise<Clipart | ImagePlaceholder | TextInput | undefined>;
+}) => Promise<fabric.Image | Clipart | ImagePlaceholder | TextInput | undefined>;
 export default fabric;

package/lib/utils/index.js

@@ -114,21 +114,21 @@ const getObject = (object, options) => {
         case constants_1.OBJECT_TYPES.textInput: {
             const textInputObject = new TextInputObject_1.default({
                 ...object,
-                hideStroke: options?.isOriginal,
+                isOriginal: options?.isOriginal,
             });
             return textInputObject;
         }
         case constants_1.OBJECT_TYPES.clipart: {
             const clipartObject = new ClipartObject_1.default({
                 ...object,
-                hideStroke: options?.isOriginal,
+                isOriginal: options?.isOriginal,
             });
             return clipartObject;
         }
         case constants_1.OBJECT_TYPES.imagePlaceHolder: {
             const imagePlaceHolderObject = new ImagePlaceholderObject_1.default({
                 ...object,
-                hideStroke: options?.isOriginal,
+                isOriginal: options?.isOriginal,
             });
             return imagePlaceHolderObject;
         }
@@ -142,21 +142,27 @@ const asyncGetObject = async (object, options) => {
         case constants_1.OBJECT_TYPES.textInput: {
             const textInputObject = new TextInputObject_1.default({
                 ...object,
-                hideStroke: options?.isOriginal,
+                isOriginal: options?.isOriginal,
             });
             return textInputObject;
         }
         case constants_1.OBJECT_TYPES.clipart: {
             const clipartObject = new ClipartObject_1.default({
                 ...object,
-                hideStroke: options?.isOriginal,
+                isOriginal: options?.isOriginal,
             });
+            if (object?.clipartUrl) {
+                const clipart = await clipartObject?.loadCustomizedClipart?.(object?.clipartUrl);
+                if (clipart) {
+                    return clipart;
+                }
+            }
             return clipartObject;
         }
         case constants_1.OBJECT_TYPES.imagePlaceHolder: {
             const imagePlaceHolderObject = new ImagePlaceholderObject_1.default({
                 ...object,
-                hideStroke: options?.isOriginal,
+                isOriginal: options?.isOriginal,
             });
             if (object?.image) {
                 const image = await imagePlaceHolderObject?.loadCustomizedImage?.(object?.image);

package/package.json

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