customized-fabric 1.7.7 → 1.7.8

package/lib/CalendarObject/constants.d.ts

@@ -0,0 +1,9 @@
+export declare const CALENDAR_OBJECT_ATTRIBUTES: {
+    name: string;
+    type: string;
+    stroke: {
+        stroke: string;
+        strokeDashArray: number[];
+        strokeWidth: number;
+    };
+};

package/lib/CalendarObject/constants.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CALENDAR_OBJECT_ATTRIBUTES = void 0;
+exports.CALENDAR_OBJECT_ATTRIBUTES = {
+    name: "Calendar",
+    type: "CALENDAR",
+    stroke: {
+        stroke: "#333",
+        strokeDashArray: [5, 5],
+        strokeWidth: 1,
+    },
+};

package/lib/CalendarObject/index.d.ts

@@ -0,0 +1,40 @@
+import { fabric } from "fabric";
+import { ICalendarOptions } from "./interfaces";
+import { ObjectId } from "../utils/objectId";
+export declare const toCalendarObject: (object: Calendar) => {
+    _id: ObjectId | undefined;
+    id: ObjectId | undefined;
+    personalizeId: number | undefined;
+    layerId: number | undefined;
+    name: string | undefined;
+    locked: boolean | undefined;
+    isAdditional: boolean | undefined;
+    layoutGroupId: string | undefined;
+    layoutGroupName: string | undefined;
+    calendartSettings: {
+        width: number | undefined;
+        height: number | undefined;
+        objectFit: string | undefined;
+    };
+};
+export default class Calendar extends fabric.Group {
+    _id?: ObjectId;
+    layerId?: number;
+    locked?: boolean;
+    imageFile?: File;
+    isAdditional?: boolean;
+    imageObject?: fabric.Image;
+    layoutGroupId?: string;
+    layoutGroupName?: string;
+    objectFit?: string;
+    calendarWidth?: number;
+    calendarHeight?: number;
+    getSettings?: (attribute: string) => any;
+    setSizes?: (options: {
+        width?: number;
+        height?: number;
+    }) => void;
+    loadImage?: (imageInput: File | string) => Promise<void>;
+    fitImage?: (image: fabric.Image, cover?: boolean) => void;
+    constructor(options?: ICalendarOptions);
+}

package/lib/CalendarObject/index.js

@@ -0,0 +1,127 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toCalendarObject = void 0;
+const fabric_1 = require("fabric");
+const constants_1 = require("./constants");
+const utils_1 = require("../utils");
+const objectId_1 = require("../utils/objectId");
+const CalendarClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
+    initialize: async function (options) {
+        this.rectObject = new fabric_1.fabric.Rect({
+            width: options?.width,
+            height: options?.height,
+            fill: undefined,
+            originX: "center",
+            originY: "center",
+            objectCaching: false,
+            ...constants_1.CALENDAR_OBJECT_ATTRIBUTES.stroke,
+        });
+        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.canvas?.renderAll();
+        });
+        this.set({
+            _id: new objectId_1.ObjectId().toString(),
+            name: constants_1.CALENDAR_OBJECT_ATTRIBUTES.name,
+            type: constants_1.CALENDAR_OBJECT_ATTRIBUTES.type,
+            ...options,
+            layerId: options?.personalizeId ?? options?.layerId,
+            objectCaching: false,
+            calendarWidth: 400,
+            calendarHeight: 400,
+            objectFit: "contain",
+            ...(options?.calendarSettings ?? {}),
+        });
+        if (options?.isOriginal) {
+            this.rectObject?.set({ strokeWidth: 0 });
+        }
+        else {
+            if (options?.hideStroke) {
+                this.rectObject?.set({ strokeWidth: 0 });
+            }
+            if (options?.imageFile) {
+                this.loadImage(options?.imageFile);
+            }
+        }
+    },
+    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 = loadedImage;
+            this.add(this.imageObject);
+            this.fitImage(this.imageObject, this.objectFit == "cover");
+            this.canvas?.renderAll();
+        }
+    },
+    setSizes: function (options) {
+        const { width, height } = options;
+        const attributes = {
+            scaleX: 1,
+            scaleY: 1,
+        };
+        if (width) {
+            attributes.width = width;
+        }
+        if (height) {
+            attributes.height = height;
+        }
+        this.set(attributes);
+        this.rectObject?.set(attributes);
+        this.fitImage(this.imageObject, this.objectFit == "cover");
+        this.canvas?.renderAll?.();
+    },
+    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 });
+            }
+        }
+    },
+    getSettings: function (attribute) {
+        return this.get(attribute);
+    },
+});
+const toCalendarObject = (object) => {
+    return {
+        _id: object?._id,
+        id: object?._id,
+        personalizeId: object?.layerId,
+        layerId: object?.layerId,
+        name: object?.name,
+        locked: object?.locked,
+        isAdditional: object?.isAdditional,
+        layoutGroupId: object?.layoutGroupId,
+        layoutGroupName: object?.layoutGroupName,
+        calendartSettings: {
+            width: object?.calendarWidth,
+            height: object?.calendarHeight,
+            objectFit: object?.objectFit,
+        },
+    };
+};
+exports.toCalendarObject = toCalendarObject;
+class Calendar extends fabric_1.fabric.Group {
+    constructor(options) {
+        super();
+        return new CalendarClass(options);
+    }
+}
+exports.default = Calendar;

package/lib/CalendarObject/interfaces.d.ts

@@ -0,0 +1,15 @@
+import { ObjectId } from "../utils/objectId";
+export interface ICalendarOptions extends fabric.IGroupOptions {
+    _id?: ObjectId;
+    personalizeId?: number;
+    layerId: number;
+    imageFile?: File;
+    isOriginal?: boolean;
+    isAdditional?: boolean;
+    hideStroke?: boolean;
+    calendarSettings?: {
+        width?: number;
+        height?: number;
+        objectFit?: string;
+    };
+}

package/lib/CalendarObject/interfaces.js

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

package/lib/constants.d.ts

@@ -5,5 +5,6 @@ export declare const OBJECT_TYPES: {
     imagePlaceHolder: string;
     activeSelection: string;
     layoutGroup: string;
+    calendar: string;
 };
 export declare const MAX_TEXTURE_SIZE = 20000;

package/lib/constants.js

@@ -1,17 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MAX_TEXTURE_SIZE = exports.OBJECT_TYPES = void 0;
-const constants_1 = require("./ClipartObject/constants");
-const constants_2 = require("./CurvedTextObject/constants");
-const constants_3 = require("./ImagePlaceholderObject/constants");
-const constants_4 = require("./LayoutGroupObject/constants");
-const constants_5 = require("./TextInputObject/constants");
+const constants_1 = require("./CalendarObject/constants");
+const constants_2 = require("./ClipartObject/constants");
+const constants_3 = require("./CurvedTextObject/constants");
+const constants_4 = require("./ImagePlaceholderObject/constants");
+const constants_5 = require("./LayoutGroupObject/constants");
+const constants_6 = require("./TextInputObject/constants");
 exports.OBJECT_TYPES = {
-    textInput: constants_5.TEXT_INPUT_OBJECT_ATTRIBUTES.type,
-    curvedText: constants_2.CURVED_TEXT_OBJECT_ATTRIBUTES.type,
-    clipart: constants_1.CLIPART_OBJECT_ATTRIBUTES.type,
-    imagePlaceHolder: constants_3.IMAGE_PLACEHOLDER_OBJECT_ATTRIBUTES.type,
+    textInput: constants_6.TEXT_INPUT_OBJECT_ATTRIBUTES.type,
+    curvedText: constants_3.CURVED_TEXT_OBJECT_ATTRIBUTES.type,
+    clipart: constants_2.CLIPART_OBJECT_ATTRIBUTES.type,
+    imagePlaceHolder: constants_4.IMAGE_PLACEHOLDER_OBJECT_ATTRIBUTES.type,
     activeSelection: "activeSelection",
-    layoutGroup: constants_4.LAYOUT_GROUP_OBJECT_ATTRIBUTES.type,
+    layoutGroup: constants_5.LAYOUT_GROUP_OBJECT_ATTRIBUTES.type,
+    calendar: constants_1.CALENDAR_OBJECT_ATTRIBUTES.type,
 };
 exports.MAX_TEXTURE_SIZE = 20000;

package/lib/index.d.ts

@@ -2,8 +2,9 @@ import TextInput from "./TextInputObject";
 import CurvedText from "./CurvedTextObject";
 import Clipart from "./ClipartObject";
 import ImagePlaceholder from "./ImagePlaceholderObject";
+import LayoutGroup from "./LayoutGroupObject";
+import Calendar from "./CalendarObject";
 import fabric, { lockObject, lockAllObjects, loadImageFromFile, loadImageFromUrl, getObject, asyncGetObject } from "./utils";
 import { OBJECT_TYPES } from "./constants";
 import { IMAGE_FILTER_TYPES } from "./ImagePlaceholderObject/constants";
-import LayoutGroup from "./LayoutGroupObject";
-export { fabric, TextInput, Clipart, ImagePlaceholder, LayoutGroup, CurvedText, lockObject, lockAllObjects, loadImageFromFile, loadImageFromUrl, getObject, asyncGetObject, OBJECT_TYPES, IMAGE_FILTER_TYPES, };
+export { fabric, TextInput, Clipart, ImagePlaceholder, LayoutGroup, CurvedText, Calendar, lockObject, lockAllObjects, loadImageFromFile, loadImageFromUrl, getObject, asyncGetObject, OBJECT_TYPES, IMAGE_FILTER_TYPES, };

package/lib/index.js

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IMAGE_FILTER_TYPES = exports.OBJECT_TYPES = exports.asyncGetObject = exports.getObject = exports.loadImageFromUrl = exports.loadImageFromFile = exports.lockAllObjects = exports.lockObject = exports.CurvedText = exports.LayoutGroup = exports.ImagePlaceholder = exports.Clipart = exports.TextInput = exports.fabric = void 0;
+exports.IMAGE_FILTER_TYPES = exports.OBJECT_TYPES = exports.asyncGetObject = exports.getObject = exports.loadImageFromUrl = exports.loadImageFromFile = exports.lockAllObjects = exports.lockObject = exports.Calendar = exports.CurvedText = exports.LayoutGroup = exports.ImagePlaceholder = exports.Clipart = exports.TextInput = exports.fabric = void 0;
 const TextInputObject_1 = __importDefault(require("./TextInputObject"));
 exports.TextInput = TextInputObject_1.default;
 const CurvedTextObject_1 = __importDefault(require("./CurvedTextObject"));
@@ -35,6 +35,10 @@ const ClipartObject_1 = __importDefault(require("./ClipartObject"));
 exports.Clipart = ClipartObject_1.default;
 const ImagePlaceholderObject_1 = __importDefault(require("./ImagePlaceholderObject"));
 exports.ImagePlaceholder = ImagePlaceholderObject_1.default;
+const LayoutGroupObject_1 = __importDefault(require("./LayoutGroupObject"));
+exports.LayoutGroup = LayoutGroupObject_1.default;
+const CalendarObject_1 = __importDefault(require("./CalendarObject"));
+exports.Calendar = CalendarObject_1.default;
 const utils_1 = __importStar(require("./utils"));
 exports.fabric = utils_1.default;
 Object.defineProperty(exports, "lockObject", { enumerable: true, get: function () { return utils_1.lockObject; } });
@@ -47,5 +51,3 @@ const constants_1 = require("./constants");
 Object.defineProperty(exports, "OBJECT_TYPES", { enumerable: true, get: function () { return constants_1.OBJECT_TYPES; } });
 const constants_2 = require("./ImagePlaceholderObject/constants");
 Object.defineProperty(exports, "IMAGE_FILTER_TYPES", { enumerable: true, get: function () { return constants_2.IMAGE_FILTER_TYPES; } });
-const LayoutGroupObject_1 = __importDefault(require("./LayoutGroupObject"));
-exports.LayoutGroup = LayoutGroupObject_1.default;

package/lib/utils/index.d.ts

@@ -5,6 +5,7 @@ import TextInput from "../TextInputObject";
 import { ImageFilterType } from "../ImagePlaceholderObject/interfaces";
 import CurvedText from "../CurvedTextObject";
 import "./control.util";
+import Calendar from "../CalendarObject";
 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>;
@@ -18,8 +19,8 @@ export declare const lockAllObjects: (canvas: fabric.Canvas, locked: boolean, se
 export declare const getObject: (object: any, options?: {
     isOriginal?: boolean;
     hideStroke?: boolean;
-}) => Clipart | ImagePlaceholder | CurvedText | TextInput | undefined;
+}) => Clipart | ImagePlaceholder | CurvedText | Calendar | TextInput | undefined;
 export declare const asyncGetObject: (object: any, options?: {
     isOriginal?: boolean;
-}) => Promise<Clipart | ImagePlaceholder | CurvedText | TextInput | undefined>;
+}) => Promise<Clipart | ImagePlaceholder | CurvedText | Calendar | TextInput | undefined>;
 export default fabric;

package/lib/utils/index.js

@@ -31,6 +31,7 @@ const ImagePlaceholderObject_1 = __importStar(require("../ImagePlaceholderObject
 const TextInputObject_1 = __importStar(require("../TextInputObject"));
 const CurvedTextObject_1 = __importStar(require("../CurvedTextObject"));
 require("./control.util");
+const CalendarObject_1 = __importStar(require("../CalendarObject"));
 const loadFontFromUrl = async (url, name) => {
     if (!name || !url)
         return;
@@ -157,6 +158,13 @@ const getObject = (object, options) => {
             });
             return curvedTextObject;
         }
+        case constants_1.OBJECT_TYPES.calendar: {
+            const calendarObject = new CalendarObject_1.default({
+                ...object,
+                ...options,
+            });
+            return calendarObject;
+        }
         default:
             return;
     }
@@ -201,6 +209,16 @@ const asyncGetObject = async (object, options) => {
             });
             return curvedTextObject;
         }
+        case constants_1.OBJECT_TYPES.calendar: {
+            const calendarObject = new CalendarObject_1.default({
+                ...object,
+                isOriginal: options?.isOriginal,
+            });
+            if (object?.calendarUrl) {
+                await calendarObject?.loadImage?.(object?.calendarUrl);
+            }
+            return calendarObject;
+        }
         default:
             return;
     }
@@ -221,6 +239,9 @@ fabric_1.fabric.Object.prototype.toObject = (function (toObject) {
             case constants_1.OBJECT_TYPES.curvedText: {
                 return fabric_1.fabric.util.object.extend(toObject.call(this), (0, CurvedTextObject_1.toCurvedTextObject)(this));
             }
+            case constants_1.OBJECT_TYPES.calendar: {
+                return fabric_1.fabric.util.object.extend(toObject.call(this), (0, CalendarObject_1.toCalendarObject)(this));
+            }
             default: {
                 return {};
             }

package/package.json

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