Fixed: "TypeError: Cannot read property 'clientX' of undefined" (#3308)

* Fixed cuboid redraw

* Updated version & changelog

* Fixed duplicated cuboid

* Updated changelog

* Do not skip test for cuboid

* Removed comment

* Fixed one more case

CHANGELOG.md

@@ -35,6 +35,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix CLI create an infinite loop if git repository responds with failure (<https://github.com/openvinotoolkit/cvat/pull/3267>)
 - Bug with sidebar & fullscreen (<https://github.com/openvinotoolkit/cvat/pull/3289>)
 - 504 Gateway Time-out on `data/meta` requests (<https://github.com/openvinotoolkit/cvat/pull/3269>)
+- TypeError: Cannot read property 'clientX' of undefined when draw cuboids with hotkeys (<https://github.com/openvinotoolkit/cvat/pull/3308>)
+- Duplication of the cuboids when redraw them (<https://github.com/openvinotoolkit/cvat/pull/3308>)
 - Some code issues in Deep Extreme Cut handler code (<https://github.com/openvinotoolkit/cvat/pull/3325>)
 
 ### Security

cvat-canvas/src/typescript/drawHandler.ts

@@ -311,8 +311,9 @@ export class DrawHandlerImpl implements DrawHandler {
         // We check if it is activated with remember function
         if (this.drawInstance.remember('_paintHandler')) {
             if (
-                this.drawData.shapeType !== 'rectangle'
-                && this.drawData.cuboidDrawingMethod !== CuboidDrawingMethod.CLASSIC
+                ['polygon', 'polyline', 'points'].includes(this.drawData.shapeType)
+                || (this.drawData.shapeType === 'cuboid'
+                    && this.drawData.cuboidDrawingMethod === CuboidDrawingMethod.CORNER_POINTS)
             ) {
                 // Check for unsaved drawn shapes
                 this.drawInstance.draw('done');
@@ -574,7 +575,7 @@ export class DrawHandlerImpl implements DrawHandler {
             .on('drawstop', (e: Event): void => {
                 const bbox = (e.target as SVGRectElement).getBBox();
                 const [xtl, ytl, xbr, ybr] = this.getFinalRectCoordinates(bbox);
-                const { shapeType } = this.drawData;
+                const { shapeType, redraw: clientID } = this.drawData;
                 this.release();
 
                 if (this.canceled) return;
@@ -584,6 +585,7 @@ export class DrawHandlerImpl implements DrawHandler {
                         {
                             shapeType,
                             points: cuboidFrom4Points([xtl, ybr, xbr, ybr, xbr, ytl, xbr + d.x, ytl - d.y]),
+                            clientID,
                         },
                         Date.now() - this.startTimestamp,
                     );

cvat-ui/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.20.3",
+  "version": "1.20.4",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

cvat-ui/package.json

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

cvat-ui/src/actions/annotation-actions.ts

@@ -7,7 +7,7 @@ import {
     ActionCreator, AnyAction, Dispatch, Store,
 } from 'redux';
 import { ThunkAction } from 'utils/redux';
-import { RectDrawingMethod, Canvas } from 'cvat-canvas-wrapper';
+import { RectDrawingMethod, CuboidDrawingMethod, Canvas } from 'cvat-canvas-wrapper';
 import getCore from 'cvat-core-wrapper';
 import logger, { LogType } from 'cvat-logger';
 import { getCVATStore } from 'cvat-store';
@@ -1134,6 +1134,7 @@ export function rememberObject(createParams: {
     activeShapeType?: ShapeType;
     activeNumOfPoints?: number;
     activeRectDrawingMethod?: RectDrawingMethod;
+    activeCuboidDrawingMethod?: CuboidDrawingMethod;
 }): AnyAction {
     return {
         type: AnnotationActionTypes.REMEMBER_CREATED_OBJECT,
@@ -1480,6 +1481,7 @@ export function repeatDrawShapeAsync(): ThunkAction {
                 activeShapeType,
                 activeNumOfPoints,
                 activeRectDrawingMethod,
+                activeCuboidDrawingMethod,
             },
         } = getStore().getState().annotation;
 
@@ -1534,6 +1536,7 @@ export function repeatDrawShapeAsync(): ThunkAction {
             canvasInstance.draw({
                 enabled: true,
                 rectDrawingMethod: activeRectDrawingMethod,
+                cuboidDrawingMethod: activeCuboidDrawingMethod,
                 numberOfPoints: activeNumOfPoints,
                 shapeType: activeShapeType,
                 crosshair: [ShapeType.RECTANGLE, ShapeType.CUBOID].includes(activeShapeType),

cvat-ui/src/containers/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx

@@ -23,6 +23,7 @@ interface DispatchToProps {
         objectType: ObjectType,
         points?: number,
         rectDrawingMethod?: RectDrawingMethod,
+        cuboidDrawingMethod?: CuboidDrawingMethod,
     ): void;
 }
 
@@ -42,6 +43,7 @@ function mapDispatchToProps(dispatch: any): DispatchToProps {
             objectType: ObjectType,
             points?: number,
             rectDrawingMethod?: RectDrawingMethod,
+            cuboidDrawingMethod?: CuboidDrawingMethod,
         ): void {
             dispatch(
                 rememberObject({
@@ -50,6 +52,7 @@ function mapDispatchToProps(dispatch: any): DispatchToProps {
                     activeLabelID: labelID,
                     activeNumOfPoints: points,
                     activeRectDrawingMethod: rectDrawingMethod,
+                    activeCuboidDrawingMethod: cuboidDrawingMethod,
                 }),
             );
         },
@@ -127,7 +130,7 @@ class DrawShapePopoverContainer extends React.PureComponent<Props, State> {
             crosshair: [ShapeType.RECTANGLE, ShapeType.CUBOID].includes(shapeType),
         });
 
-        onDrawStart(shapeType, selectedLabelID, objectType, numberOfPoints, rectDrawingMethod);
+        onDrawStart(shapeType, selectedLabelID, objectType, numberOfPoints, rectDrawingMethod, cuboidDrawingMethod);
     }
 
     private onChangeRectDrawingMethod = (event: RadioChangeEvent): void => {

cvat-ui/src/reducers/interfaces.ts

@@ -4,7 +4,7 @@
 
 import { MutableRefObject } from 'react';
 import { Canvas3d } from 'cvat-canvas3d/src/typescript/canvas3d';
-import { Canvas, RectDrawingMethod } from 'cvat-canvas-wrapper';
+import { Canvas, RectDrawingMethod, CuboidDrawingMethod } from 'cvat-canvas-wrapper';
 import { IntelligentScissors } from 'utils/opencv-wrapper/intelligent-scissors';
 import { KeyMap } from 'utils/mousetrap-react';
 
@@ -452,6 +452,7 @@ export interface AnnotationState {
         activeInteractor?: Model | OpenCVTool;
         activeShapeType: ShapeType;
         activeRectDrawingMethod?: RectDrawingMethod;
+        activeCuboidDrawingMethod?: CuboidDrawingMethod;
         activeNumOfPoints?: number;
         activeLabelID: number;
         activeObjectType: ObjectType;

tests/cypress/integration/actions_objects/case_54_redraw_feature.js

@@ -129,8 +129,7 @@ context('Redraw feature.', () => {
             });
         });
 
-        it.skip('Draw and redraw a cuboid.', () => {
-            // Need to fix issue https://github.com/openvinotoolkit/cvat/issues/2873
+        it('Draw and redraw a cuboid.', () => {
             cy.createCuboid(createCuboidShape2Points);
             cy.get('.cvat-canvas-container').trigger('mousemove', 300, 400);
             cy.get('#cvat_canvas_shape_5').should('have.class', 'cvat_canvas_shape_activated');