customized-fabric 1.8.3 → 1.8.5
Sign up to get free protection for your applications and to get access to all the features.
@@ -1,5 +1,5 @@
|
|
1
1
|
import { fabric } from "fabric";
|
2
|
-
import { ICalendarOptions } from "./interfaces";
|
2
|
+
import { CalendarSettings, ICalendarOptions } from "./interfaces";
|
3
3
|
import { ObjectId } from "../utils/objectId";
|
4
4
|
export declare const toCalendarObject: (object: Calendar) => {
|
5
5
|
_id: ObjectId | undefined;
|
@@ -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;
|
@@ -50,5 +52,6 @@ export default class Calendar extends fabric.Group {
|
|
50
52
|
}) => void;
|
51
53
|
loadImage?: (imageInput: File | string) => Promise<void>;
|
52
54
|
fitImage?: (image: fabric.Image, cover?: boolean) => void;
|
55
|
+
getCalendarAttributes?: () => CalendarSettings;
|
53
56
|
constructor(options?: ICalendarOptions);
|
54
57
|
}
|
@@ -24,24 +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
|
-
calendarBackgroundColor: backgroundColor,
|
38
|
-
calendarTitleColor: titleColor,
|
39
|
-
calendarDayColor: dayColor,
|
40
|
-
calendarDateColor: dateColor,
|
41
|
-
calendarMarkedDateColor: markedDateColor,
|
42
|
-
calendarMarkerUrl: markerUrl,
|
43
|
-
calendarFontUrl: fontUrl,
|
44
|
-
objectFit: objectFit ?? "contain",
|
39
|
+
...calendarSettings,
|
45
40
|
});
|
46
41
|
if (options?.isOriginal) {
|
47
42
|
this.rectObject?.set({ strokeWidth: 0 });
|
@@ -54,6 +49,7 @@ const CalendarClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
|
|
54
49
|
this.loadImage(options?.imageFile);
|
55
50
|
}
|
56
51
|
}
|
52
|
+
this.fire("scaling");
|
57
53
|
},
|
58
54
|
loadImage: async function (image) {
|
59
55
|
const loadedImage = await (0, utils_1.loadImage)(image);
|
@@ -65,7 +61,7 @@ const CalendarClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
|
|
65
61
|
this.remove(this.imageObject);
|
66
62
|
this.imageObject = loadedImage;
|
67
63
|
this.add(this.imageObject);
|
68
|
-
this.fitImage(this.imageObject
|
64
|
+
this.fitImage(this.imageObject);
|
69
65
|
this.canvas?.renderAll();
|
70
66
|
}
|
71
67
|
},
|
@@ -77,13 +73,15 @@ const CalendarClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
|
|
77
73
|
};
|
78
74
|
if (width) {
|
79
75
|
attributes.width = width;
|
76
|
+
attributes.calendarWidth = width;
|
80
77
|
}
|
81
78
|
if (height) {
|
82
79
|
attributes.height = height;
|
80
|
+
attributes.calendarHeight = height;
|
83
81
|
}
|
84
82
|
this.set(attributes);
|
85
83
|
this.rectObject?.set(attributes);
|
86
|
-
this.fitImage(this.imageObject
|
84
|
+
this.fitImage(this.imageObject);
|
87
85
|
this.canvas?.renderAll?.();
|
88
86
|
},
|
89
87
|
fitImage: function (image, cover = false) {
|
@@ -105,6 +103,21 @@ const CalendarClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
|
|
105
103
|
getSettings: function (attribute) {
|
106
104
|
return this.get(attribute);
|
107
105
|
},
|
106
|
+
getCalendarAttributes: function () {
|
107
|
+
return {
|
108
|
+
width: this?.calendarWidth,
|
109
|
+
height: this?.calendarHeight,
|
110
|
+
backgroundColor: this?.calendarBackgroundColor,
|
111
|
+
titleAlignment: this?.calendarTitleAlignment,
|
112
|
+
titleColor: this?.calendarTitleColor,
|
113
|
+
titleFontUrl: this?.calendarTitleFontUrl,
|
114
|
+
dayColor: this?.calendarDayColor,
|
115
|
+
dayFontUrl: this?.calendarDayFontUrl,
|
116
|
+
markerColor: this?.calendarMarkerColor,
|
117
|
+
markerUrl: this?.calendarMarkerUrl,
|
118
|
+
date: this?.calendarDate,
|
119
|
+
};
|
120
|
+
},
|
108
121
|
});
|
109
122
|
const toCalendarObject = (object) => {
|
110
123
|
return {
|
@@ -121,13 +134,14 @@ const toCalendarObject = (object) => {
|
|
121
134
|
width: object?.calendarWidth,
|
122
135
|
height: object?.calendarHeight,
|
123
136
|
backgroundColor: object?.calendarBackgroundColor,
|
137
|
+
titleAlignment: object?.calendarTitleAlignment,
|
124
138
|
titleColor: object?.calendarTitleColor,
|
139
|
+
titleFontUrl: object?.calendarTitleFontUrl,
|
125
140
|
dayColor: object?.calendarDayColor,
|
126
|
-
|
127
|
-
|
141
|
+
dayFontUrl: object?.calendarDayFontUrl,
|
142
|
+
markerColor: object?.calendarMarkerColor,
|
128
143
|
markerUrl: object?.calendarMarkerUrl,
|
129
|
-
|
130
|
-
objectFit: object?.objectFit,
|
144
|
+
date: object?.calendarDate,
|
131
145
|
},
|
132
146
|
};
|
133
147
|
};
|
@@ -1,4 +1,17 @@
|
|
1
1
|
import { ObjectId } from "../utils/objectId";
|
2
|
+
export interface CalendarSettings {
|
3
|
+
width?: number;
|
4
|
+
height?: number;
|
5
|
+
backgroundColor?: string;
|
6
|
+
titleAlignment?: string;
|
7
|
+
titleColor?: string;
|
8
|
+
titleFontUrl?: string;
|
9
|
+
dayColor?: string;
|
10
|
+
dayFontUrl?: string;
|
11
|
+
markerColor?: string;
|
12
|
+
markerUrl?: string;
|
13
|
+
date?: string;
|
14
|
+
}
|
2
15
|
export interface ICalendarOptions extends fabric.IGroupOptions {
|
3
16
|
_id?: ObjectId;
|
4
17
|
personalizeId?: number;
|
@@ -7,16 +20,5 @@ export interface ICalendarOptions extends fabric.IGroupOptions {
|
|
7
20
|
isOriginal?: boolean;
|
8
21
|
isAdditional?: boolean;
|
9
22
|
hideStroke?: boolean;
|
10
|
-
calendarSettings?:
|
11
|
-
width?: number;
|
12
|
-
height?: number;
|
13
|
-
backgroundColor: string;
|
14
|
-
titleColor: string;
|
15
|
-
dayColor: string;
|
16
|
-
dateColor: string;
|
17
|
-
markedDateColor: string;
|
18
|
-
markerUrl: string;
|
19
|
-
fontUrl: string;
|
20
|
-
objectFit?: string;
|
21
|
-
};
|
23
|
+
calendarSettings?: CalendarSettings;
|
22
24
|
}
|