diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-cuboid-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-cuboid-control.tsx index 9c2018e9..958b208b 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-cuboid-control.tsx +++ b/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 ( - } > - + ); } diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-points-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-points-control.tsx index 975d0919..8127059d 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-points-control.tsx +++ b/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 ( - } > - + ); } diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-polygon-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-polygon-control.tsx index d856e1e4..23f5e754 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-polygon-control.tsx +++ b/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 ( - } > - + ); } diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-polyline-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-polyline-control.tsx index b4b323a1..2139ad4d 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-polyline-control.tsx +++ b/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 ( - } > - + ); } diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-rectangle-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-rectangle-control.tsx index 402d37a4..50efd518 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-rectangle-control.tsx +++ b/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 ( - } > - + ); } diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/handle-popover-visibility.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/handle-popover-visibility.tsx new file mode 100644 index 00000000..c9de255d --- /dev/null +++ b/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(false); + const [visible, setVisible] = useState(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 ( + { + if (!_visible) setVisible(false); + if (!initialized) { + const self = window.document.getElementsByClassName(`cvat-${popoverType}-popover`)[0]; + self?.addEventListener('animationend', callback); + setInitialized(true); + } + }} + /> + ); + }; +} diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/rotate-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/rotate-control.tsx index 094e8d7c..380e6b55 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/rotate-control.tsx +++ b/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 ( - @@ -52,7 +54,7 @@ function RotateControl(props: Props): JSX.Element { trigger='hover' > - + ); } diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-control.tsx index cef80d88..fcc4ea39 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-control.tsx +++ b/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 ( - } - > + }> - + ); } diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx index bbbc5ccb..a0e31a60 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx +++ b/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 ( -
+
diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/tools-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/tools-control.tsx index 88c2b0a7..28da997b 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/tools-control.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/tools-control.tsx @@ -32,6 +32,7 @@ import { import { InteractionResult } from 'cvat-canvas/src/typescript/canvas'; import DetectorRunner from 'components/model-runner-modal/detector-runner'; import LabelSelector from 'components/label-selector/label-selector'; +import withVisibilityHandling from './handle-popover-visibility'; interface StateToProps { canvasInstance: Canvas; @@ -746,6 +747,7 @@ export class ToolsControlComponent extends React.PureComponent { const { fetching, trackingProgress } = this.state; if (![...interactors, ...detectors, ...trackers].length) return null; + const CustomPopover = withVisibilityHandling(Popover, 'tools-control'); const dynamcPopoverPros = isActivated ? { @@ -781,14 +783,9 @@ export class ToolsControlComponent extends React.PureComponent { )} - + - + ); } 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 d8695372..498a0dac 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/styles.scss +++ b/cvat-ui/src/components/annotation-page/standard-workspace/styles.scss @@ -85,13 +85,14 @@ } } -.cvat-rotate-canvas-controls { +.cvat-rotate-canvas-popover { .ant-popover-inner-content { padding: 0; } } .cvat-draw-shape-popover, +.cvat-setup-tag-popover, .cvat-tools-control-popover { .ant-popover-inner-content { padding: 0; @@ -115,6 +116,7 @@ background: $background-color-2; } +.cvat-setup-tag-popover-content, .cvat-draw-shape-popover-content { padding: 10px; border-radius: 5px; diff --git a/tests/cypress/support/commands.js b/tests/cypress/support/commands.js index f9aa8af0..e063cc05 100644 --- a/tests/cypress/support/commands.js +++ b/tests/cypress/support/commands.js @@ -151,13 +151,11 @@ Cypress.Commands.add('createRectangle', (createRectangleParams) => { }); Cypress.Commands.add('switchLabel', (labelName, objectType) => { - const pattern = `^(Draw new|Setup) ${objectType}$`; - const regex = new RegExp(pattern, 'g'); - cy.contains(regex) - .parents('.cvat-draw-shape-popover-content') - .within(() => { - cy.get('.ant-select-selection-item').click(); - }); + cy.get( + objectType === 'tag' ? '.cvat-setup-tag-popover-visible' : `.cvat-draw-${objectType}-popover-visible`, + ).within(() => { + cy.get('.ant-select-selection-item').click(); + }); cy.get('.ant-select-dropdown') .not('.ant-select-dropdown-hidden') .within(() => { @@ -488,7 +486,7 @@ Cypress.Commands.add('createTag', (labelName) => { cy.get('.cvat-setup-tag-control').click(); cy.switchLabel(labelName, 'tag'); cy.contains('Setup tag') - .parents('.cvat-draw-shape-popover-content') + .parents('.cvat-setup-tag-popover-content') .within(() => { cy.get('button').click(); });