Merge branch 'develop' into cvat-3D-M1

CHANGELOG.md

@@ -27,6 +27,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Memory consumption for the task creation process (<https://github.com/openvinotoolkit/cvat/pull/2582>)
 - Frame preloading (<https://github.com/openvinotoolkit/cvat/pull/2608>)
+- Project cannot be removed from the project page (<https://github.com/openvinotoolkit/cvat/pull/2626>)
 
 ### Security
 

cvat-canvas/src/typescript/canvas.ts

@@ -8,8 +8,8 @@ import {
     MergeData,
     SplitData,
     GroupData,
-    InteractionData,
-    InteractionResult,
+    InteractionData as _InteractionData,
+    InteractionResult as _InteractionResult,
     CanvasModel,
     CanvasModelImpl,
     RectDrawingMethod,
@@ -165,13 +165,9 @@ class CanvasImpl implements Canvas {
     }
 }
 
+export type InteractionData = _InteractionData;
+export type InteractionResult = _InteractionResult;
+
 export {
-    CanvasImpl as Canvas,
-    CanvasVersion,
-    Configuration,
-    RectDrawingMethod,
-    CuboidDrawingMethod,
-    Mode as CanvasMode,
-    InteractionData,
-    InteractionResult,
+    CanvasImpl as Canvas, CanvasVersion, RectDrawingMethod, CuboidDrawingMethod, Mode as CanvasMode,
 };

cvat-core/package.json

@@ -33,7 +33,7 @@
     "webpack-cli": "^3.3.2"
   },
   "dependencies": {
-    "axios": "^0.21.0",
+    "axios": "^0.21.1",
     "browser-or-node": "^1.2.1",
     "cvat-data": "../cvat-data",
     "detect-browser": "^5.2.0",

cvat-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.13.2",
+  "version": "1.13.3",
   "description": "CVAT single-page application",
   "main": "src/index.tsx",
   "scripts": {

cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-cuboid-control.tsx

@@ -12,6 +12,7 @@ import { ShapeType } from 'reducers/interfaces';
 import { CubeIcon } from 'icons';
 
 import DrawShapePopoverContainer from 'containers/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover';
+import withVisibilityHandling from './handle-popover-visibility';
 
 interface Props {
     canvasInstance: Canvas;
@@ -20,6 +21,7 @@ interface Props {
 
 function DrawPolygonControl(props: Props): JSX.Element {
     const { canvasInstance, isDrawing } = props;
+    const CustomPopover = withVisibilityHandling(Popover, 'draw-cuboid');
 
     const dynamcPopoverPros = isDrawing ?
         {
@@ -41,14 +43,14 @@ function DrawPolygonControl(props: Props): JSX.Element {
         };
 
     return (
-        <Popover
+        <CustomPopover
             {...dynamcPopoverPros}
             overlayClassName='cvat-draw-shape-popover'
             placement='right'
             content={<DrawShapePopoverContainer shapeType={ShapeType.CUBOID} />}
         >
             <Icon {...dynamicIconProps} component={CubeIcon} />
-        </Popover>
+        </CustomPopover>
     );
 }
 

cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-points-control.tsx

@@ -11,6 +11,7 @@ import { PointIcon } from 'icons';
 import { ShapeType } from 'reducers/interfaces';
 
 import DrawShapePopoverContainer from 'containers/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover';
+import withVisibilityHandling from './handle-popover-visibility';
 
 interface Props {
     canvasInstance: Canvas;
@@ -19,6 +20,7 @@ interface Props {
 
 function DrawPointsControl(props: Props): JSX.Element {
     const { canvasInstance, isDrawing } = props;
+    const CustomPopover = withVisibilityHandling(Popover, 'draw-points');
 
     const dynamcPopoverPros = isDrawing ?
         {
@@ -40,14 +42,14 @@ function DrawPointsControl(props: Props): JSX.Element {
         };
 
     return (
-        <Popover
+        <CustomPopover
             {...dynamcPopoverPros}
             overlayClassName='cvat-draw-shape-popover'
             placement='right'
             content={<DrawShapePopoverContainer shapeType={ShapeType.POINTS} />}
         >
             <Icon {...dynamicIconProps} component={PointIcon} />
-        </Popover>
+        </CustomPopover>
     );
 }
 

cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-polygon-control.tsx

@@ -11,6 +11,7 @@ import { PolygonIcon } from 'icons';
 import { ShapeType } from 'reducers/interfaces';
 
 import DrawShapePopoverContainer from 'containers/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover';
+import withVisibilityHandling from './handle-popover-visibility';
 
 interface Props {
     canvasInstance: Canvas;
@@ -19,6 +20,7 @@ interface Props {
 
 function DrawPolygonControl(props: Props): JSX.Element {
     const { canvasInstance, isDrawing } = props;
+    const CustomPopover = withVisibilityHandling(Popover, 'draw-polygon');
 
     const dynamcPopoverPros = isDrawing ?
         {
@@ -40,14 +42,14 @@ function DrawPolygonControl(props: Props): JSX.Element {
         };
 
     return (
-        <Popover
+        <CustomPopover
             {...dynamcPopoverPros}
             overlayClassName='cvat-draw-shape-popover'
             placement='right'
             content={<DrawShapePopoverContainer shapeType={ShapeType.POLYGON} />}
         >
             <Icon {...dynamicIconProps} component={PolygonIcon} />
-        </Popover>
+        </CustomPopover>
     );
 }
 

cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-polyline-control.tsx

@@ -11,6 +11,7 @@ import { PolylineIcon } from 'icons';
 import { ShapeType } from 'reducers/interfaces';
 
 import DrawShapePopoverContainer from 'containers/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover';
+import withVisibilityHandling from './handle-popover-visibility';
 
 interface Props {
     canvasInstance: Canvas;
@@ -19,6 +20,7 @@ interface Props {
 
 function DrawPolylineControl(props: Props): JSX.Element {
     const { canvasInstance, isDrawing } = props;
+    const CustomPopover = withVisibilityHandling(Popover, 'draw-polyline');
 
     const dynamcPopoverPros = isDrawing ?
         {
@@ -40,14 +42,14 @@ function DrawPolylineControl(props: Props): JSX.Element {
         };
 
     return (
-        <Popover
+        <CustomPopover
             {...dynamcPopoverPros}
             overlayClassName='cvat-draw-shape-popover'
             placement='right'
             content={<DrawShapePopoverContainer shapeType={ShapeType.POLYLINE} />}
         >
             <Icon {...dynamicIconProps} component={PolylineIcon} />
-        </Popover>
+        </CustomPopover>
     );
 }
 

cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-rectangle-control.tsx

@@ -11,6 +11,7 @@ import { RectangleIcon } from 'icons';
 import { ShapeType } from 'reducers/interfaces';
 
 import DrawShapePopoverContainer from 'containers/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover';
+import withVisibilityHandling from './handle-popover-visibility';
 
 interface Props {
     canvasInstance: Canvas;
@@ -19,6 +20,7 @@ interface Props {
 
 function DrawRectangleControl(props: Props): JSX.Element {
     const { canvasInstance, isDrawing } = props;
+    const CustomPopover = withVisibilityHandling(Popover, 'draw-rectangle');
 
     const dynamcPopoverPros = isDrawing ?
         {
@@ -40,14 +42,14 @@ function DrawRectangleControl(props: Props): JSX.Element {
         };
 
     return (
-        <Popover
+        <CustomPopover
             {...dynamcPopoverPros}
             overlayClassName='cvat-draw-shape-popover'
             placement='right'
             content={<DrawShapePopoverContainer shapeType={ShapeType.RECTANGLE} />}
         >
             <Icon {...dynamicIconProps} component={RectangleIcon} />
-        </Popover>
+        </CustomPopover>
     );
 }
 

cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/handle-popover-visibility.tsx

@@ -0,0 +1,41 @@
+// Copyright (C) 2020 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
+
+import React, { useState } from 'react';
+import Popover, { PopoverProps } from 'antd/lib/popover';
+
+export default function withVisibilityHandling(WrappedComponent: typeof Popover, popoverType: string) {
+    return (props: PopoverProps): JSX.Element => {
+        const [initialized, setInitialized] = useState<boolean>(false);
+        const [visible, setVisible] = useState<boolean>(false);
+        let { overlayClassName } = props;
+        if (typeof overlayClassName !== 'string') overlayClassName = '';
+
+        overlayClassName += ` cvat-${popoverType}-popover`;
+        if (visible) {
+            overlayClassName += ` cvat-${popoverType}-popover-visible`;
+        }
+
+        const callback = (event: Event): void => {
+            if ((event as AnimationEvent).animationName === 'antZoomBigIn') {
+                setVisible(true);
+            }
+        };
+
+        return (
+            <WrappedComponent
+                {...props}
+                overlayClassName={overlayClassName.trim()}
+                onVisibleChange={(_visible: boolean) => {
+                    if (!_visible) setVisible(false);
+                    if (!initialized) {
+                        const self = window.document.getElementsByClassName(`cvat-${popoverType}-popover`)[0];
+                        self?.addEventListener('animationend', callback);
+                        setInitialized(true);
+                    }
+                }}
+            />
+        );
+    };
+}

cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/rotate-control.tsx

@@ -10,6 +10,8 @@ import Popover from 'antd/lib/popover';
 import { RotateIcon } from 'icons';
 import { Rotation } from 'reducers/interfaces';
 
+import withVisibilityHandling from './handle-popover-visibility';
+
 interface Props {
     clockwiseShortcut: string;
     anticlockwiseShortcut: string;
@@ -18,10 +20,10 @@ interface Props {
 
 function RotateControl(props: Props): JSX.Element {
     const { anticlockwiseShortcut, clockwiseShortcut, rotateFrame } = props;
+    const CustomPopover = withVisibilityHandling(Popover, 'rotate-canvas');
 
     return (
-        <Popover
-            overlayClassName='cvat-rotate-canvas-controls'
+        <CustomPopover
             placement='right'
             content={(
                 <>
@@ -52,7 +54,7 @@ function RotateControl(props: Props): JSX.Element {
             trigger='hover'
         >
             <Icon className='cvat-rotate-canvas-control' component={RotateIcon} />
-        </Popover>
+        </CustomPopover>
     );
 }
 

cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-control.tsx

@@ -10,6 +10,7 @@ import { Canvas } from 'cvat-canvas-wrapper';
 import { TagIcon } from 'icons';
 
 import SetupTagPopoverContainer from 'containers/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover';
+import withVisibilityHandling from './handle-popover-visibility';
 
 interface Props {
     canvasInstance: Canvas;
@@ -18,22 +19,20 @@ interface Props {
 
 function SetupTagControl(props: Props): JSX.Element {
     const { isDrawing } = props;
+    const CustomPopover = withVisibilityHandling(Popover, 'setup-tag');
 
-    const dynamcPopoverPros = isDrawing ? {
-        overlayStyle: {
-            display: 'none',
-        },
-    } : {};
+    const dynamcPopoverPros = isDrawing ?
+        {
+            overlayStyle: {
+                display: 'none',
+            },
+        } :
+        {};
 
     return (
-        <Popover
-            {...dynamcPopoverPros}
-            placement='right'
-            overlayClassName='cvat-draw-shape-popover'
-            content={<SetupTagPopoverContainer />}
-        >
+        <CustomPopover {...dynamcPopoverPros} placement='right' content={<SetupTagPopoverContainer />}>
             <Icon className='cvat-setup-tag-control' component={TagIcon} />
-        </Popover>
+        </CustomPopover>
     );
 }
 

cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx

@@ -23,7 +23,7 @@ function SetupTagPopover(props: Props): JSX.Element {
     } = props;
 
     return (
-        <div className='cvat-draw-shape-popover-content'>
+        <div className='cvat-setup-tag-popover-content'>
             <Row justify='start'>
                 <Col>
                     <Text className='cvat-text-color' strong>