react-fabric-canvas-designer/src/Objects/LineObj.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 { Line } from "fabric";
import { bindThisInAllObjFn } from "../helpers/helpers";
import { FabricObjectPropertyList } from "../types/WrapperFabricType";
import { WrapperFabric } from "./WrapperFabric";

export class LineObj extends WrapperFabric {
    obj: Line;
    constructor(obj: Line) {
        super(obj)
        this.propertyListMap = { ...this.propertyListMap, "borderColor": this.setBorderColor, "borderWidth": this.setBorderWidth, }
        this.obj = obj
        bindThisInAllObjFn(this, this.propertyListMap)
    }

    setBorderColor(color: string): void {
        this.obj.set("stroke", color)
        //this.obj.setCoords()
    }
    setBorderWidth(width: number): void {
        // if (!width)
        //     width = 0
        this.obj.set("strokeWidth", width)
        //this.obj.setCoords()
    }

    public getObjectValues(): FabricObjectPropertyList {
        return { ...super.getObjectValues(), borderColor: { type: "color", value: this.obj.stroke || "" }, borderWidth: { type: "number", step: 1, value: this.obj.strokeWidth } }
    }
}