customized-fabric 1.8.3 → 1.8.5

package/lib/CalendarObject/index.d.ts

@@ -1,5 +1,5 @@
 import { fabric } from "fabric";
-import { ICalendarOptions } from "./interfaces";
+import { CalendarSettings, ICalendarOptions } from "./interfaces";
 import { ObjectId } from "../utils/objectId";
 export declare const toCalendarObject: (object: Calendar) => {
     _id: ObjectId | undefined;
@@ -15,13 +15,14 @@ export declare const toCalendarObject: (object: Calendar) => {
         width: number | undefined;
         height: number | undefined;
         backgroundColor: string | undefined;
+        titleAlignment: string | undefined;
         titleColor: string | undefined;
+        titleFontUrl: string | undefined;
         dayColor: string | undefined;
-        dateColor: string | undefined;
-        markedDateColor: string | undefined;
+        dayFontUrl: string | undefined;
+        markerColor: string | undefined;
         markerUrl: string | undefined;
-        fontUrl: string | undefined;
-        objectFit: string | undefined;
+        date: string | undefined;
     };
 };
 export default class Calendar extends fabric.Group {
@@ -33,16 +34,17 @@ export default class Calendar extends fabric.Group {
     imageObject?: fabric.Image;
     layoutGroupId?: string;
     layoutGroupName?: string;
-    objectFit?: string;
     calendarWidth?: number;
     calendarHeight?: number;
-    calendarFontUrl?: string;
     calendarBackgroundColor?: string;
+    calendarTitleAlignment?: string;
     calendarTitleColor?: string;
+    calendarTitleFontUrl?: string;
     calendarDayColor?: string;
-    calendarDateColor?: string;
-    calendarMarkedDateColor?: string;
+    calendarDayFontUrl?: string;
+    calendarMarkerColor?: string;
     calendarMarkerUrl?: string;
+    calendarDate?: string;
     getSettings?: (attribute: string) => any;
     setSizes?: (options: {
         width?: number;
@@ -50,5 +52,6 @@ export default class Calendar extends fabric.Group {
     }) => void;
     loadImage?: (imageInput: File | string) => Promise<void>;
     fitImage?: (image: fabric.Image, cover?: boolean) => void;
+    getCalendarAttributes?: () => CalendarSettings;
     constructor(options?: ICalendarOptions);
 }

package/lib/CalendarObject/index.js

@@ -24,24 +24,19 @@ const CalendarClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
             this.setSizes({ width, height });
             this.canvas?.renderAll();
         });
-        const { width, height, backgroundColor, titleColor, dayColor, dateColor, markedDateColor, markerUrl, fontUrl, objectFit, } = options?.calendarSettings ?? {};
+        const calendarSettings = { ...(options?.calendarSettings ?? {}) };
+        Object.keys(calendarSettings).map((key) => {
+            const newKey = `calendar${key.charAt(0).toUpperCase() + key.slice(1)}`;
+            calendarSettings[newKey] = calendarSettings[key];
+            delete calendarSettings[key];
+        });
         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: width ?? 400,
-            calendarHeight: height ?? 400,
-            calendarBackgroundColor: backgroundColor,
-            calendarTitleColor: titleColor,
-            calendarDayColor: dayColor,
-            calendarDateColor: dateColor,
-            calendarMarkedDateColor: markedDateColor,
-            calendarMarkerUrl: markerUrl,
-            calendarFontUrl: fontUrl,
-            objectFit: objectFit ?? "contain",
+            ...calendarSettings,
         });
         if (options?.isOriginal) {
             this.rectObject?.set({ strokeWidth: 0 });
@@ -54,6 +49,7 @@ const CalendarClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
                 this.loadImage(options?.imageFile);
             }
         }
+        this.fire("scaling");
     },
     loadImage: async function (image) {
         const loadedImage = await (0, utils_1.loadImage)(image);
@@ -65,7 +61,7 @@ const CalendarClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
             this.remove(this.imageObject);
             this.imageObject = loadedImage;
             this.add(this.imageObject);
-            this.fitImage(this.imageObject, this.objectFit == "cover");
+            this.fitImage(this.imageObject);
             this.canvas?.renderAll();
         }
     },
@@ -77,13 +73,15 @@ const CalendarClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
         };
         if (width) {
             attributes.width = width;
+            attributes.calendarWidth = width;
         }
         if (height) {
             attributes.height = height;
+            attributes.calendarHeight = height;
         }
         this.set(attributes);
         this.rectObject?.set(attributes);
-        this.fitImage(this.imageObject, this.objectFit == "cover");
+        this.fitImage(this.imageObject);
         this.canvas?.renderAll?.();
     },
     fitImage: function (image, cover = false) {
@@ -105,6 +103,21 @@ const CalendarClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
     getSettings: function (attribute) {
         return this.get(attribute);
     },
+    getCalendarAttributes: function () {
+        return {
+            width: this?.calendarWidth,
+            height: this?.calendarHeight,
+            backgroundColor: this?.calendarBackgroundColor,
+            titleAlignment: this?.calendarTitleAlignment,
+            titleColor: this?.calendarTitleColor,
+            titleFontUrl: this?.calendarTitleFontUrl,
+            dayColor: this?.calendarDayColor,
+            dayFontUrl: this?.calendarDayFontUrl,
+            markerColor: this?.calendarMarkerColor,
+            markerUrl: this?.calendarMarkerUrl,
+            date: this?.calendarDate,
+        };
+    },
 });
 const toCalendarObject = (object) => {
     return {
@@ -121,13 +134,14 @@ const toCalendarObject = (object) => {
             width: object?.calendarWidth,
             height: object?.calendarHeight,
             backgroundColor: object?.calendarBackgroundColor,
+            titleAlignment: object?.calendarTitleAlignment,
             titleColor: object?.calendarTitleColor,
+            titleFontUrl: object?.calendarTitleFontUrl,
             dayColor: object?.calendarDayColor,
-            dateColor: object?.calendarDateColor,
-            markedDateColor: object?.calendarMarkedDateColor,
+            dayFontUrl: object?.calendarDayFontUrl,
+            markerColor: object?.calendarMarkerColor,
             markerUrl: object?.calendarMarkerUrl,
-            fontUrl: object?.calendarFontUrl,
-            objectFit: object?.objectFit,
+            date: object?.calendarDate,
         },
     };
 };

package/lib/CalendarObject/interfaces.d.ts

@@ -1,4 +1,17 @@
 import { ObjectId } from "../utils/objectId";
+export interface CalendarSettings {
+    width?: number;
+    height?: number;
+    backgroundColor?: string;
+    titleAlignment?: string;
+    titleColor?: string;
+    titleFontUrl?: string;
+    dayColor?: string;
+    dayFontUrl?: string;
+    markerColor?: string;
+    markerUrl?: string;
+    date?: string;
+}
 export interface ICalendarOptions extends fabric.IGroupOptions {
     _id?: ObjectId;
     personalizeId?: number;
@@ -7,16 +20,5 @@ export interface ICalendarOptions extends fabric.IGroupOptions {
     isOriginal?: boolean;
     isAdditional?: boolean;
     hideStroke?: boolean;
-    calendarSettings?: {
-        width?: number;
-        height?: number;
-        backgroundColor: string;
-        titleColor: string;
-        dayColor: string;
-        dateColor: string;
-        markedDateColor: string;
-        markerUrl: string;
-        fontUrl: string;
-        objectFit?: string;
-    };
+    calendarSettings?: CalendarSettings;
 }

package/package.json

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