react-fabric-canvas-designer/dist/Objects/TextBoxObj.js

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 { bindThisInAllObjFn } from "../helpers/helpers";
import { WrapperFabric } from "./WrapperFabric";
export class TextBoxObj extends WrapperFabric {
    constructor(textObj) {
        super(textObj);
        Object.defineProperty(this, "obj", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: void 0
        });
        // 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) {
        this.obj.set("fontFamily", font);
    }
    setFontStyle(style) {
        this.obj.fontStyle = style;
    }
    setFontWeight(weight) {
        this.obj.fontWeight = weight;
    }
    setFontSize(size) {
        if (!size)
            size = 1;
        this.obj.set("fontSize", size);
    }
    setTextAlign(alignMent) {
        this.obj.set("textAlign", alignMent);
    }
    setTextFill(color) {
        this.obj.set("fill", color);
    }
    setTextBackground(color) {
        this.obj.set("textBackgroundColor", color);
    }
    setBackground(background) {
        this.obj.set("backgroundColor", background);
        //this.obj.setCoords()
    }
    getObjectValues() {
        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, },
        };
    }
}