customized-fabric 1.7.7 → 1.7.9
Sign up to get free protection for your applications and to get access to all the features.
- package/lib/CalendarObject/constants.d.ts +9 -0
- package/lib/CalendarObject/constants.js +12 -0
- package/lib/CalendarObject/index.d.ts +40 -0
- package/lib/CalendarObject/index.js +127 -0
- package/lib/CalendarObject/interfaces.d.ts +15 -0
- package/lib/CalendarObject/interfaces.js +2 -0
- package/lib/constants.d.ts +1 -0
- package/lib/constants.js +12 -10
- package/lib/index.d.ts +3 -2
- package/lib/index.js +5 -3
- package/lib/utils/index.d.ts +3 -2
- package/lib/utils/index.js +21 -0
- package/package.json +1 -1
@@ -0,0 +1,12 @@
|
|
1
|
+
"use strict";
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
+
exports.CALENDAR_OBJECT_ATTRIBUTES = void 0;
|
4
|
+
exports.CALENDAR_OBJECT_ATTRIBUTES = {
|
5
|
+
name: "Calendar",
|
6
|
+
type: "CALENDAR",
|
7
|
+
stroke: {
|
8
|
+
stroke: "#333",
|
9
|
+
strokeDashArray: [5, 5],
|
10
|
+
strokeWidth: 1,
|
11
|
+
},
|
12
|
+
};
|
@@ -0,0 +1,40 @@
|
|
1
|
+
import { fabric } from "fabric";
|
2
|
+
import { ICalendarOptions } from "./interfaces";
|
3
|
+
import { ObjectId } from "../utils/objectId";
|
4
|
+
export declare const toCalendarObject: (object: Calendar) => {
|
5
|
+
_id: ObjectId | undefined;
|
6
|
+
id: ObjectId | undefined;
|
7
|
+
personalizeId: number | undefined;
|
8
|
+
layerId: number | undefined;
|
9
|
+
name: string | undefined;
|
10
|
+
locked: boolean | undefined;
|
11
|
+
isAdditional: boolean | undefined;
|
12
|
+
layoutGroupId: string | undefined;
|
13
|
+
layoutGroupName: string | undefined;
|
14
|
+
calendartSettings: {
|
15
|
+
width: number | undefined;
|
16
|
+
height: number | undefined;
|
17
|
+
objectFit: string | undefined;
|
18
|
+
};
|
19
|
+
};
|
20
|
+
export default class Calendar extends fabric.Group {
|
21
|
+
_id?: ObjectId;
|
22
|
+
layerId?: number;
|
23
|
+
locked?: boolean;
|
24
|
+
imageFile?: File;
|
25
|
+
isAdditional?: boolean;
|
26
|
+
imageObject?: fabric.Image;
|
27
|
+
layoutGroupId?: string;
|
28
|
+
layoutGroupName?: string;
|
29
|
+
objectFit?: string;
|
30
|
+
calendarWidth?: number;
|
31
|
+
calendarHeight?: number;
|
32
|
+
getSettings?: (attribute: string) => any;
|
33
|
+
setSizes?: (options: {
|
34
|
+
width?: number;
|
35
|
+
height?: number;
|
36
|
+
}) => void;
|
37
|
+
loadImage?: (imageInput: File | string) => Promise<void>;
|
38
|
+
fitImage?: (image: fabric.Image, cover?: boolean) => void;
|
39
|
+
constructor(options?: ICalendarOptions);
|
40
|
+
}
|
@@ -0,0 +1,127 @@
|
|
1
|
+
"use strict";
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
+
exports.toCalendarObject = void 0;
|
4
|
+
const fabric_1 = require("fabric");
|
5
|
+
const constants_1 = require("./constants");
|
6
|
+
const utils_1 = require("../utils");
|
7
|
+
const objectId_1 = require("../utils/objectId");
|
8
|
+
const CalendarClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
|
9
|
+
initialize: async function (options) {
|
10
|
+
this.rectObject = new fabric_1.fabric.Rect({
|
11
|
+
width: options?.width,
|
12
|
+
height: options?.height,
|
13
|
+
fill: undefined,
|
14
|
+
originX: "center",
|
15
|
+
originY: "center",
|
16
|
+
objectCaching: false,
|
17
|
+
...constants_1.CALENDAR_OBJECT_ATTRIBUTES.stroke,
|
18
|
+
});
|
19
|
+
const group = new fabric_1.fabric.Group([this.rectObject]);
|
20
|
+
this.set(group);
|
21
|
+
this.on("scaling", () => {
|
22
|
+
let width = this.width * this.scaleX;
|
23
|
+
let height = this.height * this.scaleY;
|
24
|
+
this.setSizes({ width, height });
|
25
|
+
this.canvas?.renderAll();
|
26
|
+
});
|
27
|
+
const { width, height, objectFit } = options?.calendarSettings ?? {};
|
28
|
+
this.set({
|
29
|
+
_id: new objectId_1.ObjectId().toString(),
|
30
|
+
name: constants_1.CALENDAR_OBJECT_ATTRIBUTES.name,
|
31
|
+
type: constants_1.CALENDAR_OBJECT_ATTRIBUTES.type,
|
32
|
+
...options,
|
33
|
+
layerId: options?.personalizeId ?? options?.layerId,
|
34
|
+
objectCaching: false,
|
35
|
+
calendarWidth: width ?? 400,
|
36
|
+
calendarHeight: height ?? 400,
|
37
|
+
objectFit: objectFit ?? "contain",
|
38
|
+
});
|
39
|
+
if (options?.isOriginal) {
|
40
|
+
this.rectObject?.set({ strokeWidth: 0 });
|
41
|
+
}
|
42
|
+
else {
|
43
|
+
if (options?.hideStroke) {
|
44
|
+
this.rectObject?.set({ strokeWidth: 0 });
|
45
|
+
}
|
46
|
+
if (options?.imageFile) {
|
47
|
+
this.loadImage(options?.imageFile);
|
48
|
+
}
|
49
|
+
}
|
50
|
+
},
|
51
|
+
loadImage: async function (image) {
|
52
|
+
const loadedImage = await (0, utils_1.loadImage)(image);
|
53
|
+
if (loadedImage?.width && loadedImage?.height) {
|
54
|
+
loadedImage.set({
|
55
|
+
originX: "center",
|
56
|
+
originY: "center",
|
57
|
+
});
|
58
|
+
this.remove(this.imageObject);
|
59
|
+
this.imageObject = loadedImage;
|
60
|
+
this.add(this.imageObject);
|
61
|
+
this.fitImage(this.imageObject, this.objectFit == "cover");
|
62
|
+
this.canvas?.renderAll();
|
63
|
+
}
|
64
|
+
},
|
65
|
+
setSizes: function (options) {
|
66
|
+
const { width, height } = options;
|
67
|
+
const attributes = {
|
68
|
+
scaleX: 1,
|
69
|
+
scaleY: 1,
|
70
|
+
};
|
71
|
+
if (width) {
|
72
|
+
attributes.width = width;
|
73
|
+
}
|
74
|
+
if (height) {
|
75
|
+
attributes.height = height;
|
76
|
+
}
|
77
|
+
this.set(attributes);
|
78
|
+
this.rectObject?.set(attributes);
|
79
|
+
this.fitImage(this.imageObject, this.objectFit == "cover");
|
80
|
+
this.canvas?.renderAll?.();
|
81
|
+
},
|
82
|
+
fitImage: function (image, cover = false) {
|
83
|
+
if (image) {
|
84
|
+
const imageScaleX = this.width / (image?.width ?? 1);
|
85
|
+
const imageScaleY = this.height / (image?.height ?? 1);
|
86
|
+
if (cover) {
|
87
|
+
imageScaleX < imageScaleY
|
88
|
+
? image.set({ scaleX: imageScaleY, scaleY: imageScaleY })
|
89
|
+
: image.set({ scaleX: imageScaleX, scaleY: imageScaleX });
|
90
|
+
}
|
91
|
+
else {
|
92
|
+
imageScaleX > imageScaleY
|
93
|
+
? image.set({ scaleX: imageScaleY, scaleY: imageScaleY })
|
94
|
+
: image.set({ scaleX: imageScaleX, scaleY: imageScaleX });
|
95
|
+
}
|
96
|
+
}
|
97
|
+
},
|
98
|
+
getSettings: function (attribute) {
|
99
|
+
return this.get(attribute);
|
100
|
+
},
|
101
|
+
});
|
102
|
+
const toCalendarObject = (object) => {
|
103
|
+
return {
|
104
|
+
_id: object?._id,
|
105
|
+
id: object?._id,
|
106
|
+
personalizeId: object?.layerId,
|
107
|
+
layerId: object?.layerId,
|
108
|
+
name: object?.name,
|
109
|
+
locked: object?.locked,
|
110
|
+
isAdditional: object?.isAdditional,
|
111
|
+
layoutGroupId: object?.layoutGroupId,
|
112
|
+
layoutGroupName: object?.layoutGroupName,
|
113
|
+
calendartSettings: {
|
114
|
+
width: object?.calendarWidth,
|
115
|
+
height: object?.calendarHeight,
|
116
|
+
objectFit: object?.objectFit,
|
117
|
+
},
|
118
|
+
};
|
119
|
+
};
|
120
|
+
exports.toCalendarObject = toCalendarObject;
|
121
|
+
class Calendar extends fabric_1.fabric.Group {
|
122
|
+
constructor(options) {
|
123
|
+
super();
|
124
|
+
return new CalendarClass(options);
|
125
|
+
}
|
126
|
+
}
|
127
|
+
exports.default = Calendar;
|
@@ -0,0 +1,15 @@
|
|
1
|
+
import { ObjectId } from "../utils/objectId";
|
2
|
+
export interface ICalendarOptions extends fabric.IGroupOptions {
|
3
|
+
_id?: ObjectId;
|
4
|
+
personalizeId?: number;
|
5
|
+
layerId: number;
|
6
|
+
imageFile?: File;
|
7
|
+
isOriginal?: boolean;
|
8
|
+
isAdditional?: boolean;
|
9
|
+
hideStroke?: boolean;
|
10
|
+
calendarSettings?: {
|
11
|
+
width?: number;
|
12
|
+
height?: number;
|
13
|
+
objectFit?: string;
|
14
|
+
};
|
15
|
+
}
|
package/lib/constants.d.ts
CHANGED
package/lib/constants.js
CHANGED
@@ -1,17 +1,19 @@
|
|
1
1
|
"use strict";
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
3
3
|
exports.MAX_TEXTURE_SIZE = exports.OBJECT_TYPES = void 0;
|
4
|
-
const constants_1 = require("./
|
5
|
-
const constants_2 = require("./
|
6
|
-
const constants_3 = require("./
|
7
|
-
const constants_4 = require("./
|
8
|
-
const constants_5 = require("./
|
4
|
+
const constants_1 = require("./CalendarObject/constants");
|
5
|
+
const constants_2 = require("./ClipartObject/constants");
|
6
|
+
const constants_3 = require("./CurvedTextObject/constants");
|
7
|
+
const constants_4 = require("./ImagePlaceholderObject/constants");
|
8
|
+
const constants_5 = require("./LayoutGroupObject/constants");
|
9
|
+
const constants_6 = require("./TextInputObject/constants");
|
9
10
|
exports.OBJECT_TYPES = {
|
10
|
-
textInput:
|
11
|
-
curvedText:
|
12
|
-
clipart:
|
13
|
-
imagePlaceHolder:
|
11
|
+
textInput: constants_6.TEXT_INPUT_OBJECT_ATTRIBUTES.type,
|
12
|
+
curvedText: constants_3.CURVED_TEXT_OBJECT_ATTRIBUTES.type,
|
13
|
+
clipart: constants_2.CLIPART_OBJECT_ATTRIBUTES.type,
|
14
|
+
imagePlaceHolder: constants_4.IMAGE_PLACEHOLDER_OBJECT_ATTRIBUTES.type,
|
14
15
|
activeSelection: "activeSelection",
|
15
|
-
layoutGroup:
|
16
|
+
layoutGroup: constants_5.LAYOUT_GROUP_OBJECT_ATTRIBUTES.type,
|
17
|
+
calendar: constants_1.CALENDAR_OBJECT_ATTRIBUTES.type,
|
16
18
|
};
|
17
19
|
exports.MAX_TEXTURE_SIZE = 20000;
|
package/lib/index.d.ts
CHANGED
@@ -2,8 +2,9 @@ import TextInput from "./TextInputObject";
|
|
2
2
|
import CurvedText from "./CurvedTextObject";
|
3
3
|
import Clipart from "./ClipartObject";
|
4
4
|
import ImagePlaceholder from "./ImagePlaceholderObject";
|
5
|
+
import LayoutGroup from "./LayoutGroupObject";
|
6
|
+
import Calendar from "./CalendarObject";
|
5
7
|
import fabric, { lockObject, lockAllObjects, loadImageFromFile, loadImageFromUrl, getObject, asyncGetObject } from "./utils";
|
6
8
|
import { OBJECT_TYPES } from "./constants";
|
7
9
|
import { IMAGE_FILTER_TYPES } from "./ImagePlaceholderObject/constants";
|
8
|
-
|
9
|
-
export { fabric, TextInput, Clipart, ImagePlaceholder, LayoutGroup, CurvedText, lockObject, lockAllObjects, loadImageFromFile, loadImageFromUrl, getObject, asyncGetObject, OBJECT_TYPES, IMAGE_FILTER_TYPES, };
|
10
|
+
export { fabric, TextInput, Clipart, ImagePlaceholder, LayoutGroup, CurvedText, Calendar, lockObject, lockAllObjects, loadImageFromFile, loadImageFromUrl, getObject, asyncGetObject, OBJECT_TYPES, IMAGE_FILTER_TYPES, };
|
package/lib/index.js
CHANGED
@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
26
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
27
27
|
};
|
28
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
29
|
-
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;
|
29
|
+
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;
|
30
30
|
const TextInputObject_1 = __importDefault(require("./TextInputObject"));
|
31
31
|
exports.TextInput = TextInputObject_1.default;
|
32
32
|
const CurvedTextObject_1 = __importDefault(require("./CurvedTextObject"));
|
@@ -35,6 +35,10 @@ const ClipartObject_1 = __importDefault(require("./ClipartObject"));
|
|
35
35
|
exports.Clipart = ClipartObject_1.default;
|
36
36
|
const ImagePlaceholderObject_1 = __importDefault(require("./ImagePlaceholderObject"));
|
37
37
|
exports.ImagePlaceholder = ImagePlaceholderObject_1.default;
|
38
|
+
const LayoutGroupObject_1 = __importDefault(require("./LayoutGroupObject"));
|
39
|
+
exports.LayoutGroup = LayoutGroupObject_1.default;
|
40
|
+
const CalendarObject_1 = __importDefault(require("./CalendarObject"));
|
41
|
+
exports.Calendar = CalendarObject_1.default;
|
38
42
|
const utils_1 = __importStar(require("./utils"));
|
39
43
|
exports.fabric = utils_1.default;
|
40
44
|
Object.defineProperty(exports, "lockObject", { enumerable: true, get: function () { return utils_1.lockObject; } });
|
@@ -47,5 +51,3 @@ const constants_1 = require("./constants");
|
|
47
51
|
Object.defineProperty(exports, "OBJECT_TYPES", { enumerable: true, get: function () { return constants_1.OBJECT_TYPES; } });
|
48
52
|
const constants_2 = require("./ImagePlaceholderObject/constants");
|
49
53
|
Object.defineProperty(exports, "IMAGE_FILTER_TYPES", { enumerable: true, get: function () { return constants_2.IMAGE_FILTER_TYPES; } });
|
50
|
-
const LayoutGroupObject_1 = __importDefault(require("./LayoutGroupObject"));
|
51
|
-
exports.LayoutGroup = LayoutGroupObject_1.default;
|
package/lib/utils/index.d.ts
CHANGED
@@ -5,6 +5,7 @@ import TextInput from "../TextInputObject";
|
|
5
5
|
import { ImageFilterType } from "../ImagePlaceholderObject/interfaces";
|
6
6
|
import CurvedText from "../CurvedTextObject";
|
7
7
|
import "./control.util";
|
8
|
+
import Calendar from "../CalendarObject";
|
8
9
|
export declare const loadFontFromUrl: (url: string, name: string) => Promise<void>;
|
9
10
|
export declare const isFontLoaded: (name: string) => boolean;
|
10
11
|
export declare const loadImageFromFile: (image: File) => Promise<fabric.Image>;
|
@@ -18,8 +19,8 @@ export declare const lockAllObjects: (canvas: fabric.Canvas, locked: boolean, se
|
|
18
19
|
export declare const getObject: (object: any, options?: {
|
19
20
|
isOriginal?: boolean;
|
20
21
|
hideStroke?: boolean;
|
21
|
-
}) => Clipart | ImagePlaceholder | CurvedText | TextInput | undefined;
|
22
|
+
}) => Clipart | ImagePlaceholder | CurvedText | Calendar | TextInput | undefined;
|
22
23
|
export declare const asyncGetObject: (object: any, options?: {
|
23
24
|
isOriginal?: boolean;
|
24
|
-
}) => Promise<Clipart | ImagePlaceholder | CurvedText | TextInput | undefined>;
|
25
|
+
}) => Promise<Clipart | ImagePlaceholder | CurvedText | Calendar | TextInput | undefined>;
|
25
26
|
export default fabric;
|
package/lib/utils/index.js
CHANGED
@@ -31,6 +31,7 @@ const ImagePlaceholderObject_1 = __importStar(require("../ImagePlaceholderObject
|
|
31
31
|
const TextInputObject_1 = __importStar(require("../TextInputObject"));
|
32
32
|
const CurvedTextObject_1 = __importStar(require("../CurvedTextObject"));
|
33
33
|
require("./control.util");
|
34
|
+
const CalendarObject_1 = __importStar(require("../CalendarObject"));
|
34
35
|
const loadFontFromUrl = async (url, name) => {
|
35
36
|
if (!name || !url)
|
36
37
|
return;
|
@@ -157,6 +158,13 @@ const getObject = (object, options) => {
|
|
157
158
|
});
|
158
159
|
return curvedTextObject;
|
159
160
|
}
|
161
|
+
case constants_1.OBJECT_TYPES.calendar: {
|
162
|
+
const calendarObject = new CalendarObject_1.default({
|
163
|
+
...object,
|
164
|
+
...options,
|
165
|
+
});
|
166
|
+
return calendarObject;
|
167
|
+
}
|
160
168
|
default:
|
161
169
|
return;
|
162
170
|
}
|
@@ -201,6 +209,16 @@ const asyncGetObject = async (object, options) => {
|
|
201
209
|
});
|
202
210
|
return curvedTextObject;
|
203
211
|
}
|
212
|
+
case constants_1.OBJECT_TYPES.calendar: {
|
213
|
+
const calendarObject = new CalendarObject_1.default({
|
214
|
+
...object,
|
215
|
+
isOriginal: options?.isOriginal,
|
216
|
+
});
|
217
|
+
if (object?.calendarUrl) {
|
218
|
+
await calendarObject?.loadImage?.(object?.calendarUrl);
|
219
|
+
}
|
220
|
+
return calendarObject;
|
221
|
+
}
|
204
222
|
default:
|
205
223
|
return;
|
206
224
|
}
|
@@ -221,6 +239,9 @@ fabric_1.fabric.Object.prototype.toObject = (function (toObject) {
|
|
221
239
|
case constants_1.OBJECT_TYPES.curvedText: {
|
222
240
|
return fabric_1.fabric.util.object.extend(toObject.call(this), (0, CurvedTextObject_1.toCurvedTextObject)(this));
|
223
241
|
}
|
242
|
+
case constants_1.OBJECT_TYPES.calendar: {
|
243
|
+
return fabric_1.fabric.util.object.extend(toObject.call(this), (0, CalendarObject_1.toCalendarObject)(this));
|
244
|
+
}
|
224
245
|
default: {
|
225
246
|
return {};
|
226
247
|
}
|