Fixed wrong issue position when create a quick issue on a rotated shape (#5162)

* Fixed wrong issue position when create a quick issue on a rotated shape

* Updated changelog

CHANGELOG.md

@@ -54,6 +54,7 @@ non-ascii paths while adding files from "Connected file share" (issue #4428)
 - Restoring CVAT in case of React-renderning fail (<https://github.com/opencv/cvat/pull/5134>)
 - Deleted frames become restored if a user deletes frames from another job of the same task
 (<https://github.com/opencv/cvat/pull/5138>)
+- Wrong issue position when create a quick issue on a rotated shape (<https://github.com/opencv/cvat/pull/5162>)
 - Skeleton points exported out of order in the COCO Keypoints format
   (<https://github.com/opencv/cvat/issues/5048>)
 - Changing an object causes current z layer to be set to the maximum (<https://github.com/opencv/cvat/pull/5145>)

cvat-ui/src/components/annotation-page/canvas/canvas-context-menu.tsx

@@ -1,4 +1,5 @@
 // Copyright (C) 2021-2022 Intel Corporation
+// Copyright (C) 2022 CVAT.ai Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -105,49 +106,41 @@ export default function CanvasContextMenu(props: Props): JSX.Element | null {
                 left={left}
                 latestComments={latestComments}
                 onClick={(param: MenuInfo) => {
-                    const [state] = objectStates.filter(
+                    const state = objectStates.find((_state: any): boolean => _state.clientID === contextMenuClientID);
-                        (_state: any): boolean => _state.clientID === contextMenuClientID,
+                    if (state) {
-                    );
+                        let { points } = state;
-                    if (param.key === ReviewContextMenuKeys.OPEN_ISSUE) {
+                        if (['ellipse', 'rectangle'].includes(state.shapeType)) {
-                        if (state) {
+                            const [cx, cy] = state.shapeType === 'ellipse' ? state.points : [
-                            let { points } = state;
+                                (state.points[0] + state.points[2]) / 2,
-                            if (['ellipse', 'rectangle'].includes(state.shapeType)) {
+                                (state.points[1] + state.points[3]) / 2,
-                                const [cx, cy] = state.shapeType === 'ellipse' ? state.points : [
+                            ];
-                                    (state.points[0] + state.points[2]) / 2,
+                            const [rx, ry] = [state.points[2] - cx, cy - state.points[3]];
-                                    (state.points[1] + state.points[3]) / 2,
+                            points = state.shapeType === 'ellipse' ? [
-                                ];
+                                state.points[0] - rx,
-                                const [rx, ry] = [state.points[2] - cx, cy - state.points[3]];
+                                state.points[1] - ry,
-                                points = state.shapeType === 'ellipse' ? [
+                                state.points[0] + rx,
-                                    state.points[0] - rx,
+                                state.points[1] + ry,
-                                    state.points[1] - ry,
+                            ] : state.points;
-                                    state.points[0] + rx,
-                                    state.points[1] + ry,
-                                ] : state.points;
 
-                                points = [
+                            points = [
-                                    [points[0], points[1]],
+                                [points[0], points[1]],
-                                    [points[2], points[1]],
+                                [points[2], points[1]],
-                                    [points[2], points[3]],
+                                [points[2], points[3]],
-                                    [points[0], points[3]],
+                                [points[0], points[3]],
-                                ].map(([x, y]: number[]) => rotatePoint(x, y, state.rotation, cx, cy)).flat();
+                            ].map(([x, y]: number[]) => rotatePoint(x, y, state.rotation, cx, cy)).flat();
-                            }
+                        }
 
+                        if (param.key === ReviewContextMenuKeys.OPEN_ISSUE) {
                             onStartIssue(points);
-                        }
+                        } else if (param.key === ReviewContextMenuKeys.QUICK_ISSUE_POSITION) {
-                    } else if (param.key === ReviewContextMenuKeys.QUICK_ISSUE_POSITION) {
+                            openIssue(points, consts.QUICK_ISSUE_INCORRECT_POSITION_TEXT);
-                        if (state) {
+                        } else if (param.key === ReviewContextMenuKeys.QUICK_ISSUE_ATTRIBUTE) {
-                            openIssue(state.points, consts.QUICK_ISSUE_INCORRECT_POSITION_TEXT);
+                            openIssue(points, consts.QUICK_ISSUE_INCORRECT_ATTRIBUTE_TEXT);
-                        }
+                        } else if (
-                    } else if (param.key === ReviewContextMenuKeys.QUICK_ISSUE_ATTRIBUTE) {
+                            param.keyPath.length === 2 &&
-                        if (state) {
+                            param.keyPath[1] === ReviewContextMenuKeys.QUICK_ISSUE_FROM_LATEST
-                            openIssue(state.points, consts.QUICK_ISSUE_INCORRECT_ATTRIBUTE_TEXT);
+                        ) {
-                        }
+                            openIssue(points, latestComments[+param.keyPath[0]]);
-                    } else if (
-                        param.keyPath.length === 2 &&
-                        param.keyPath[1] === ReviewContextMenuKeys.QUICK_ISSUE_FROM_LATEST
-                    ) {
-                        if (state) {
-                            openIssue(state.points, latestComments[+param.keyPath[0]]);
                         }
                     }
                 }}