customized-fabric 1.5.0 → 1.5.2

package/lib/CurvedTextObject/constants.d.ts

@@ -0,0 +1,11 @@
+export declare const CURVED_TEXT_OBJECT_ATTRIBUTES: {
+    name: string;
+    type: string;
+    maxFontSize: number;
+    stroke: {
+        stroke: string;
+        strokeDashArray: number[];
+        strokeWidth: number;
+    };
+};
+export declare const PARENT_ATTRIBUTES: string[];

package/lib/CurvedTextObject/constants.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PARENT_ATTRIBUTES = exports.CURVED_TEXT_OBJECT_ATTRIBUTES = void 0;
+exports.CURVED_TEXT_OBJECT_ATTRIBUTES = {
+    name: "Curved text",
+    type: "CURVED_TEXT",
+    maxFontSize: 200,
+    stroke: {
+        stroke: "#000000",
+        strokeDashArray: [5, 5],
+        strokeWidth: 2,
+    },
+};
+exports.PARENT_ATTRIBUTES = ["top", "left", "width", "height", "angle"];

package/lib/CurvedTextObject/index.d.ts

@@ -0,0 +1,58 @@
+import { fabric } from "fabric";
+import { ICurvedTextOptions } from "./interfaces";
+import { ObjectId } from "../utils/objectId";
+export declare const toCurvedTextObject: (object: CurvedText) => {
+    _id: ObjectId | undefined;
+    id: ObjectId | undefined;
+    personalizeId: number | undefined;
+    layerId: number | undefined;
+    name: string | undefined;
+    locked: boolean | undefined;
+    fontId: number | undefined;
+    fontCategoryId: string | undefined;
+    fontUrl: string | undefined;
+    isAdditional: boolean | undefined;
+    text: {
+        fontWeight: string | number | undefined;
+        fontSize: number | undefined;
+        textAlign: string | undefined;
+        text: string | undefined;
+        fill: string | fabric.Gradient | fabric.Pattern | undefined;
+        width: number | undefined;
+        height: number | undefined;
+        fontFamily: string | undefined;
+        maxFontSize: any;
+        stroke: string | undefined;
+        strokeWidth: number | undefined;
+        prefix: any;
+        infix: any;
+        suffix: any;
+        curvedWidth: any;
+        pathSide: any;
+        pathStartOffset: any;
+    };
+};
+export default class CurvedText extends fabric.Group {
+    _id?: ObjectId;
+    layerId?: number;
+    locked?: boolean;
+    textObject?: fabric.IText;
+    fontId?: number;
+    fontCategoryId?: string;
+    fontUrl?: string;
+    isAdditional?: boolean;
+    setText?: (text: string) => void;
+    setPrefix?: (text: string) => void;
+    setInfix?: (text: string) => void;
+    setSuffix?: (text: string) => void;
+    setMaxFontSize?: (fontSize: string) => void;
+    setFontFamily?: (fontName: string, fontUrl?: string) => void;
+    setTextAttributes?: (options: fabric.ITextOptions) => void;
+    getTextAttribute?: (attribute: string) => any;
+    getSettings?: (attribute: string) => any;
+    setSizes?: (options: {
+        width?: number;
+        height?: number;
+    }) => void;
+    constructor(options?: ICurvedTextOptions);
+}

package/lib/CurvedTextObject/index.js

@@ -0,0 +1,225 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toCurvedTextObject = void 0;
+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 CurvedTextClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
+    initialize: function (options) {
+        const { text, ...rest } = options ?? {};
+        this.rectObject = new fabric_1.fabric.Rect({
+            width: options?.width,
+            height: options?.height,
+            fill: undefined,
+            originX: "center",
+            originY: "center",
+            objectCaching: false,
+            ...constants_1.CURVED_TEXT_OBJECT_ATTRIBUTES.stroke,
+        });
+        this.textObject = new fabric_1.fabric.IText("", {
+            originX: "center",
+            originY: "center",
+            textAlign: "center",
+            objectCaching: false,
+            ...text,
+        });
+        const group = new fabric_1.fabric.Group([this.rectObject, this.textObject]);
+        this.set(group);
+        this.on("scaling", () => {
+            let width = this.width * this.scaleX;
+            let height = this.height * this.scaleY;
+            const attributes = {
+                scaleX: 1,
+                scaleY: 1,
+                width,
+                height,
+            };
+            this.set(attributes);
+            this.rectObject.set(attributes);
+            this.calculateTextPath(width, height);
+            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,
+        });
+        this.autoChangeFontSize(0.1);
+        this.calculateTextPath(this.width, this.height);
+        if (options?.isOriginal) {
+            this.rectObject?.set({ strokeWidth: 0 });
+        }
+        else {
+            if (options?.hideStroke) {
+                this.rectObject?.set({ strokeWidth: 0 });
+            }
+            if (options?.fontUrl) {
+                (0, utils_1.loadFontFromUrl)(options?.fontUrl, text?.fontFamily ?? "").then(() => {
+                    this.canvas?.renderAll?.();
+                });
+            }
+        }
+    },
+    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?.();
+            }
+        }
+        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?.();
+            }
+        }
+    },
+    setText: function (text) {
+        this.textObject.set({
+            text,
+        });
+        this.canvas?.renderAll?.();
+        this.autoChangeFontSize(0.1);
+    },
+    setPrefix: function (text) {
+        this.textObject.set({
+            prefix: text,
+        });
+        this.getText();
+    },
+    setInfix: function (text) {
+        this.textObject.set({
+            infix: text,
+        });
+        this.getText();
+    },
+    setSuffix: function (text) {
+        this.textObject.set({
+            suffix: text,
+        });
+        this.getText();
+    },
+    getText: function () {
+        const { prefix = "", infix = "", suffix = "" } = this.textObject;
+        this.setText(infix?.length > 0 ? prefix + infix + suffix : "");
+    },
+    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?.();
+    },
+    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?.();
+    },
+    setSizes: function (options) {
+        const { width, height } = options;
+        if (width && width > this.textObject.__lineWidths) {
+            this.set({ width });
+            this.textObject.set({ width });
+        }
+        if (height && height > this.textObject.height) {
+            this.set({ height });
+        }
+        this.canvas?.renderAll?.();
+    },
+    setTextAttributes: function (options) {
+        this.textObject.set(options);
+        this.canvas?.renderAll?.();
+    },
+    getTextAttribute: function (attribute) {
+        return this.textObject.get(attribute);
+    },
+    getSettings: function (attribute) {
+        if (constants_1.PARENT_ATTRIBUTES.includes(attribute)) {
+            return this.get(attribute);
+        }
+        return this.textObject.get(attribute);
+    },
+    calculateTextPath: function (width, height) {
+        const pathSide = this.textObject.pathSide;
+        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), {
+            fill: undefined,
+            stroke: "black",
+            objectCaching: false,
+            originX: "center",
+            originY: "center",
+        });
+        this.pathObject = path;
+        const pathInfo = fabric_1.fabric.util?.getPathSegmentsInfo?.(path.path);
+        this.textObject.set({
+            path,
+            pathLength: pathInfo?.[(pathInfo?.length ?? 0) - 1]?.length,
+        });
+    },
+});
+const toCurvedTextObject = (object) => {
+    const textObject = object.textObject;
+    return {
+        _id: object?._id,
+        id: object?._id,
+        personalizeId: object?.layerId,
+        layerId: object?.layerId,
+        name: object?.name,
+        locked: object?.locked,
+        fontId: object?.fontId,
+        fontCategoryId: object?.fontCategoryId,
+        fontUrl: object?.fontUrl,
+        isAdditional: object?.isAdditional,
+        text: {
+            fontWeight: textObject?.fontWeight,
+            fontSize: textObject?.fontSize,
+            textAlign: textObject?.textAlign,
+            text: textObject?.text,
+            fill: textObject?.fill,
+            width: textObject?.width,
+            height: textObject?.height,
+            fontFamily: textObject?.fontFamily,
+            maxFontSize: textObject?.maxFontSize,
+            stroke: textObject?.stroke,
+            strokeWidth: textObject?.strokeWidth,
+            prefix: textObject?.prefix,
+            infix: textObject?.infix,
+            suffix: textObject?.suffix,
+            curvedWidth: textObject?.curvedWidth,
+            pathSide: textObject?.pathSide,
+            pathStartOffset: textObject?.pathStartOffset,
+        },
+    };
+};
+exports.toCurvedTextObject = toCurvedTextObject;
+class CurvedText extends fabric_1.fabric.Group {
+    constructor(options) {
+        super();
+        return new CurvedTextClass(options);
+    }
+}
+exports.default = CurvedText;

package/lib/CurvedTextObject/interfaces.d.ts

@@ -0,0 +1,27 @@
+import { ObjectId } from "../utils/objectId";
+export interface ICurvedTextOptions extends fabric.IGroupOptions {
+    _id?: ObjectId;
+    personalizeId?: string;
+    layerId: number;
+    text: {
+        fontSize?: number;
+        fill?: string;
+        width?: number;
+        height?: number;
+        textAlign?: string;
+        fontWeight?: string;
+        text: string;
+        fontFamily?: string;
+        maxFontSize: number;
+        stroke?: string;
+        strokeWidth?: number;
+        prefix?: string;
+        infix?: string;
+        suffix?: string;
+        curvedWidth?: number;
+    };
+    fontUrl?: string;
+    isOriginal?: boolean;
+    isAdditional?: boolean;
+    hideStroke?: boolean;
+}

package/lib/CurvedTextObject/interfaces.js

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

package/lib/LayoutGroupObject/constants.d.ts

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

package/lib/LayoutGroupObject/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LAYOUT_GROUP_OBJECT_ATTRIBUTES = void 0;
+exports.LAYOUT_GROUP_OBJECT_ATTRIBUTES = {
+    name: "Layout group",
+    type: "LAYOUT_GROUP",
+};

package/lib/LayoutGroupObject/index.d.ts

@@ -0,0 +1,16 @@
+import { fabric } from "fabric";
+import { ILayoutGroupOptions } from "./interfaces";
+export default class LayoutGroup {
+    _id: string;
+    name?: string;
+    type?: string;
+    locked?: boolean;
+    isAdditional?: boolean;
+    canvas?: fabric.Canvas;
+    group?: fabric.ActiveSelection;
+    private objects?;
+    constructor(options?: ILayoutGroupOptions);
+    select(): void;
+    delete(): void;
+    getObjects(): fabric.Object[] | undefined;
+}

package/lib/LayoutGroupObject/index.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fabric_1 = require("fabric");
+const objectId_1 = require("../utils/objectId");
+const constants_1 = require("./constants");
+class LayoutGroup {
+    constructor(options) {
+        const { objects = [], canvas, _id } = options ?? {};
+        const objectId = _id ?? new objectId_1.ObjectId().toString();
+        objects?.map((obj) => {
+            obj.set({ layoutGroupId: objectId });
+        });
+        this._id = objectId;
+        this.type = constants_1.LAYOUT_GROUP_OBJECT_ATTRIBUTES.type;
+        this.name = constants_1.LAYOUT_GROUP_OBJECT_ATTRIBUTES.name;
+        this.objects = objects;
+        this.canvas = canvas;
+        return this;
+    }
+    select() {
+        const canvas = this?.canvas;
+        if (canvas) {
+            canvas.discardActiveObject();
+            const group = new fabric_1.fabric.ActiveSelection([], {
+                canvas: canvas,
+                isLayoutGroup: true,
+            });
+            this.objects?.map((obj) => {
+                group.addWithUpdate(obj);
+            });
+            canvas.setActiveObject(group);
+            this.group = group;
+            canvas.renderAll();
+        }
+    }
+    delete() {
+        this.objects?.map((obj) => {
+            obj.set({ layoutGroupId: undefined });
+        });
+        const group = this.group;
+        if (group) {
+            group.set({
+                isLayoutGroup: false,
+            });
+        }
+    }
+    getObjects() {
+        return this.objects;
+    }
+}
+exports.default = LayoutGroup;

package/lib/LayoutGroupObject/interfaces.d.ts

@@ -0,0 +1,5 @@
+export interface ILayoutGroupOptions extends fabric.IObjectOptions {
+    _id?: string;
+    canvas?: fabric.Canvas;
+    objects?: fabric.Object[];
+}

package/lib/LayoutGroupObject/interfaces.js

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

package/lib/constants.d.ts

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

package/lib/constants.js

@@ -2,11 +2,15 @@
 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");
+const constants_2 = require("./CurvedTextObject/constants");
+const constants_3 = require("./ImagePlaceholderObject/constants");
+const constants_4 = require("./LayoutGroupObject/constants");
+const constants_5 = require("./TextInputObject/constants");
 exports.OBJECT_TYPES = {
-    textInput: constants_3.TEXT_INPUT_OBJECT_ATTRIBUTES.type,
+    textInput: constants_5.TEXT_INPUT_OBJECT_ATTRIBUTES.type,
+    curvedText: constants_2.CURVED_TEXT_OBJECT_ATTRIBUTES.type,
     clipart: constants_1.CLIPART_OBJECT_ATTRIBUTES.type,
-    imagePlaceHolder: constants_2.IMAGE_PLACEHOLDER_OBJECT_ATTRIBUTES.type,
+    imagePlaceHolder: constants_3.IMAGE_PLACEHOLDER_OBJECT_ATTRIBUTES.type,
     activeSelection: "activeSelection",
+    layoutGroup: constants_4.LAYOUT_GROUP_OBJECT_ATTRIBUTES.type,
 };

package/lib/index.d.ts

@@ -1,7 +1,9 @@
 import TextInput from "./TextInputObject";
+import CurvedText from "./CurvedTextObject";
 import Clipart from "./ClipartObject";
 import ImagePlaceholder from "./ImagePlaceholderObject";
 import fabric, { lockObject, lockAllObjects, loadImageFromFile, loadImageFromUrl, getObject, asyncGetObject } from "./utils";
 import { OBJECT_TYPES } from "./constants";
 import { IMAGE_FILTER_TYPES } from "./ImagePlaceholderObject/constants";
-export { fabric, TextInput, Clipart, ImagePlaceholder, lockObject, lockAllObjects, loadImageFromFile, loadImageFromUrl, getObject, asyncGetObject, OBJECT_TYPES, IMAGE_FILTER_TYPES, };
+import LayoutGroup from "./LayoutGroupObject";
+export { fabric, TextInput, Clipart, ImagePlaceholder, LayoutGroup, CurvedText, lockObject, lockAllObjects, loadImageFromFile, loadImageFromUrl, getObject, asyncGetObject, OBJECT_TYPES, IMAGE_FILTER_TYPES, };

package/lib/index.js

@@ -26,9 +26,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IMAGE_FILTER_TYPES = exports.OBJECT_TYPES = exports.asyncGetObject = exports.getObject = exports.loadImageFromUrl = exports.loadImageFromFile = exports.lockAllObjects = exports.lockObject = exports.ImagePlaceholder = exports.Clipart = exports.TextInput = exports.fabric = void 0;
+exports.IMAGE_FILTER_TYPES = exports.OBJECT_TYPES = exports.asyncGetObject = exports.getObject = exports.loadImageFromUrl = exports.loadImageFromFile = exports.lockAllObjects = exports.lockObject = exports.CurvedText = exports.LayoutGroup = exports.ImagePlaceholder = exports.Clipart = exports.TextInput = exports.fabric = void 0;
 const TextInputObject_1 = __importDefault(require("./TextInputObject"));
 exports.TextInput = TextInputObject_1.default;
+const CurvedTextObject_1 = __importDefault(require("./CurvedTextObject"));
+exports.CurvedText = CurvedTextObject_1.default;
 const ClipartObject_1 = __importDefault(require("./ClipartObject"));
 exports.Clipart = ClipartObject_1.default;
 const ImagePlaceholderObject_1 = __importDefault(require("./ImagePlaceholderObject"));
@@ -45,3 +47,5 @@ const constants_1 = require("./constants");
 Object.defineProperty(exports, "OBJECT_TYPES", { enumerable: true, get: function () { return constants_1.OBJECT_TYPES; } });
 const constants_2 = require("./ImagePlaceholderObject/constants");
 Object.defineProperty(exports, "IMAGE_FILTER_TYPES", { enumerable: true, get: function () { return constants_2.IMAGE_FILTER_TYPES; } });
+const LayoutGroupObject_1 = __importDefault(require("./LayoutGroupObject"));
+exports.LayoutGroup = LayoutGroupObject_1.default;

package/lib/utils/index.d.ts

@@ -3,6 +3,7 @@ import Clipart from "../ClipartObject";
 import ImagePlaceholder from "../ImagePlaceholderObject";
 import TextInput from "../TextInputObject";
 import { ImageFilterType } from "../ImagePlaceholderObject/interfaces";
+import CurvedText from "../CurvedTextObject";
 export declare const loadFontFromUrl: (url: string, name: string) => Promise<void>;
 export declare const isFontLoaded: (name: string) => boolean;
 export declare const loadImageFromFile: (image: File) => Promise<fabric.Image>;
@@ -16,7 +17,7 @@ export declare const lockAllObjects: (canvas: fabric.Canvas, locked: boolean, se
 export declare const getObject: (object: any, options?: {
     isOriginal?: boolean;
     hideStroke?: boolean;
-}) => Clipart | ImagePlaceholder | TextInput | undefined;
+}) => Clipart | ImagePlaceholder | CurvedText | TextInput | undefined;
 export declare const asyncGetObject: (object: any, options?: {
     isOriginal?: boolean;
 }) => Promise<fabric.Image | Clipart | ImagePlaceholder | TextInput | undefined>;

package/lib/utils/index.js

@@ -29,6 +29,7 @@ const constants_1 = require("../constants");
 const ClipartObject_1 = __importStar(require("../ClipartObject"));
 const ImagePlaceholderObject_1 = __importStar(require("../ImagePlaceholderObject"));
 const TextInputObject_1 = __importStar(require("../TextInputObject"));
+const CurvedTextObject_1 = __importStar(require("../CurvedTextObject"));
 const loadFontFromUrl = async (url, name) => {
     if (!name || !url)
         return;
@@ -148,6 +149,13 @@ const getObject = (object, options) => {
             });
             return imagePlaceHolderObject;
         }
+        case constants_1.OBJECT_TYPES.curvedText: {
+            const curvedTextObject = new CurvedTextObject_1.default({
+                ...object,
+                ...options,
+            });
+            return curvedTextObject;
+        }
         default:
             return;
     }
@@ -217,6 +225,9 @@ fabric_1.fabric.Object.prototype.toObject = (function (toObject) {
             case constants_1.OBJECT_TYPES.imagePlaceHolder: {
                 return fabric_1.fabric.util.object.extend(toObject.call(this), (0, ImagePlaceholderObject_1.toImagePlaceholderObject)(this));
             }
+            case constants_1.OBJECT_TYPES.curvedText: {
+                return fabric_1.fabric.util.object.extend(toObject.call(this), (0, CurvedTextObject_1.toCurvedTextObject)(this));
+            }
             default: {
                 return {};
             }

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

@@ -0,0 +1 @@
+export declare const getEllipsePath: (rx: number, ry: number) => string;

package/lib/utils/svg.util.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getEllipsePath = void 0;
+const getEllipsePath = (rx, ry) => {
+    let output = `M 0,0`;
+    output += `a ${rx},${ry} 0 0,1 0,${ry * -2}`;
+    output += " ";
+    output += `a ${rx},${ry} 0 0,1 0,${ry * 2}`;
+    return output;
+};
+exports.getEllipsePath = getEllipsePath;

package/package.json

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