customized-fabric 2.0.20 → 2.0.22

package/lib/CurvedTextObject/index.d.ts

@@ -33,6 +33,8 @@ export declare const toCurvedTextObject: (object: CurvedText) => {
         pathSide: any;
         positionAngle: any;
         isAllCapital: any;
+        startAngle: any;
+        endAngle: any;
     };
 };
 export default class CurvedText extends fabric.Group {

package/lib/CurvedTextObject/index.js

@@ -5,8 +5,8 @@ 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 utils_2 = require("./utils");
 const CurvedTextClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
     initialize: function (options) {
         let { text, ...rest } = options ?? {};
@@ -33,10 +33,21 @@ const CurvedTextClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group,
             positionAngle: 0,
             maxFontSize: 200,
             strokeLineJoin: "round",
+            startAngle: 45,
+            endAngle: 135,
             ...text,
             text: isAllCapital ? fullText.toUpperCase() : fullText,
         });
-        const group = new fabric_1.fabric.Group([this.rectObject, this.textObject]);
+        this.ellipseObject = new fabric_1.fabric.Ellipse({
+            stroke: "black",
+            strokeDashArray: [10, 10],
+            fill: "transparent",
+        });
+        const group = new fabric_1.fabric.Group([
+            this.rectObject,
+            this.ellipseObject,
+            this.textObject,
+        ]);
         this.set({
             ...group,
             _id: new objectId_1.ObjectId().toString(),
@@ -48,54 +59,70 @@ const CurvedTextClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group,
             pathVisible: !(options?.isOriginal || options?.hideStroke),
         });
         this.on("scaling", () => {
-            let width = this.width * this.scaleX;
-            let height = this.height * this.scaleY;
+            const { width, height, scaleX, scaleY } = this;
             const attributes = {
                 scaleX: 1,
                 scaleY: 1,
-                width,
-                height,
+                width: width * scaleX,
+                height: height * scaleY,
             };
+            const { fontSize, maxFontSize, fontSizeScalable, strokeWidth } = this.textObject;
+            if (fontSizeScalable) {
+                // font scaling
+                const fontSizeRatio = maxFontSize / Math.min(width, height);
+                const newMaxFontSize = fontSizeRatio * Math.min(attributes.width, attributes.height);
+                // stroke width scaling
+                const strokeWidthRatio = strokeWidth / Math.min(width, height);
+                const newStrokeWidth = strokeWidthRatio * Math.min(attributes.width, attributes.height);
+                this.textObject.set({
+                    maxFontSize: newMaxFontSize,
+                    fontSize: Math.min(fontSize, newMaxFontSize),
+                    strokeWidth: newStrokeWidth,
+                });
+            }
             this.set(attributes);
             this.rectObject.set(attributes);
-            this.calculateTextPath(width, height);
+            this.calculateTextPath();
             this.autoChangeFontSize(0.1);
+            this.updateEllipsePath();
             this.canvas?.renderAll?.();
         });
         if (options?.isOriginal) {
-            this.rectObject?.set({ strokeWidth: 0 });
+            this.rectObject?.set({ visible: false });
+            this.ellipseObject.set({ visible: false });
         }
         else {
             if (options?.hideStroke) {
-                this.rectObject?.set({ strokeWidth: 0 });
+                this.rectObject?.set({ visible: false });
+                this.ellipseObject.set({ visible: false });
             }
             this.setFontFamily(text?.fontFamily ?? "", options?.fontUrl);
         }
         this.fire("scaling");
     },
-    autoChangeFontSize: function (changeSpeed = 0.1) {
-        let { fontSize, lengthRatio, maxFontSize } = this.textObject;
-        fontSize = Number(fontSize || 0);
-        lengthRatio = Number(lengthRatio || 0.4);
-        maxFontSize = Number(maxFontSize || 200);
-        const length = (0, svg_util_1.getEllipseCircumference)(this.width / 2, this.height / 2) * lengthRatio;
-        let 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);
+    autoChangeFontSize: function (deltaFontSize = 0.1) {
+        const textPath = this.textObject.path;
+        if (!textPath)
+            return;
+        const pathLength = textPath.segmentsInfo?.at(-1)?.length || 0;
+        let low = 0;
+        let high = this.textObject.maxFontSize;
+        let bestFit = this.textObject.fontSize;
+        while (high - low > deltaFontSize) {
+            const mid = (low + high) / 2;
+            this.textObject.set({ fontSize: mid });
+            this.canvas?.renderAll();
+            const textWidth = Math.max(...this.textObject.__lineWidths);
+            if (textWidth <= pathLength) {
+                bestFit = mid;
+                low = mid;
+            }
+            else {
+                high = mid;
+            }
         }
+        this.textObject.set({ fontSize: bestFit });
+        this.canvas?.renderAll();
     },
     setText: function (text) {
         this.textObject.set({
@@ -163,30 +190,34 @@ const CurvedTextClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group,
         }
         return this.textObject.get(attribute);
     },
-    calculateTextPath: function (width, height) {
-        let { pathSide, positionAngle } = this.textObject;
-        positionAngle = Number(positionAngle || 0);
-        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,
-            originX: "center",
-            originY: "center",
-            visible: this.pathVisible,
+    calculateTextPath: function () {
+        const { width: layerWidth, height: layerHeight } = this;
+        const rx = layerWidth / 2;
+        const ry = layerHeight / 2;
+        const { startAngle, endAngle, pathSide } = this.textObject;
+        const pathString = (0, utils_2.ellipseArcPath)(rx, ry, startAngle, endAngle, pathSide === "left" ? false : true);
+        this.textObject.set({
+            path: new fabric_1.fabric.Path(pathString, {
+                stroke: "red",
+                strokeWidth: 4,
+                fill: "transparent",
+                visible: this.pathVisible,
+            }),
         });
-        this.pathObject = path;
-        const pathInfo = fabric_1.fabric.util?.getPathSegmentsInfo?.(path.path);
-        const pathLength = pathInfo?.[(pathInfo?.length ?? 0) - 1]?.length;
-        const pathStartOffset = ((positionAngle % 360) * pathLength) / 360;
+        this.canvas?.renderAll();
+    },
+    updateEllipsePath() {
+        const { width: layerWidth, height: layerHeight } = this;
+        const rx = layerWidth / 2;
+        const ry = layerHeight / 2;
+        const { startAngle, endAngle, pathSide } = this.textObject;
+        const { x, y } = (0, utils_2.getEllipseArcCenterPoint)(rx, ry, startAngle, endAngle);
         this.textObject.set({
-            path,
-            pathLength,
-            pathStartOffset,
+            left: pathSide === "left" ? x : -x,
+            top: pathSide === "left" ? y : -y,
         });
-        this?.canvas?.renderAll();
+        this.ellipseObject.set({ rx, ry, top: -ry, left: -rx });
+        this.canvas?.requestRenderAll();
     },
 });
 const toCurvedTextObject = (object) => {
@@ -223,6 +254,8 @@ const toCurvedTextObject = (object) => {
             pathSide: textObject?.pathSide,
             positionAngle: textObject?.positionAngle,
             isAllCapital: textObject?.isAllCapital,
+            startAngle: textObject?.startAngle,
+            endAngle: textObject?.endAngle,
         },
     };
 };

package/lib/CurvedTextObject/utils.d.ts

@@ -0,0 +1,5 @@
+export declare const ellipseArcPath: (rx: number, ry: number, startAngle: number, endAngle: number, flip?: boolean) => string;
+export declare const getEllipseArcCenterPoint: (rx: number, ry: number, a: number, b: number) => {
+    x: number;
+    y: number;
+};

package/lib/CurvedTextObject/utils.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getEllipseArcCenterPoint = exports.ellipseArcPath = void 0;
+const degreeToRad = (deg) => (deg * Math.PI) / 180;
+const ellipseArcPath = (rx, ry, startAngle, endAngle, flip = false) => {
+    if (flip) {
+        startAngle = (startAngle + 180) % 360;
+        endAngle = (endAngle + 180) % 360;
+    }
+    const x1 = -rx * Math.cos(degreeToRad(startAngle));
+    const y1 = ry * Math.sin(degreeToRad(startAngle));
+    const x2 = -rx * Math.cos(degreeToRad(endAngle));
+    const y2 = ry * Math.sin(degreeToRad(endAngle));
+    const angleDiff = (endAngle - startAngle + 360) % 360;
+    const largeArcFlag = angleDiff > 180 ? 1 : 0;
+    const sweepFlag = 1;
+    return `M ${x1} ${y1} A ${rx} ${ry} 0 ${largeArcFlag} ${sweepFlag} ${x2} ${y2}`;
+};
+exports.ellipseArcPath = ellipseArcPath;
+const twoPi = 2 * Math.PI;
+const normalize = (angle) => ((angle % twoPi) + twoPi) % twoPi;
+function isAngleInArc(theta, a, b) {
+    theta = normalize(theta);
+    a = normalize(a);
+    b = normalize(b);
+    if (a < b)
+        return a <= theta && theta <= b;
+    return a <= theta || theta <= b;
+}
+const getEllipseArcCenterPoint = (rx, ry, a, b) => {
+    a = degreeToRad(a);
+    b = degreeToRad(b);
+    const criticalAngles = [0, Math.PI / 2, Math.PI, (3 * Math.PI) / 2];
+    const points = [
+        [rx * Math.cos(a), -ry * Math.sin(a)],
+        [rx * Math.cos(b), -ry * Math.sin(b)],
+    ];
+    for (const theta of criticalAngles) {
+        if (isAngleInArc(theta, a, b)) {
+            points.push([rx * Math.cos(theta), -ry * Math.sin(theta)]);
+        }
+    }
+    const xs = points.map((p) => p[0]);
+    const ys = points.map((p) => p[1]);
+    const minX = Math.min(...xs);
+    const maxX = Math.max(...xs);
+    const minY = Math.min(...ys);
+    const maxY = Math.max(...ys);
+    return {
+        x: (minX + maxX) / 2,
+        y: (minY + maxY) / 2,
+    };
+};
+exports.getEllipseArcCenterPoint = getEllipseArcCenterPoint;

package/package.json

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