react-fabric-canvas-designer/dist/Objects/EllipseObj.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 EllipseObj extends WrapperFabric {
    constructor(rectObj) {
        super(rectObj);
        Object.defineProperty(this, "obj", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: void 0
        });
        this.propertyListMap = {
            ...this.propertyListMap,
            "background": this.setBackground,
            "borderColor": this.setBorderColor,
            "borderWidth": this.setBorderWidth,
        };
        this.obj = rectObj;
        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()
    }
    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 } };
    }
}