customized-fabric 1.8.2 → 1.8.4
Sign up to get free protection for your applications and to get access to all the features.
@@ -15,13 +15,14 @@ export declare const toCalendarObject: (object: Calendar) => {
|
|
15
15
|
width: number | undefined;
|
16
16
|
height: number | undefined;
|
17
17
|
backgroundColor: string | undefined;
|
18
|
+
titleAlignment: string | undefined;
|
18
19
|
titleColor: string | undefined;
|
20
|
+
titleFontUrl: string | undefined;
|
19
21
|
dayColor: string | undefined;
|
20
|
-
|
21
|
-
|
22
|
+
dayFontUrl: string | undefined;
|
23
|
+
markerColor: string | undefined;
|
22
24
|
markerUrl: string | undefined;
|
23
|
-
|
24
|
-
objectFit: string | undefined;
|
25
|
+
date: string | undefined;
|
25
26
|
};
|
26
27
|
};
|
27
28
|
export default class Calendar extends fabric.Group {
|
@@ -33,16 +34,17 @@ export default class Calendar extends fabric.Group {
|
|
33
34
|
imageObject?: fabric.Image;
|
34
35
|
layoutGroupId?: string;
|
35
36
|
layoutGroupName?: string;
|
36
|
-
objectFit?: string;
|
37
37
|
calendarWidth?: number;
|
38
38
|
calendarHeight?: number;
|
39
|
-
calendarFontUrl?: string;
|
40
39
|
calendarBackgroundColor?: string;
|
40
|
+
calendarTitleAlignment?: string;
|
41
41
|
calendarTitleColor?: string;
|
42
|
+
calendarTitleFontUrl?: string;
|
42
43
|
calendarDayColor?: string;
|
43
|
-
|
44
|
-
|
44
|
+
calendarDayFontUrl?: string;
|
45
|
+
calendarMarkerColor?: string;
|
45
46
|
calendarMarkerUrl?: string;
|
47
|
+
calendarDate?: string;
|
46
48
|
getSettings?: (attribute: string) => any;
|
47
49
|
setSizes?: (options: {
|
48
50
|
width?: number;
|
@@ -24,17 +24,19 @@ const CalendarClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
|
|
24
24
|
this.setSizes({ width, height });
|
25
25
|
this.canvas?.renderAll();
|
26
26
|
});
|
27
|
-
const
|
27
|
+
const calendarSettings = { ...(options?.calendarSettings ?? {}) };
|
28
|
+
Object.keys(calendarSettings).map((key) => {
|
29
|
+
const newKey = `calendar${key.charAt(0).toUpperCase() + key.slice(1)}`;
|
30
|
+
calendarSettings[newKey] = calendarSettings[key];
|
31
|
+
delete calendarSettings[key];
|
32
|
+
});
|
28
33
|
this.set({
|
29
34
|
_id: new objectId_1.ObjectId().toString(),
|
30
35
|
name: constants_1.CALENDAR_OBJECT_ATTRIBUTES.name,
|
31
36
|
type: constants_1.CALENDAR_OBJECT_ATTRIBUTES.type,
|
32
37
|
...options,
|
33
38
|
layerId: options?.personalizeId ?? options?.layerId,
|
34
|
-
|
35
|
-
calendarWidth: width ?? 400,
|
36
|
-
calendarHeight: height ?? 400,
|
37
|
-
objectFit: objectFit ?? "contain",
|
39
|
+
...calendarSettings,
|
38
40
|
});
|
39
41
|
if (options?.isOriginal) {
|
40
42
|
this.rectObject?.set({ strokeWidth: 0 });
|
@@ -47,6 +49,7 @@ const CalendarClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
|
|
47
49
|
this.loadImage(options?.imageFile);
|
48
50
|
}
|
49
51
|
}
|
52
|
+
this.fire("scaling");
|
50
53
|
},
|
51
54
|
loadImage: async function (image) {
|
52
55
|
const loadedImage = await (0, utils_1.loadImage)(image);
|
@@ -58,7 +61,7 @@ const CalendarClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
|
|
58
61
|
this.remove(this.imageObject);
|
59
62
|
this.imageObject = loadedImage;
|
60
63
|
this.add(this.imageObject);
|
61
|
-
this.fitImage(this.imageObject
|
64
|
+
this.fitImage(this.imageObject);
|
62
65
|
this.canvas?.renderAll();
|
63
66
|
}
|
64
67
|
},
|
@@ -70,13 +73,15 @@ const CalendarClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
|
|
70
73
|
};
|
71
74
|
if (width) {
|
72
75
|
attributes.width = width;
|
76
|
+
attributes.calendarWidth = width;
|
73
77
|
}
|
74
78
|
if (height) {
|
75
79
|
attributes.height = height;
|
80
|
+
attributes.calendarHeight = height;
|
76
81
|
}
|
77
82
|
this.set(attributes);
|
78
83
|
this.rectObject?.set(attributes);
|
79
|
-
this.fitImage(this.imageObject
|
84
|
+
this.fitImage(this.imageObject);
|
80
85
|
this.canvas?.renderAll?.();
|
81
86
|
},
|
82
87
|
fitImage: function (image, cover = false) {
|
@@ -114,13 +119,14 @@ const toCalendarObject = (object) => {
|
|
114
119
|
width: object?.calendarWidth,
|
115
120
|
height: object?.calendarHeight,
|
116
121
|
backgroundColor: object?.calendarBackgroundColor,
|
122
|
+
titleAlignment: object?.calendarTitleAlignment,
|
117
123
|
titleColor: object?.calendarTitleColor,
|
124
|
+
titleFontUrl: object?.calendarTitleFontUrl,
|
118
125
|
dayColor: object?.calendarDayColor,
|
119
|
-
|
120
|
-
|
126
|
+
dayFontUrl: object?.calendarDayFontUrl,
|
127
|
+
markerColor: object?.calendarMarkerColor,
|
121
128
|
markerUrl: object?.calendarMarkerUrl,
|
122
|
-
|
123
|
-
objectFit: object?.objectFit,
|
129
|
+
date: object?.calendarDate,
|
124
130
|
},
|
125
131
|
};
|
126
132
|
};
|
@@ -10,6 +10,14 @@ export interface ICalendarOptions extends fabric.IGroupOptions {
|
|
10
10
|
calendarSettings?: {
|
11
11
|
width?: number;
|
12
12
|
height?: number;
|
13
|
-
|
13
|
+
backgroundColor?: string;
|
14
|
+
titleAlignment?: string;
|
15
|
+
titleColor?: string;
|
16
|
+
titleFontUrl?: string;
|
17
|
+
dayColor?: string;
|
18
|
+
dayFontUrl?: string;
|
19
|
+
markerColor?: string;
|
20
|
+
markerUrl?: string;
|
21
|
+
date?: string;
|
14
22
|
};
|
15
23
|
}
|