customized-fabric 1.6.7 → 1.6.9

package/lib/ClipartObject/constants.js

@@ -5,8 +5,8 @@ exports.CLIPART_OBJECT_ATTRIBUTES = {
     name: "Clipart",
     type: "CLIPART",
     stroke: {
-        stroke: "#000000",
+        stroke: "#333",
         strokeDashArray: [5, 5],
-        strokeWidth: 2,
+        strokeWidth: 1,
     },
 };

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

@@ -23,19 +23,16 @@ const ClipartClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
         });
         this.imageObject = imageObject;
         const group = new fabric_1.fabric.Group([this.rectObject, this.imageObject]);
-        group.setControlsVisibility({
-            mt: false,
-            mr: false,
-            mb: false,
-            ml: false,
-        });
         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,7 +63,6 @@ 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);
@@ -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/constants.js

@@ -6,9 +6,9 @@ exports.CURVED_TEXT_OBJECT_ATTRIBUTES = {
     type: "CURVED_TEXT",
     maxFontSize: 200,
     stroke: {
-        stroke: "#000000",
+        stroke: "#333",
         strokeDashArray: [5, 5],
-        strokeWidth: 2,
+        strokeWidth: 1,
     },
 };
 exports.PARENT_ATTRIBUTES = ["top", "left", "width", "height", "angle"];

package/lib/ImagePlaceholderObject/constants.js

@@ -5,9 +5,9 @@ exports.IMAGE_PLACEHOLDER_OBJECT_ATTRIBUTES = {
     name: "Image placeholder",
     type: "IMAGE_PLACEHOLDER",
     stroke: {
-        stroke: "#000000",
+        stroke: "#333",
         strokeDashArray: [5, 5],
-        strokeWidth: 2,
+        strokeWidth: 1,
     },
 };
 exports.IMAGE_FILTER_TYPES = {

package/lib/TextInputObject/constants.js

@@ -6,9 +6,9 @@ exports.TEXT_INPUT_OBJECT_ATTRIBUTES = {
     type: "TEXT_INPUT",
     maxFontSize: 200,
     stroke: {
-        stroke: "#000000",
+        stroke: "#333",
         strokeDashArray: [5, 5],
-        strokeWidth: 2,
+        strokeWidth: 1,
     },
 };
 exports.PARENT_ATTRIBUTES = ["top", "left", "width", "height", "angle"];

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;
         }
@@ -211,8 +208,8 @@ exports.asyncGetObject = asyncGetObject;
 fabric_1.fabric.Object.prototype.transparentCorners = false;
 fabric_1.fabric.Object.prototype.cornerColor = "transparent";
 fabric_1.fabric.Object.prototype.cornerStyle = "circle";
-fabric_1.fabric.Object.prototype.cornerStrokeColor = "black";
-fabric_1.fabric.Object.prototype.borderColor = "black";
+fabric_1.fabric.Object.prototype.cornerStrokeColor = "#3b75cf";
+fabric_1.fabric.Object.prototype.borderColor = "#3b75cf";
 fabric_1.fabric.Group.prototype.originX = "center";
 fabric_1.fabric.Group.prototype.originY = "center";
 fabric_1.fabric.ActiveSelection.prototype.originX = "center";

package/package.json

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