react-fabric-canvas-designer/dist/Objects/RectObj.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 { Rect } from "fabric";
import { bindThisInAllObjFn } from "../helpers/helpers";
import { WrapperFabric } from "./WrapperFabric";
export class RectObj extends WrapperFabric {
    constructor(rectObj) {
        super(rectObj);
        Object.defineProperty(this, "obj", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: void 0
        });
        this.obj = rectObj;
        this.propertyListMap = {
            ...this.propertyListMap,
            "background": this.setBackground,
            "borderColor": this.setBorderColor,
            "borderWidth": this.setBorderWidth,
            "borderCorner": this.setBorderCorner,
            "borderSides": this.setBorderSides
        };
        bindThisInAllObjFn(this, this.propertyListMap);
    }
    setBackground(background) {
        this.obj.set("fill", background);
        //this.obj.setCoords()
    }
    setBorderColor(color) {
        this.obj.set("stroke", color);
        //this.obj.setCoords()
    }
    setBorderWidth(width) {
        if (!width)
            width = 0;
        this.obj.set("strokeWidth", width);
        //this.obj.setCoords()
    }
    setBorderCorner(cornerRadious) {
        if (!cornerRadious)
            cornerRadious = 0;
        this.obj.set("rx", cornerRadious);
        this.obj.set("ry", cornerRadious);
        // this.obj.set("strokeWidth", width)
        // //this.obj.setCoords()
    }
    setBorderSides(val) {
        // this.obj.set("strokeWidth", width)
        // //this.obj.setCoords()
        if (val)
            this.obj.set("clipPath", new Rect({
                left: 0,
                top: 0,
                width: 2, // Only show stroke on left side
                height: this.obj.height,
                absolutePositioned: true
            }));
        else
            this.obj.set("clipPath", null);
    }
    getObjectValues() {
        return {
            ...super.getObjectValues(),
            background: { type: "color", value: this.obj.fill || "", },
            borderColor: { type: "color", value: this.obj.stroke || "", },
            borderWidth: { type: "number", step: 1, value: this.obj.strokeWidth, },
            borderCorner: { type: "number", step: 1, value: this.obj.rx, },
            borderSides: { type: "boolean", value: this.obj.clipPath ? true : false },
        };
    }
}