customized-fabric 1.9.3 → 1.9.4

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,9 @@
1
+ export declare const QR_CODE_OBJECT_ATTRIBUTES: {
2
+ name: string;
3
+ type: string;
4
+ stroke: {
5
+ stroke: string;
6
+ strokeDashArray: number[];
7
+ strokeWidth: number;
8
+ };
9
+ };
@@ -0,0 +1,12 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.QR_CODE_OBJECT_ATTRIBUTES = void 0;
4
+ exports.QR_CODE_OBJECT_ATTRIBUTES = {
5
+ name: "QR code",
6
+ type: "QR_CODE",
7
+ stroke: {
8
+ stroke: "#333",
9
+ strokeDashArray: [5, 5],
10
+ strokeWidth: 1,
11
+ },
12
+ };
@@ -0,0 +1,41 @@
1
+ import { fabric } from "fabric";
2
+ import { QRCodeSettings, IQRCodeOptions } from "./interfaces";
3
+ import { ObjectId } from "../utils/objectId";
4
+ export declare const toQRCodeObject: (object: QRCode) => {
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
+ qrCodeSettings: QRCodeSettings | undefined;
15
+ };
16
+ export default class QRCode extends fabric.Group {
17
+ _id?: ObjectId;
18
+ layerId?: number;
19
+ locked?: boolean;
20
+ imageFile?: File;
21
+ isAdditional?: boolean;
22
+ imageObject?: fabric.Image;
23
+ layoutGroupId?: string;
24
+ layoutGroupName?: string;
25
+ qrCodeData?: string;
26
+ qrCodeMargin?: number;
27
+ qrCodeEyeShape?: string;
28
+ qrCodeDataShape?: string;
29
+ qrCodeBackgroundColor?: string;
30
+ qrCodeDataColor?: string;
31
+ qrCodeEffectRatio?: 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
+ getQRCodeAttributes?: () => QRCodeSettings;
40
+ constructor(options?: IQRCodeOptions);
41
+ }
@@ -0,0 +1,137 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.toQRCodeObject = 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 QRCodeClass = 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.QR_CODE_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 qrCodeSettings = { ...(options?.qrCodeSettings ?? {}) };
28
+ Object.keys(qrCodeSettings).map((key) => {
29
+ const newKey = `qrCode${key.charAt(0).toUpperCase() + key.slice(1)}`;
30
+ qrCodeSettings[newKey] = qrCodeSettings[key];
31
+ delete qrCodeSettings[key];
32
+ });
33
+ this.set({
34
+ _id: new objectId_1.ObjectId().toString(),
35
+ name: constants_1.QR_CODE_OBJECT_ATTRIBUTES.name,
36
+ type: constants_1.QR_CODE_OBJECT_ATTRIBUTES.type,
37
+ ...options,
38
+ layerId: options?.personalizeId ?? options?.layerId,
39
+ ...qrCodeSettings,
40
+ });
41
+ if (options?.isOriginal) {
42
+ this.rectObject?.set({ strokeWidth: 0 });
43
+ }
44
+ else {
45
+ if (options?.hideStroke) {
46
+ this.rectObject?.set({ strokeWidth: 0 });
47
+ }
48
+ if (options?.imageFile) {
49
+ this.loadImage(options?.imageFile);
50
+ }
51
+ }
52
+ this.fire("scaling");
53
+ },
54
+ loadImage: async function (image) {
55
+ const loadedImage = await (0, utils_1.loadImage)(image);
56
+ if (loadedImage?.width && loadedImage?.height) {
57
+ loadedImage.set({
58
+ originX: "center",
59
+ originY: "center",
60
+ });
61
+ this.remove(this.imageObject);
62
+ this.imageObject = loadedImage;
63
+ this.add(this.imageObject);
64
+ this.fitImage(this.imageObject);
65
+ this.canvas?.renderAll();
66
+ }
67
+ },
68
+ setSizes: function (options) {
69
+ const { width, height } = options;
70
+ const attributes = {
71
+ scaleX: 1,
72
+ scaleY: 1,
73
+ };
74
+ if (width) {
75
+ attributes.width = width;
76
+ }
77
+ if (height) {
78
+ attributes.height = height;
79
+ }
80
+ this.set(attributes);
81
+ this.rectObject?.set(attributes);
82
+ this.fitImage(this.imageObject);
83
+ this.canvas?.renderAll?.();
84
+ },
85
+ fitImage: function (image, cover = false) {
86
+ if (image) {
87
+ const imageScaleX = this.width / (image?.width ?? 1);
88
+ const imageScaleY = this.height / (image?.height ?? 1);
89
+ if (cover) {
90
+ imageScaleX < imageScaleY
91
+ ? image.set({ scaleX: imageScaleY, scaleY: imageScaleY })
92
+ : image.set({ scaleX: imageScaleX, scaleY: imageScaleX });
93
+ }
94
+ else {
95
+ imageScaleX > imageScaleY
96
+ ? image.set({ scaleX: imageScaleY, scaleY: imageScaleY })
97
+ : image.set({ scaleX: imageScaleX, scaleY: imageScaleX });
98
+ }
99
+ }
100
+ },
101
+ getSettings: function (attribute) {
102
+ return this.get(attribute);
103
+ },
104
+ getQRCodeAttributes: function () {
105
+ return {
106
+ data: this?.qrCodeData,
107
+ margin: this?.qrCodeMargin,
108
+ eyeShape: this?.qrCodeEyeShape,
109
+ dataShape: this?.qrCodeDataShape,
110
+ backgroundColor: this?.qrCodeBackgroundColor,
111
+ dataColor: this?.qrCodeDataColor,
112
+ effectRatio: this?.qrCodeEffectRatio,
113
+ };
114
+ },
115
+ });
116
+ const toQRCodeObject = (object) => {
117
+ return {
118
+ _id: object?._id,
119
+ id: object?._id,
120
+ personalizeId: object?.layerId,
121
+ layerId: object?.layerId,
122
+ name: object?.name,
123
+ locked: object?.locked,
124
+ isAdditional: object?.isAdditional,
125
+ layoutGroupId: object?.layoutGroupId,
126
+ layoutGroupName: object?.layoutGroupName,
127
+ qrCodeSettings: object.getQRCodeAttributes?.(),
128
+ };
129
+ };
130
+ exports.toQRCodeObject = toQRCodeObject;
131
+ class QRCode extends fabric_1.fabric.Group {
132
+ constructor(options) {
133
+ super();
134
+ return new QRCodeClass(options);
135
+ }
136
+ }
137
+ exports.default = QRCode;
@@ -0,0 +1,20 @@
1
+ import { ObjectId } from "../utils/objectId";
2
+ export interface QRCodeSettings {
3
+ data?: string;
4
+ margin?: string;
5
+ eyeShape?: string;
6
+ dataShape?: string;
7
+ backgroundColor?: string;
8
+ dataColor?: string;
9
+ effectRatio?: string;
10
+ }
11
+ export interface IQRCodeOptions extends fabric.IGroupOptions {
12
+ _id?: ObjectId;
13
+ personalizeId?: number;
14
+ layerId: number;
15
+ imageFile?: File;
16
+ isOriginal?: boolean;
17
+ isAdditional?: boolean;
18
+ hideStroke?: boolean;
19
+ qrCodeSettings?: QRCodeSettings;
20
+ }
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
@@ -6,5 +6,6 @@ export declare const OBJECT_TYPES: {
6
6
  activeSelection: string;
7
7
  layoutGroup: string;
8
8
  calendar: string;
9
+ qrCode: string;
9
10
  };
10
11
  export declare const MAX_TEXTURE_SIZE = 20000;
package/lib/constants.js CHANGED
@@ -6,14 +6,16 @@ const constants_2 = require("./ClipartObject/constants");
6
6
  const constants_3 = require("./CurvedTextObject/constants");
7
7
  const constants_4 = require("./ImagePlaceholderObject/constants");
8
8
  const constants_5 = require("./LayoutGroupObject/constants");
9
- const constants_6 = require("./TextInputObject/constants");
9
+ const constants_6 = require("./QRCodeObject/constants");
10
+ const constants_7 = require("./TextInputObject/constants");
10
11
  exports.OBJECT_TYPES = {
11
- textInput: constants_6.TEXT_INPUT_OBJECT_ATTRIBUTES.type,
12
+ textInput: constants_7.TEXT_INPUT_OBJECT_ATTRIBUTES.type,
12
13
  curvedText: constants_3.CURVED_TEXT_OBJECT_ATTRIBUTES.type,
13
14
  clipart: constants_2.CLIPART_OBJECT_ATTRIBUTES.type,
14
15
  imagePlaceHolder: constants_4.IMAGE_PLACEHOLDER_OBJECT_ATTRIBUTES.type,
15
16
  activeSelection: "activeSelection",
16
17
  layoutGroup: constants_5.LAYOUT_GROUP_OBJECT_ATTRIBUTES.type,
17
18
  calendar: constants_1.CALENDAR_OBJECT_ATTRIBUTES.type,
19
+ qrCode: constants_6.QR_CODE_OBJECT_ATTRIBUTES.type,
18
20
  };
19
21
  exports.MAX_TEXTURE_SIZE = 20000;
package/lib/index.d.ts CHANGED
@@ -4,7 +4,8 @@ import Clipart from "./ClipartObject";
4
4
  import ImagePlaceholder from "./ImagePlaceholderObject";
5
5
  import LayoutGroup from "./LayoutGroupObject";
6
6
  import Calendar from "./CalendarObject";
7
+ import QRCode from "./QRCodeObject";
7
8
  import fabric, { lockObject, lockAllObjects, loadImageFromFile, loadImageFromUrl, getObject, asyncGetObject } from "./utils";
8
9
  import { OBJECT_TYPES } from "./constants";
9
10
  import { IMAGE_FILTER_TYPES } from "./ImagePlaceholderObject/constants";
10
- export { fabric, TextInput, Clipart, ImagePlaceholder, LayoutGroup, CurvedText, Calendar, lockObject, lockAllObjects, loadImageFromFile, loadImageFromUrl, getObject, asyncGetObject, OBJECT_TYPES, IMAGE_FILTER_TYPES, };
11
+ export { fabric, TextInput, Clipart, ImagePlaceholder, LayoutGroup, CurvedText, Calendar, QRCode, 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.Calendar = 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.QRCode = 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"));
@@ -39,6 +39,8 @@ const LayoutGroupObject_1 = __importDefault(require("./LayoutGroupObject"));
39
39
  exports.LayoutGroup = LayoutGroupObject_1.default;
40
40
  const CalendarObject_1 = __importDefault(require("./CalendarObject"));
41
41
  exports.Calendar = CalendarObject_1.default;
42
+ const QRCodeObject_1 = __importDefault(require("./QRCodeObject"));
43
+ exports.QRCode = QRCodeObject_1.default;
42
44
  const utils_1 = __importStar(require("./utils"));
43
45
  exports.fabric = utils_1.default;
44
46
  Object.defineProperty(exports, "lockObject", { enumerable: true, get: function () { return utils_1.lockObject; } });
@@ -6,6 +6,7 @@ import { ImageFilterType } from "../ImagePlaceholderObject/interfaces";
6
6
  import CurvedText from "../CurvedTextObject";
7
7
  import "./control.util";
8
8
  import Calendar from "../CalendarObject";
9
+ import QRCode from "../QRCodeObject";
9
10
  export declare const loadFontFromUrl: (url: string, name: string) => Promise<void>;
10
11
  export declare const isFontLoaded: (name: string) => boolean;
11
12
  export declare const loadImageFromFile: (image: File) => Promise<fabric.Image>;
@@ -19,8 +20,8 @@ export declare const lockAllObjects: (canvas: fabric.Canvas, locked: boolean, se
19
20
  export declare const getObject: (object: any, options?: {
20
21
  isOriginal?: boolean;
21
22
  hideStroke?: boolean;
22
- }) => Clipart | ImagePlaceholder | CurvedText | Calendar | TextInput | undefined;
23
+ }) => Clipart | ImagePlaceholder | CurvedText | Calendar | QRCode | TextInput | undefined;
23
24
  export declare const asyncGetObject: (object: any, options?: {
24
25
  isOriginal?: boolean;
25
- }) => Promise<Clipart | ImagePlaceholder | CurvedText | Calendar | TextInput | undefined>;
26
+ }) => Promise<Clipart | ImagePlaceholder | CurvedText | Calendar | QRCode | TextInput | undefined>;
26
27
  export default fabric;
@@ -32,6 +32,7 @@ const TextInputObject_1 = __importStar(require("../TextInputObject"));
32
32
  const CurvedTextObject_1 = __importStar(require("../CurvedTextObject"));
33
33
  require("./control.util");
34
34
  const CalendarObject_1 = __importStar(require("../CalendarObject"));
35
+ const QRCodeObject_1 = __importStar(require("../QRCodeObject"));
35
36
  const loadFontFromUrl = async (url, name) => {
36
37
  if (!name || !url)
37
38
  return;
@@ -166,6 +167,13 @@ const getObject = (object, options) => {
166
167
  });
167
168
  return calendarObject;
168
169
  }
170
+ case constants_1.OBJECT_TYPES.qrCode: {
171
+ const qrCodeObject = new QRCodeObject_1.default({
172
+ ...object,
173
+ ...options,
174
+ });
175
+ return qrCodeObject;
176
+ }
169
177
  default:
170
178
  return;
171
179
  }
@@ -220,6 +228,16 @@ const asyncGetObject = async (object, options) => {
220
228
  }
221
229
  return calendarObject;
222
230
  }
231
+ case constants_1.OBJECT_TYPES.qrCode: {
232
+ const qrCodeObject = new QRCodeObject_1.default({
233
+ ...object,
234
+ isOriginal: options?.isOriginal,
235
+ });
236
+ if (object?.qrCodeSettings?.url) {
237
+ await qrCodeObject?.loadImage?.(object?.calendarSettings?.url);
238
+ }
239
+ return qrCodeObject;
240
+ }
223
241
  default:
224
242
  return;
225
243
  }
@@ -243,6 +261,9 @@ fabric_1.fabric.Object.prototype.toObject = (function (toObject) {
243
261
  case constants_1.OBJECT_TYPES.calendar: {
244
262
  return fabric_1.fabric.util.object.extend(toObject.call(this), (0, CalendarObject_1.toCalendarObject)(this));
245
263
  }
264
+ case constants_1.OBJECT_TYPES.qrCode: {
265
+ return fabric_1.fabric.util.object.extend(toObject.call(this), (0, QRCodeObject_1.toQRCodeObject)(this));
266
+ }
246
267
  default: {
247
268
  return {};
248
269
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "customized-fabric",
3
- "version": "1.9.3",
3
+ "version": "1.9.4",
4
4
  "description": "Customized fabric",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",