// Copyright (C) 2020-2021 Intel Corporation // // SPDX-License-Identifier: MIT import React from 'react'; import Layout from 'antd/lib/layout'; import { ActiveControl, Rotation } from 'reducers/interfaces'; import GlobalHotKeys, { KeyMap } from 'utils/mousetrap-react'; import { Canvas } from 'cvat-canvas-wrapper'; import ControlVisibilityObserver, { ExtraControlsControl } from './control-visibility-observer'; import RotateControl, { Props as RotateControlProps } from './rotate-control'; import CursorControl, { Props as CursorControlProps } from './cursor-control'; import MoveControl, { Props as MoveControlProps } from './move-control'; import FitControl, { Props as FitControlProps } from './fit-control'; import ResizeControl, { Props as ResizeControlProps } from './resize-control'; import ToolsControl from './tools-control'; import OpenCVControl from './opencv-control'; import DrawRectangleControl, { Props as DrawRectangleControlProps } from './draw-rectangle-control'; import DrawPolygonControl, { Props as DrawPolygonControlProps } from './draw-polygon-control'; import DrawPolylineControl, { Props as DrawPolylineControlProps } from './draw-polyline-control'; import DrawPointsControl, { Props as DrawPointsControlProps } from './draw-points-control'; import DrawCuboidControl, { Props as DrawCuboidControlProps } from './draw-cuboid-control'; import SetupTagControl, { Props as SetupTagControlProps } from './setup-tag-control'; import MergeControl, { Props as MergeControlProps } from './merge-control'; import GroupControl, { Props as GroupControlProps } from './group-control'; import SplitControl, { Props as SplitControlProps } from './split-control'; interface Props { canvasInstance: Canvas; activeControl: ActiveControl; keyMap: KeyMap; normalizedKeyMap: Record; labels: any[]; mergeObjects(enabled: boolean): void; groupObjects(enabled: boolean): void; splitTrack(enabled: boolean): void; rotateFrame(rotation: Rotation): void; repeatDrawShape(): void; pasteShape(): void; resetGroup(): void; redrawShape(): void; } // We use the observer to see if these controls are in the viewport // They automatically put to extra if not const ObservedCursorControl = ControlVisibilityObserver(CursorControl); const ObservedMoveControl = ControlVisibilityObserver(MoveControl); const ObservedRotateControl = ControlVisibilityObserver(RotateControl); const ObservedFitControl = ControlVisibilityObserver(FitControl); const ObservedResizeControl = ControlVisibilityObserver(ResizeControl); const ObservedToolsControl = ControlVisibilityObserver(ToolsControl); const ObservedOpenCVControl = ControlVisibilityObserver(OpenCVControl); const ObservedDrawRectangleControl = ControlVisibilityObserver(DrawRectangleControl); const ObservedDrawPolygonControl = ControlVisibilityObserver(DrawPolygonControl); const ObservedDrawPolylineControl = ControlVisibilityObserver(DrawPolylineControl); const ObservedDrawPointsControl = ControlVisibilityObserver(DrawPointsControl); const ObservedDrawCuboidControl = ControlVisibilityObserver(DrawCuboidControl); const ObservedSetupTagControl = ControlVisibilityObserver(SetupTagControl); const ObservedMergeControl = ControlVisibilityObserver(MergeControl); const ObservedGroupControl = ControlVisibilityObserver(GroupControl); const ObservedSplitControl = ControlVisibilityObserver(SplitControl); export default function ControlsSideBarComponent(props: Props): JSX.Element { const { activeControl, canvasInstance, normalizedKeyMap, keyMap, labels, mergeObjects, groupObjects, splitTrack, rotateFrame, repeatDrawShape, pasteShape, resetGroup, redrawShape, } = props; const preventDefault = (event: KeyboardEvent | undefined): void => { if (event) { event.preventDefault(); } }; let subKeyMap: any = { CANCEL: keyMap.CANCEL, CLOCKWISE_ROTATION: keyMap.CLOCKWISE_ROTATION, ANTICLOCKWISE_ROTATION: keyMap.ANTICLOCKWISE_ROTATION, }; let handlers: any = { CANCEL: (event: KeyboardEvent | undefined) => { preventDefault(event); if (activeControl !== ActiveControl.CURSOR) { canvasInstance.cancel(); } }, CLOCKWISE_ROTATION: (event: KeyboardEvent | undefined) => { preventDefault(event); rotateFrame(Rotation.CLOCKWISE90); }, ANTICLOCKWISE_ROTATION: (event: KeyboardEvent | undefined) => { preventDefault(event); rotateFrame(Rotation.ANTICLOCKWISE90); }, }; if (labels.length) { handlers = { ...handlers, PASTE_SHAPE: (event: KeyboardEvent | undefined) => { preventDefault(event); canvasInstance.cancel(); pasteShape(); }, SWITCH_DRAW_MODE: (event: KeyboardEvent | undefined) => { preventDefault(event); const drawing = [ ActiveControl.DRAW_POINTS, ActiveControl.DRAW_POLYGON, ActiveControl.DRAW_POLYLINE, ActiveControl.DRAW_RECTANGLE, ActiveControl.DRAW_CUBOID, ActiveControl.AI_TOOLS, ActiveControl.OPENCV_TOOLS, ].includes(activeControl); if (!drawing) { canvasInstance.cancel(); // repeateDrawShapes gets all the latest parameters // and calls canvasInstance.draw() with them if (event && event.shiftKey) { redrawShape(); } else { repeatDrawShape(); } } else { if ([ActiveControl.AI_TOOLS, ActiveControl.OPENCV_TOOLS].includes(activeControl)) { // separated API method canvasInstance.interact({ enabled: false }); return; } canvasInstance.draw({ enabled: false }); } }, SWITCH_MERGE_MODE: (event: KeyboardEvent | undefined) => { preventDefault(event); const merging = activeControl === ActiveControl.MERGE; if (!merging) { canvasInstance.cancel(); } canvasInstance.merge({ enabled: !merging }); mergeObjects(!merging); }, SWITCH_SPLIT_MODE: (event: KeyboardEvent | undefined) => { preventDefault(event); const splitting = activeControl === ActiveControl.SPLIT; if (!splitting) { canvasInstance.cancel(); } canvasInstance.split({ enabled: !splitting }); splitTrack(!splitting); }, SWITCH_GROUP_MODE: (event: KeyboardEvent | undefined) => { preventDefault(event); const grouping = activeControl === ActiveControl.GROUP; if (!grouping) { canvasInstance.cancel(); } canvasInstance.group({ enabled: !grouping }); groupObjects(!grouping); }, RESET_GROUP: (event: KeyboardEvent | undefined) => { preventDefault(event); const grouping = activeControl === ActiveControl.GROUP; if (!grouping) { return; } resetGroup(); canvasInstance.group({ enabled: false }); groupObjects(false); }, }; subKeyMap = { ...subKeyMap, PASTE_SHAPE: keyMap.PASTE_SHAPE, SWITCH_DRAW_MODE: keyMap.SWITCH_DRAW_MODE, SWITCH_MERGE_MODE: keyMap.SWITCH_MERGE_MODE, SWITCH_SPLIT_MODE: keyMap.SWITCH_SPLIT_MODE, SWITCH_GROUP_MODE: keyMap.SWITCH_GROUP_MODE, RESET_GROUP: keyMap.RESET_GROUP, }; } return (


); }