customized-fabric 2.0.1 → 2.0.3

package/lib/CurvedTextObject/index.d.ts

@@ -29,7 +29,7 @@ export declare const toCurvedTextObject: (object: CurvedText) => {
         prefix: any;
         infix: any;
         suffix: any;
-        curvedWidth: any;
+        curvedLengthRatio: any;
         pathSide: any;
         pathStartOffset: any;
         isAllCapital: any;
@@ -52,8 +52,7 @@ export default class CurvedText extends fabric.Group {
     setSuffix?: (text: string) => void;
     setMaxFontSize?: (fontSize: string) => void;
     setFontFamily?: (fontName: string, fontUrl?: string) => void;
-    setTextAttributes?: (options: fabric.ITextOptions) => void;
-    setTextWidth?: (width: number) => void;
+    setTextAttributes?: (options: any) => void;
     getTextAttribute?: (attribute: string) => any;
     getSettings?: (attribute: string) => any;
     setSizes?: (options: {

package/lib/CurvedTextObject/index.js

@@ -18,7 +18,8 @@ const CurvedTextClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group,
             objectCaching: false,
             ...constants_1.CURVED_TEXT_OBJECT_ATTRIBUTES.stroke,
         });
-        const { prefix = "", infix = "", suffix = "" } = text ?? {};
+        const { prefix = "", infix = "", suffix = "", isAllCapital } = text ?? {};
+        const fullText = prefix + infix + suffix;
         this.textObject = new fabric_1.fabric.IText("", {
             originX: "center",
             originY: "center",
@@ -26,8 +27,9 @@ const CurvedTextClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group,
             objectCaching: false,
             fontFamily: "",
             paintFirst: "stroke",
+            curvedLengthRatio: 0.3,
             ...text,
-            text: prefix + infix + suffix,
+            text: isAllCapital ? fullText.toUpperCase() : fullText,
         });
         const group = new fabric_1.fabric.Group([this.rectObject, this.textObject]);
         this.set({
@@ -66,11 +68,13 @@ const CurvedTextClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group,
         }
         this.fire("scaling");
     },
-    autoChangeFontSize: function (changeSpeed) {
-        let { curvedWidth, fontSize = 0, maxFontSize } = this.textObject;
+    autoChangeFontSize: function (changeSpeed = 0.1) {
+        let { curvedLengthRatio, fontSize = 0, maxFontSize } = this.textObject;
+        const circumference = (0, svg_util_1.getEllipseCircumference)(this.width / 2, this.height / 2);
+        const curvedLength = circumference * curvedLengthRatio;
         let maxLineWidth = Math.max(...this.textObject.__lineWidths);
         fontSize = Number(fontSize);
-        while (curvedWidth <= maxLineWidth) {
+        while (curvedLength <= maxLineWidth) {
             fontSize -= changeSpeed;
             this.textObject.set({
                 fontSize,
@@ -78,7 +82,7 @@ const CurvedTextClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group,
             this.canvas?.renderAll?.();
             maxLineWidth = Math.max(...this.textObject.__lineWidths);
         }
-        while (maxFontSize > fontSize.toFixed(1) && curvedWidth > maxLineWidth) {
+        while (maxFontSize > fontSize.toFixed(1) && curvedLength > maxLineWidth) {
             fontSize += changeSpeed;
             this.textObject.set({
                 fontSize,
@@ -144,10 +148,6 @@ const CurvedTextClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group,
         this.textObject.set(options);
         this.fire("scaling");
     },
-    setTextWidth: function (width) {
-        this.textObject.set({ curvedWidth: width });
-        this.fire("scaling");
-    },
     getTextAttribute: function (attribute) {
         return this.textObject.get(attribute);
     },
@@ -211,7 +211,7 @@ const toCurvedTextObject = (object) => {
             prefix: textObject?.prefix,
             infix: textObject?.infix,
             suffix: textObject?.suffix,
-            curvedWidth: textObject?.curvedWidth,
+            curvedLengthRatio: textObject?.curvedLengthRatio,
             pathSide: textObject?.pathSide,
             pathStartOffset: textObject?.pathStartOffset,
             isAllCapital: textObject?.isAllCapital,

package/lib/CurvedTextObject/interfaces.d.ts

@@ -18,7 +18,7 @@ export interface ICurvedTextOptions extends fabric.IGroupOptions {
         prefix?: string;
         infix?: string;
         suffix?: string;
-        curvedWidth?: number;
+        curvedLengthRatio?: number;
         isAllCapital?: boolean;
     };
     fontUrl?: string;

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

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

package/lib/utils/svg.util.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getPathLength = exports.getEllipsePath = void 0;
+exports.getEllipseCircumference = exports.getPathLength = exports.getEllipsePath = void 0;
 const fabric_1 = require("fabric");
 const getEllipsePath = (rx, ry, side = "left") => {
     const sideFactor = side == "left" ? -1 : 1;
@@ -17,3 +17,7 @@ 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)));
+};
+exports.getEllipseCircumference = getEllipseCircumference;

package/package.json

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