customized-fabric 1.0.1 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "customized-fabric",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Customized fabric",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -15,6 +15,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@types/node": "^18.15.11",
     "fabric": "^5.3.0"
   },
   "devDependencies": {

package/lib/ClipartObject/constants.js

@@ -1,12 +0,0 @@
-"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/ClipartObject/index.js

@@ -1,145 +0,0 @@
-"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 utils_1 = require("../utils");
-const objectId_1 = require("../objectId");
-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/ClipartObject/interfaces.js

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

package/lib/ImagePlaceholderObject/constants.js

@@ -1,12 +0,0 @@
-"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/ImagePlaceholderObject/index.js

@@ -1,140 +0,0 @@
-"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 utils_1 = require("../utils");
-const objectId_1 = require("../objectId");
-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/ImagePlaceholderObject/interfaces.js

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

package/lib/TextInputObject/constants.js

@@ -1,13 +0,0 @@
-"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",
-    stroke: {
-        stroke: "#000000",
-        strokeDashArray: [5, 5],
-        strokeWidth: 2,
-    },
-};
-exports.PARENT_ATTRIBUTES = ["top", "left", "width", "height", "angle"];

package/lib/TextInputObject/index.js

@@ -1,188 +0,0 @@
-"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 utils_1 = require("../utils");
-const objectId_1 = require("../objectId");
-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/TextInputObject/interfaces.js

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

package/lib/constants.js

@@ -1,12 +0,0 @@
-"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/interfaces.js

@@ -1,19 +0,0 @@
-"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);

package/lib/objectId/bson_value.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BSONValue = void 0;
-const constants_1 = require("./constants");
-/** @public */
-class BSONValue {
-    /** @internal */
-    get [Symbol.for("@@mdb.bson.version")]() {
-        return constants_1.BSON_MAJOR_VERSION;
-    }
-}
-exports.BSONValue = BSONValue;