Skip to content

Files

Latest commit

klakhovklakhov
Aug 18, 2021
1da3c96 · Aug 18, 2021

History

History

cvat-canvas

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
src
src
Aug 18, 2021
.eslintignore
.eslintignore
Nov 25, 2020
.eslintrc.js
.eslintrc.js
Oct 24, 2020
.gitignore
.gitignore
Feb 1, 2021
README.md
README.md
Jun 1, 2021
package-lock.json
package-lock.json
Aug 18, 2021
package.json
package.json
Aug 18, 2021
tsconfig.json
tsconfig.json
May 13, 2021
webpack.config.js
webpack.config.js
Aug 4, 2021

README.md

Module CVAT-CANVAS

Description

The CVAT module written in TypeScript language. It presents a canvas to viewing, drawing and editing of annotations.

Versioning

If you make changes in this package, please do following:

  • After not important changes (typos, backward compatible bug fixes, refactoring) do: npm version patch
  • After changing API (backward compatible new features) do: npm version minor
  • After changing API (changes that break backward compatibility) do: npm version major

Commands

  • Building of the module from sources in the dist directory:
npm run build
npm run build -- --mode=development     # without a minification

Using

Canvas itself handles:

  • Shape context menu (PKM)
  • Image moving (mousedrag)
  • Image resizing (mousewheel)
  • Image fit (dblclick)
  • Remove point (PKM)
  • Polyshape editing (Shift + LKM)

API Methods

    enum RectDrawingMethod {
        CLASSIC = 'By 2 points',
        EXTREME_POINTS = 'By 4 points'
    }

    enum CuboidDrawingMethod {
        CLASSIC = 'From rectangle',
        CORNER_POINTS = 'By 4 points',
    }

    enum Mode {
        IDLE = 'idle',
        DRAG = 'drag',
        RESIZE = 'resize',
        DRAW = 'draw',
        EDIT = 'edit',
        MERGE = 'merge',
        SPLIT = 'split',
        GROUP = 'group',
        INTERACT = 'interact',
        SELECT_ROI = 'select_roi',
        DRAG_CANVAS = 'drag_canvas',
        ZOOM_CANVAS = 'zoom_canvas',
    }

    interface Configuration {
        displayAllText?: boolean;
        undefinedAttrValue?: string;
    }

    interface DrawData {
        enabled: boolean;
        shapeType?: string;
        rectDrawingMethod?: RectDrawingMethod;
        cuboidDrawingMethod?: CuboidDrawingMethod;
        numberOfPoints?: number;
        initialState?: any;
        crosshair?: boolean;
    }

    interface InteractionData {
        shapeType: string;
        minVertices?: number;
    }

    interface GroupData {
        enabled: boolean;
        resetGroup?: boolean;
    }

    interface MergeData {
        enabled: boolean;
    }

    interface SplitData {
        enabled: boolean;
    }

    interface InteractionResult {
        points: number[];
        shapeType: string;
        button: number;
    };

    interface DrawnData {
        shapeType: string;
        points: number[];
        objectType?: string;
        occluded?: boolean;
        attributes?: [index: number]: string;
        label?: Label;
        color?: string;
    }

    interface Canvas {
        html(): HTMLDivElement;
        setup(frameData: any, objectStates: any[], zLayer?: number): void;
        setupReviewROIs(reviewROIs: Record<number, number[]>): void;
        activate(clientID: number | null, attributeID?: number): void;
        rotate(rotationAngle: number): void;
        focus(clientID: number, padding?: number): void;
        fit(): void;
        grid(stepX: number, stepY: number): void;

        interact(interactionData: InteractionData): void;
        draw(drawData: DrawData): void;
        group(groupData: GroupData): void;
        split(splitData: SplitData): void;
        merge(mergeData: MergeData): void;
        select(objectState: any): void;

        fitCanvas(): void;
        bitmap(enable: boolean): void;
        selectROI(enable: boolean): void;
        dragCanvas(enable: boolean): void;
        zoomCanvas(enable: boolean): void;

        mode(): Mode;
        cancel(): void;
        configure(configuration: Configuration): void;
        isAbleToChangeFrame(): boolean;

        readonly geometry: Geometry;
    }

API CSS

  • All drawn objects (shapes, tracks) have an id cvat_canvas_shape_{objectState.clientID}
  • Drawn shapes and tracks have classes cvat_canvas_shape, cvat_canvas_shape_activated, cvat_canvas_shape_grouping, cvat_canvas_shape_merging, cvat_canvas_shape_drawing, cvat_canvas_shape_occluded
  • Drawn review ROIs have an id cvat_canvas_issue_region_{issue.id}
  • Drawn review roi has the class cvat_canvas_issue_region
  • Drawn texts have the class cvat_canvas_text
  • Tags have the class cvat_canvas_tag
  • Canvas image has ID cvat_canvas_image
  • Grid on the canvas has ID cvat_canvas_grid and cvat_canvas_grid_pattern
  • Crosshair during a draw has class cvat_canvas_crosshair
  • To stick something to a specific position you can use an element with id cvat_canvas_attachment_board

Events

Standard JS events are used.

    - canvas.setup
    - canvas.activated => {state: ObjectState}
    - canvas.clicked => {state: ObjectState}
    - canvas.moved => {states: ObjectState[], x: number, y: number}
    - canvas.find => {states: ObjectState[], x: number, y: number}
    - canvas.drawn => {state: DrawnData}
    - canvas.interacted => {shapes: InteractionResult[]}
    - canvas.editstart
    - canvas.edited => {state: ObjectState, points: number[]}
    - canvas.splitted => {state: ObjectState}
    - canvas.groupped => {states: ObjectState[]}
    - canvas.merged => {states: ObjectState[]}
    - canvas.canceled
    - canvas.dragstart
    - canvas.dragstop
    - canvas.zoomstart
    - canvas.zoomstop
    - canvas.zoom
    - canvas.fit
    - canvas.dragshape => {id: number}
    - canvas.roiselected => {points: number[]}
    - canvas.resizeshape => {id: number}
    - canvas.contextmenu => { mouseEvent: MouseEvent, objectState: ObjectState,  pointID: number }
    - canvas.error => { exception: Error }

WEB

// Create an instance of a canvas
const canvas = new window.canvas.Canvas();

console.log('Version ', window.canvas.CanvasVersion);
console.log('Current mode is ', window.canvas.mode());

// Put canvas to a html container
htmlContainer.appendChild(canvas.html());
canvas.fitCanvas();

// Next you can use its API methods. For example:
canvas.rotate(270);
canvas.draw({
  enabled: true,
  shapeType: 'rectangle',
  crosshair: true,
  rectDrawingMethod: window.Canvas.RectDrawingMethod.CLASSIC,
});

API Reaction

IDLE GROUP SPLIT DRAW MERGE EDIT DRAG RESIZE ZOOM_CANVAS DRAG_CANVAS INTERACT
setup() + + + +/- + +/- +/- +/- + + +
activate() + - - - - - - - - - -
rotate() + + + + + + + + + + +
focus() + + + + + + + + + + +
fit() + + + + + + + + + + +
grid() + + + + + + + + + + +
draw() + - - + - - - - - - -
interact() + - - - - - - - - - +
split() + - + - - - - - - - -
group() + + - - - - - - - - -
merge() + - - - + - - - - - -
fitCanvas() + + + + + + + + + + +
dragCanvas() + - - - - - + - - + -
zoomCanvas() + - - - - - - + + - -
cancel() - + + + + + + + + + +
configure() + + + + + + + + + + +
bitmap() + + + + + + + + + + +
setZLayer() + + + + + + + + + + +
setupReviewROIs() + + + + + + + + + + +

You can call setup() during editing, dragging, and resizing only to update objects, not to change a frame. You can change frame during draw only when you do not redraw an existing object

Other methods do not change state and can be used at any time.