// Copyright (C) 2020-2022 Intel Corporation // // SPDX-License-Identifier: MIT import React from 'react'; import Layout from 'antd/lib/layout'; import { ActiveControl, ObjectType, Rotation, ShapeType, } from 'reducers'; import GlobalHotKeys, { KeyMap } from 'utils/mousetrap-react'; import { Canvas } from 'cvat-canvas-wrapper'; import { Label } from 'components/labels-editor/common'; 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 DrawEllipseControl, { Props as DrawEllipseControlProps } from './draw-ellipse-control'; import DrawCuboidControl, { Props as DrawCuboidControlProps } from './draw-cuboid-control'; import DrawSkeletonControl, { Props as DrawSkeletonControlProps } from './draw-skeleton-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[]; frameData: 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 ObservedDrawEllipseControl = ControlVisibilityObserver(DrawEllipseControl); const ObservedDrawCuboidControl = ControlVisibilityObserver(DrawCuboidControl); const ObservedDrawSkeletonControl = ControlVisibilityObserver(DrawSkeletonControl); 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, frameData, } = props; const controlsDisabled = !labels.length || frameData.deleted; const withUnspecifiedType = labels.some((label: any) => label.type === 'any' && !label.hasParent); let rectangleControlVisible = withUnspecifiedType; let polygonControlVisible = withUnspecifiedType; let polylineControlVisible = withUnspecifiedType; let pointsControlVisible = withUnspecifiedType; let ellipseControlVisible = withUnspecifiedType; let cuboidControlVisible = withUnspecifiedType; let tagControlVisible = withUnspecifiedType; const skeletonControlVisible = labels.some((label: Label) => label.type === 'skeleton'); labels.forEach((label: Label) => { rectangleControlVisible = rectangleControlVisible || label.type === ShapeType.RECTANGLE; polygonControlVisible = polygonControlVisible || label.type === ShapeType.POLYGON; polylineControlVisible = polylineControlVisible || label.type === ShapeType.POLYLINE; pointsControlVisible = pointsControlVisible || label.type === ShapeType.POINTS; ellipseControlVisible = ellipseControlVisible || label.type === ShapeType.ELLIPSE; cuboidControlVisible = cuboidControlVisible || label.type === ShapeType.CUBOID; tagControlVisible = tagControlVisible || label.type === ObjectType.TAG; }); 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 (!controlsDisabled) { 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.DRAW_ELLIPSE, ActiveControl.DRAW_SKELETON, 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 (

{ rectangleControlVisible && ( ) } { polygonControlVisible && ( ) } { polylineControlVisible && ( ) } { pointsControlVisible && ( ) } { ellipseControlVisible && ( ) } { cuboidControlVisible && ( ) } { skeletonControlVisible && ( ) } { tagControlVisible && ( ) }
); }