customized-fabric 1.9.6 → 1.9.8

package/lib/CurvedTextObject/index.js

@@ -30,7 +30,16 @@ const CurvedTextClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group,
             paintFirst: "stroke",
         });
         const group = new fabric_1.fabric.Group([this.rectObject, this.textObject]);
-        this.set(group);
+        this.set({
+            ...group,
+            _id: new objectId_1.ObjectId().toString(),
+            name: constants_1.CURVED_TEXT_OBJECT_ATTRIBUTES.name,
+            type: constants_1.CURVED_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;
@@ -43,17 +52,9 @@ const CurvedTextClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group,
             this.set(attributes);
             this.rectObject.set(attributes);
             this.calculateTextPath(width, height);
+            this.autoChangeFontSize(0.1);
             this.canvas?.renderAll?.();
         });
-        this.set({
-            _id: new objectId_1.ObjectId().toString(),
-            name: constants_1.CURVED_TEXT_OBJECT_ATTRIBUTES.name,
-            type: constants_1.CURVED_TEXT_OBJECT_ATTRIBUTES.type,
-            ...rest,
-            layerId: options?.personalizeId ?? options?.layerId,
-            objectCaching: false,
-            pathVisible: !(options?.isOriginal || options?.hideStroke),
-        });
         if (options?.isOriginal) {
             this.rectObject?.set({ strokeWidth: 0 });
         }
@@ -66,30 +67,31 @@ const CurvedTextClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group,
         this.fire("scaling");
     },
     autoChangeFontSize: function (changeSpeed) {
-        if (this.textObject.curvedWidth <= this.textObject.__lineWidths) {
-            while (this.textObject.curvedWidth <= this.textObject.__lineWidths) {
-                this.textObject.set({
-                    fontSize: this.textObject.fontSize - changeSpeed,
-                });
-                this.canvas?.renderAll?.();
-            }
+        let { curvedWidth, fontSize = 0, maxFontSize } = this.textObject;
+        let maxLineWidth = Math.max(...this.textObject.__lineWidths);
+        fontSize = Number(fontSize);
+        while (curvedWidth <= maxLineWidth) {
+            fontSize -= changeSpeed;
+            this.textObject.set({
+                fontSize,
+            });
+            this.canvas?.renderAll?.();
+            maxLineWidth = Math.max(...this.textObject.__lineWidths);
         }
-        else {
-            while (this.textObject.maxFontSize > this.textObject.fontSize &&
-                this.textObject.curvedWidth > this.textObject.__lineWidths) {
-                this.textObject.set({
-                    fontSize: this.textObject.fontSize + changeSpeed,
-                });
-                this.canvas?.renderAll?.();
-            }
+        while (maxFontSize > fontSize.toFixed(1) && curvedWidth > maxLineWidth) {
+            fontSize += changeSpeed;
+            this.textObject.set({
+                fontSize,
+            });
+            this.canvas?.renderAll?.();
+            maxLineWidth = Math.max(...this.textObject.__lineWidths);
         }
     },
     setText: function (text) {
         this.textObject.set({
             text,
         });
-        this.canvas?.renderAll?.();
-        this.autoChangeFontSize(0.1);
+        this.fire("scaling");
     },
     setPrefix: function (text) {
         this.textObject.set({
@@ -110,34 +112,23 @@ const CurvedTextClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group,
         this.getText();
     },
     getText: function () {
-        const { prefix = "", infix = "", suffix = "" } = this.textObject;
-        const isAllCapital = this.textObject.isAllCapital;
+        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,
-        });
-        this.canvas?.renderAll?.();
-        if (this.textObject.__lineWidths < this.textObject.curvedWidth) {
-        }
-        else {
-            this.autoChangeFontSize(1);
-        }
-        this.textObject.set({
             maxFontSize: fontSize,
         });
-        this.canvas?.renderAll?.();
+        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.canvas?.renderAll?.();
-        this.autoChangeFontSize(0.1);
-        this.canvas?.renderAll?.();
+        this.fire("scaling");
     },
     setSizes: function (options) {
         const { width, height } = options;
@@ -151,11 +142,11 @@ const CurvedTextClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group,
     },
     setTextAttributes: function (options) {
         this.textObject.set(options);
-        this.canvas?.renderAll?.();
+        this.fire("scaling");
     },
     setTextWidth: function (width) {
         this.textObject.set({ curvedWidth: width });
-        this.autoChangeFontSize(0.1);
+        this.fire("scaling");
     },
     getTextAttribute: function (attribute) {
         return this.textObject.get(attribute);
@@ -167,11 +158,11 @@ const CurvedTextClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group,
         return this.textObject.get(attribute);
     },
     calculateTextPath: function (width, height) {
-        const pathSide = this.textObject.pathSide;
+        const { pathSide, pathStartOffset } = 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), {
+        const path = new fabric_1.fabric.Path((0, svg_util_1.getEllipsePath)(rx, ry, pathSide), {
             fill: undefined,
             stroke: "black",
             objectCaching: false,
@@ -185,13 +176,9 @@ const CurvedTextClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group,
         this.textObject.set({
             path,
             pathLength,
+            pathStartOffset,
         });
-        const position = this.textObject.position;
-        if (position) {
-            this.textObject.set({
-                pathStartOffset: (position * pathLength) / 360,
-            });
-        }
+        this?.canvas?.renderAll();
     },
 });
 const toCurvedTextObject = (object) => {

package/lib/TextInputObject/index.js

@@ -87,6 +87,7 @@ const TextInputClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
             });
             maxLineWidth = Math.max(...this.textObject.__lineWidths);
         }
+        this.textObject.set({ width: this.width - fontSize / 4 });
     },
     setText: function (text) {
         this.textObject.set({
@@ -142,7 +143,7 @@ const TextInputClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
     },
     setTextAttributes: function (options) {
         this.textObject.set(options);
-        this.canvas?.renderAll?.();
+        this.fire("scaling");
     },
     getTextAttribute: function (attribute) {
         return this.textObject.get(attribute);

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

@@ -1,3 +1,3 @@
 import { fabric } from "fabric";
-export declare const getEllipsePath: (rx: number, ry: number) => string;
-export declare const getPathLenght: (path: fabric.Path) => any;
+export declare const getEllipsePath: (rx: number, ry: number, side?: "left" | "right") => string;
+export declare const getPathLength: (path: fabric.Path) => any;

package/lib/utils/svg.util.js

@@ -1,18 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getPathLenght = exports.getEllipsePath = void 0;
+exports.getPathLength = exports.getEllipsePath = void 0;
 const fabric_1 = require("fabric");
-const getEllipsePath = (rx, ry) => {
+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}`;
+    output += `a ${rx},${ry} 0 0,1 0,${ry * 2 * sideFactor}`;
     output += " ";
-    output += `a ${rx},${ry} 0 0,1 0,${ry * 2}`;
+    output += `a ${rx},${ry} 0 0,1 0,${ry * -2 * sideFactor}`;
     return output;
 };
 exports.getEllipsePath = getEllipsePath;
-const getPathLenght = (path) => {
+const getPathLength = (path) => {
     const pathInfo = fabric_1.fabric.util?.getPathSegmentsInfo?.(path.path);
     const pathLength = pathInfo?.[(pathInfo?.length ?? 0) - 1]?.length;
     return pathLength;
 };
-exports.getPathLenght = getPathLenght;
+exports.getPathLength = getPathLength;

package/package.json

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