customized-fabric 1.5.6 → 1.5.8

package/lib/ClipartObject/index.d.ts

@@ -1,7 +1,7 @@
 import { fabric } from "fabric";
 import { IClipartOptions } from "./interfaces";
 import { ObjectId } from "../utils/objectId";
-export declare const toClipartObject: (clipartObject: Clipart) => {
+export declare const toClipartObject: (object: Clipart) => {
     _id: ObjectId | undefined;
     id: ObjectId | undefined;
     personalizeId: number | undefined;
@@ -14,6 +14,8 @@ export declare const toClipartObject: (clipartObject: Clipart) => {
     clipartRootCategoryId: string | undefined;
     clipartCategoryId: string | undefined;
     clipartOptionId: number | undefined;
+    layoutGroupId: string | undefined;
+    layoutGroupName: string | undefined;
 };
 export default class Clipart extends fabric.Group {
     _id?: ObjectId;
@@ -28,6 +30,8 @@ export default class Clipart extends fabric.Group {
     clipartOptionId?: number;
     clipartUrl?: string;
     imageObject?: fabric.Image;
+    layoutGroupId?: string;
+    layoutGroupName?: string;
     loadImage?: (imageFile: File | string) => Promise<void>;
     getSettings?: (attribute: string) => any;
     setSizes?: (options: {

package/lib/ClipartObject/index.js

@@ -126,20 +126,22 @@ const ClipartClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
         }
     },
 });
-const toClipartObject = (clipartObject) => {
+const toClipartObject = (object) => {
     return {
-        _id: clipartObject?._id,
-        id: clipartObject?._id,
-        personalizeId: clipartObject?.layerId,
-        layerId: clipartObject?.layerId,
-        name: clipartObject?.name,
-        locked: clipartObject?.locked,
-        isAdditional: clipartObject?.isAdditional,
-        clipartUrl: clipartObject?.clipartUrl,
-        clipartFile: clipartObject?.clipartFile,
-        clipartRootCategoryId: clipartObject?.clipartRootCategoryId,
-        clipartCategoryId: clipartObject?.clipartCategoryId,
-        clipartOptionId: clipartObject?.clipartOptionId,
+        _id: object?._id,
+        id: object?._id,
+        personalizeId: object?.layerId,
+        layerId: object?.layerId,
+        name: object?.name,
+        locked: object?.locked,
+        isAdditional: object?.isAdditional,
+        clipartUrl: object?.clipartUrl,
+        clipartFile: object?.clipartFile,
+        clipartRootCategoryId: object?.clipartRootCategoryId,
+        clipartCategoryId: object?.clipartCategoryId,
+        clipartOptionId: object?.clipartOptionId,
+        layoutGroupId: object?.layoutGroupId,
+        layoutGroupName: object?.layoutGroupName,
     };
 };
 exports.toClipartObject = toClipartObject;

package/lib/CurvedTextObject/index.d.ts

@@ -12,6 +12,8 @@ export declare const toCurvedTextObject: (object: CurvedText) => {
     fontCategoryId: string | undefined;
     fontUrl: string | undefined;
     isAdditional: boolean | undefined;
+    layoutGroupId: string | undefined;
+    layoutGroupName: string | undefined;
     text: {
         fontWeight: string | number | undefined;
         fontSize: number | undefined;
@@ -41,6 +43,8 @@ export default class CurvedText extends fabric.Group {
     fontCategoryId?: string;
     fontUrl?: string;
     isAdditional?: boolean;
+    layoutGroupId?: string;
+    layoutGroupName?: string;
     setText?: (text: string) => void;
     setPrefix?: (text: string) => void;
     setInfix?: (text: string) => void;

package/lib/CurvedTextObject/index.js

@@ -205,6 +205,8 @@ const toCurvedTextObject = (object) => {
         fontCategoryId: object?.fontCategoryId,
         fontUrl: object?.fontUrl,
         isAdditional: object?.isAdditional,
+        layoutGroupId: object?.layoutGroupId,
+        layoutGroupName: object?.layoutGroupName,
         text: {
             fontWeight: textObject?.fontWeight,
             fontSize: textObject?.fontSize,

package/lib/ImagePlaceholderObject/index.d.ts

@@ -10,6 +10,8 @@ export declare const toImagePlaceholderObject: (object: ImagePlaceholder) => {
     locked: boolean | undefined;
     isAdditional: boolean | undefined;
     maskUrl: string | undefined;
+    layoutGroupId: string | undefined;
+    layoutGroupName: string | undefined;
     imageSettings: {
         type: string | undefined;
         color: string | undefined;
@@ -31,6 +33,8 @@ export default class ImagePlaceholder extends fabric.Group {
     faceCutout?: boolean;
     imageObject?: fabric.Image;
     uploadedImage?: fabric.Image;
+    layoutGroupId?: string;
+    layoutGroupName?: string;
     getSettings?: (attribute: string) => any;
     setSizes?: (options: {
         width?: number;

package/lib/ImagePlaceholderObject/index.js

@@ -122,7 +122,12 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
             const canvas = this?.canvas;
             canvas?.remove(this.uploadedImage);
             this.uploadedImage = loadedImage;
-            canvas?.add(this.uploadedImage);
+            const index = canvas
+                ?.getObjects()
+                ?.findIndex((obj) => obj._id == this._id);
+            if (index >= 0) {
+                canvas.insertAt(loadedImage, index, false);
+            }
             this.fitImage(this.uploadedImage);
             this.applyImageFilters(this.uploadedImage);
             canvas?.renderAll();
@@ -286,6 +291,8 @@ const toImagePlaceholderObject = (object) => {
         locked: object?.locked,
         isAdditional: object?.isAdditional,
         maskUrl: object?.maskUrl,
+        layoutGroupId: object?.layoutGroupId,
+        layoutGroupName: object?.layoutGroupName,
         imageSettings: {
             type: object?.imageType,
             color: object?.imageColor,

package/lib/LayoutGroupObject/index.d.ts

@@ -12,5 +12,6 @@ export default class LayoutGroup {
     constructor(options?: ILayoutGroupOptions);
     select(): void;
     delete(): void;
+    rename(name: string): void;
     getObjects(): fabric.Object[] | undefined;
 }

package/lib/LayoutGroupObject/index.js

@@ -5,14 +5,14 @@ const objectId_1 = require("../utils/objectId");
 const constants_1 = require("./constants");
 class LayoutGroup {
     constructor(options) {
-        const { objects = [], canvas, _id } = options ?? {};
-        const objectId = _id ?? new objectId_1.ObjectId().toString();
+        const { objects = [], canvas, _id, name = constants_1.LAYOUT_GROUP_OBJECT_ATTRIBUTES.name, } = options ?? {};
+        const groupId = _id ?? new objectId_1.ObjectId().toString();
         objects?.map((obj) => {
-            obj.set({ layoutGroupId: objectId });
+            obj.set({ layoutGroupId: groupId, layoutGroupName: name });
         });
-        this._id = objectId;
+        this._id = groupId;
+        this.name = name;
         this.type = constants_1.LAYOUT_GROUP_OBJECT_ATTRIBUTES.type;
-        this.name = constants_1.LAYOUT_GROUP_OBJECT_ATTRIBUTES.name;
         this.objects = objects;
         this.canvas = canvas;
         return this;
@@ -44,6 +44,12 @@ class LayoutGroup {
             });
         }
     }
+    rename(name) {
+        this.name = name;
+        this.objects?.map((obj) => {
+            obj.set({ layoutGroupName: name });
+        });
+    }
     getObjects() {
         return this.objects;
     }

package/lib/LayoutGroupObject/interfaces.d.ts

@@ -2,4 +2,5 @@ export interface ILayoutGroupOptions extends fabric.IObjectOptions {
     _id?: string;
     canvas?: fabric.Canvas;
     objects?: fabric.Object[];
+    name?: string;
 }

package/lib/TextInputObject/index.d.ts

@@ -1,7 +1,7 @@
 import { fabric } from "fabric";
 import { ITextInputOptions } from "./interfaces";
 import { ObjectId } from "../utils/objectId";
-export declare const toTextInputObject: (textInputObject: TextInput) => {
+export declare const toTextInputObject: (object: TextInput) => {
     _id: ObjectId | undefined;
     id: ObjectId | undefined;
     personalizeId: number | undefined;
@@ -12,6 +12,8 @@ export declare const toTextInputObject: (textInputObject: TextInput) => {
     fontCategoryId: string | undefined;
     fontUrl: string | undefined;
     isAdditional: boolean | undefined;
+    layoutGroupId: string | undefined;
+    layoutGroupName: string | undefined;
     text: {
         fontWeight: string | number | undefined;
         fontSize: number | undefined;
@@ -38,6 +40,8 @@ export default class TextInput extends fabric.Group {
     fontCategoryId?: string;
     fontUrl?: string;
     isAdditional?: boolean;
+    layoutGroupId?: string;
+    layoutGroupName?: string;
     setText?: (text: string) => void;
     setPrefix?: (text: string) => void;
     setInfix?: (text: string) => void;

package/lib/TextInputObject/index.js

@@ -178,19 +178,21 @@ const TextInputClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
         return this.textObject.get(attribute);
     },
 });
-const toTextInputObject = (textInputObject) => {
-    const textObject = textInputObject.textObject;
+const toTextInputObject = (object) => {
+    const textObject = object.textObject;
     return {
-        _id: textInputObject?._id,
-        id: textInputObject?._id,
-        personalizeId: textInputObject?.layerId,
-        layerId: textInputObject?.layerId,
-        name: textInputObject?.name,
-        locked: textInputObject?.locked,
-        fontId: textInputObject?.fontId,
-        fontCategoryId: textInputObject?.fontCategoryId,
-        fontUrl: textInputObject?.fontUrl,
-        isAdditional: textInputObject?.isAdditional,
+        _id: object?._id,
+        id: object?._id,
+        personalizeId: object?.layerId,
+        layerId: object?.layerId,
+        name: object?.name,
+        locked: object?.locked,
+        fontId: object?.fontId,
+        fontCategoryId: object?.fontCategoryId,
+        fontUrl: object?.fontUrl,
+        isAdditional: object?.isAdditional,
+        layoutGroupId: object?.layoutGroupId,
+        layoutGroupName: object?.layoutGroupName,
         text: {
             fontWeight: textObject?.fontWeight,
             fontSize: textObject?.fontSize,

package/package.json

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