react-visual-annotator/dist/ImageCanvas/index.d.ts

Powerful React image and video annotation tool for machine learning, computer vision, and AI training data creation. Features rotatable bounding boxes, polygons, keypoints, segmentation with TypeScript support and Material-UI components.

import { AutosegOptions } from 'autoseg/webworker';
import { RegionLabelProps } from '../RegionLabel';
import { Box, Keypoints, KeypointsDefinition, Point, Polygon, Region } from '../types/region-tools.ts';
import { ComponentType, FunctionComponent } from 'react';

type Props = {
    regions: Array<Region>;
    imageSrc: string | null;
    videoSrc: string | null;
    videoTime?: number;
    keypointDefinitions?: KeypointsDefinition;
    onMouseMove?: (point: {
        x: number;
        y: number;
    }) => any;
    onMouseDown?: (point: {
        x: number;
        y: number;
    }) => any;
    onMouseUp?: (point: {
        x: number;
        y: number;
    }) => any;
    dragWithPrimary?: boolean;
    zoomWithPrimary?: boolean;
    createWithPrimary?: boolean;
    showTags?: boolean;
    realSize?: {
        w: number;
        h: number;
        unitName: string;
    };
    showCrosshairs?: boolean;
    showMask?: boolean;
    showHighlightBox?: boolean;
    showPointDistances?: boolean;
    pointDistancePrecision?: number;
    regionClsList?: Array<string> | Array<{
        id: string;
        label: string;
    }>;
    regionTagList?: Array<string>;
    regionTagSingleSelection?: boolean;
    allowedArea?: {
        x: number;
        y: number;
        w: number;
        h: number;
    };
    RegionEditLabel?: ComponentType<RegionLabelProps> | FunctionComponent<RegionLabelProps> | null;
    videoPlaying?: boolean;
    zoomOnAllowedArea?: boolean;
    fullImageSegmentationMode?: boolean;
    autoSegmentationOptions?: AutosegOptions;
    modifyingAllowedArea?: boolean;
    allowComments?: boolean;
    onChangeRegion: (region: Region) => void;
    onBeginRegionEdit: (region: Region) => void;
    onCloseRegionEdit: (region: Region) => void;
    onDeleteRegion: (region: Region) => void;
    onBeginBoxTransform: (region: Box, point: [number, number]) => void;
    onBeginBoxRotation?: (region: Box) => void;
    onBeginMovePolygonPoint: (region: Polygon, index: number) => void;
    onBeginMoveKeypoint: (region: Keypoints, keypointId: string) => void;
    onAddPolygonPoint: (polygon: Polygon, point: [number, number], index: number) => void;
    onSelectRegion: (region: Region) => void;
    onBeginMovePoint: (point: Point) => void;
    onImageOrVideoLoaded: (props: {
        naturalWidth: number;
        naturalHeight: number;
        duration?: number;
    }) => void;
    onChangeVideoTime: (time: number) => void;
    onRegionClassAdded: (cls: string) => void;
    onChangeVideoPlaying?: (playing: boolean) => void;
};
export type CanvasLayoutParams = {
    iw: number;
    ih: number;
    fitScale: number;
    canvasWidth: number;
    canvasHeight: number;
};
export declare const ImageCanvas: ({ regions, imageSrc, videoSrc, videoTime, realSize, showTags, onMouseMove, onMouseDown, onMouseUp, dragWithPrimary, zoomWithPrimary, createWithPrimary, pointDistancePrecision, regionClsList, regionTagList, regionTagSingleSelection, showCrosshairs, showHighlightBox, showPointDistances, allowedArea, RegionEditLabel, videoPlaying, showMask, fullImageSegmentationMode, autoSegmentationOptions, onImageOrVideoLoaded, onChangeRegion, onBeginRegionEdit, onCloseRegionEdit, onBeginBoxTransform, onBeginBoxRotation, onBeginMovePolygonPoint, onAddPolygonPoint, onBeginMoveKeypoint, onSelectRegion, onBeginMovePoint, onDeleteRegion, onChangeVideoTime, onChangeVideoPlaying, onRegionClassAdded, zoomOnAllowedArea, modifyingAllowedArea, keypointDefinitions, allowComments, }: Props) => import("react/jsx-runtime").JSX.Element;
export default ImageCanvas;