import { ReactNode } from 'react';
import { Line, Marker, Point, Polygon } from '.';
export type DrawableState = 'viewOnly' | 'drawingLine' | 'addingMarker' | 'drawingPolygon';
export interface DrawOptions {
    lineColor?: string;
    areaColor?: string;
    lineWidth?: number | string;
    lineDashArray?: string;
    polygon?: {
        showVertexIndex?: boolean;
        vertexBgColor?: string;
        vertexTextColor?: string;
    };
}
export interface DrawableProps<MARKER extends Marker> {
    drawOptions?: DrawOptions;
    width?: number;
    height?: number;
    state: DrawableState;
    scale: number;
    lines?: Line[];
    polygons?: Polygon[];
    markers?: MARKER[];
    markRenderer?(marker: MARKER): ReactNode;
    onAddLine?(start: Point, end: Point): void;
    onAddMarker?(at: Point): void;
    onAddPolygon?(points: Point[]): void;
    onStateChange?(state: DrawableState): void;
}
export interface State {
}
export default function Drawable<MARKER extends Marker>(props: DrawableProps<MARKER>): JSX.Element;