customized-fabric 2.0.2 → 2.0.4

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

@@ -27,6 +27,7 @@ const CurvedTextClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group,
             objectCaching: false,
             fontFamily: "",
             paintFirst: "stroke",
+            curvedLengthRatio: 0.3,
             ...text,
             text: isAllCapital ? fullText.toUpperCase() : fullText,
         });
@@ -67,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,
@@ -79,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,
@@ -145,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);
     },
@@ -212,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.2",
+  "version": "2.0.4",
   "description": "Customized fabric",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/lib/GroupLayoutObject/constants.d.ts

@@ -1,4 +0,0 @@
-export declare const GROUP_LAYOUT_OBJECT_ATTRIBUTES: {
-    name: string;
-    type: string;
-};

package/lib/GroupLayoutObject/constants.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GROUP_LAYOUT_OBJECT_ATTRIBUTES = void 0;
-exports.GROUP_LAYOUT_OBJECT_ATTRIBUTES = {
-    name: "Group layout",
-    type: "GROUP_LAYOUT",
-};

package/lib/GroupLayoutObject/index.d.ts

@@ -1,19 +0,0 @@
-import { fabric } from "fabric";
-import { ObjectId } from "../utils/objectId";
-import { IGroupLayoutOptions } from "./interfaces";
-export declare const toGroupLayoutObject: (groupLayoutObject: GroupLayout) => {
-    _id: ObjectId | undefined;
-    id: ObjectId | undefined;
-    personalizeId: number | undefined;
-    layerId: number | undefined;
-    name: string | undefined;
-    locked: boolean | undefined;
-    isAdditional: boolean | undefined;
-};
-export default class GroupLayout extends fabric.ActiveSelection {
-    _id?: ObjectId;
-    layerId?: number;
-    locked?: boolean;
-    isAdditional?: boolean;
-    constructor(options?: IGroupLayoutOptions);
-}

package/lib/GroupLayoutObject/index.js

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.toGroupLayoutObject = void 0;
-const fabric_1 = require("fabric");
-const GroupLayoutClass = fabric_1.fabric.util.createClass(fabric_1.fabric.ActiveSelection, {
-    initialize: async function (options) { },
-});
-const toGroupLayoutObject = (groupLayoutObject) => {
-    return {
-        _id: groupLayoutObject._id,
-        id: groupLayoutObject._id,
-        personalizeId: groupLayoutObject.layerId,
-        layerId: groupLayoutObject.layerId,
-        name: groupLayoutObject.name,
-        locked: groupLayoutObject.locked,
-        isAdditional: groupLayoutObject?.isAdditional,
-    };
-};
-exports.toGroupLayoutObject = toGroupLayoutObject;
-class GroupLayout extends fabric_1.fabric.ActiveSelection {
-    constructor(options) {
-        super();
-        return new GroupLayoutClass(options);
-    }
-}
-exports.default = GroupLayout;

package/lib/GroupLayoutObject/interfaces.d.ts

@@ -1,3 +0,0 @@
-export interface IGroupLayoutOptions extends fabric.IObjectOptions {
-    objects?: fabric.Object[];
-}

package/lib/GroupLayoutObject/interfaces.js

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

package/lib/constants/index.d.ts

@@ -1,6 +0,0 @@
-export declare const OBJECT_TYPES: {
-    textInput: string;
-    clipart: string;
-    imagePlaceHolder: string;
-    activeSelection: string;
-};

package/lib/constants/index.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.OBJECT_TYPES = void 0;
-const constants_1 = require("../ClipartObject/constants");
-const constants_2 = require("../ImagePlaceholderObject/constants");
-const constants_3 = require("../TextInputObject/constants");
-exports.OBJECT_TYPES = {
-    textInput: constants_3.TEXT_INPUT_OBJECT_ATTRIBUTES.type,
-    clipart: constants_1.CLIPART_OBJECT_ATTRIBUTES.type,
-    imagePlaceHolder: constants_2.IMAGE_PLACEHOLDER_OBJECT_ATTRIBUTES.type,
-    activeSelection: "activeSelection",
-};