customized-fabric 1.5.1 → 1.5.3

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/ImagePlaceholderObject/index.js

@@ -230,9 +230,9 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
     },
     loadCustomizedImage: async function (image) {
         if (image) {
-            const { url, data, clipPath } = image;
+            const { url, filteredUrl, data, clipPath } = image;
             if (url && data && clipPath) {
-                const loadedImage = await (0, utils_1.loadImageFromUrl)(url);
+                const loadedImage = await (0, utils_1.loadImageFromUrl)(filteredUrl ?? url);
                 if (loadedImage) {
                     const mask = await this.getMask();
                     const { top, left, scaleX, width, angle, flipX, flipY, settings = {}, } = data;

package/lib/ImagePlaceholderObject/interfaces.d.ts

@@ -18,6 +18,7 @@ export interface IClipPathOptions {
 }
 export interface IImageOptions {
     url: string;
+    filteredUrl?: string;
     data: {
         originX: string;
         originY: string;

package/lib/constants.d.ts

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

package/lib/constants.js

@@ -2,13 +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("./LayoutGroupObject/constants");
-const constants_4 = 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_4.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_3.LAYOUT_GROUP_OBJECT_ATTRIBUTES.type,
+    layoutGroup: constants_4.LAYOUT_GROUP_OBJECT_ATTRIBUTES.type,
 };

package/lib/index.d.ts

@@ -1,8 +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";
 import LayoutGroup from "./LayoutGroupObject";
-export { fabric, TextInput, Clipart, ImagePlaceholder, LayoutGroup, lockObject, lockAllObjects, loadImageFromFile, loadImageFromUrl, getObject, asyncGetObject, OBJECT_TYPES, IMAGE_FILTER_TYPES, };
+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.LayoutGroup = 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"));

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.1",
+  "version": "1.5.3",
   "description": "Customized fabric",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",