customized-fabric 2.0.7 → 2.0.9

package/lib/AdvancedText/constants.d.ts

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,14 @@
+"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

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

package/lib/AdvancedText/index.js

@@ -0,0 +1,198 @@
+"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

@@ -0,0 +1,29 @@
+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

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

package/lib/CurvedTextObject/index.js

@@ -6,9 +6,10 @@ 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 CurvedTextClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
     initialize: function (options) {
-        const { text, ...rest } = options ?? {};
+        let { text, ...rest } = options ?? {};
         this.rectObject = new fabric_1.fabric.Rect({
             width: options?.width,
             height: options?.height,
@@ -18,6 +19,7 @@ const CurvedTextClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group,
             objectCaching: false,
             ...constants_1.CURVED_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("", {
@@ -27,8 +29,9 @@ const CurvedTextClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group,
             objectCaching: false,
             fontFamily: "",
             paintFirst: "stroke",
-            lengthRatio: 0.3,
+            lengthRatio: 0.4,
             positionAngle: 0,
+            maxFontSize: 200,
             ...text,
             text: isAllCapital ? fullText.toUpperCase() : fullText,
         });
@@ -54,8 +57,8 @@ const CurvedTextClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group,
             };
             this.set(attributes);
             this.rectObject.set(attributes);
-            this.autoChangeFontSize(0.1);
             this.calculateTextPath(width, height);
+            this.autoChangeFontSize(0.1);
             this.canvas?.renderAll?.();
         });
         if (options?.isOriginal) {
@@ -70,25 +73,26 @@ const CurvedTextClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group,
         this.fire("scaling");
     },
     autoChangeFontSize: function (changeSpeed = 0.1) {
-        let { fontSize = 0, lengthRatio = 0.3, maxFontSize } = this.textObject;
-        fontSize = Number(fontSize);
-        lengthRatio = Number(lengthRatio);
-        maxFontSize = Number(maxFontSize);
-        const length = (0, svg_util_1.getEllipseCircumference)(this.width / 2, this.height / 2) * lengthRatio;
+        let { fontSize, lengthRatio, maxFontSize, pathLength } = this.textObject;
+        fontSize = Number(fontSize || 0);
+        lengthRatio = Number(lengthRatio || 0.4);
+        maxFontSize = Number(maxFontSize || 200);
+        const length = pathLength * 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);
         }
@@ -160,11 +164,9 @@ const CurvedTextClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group,
         return this.textObject.get(attribute);
     },
     calculateTextPath: function (width, height) {
-        const { pathSide, positionAngle } = this.textObject;
-        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), {
+        let { pathSide, positionAngle } = this.textObject;
+        positionAngle = Number(positionAngle || 0);
+        const path = new fabric_1.fabric.Path((0, svg_util_1.getEllipsePath)(width, height), {
             fill: undefined,
             stroke: "black",
             objectCaching: false,
@@ -174,12 +176,13 @@ 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?.[(pathInfo?.length ?? 0) - 1]?.length;
+        const pathLength = pathInfo.pop().length;
         const pathStartOffset = ((positionAngle % 360) * pathLength) / 360;
         this.textObject.set({
             path,
             pathLength,
             pathStartOffset,
+            angle: (pathSide == "left" ? 0 : 1) * 180,
         });
         this?.canvas?.renderAll();
     },

package/lib/constants.d.ts

@@ -7,5 +7,6 @@ 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,6 +8,7 @@ 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,
@@ -17,5 +18,6 @@ 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,8 +5,9 @@ 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, lockObject, lockAllObjects, loadImageFromFile, loadImageFromUrl, getObject, asyncGetObject, OBJECT_TYPES, IMAGE_PLACEHOLDER_OBJECT_ATTRIBUTES, IMAGE_FILTER_TYPES, };
+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, };

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.IMAGE_PLACEHOLDER_OBJECT_ATTRIBUTES = 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;
+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;
 const TextInputObject_1 = __importDefault(require("./TextInputObject"));
 exports.TextInput = TextInputObject_1.default;
 const CurvedTextObject_1 = __importDefault(require("./CurvedTextObject"));
@@ -41,6 +41,8 @@ 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; } });

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

@@ -0,0 +1 @@
+export declare const removeValueKeys: (object: any, value?: any) => any;

package/lib/utils/common.util.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.removeValueKeys = void 0;
+const removeValueKeys = (object, value = null) => {
+    const newObject = {};
+    for (const key in object) {
+        if (!(object[key] === null)) {
+            newObject[key] = object[key];
+        }
+    }
+    return newObject;
+};
+exports.removeValueKeys = removeValueKeys;

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

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

package/lib/utils/svg.util.js

@@ -1,14 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getEllipseCircumference = exports.getPathLength = exports.getEllipsePath = void 0;
+exports.getPath = exports.getHalfEllipsePath = exports.getParabolaPath = exports.getPathLength = exports.getEllipsePath = void 0;
 const fabric_1 = require("fabric");
-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;
+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}`;
 };
 exports.getEllipsePath = getEllipsePath;
 const getPathLength = (path) => {
@@ -17,7 +15,30 @@ const getPathLength = (path) => {
     return pathLength;
 };
 exports.getPathLength = getPathLength;
-const getEllipseCircumference = (a, b) => {
-    return Math.PI * (3 * (a + b) - Math.sqrt((3 * a + b) * (a + 3 * b)));
+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}`;
 };
-exports.getEllipseCircumference = getEllipseCircumference;
+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;

package/package.json

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