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.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');