Migration to mousetrap, redesigned visualization settings

CHANGELOG.md

@@ -30,6 +30,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - All methods for interative segmentation accept negative points as well
 - Persistent queue added to logstash (<https://github.com/openvinotoolkit/cvat/pull/2744>)
 - Improved maintanance of popups visibility (<https://github.com/openvinotoolkit/cvat/pull/2809>)
+- Image visualizations settings on canvas for faster access (<https://github.com/openvinotoolkit/cvat/pull/2872>)
 
 ### Deprecated
 
@@ -56,6 +57,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Polygon editing using trailing point (<https://github.com/openvinotoolkit/cvat/pull/2808>)
 - Updated the path to python for DL models inside automatic annotation documentation (<https://github.com/openvinotoolkit/cvat/pull/2847>)
 - Fixed of receiving function variable (<https://github.com/openvinotoolkit/cvat/pull/2860>)
+- Shortcuts with CAPSLOCK enabled and with non-US languages activated (<https://github.com/openvinotoolkit/cvat/pull/2872>)
 
 ### Security
 

cvat-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.14.3",
+  "version": "1.15.0",
   "description": "CVAT single-page application",
   "main": "src/index.tsx",
   "scripts": {
@@ -20,6 +20,7 @@
     "@babel/preset-env": "^7.6.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.6.0",
+    "@types/mousetrap": "^1.6.5",
     "@typescript-eslint/eslint-plugin": "^4.5.0",
     "@typescript-eslint/parser": "^4.5.0",
     "babel-loader": "^8.0.6",
@@ -60,20 +61,20 @@
     "@types/redux-logger": "^3.0.8",
     "antd": "^4.12.2",
     "copy-to-clipboard": "^3.3.1",
-    "cvat-canvas3d": "file:../cvat-canvas3d",
     "cvat-canvas": "file:../cvat-canvas",
+    "cvat-canvas3d": "file:../cvat-canvas3d",
     "cvat-core": "file:../cvat-core",
     "dotenv-webpack": "^1.8.0",
     "error-stack-parser": "^2.0.6",
     "lodash": "^4.17.21",
     "moment": "^2.29.1",
+    "mousetrap": "^1.6.5",
     "platform": "^1.3.6",
     "prop-types": "^15.7.2",
     "react": "^16.14.0",
     "react-color": "^2.19.3",
     "react-cookie": "^4.0.3",
     "react-dom": "^16.14.0",
-    "react-hotkeys": "^2.0.0",
     "react-redux": "^7.2.2",
     "react-router": "^5.1.0",
     "react-router-dom": "^5.1.0",

cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-annotation-sidebar.tsx

@@ -1,9 +1,9 @@
-// Copyright (C) 2020 Intel Corporation
+// Copyright (C) 2020-2021 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
 import React, { useState, useEffect } from 'react';
-import { GlobalHotKeys, ExtendedKeyMapOptions } from 'react-hotkeys';
+import GlobalHotKeys, { KeyMap } from 'utils/mousetrap-react';
 import { connect } from 'react-redux';
 import Layout, { SiderProps } from 'antd/lib/layout';
 import { SelectValue } from 'antd/lib/select';
@@ -35,7 +35,7 @@ interface StateToProps {
     states: any[];
     labels: any[];
     jobInstance: any;
-    keyMap: Record<string, ExtendedKeyMapOptions>;
+    keyMap: KeyMap;
     normalizedKeyMap: Record<string, string>;
     canvasInstance: Canvas;
     canvasIsReady: boolean;
@@ -295,7 +295,7 @@ function AttributeAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.
                 >
                     {sidebarCollapsed ? <MenuFoldOutlined title='Show' /> : <MenuUnfoldOutlined title='Hide' />}
                 </span>
-                <GlobalHotKeys keyMap={subKeyMap} handlers={handlers} allowChanges />
+                <GlobalHotKeys keyMap={subKeyMap} handlers={handlers} />
                 <Row>
                     <Col span={24}>
                         <AnnotationsFiltersInput />

cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-editor.tsx

@@ -1,9 +1,9 @@
-// Copyright (C) 2020 Intel Corporation
+// Copyright (C) 2020-2021 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
 import React from 'react';
-import { GlobalHotKeys, KeyMap } from 'react-hotkeys';
+import GlobalHotKeys, { KeyMap } from 'utils/mousetrap-react';
 import Text from 'antd/lib/typography/Text';
 import Checkbox, { CheckboxChangeEvent } from 'antd/lib/checkbox';
 import Select, { SelectValue } from 'antd/lib/select';
@@ -150,7 +150,7 @@ function renderList(parameters: ListParameters): JSX.Element | null {
             keyMap[key] = {
                 name: `Set value "${value}"`,
                 description: `Change current value for the attribute to "${value}"`,
-                sequence: `${index}`,
+                sequences: [`${index}`],
                 action: 'keydown',
             };
 
@@ -165,7 +165,7 @@ function renderList(parameters: ListParameters): JSX.Element | null {
 
         return (
             <div className='attribute-annotation-sidebar-attr-list-wrapper'>
-                <GlobalHotKeys keyMap={keyMap as KeyMap} handlers={handlers} allowChanges />
+                <GlobalHotKeys keyMap={keyMap} handlers={handlers} />
                 <div>
                     <Text strong>0:</Text>
                     <Text>{` ${sortedValues[0]}`}</Text>
@@ -190,7 +190,7 @@ function renderList(parameters: ListParameters): JSX.Element | null {
             keyMap[key] = {
                 name: `Set value "${value}"`,
                 description: `Change current value for the attribute to "${value}"`,
-                sequence: `${index}`,
+                sequences: [`${index}`],
                 action: 'keydown',
             };
 
@@ -205,7 +205,7 @@ function renderList(parameters: ListParameters): JSX.Element | null {
 
         return (
             <div className='attribute-annotation-sidebar-attr-list-wrapper'>
-                <GlobalHotKeys keyMap={keyMap as KeyMap} handlers={handlers} allowChanges />
+                <GlobalHotKeys keyMap={keyMap} handlers={handlers} />
                 {filteredValues.map(
                     (value: string, index: number): JSX.Element => (
                         <div key={value}>

cvat-ui/src/components/annotation-page/canvas/canvas-wrapper.tsx

@@ -3,10 +3,11 @@
 // SPDX-License-Identifier: MIT
 
 import React from 'react';
-import { GlobalHotKeys, ExtendedKeyMapOptions } from 'react-hotkeys';
+import GlobalHotKeys, { KeyMap } from 'utils/mousetrap-react';
 import Layout from 'antd/lib/layout';
 import Slider from 'antd/lib/slider';
-import { PlusCircleOutlined } from '@ant-design/icons';
+import Dropdown from 'antd/lib/dropdown';
+import { PlusCircleOutlined, UpOutlined } from '@ant-design/icons';
 
 import {
     ColorBy, GridColor, ObjectType, ContextMenuType, Workspace, ShapeType,
@@ -16,6 +17,7 @@ import { Canvas } from 'cvat-canvas-wrapper';
 import getCore from 'cvat-core-wrapper';
 import consts from 'consts';
 import CVATTooltip from 'components/common/cvat-tooltip';
+import ImageSetupsContent from './image-setups-content';
 
 const cvat = getCore();
 
@@ -59,7 +61,7 @@ interface Props {
     showAllInterpolationTracks: boolean;
     workspace: Workspace;
     automaticBordering: boolean;
-    keyMap: Record<string, ExtendedKeyMapOptions>;
+    keyMap: KeyMap;
     canvasBackgroundColor: string;
     switchableAutomaticBordering: boolean;
     onSetupCanvas: () => void;
@@ -762,21 +764,9 @@ export default class CanvasWrapperComponent extends React.PureComponent<Props> {
             minZLayer,
             onSwitchZLayer,
             onAddZLayer,
-            brightnessLevel,
-            contrastLevel,
-            saturationLevel,
             keyMap,
-            grid,
-            gridColor,
-            gridOpacity,
             switchableAutomaticBordering,
             automaticBordering,
-            onChangeBrightnessLevel,
-            onChangeSaturationLevel,
-            onChangeContrastLevel,
-            onChangeGridColor,
-            onChangeGridOpacity,
-            onSwitchGrid,
             onSwitchAutomaticBordering,
         } = this.props;
 
@@ -787,91 +777,10 @@ export default class CanvasWrapperComponent extends React.PureComponent<Props> {
         };
 
         const subKeyMap = {
-            INCREASE_BRIGHTNESS: keyMap.INCREASE_BRIGHTNESS,
-            DECREASE_BRIGHTNESS: keyMap.DECREASE_BRIGHTNESS,
-            INCREASE_CONTRAST: keyMap.INCREASE_CONTRAST,
-            DECREASE_CONTRAST: keyMap.DECREASE_CONTRAST,
-            INCREASE_SATURATION: keyMap.INCREASE_SATURATION,
-            DECREASE_SATURATION: keyMap.DECREASE_SATURATION,
-            INCREASE_GRID_OPACITY: keyMap.INCREASE_GRID_OPACITY,
-            DECREASE_GRID_OPACITY: keyMap.DECREASE_GRID_OPACITY,
-            CHANGE_GRID_COLOR: keyMap.CHANGE_GRID_COLOR,
             SWITCH_AUTOMATIC_BORDERING: keyMap.SWITCH_AUTOMATIC_BORDERING,
         };
 
-        const step = 10;
         const handlers = {
-            INCREASE_BRIGHTNESS: (event: KeyboardEvent | undefined) => {
-                preventDefault(event);
-                const maxLevel = 200;
-                if (brightnessLevel < maxLevel) {
-                    onChangeBrightnessLevel(Math.min(brightnessLevel + step, maxLevel));
-                }
-            },
-            DECREASE_BRIGHTNESS: (event: KeyboardEvent | undefined) => {
-                preventDefault(event);
-                const minLevel = 50;
-                if (brightnessLevel > minLevel) {
-                    onChangeBrightnessLevel(Math.max(brightnessLevel - step, minLevel));
-                }
-            },
-            INCREASE_CONTRAST: (event: KeyboardEvent | undefined) => {
-                preventDefault(event);
-                const maxLevel = 200;
-                if (contrastLevel < maxLevel) {
-                    onChangeContrastLevel(Math.min(contrastLevel + step, maxLevel));
-                }
-            },
-            DECREASE_CONTRAST: (event: KeyboardEvent | undefined) => {
-                preventDefault(event);
-                const minLevel = 50;
-                if (contrastLevel > minLevel) {
-                    onChangeContrastLevel(Math.max(contrastLevel - step, minLevel));
-                }
-            },
-            INCREASE_SATURATION: (event: KeyboardEvent | undefined) => {
-                preventDefault(event);
-                const maxLevel = 300;
-                if (saturationLevel < maxLevel) {
-                    onChangeSaturationLevel(Math.min(saturationLevel + step, maxLevel));
-                }
-            },
-            DECREASE_SATURATION: (event: KeyboardEvent | undefined) => {
-                preventDefault(event);
-                const minLevel = 0;
-                if (saturationLevel > minLevel) {
-                    onChangeSaturationLevel(Math.max(saturationLevel - step, minLevel));
-                }
-            },
-            INCREASE_GRID_OPACITY: (event: KeyboardEvent | undefined) => {
-                preventDefault(event);
-                const maxLevel = 100;
-                if (!grid) {
-                    onSwitchGrid(true);
-                }
-
-                if (gridOpacity < maxLevel) {
-                    onChangeGridOpacity(Math.min(gridOpacity + step, maxLevel));
-                }
-            },
-            DECREASE_GRID_OPACITY: (event: KeyboardEvent | undefined) => {
-                preventDefault(event);
-                const minLevel = 0;
-                if (gridOpacity - step <= minLevel) {
-                    onSwitchGrid(false);
-                }
-
-                if (gridOpacity > minLevel) {
-                    onChangeGridOpacity(Math.max(gridOpacity - step, minLevel));
-                }
-            },
-            CHANGE_GRID_COLOR: (event: KeyboardEvent | undefined) => {
-                preventDefault(event);
-                const colors = [GridColor.Black, GridColor.Blue, GridColor.Green, GridColor.Red, GridColor.White];
-                const indexOf = colors.indexOf(gridColor) + 1;
-                const color = colors[indexOf >= colors.length ? 0 : indexOf];
-                onChangeGridColor(color);
-            },
             SWITCH_AUTOMATIC_BORDERING: (event: KeyboardEvent | undefined) => {
                 if (switchableAutomaticBordering) {
                     preventDefault(event);
@@ -882,7 +791,7 @@ export default class CanvasWrapperComponent extends React.PureComponent<Props> {
 
         return (
             <Layout.Content style={{ position: 'relative' }}>
-                <GlobalHotKeys keyMap={subKeyMap} handlers={handlers} allowChanges />
+                <GlobalHotKeys keyMap={subKeyMap} handlers={handlers} />
                 {/*
                     This element doesn't have any props
                     So, React isn't going to rerender it
@@ -896,6 +805,11 @@ export default class CanvasWrapperComponent extends React.PureComponent<Props> {
                         height: '100%',
                     }}
                 />
+
+                <Dropdown trigger='click' placement='topCenter' overlay={<ImageSetupsContent />}>
+                    <UpOutlined className='cvat-canvas-image-setups-trigger' />
+                </Dropdown>
+
                 <div className='cvat-canvas-z-axis-wrapper'>
                     <Slider
                         disabled={minZLayer === maxZLayer}

cvat-ui/src/components/annotation-page/canvas/canvas-wrapper3D.tsx

@@ -3,7 +3,6 @@
 // SPDX-License-Identifier: MIT
 
 import React, { ReactElement, useEffect, useRef } from 'react';
-import { GlobalHotKeys } from 'react-hotkeys';
 import Layout from 'antd/lib/layout/layout';
 import {
     ArrowUpOutlined, ArrowRightOutlined, ArrowLeftOutlined, ArrowDownOutlined,
@@ -155,8 +154,6 @@ const CanvasWrapperComponent = (props: Props): ReactElement => {
 
     return (
         <Layout.Content className='cvat-canvas3d-fullsize'>
-            <GlobalHotKeys />
-
             <ContextImage
                 frame={frameData}
                 contextImageHide={contextImageHide}