From 5bb26ce669c213a1ef869c7e375e10c7ce206d05 Mon Sep 17 00:00:00 2001 From: Boris Sekachev Date: Tue, 8 Jun 2021 09:54:35 +0300 Subject: [PATCH] Some JS code was simplified by using css, a reported issue was fixed in this way (#3289) * Some JS code was simplified by using css * Updated version & changelog * Fixed shortcut --- CHANGELOG.md | 1 + cvat-ui/package-lock.json | 2 +- cvat-ui/package.json | 2 +- cvat-ui/src/actions/annotation-actions.ts | 10 ------ .../annotation-page/appearance-block.tsx | 33 +---------------- .../attribute-annotation-sidebar.tsx | 5 ++- .../attribute-editor.tsx | 2 +- .../styles.scss | 12 ++++++- .../context-image/context-image.tsx | 13 +++++++ .../objects-side-bar/issues-list.tsx | 5 ++- .../objects-side-bar/labels-list.tsx | 3 +- .../objects-side-bar/objects-list.tsx | 8 ++--- .../objects-side-bar/objects-side-bar.tsx | 36 +++++-------------- .../objects-side-bar/styles.scss | 2 -- .../standard-workspace/styles.scss | 17 +++++++++ .../tag-annotation-workspace/styles.scss | 2 +- .../tag-annotation-sidebar.tsx | 14 ++++++-- .../objects-side-bar/objects-list.tsx | 8 ++--- cvat-ui/src/reducers/annotation-reducer.ts | 8 ----- cvat-ui/src/reducers/interfaces.ts | 1 - cvat-ui/src/reducers/shortcuts-reducer.ts | 5 +-- cvat-ui/src/utils/mousetrap-react.tsx | 1 + 22 files changed, 82 insertions(+), 108 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ad5bde75..836a26f9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -32,6 +32,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Incorrect attribute import in tracks () - Issue "is not a constructor" when create object, save, undo, save, redo save () - Fix CLI create an infinite loop if git repository responds with failure () +- Bug with sidebar & fullscreen () ### Security diff --git a/cvat-ui/package-lock.json b/cvat-ui/package-lock.json index 5d50c541..e7741951 100644 --- a/cvat-ui/package-lock.json +++ b/cvat-ui/package-lock.json @@ -1,6 +1,6 @@ { "name": "cvat-ui", - "version": "1.20.2", + "version": "1.20.3", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/cvat-ui/package.json b/cvat-ui/package.json index 4e2c15b1..578538b8 100644 --- a/cvat-ui/package.json +++ b/cvat-ui/package.json @@ -1,6 +1,6 @@ { "name": "cvat-ui", - "version": "1.20.2", + "version": "1.20.3", "description": "CVAT single-page application", "main": "src/index.tsx", "scripts": { diff --git a/cvat-ui/src/actions/annotation-actions.ts b/cvat-ui/src/actions/annotation-actions.ts index 4e346c13..1e03fee8 100644 --- a/cvat-ui/src/actions/annotation-actions.ts +++ b/cvat-ui/src/actions/annotation-actions.ts @@ -146,7 +146,6 @@ export enum AnnotationActionTypes { GROUP_ANNOTATIONS_FAILED = 'GROUP_ANNOTATIONS_FAILED', SPLIT_ANNOTATIONS_SUCCESS = 'SPLIT_ANNOTATIONS_SUCCESS', SPLIT_ANNOTATIONS_FAILED = 'SPLIT_ANNOTATIONS_FAILED', - UPDATE_TAB_CONTENT_HEIGHT = 'UPDATE_TAB_CONTENT_HEIGHT', COLLAPSE_SIDEBAR = 'COLLAPSE_SIDEBAR', COLLAPSE_APPEARANCE = 'COLLAPSE_APPEARANCE', COLLAPSE_OBJECT_ITEMS = 'COLLAPSE_OBJECT_ITEMS', @@ -576,15 +575,6 @@ export function activateObject(activatedStateID: number | null, activatedAttribu }; } -export function updateTabContentHeight(tabContentHeight: number): AnyAction { - return { - type: AnnotationActionTypes.UPDATE_TAB_CONTENT_HEIGHT, - payload: { - tabContentHeight, - }, - }; -} - export function collapseSidebar(): AnyAction { return { type: AnnotationActionTypes.COLLAPSE_SIDEBAR, diff --git a/cvat-ui/src/components/annotation-page/appearance-block.tsx b/cvat-ui/src/components/annotation-page/appearance-block.tsx index a2adabab..e3edd85d 100644 --- a/cvat-ui/src/components/annotation-page/appearance-block.tsx +++ b/cvat-ui/src/components/annotation-page/appearance-block.tsx @@ -15,10 +15,7 @@ import Button from 'antd/lib/button'; import ColorPicker from 'components/annotation-page/standard-workspace/objects-side-bar/color-picker'; import { ColorizeIcon } from 'icons'; import { ColorBy, CombinedState, DimensionType } from 'reducers/interfaces'; -import { - collapseAppearance as collapseAppearanceAction, - updateTabContentHeight as updateTabContentHeightAction, -} from 'actions/annotation-actions'; +import { collapseAppearance as collapseAppearanceAction } from 'actions/annotation-actions'; import { changeShapesColorBy as changeShapesColorByAction, changeShapesOpacity as changeShapesOpacityAction, @@ -50,21 +47,6 @@ interface DispatchToProps { changeShowProjections(event: CheckboxChangeEvent): void; } -export function computeHeight(): number { - const [sidebar] = window.document.getElementsByClassName('cvat-objects-sidebar'); - const [appearance] = window.document.getElementsByClassName('cvat-objects-appearance-collapse'); - const [tabs] = Array.from(window.document.querySelectorAll('.cvat-objects-sidebar-tabs > .ant-tabs-nav')); - - if (sidebar && appearance && tabs) { - const maxHeight = sidebar ? sidebar.clientHeight : 0; - const appearanceHeight = appearance ? appearance.clientHeight : 0; - const tabsHeight = tabs ? tabs.clientHeight : 0; - return maxHeight - appearanceHeight - tabsHeight; - } - - return 0; -} - function mapStateToProps(state: CombinedState): StateToProps { const { annotation: { @@ -95,19 +77,6 @@ function mapDispatchToProps(dispatch: Dispatch): DispatchToProps { return { collapseAppearance(): void { dispatch(collapseAppearanceAction()); - const [collapser] = window.document.getElementsByClassName('cvat-objects-appearance-collapse'); - - if (collapser) { - const listener = (event: Event): void => { - if ((event as TransitionEvent).propertyName === 'height') { - const height = computeHeight(); - dispatch(updateTabContentHeightAction(height)); - collapser.removeEventListener('transitionend', listener); - } - }; - - collapser.addEventListener('transitionend', listener); - } }, changeShapesColorBy(event: RadioChangeEvent): void { dispatch(changeShapesColorByAction(event.target.value)); diff --git a/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-annotation-sidebar.tsx b/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-annotation-sidebar.tsx index 155eeeeb..4b70c1a1 100644 --- a/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-annotation-sidebar.tsx +++ b/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-annotation-sidebar.tsx @@ -10,6 +10,7 @@ import Layout, { SiderProps } from 'antd/lib/layout'; import Text from 'antd/lib/typography/Text'; import { Canvas } from 'cvat-canvas-wrapper'; +import { Canvas3d } from 'cvat-canvas3d-wrapper'; import { LogType } from 'cvat-logger'; import { activateObject as activateObjectAction, @@ -20,6 +21,7 @@ import GlobalHotKeys, { KeyMap } from 'utils/mousetrap-react'; import { ThunkDispatch } from 'utils/redux'; import AppearanceBlock from 'components/annotation-page/appearance-block'; import ObjectButtonsContainer from 'containers/annotation-page/standard-workspace/objects-side-bar/object-buttons'; +import { adjustContextImagePosition } from 'components/annotation-page/standard-workspace/context-image/context-image'; import { CombinedState, ObjectType } from 'reducers/interfaces'; import AttributeEditor from './attribute-editor'; import AttributeSwitcher from './attribute-switcher'; @@ -34,7 +36,7 @@ interface StateToProps { jobInstance: any; keyMap: KeyMap; normalizedKeyMap: Record; - canvasInstance: Canvas; + canvasInstance: Canvas | Canvas3d; canvasIsReady: boolean; curZLayer: number; } @@ -134,6 +136,7 @@ function AttributeAnnotationSidebar(props: StateToProps & DispatchToProps): JSX. (collapser as HTMLElement).addEventListener('transitionend', listener as any); } + adjustContextImagePosition(!sidebarCollapsed); setSidebarCollapsed(!sidebarCollapsed); }; diff --git a/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-editor.tsx b/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-editor.tsx index 82bc9407..aba08979 100644 --- a/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-editor.tsx +++ b/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-editor.tsx @@ -255,7 +255,7 @@ function AttributeEditor(props: Props): JSX.Element { const { inputType, values, id: attrID } = attribute; return ( -
+
{renderList({ values, inputType, onChange })}
{renderInputElement({ diff --git a/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/styles.scss b/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/styles.scss index 99ce043d..e9daa708 100644 --- a/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/styles.scss +++ b/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/styles.scss @@ -8,9 +8,14 @@ height: 100%; } -.attribute-annotation-sidebar { +.attribute-annotation-sidebar:not(.ant-layout-sider-collapsed) { background: $background-color-2; padding: 5px; + + > .ant-layout-sider-children { + display: flex; + flex-direction: column; + } } .cvat-attribute-annotation-sidebar-object-switcher, @@ -43,6 +48,11 @@ .attribute-annotations-sidebar-not-found-wrapper { margin-top: 20px; text-align: center; + flex-grow: 10; +} + +.attribute-annotations-sidebar-attribute-editor { + flex-grow: 10; } .attribute-annotation-sidebar-attr-list-wrapper { diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/context-image/context-image.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/context-image/context-image.tsx index f2dbfccd..803674af 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/context-image/context-image.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/context-image/context-image.tsx @@ -13,6 +13,19 @@ import { CombinedState } from 'reducers/interfaces'; import { hideShowContextImage, getContextImage } from 'actions/annotation-actions'; import CVATTooltip from 'components/common/cvat-tooltip'; +export function adjustContextImagePosition(sidebarCollapsed: boolean): void { + const element = window.document.getElementsByClassName('cvat-context-image-wrapper')[0] as + | HTMLDivElement + | undefined; + if (element) { + if (sidebarCollapsed) { + element.style.right = '40px'; + } else { + element.style.right = ''; + } + } +} + export default function ContextImage(): JSX.Element | null { const dispatch = useDispatch(); const { number: frame, hasRelatedContext } = useSelector((state: CombinedState) => state.annotation.player.frame); diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/issues-list.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/issues-list.tsx index ffd78023..1504cd63 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/issues-list.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/issues-list.tsx @@ -17,7 +17,6 @@ import { CombinedState } from 'reducers/interfaces'; export default function LabelsListComponent(): JSX.Element { const dispatch = useDispatch(); - const tabContentHeight = useSelector((state: CombinedState) => state.annotation.tabContentHeight); const frame = useSelector((state: CombinedState): number => state.annotation.player.frame.number); const frameIssues = useSelector((state: CombinedState): any[] => state.review.frameIssues); const issues = useSelector((state: CombinedState): any[] => state.review.issues); @@ -50,7 +49,7 @@ export default function LabelsListComponent(): JSX.Element { }; return ( -
+ <>
@@ -122,6 +121,6 @@ export default function LabelsListComponent(): JSX.Element { ), )}
-
+ ); } diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/labels-list.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/labels-list.tsx index 99ee07ea..f6d3a132 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/labels-list.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/labels-list.tsx @@ -14,7 +14,6 @@ import GlobalHotKeys from 'utils/mousetrap-react'; function LabelsListComponent(): JSX.Element { const dispatch = useDispatch(); const labels = useSelector((state: CombinedState) => state.annotation.job.labels); - const listHeight = useSelector((state: CombinedState) => state.annotation.tabContentHeight); const activatedStateID = useSelector((state: CombinedState) => state.annotation.annotations.activatedStateID); const states = useSelector((state: CombinedState) => state.annotation.annotations.states); const keyMap = useSelector((state: CombinedState) => state.shortcuts.keyMap); @@ -87,7 +86,7 @@ function LabelsListComponent(): JSX.Element { }; return ( -
+
{labelIDs.map( (labelID: number): JSX.Element => ( diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx index abacb02e..2036673e 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx @@ -1,4 +1,4 @@ -// Copyright (C) 2020 Intel Corporation +// Copyright (C) 2020-2021 Intel Corporation // // SPDX-License-Identifier: MIT @@ -10,7 +10,6 @@ import ObjectListHeader from './objects-list-header'; interface Props { readonly: boolean; - listHeight: number; statesHidden: boolean; statesLocked: boolean; statesCollapsedAll: boolean; @@ -31,7 +30,6 @@ interface Props { function ObjectListComponent(props: Props): JSX.Element { const { readonly, - listHeight, statesHidden, statesLocked, statesCollapsedAll, @@ -50,7 +48,7 @@ function ObjectListComponent(props: Props): JSX.Element { } = props; return ( -
+ <> -
+ ); } diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-side-bar.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-side-bar.tsx index 6d15c3ce..d28d294d 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-side-bar.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-side-bar.tsx @@ -3,7 +3,7 @@ // SPDX-License-Identifier: MIT import './styles.scss'; -import React, { Dispatch, useEffect, TransitionEvent } from 'react'; +import React, { Dispatch, TransitionEvent } from 'react'; import { AnyAction } from 'redux'; import { connect } from 'react-redux'; import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'; @@ -12,13 +12,12 @@ import Tabs from 'antd/lib/tabs'; import Layout from 'antd/lib/layout'; import { Canvas } from 'cvat-canvas-wrapper'; +import { Canvas3d } from 'cvat-canvas3d-wrapper'; import { CombinedState } from 'reducers/interfaces'; import LabelsList from 'components/annotation-page/standard-workspace/objects-side-bar/labels-list'; -import { - collapseSidebar as collapseSidebarAction, - updateTabContentHeight as updateTabContentHeightAction, -} from 'actions/annotation-actions'; -import AppearanceBlock, { computeHeight } from 'components/annotation-page/appearance-block'; +import { adjustContextImagePosition } from 'components/annotation-page/standard-workspace/context-image/context-image'; +import { collapseSidebar as collapseSidebarAction } from 'actions/annotation-actions'; +import AppearanceBlock from 'components/annotation-page/appearance-block'; import IssuesListComponent from 'components/annotation-page/standard-workspace/objects-side-bar/issues-list'; interface OwnProps { @@ -27,12 +26,11 @@ interface OwnProps { interface StateToProps { sidebarCollapsed: boolean; - canvasInstance: Canvas; + canvasInstance: Canvas | Canvas3d; } interface DispatchToProps { collapseSidebar(): void; - updateTabContentHeight(): void; } function mapStateToProps(state: CombinedState): StateToProps { @@ -54,33 +52,14 @@ function mapDispatchToProps(dispatch: Dispatch): DispatchToProps { collapseSidebar(): void { dispatch(collapseSidebarAction()); }, - updateTabContentHeight(): void { - const height = computeHeight(); - dispatch(updateTabContentHeightAction(height)); - }, }; } function ObjectsSideBar(props: StateToProps & DispatchToProps & OwnProps): JSX.Element { const { - sidebarCollapsed, canvasInstance, collapseSidebar, updateTabContentHeight, objectsList, + sidebarCollapsed, canvasInstance, collapseSidebar, objectsList, } = props; - useEffect(() => { - const alignTabHeight = (): void => { - if (!sidebarCollapsed) { - updateTabContentHeight(); - } - }; - - window.addEventListener('resize', alignTabHeight); - alignTabHeight(); - - return () => { - window.removeEventListener('resize', alignTabHeight); - }; - }, []); - const collapse = (): void => { const [collapser] = window.document.getElementsByClassName('cvat-objects-sidebar'); const listener = (event: TransitionEvent): void => { @@ -95,6 +74,7 @@ function ObjectsSideBar(props: StateToProps & DispatchToProps & OwnProps): JSX.E (collapser as HTMLElement).addEventListener('transitionend', listener as any); } + adjustContextImagePosition(!sidebarCollapsed); collapseSidebar(); }; diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/styles.scss b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/styles.scss index 32baf4ab..667278fd 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/styles.scss +++ b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/styles.scss @@ -6,8 +6,6 @@ .cvat-objects-appearance-collapse.ant-collapse { width: 100%; - bottom: 0; - position: absolute; border-radius: 0; > .ant-collapse-item { diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/styles.scss b/cvat-ui/src/components/annotation-page/standard-workspace/styles.scss index 86e819ff..ccc6962f 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/styles.scss +++ b/cvat-ui/src/components/annotation-page/standard-workspace/styles.scss @@ -73,6 +73,23 @@ overflow-y: auto; overflow-x: hidden; + > .ant-layout-sider-children { + display: flex; + flex-direction: column; + + > .cvat-objects-sidebar-tabs { + flex-grow: 10; + + > div { + display: flex; + + div[role='tabpanel'] { + height: 100%; + } + } + } + } + &.ant-layout-sider-collapsed { overflow: initial; } diff --git a/cvat-ui/src/components/annotation-page/tag-annotation-workspace/styles.scss b/cvat-ui/src/components/annotation-page/tag-annotation-workspace/styles.scss index ce04f704..a7c18550 100644 --- a/cvat-ui/src/components/annotation-page/tag-annotation-workspace/styles.scss +++ b/cvat-ui/src/components/annotation-page/tag-annotation-workspace/styles.scss @@ -8,7 +8,7 @@ height: 100%; } -.cvat-tag-annotation-sidebar { +.cvat-tag-annotation-sidebar:not(.ant-layout-sider-collapsed) { background: $background-color-2; padding: 5px; diff --git a/cvat-ui/src/components/annotation-page/tag-annotation-workspace/tag-annotation-sidebar/tag-annotation-sidebar.tsx b/cvat-ui/src/components/annotation-page/tag-annotation-workspace/tag-annotation-sidebar/tag-annotation-sidebar.tsx index 2292c48e..c55e49f1 100644 --- a/cvat-ui/src/components/annotation-page/tag-annotation-workspace/tag-annotation-sidebar/tag-annotation-sidebar.tsx +++ b/cvat-ui/src/components/annotation-page/tag-annotation-workspace/tag-annotation-sidebar/tag-annotation-sidebar.tsx @@ -21,7 +21,9 @@ import { rememberObject, } from 'actions/annotation-actions'; import { Canvas } from 'cvat-canvas-wrapper'; +import { Canvas3d } from 'cvat-canvas3d-wrapper'; import { CombinedState, ObjectType } from 'reducers/interfaces'; +import { adjustContextImagePosition } from 'components/annotation-page/standard-workspace/context-image/context-image'; import LabelSelector from 'components/label-selector/label-selector'; import getCore from 'cvat-core-wrapper'; import GlobalHotKeys, { KeyMap } from 'utils/mousetrap-react'; @@ -33,7 +35,7 @@ interface StateToProps { states: any[]; labels: any[]; jobInstance: any; - canvasInstance: Canvas; + canvasInstance: Canvas | Canvas3d; frameNumber: number; keyMap: KeyMap; normalizedKeyMap: Record; @@ -203,7 +205,10 @@ function TagAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.Elemen className={`cvat-objects-sidebar-sider ant-layout-sider-zero-width-trigger ant-layout-sider-zero-width-trigger-left`} - onClick={() => setSidebarCollapsed(!sidebarCollapsed)} + onClick={() => { + adjustContextImagePosition(!sidebarCollapsed); + setSidebarCollapsed(!sidebarCollapsed); + }} > {sidebarCollapsed ? : } @@ -222,7 +227,10 @@ function TagAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.Elemen className={`cvat-objects-sidebar-sider ant-layout-sider-zero-width-trigger ant-layout-sider-zero-width-trigger-left`} - onClick={() => setSidebarCollapsed(!sidebarCollapsed)} + onClick={() => { + adjustContextImagePosition(!sidebarCollapsed); + setSidebarCollapsed(!sidebarCollapsed); + }} > {sidebarCollapsed ? : } diff --git a/cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx b/cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx index cb188132..b0d8acb7 100644 --- a/cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx +++ b/cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx @@ -17,6 +17,7 @@ import { propagateObject as propagateObjectAction, } from 'actions/annotation-actions'; import { Canvas } from 'cvat-canvas-wrapper'; +import { Canvas3d } from 'cvat-canvas3d-wrapper'; import { CombinedState, StatesOrdering, ObjectType, ColorBy, } from 'reducers/interfaces'; @@ -28,7 +29,6 @@ interface OwnProps { interface StateToProps { jobInstance: any; frameNumber: any; - listHeight: number; statesHidden: boolean; statesLocked: boolean; statesCollapsedAll: boolean; @@ -42,7 +42,7 @@ interface StateToProps { maxZLayer: number; keyMap: KeyMap; normalizedKeyMap: Record; - canvasInstance: Canvas; + canvasInstance: Canvas | Canvas3d; } interface DispatchToProps { @@ -71,7 +71,6 @@ function mapStateToProps(state: CombinedState): StateToProps { frame: { number: frameNumber }, }, canvas: { instance: canvasInstance }, - tabContentHeight: listHeight, colors, }, settings: { @@ -94,7 +93,6 @@ function mapStateToProps(state: CombinedState): StateToProps { }); return { - listHeight, statesHidden, statesLocked, statesCollapsedAll: collapsedAll, @@ -263,7 +261,6 @@ class ObjectsListContainer extends React.PureComponent { colors, colorBy, readonly, - listHeight, statesCollapsedAll, updateAnnotations, changeGroupColor, @@ -441,7 +438,6 @@ class ObjectsListContainer extends React.PureComponent { <> { appearanceCollapsed: !state.appearanceCollapsed, }; } - case AnnotationActionTypes.UPDATE_TAB_CONTENT_HEIGHT: { - const { tabContentHeight } = action.payload; - return { - ...state, - tabContentHeight, - }; - } case AnnotationActionTypes.COLLAPSE_OBJECT_ITEMS: { const { states, collapsed } = action.payload; diff --git a/cvat-ui/src/reducers/interfaces.ts b/cvat-ui/src/reducers/interfaces.ts index fc8a4034..9faf068b 100644 --- a/cvat-ui/src/reducers/interfaces.ts +++ b/cvat-ui/src/reducers/interfaces.ts @@ -489,7 +489,6 @@ export interface AnnotationState { submitReviewDialogVisible: boolean; sidebarCollapsed: boolean; appearanceCollapsed: boolean; - tabContentHeight: number; workspace: Workspace; predictor: PredictorState; aiToolsRef: MutableRefObject; diff --git a/cvat-ui/src/reducers/shortcuts-reducer.ts b/cvat-ui/src/reducers/shortcuts-reducer.ts index 1ae0e10a..5460080b 100644 --- a/cvat-ui/src/reducers/shortcuts-reducer.ts +++ b/cvat-ui/src/reducers/shortcuts-reducer.ts @@ -9,7 +9,7 @@ import { KeyMap, KeyMapItem } from 'utils/mousetrap-react'; import { ShortcutsState } from './interfaces'; function formatShortcuts(shortcuts: KeyMapItem): string { - const list: string[] = shortcuts.sequences as string[]; + const list: string[] = shortcuts.displayedSequences || (shortcuts.sequences as string[]); return `[${list .map((shortcut: string): string => { let keys = shortcut.split('+'); @@ -270,7 +270,8 @@ const defaultKeyMap = ({ FOCUS_INPUT_FRAME: { name: 'Focus input frame', description: 'Focus on the element to change the current frame', - sequences: ['~'], + sequences: ['`'], + displayedSequences: ['~'], action: 'keydown', }, SWITCH_AUTOMATIC_BORDERING: { diff --git a/cvat-ui/src/utils/mousetrap-react.tsx b/cvat-ui/src/utils/mousetrap-react.tsx index e8452e3d..e140105c 100644 --- a/cvat-ui/src/utils/mousetrap-react.tsx +++ b/cvat-ui/src/utils/mousetrap-react.tsx @@ -9,6 +9,7 @@ export interface KeyMapItem { name: string; description: string; sequences: string[]; + displayedSequences?: string[]; action: 'keydown' | 'keyup' | 'keypress'; }