customized-fabric 1.6.8 → 1.7.0

package/lib/ClipartObject/index.d.ts

@@ -38,6 +38,5 @@ export default class Clipart extends fabric.Group {
         width?: number;
         height?: number;
     }) => void;
-    loadCustomizedClipart?: (clipartUrl: string) => Promise<fabric.Image>;
     constructor(options?: IClipartOptions);
 }

package/lib/ClipartObject/index.js

@@ -22,20 +22,17 @@ const ClipartClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
             height: options?.height,
         });
         this.imageObject = imageObject;
-        const group = new fabric_1.fabric.Group([this.rectObject, this.imageObject]);
-        group.setControlsVisibility({
-            mt: false,
-            mr: false,
-            mb: false,
-            ml: false,
-        });
+        const group = new fabric_1.fabric.Group([this.imageObject, this.rectObject]);
         this.set(group);
         this.on("scaling", () => {
-            let width = this.width * this.scaleX;
-            let height = this.height * this.scaleY;
-            const imageScaleX = width / this.imageObject.width;
-            const imageScaleY = height / this.imageObject.height;
-            this.imageObject.set({ scaleX: imageScaleX, scaleY: imageScaleY });
+            const attributes = {
+                width: this.width * this.scaleX,
+                height: this.height * this.scaleY,
+                scaleX: 1,
+                scaleY: 1,
+            };
+            this.set(attributes);
+            this.rectObject?.set(attributes);
             this.fitImage(this.imageObject);
             this.canvas?.renderAll?.();
         });
@@ -66,10 +63,9 @@ const ClipartClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
                 originX: "center",
                 originY: "center",
             });
-            image.scaleToWidth(this.width);
             this.remove(this.imageObject);
             this.imageObject = image;
-            this.add(this.imageObject);
+            this.insertAt(this.imageObject, 0, false);
             this.fitImage(this.imageObject);
         }
         else {
@@ -80,7 +76,7 @@ const ClipartClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
                 height: this.height,
             });
             this.imageObject = imageObject;
-            this.add(this.imageObject);
+            this.insertAt(this.imageObject, 0, false);
             this.fitImage(this.imageObject);
         }
         this.canvas?.renderAll();
@@ -90,39 +86,35 @@ const ClipartClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
     },
     setSizes: function (options) {
         const { width, height } = options;
+        const attributes = {
+            scaleX: 1,
+            scaleY: 1,
+        };
         if (width) {
-            const scaleX = width / (this?.imageObject?.width ?? this.width);
-            this.imageObject.set({ scaleX, scaleY: scaleX });
+            attributes.width = width;
         }
         if (height) {
-            const scaleY = height / (this?.imageObject?.height ?? this.height);
-            this.imageObject.set({ scaleX: scaleY, scaleY });
+            attributes.height = height;
         }
+        this.set(attributes);
+        this.rectObject?.set(attributes);
         this.fitImage(this.imageObject);
         this.canvas?.renderAll?.();
     },
-    fitImage: function (image) {
-        const attributes = {
-            scaleX: 1,
-            scaleY: 1,
-            width: (image.width ?? 0) * (image.scaleX ?? 1),
-            height: (image.height ?? 0) * (image.scaleY ?? 1),
-        };
-        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;
+    fitImage: function (image, cover = false) {
+        if (image) {
+            const imageScaleX = this.width / (image?.width ?? 1);
+            const imageScaleY = this.height / (image?.height ?? 1);
+            if (cover) {
+                imageScaleX < imageScaleY
+                    ? image.set({ scaleX: imageScaleY, scaleY: imageScaleY })
+                    : image.set({ scaleX: imageScaleX, scaleY: imageScaleX });
+            }
+            else {
+                imageScaleX > imageScaleY
+                    ? image.set({ scaleX: imageScaleY, scaleY: imageScaleY })
+                    : image.set({ scaleX: imageScaleX, scaleY: imageScaleX });
+            }
         }
     },
 });

package/lib/CurvedTextObject/index.js

@@ -18,12 +18,14 @@ const CurvedTextClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group,
             objectCaching: false,
             ...constants_1.CURVED_TEXT_OBJECT_ATTRIBUTES.stroke,
         });
+        const { prefix = "", infix = "A", suffix = "" } = text ?? {};
         this.textObject = new fabric_1.fabric.IText("", {
             originX: "center",
             originY: "center",
             textAlign: "center",
             objectCaching: false,
             ...text,
+            text: prefix + infix + suffix,
             fontFamily: "",
         });
         const group = new fabric_1.fabric.Group([this.rectObject, this.textObject]);

package/lib/TextInputObject/index.js

@@ -17,12 +17,14 @@ const TextInputClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
             objectCaching: false,
             ...constants_1.TEXT_INPUT_OBJECT_ATTRIBUTES.stroke,
         });
+        const { prefix = "", infix = "A", suffix = "" } = text ?? {};
         this.textObject = new fabric_1.fabric.IText("", {
             originX: "center",
             originY: "center",
             textAlign: "center",
             objectCaching: false,
             ...text,
+            text: prefix + infix + suffix,
             fontFamily: "",
         });
         const group = new fabric_1.fabric.Group([this.rectObject, this.textObject]);

package/lib/utils/index.d.ts

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

package/lib/utils/index.js

@@ -176,10 +176,7 @@ const asyncGetObject = async (object, options) => {
                 isOriginal: options?.isOriginal,
             });
             if (object?.clipartUrl) {
-                const clipart = await clipartObject?.loadCustomizedClipart?.(object?.clipartUrl);
-                if (clipart) {
-                    return clipart;
-                }
+                await clipartObject?.loadImage?.(object?.clipartUrl);
             }
             return clipartObject;
         }

package/package.json

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