customized-fabric 1.2.2 → 1.2.4

package/lib/GroupLayoutObject/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const GROUP_LAYOUT_OBJECT_ATTRIBUTES: {
+    name: string;
+    type: string;
+};

package/lib/GroupLayoutObject/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GROUP_LAYOUT_OBJECT_ATTRIBUTES = void 0;
+exports.GROUP_LAYOUT_OBJECT_ATTRIBUTES = {
+    name: "Group layout",
+    type: "GROUP_LAYOUT",
+};

package/lib/GroupLayoutObject/index.d.ts

@@ -0,0 +1,19 @@
+import { fabric } from "fabric";
+import { ObjectId } from "../utils/objectId";
+import { IGroupLayoutOptions } from "./interfaces";
+export declare const toGroupLayoutObject: (groupLayoutObject: GroupLayout) => {
+    _id: ObjectId | undefined;
+    id: ObjectId | undefined;
+    personalizeId: number | undefined;
+    layerId: number | undefined;
+    name: string | undefined;
+    locked: boolean | undefined;
+    isAdditional: boolean | undefined;
+};
+export default class GroupLayout extends fabric.ActiveSelection {
+    _id?: ObjectId;
+    layerId?: number;
+    locked?: boolean;
+    isAdditional?: boolean;
+    constructor(options?: IGroupLayoutOptions);
+}

package/lib/GroupLayoutObject/index.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toGroupLayoutObject = void 0;
+const fabric_1 = require("fabric");
+const GroupLayoutClass = fabric_1.fabric.util.createClass(fabric_1.fabric.ActiveSelection, {
+    initialize: async function (options) { },
+});
+const toGroupLayoutObject = (groupLayoutObject) => {
+    return {
+        _id: groupLayoutObject._id,
+        id: groupLayoutObject._id,
+        personalizeId: groupLayoutObject.layerId,
+        layerId: groupLayoutObject.layerId,
+        name: groupLayoutObject.name,
+        locked: groupLayoutObject.locked,
+        isAdditional: groupLayoutObject?.isAdditional,
+    };
+};
+exports.toGroupLayoutObject = toGroupLayoutObject;
+class GroupLayout extends fabric_1.fabric.ActiveSelection {
+    constructor(options) {
+        super();
+        return new GroupLayoutClass(options);
+    }
+}
+exports.default = GroupLayout;

package/lib/GroupLayoutObject/interfaces.d.ts

@@ -0,0 +1,3 @@
+export interface IGroupLayoutOptions extends fabric.IObjectOptions {
+    objects?: fabric.Object[];
+}

package/lib/GroupLayoutObject/interfaces.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/ImagePlaceholderObject/index.d.ts

@@ -9,21 +9,25 @@ export declare const toImagePlaceholderObject: (imagePlaceholderObject: ImagePla
     name: string | undefined;
     locked: boolean | undefined;
     isAdditional: boolean | undefined;
+    maskUrl: string | undefined;
 };
 export default class ImagePlaceholder extends fabric.Group {
     _id?: ObjectId;
     layerId?: number;
     locked?: boolean;
     imageFile?: File;
+    maskUrl?: string;
     isAdditional?: boolean;
-    loadImageFromFile?: (imageFile: File) => void;
-    loadImageFromUrl?: (imageUrl: string) => void;
-    loadUploadedImage?: (imageFile: File) => Promise<fabric.Image>;
     getSettings?: (attribute: string) => any;
     setSizes?: (options: {
         width?: number;
         height?: number;
     }) => void;
     toImageObject?: () => object;
+    loadImage?: (imageInput: File | string) => void;
+    loadUploadedImage?: (imageFile: File) => Promise<fabric.Image>;
+    removeUploadedImage?: () => void;
+    loadMask?: (maskInput: File | string) => void;
+    removeMask?: () => void;
     constructor(options?: IImagePlaceholderOptions);
 }

package/lib/ImagePlaceholderObject/index.js

@@ -16,13 +16,16 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
             objectCaching: false,
             ...constants_1.IMAGE_PLACEHOLDER_OBJECT_ATTRIBUTES.stroke,
         });
-        this.imageObject = new fabric_1.fabric.Image("");
-        const group = new fabric_1.fabric.Group([this.rectObject, this.imageObject]);
+        const group = new fabric_1.fabric.Group([this.rectObject]);
         this.set(group);
         this.on("scaling", () => {
             let width = this.width * this.scaleX;
             let height = this.height * this.scaleY;
             this.setSizes({ width, height });
+            this.maskObject?.set({
+                scaleX: width / this.maskObject.width,
+                scaleY: height / this.maskObject.height,
+            });
             this.canvas?.renderAll();
         });
         this.set({
@@ -34,7 +37,7 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
             objectCaching: false,
         });
         if (options?.imageFile) {
-            this.loadImageFromFile(options?.imageFile);
+            this.loadImage(options?.imageFile);
         }
         if (options?.hideStroke) {
             this.rectObject.set({ strokeWidth: 0 });
@@ -43,7 +46,7 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
             const { image } = options;
             const { url, data, clipPath } = image;
             if (url && data && clipPath) {
-                const loadedImage = await (0, utils_1.loadImageFromUrl)(image?.url);
+                const loadedImage = await (0, utils_1.loadImage)(image?.url);
                 if (loadedImage) {
                     const { top, left, scaleX, width, originX, originY } = data;
                     const ratioWidth = (width * scaleX) / (clipPath.width * clipPath.scaleX);
@@ -65,32 +68,19 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
                 }
             }
         }
+        if (options?.maskUrl) {
+            this.loadMask(options?.maskUrl);
+        }
     },
-    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) {
-        if (image.width && image.height) {
-            image.set({
+    loadImage: async function (image) {
+        const loadedImage = await (0, utils_1.loadImage)(image);
+        if (loadedImage?.width && loadedImage?.height) {
+            loadedImage.set({
                 originX: "center",
                 originY: "center",
             });
             this.remove(this.imageObject);
-            this.imageObject = image;
-            this.add(this.imageObject);
-            this.fitImage(this.imageObject);
-        }
-        else {
-            this.remove(this.imageObject);
-            this.imageObject = new fabric_1.fabric.Image("");
+            this.imageObject = loadedImage;
             this.add(this.imageObject);
             this.fitImage(this.imageObject);
         }
@@ -110,41 +100,50 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
         }
         this.set(attributes);
         this.rectObject.set(attributes);
+        this.maskObject?.set({
+            scaleX: this.width / this.maskObject.width,
+            scaleY: this.height / this.maskObject.height,
+        });
         this.fitImage(this.imageObject);
         this.canvas?.renderAll?.();
     },
     fitImage: function (image) {
-        const imageScaleX = this.width / (image?.width ?? 1);
-        const imageScaleY = this.height / (image?.height ?? 1);
-        imageScaleX > imageScaleY
-            ? image.set({ scaleX: imageScaleY, scaleY: imageScaleY })
-            : image.set({ scaleX: imageScaleX, scaleY: imageScaleX });
+        if (image) {
+            const imageScaleX = this.width / (image?.width ?? 1);
+            const imageScaleY = this.height / (image?.height ?? 1);
+            imageScaleX > imageScaleY
+                ? image.set({ scaleX: imageScaleY, scaleY: imageScaleY })
+                : image.set({ scaleX: imageScaleX, scaleY: imageScaleX });
+        }
     },
     getSettings: function (attribute) {
         return this.get(attribute);
     },
     loadUploadedImage: async function (image) {
-        let loadedImage = undefined;
-        if (image instanceof File) {
-            loadedImage = await (0, utils_1.loadImageFromFile)(image);
-        }
-        else if (typeof image == "string") {
-            loadedImage = await (0, utils_1.loadImageFromUrl)(image);
-        }
+        const loadedImage = await (0, utils_1.loadImage)(image);
         if (loadedImage) {
             loadedImage.set({
                 originX: "left",
                 originY: "top",
                 top: this.top,
                 left: this.left,
-                clipPath: new fabric_1.fabric.Rect({
-                    width: this.width,
-                    height: this.height,
-                    top: this.top,
-                    left: this.left,
-                    absolutePositioned: true,
-                }),
             });
+            if (this.maskObject) {
+                loadedImage.set({
+                    clipPath: this.maskObject,
+                });
+            }
+            else {
+                loadedImage.set({
+                    clipPath: new fabric_1.fabric.Rect({
+                        width: this.width,
+                        height: this.height,
+                        top: this.top,
+                        left: this.left,
+                        absolutePositioned: true,
+                    }),
+                });
+            }
             this.fitImage(loadedImage);
             this.uploadedImage = loadedImage;
             const canvas = this?.canvas;
@@ -154,10 +153,12 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
         return this.uploadedImage;
     },
     removeUploadedImage: function () {
-        const canvas = this?.canvas;
-        canvas?.remove(this.uploadedImage);
-        this.uploadedImage = undefined;
-        canvas?.renderAll();
+        if (this.uploadedImage) {
+            const canvas = this?.canvas;
+            canvas?.remove(this.uploadedImage);
+            this.uploadedImage = undefined;
+            canvas?.renderAll();
+        }
     },
     toImageObject: function () {
         if (this.uploadedImage) {
@@ -183,6 +184,24 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
             return {};
         }
     },
+    loadMask: async function (maskInput) {
+        const loadedMask = await (0, utils_1.loadImage)(maskInput);
+        if (loadedMask?.width && loadedMask?.height) {
+            loadedMask.set({
+                originX: "center",
+                originY: "center",
+                scaleX: this.width / loadedMask.width,
+                scaleY: this.height / loadedMask.height,
+                absolutePositioned: false,
+            });
+            this.maskObject = loadedMask;
+            this.set({ clipPath: this.maskObject });
+            this.canvas?.renderAll();
+        }
+    },
+    removeMask: async function () {
+        this.set({ clipPath: undefined });
+    },
 });
 const toImagePlaceholderObject = (imagePlaceholderObject) => {
     return {
@@ -193,6 +212,7 @@ const toImagePlaceholderObject = (imagePlaceholderObject) => {
         name: imagePlaceholderObject?.name,
         locked: imagePlaceholderObject?.locked,
         isAdditional: imagePlaceholderObject?.isAdditional,
+        maskUrl: imagePlaceholderObject?.maskUrl,
     };
 };
 exports.toImagePlaceholderObject = toImagePlaceholderObject;

package/lib/ImagePlaceholderObject/interfaces.d.ts

@@ -41,4 +41,5 @@ export interface IImagePlaceholderOptions extends fabric.IGroupOptions {
             opacity: number;
         };
     };
+    maskUrl?: string;
 }

package/lib/utils/index.d.ts

@@ -6,6 +6,7 @@ export declare const loadFontFromUrl: (url: string, name: string) => Promise<voi
 export declare const isFontLoaded: (name: string) => boolean;
 export declare const loadImageFromFile: (image: File) => Promise<fabric.Image>;
 export declare const loadImageFromUrl: (url: string) => Promise<fabric.Image>;
+export declare const loadImage: (imageInput: File | string) => Promise<fabric.Image | undefined>;
 export declare const lockObject: (object: fabric.Object | any, locked: boolean, selectable?: boolean) => void;
 export declare const lockAllObjects: (canvas: fabric.Canvas, locked: boolean, selectable?: boolean) => void;
 export declare const getObject: (object: any, options?: {

package/lib/utils/index.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getObject = exports.lockAllObjects = exports.lockObject = exports.loadImageFromUrl = exports.loadImageFromFile = exports.isFontLoaded = exports.loadFontFromUrl = void 0;
+exports.getObject = exports.lockAllObjects = exports.lockObject = exports.loadImage = exports.loadImageFromUrl = exports.loadImageFromFile = exports.isFontLoaded = exports.loadFontFromUrl = void 0;
 const fabric_1 = require("fabric");
 const constants_1 = require("../constants");
 const ClipartObject_1 = __importStar(require("../ClipartObject"));
@@ -75,6 +75,17 @@ const loadImageFromUrl = (url) => {
     });
 };
 exports.loadImageFromUrl = loadImageFromUrl;
+const loadImage = async (imageInput) => {
+    let loadedImage = undefined;
+    if (imageInput instanceof File) {
+        loadedImage = await (0, exports.loadImageFromFile)(imageInput);
+    }
+    else if (typeof imageInput == "string") {
+        loadedImage = await (0, exports.loadImageFromUrl)(imageInput);
+    }
+    return loadedImage;
+};
+exports.loadImage = loadImage;
 const lockObject = (object, locked, selectable) => {
     object.set({
         hasControls: !locked,

package/package.json

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