customized-fabric 2.0.9 → 2.0.11

package/lib/CurvedTextObject/index.js

@@ -73,26 +73,25 @@ const CurvedTextClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group,
         this.fire("scaling");
     },
     autoChangeFontSize: function (changeSpeed = 0.1) {
-        let { fontSize, lengthRatio, maxFontSize, pathLength } = this.textObject;
+        let { fontSize, lengthRatio, maxFontSize } = this.textObject;
         fontSize = Number(fontSize || 0);
         lengthRatio = Number(lengthRatio || 0.4);
         maxFontSize = Number(maxFontSize || 200);
-        const length = pathLength * lengthRatio;
+        const length = (0, svg_util_1.getEllipseCircumference)(this.width / 2, this.height / 2) * lengthRatio;
         let maxLineWidth = Math.max(...this.textObject.__lineWidths);
-        const ratio = length / maxLineWidth;
-        fontSize = Math.min(maxFontSize, fontSize * ratio);
-        this.textObject.set({ fontSize });
-        this.canvas?.renderAll?.();
-        maxLineWidth = Math.max(...this.textObject.__lineWidths);
         while (length <= maxLineWidth) {
             fontSize -= changeSpeed;
-            this.textObject.set({ fontSize });
+            this.textObject.set({
+                fontSize,
+            });
             this.canvas?.renderAll?.();
             maxLineWidth = Math.max(...this.textObject.__lineWidths);
         }
         while (maxFontSize > fontSize.toFixed(1) && length > maxLineWidth) {
             fontSize += changeSpeed;
-            this.textObject.set({ fontSize });
+            this.textObject.set({
+                fontSize,
+            });
             this.canvas?.renderAll?.();
             maxLineWidth = Math.max(...this.textObject.__lineWidths);
         }
@@ -166,7 +165,10 @@ const CurvedTextClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group,
     calculateTextPath: function (width, height) {
         let { pathSide, positionAngle } = this.textObject;
         positionAngle = Number(positionAngle || 0);
-        const path = new fabric_1.fabric.Path((0, svg_util_1.getEllipsePath)(width, height), {
+        const textHeight = 0;
+        const rx = (width - textHeight) / 2;
+        const ry = (height - textHeight) / 2;
+        const path = new fabric_1.fabric.Path((0, svg_util_1.getEllipsePath)(rx, ry, pathSide), {
             fill: undefined,
             stroke: "black",
             objectCaching: false,
@@ -176,13 +178,12 @@ const CurvedTextClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group,
         });
         this.pathObject = path;
         const pathInfo = fabric_1.fabric.util?.getPathSegmentsInfo?.(path.path);
-        const pathLength = pathInfo.pop().length;
+        const pathLength = pathInfo?.[(pathInfo?.length ?? 0) - 1]?.length;
         const pathStartOffset = ((positionAngle % 360) * pathLength) / 360;
         this.textObject.set({
             path,
             pathLength,
             pathStartOffset,
-            angle: (pathSide == "left" ? 0 : 1) * 180,
         });
         this?.canvas?.renderAll();
     },

package/lib/ImagePlaceholderObject/index.d.ts

@@ -50,7 +50,7 @@ export default class ImagePlaceholder extends fabric.Group {
     removeUploadedImage?: () => void;
     loadMask?: (maskInput: File | string) => void;
     removeMask?: () => void;
-    loadCustomizedImage?: (image: IImageOptions) => Promise<void>;
+    loadCustomImage?: (image: IImageOptions) => Promise<void>;
     setImageType?: (type: ImageFilterType) => void;
     setImageColor?: (color: string) => void;
     applyImageFilters?: (image: fabric.Image | undefined) => void;

package/lib/ImagePlaceholderObject/index.js

@@ -153,17 +153,23 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
     },
     toImageObject: function () {
         if (this.uploadedImage) {
-            const { originX, originY, left = 0, top = 0, width, height, scaleX, scaleY, angle = 0, flipX, flipY, skewX, skewY, opacity, } = this.uploadedImage;
+            const { originX, originY, left = 0, top = 0, width = 0, height = 0, scaleX = 0, scaleY = 0, angle = 0, flipX, flipY, skewX, skewY, opacity, } = this.uploadedImage;
+            const { relativeLeft, relativeTop } = (0, utils_1.getRelativePosition)(this.uploadedImage, this);
             return {
+                relativeLeftRatio: relativeLeft / this.width,
+                relativeTopRatio: relativeTop / this.height,
+                relativeScaleX: (width * scaleX) / this.width,
+                relativeScaleY: (height * scaleY) / this.height,
+                relativeAngle: angle - this.angle,
                 originX,
                 originY,
-                left: left - this.left,
-                top: top - this.top,
+                left,
+                top,
                 width,
                 height,
                 scaleX,
                 scaleY,
-                angle: angle - this.angle,
+                angle,
                 flipX,
                 flipY,
                 skewX,
@@ -174,6 +180,7 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
                     color: this?.imageColor,
                     removeBackground: this?.removeBackground,
                     faceCutout: this?.faceCutout,
+                    advancedFilter: this?.advancedFilter,
                 },
             };
         }
@@ -242,23 +249,23 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
             return mask;
         }
     },
-    loadCustomizedImage: async function (image) {
+    loadCustomImage: async function (image) {
         if (image) {
-            const { url, filteredUrl, data, clipPath } = image;
+            const { url, filteredUrl, data } = image;
             const imageUrl = filteredUrl ?? url;
-            if (imageUrl && data && clipPath) {
+            if (imageUrl && data) {
                 const loadedImage = await (0, utils_1.loadImageFromUrl)(imageUrl);
                 if (loadedImage) {
                     const mask = await this.getMask();
-                    const { top, left, scaleX, width, angle, flipX, flipY, settings = {}, } = data;
+                    const { relativeLeftRatio, relativeTopRatio, relativeScaleX, relativeScaleY, relativeAngle, width, height, flipX, flipY, settings = {}, } = data;
                     const { color, type } = settings;
-                    const ratioWidth = (width * scaleX) / (clipPath.width * clipPath.scaleX);
-                    const ratioPosition = this.width / clipPath.width;
-                    loadedImage.scaleToWidth(ratioWidth * this.width);
+                    const { absoluteLeft, absoluteRight } = (0, utils_1.getAbsolutePosition)(relativeLeftRatio, relativeTopRatio, this);
                     loadedImage.set({
-                        top: this.top + ratioPosition * top,
-                        left: this.left + ratioPosition * left,
-                        angle: this.angle + angle,
+                        left: absoluteLeft,
+                        top: absoluteRight,
+                        scaleX: (relativeScaleX * this.width) / width,
+                        scaleY: (relativeScaleY * this.height) / height,
+                        angle: this.angle + relativeAngle,
                         originX: "center",
                         originY: "center",
                         flipX,
@@ -287,7 +294,7 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
             const imageFilters = this.imageFilters ?? [];
             image.filters = imageFilters;
             image.applyFilters();
-            this.canvas.renderAll();
+            this.canvas?.renderAll();
         }
     },
 });

package/lib/ImagePlaceholderObject/interfaces.d.ts

@@ -22,6 +22,11 @@ export interface IImageOptions {
     data: {
         originX: string;
         originY: string;
+        relativeLeftRatio: number;
+        relativeTopRatio: number;
+        relativeScaleX: number;
+        relativeScaleY: number;
+        relativeAngle: number;
         left: number;
         top: number;
         width: number;
@@ -39,7 +44,6 @@ export interface IImageOptions {
             type?: ImageFilterType;
         };
     };
-    clipPath: IClipPathOptions;
 }
 export interface IImagePlaceholderOptions extends fabric.IGroupOptions {
     _id?: ObjectId;

package/lib/constants.d.ts

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

package/lib/constants.js

@@ -8,7 +8,6 @@ const constants_4 = require("./ImagePlaceholderObject/constants");
 const constants_5 = require("./LayoutGroupObject/constants");
 const constants_6 = require("./QRCodeObject/constants");
 const constants_7 = require("./TextInputObject/constants");
-const constants_8 = require("./AdvancedText/constants");
 exports.OBJECT_TYPES = {
     textInput: constants_7.TEXT_INPUT_OBJECT_ATTRIBUTES.type,
     curvedText: constants_3.CURVED_TEXT_OBJECT_ATTRIBUTES.type,
@@ -18,6 +17,5 @@ exports.OBJECT_TYPES = {
     layoutGroup: constants_5.LAYOUT_GROUP_OBJECT_ATTRIBUTES.type,
     calendar: constants_1.CALENDAR_OBJECT_ATTRIBUTES.type,
     qrCode: constants_6.QR_CODE_OBJECT_ATTRIBUTES.type,
-    advancedText: constants_8.ADVANCED_TEXT_OBJECT_ATTRIBUTES.type,
 };
 exports.MAX_TEXTURE_SIZE = 20000;

package/lib/index.d.ts

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

package/lib/index.js

@@ -10,23 +10,14 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
 }));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+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);
 };
 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.IMAGE_PLACEHOLDER_OBJECT_ATTRIBUTES = exports.OBJECT_TYPES = exports.asyncGetObject = exports.getObject = exports.loadImageFromUrl = exports.loadImageFromFile = exports.lockAllObjects = exports.lockObject = exports.AdvancedText = exports.QRCode = exports.Calendar = exports.CurvedText = exports.LayoutGroup = exports.ImagePlaceholder = exports.Clipart = exports.TextInput = exports.fabric = void 0;
+exports.IMAGE_FILTER_TYPES = exports.IMAGE_PLACEHOLDER_OBJECT_ATTRIBUTES = exports.OBJECT_TYPES = exports.QRCode = exports.Calendar = exports.CurvedText = exports.LayoutGroup = exports.ImagePlaceholder = exports.Clipart = exports.TextInput = void 0;
 const TextInputObject_1 = __importDefault(require("./TextInputObject"));
 exports.TextInput = TextInputObject_1.default;
 const CurvedTextObject_1 = __importDefault(require("./CurvedTextObject"));
@@ -41,19 +32,10 @@ const CalendarObject_1 = __importDefault(require("./CalendarObject"));
 exports.Calendar = CalendarObject_1.default;
 const QRCodeObject_1 = __importDefault(require("./QRCodeObject"));
 exports.QRCode = QRCodeObject_1.default;
-const AdvancedText_1 = __importDefault(require("./AdvancedText"));
-exports.AdvancedText = AdvancedText_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; } });
-Object.defineProperty(exports, "lockAllObjects", { enumerable: true, get: function () { return utils_1.lockAllObjects; } });
-Object.defineProperty(exports, "loadImageFromFile", { enumerable: true, get: function () { return utils_1.loadImageFromFile; } });
-Object.defineProperty(exports, "loadImageFromUrl", { enumerable: true, get: function () { return utils_1.loadImageFromUrl; } });
-Object.defineProperty(exports, "getObject", { enumerable: true, get: function () { return utils_1.getObject; } });
-Object.defineProperty(exports, "asyncGetObject", { enumerable: true, get: function () { return utils_1.asyncGetObject; } });
 const constants_1 = require("./constants");
 Object.defineProperty(exports, "OBJECT_TYPES", { enumerable: true, get: function () { return constants_1.OBJECT_TYPES; } });
 const constants_2 = require("./ImagePlaceholderObject/constants");
 Object.defineProperty(exports, "IMAGE_FILTER_TYPES", { enumerable: true, get: function () { return constants_2.IMAGE_FILTER_TYPES; } });
 const constants_3 = require("./ImagePlaceholderObject/constants");
 Object.defineProperty(exports, "IMAGE_PLACEHOLDER_OBJECT_ATTRIBUTES", { enumerable: true, get: function () { return constants_3.IMAGE_PLACEHOLDER_OBJECT_ATTRIBUTES; } });
+__exportStar(require("./utils"), exports);

package/lib/utils/common.util.d.ts

@@ -1 +1,10 @@
+import { fabric } from "fabric";
 export declare const removeValueKeys: (object: any, value?: any) => any;
+export declare const getRelativePosition: (relativeObject: fabric.Object, objectToRelate: fabric.Object) => {
+    relativeLeft: number;
+    relativeTop: number;
+};
+export declare const getAbsolutePosition: (relativeLeftRatio: number, relativeTopRatio: number, objectToApply: any) => {
+    absoluteLeft: number;
+    absoluteRight: any;
+};

package/lib/utils/common.util.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.removeValueKeys = void 0;
+exports.getAbsolutePosition = exports.getRelativePosition = exports.removeValueKeys = void 0;
+const fabric_1 = require("fabric");
 const removeValueKeys = (object, value = null) => {
     const newObject = {};
     for (const key in object) {
@@ -11,3 +12,29 @@ const removeValueKeys = (object, value = null) => {
     return newObject;
 };
 exports.removeValueKeys = removeValueKeys;
+const getRelativePosition = (relativeObject, objectToRelate) => {
+    const rLeft = relativeObject.left || 0;
+    const rTop = relativeObject.top || 0;
+    const oLeft = objectToRelate.left || 0;
+    const oTop = objectToRelate.top || 0;
+    const oAngle = fabric_1.fabric.util.degreesToRadians(objectToRelate.angle || 0);
+    const relativeLeft = Math.cos(-oAngle) * (rLeft - oLeft) - Math.sin(-oAngle) * (rTop - oTop);
+    const relativeTop = Math.sin(-oAngle) * (rLeft - oLeft) + Math.cos(-oAngle) * (rTop - oTop);
+    return { relativeLeft, relativeTop };
+};
+exports.getRelativePosition = getRelativePosition;
+const getAbsolutePosition = (relativeLeftRatio, relativeTopRatio, objectToApply) => {
+    const targetX = objectToApply.left;
+    const targetY = objectToApply.top;
+    const targetAngle = fabric_1.fabric.util.degreesToRadians(objectToApply.angle);
+    const targetWidth = objectToApply.width;
+    const targetHeight = objectToApply.height;
+    const absoluteLeft = targetX +
+        Math.cos(targetAngle) * (relativeLeftRatio * targetWidth) -
+        Math.sin(targetAngle) * (relativeTopRatio * targetHeight);
+    const absoluteRight = targetY +
+        Math.sin(targetAngle) * (relativeLeftRatio * targetWidth) +
+        Math.cos(targetAngle) * (relativeTopRatio * targetHeight);
+    return { absoluteLeft, absoluteRight };
+};
+exports.getAbsolutePosition = getAbsolutePosition;

package/lib/utils/index.d.ts

@@ -24,4 +24,5 @@ export declare const getObject: (object: any, options?: {
 export declare const asyncGetObject: (object: any, options?: {
     isOriginal?: boolean;
 }) => Promise<Clipart | ImagePlaceholder | CurvedText | Calendar | QRCode | TextInput | undefined>;
-export default fabric;
+export { fabric };
+export * from "./common.util";

package/lib/utils/index.js

@@ -22,9 +22,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+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 });
-exports.asyncGetObject = exports.getObject = exports.lockAllObjects = exports.lockObject = exports.getImageFilters = exports.loadImage = exports.loadImageFromUrl = exports.loadImageFromFile = exports.isFontLoaded = exports.loadFontFromUrl = void 0;
+exports.fabric = exports.asyncGetObject = exports.getObject = exports.lockAllObjects = exports.lockObject = exports.getImageFilters = exports.loadImage = exports.loadImageFromUrl = exports.loadImageFromFile = exports.isFontLoaded = exports.loadFontFromUrl = void 0;
 const fabric_1 = require("fabric");
+Object.defineProperty(exports, "fabric", { enumerable: true, get: function () { return fabric_1.fabric; } });
 const constants_1 = require("../constants");
 const ClipartObject_1 = __importStar(require("../ClipartObject"));
 const ImagePlaceholderObject_1 = __importStar(require("../ImagePlaceholderObject"));
@@ -204,7 +208,7 @@ const asyncGetObject = async (object, options) => {
                 isOriginal: options?.isOriginal,
             });
             if (object?.image) {
-                const image = await imagePlaceHolderObject?.loadCustomizedImage?.(object?.image);
+                const image = await imagePlaceHolderObject?.loadCustomImage?.(object?.image);
                 if (image) {
                     return image;
                 }
@@ -272,4 +276,4 @@ fabric_1.fabric.Object.prototype.toObject = (function (toObject) {
         }
     };
 })(fabric_1.fabric.Object.prototype.toObject);
-exports.default = fabric_1.fabric;
+__exportStar(require("./common.util"), exports);

package/lib/utils/svg.util.d.ts

@@ -1,7 +1,4 @@
 import { fabric } from "fabric";
-export type PathType = "parabola" | "ellipse" | "half-ellipse";
-export declare const getEllipsePath: (width: number, height: number) => string;
+export declare const getEllipsePath: (rx: number, ry: number, side?: "left" | "right") => string;
 export declare const getPathLength: (path: fabric.Path) => any;
-export declare const getParabolaPath: (width: number, height: number) => string;
-export declare const getHalfEllipsePath: (width: number, height: number) => string;
-export declare const getPath: (width: number, height: number, type: PathType) => string;
+export declare const getEllipseCircumference: (a: number, b: number) => number;

package/lib/utils/svg.util.js

@@ -1,12 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getPath = exports.getHalfEllipsePath = exports.getParabolaPath = exports.getPathLength = exports.getEllipsePath = void 0;
+exports.getEllipseCircumference = exports.getPathLength = exports.getEllipsePath = void 0;
 const fabric_1 = require("fabric");
-const getEllipsePath = (width, height) => {
-    const start = `${0} ${height / 2}`;
-    const rxy = `${width / 2} ${height / 2}`;
-    const end = `${0} ${-height / 2}`;
-    return `M ${start} A ${rxy} 0 0 1 ${end} A ${rxy} 0 0 1 ${start}`;
+const getEllipsePath = (rx, ry, side = "left") => {
+    const sideFactor = side == "left" ? -1 : 1;
+    let output = `M 0,0`;
+    output += `a ${rx},${ry} 0 0,1 0,${ry * 2 * sideFactor}`;
+    output += " ";
+    output += `a ${rx},${ry} 0 0,1 0,${ry * -2 * sideFactor}`;
+    return output;
 };
 exports.getEllipsePath = getEllipsePath;
 const getPathLength = (path) => {
@@ -15,30 +17,7 @@ const getPathLength = (path) => {
     return pathLength;
 };
 exports.getPathLength = getPathLength;
-const getParabolaPath = (width, height) => {
-    const start = `-${width / 2} -${height}`;
-    const peak = `${0} -${height * 3}`;
-    const end = `${width / 2} -${height}`;
-    return `M ${start} Q ${peak} ${end}`;
+const getEllipseCircumference = (a, b) => {
+    return Math.PI * (3 * (a + b) - Math.sqrt((3 * a + b) * (a + 3 * b)));
 };
-exports.getParabolaPath = getParabolaPath;
-const getHalfEllipsePath = (width, height) => {
-    const start = `-${width / 2} ${0}`;
-    const rxy = `${width / 2} ${height}`;
-    const end = `${width / 2} ${0}`;
-    return `M ${start} A ${rxy} 0 0 1 ${end}`;
-};
-exports.getHalfEllipsePath = getHalfEllipsePath;
-const getPath = (width, height, type) => {
-    switch (type) {
-        case "ellipse":
-            return (0, exports.getEllipsePath)(width, height);
-        case "half-ellipse":
-            return (0, exports.getHalfEllipsePath)(width, height);
-        case "parabola":
-            return (0, exports.getParabolaPath)(width, height);
-        default:
-            return "";
-    }
-};
-exports.getPath = getPath;
+exports.getEllipseCircumference = getEllipseCircumference;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "customized-fabric",
-  "version": "2.0.9",
+  "version": "2.0.11",
   "description": "Customized fabric",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -22,4 +22,4 @@
     "@types/fabric": "^5.3.3",
     "typescript": "^5.2.2"
   }
-}
+}

package/lib/AdvancedText/constants.d.ts

@@ -1,11 +0,0 @@
-export declare const ADVANCED_TEXT_OBJECT_ATTRIBUTES: {
-    name: string;
-    type: string;
-    maxFontSize: number;
-    stroke: {
-        stroke: string;
-        strokeDashArray: number[];
-        strokeWidth: number;
-    };
-};
-export declare const PARENT_ATTRIBUTES: string[];

package/lib/AdvancedText/constants.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PARENT_ATTRIBUTES = exports.ADVANCED_TEXT_OBJECT_ATTRIBUTES = void 0;
-exports.ADVANCED_TEXT_OBJECT_ATTRIBUTES = {
-    name: "Advanced text",
-    type: "ADVANCED_TEXT",
-    maxFontSize: 200,
-    stroke: {
-        stroke: "#333",
-        strokeDashArray: [5, 5],
-        strokeWidth: 1,
-    },
-};
-exports.PARENT_ATTRIBUTES = ["top", "left", "width", "height", "angle"];

package/lib/AdvancedText/index.d.ts

@@ -1,5 +0,0 @@
-import { fabric } from "fabric";
-import { IAdvancedTextOptions } from "./interfaces";
-export default class AdvancedText extends fabric.Group {
-    constructor(options?: IAdvancedTextOptions);
-}

package/lib/AdvancedText/index.js

@@ -1,198 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const fabric_1 = require("fabric");
-const constants_1 = require("./constants");
-const utils_1 = require("../utils");
-const objectId_1 = require("../utils/objectId");
-const svg_util_1 = require("../utils/svg.util");
-const common_util_1 = require("../utils/common.util");
-const AdvancedTextClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
-    initialize: function (options) {
-        let { 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.ADVANCED_TEXT_OBJECT_ATTRIBUTES.stroke,
-        });
-        text = (0, common_util_1.removeValueKeys)(text);
-        const { prefix = "", infix = "", suffix = "", isAllCapital } = text ?? {};
-        const fullText = prefix + infix + suffix;
-        this.textObject = new fabric_1.fabric.IText("", {
-            originX: "center",
-            originY: "center",
-            textAlign: "center",
-            objectCaching: false,
-            fontFamily: "",
-            paintFirst: "stroke",
-            lengthRatio: 0.4,
-            positionAngle: 0,
-            maxFontSize: 200,
-            pathType: "parabola",
-            ...text,
-            text: isAllCapital ? fullText.toUpperCase() : fullText,
-        });
-        const group = new fabric_1.fabric.Group([this.rectObject, this.textObject]);
-        this.set({
-            ...group,
-            _id: new objectId_1.ObjectId().toString(),
-            name: constants_1.ADVANCED_TEXT_OBJECT_ATTRIBUTES.name,
-            type: constants_1.ADVANCED_TEXT_OBJECT_ATTRIBUTES.type,
-            ...rest,
-            layerId: options?.personalizeId ?? options?.layerId,
-            objectCaching: false,
-            pathVisible: !(options?.isOriginal || options?.hideStroke),
-        });
-        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.calculateTextPath(width, height);
-            this.autoChangeFontSize();
-            this.canvas?.renderAll?.();
-        });
-        if (options?.isOriginal) {
-            this.rectObject?.set({ strokeWidth: 0 });
-        }
-        else {
-            if (options?.hideStroke) {
-                this.rectObject?.set({ strokeWidth: 0 });
-            }
-            this.setFontFamily(text?.fontFamily ?? "", options?.fontUrl);
-        }
-        this.fire("scaling");
-    },
-    autoChangeFontSize: function (changeSpeed = 0.1) {
-        let { fontSize, maxFontSize, pathLength } = this.textObject;
-        fontSize = Number(fontSize || 0);
-        maxFontSize = Number(maxFontSize || 200);
-        const length = pathLength - 10;
-        let maxLineWidth = Math.max(...this.textObject.__lineWidths);
-        const ratio = length / maxLineWidth;
-        fontSize = Math.min(maxFontSize, fontSize * ratio);
-        this.textObject.set({ fontSize });
-        this.canvas?.renderAll?.();
-        maxLineWidth = Math.max(...this.textObject.__lineWidths);
-        while (length <= maxLineWidth) {
-            fontSize -= changeSpeed;
-            this.textObject.set({ fontSize });
-            this.canvas?.renderAll?.();
-            maxLineWidth = Math.max(...this.textObject.__lineWidths);
-        }
-        while (maxFontSize > fontSize.toFixed(1) && length > maxLineWidth) {
-            fontSize += changeSpeed;
-            this.textObject.set({ fontSize });
-            this.canvas?.renderAll?.();
-            maxLineWidth = Math.max(...this.textObject.__lineWidths);
-        }
-    },
-    setText: function (text) {
-        this.textObject.set({
-            text,
-        });
-        this.fire("scaling");
-    },
-    setPrefix: function (text) {
-        this.textObject.set({
-            prefix: text,
-        });
-        this.getText();
-    },
-    setInfix: function (text) {
-        this.textObject.set({
-            infix: text,
-        });
-        this.getText();
-    },
-    setSuffix: function (text) {
-        this.textObject.set({
-            suffix: text,
-        });
-        this.getText();
-    },
-    getText: function () {
-        const { prefix = "", infix = "", suffix = "", isAllCapital, } = this.textObject;
-        const text = prefix + infix + suffix;
-        this.setText(infix?.length > 0 ? (isAllCapital ? text.toUpperCase() : text) : "");
-    },
-    setMaxFontSize: function (fontSize) {
-        this.textObject.set({
-            fontSize,
-            maxFontSize: fontSize,
-        });
-        this.fire("scaling");
-    },
-    setFontFamily: async function (fontName, fontUrl) {
-        if (!(0, utils_1.isFontLoaded)(fontName)) {
-            await (0, utils_1.loadFontFromUrl)(fontUrl ?? "", fontName);
-        }
-        this.textObject.set({ fontFamily: fontName });
-        this.fire("scaling");
-    },
-    setSizes: function (options) {
-        const { width, height } = options;
-        if (width) {
-            this.set({ width });
-        }
-        if (height) {
-            this.set({ height });
-        }
-        this.fire("scaling");
-    },
-    setTextAttributes: function (options) {
-        this.textObject.set(options);
-        this.fire("scaling");
-    },
-    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);
-    },
-    calculateTextPath: function (width, height) {
-        const { pathSide, pathType = "parabola" } = this.textObject;
-        const pathSvg = (0, svg_util_1.getPath)(width, height, pathType);
-        const sideFactor = pathSide == "left" ? -1 : 1;
-        const pathProperties = {
-            top: pathType == "parabola" ? (sideFactor * height) / 4 : 0,
-            angle: (pathSide == "left" ? 0 : 1) * 180,
-        };
-        const path = new fabric_1.fabric.Path(pathSvg, {
-            fill: undefined,
-            stroke: "black",
-            objectCaching: false,
-            originX: "center",
-            originY: "center",
-            visible: this.pathVisible,
-        });
-        this.pathObject = path;
-        const pathInfo = fabric_1.fabric.util?.getPathSegmentsInfo?.(path.path);
-        const pathLength = pathInfo.pop().length;
-        this.textObject.set({
-            ...pathProperties,
-            path,
-            pathLength,
-        });
-        this?.canvas?.renderAll();
-    },
-});
-class AdvancedText extends fabric_1.fabric.Group {
-    constructor(options) {
-        super();
-        return new AdvancedTextClass(options);
-    }
-}
-exports.default = AdvancedText;

package/lib/AdvancedText/interfaces.d.ts

@@ -1,29 +0,0 @@
-import { ObjectId } from "../utils/objectId";
-export interface IAdvancedTextOptions extends fabric.IObjectOptions {
-    _id?: ObjectId;
-    personalizeId?: string;
-    layerId: number;
-    text: {
-        fontSize?: number;
-        fill?: string;
-        width?: number;
-        height?: number;
-        textAlign?: string;
-        fontWeight?: string;
-        text?: string;
-        fontFamily?: string;
-        maxFontSize: number;
-        stroke?: string;
-        strokeWidth?: number;
-        prefix?: string;
-        infix?: string;
-        suffix?: string;
-        lengthRatio?: number;
-        positionAngle?: number;
-        isAllCapital?: boolean;
-    };
-    fontUrl?: string;
-    isOriginal?: boolean;
-    isAdditional?: boolean;
-    hideStroke?: boolean;
-}

package/lib/AdvancedText/interfaces.js

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