diff --git a/cvat-ui/package-lock.json b/cvat-ui/package-lock.json index 1cd51dc77197..0bd69313f3de 100644 --- a/cvat-ui/package-lock.json +++ b/cvat-ui/package-lock.json @@ -1,6 +1,6 @@ { "name": "cvat-ui", - "version": "1.13.0", + "version": "1.13.1", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -28698,9 +28698,9 @@ } }, "rc-virtual-list": { - "version": "3.2.2", - "resolved": "https://registry.npmjs.org/rc-virtual-list/-/rc-virtual-list-3.2.2.tgz", - "integrity": "sha512-OepvZDQGUbQQBFk5m2Ds32rfO/tSj9gZkLbzwaIw/hwGgvatDmW+j97YQvFkUQp/XDgdSGcfFfj/6XTKpz0J4g==", + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/rc-virtual-list/-/rc-virtual-list-3.2.3.tgz", + "integrity": "sha512-uEeYDQWwQhxR97SekPeGRbzPtHSbSpw/mYb6QpZZ9bA43kf7s1socV3fD3ySYhQVzo0I+/IUD9jFGit6FbM0WA==", "requires": { "classnames": "^2.2.6", "rc-resize-observer": "^0.2.3", diff --git a/cvat-ui/package.json b/cvat-ui/package.json index 29ab177026cb..f532bcc01a1a 100644 --- a/cvat-ui/package.json +++ b/cvat-ui/package.json @@ -1,6 +1,6 @@ { "name": "cvat-ui", - "version": "1.13.0", + "version": "1.13.1", "description": "CVAT single-page application", "main": "src/index.tsx", "scripts": { @@ -68,6 +68,7 @@ "moment": "^2.29.1", "platform": "^1.3.6", "prop-types": "^15.7.2", + "rc-virtual-list": "^3.2.3", "react": "^16.14.0", "react-color": "^2.19.3", "react-cookie": "^4.0.3", 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 8782eb18376c..10f0b5961c48 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 @@ -125,14 +125,16 @@ function AttributeAnnotationSidebar(props: StateToProps & DispatchToProps): JSX. const collapse = (): void => { const [collapser] = window.document.getElementsByClassName('attribute-annotation-sidebar'); + const listener = (event: TransitionEvent): void => { + if (event.target && event.propertyName === 'width' && event.target === collapser) { + canvasInstance.fitCanvas(); + canvasInstance.fit(); + (collapser as HTMLElement).removeEventListener('transitionend', listener as any); + } + }; + if (collapser) { - collapser.addEventListener( - 'transitionend', - () => { - canvasInstance.fitCanvas(); - }, - { once: true }, - ); + (collapser as HTMLElement).addEventListener('transitionend', listener as any); } setSidebarCollapsed(!sidebarCollapsed); 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 feaef8c523f3..c5288a9b7132 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 } from 'react'; +import React, { Dispatch, useEffect, TransitionEvent } from 'react'; import { AnyAction } from 'redux'; import { connect } from 'react-redux'; import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'; @@ -81,24 +81,22 @@ function ObjectsSideBar(props: StateToProps & DispatchToProps & OwnProps): JSX.E }; }, []); - useEffect(() => { - const listener = (event: Event): void => { - if ( - (event as TransitionEvent).propertyName === 'width' && - ((event.target as any).classList as DOMTokenList).contains('ant-tabs-tab-prev') - ) { + const collapse = (): void => { + const [collapser] = window.document.getElementsByClassName('cvat-objects-sidebar'); + const listener = (event: TransitionEvent): void => { + if (event.target && event.propertyName === 'width' && event.target === collapser) { + canvasInstance.fitCanvas(); canvasInstance.fit(); + (collapser as HTMLElement).removeEventListener('transitionend', listener as any); } }; - const [sidebar] = window.document.getElementsByClassName('cvat-objects-sidebar'); - - sidebar.addEventListener('transitionstart', listener); + if (collapser) { + (collapser as HTMLElement).addEventListener('transitionend', listener as any); + } - return () => { - sidebar.removeEventListener('transitionstart', listener); - }; - }, []); + collapseSidebar(); + }; return ( {sidebarCollapsed ? : } diff --git a/cvat-ui/src/components/projects-page/project-list.tsx b/cvat-ui/src/components/projects-page/project-list.tsx index 5ff8b2ff19c0..1d7138902dac 100644 --- a/cvat-ui/src/components/projects-page/project-list.tsx +++ b/cvat-ui/src/components/projects-page/project-list.tsx @@ -58,6 +58,7 @@ export default function ProjectListComponent(): JSX.Element { - +