customized-fabric 1.0.0 → 1.0.1

package/lib/customizedFabric/ClipartObject/constants.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CLIPART_OBJECT_ATTRIBUTES = void 0;
+exports.CLIPART_OBJECT_ATTRIBUTES = {
+    name: "Clipart",
+    type: "CLIP_ART",
+    stroke: {
+        stroke: "#000000",
+        strokeDashArray: [5, 5],
+        strokeWidth: 2,
+    },
+};

package/lib/customizedFabric/ClipartObject/index.js

@@ -0,0 +1,145 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Clipart = exports.toClipartObject = void 0;
+const fabric_1 = require("fabric");
+const constants_1 = require("./constants");
+const objectId_1 = require("@/utils/objectId");
+const utils_1 = require("../utils");
+const ClipartClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
+    initialize: 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.CLIPART_OBJECT_ATTRIBUTES.stroke,
+        });
+        const imageObject = new fabric_1.fabric.Image("");
+        imageObject.set({
+            width: options?.width,
+            height: options?.height,
+        });
+        this.imageObject = imageObject;
+        const group = new fabric_1.fabric.Group([this.rectObject, this.imageObject]);
+        group.setControlsVisibility({
+            mt: false,
+            mr: false,
+            mb: false,
+            ml: false,
+        });
+        this.set(group);
+        this.on("scaling", () => {
+            let width = this.width * this.scaleX;
+            let height = this.height * this.scaleY;
+            const imageScaleX = width / this.imageObject.width;
+            const imageScaleY = height / this.imageObject.height;
+            this.imageObject.set({ scaleX: imageScaleX, scaleY: imageScaleY });
+            this.fitImage(this.imageObject);
+            this.canvas?.renderAll?.();
+        });
+        this.set({
+            _id: new objectId_1.ObjectId().toString(),
+            name: constants_1.CLIPART_OBJECT_ATTRIBUTES.name,
+            type: constants_1.CLIPART_OBJECT_ATTRIBUTES.type,
+            ...options,
+            layerId: options?.personalizeId ?? options?.layerId,
+            objectCaching: false,
+        });
+        if (options?.clipartUrl) {
+            this.loadImageFromUrl(options.clipartUrl);
+        }
+        if (options?.clipartFile) {
+            this.loadImageFromFile(options.clipartFile);
+        }
+        if (options?.hideStroke) {
+            this.rectObject.set({ strokeWidth: 0 });
+        }
+    },
+    loadImageFromUrl: async function (url) {
+        fabric_1.fabric.Image.fromURL(url, (loadedImage) => {
+            this.loadImage(loadedImage);
+        }, {
+            crossOrigin: "anonymous",
+        });
+    },
+    loadImageFromFile: async function (imageFile) {
+        const loadedImage = await (0, utils_1.loadImageFromFile)(imageFile);
+        this.loadImage(loadedImage);
+    },
+    loadImage: function (image) {
+        if (image.width && image.height) {
+            image.set({
+                originX: "center",
+                originY: "center",
+            });
+            image.scaleToWidth(this.width);
+            this.remove(this.imageObject);
+            this.imageObject = image;
+            this.add(this.imageObject);
+            this.fitImage(this.imageObject);
+        }
+        else {
+            this.remove(this.imageObject);
+            const imageObject = new fabric_1.fabric.Image("");
+            imageObject.set({
+                width: this.width,
+                height: this.height,
+            });
+            this.imageObject = imageObject;
+            this.add(this.imageObject);
+            this.fitImage(this.imageObject);
+        }
+        this.canvas?.renderAll();
+    },
+    getSettings: function (attribute) {
+        return this.get(attribute);
+    },
+    setSizes: function (options) {
+        const { width, height } = options;
+        if (width) {
+            const scaleX = width / (this?.imageObject?.width ?? this.width);
+            this.imageObject.set({ scaleX, scaleY: scaleX });
+        }
+        if (height) {
+            const scaleY = height / (this?.imageObject?.height ?? this.height);
+            this.imageObject.set({ scaleX: scaleY, scaleY });
+        }
+        this.fitImage(this.imageObject);
+        this.canvas?.renderAll?.();
+    },
+    fitImage: function (image) {
+        const attributes = {
+            scaleX: 1,
+            scaleY: 1,
+            width: (image.width ?? 0) * (image.scaleX ?? 1),
+            height: (image.height ?? 0) * (image.scaleY ?? 1),
+        };
+        this.set(attributes);
+        this.rectObject.set(attributes);
+    },
+});
+const toClipartObject = (clipartObject) => {
+    return {
+        id: clipartObject._id,
+        personalizeId: clipartObject.layerId,
+        layerId: clipartObject.layerId,
+        name: clipartObject.name,
+        locked: clipartObject.locked,
+        isAdditional: clipartObject?.isAdditional,
+        clipartUrl: clipartObject?.clipartUrl,
+        clipartFile: clipartObject?.clipartFile,
+        clipartRootCategoryId: clipartObject?.clipartRootCategoryId,
+        clipartCategoryId: clipartObject?.clipartCategoryId,
+        clipartOptionId: clipartObject?.clipartOptionId,
+    };
+};
+exports.toClipartObject = toClipartObject;
+class Clipart extends fabric_1.fabric.Group {
+    constructor(options) {
+        super();
+        return new ClipartClass(options);
+    }
+}
+exports.Clipart = Clipart;

package/lib/customizedFabric/ClipartObject/interfaces.js

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

package/lib/customizedFabric/ImagePlaceholderObject/constants.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IMAGE_PLACEHOLDER_OBJECT_ATTRIBUTES = void 0;
+exports.IMAGE_PLACEHOLDER_OBJECT_ATTRIBUTES = {
+    name: "Image placeholder",
+    type: "IMAGE_PLACEHOLDER",
+    stroke: {
+        stroke: "#000000",
+        strokeDashArray: [5, 5],
+        strokeWidth: 2,
+    },
+};

package/lib/customizedFabric/ImagePlaceholderObject/index.js

@@ -0,0 +1,140 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImagePlaceholder = exports.toImagePlaceholderObject = void 0;
+const fabric_1 = require("fabric");
+const constants_1 = require("./constants");
+const objectId_1 = require("@/utils/objectId");
+const utils_1 = require("../utils");
+const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
+    initialize: 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.IMAGE_PLACEHOLDER_OBJECT_ATTRIBUTES.stroke,
+        });
+        this.imageObject = new fabric_1.fabric.Image("");
+        const group = new fabric_1.fabric.Group([this.rectObject, this.imageObject]);
+        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();
+        });
+        this.set({
+            _id: new objectId_1.ObjectId().toString(),
+            name: constants_1.IMAGE_PLACEHOLDER_OBJECT_ATTRIBUTES.name,
+            type: constants_1.IMAGE_PLACEHOLDER_OBJECT_ATTRIBUTES.type,
+            ...options,
+            layerId: options?.personalizeId ?? options?.layerId,
+            objectCaching: false,
+        });
+        if (options?.imageFile) {
+            this.loadImageFromFile(options?.imageFile);
+        }
+        if (options?.hideStroke) {
+            this.rectObject.set({ strokeWidth: 0 });
+        }
+    },
+    loadImageFromUrl: async function (url) {
+        fabric_1.fabric.Image.fromURL(url, (loadedImage) => {
+            this.loadImage(loadedImage);
+        }, {
+            crossOrigin: "anonymous",
+        });
+    },
+    loadImageFromFile: async function (imageFile) {
+        const loadedImage = await (0, utils_1.loadImageFromFile)(imageFile);
+        this.loadImage(loadedImage);
+    },
+    loadImage: function (image) {
+        if (image.width && image.height) {
+            image.set({
+                originX: "center",
+                originY: "center",
+            });
+            this.remove(this.imageObject);
+            this.imageObject = image;
+            this.add(this.imageObject);
+            this.fitImage(this.imageObject);
+        }
+        else {
+            this.remove(this.imageObject);
+            this.imageObject = new fabric_1.fabric.Image("");
+            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) {
+        const imageScaleX = this.width / (image?.width ?? 1);
+        const imageScaleY = this.height / (image?.height ?? 1);
+        imageScaleX > imageScaleY
+            ? image.set({ scaleX: imageScaleY, scaleY: imageScaleY })
+            : image.set({ scaleX: imageScaleX, scaleY: imageScaleX });
+    },
+    getSettings: function (attribute) {
+        return this.get(attribute);
+    },
+    loadUploadedImage: function (imageFile) {
+        (0, utils_1.loadImageFromFile)(imageFile).then((loadedImage) => {
+            const clipPath = new fabric_1.fabric.Rect({
+                width: this.width,
+                height: this.height,
+                top: this.top,
+                left: this.left,
+                absolutePositioned: true,
+            });
+            loadedImage.set({ top: this.top, left: this.left, clipPath: clipPath });
+            this.fitImage(loadedImage);
+            this.uploadedImage = loadedImage;
+            const canvas = this?.canvas;
+            canvas?.add(this.uploadedImage);
+            canvas?.renderAll();
+        });
+    },
+    removeUploadedImage: function () {
+        const canvas = this?.canvas;
+        canvas?.remove(this.uploadedImage);
+        canvas?.renderAll();
+    },
+});
+const toImagePlaceholderObject = (imagePlaceholderObject) => {
+    return {
+        id: imagePlaceholderObject._id,
+        personalizeId: imagePlaceholderObject.layerId,
+        layerId: imagePlaceholderObject.layerId,
+        name: imagePlaceholderObject.name,
+        locked: imagePlaceholderObject.locked,
+        isAdditional: imagePlaceholderObject?.isAdditional,
+    };
+};
+exports.toImagePlaceholderObject = toImagePlaceholderObject;
+class ImagePlaceholder extends fabric_1.fabric.Group {
+    constructor(options) {
+        super();
+        return new ImagePlaceholderClass(options);
+    }
+}
+exports.ImagePlaceholder = ImagePlaceholder;

package/lib/customizedFabric/ImagePlaceholderObject/interfaces.js

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

package/lib/customizedFabric/TextInputObject/constants.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PARENT_ATTRIBUTES = exports.TEXT_INPUT_OBJECT_ATTRIBUTES = void 0;
+exports.TEXT_INPUT_OBJECT_ATTRIBUTES = {
+    name: "Text input",
+    type: "TEXT_INPUT",
+    maxFontSize: 200,
+    stroke: {
+        stroke: "#000000",
+        strokeDashArray: [5, 5],
+        strokeWidth: 2,
+    },
+};
+exports.PARENT_ATTRIBUTES = ["top", "left", "width", "height", "angle"];

package/lib/customizedFabric/TextInputObject/index.js

@@ -0,0 +1,188 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextInput = exports.toTextInputObject = void 0;
+const fabric_1 = require("fabric");
+const constants_1 = require("./constants");
+const objectId_1 = require("@/utils/objectId");
+const utils_1 = require("../utils");
+const TextInputClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
+    initialize: function (options) {
+        const { text, ...rest } = options ?? {};
+        this.rectObject = new fabric_1.fabric.Rect({
+            width: options?.width,
+            height: options?.height,
+            fill: undefined,
+            originX: "center",
+            originY: "center",
+            objectCaching: false,
+            ...constants_1.TEXT_INPUT_OBJECT_ATTRIBUTES.stroke,
+        });
+        this.textObject = new fabric_1.fabric.IText("", {
+            originX: "top",
+            originY: "left",
+            textAlign: "center",
+            objectCaching: false,
+            ...text,
+        });
+        const group = new fabric_1.fabric.Group([this.rectObject, this.textObject]);
+        this.set(group);
+        this.on("scaling", () => {
+            let width = this.width * this.scaleX;
+            let height = this.height * this.scaleY;
+            const attributes = {
+                scaleX: 1,
+                scaleY: 1,
+                width,
+                height,
+            };
+            this.set(attributes);
+            this.rectObject.set(attributes);
+            this.autoChangeFontSize(0.1);
+            this.textObject.set({
+                width: width,
+            });
+            this.canvas?.renderAll?.();
+        });
+        this.set({
+            _id: new objectId_1.ObjectId().toString(),
+            name: constants_1.TEXT_INPUT_OBJECT_ATTRIBUTES.name,
+            type: constants_1.TEXT_INPUT_OBJECT_ATTRIBUTES.type,
+            ...rest,
+            layerId: options?.personalizeId ?? options?.layerId,
+            objectCaching: false,
+        });
+        this.autoChangeFontSize(0.1);
+        this.textObject.set({
+            width: this.width,
+        });
+        if (options?.fontUrl) {
+            (0, utils_1.loadFontFromUrl)(text?.fontFamily ?? "", options?.fontUrl).then(() => {
+                this.canvas?.renderAll?.();
+            });
+        }
+        if (options?.hideStroke) {
+            this.rectObject.set({ strokeWidth: 0 });
+        }
+    },
+    autoChangeFontSize: function (changeSpeed) {
+        if (this.width <= this.textObject.__lineWidths ||
+            this.height <= this.textObject.height) {
+            while (this.width <= this.textObject.__lineWidths ||
+                this.height <= this.textObject.height) {
+                this.textObject.set({
+                    fontSize: this.textObject.fontSize - changeSpeed,
+                });
+            }
+        }
+        else {
+            while (this.textObject.maxFontSize > this.textObject.fontSize &&
+                this.width > this.textObject.__lineWidths &&
+                this.height > this.textObject.height) {
+                this.textObject.set({
+                    fontSize: this.textObject.fontSize + changeSpeed,
+                });
+            }
+        }
+    },
+    setText: function (text) {
+        this.textObject.set({
+            text,
+        });
+        this.autoChangeFontSize(0.1);
+        this.textObject.set({
+            width: this.width,
+        });
+        this.canvas?.renderAll?.();
+    },
+    setMaxFontSize: function (fontSize) {
+        this.textObject.set({
+            fontSize,
+        });
+        if (this.textObject.__lineWidths < this.width &&
+            this.textObject.height < this.height) {
+        }
+        else {
+            this.autoChangeFontSize(1);
+        }
+        this.textObject.set({
+            width: this.width,
+        });
+        this.textObject.set({
+            maxFontSize: fontSize,
+        });
+        this.canvas?.renderAll?.();
+    },
+    setFontFamily: async function (fontName, fontUrl) {
+        if (!(0, utils_1.isFontLoaded)(fontName)) {
+            await (0, utils_1.loadFontFromUrl)(fontName, fontUrl ?? "");
+        }
+        this.textObject.set({ fontFamily: fontName });
+        this.autoChangeFontSize(0.1);
+        this.textObject.set({
+            width: this.width,
+        });
+        this.canvas?.renderAll?.();
+    },
+    setSizes: function (options) {
+        const { width, height } = options;
+        if (width && width > this.textObject.__lineWidths) {
+            this.set({ width });
+            this.textObject.set({ width });
+        }
+        if (height && height > this.textObject.height) {
+            this.set({ height });
+        }
+        this.canvas?.renderAll?.();
+    },
+    setTextAttributes: function (options) {
+        this.textObject.set(options);
+        this.textObject.set({
+            width: this.width,
+        });
+        this.canvas?.renderAll?.();
+    },
+    getTextAttribute: function (attribute) {
+        return this.textObject.get(attribute);
+    },
+    getSettings: function (attribute) {
+        if (constants_1.PARENT_ATTRIBUTES.includes(attribute)) {
+            return this.get(attribute);
+        }
+        return this.textObject.get(attribute);
+    },
+});
+const toTextInputObject = (textInputObject) => {
+    const textObject = textInputObject.textObject;
+    return {
+        id: textInputObject?._id,
+        personalizeId: textInputObject?.layerId,
+        layerId: textInputObject?.layerId,
+        name: textInputObject?.name,
+        locked: textInputObject?.locked,
+        fontId: textInputObject?.fontId,
+        fontCategoryId: textInputObject?.fontCategoryId,
+        fontUrl: textInputObject?.fontUrl,
+        isAdditional: textInputObject?.isAdditional,
+        text: {
+            fontWeight: textObject?.fontWeight,
+            fontSize: textObject?.fontSize,
+            textAlign: textObject?.textAlign,
+            text: textObject?.text,
+            fill: textObject?.fill,
+            width: textObject?.width,
+            height: textObject?.height,
+            fontFamily: textObject?.fontFamily,
+            maxFontSize: textObject?.maxFontSize,
+            stroke: textObject?.stroke,
+            strokeWidth: textObject?.strokeWidth,
+        },
+    };
+};
+exports.toTextInputObject = toTextInputObject;
+class TextInput extends fabric_1.fabric.Group {
+    constructor(options) {
+        super();
+        return new TextInputClass(options);
+    }
+}
+exports.TextInput = TextInput;

package/lib/customizedFabric/TextInputObject/interfaces.js

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

package/lib/customizedFabric/constants.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OBJECT_TYPES = void 0;
+const constants_1 = require("./ClipartObject/constants");
+const constants_2 = require("./ImagePlaceholderObject/constants");
+const constants_3 = require("./TextInputObject/constants");
+exports.OBJECT_TYPES = {
+    textInput: constants_3.TEXT_INPUT_OBJECT_ATTRIBUTES.type,
+    clipart: constants_1.CLIPART_OBJECT_ATTRIBUTES.type,
+    imagePlaceHolder: constants_2.IMAGE_PLACEHOLDER_OBJECT_ATTRIBUTES.type,
+    activeSelection: "activeSelection",
+};

package/lib/customizedFabric/index.js

@@ -0,0 +1,54 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fabric_1 = require("fabric");
+const TextInputObject_1 = require("./TextInputObject");
+const ClipartObject_1 = require("./ClipartObject");
+const ImagePlaceholderObject_1 = require("./ImagePlaceholderObject");
+const constants_1 = require("./constants");
+fabric_1.fabric.TextInput = TextInputObject_1.TextInput;
+fabric_1.fabric.Clipart = ClipartObject_1.Clipart;
+fabric_1.fabric.ImagePlaceholder = ImagePlaceholderObject_1.ImagePlaceholder;
+fabric_1.fabric.Object.prototype.transparentCorners = false;
+fabric_1.fabric.Object.prototype.cornerColor = "black";
+fabric_1.fabric.Object.prototype.cornerStyle = "circle";
+fabric_1.fabric.Object.prototype.cornerStrokeColor = "black";
+fabric_1.fabric.Object.prototype.borderColor = "black";
+fabric_1.fabric.Object.prototype.toObject = (function (toObject) {
+    return function () {
+        switch (this.type) {
+            case constants_1.OBJECT_TYPES.textInput: {
+                return fabric_1.fabric.util.object.extend(toObject.call(this), (0, TextInputObject_1.toTextInputObject)(this));
+            }
+            case constants_1.OBJECT_TYPES.clipart: {
+                return fabric_1.fabric.util.object.extend(toObject.call(this), (0, ClipartObject_1.toClipartObject)(this));
+            }
+            case constants_1.OBJECT_TYPES.imagePlaceHolder: {
+                return fabric_1.fabric.util.object.extend(toObject.call(this), (0, ImagePlaceholderObject_1.toImagePlaceholderObject)(this));
+            }
+            default: {
+                return {};
+            }
+        }
+    };
+})(fabric_1.fabric.Object.prototype.toObject);
+__exportStar(require("./TextInputObject"), exports);
+__exportStar(require("./ClipartObject"), exports);
+__exportStar(require("./ImagePlaceholderObject"), exports);
+__exportStar(require("./constants"), exports);
+__exportStar(require("./interfaces"), exports);
+__exportStar(require("./utils"), exports);
+exports.default = fabric_1.fabric;

package/lib/customizedFabric/interfaces.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./TextInputObject/interfaces"), exports);
+__exportStar(require("./ClipartObject/interfaces"), exports);
+__exportStar(require("./ImagePlaceholderObject/interfaces"), exports);