circuit-bricks/dist/core/CircuitCanvas.d.ts

A modular, Lego-style SVG circuit component system for React (ALPHA - Not for production use)

/**
 * CircuitCanvas Component
 *
 * The main canvas component that renders circuit components and wires.
 * Supports infinite panning and zooming for a free-flowing design experience.
 *
 * @component
 * @example
 * <CircuitCanvas
 *   components={state.components}
 *   wires={state.wires}
 *   width={800}
 *   height={600}
 *   onComponentClick={handleComponentClick}
 *   showGrid={true}
 * />
 */
import React from 'react';
import { ComponentInstance, Wire, Point } from '../schemas/componentSchema';
export interface CircuitCanvasProps {
    /** Array of component instances to render on the canvas */
    components: ComponentInstance[];
    /** Array of wires connecting components */
    wires: Wire[];
    /** Width of the canvas. Can be a number (pixels) or string (e.g., '100%') */
    width?: number | string;
    /** Height of the canvas. Can be a number (pixels) or string (e.g., '100%') */
    height?: number | string;
    /** Callback when a component is clicked */
    onComponentClick?: (id: string, event: React.MouseEvent) => void;
    /** Callback when a wire is clicked */
    onWireClick?: (id: string, event: React.MouseEvent) => void;
    /** Callback when the canvas background is clicked */
    onCanvasClick?: (event: React.MouseEvent) => void;
    /** Callback when a component is dragged to a new position */
    onComponentDrag?: (id: string, newPosition: Point) => void;
    /** Callback when wire drawing starts from a port */
    onWireDrawStart?: (componentId: string, portId: string) => void;
    /** Callback when wire drawing ends on a port. Return true to accept the connection. */
    onWireDrawEnd?: (componentId: string, portId: string) => boolean;
    /** Callback when wire drawing is canceled */
    onWireDrawCancel?: () => void;
    /** Object representing the current wire drawing state */
    wireDrawing?: {
        isDrawing: boolean;
        fromComponentId: string | null;
        fromPortId: string | null;
    };
    /** Array of currently selected component IDs */
    selectedComponentIds?: string[];
    /** Array of currently selected wire IDs */
    selectedWireIds?: string[];
    /** Whether to show the grid on the canvas */
    showGrid?: boolean;
    /** Size of the grid cells in pixels */
    gridSize?: number;
    /** Whether to snap components to the grid */
    snapToGrid?: boolean;
    /** Callback when a component is dropped onto the canvas */
    onComponentDrop?: (componentType: string, position: Point) => void;
    /** Initial zoom level for the canvas (1.0 = 100%) */
    initialZoom?: number;
    /** Minimum allowed zoom level */
    minZoom?: number;
    /** Maximum allowed zoom level */
    maxZoom?: number;
}
export declare const CircuitCanvas: React.ForwardRefExoticComponent<CircuitCanvasProps & React.RefAttributes<SVGSVGElement>>;
export default CircuitCanvas;
//# sourceMappingURL=CircuitCanvas.d.ts.map