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

export class EllipseObj extends WrapperFabric {
    obj: Ellipse;
    constructor(rectObj: Ellipse) {
        super(rectObj)
        this.propertyListMap = {
            ...this.propertyListMap,
            "background": this.setBackground,
            "borderColor": this.setBorderColor,
            "borderWidth": this.setBorderWidth,
        }
        this.obj = rectObj
        bindThisInAllObjFn(this, this.propertyListMap)
    }
    setBackground(background: string): void {
        this.obj.set("fill", background);
        //this.obj.setCoords()
    }
    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(), background: { type: "color", value: this.obj.fill || "" }, borderColor: { type: "color", value: this.obj.stroke || "" }, borderWidth: { type: "number", step: 1, value: this.obj.strokeWidth } }
    }
}