react-fabric-canvas-designer/src/Objects/TextBoxObj.ts

A React-based wrapper for Fabric.js to create interactive and customizable canvas-based designs. This library provides tools for drawing, editing, and managing objects on a canvas with React-friendly APIs.

import { Textbox, } from "fabric";
import { bindThisInAllObjFn } from "../helpers/helpers";
import { FabricObjectPropertyList } from "../types/WrapperFabricType";
import { WrapperFabric } from "./WrapperFabric";

export class TextBoxObj extends WrapperFabric {
    obj: Textbox;
    constructor(textObj: Textbox) {
        super(textObj)
        // textObj.set("lockScalingX", true);
        textObj.set("lockScalingY", true);
        textObj.set("styles", {});
        textObj.setControlsVisibility({
            mt: false, // Middle top
            mb: false, // Middle bottom
            ml: true, // Middle left
            mr: true, // Middle right
            tl: false, // Top left
            tr: false, // Top right
            bl: false, // Bottom left
            br: false, // Bottom right
            mtr: true // Rotation control
        });

        this.propertyListMap = {
            ...this.propertyListMap,
            "fontFamily": this.setFontFamily,
            "fontSize": this.setFontSize,
            "fontStyle": this.setFontStyle,
            "fontWeight": this.setFontWeight,
            "textAlign": this.setTextAlign,
            "textFill": this.setTextFill,
            "textBackground": this.setTextBackground,
            "background": this.setBackground,
        }
        this.obj = textObj
        bindThisInAllObjFn(this, this.propertyListMap)

    }
    setFontFamily(font: string): void {
        this.obj.set("fontFamily", font)
    }
    setFontStyle(style: string): void {
        this.obj.fontStyle = style
    }
    setFontWeight(weight: "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900"): void {
        this.obj.fontWeight = weight
    }

    setFontSize(size: number): void {
        if (!size)
            size = 1
        this.obj.set("fontSize", size)
    }
    setTextAlign(alignMent: string): void {
        this.obj.set("textAlign", alignMent)
    }
    setTextFill(color: string): void {
        this.obj.set("fill", color)
    }
    setTextBackground(color: string): void {
        this.obj.set("textBackgroundColor", color)
    }
    setBackground(background: string): void {
        this.obj.set("backgroundColor", background);
        //this.obj.setCoords()
    }

    public getObjectValues(): FabricObjectPropertyList {
        return {
            ...super.getObjectValues(),
            fontFamily: { type: "font", value: this.obj.fontFamily, },
            fontSize: { type: "number", step: 1, value: this.obj.fontSize, },
            fontStyle: { type: "enum", value: this.obj.fontStyle, enum: ["normal", "italic", "oblique"] },
            fontWeight: { type: "enum", enum: ["100", "200", "300", "400", "500", "600", "700", "800", "900"], value: String(this.obj.fontWeight), },
            textAlign: { value: this.obj.textAlign, type: "enum", enum: ["left", "center", "right", "justify", "justify-left", "justify-center", "justify-right"] },
            textFill: { type: "color", value: this.obj.fill || "", },
            textBackground: { type: "color", value: this.obj.textBackgroundColor, },
            background: { type: "color", value: this.obj.backgroundColor, },
        }
    }
}