react-fabric-canvas-designer/dist/ReactFabricStore.d.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 { Canvas } from "fabric";
import { FontInfo } from "./types/types";
import { FabricObjectPropertyList, FabricObjectPropertyType, FabricObjectPropertyValueType } from "./types/WrapperFabricType";
type toolListType = "select" | "rect" | "elipse" | "text";
type availablePropertyType = {
    name: string;
    inputType: FabricObjectPropertyType extends {
        type: infer V;
    } ? V : never;
    property: FabricObjectPropertyType;
    value: FabricObjectPropertyValueType;
    onChange: (value: any) => void;
    UIComponent: React.ReactNode;
};
export declare class ReactFabricStore {
    private fonts;
    private cloneObjRef;
    private isDrawing;
    private drawColor;
    /** @type Canvas
     *  Provides the FabricCanvas instance for better control */
    _: Canvas;
    /**
     * List of property values for the currently selected object(s)
     */
    accessor propertyValueList: FabricObjectPropertyList;
    /**
     * Currently selected drawing tool
     */
    accessor selectedTool: toolListType;
    /**
     * List of available tools and properties that can be accessed
     * Contains object arrays with:
     * - name: Name of the tool
     * - action: Function to invoke
     * - UIComponent: Default UI component
     */
    get availableTools(): {
        alignmentTools: {
            name: string;
            action: () => void;
            UIComponent: import("react/jsx-runtime").JSX.Element;
        }[];
        positionTools: {
            action: () => void;
            name: string;
            UIComponent: import("react/jsx-runtime").JSX.Element;
        }[];
        creationTools: {
            action: () => void;
            name: string;
            UIComponent: import("react/jsx-runtime").JSX.Element;
        }[];
    };
    /**
         * List of available properties that can be modified for selected objects
         * Contains objects with:
         * - name: Property name
         * - inputType: Type of input control
         * - property: Property configuration
         * - value: Current value
         * - onChange: Handler for value changes
         * - UIComponent: Default UI component
         */
    get availableProperties(): (availablePropertyType | {
        inputType: string;
        name: string;
        onChange: (value: number) => void;
        property: {
            type: string;
            value: number;
            step: number;
        };
        value: number;
        UIComponent: import("react/jsx-runtime").JSX.Element;
    } | {
        inputType: string;
        name: string;
        onChange: (value: string) => void;
        property: {
            type: string;
            value: any;
            step?: undefined;
        };
        value: any;
        UIComponent: import("react/jsx-runtime").JSX.Element;
    })[];
    constructor({ fabricCanvasInstance, fontList }: {
        fabricCanvasInstance: Canvas;
        fontList: FontInfo[];
    });
    private alignObject;
    private moveObject;
    /**
    * Selects the active drawing tool
    * @param tool - Tool to select (select, rect, elipse, text)
    */
    selectTool(tool: toolListType): void;
    /**
     * Deletes the currently selected element(s) from the canvas
     * can be used with delete button
     */
    private deleteActiveElement;
    /**
     * Extracts only the keys common to all objects, with values from the last object.
     * @param data Array of value objects.
     * @returns Object with only common keys and last object's full value.
     */
    private extractCommonKeyFullValues;
    /**
     * Updates the property list
     * method invoked when selected objects change using event listener
     */
    private updateSelectedObjPropertyList;
    /**
         * Updates a property value for the selected object(s)
         * @param propertyKey - Name of the property to update
         * @param value - New value to set
         */
    updatePropertyValue: (propertyKey: string, value: any) => void;
    /**
     * Exports the canvas state as JSON
     * @returns JSON string representation of the canvas
     */
    exportJSON(): string;
    /**
     * Imports a canvas state from JSON
     * @param json - JSON string to import
     */
    importJSON(json: string): Promise<Canvas>;
}
export {};
//# sourceMappingURL=ReactFabricStore.d.ts.map