customized-fabric 1.4.8 → 1.4.9

package/lib/ImagePlaceholderObject/index.d.ts

@@ -1,7 +1,7 @@
 import { fabric } from "fabric";
 import { IImageOptions, IImagePlaceholderOptions, ImageFilterType } from "./interfaces";
 import { ObjectId } from "../utils/objectId";
-export declare const toImagePlaceholderObject: (imagePlaceholderObject: ImagePlaceholder) => {
+export declare const toImagePlaceholderObject: (object: ImagePlaceholder) => {
     _id: ObjectId | undefined;
     id: ObjectId | undefined;
     personalizeId: number | undefined;
@@ -10,8 +10,12 @@ export declare const toImagePlaceholderObject: (imagePlaceholderObject: ImagePla
     locked: boolean | undefined;
     isAdditional: boolean | undefined;
     maskUrl: string | undefined;
-    imageType: string | undefined;
-    imageColor: string | undefined;
+    imageSettings: {
+        type: string | undefined;
+        color: string | undefined;
+        removeBackground: boolean | undefined;
+        faceCutout: boolean | undefined;
+    };
 };
 export default class ImagePlaceholder extends fabric.Group {
     _id?: ObjectId;
@@ -23,6 +27,8 @@ export default class ImagePlaceholder extends fabric.Group {
     isAdditional?: boolean;
     imageColor?: string;
     imageType?: string;
+    removeBackground?: boolean;
+    faceCutout?: boolean;
     imageObject?: fabric.Image;
     uploadedImage?: fabric.Image;
     getSettings?: (attribute: string) => any;

package/lib/ImagePlaceholderObject/index.js

@@ -49,11 +49,15 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
                 this.loadImage(options?.imageFile);
             }
         }
-        if (options?.imageType) {
-            this.setImageType(options?.imageType);
-        }
-        if (options?.imageColor) {
-            this.setImageColor(options?.imageColor);
+        if (options?.imageSettings) {
+            const { type, color, removeBackground, faceCutout } = options?.imageSettings;
+            if (type) {
+                this.setImageType(type);
+            }
+            if (color) {
+                this.setImageColor(color);
+            }
+            this.set({ removeBackground, faceCutout });
         }
     },
     loadImage: async function (image) {
@@ -151,8 +155,12 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
                 skewX,
                 skewY,
                 opacity,
-                type: this.imageType,
-                color: this.imageColor,
+                settings: {
+                    type: this?.imageType,
+                    color: this?.imageColor,
+                    removeBackground: this?.removeBackground,
+                    faceCutout: this?.faceCutout,
+                },
             };
         }
         else {
@@ -179,7 +187,7 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
         }
     },
     removeMask: async function () {
-        this.set({ clipPath: undefined, maskUrl: undefined });
+        this.set({ clipPath: undefined, maskUrl: "" });
         this.remove(this.maskObject);
         this.maskObject = undefined;
         this.canvas?.renderAll();
@@ -227,7 +235,8 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
                 const loadedImage = await (0, utils_1.loadImageFromUrl)(url);
                 if (loadedImage) {
                     const mask = await this.getMask();
-                    const { top, left, scaleX, width, angle, color, type, flipX, flipY } = data;
+                    const { top, left, scaleX, width, angle, flipX, flipY, settings = {}, } = data;
+                    const { color, type } = settings;
                     const ratioWidth = (width * scaleX) / (clipPath.width * clipPath.scaleX);
                     const ratioPosition = this.width / clipPath.width;
                     loadedImage.scaleToWidth(ratioWidth * this.width);
@@ -267,18 +276,22 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
         }
     },
 });
-const toImagePlaceholderObject = (imagePlaceholderObject) => {
+const toImagePlaceholderObject = (object) => {
     return {
-        _id: imagePlaceholderObject?._id,
-        id: imagePlaceholderObject?._id,
-        personalizeId: imagePlaceholderObject?.layerId,
-        layerId: imagePlaceholderObject?.layerId,
-        name: imagePlaceholderObject?.name,
-        locked: imagePlaceholderObject?.locked,
-        isAdditional: imagePlaceholderObject?.isAdditional,
-        maskUrl: imagePlaceholderObject?.maskUrl,
-        imageType: imagePlaceholderObject?.imageType,
-        imageColor: imagePlaceholderObject?.imageColor,
+        _id: object?._id,
+        id: object?._id,
+        personalizeId: object?.layerId,
+        layerId: object?.layerId,
+        name: object?.name,
+        locked: object?.locked,
+        isAdditional: object?.isAdditional,
+        maskUrl: object?.maskUrl,
+        imageSettings: {
+            type: object?.imageType,
+            color: object?.imageColor,
+            removeBackground: object?.removeBackground,
+            faceCutout: object?.faceCutout,
+        },
     };
 };
 exports.toImagePlaceholderObject = toImagePlaceholderObject;

package/lib/ImagePlaceholderObject/interfaces.d.ts

@@ -33,8 +33,10 @@ export interface IImageOptions {
         skewX: number;
         skewY: number;
         opacity: number;
-        color?: string;
-        type?: ImageFilterType;
+        settings: {
+            color?: string;
+            type?: ImageFilterType;
+        };
     };
     clipPath: IClipPathOptions;
 }
@@ -43,13 +45,17 @@ export interface IImagePlaceholderOptions extends fabric.IGroupOptions {
     personalizeId?: number;
     layerId: number;
     imageFile?: File;
-    imageType?: string;
-    imageColor?: string;
     isOriginal?: boolean;
     isAdditional?: boolean;
     image?: IImageOptions;
     maskUrl?: string;
     maskFile?: File;
     hideStroke?: boolean;
+    imageSettings?: {
+        type?: string;
+        color?: string;
+        removeBackground?: boolean;
+        faceCutout?: boolean;
+    };
 }
 export declare type ImageFilterType = "Full color" | "Grayscale" | "Blend color";

package/lib/utils/index.js

@@ -202,6 +202,9 @@ fabric_1.fabric.Group.prototype.originX = "center";
 fabric_1.fabric.Group.prototype.originY = "center";
 fabric_1.fabric.ActiveSelection.prototype.originX = "center";
 fabric_1.fabric.ActiveSelection.prototype.originY = "center";
+if (fabric_1.fabric.isWebglSupported()) {
+    fabric_1.fabric.textureSize = fabric_1.fabric.maxTextureSize;
+}
 fabric_1.fabric.Object.prototype.toObject = (function (toObject) {
     return function () {
         switch (this.type) {

package/package.json

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