customized-fabric 2.0.23 → 2.0.24

package/lib/CurvedTextObject/index.d.ts

@@ -33,8 +33,7 @@ export declare const toCurvedTextObject: (object: CurvedText) => {
         pathSide: any;
         positionAngle: any;
         isAllCapital: any;
-        startAngle: any;
-        endAngle: any;
+        globalCompositeOperation: string | undefined;
     };
 };
 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,21 +33,10 @@ 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,
         });
-        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,
-        ]);
+        const group = new fabric_1.fabric.Group([this.rectObject, this.textObject]);
         this.set({
             ...group,
             _id: new objectId_1.ObjectId().toString(),
@@ -82,47 +71,44 @@ const CurvedTextClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group,
             }
             this.set(attributes);
             this.rectObject.set(attributes);
-            this.calculateTextPath();
+            this.calculateTextPath(width, height);
             this.autoChangeFontSize(0.1);
-            this.updateEllipsePath();
             this.canvas?.renderAll?.();
         });
         if (options?.isOriginal) {
-            this.rectObject?.set({ visible: false });
-            this.ellipseObject.set({ visible: false });
+            this.rectObject?.set({ strokeWidth: 0 });
         }
         else {
             if (options?.hideStroke) {
-                this.rectObject?.set({ visible: false });
-                this.ellipseObject.set({ visible: false });
+                this.rectObject?.set({ strokeWidth: 0 });
             }
             this.setFontFamily(text?.fontFamily ?? "", options?.fontUrl);
         }
         this.fire("scaling");
     },
-    autoChangeFontSize: function (deltaFontSize = 0.1) {
-        const textPath = this.textObject.path;
-        if (!textPath)
-            return;
-        const pathLength = Number(textPath.segmentsInfo?.at(-1)?.length || 0);
-        let low = 0;
-        let high = Number(this.textObject.maxFontSize);
-        let bestFit = Number(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;
-            }
+    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);
         }
-        this.textObject.set({ fontSize: bestFit });
-        this.canvas?.renderAll();
     },
     setText: function (text) {
         this.textObject.set({
@@ -190,34 +176,30 @@ const CurvedTextClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group,
         }
         return this.textObject.get(attribute);
     },
-    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,
-            }),
+    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,
         });
-        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.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.textObject.set({
-            left: pathSide === "left" ? x : -x,
-            top: pathSide === "left" ? y : -y,
+            path,
+            pathLength,
+            pathStartOffset,
         });
-        this.ellipseObject.set({ rx, ry, top: -ry, left: -rx });
-        this.canvas?.requestRenderAll();
+        this?.canvas?.renderAll();
     },
 });
 const toCurvedTextObject = (object) => {
@@ -254,8 +236,7 @@ const toCurvedTextObject = (object) => {
             pathSide: textObject?.pathSide,
             positionAngle: textObject?.positionAngle,
             isAllCapital: textObject?.isAllCapital,
-            startAngle: textObject?.startAngle,
-            endAngle: textObject?.endAngle,
+            globalCompositeOperation: textObject?.globalCompositeOperation,
         },
     };
 };

package/lib/TextInputObject/index.d.ts

@@ -32,6 +32,7 @@ export declare const toTextInputObject: (object: TextInput) => {
         isAllCapital: any;
         lineHeight: number | undefined;
         charSpacing: number | undefined;
+        globalCompositeOperation: string | undefined;
     };
 };
 export default class TextInput extends fabric.Group {

package/lib/TextInputObject/index.js

@@ -202,6 +202,7 @@ const toTextInputObject = (object) => {
             isAllCapital: textObject?.isAllCapital,
             lineHeight: textObject?.lineHeight,
             charSpacing: textObject?.charSpacing,
+            globalCompositeOperation: textObject?.globalCompositeOperation,
         },
     };
 };

package/package.json

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