customized-fabric 1.7.3 → 1.7.5

package/lib/ImagePlaceholderObject/index.d.ts

@@ -18,6 +18,7 @@ export declare const toImagePlaceholderObject: (object: ImagePlaceholder) => {
         removeBackground: boolean | undefined;
         faceCutout: boolean | undefined;
         advancedFilter: string | undefined;
+        objectFit: string | undefined;
     };
 };
 export default class ImagePlaceholder extends fabric.Group {
@@ -37,6 +38,7 @@ export default class ImagePlaceholder extends fabric.Group {
     layoutGroupId?: string;
     layoutGroupName?: string;
     advancedFilter?: string;
+    objectFit?: string;
     getSettings?: (attribute: string) => any;
     setSizes?: (options: {
         width?: number;

package/lib/ImagePlaceholderObject/index.js

@@ -32,6 +32,8 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
             layerId: options?.personalizeId ?? options?.layerId,
             imageType: "Full color",
             objectCaching: false,
+            objectFit: "cover",
+            clipPath: this.rectObject,
         });
         if (options?.isOriginal) {
             this.rectObject?.set({ strokeWidth: 0 });
@@ -50,14 +52,14 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
             }
         }
         if (options?.imageSettings) {
-            const { type, color, removeBackground, faceCutout, advancedFilter } = options?.imageSettings;
+            const { type, color, removeBackground, faceCutout, advancedFilter, objectFit, } = options?.imageSettings;
             if (type) {
                 this.setImageType(type);
             }
             if (color) {
                 this.setImageColor(color);
             }
-            this.set({ removeBackground, faceCutout, advancedFilter });
+            this.set({ removeBackground, faceCutout, advancedFilter, objectFit });
         }
     },
     loadImage: async function (image) {
@@ -70,7 +72,7 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
             this.remove(this.imageObject);
             this.imageObject = loadedImage;
             this.add(this.imageObject);
-            this.fitImage(this.imageObject);
+            this.fitImage(this.imageObject, this.objectFit == "cover");
             this.applyImageFilters(this.imageObject);
             this.canvas?.renderAll();
         }
@@ -93,7 +95,7 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
             scaleX: this.width / this.maskObject.width,
             scaleY: this.height / this.maskObject.height,
         });
-        this.fitImage(this.imageObject);
+        this.fitImage(this.imageObject, this.objectFit == "cover");
         this.canvas?.renderAll?.();
     },
     fitImage: function (image, cover = false) {
@@ -125,6 +127,7 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
                 top: this.top,
                 left: this.left,
                 clipPath: mask,
+                angle: this.angle,
             });
             const canvas = this?.canvas;
             canvas?.remove(this.uploadedImage);
@@ -135,7 +138,7 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
             if (index >= 0) {
                 canvas.insertAt(loadedImage, index, false);
             }
-            this.fitImage(this.uploadedImage, true);
+            this.fitImage(this.uploadedImage, this.objectFit == "cover");
             this.applyImageFilters(this.uploadedImage);
             canvas?.renderAll();
         }
@@ -199,7 +202,7 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
         }
     },
     removeMask: async function () {
-        this.set({ clipPath: undefined, maskUrl: undefined });
+        this.set({ clipPath: this.rectObject, maskUrl: undefined });
         this.remove(this.maskObject);
         this.maskObject = undefined;
         this.canvas?.renderAll();
@@ -306,6 +309,7 @@ const toImagePlaceholderObject = (object) => {
             removeBackground: object?.removeBackground,
             faceCutout: object?.faceCutout,
             advancedFilter: object?.advancedFilter,
+            objectFit: object?.objectFit,
         },
     };
 };

package/lib/ImagePlaceholderObject/interfaces.d.ts

@@ -58,6 +58,7 @@ export interface IImagePlaceholderOptions extends fabric.IGroupOptions {
         removeBackground?: boolean;
         faceCutout?: boolean;
         advancedFilter?: string;
+        objectFit?: string;
     };
 }
 export declare type ImageFilterType = "Full color" | "Grayscale" | "Blend color";

package/lib/utils/control.util.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/utils/control.util.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fabric_1 = require("fabric");
+const constants_1 = require("../constants");
+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 = "#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";
+fabric_1.fabric.ActiveSelection.prototype.originY = "center";
+fabric_1.fabric.textureSize = constants_1.MAX_TEXTURE_SIZE;

package/lib/utils/index.d.ts

@@ -4,6 +4,7 @@ import ImagePlaceholder from "../ImagePlaceholderObject";
 import TextInput from "../TextInputObject";
 import { ImageFilterType } from "../ImagePlaceholderObject/interfaces";
 import CurvedText from "../CurvedTextObject";
+import "./control.util";
 export declare const loadFontFromUrl: (url: string, name: string) => Promise<void>;
 export declare const isFontLoaded: (name: string) => boolean;
 export declare const loadImageFromFile: (image: File) => Promise<fabric.Image>;

package/lib/utils/index.js

@@ -30,6 +30,7 @@ const ClipartObject_1 = __importStar(require("../ClipartObject"));
 const ImagePlaceholderObject_1 = __importStar(require("../ImagePlaceholderObject"));
 const TextInputObject_1 = __importStar(require("../TextInputObject"));
 const CurvedTextObject_1 = __importStar(require("../CurvedTextObject"));
+require("./control.util");
 const loadFontFromUrl = async (url, name) => {
     if (!name || !url)
         return;
@@ -205,16 +206,6 @@ const asyncGetObject = async (object, options) => {
     }
 };
 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 = "#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";
-fabric_1.fabric.ActiveSelection.prototype.originY = "center";
-fabric_1.fabric.textureSize = constants_1.MAX_TEXTURE_SIZE;
 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.7.3",
+  "version": "1.7.5",
   "description": "Customized fabric",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",