customized-fabric 1.9.3 → 1.9.4

package/lib/QRCodeObject/constants.d.ts

@@ -0,0 +1,9 @@
+export declare const QR_CODE_OBJECT_ATTRIBUTES: {
+    name: string;
+    type: string;
+    stroke: {
+        stroke: string;
+        strokeDashArray: number[];
+        strokeWidth: number;
+    };
+};

package/lib/QRCodeObject/constants.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QR_CODE_OBJECT_ATTRIBUTES = void 0;
+exports.QR_CODE_OBJECT_ATTRIBUTES = {
+    name: "QR code",
+    type: "QR_CODE",
+    stroke: {
+        stroke: "#333",
+        strokeDashArray: [5, 5],
+        strokeWidth: 1,
+    },
+};

package/lib/QRCodeObject/index.d.ts

@@ -0,0 +1,41 @@
+import { fabric } from "fabric";
+import { QRCodeSettings, IQRCodeOptions } from "./interfaces";
+import { ObjectId } from "../utils/objectId";
+export declare const toQRCodeObject: (object: QRCode) => {
+    _id: ObjectId | undefined;
+    id: ObjectId | undefined;
+    personalizeId: number | undefined;
+    layerId: number | undefined;
+    name: string | undefined;
+    locked: boolean | undefined;
+    isAdditional: boolean | undefined;
+    layoutGroupId: string | undefined;
+    layoutGroupName: string | undefined;
+    qrCodeSettings: QRCodeSettings | undefined;
+};
+export default class QRCode extends fabric.Group {
+    _id?: ObjectId;
+    layerId?: number;
+    locked?: boolean;
+    imageFile?: File;
+    isAdditional?: boolean;
+    imageObject?: fabric.Image;
+    layoutGroupId?: string;
+    layoutGroupName?: string;
+    qrCodeData?: string;
+    qrCodeMargin?: number;
+    qrCodeEyeShape?: string;
+    qrCodeDataShape?: string;
+    qrCodeBackgroundColor?: string;
+    qrCodeDataColor?: string;
+    qrCodeEffectRatio?: number;
+    getSettings?: (attribute: string) => any;
+    setSizes?: (options: {
+        width?: number;
+        height?: number;
+    }) => void;
+    loadImage?: (imageInput: File | string) => Promise<void>;
+    fitImage?: (image: fabric.Image, cover?: boolean) => void;
+    getQRCodeAttributes?: () => QRCodeSettings;
+    constructor(options?: IQRCodeOptions);
+}

package/lib/QRCodeObject/index.js

@@ -0,0 +1,137 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toQRCodeObject = void 0;
+const fabric_1 = require("fabric");
+const constants_1 = require("./constants");
+const utils_1 = require("../utils");
+const objectId_1 = require("../utils/objectId");
+const QRCodeClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
+    initialize: async function (options) {
+        this.rectObject = new fabric_1.fabric.Rect({
+            width: options?.width,
+            height: options?.height,
+            fill: undefined,
+            originX: "center",
+            originY: "center",
+            objectCaching: false,
+            ...constants_1.QR_CODE_OBJECT_ATTRIBUTES.stroke,
+        });
+        const group = new fabric_1.fabric.Group([this.rectObject]);
+        this.set(group);
+        this.on("scaling", () => {
+            let width = this.width * this.scaleX;
+            let height = this.height * this.scaleY;
+            this.setSizes({ width, height });
+            this.canvas?.renderAll();
+        });
+        const qrCodeSettings = { ...(options?.qrCodeSettings ?? {}) };
+        Object.keys(qrCodeSettings).map((key) => {
+            const newKey = `qrCode${key.charAt(0).toUpperCase() + key.slice(1)}`;
+            qrCodeSettings[newKey] = qrCodeSettings[key];
+            delete qrCodeSettings[key];
+        });
+        this.set({
+            _id: new objectId_1.ObjectId().toString(),
+            name: constants_1.QR_CODE_OBJECT_ATTRIBUTES.name,
+            type: constants_1.QR_CODE_OBJECT_ATTRIBUTES.type,
+            ...options,
+            layerId: options?.personalizeId ?? options?.layerId,
+            ...qrCodeSettings,
+        });
+        if (options?.isOriginal) {
+            this.rectObject?.set({ strokeWidth: 0 });
+        }
+        else {
+            if (options?.hideStroke) {
+                this.rectObject?.set({ strokeWidth: 0 });
+            }
+            if (options?.imageFile) {
+                this.loadImage(options?.imageFile);
+            }
+        }
+        this.fire("scaling");
+    },
+    loadImage: async function (image) {
+        const loadedImage = await (0, utils_1.loadImage)(image);
+        if (loadedImage?.width && loadedImage?.height) {
+            loadedImage.set({
+                originX: "center",
+                originY: "center",
+            });
+            this.remove(this.imageObject);
+            this.imageObject = loadedImage;
+            this.add(this.imageObject);
+            this.fitImage(this.imageObject);
+            this.canvas?.renderAll();
+        }
+    },
+    setSizes: function (options) {
+        const { width, height } = options;
+        const attributes = {
+            scaleX: 1,
+            scaleY: 1,
+        };
+        if (width) {
+            attributes.width = width;
+        }
+        if (height) {
+            attributes.height = height;
+        }
+        this.set(attributes);
+        this.rectObject?.set(attributes);
+        this.fitImage(this.imageObject);
+        this.canvas?.renderAll?.();
+    },
+    fitImage: function (image, cover = false) {
+        if (image) {
+            const imageScaleX = this.width / (image?.width ?? 1);
+            const imageScaleY = this.height / (image?.height ?? 1);
+            if (cover) {
+                imageScaleX < imageScaleY
+                    ? image.set({ scaleX: imageScaleY, scaleY: imageScaleY })
+                    : image.set({ scaleX: imageScaleX, scaleY: imageScaleX });
+            }
+            else {
+                imageScaleX > imageScaleY
+                    ? image.set({ scaleX: imageScaleY, scaleY: imageScaleY })
+                    : image.set({ scaleX: imageScaleX, scaleY: imageScaleX });
+            }
+        }
+    },
+    getSettings: function (attribute) {
+        return this.get(attribute);
+    },
+    getQRCodeAttributes: function () {
+        return {
+            data: this?.qrCodeData,
+            margin: this?.qrCodeMargin,
+            eyeShape: this?.qrCodeEyeShape,
+            dataShape: this?.qrCodeDataShape,
+            backgroundColor: this?.qrCodeBackgroundColor,
+            dataColor: this?.qrCodeDataColor,
+            effectRatio: this?.qrCodeEffectRatio,
+        };
+    },
+});
+const toQRCodeObject = (object) => {
+    return {
+        _id: object?._id,
+        id: object?._id,
+        personalizeId: object?.layerId,
+        layerId: object?.layerId,
+        name: object?.name,
+        locked: object?.locked,
+        isAdditional: object?.isAdditional,
+        layoutGroupId: object?.layoutGroupId,
+        layoutGroupName: object?.layoutGroupName,
+        qrCodeSettings: object.getQRCodeAttributes?.(),
+    };
+};
+exports.toQRCodeObject = toQRCodeObject;
+class QRCode extends fabric_1.fabric.Group {
+    constructor(options) {
+        super();
+        return new QRCodeClass(options);
+    }
+}
+exports.default = QRCode;

package/lib/QRCodeObject/interfaces.d.ts

@@ -0,0 +1,20 @@
+import { ObjectId } from "../utils/objectId";
+export interface QRCodeSettings {
+    data?: string;
+    margin?: string;
+    eyeShape?: string;
+    dataShape?: string;
+    backgroundColor?: string;
+    dataColor?: string;
+    effectRatio?: string;
+}
+export interface IQRCodeOptions extends fabric.IGroupOptions {
+    _id?: ObjectId;
+    personalizeId?: number;
+    layerId: number;
+    imageFile?: File;
+    isOriginal?: boolean;
+    isAdditional?: boolean;
+    hideStroke?: boolean;
+    qrCodeSettings?: QRCodeSettings;
+}

package/lib/QRCodeObject/interfaces.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/constants.d.ts

@@ -6,5 +6,6 @@ export declare const OBJECT_TYPES: {
     activeSelection: string;
     layoutGroup: string;
     calendar: string;
+    qrCode: string;
 };
 export declare const MAX_TEXTURE_SIZE = 20000;

package/lib/constants.js

@@ -6,14 +6,16 @@ const constants_2 = require("./ClipartObject/constants");
 const constants_3 = require("./CurvedTextObject/constants");
 const constants_4 = require("./ImagePlaceholderObject/constants");
 const constants_5 = require("./LayoutGroupObject/constants");
-const constants_6 = require("./TextInputObject/constants");
+const constants_6 = require("./QRCodeObject/constants");
+const constants_7 = require("./TextInputObject/constants");
 exports.OBJECT_TYPES = {
-    textInput: constants_6.TEXT_INPUT_OBJECT_ATTRIBUTES.type,
+    textInput: constants_7.TEXT_INPUT_OBJECT_ATTRIBUTES.type,
     curvedText: constants_3.CURVED_TEXT_OBJECT_ATTRIBUTES.type,
     clipart: constants_2.CLIPART_OBJECT_ATTRIBUTES.type,
     imagePlaceHolder: constants_4.IMAGE_PLACEHOLDER_OBJECT_ATTRIBUTES.type,
     activeSelection: "activeSelection",
     layoutGroup: constants_5.LAYOUT_GROUP_OBJECT_ATTRIBUTES.type,
     calendar: constants_1.CALENDAR_OBJECT_ATTRIBUTES.type,
+    qrCode: constants_6.QR_CODE_OBJECT_ATTRIBUTES.type,
 };
 exports.MAX_TEXTURE_SIZE = 20000;

package/lib/index.d.ts

@@ -4,7 +4,8 @@ import Clipart from "./ClipartObject";
 import ImagePlaceholder from "./ImagePlaceholderObject";
 import LayoutGroup from "./LayoutGroupObject";
 import Calendar from "./CalendarObject";
+import QRCode from "./QRCodeObject";
 import fabric, { lockObject, lockAllObjects, loadImageFromFile, loadImageFromUrl, getObject, asyncGetObject } from "./utils";
 import { OBJECT_TYPES } from "./constants";
 import { IMAGE_FILTER_TYPES } from "./ImagePlaceholderObject/constants";
-export { fabric, TextInput, Clipart, ImagePlaceholder, LayoutGroup, CurvedText, Calendar, lockObject, lockAllObjects, loadImageFromFile, loadImageFromUrl, getObject, asyncGetObject, OBJECT_TYPES, IMAGE_FILTER_TYPES, };
+export { fabric, TextInput, Clipart, ImagePlaceholder, LayoutGroup, CurvedText, Calendar, QRCode, lockObject, lockAllObjects, loadImageFromFile, loadImageFromUrl, getObject, asyncGetObject, OBJECT_TYPES, IMAGE_FILTER_TYPES, };

package/lib/index.js

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-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;
+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;
 const TextInputObject_1 = __importDefault(require("./TextInputObject"));
 exports.TextInput = TextInputObject_1.default;
 const CurvedTextObject_1 = __importDefault(require("./CurvedTextObject"));
@@ -39,6 +39,8 @@ const LayoutGroupObject_1 = __importDefault(require("./LayoutGroupObject"));
 exports.LayoutGroup = LayoutGroupObject_1.default;
 const CalendarObject_1 = __importDefault(require("./CalendarObject"));
 exports.Calendar = CalendarObject_1.default;
+const QRCodeObject_1 = __importDefault(require("./QRCodeObject"));
+exports.QRCode = QRCodeObject_1.default;
 const utils_1 = __importStar(require("./utils"));
 exports.fabric = utils_1.default;
 Object.defineProperty(exports, "lockObject", { enumerable: true, get: function () { return utils_1.lockObject; } });

package/lib/utils/index.d.ts

@@ -6,6 +6,7 @@ import { ImageFilterType } from "../ImagePlaceholderObject/interfaces";
 import CurvedText from "../CurvedTextObject";
 import "./control.util";
 import Calendar from "../CalendarObject";
+import QRCode from "../QRCodeObject";
 export declare const loadFontFromUrl: (url: string, name: string) => Promise<void>;
 export declare const isFontLoaded: (name: string) => boolean;
 export declare const loadImageFromFile: (image: File) => Promise<fabric.Image>;
@@ -19,8 +20,8 @@ export declare const lockAllObjects: (canvas: fabric.Canvas, locked: boolean, se
 export declare const getObject: (object: any, options?: {
     isOriginal?: boolean;
     hideStroke?: boolean;
-}) => Clipart | ImagePlaceholder | CurvedText | Calendar | TextInput | undefined;
+}) => Clipart | ImagePlaceholder | CurvedText | Calendar | QRCode | TextInput | undefined;
 export declare const asyncGetObject: (object: any, options?: {
     isOriginal?: boolean;
-}) => Promise<Clipart | ImagePlaceholder | CurvedText | Calendar | TextInput | undefined>;
+}) => Promise<Clipart | ImagePlaceholder | CurvedText | Calendar | QRCode | TextInput | undefined>;
 export default fabric;

package/lib/utils/index.js

@@ -32,6 +32,7 @@ const TextInputObject_1 = __importStar(require("../TextInputObject"));
 const CurvedTextObject_1 = __importStar(require("../CurvedTextObject"));
 require("./control.util");
 const CalendarObject_1 = __importStar(require("../CalendarObject"));
+const QRCodeObject_1 = __importStar(require("../QRCodeObject"));
 const loadFontFromUrl = async (url, name) => {
     if (!name || !url)
         return;
@@ -166,6 +167,13 @@ const getObject = (object, options) => {
             });
             return calendarObject;
         }
+        case constants_1.OBJECT_TYPES.qrCode: {
+            const qrCodeObject = new QRCodeObject_1.default({
+                ...object,
+                ...options,
+            });
+            return qrCodeObject;
+        }
         default:
             return;
     }
@@ -220,6 +228,16 @@ const asyncGetObject = async (object, options) => {
             }
             return calendarObject;
         }
+        case constants_1.OBJECT_TYPES.qrCode: {
+            const qrCodeObject = new QRCodeObject_1.default({
+                ...object,
+                isOriginal: options?.isOriginal,
+            });
+            if (object?.qrCodeSettings?.url) {
+                await qrCodeObject?.loadImage?.(object?.calendarSettings?.url);
+            }
+            return qrCodeObject;
+        }
         default:
             return;
     }
@@ -243,6 +261,9 @@ fabric_1.fabric.Object.prototype.toObject = (function (toObject) {
             case constants_1.OBJECT_TYPES.calendar: {
                 return fabric_1.fabric.util.object.extend(toObject.call(this), (0, CalendarObject_1.toCalendarObject)(this));
             }
+            case constants_1.OBJECT_TYPES.qrCode: {
+                return fabric_1.fabric.util.object.extend(toObject.call(this), (0, QRCodeObject_1.toQRCodeObject)(this));
+            }
             default: {
                 return {};
             }

package/package.json

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