Fixed double issues & scaling (#6758)

<!-- Raise an issue to propose your change
(https://github.com/opencv/cvat/issues).
It helps to avoid duplication of efforts from multiple independent
contributors.
Discuss your ideas with maintainers to be sure that changes will be
approved and merged.
Read the [Contribution
guide](https://opencv.github.io/cvat/docs/contributing/). -->

<!-- Provide a general summary of your changes in the Title above -->

### Motivation and context
* Resolved:  issues created extra times
* Resolved #5639

### How has this been tested?
<!-- Please describe in detail how you tested your changes.
Include details of your testing environment, and the tests you ran to
see how your change affects other areas of the code, etc. -->

### Checklist
<!-- Go over all the following points, and put an `x` in all the boxes
that apply.
If an item isn't applicable for some reason, then ~~explicitly
strikethrough~~ the whole
line. If you don't do that, GitHub will show incorrect progress for the
pull request.
If you're unsure about any of these, don't hesitate to ask. We're here
to help! -->
- [x] I submit my changes into the `develop` branch
- [x] I have added a description of my changes into the
[CHANGELOG](https://github.com/opencv/cvat/blob/develop/CHANGELOG.md)
file
- [ ] I have updated the documentation accordingly
- [ ] I have added tests to cover my changes
- [ ] I have linked related issues (see [GitHub docs](

https://help.github.com/en/github/managing-your-work-on-github/linking-a-pull-request-to-an-issue#linking-a-pull-request-to-an-issue-using-a-keyword))
- [x] I have increased versions of npm packages if it is necessary

([cvat-canvas](https://github.com/opencv/cvat/tree/develop/cvat-canvas#versioning),

[cvat-core](https://github.com/opencv/cvat/tree/develop/cvat-core#versioning),

[cvat-data](https://github.com/opencv/cvat/tree/develop/cvat-data#versioning)
and

[cvat-ui](https://github.com/opencv/cvat/tree/develop/cvat-ui#versioning))

### License

- [x] I submit _my code changes_ under the same [MIT License](
https://github.com/opencv/cvat/blob/develop/LICENSE) that covers the
project.
  Feel free to contact the maintainers if that's a concern.

CHANGELOG.md

@@ -19,7 +19,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - TDB
 
 ### Fixed
-- TDB
+- Zooming canvas when scrooling comments list in an issue (<https://github.com/opencv/cvat/pull/6758>)
+- Issues can be created many times when initial submit (<https://github.com/opencv/cvat/pull/6758>)
 
 ### Security
 - TDB

cvat-canvas/package.json

@@ -1,6 +1,6 @@
 {
  "name": "cvat-canvas",
- "version": "2.17.4",
+ "version": "2.17.5",
  "description": "Part of Computer Vision Annotation Tool which presents its canvas library",
  "main": "src/canvas.ts",
  "scripts": {

cvat-canvas/src/typescript/canvasView.ts

@@ -1252,6 +1252,14 @@ export class CanvasViewImpl implements CanvasView, Listener {
  window.document.addEventListener('keydown', this.onShiftKeyDown);
  window.document.addEventListener('keyup', this.onShiftKeyUp);
 
+ this.attachmentBoard.addEventListener('wheel', (event) => {
+ event.stopPropagation();
+ });
+
+ this.attachmentBoard.addEventListener('mousemove', (event) => {
+ event.stopPropagation();
+ });
+
  this.canvas.addEventListener('wheel', (event): void => {
  if (event.ctrlKey) return;
  const { offset } = this.controller.geometry;

cvat-ui/package.json

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

cvat-ui/src/components/annotation-page/review/create-issue-dialog.tsx

@@ -2,29 +2,31 @@
 //
 // SPDX-License-Identifier: MIT
 
-import React, { ReactPortal } from 'react';
+import React, { useState, ReactPortal } from 'react';
 import ReactDOM from 'react-dom';
 import { useDispatch } from 'react-redux';
 import Form from 'antd/lib/form';
 import Input from 'antd/lib/input';
 import Button from 'antd/lib/button';
 import { Row, Col } from 'antd/lib/grid';
+import { Store } from 'antd/lib/form/interface';
 
 import { reviewActions, finishIssueAsync } from 'actions/review-actions';
-import { Store } from 'antd/lib/form/interface';
+import { useIsMounted } from 'utils/hooks';
 
 interface FormProps {
  top: number;
  left: number;
  angle: number;
  scale: number;
+ fetching: boolean;
  submit(message: string): void;
  cancel(): void;
 }
 
 function MessageForm(props: FormProps): JSX.Element {
  const {
- top, left, angle, scale, submit, cancel,
+ top, left, angle, scale, fetching, submit, cancel,
  } = props;
 
  function handleSubmit(values: Store): void {
@@ -37,17 +39,31 @@ function MessageForm(props: FormProps): JSX.Element {
  style={{ top, left, transform: `scale(${scale}) rotate(${angle}deg)` }}
  onFinish={(values: Store) => handleSubmit(values)}
  >
- <Form.Item name='issue_description' rules={[{ required: true, message: 'Please, fill out the field' }]}>
+ <Form.Item
+ name='issue_description'
+ rules={[{ required: true, message: 'Please, fill out the field' }]}
+ >
  <Input autoComplete='off' placeholder='Please, describe the issue' />
  </Form.Item>
  <Row justify='space-between'>
  <Col>
- <Button onClick={cancel} type='ghost' className='cvat-create-issue-dialog-cancel-button'>
+ <Button
+ onClick={cancel}
+ disabled={fetching}
+ type='ghost'
+ className='cvat-create-issue-dialog-cancel-button'
+ >
  Cancel
  </Button>
  </Col>
  <Col>
- <Button type='primary' htmlType='submit' className='cvat-create-issue-dialog-submit-button'>
+ <Button
+ loading={fetching}
+ disabled={fetching}
+ type='primary'
+ htmlType='submit'
+ className='cvat-create-issue-dialog-submit-button'
+ >
  Submit
  </Button>
  </Col>
@@ -64,6 +80,8 @@ interface Props {
 }
 
 export default function CreateIssueDialog(props: Props): ReactPortal {
+ const [fetching, setFetching] = useState(false);
+ const isMounted = useIsMounted();
  const dispatch = useDispatch();
  const {
  top, left, angle, scale,
@@ -75,8 +93,14 @@ export default function CreateIssueDialog(props: Props): ReactPortal {
  left={left}
  angle={angle}
  scale={scale}
+ fetching={fetching}
  submit={(message: string) => {
- dispatch(finishIssueAsync(message));
+ setFetching(true);
+ dispatch(finishIssueAsync(message)).finally(() => {
+ if (isMounted()) {
+ setFetching(false);
+ }
+ });
  }}
  cancel={() => {
  dispatch(reviewActions.cancelIssue());

cvat-ui/src/components/annotation-page/review/hidden-issue-label.tsx

@@ -40,6 +40,27 @@ export default function HiddenIssueLabel(props: Props): ReactPortal {
  }
  }, [resolved]);
 
+ useEffect(() => {
+ if (ref.current) {
+ const { current } = ref;
+ const listener = (event: WheelEvent): void => {
+ event.stopPropagation();
+ if (event.deltaX > 0) {
+ current.parentElement?.appendChild(current);
+ } else {
+ current.parentElement?.prepend(current);
+ }
+ };
+
+ current.addEventListener('wheel', listener);
+ return () => {
+ current.removeEventListener('wheel', listener);
+ };
+ }
+
+ return () => {};
+ }, [ref.current]);
+
  const elementID = `cvat-hidden-issue-label-${id}`;
  return ReactDOM.createPortal(
  <CVATTooltip title={comments[0]?.message || 'Messages not found'}>
@@ -49,16 +70,6 @@ export default function HiddenIssueLabel(props: Props): ReactPortal {
  onClick={onClick}
  onMouseEnter={highlight}
  onMouseLeave={blur}
- onWheel={(event: React.WheelEvent) => {
- if (ref.current !== null) {
- const selfElement = ref.current;
- if (event.deltaX > 0) {
- selfElement.parentElement?.appendChild(selfElement);
- } else {
- selfElement.parentElement?.prepend(selfElement);
- }
- }
- }}
  style={{ top, left, transform: `scale(${scale}) rotate(${angle}deg)` }}
  className='cvat-hidden-issue-label'
  >

cvat-ui/src/components/annotation-page/review/issue-dialog.tsx

@@ -68,13 +68,28 @@ export default function IssueDialog(props: Props): JSX.Element {
  }
  }, [resolved]);
 
+ useEffect(() => {
+ const listener = (event: WheelEvent): void => {
+ event.stopPropagation();
+ };
+
+ if (ref.current) {
+ const { current } = ref;
+ current.addEventListener('wheel', listener);
+ return () => {
+ current.removeEventListener('wheel', listener);
+ };
+ }
+ return () => {};
+ }, [ref.current]);
+
  const onDeleteIssue = useCallback((): void => {
  Modal.confirm({
- title: `The issue${id >= 0 ? ` #${id}` : ''} will be deleted.`,
+ title: `The issue${typeof id === 'number' ? ` #${id}` : ''} will be deleted.`,
  className: 'cvat-modal-confirm-remove-issue',
  onOk: () => {
  collapse();
- dispatch(deleteIssueAsync(id));
+ dispatch(deleteIssueAsync(id as number));
  },
  okButtonProps: {
  type: 'primary',
@@ -116,10 +131,14 @@ export default function IssueDialog(props: Props): JSX.Element {
  );
 
  return ReactDOM.createPortal(
- <div style={{ top, left, transform: `scale(${scale}) rotate(${angle}deg)` }} ref={ref} className='cvat-issue-dialog'>
+ <div
+ style={{ top, left, transform: `scale(${scale}) rotate(${angle}deg)` }}
+ ref={ref}
+ className='cvat-issue-dialog'
+ >
  <Row className='cvat-issue-dialog-header' justify='space-between'>
  <Col>
- <Title level={4}>{id >= 0 ? `Issue #${id}` : 'Issue'}</Title>
+ <Title level={4}>{typeof id === 'number' ? `Issue #${id}` : 'Issue'}</Title>
  </Col>
  <Col>
  <CVATTooltip title='Collapse the chat'>
@@ -135,7 +154,7 @@ export default function IssueDialog(props: Props): JSX.Element {
  <Row className='cvat-issue-dialog-input' justify='start'>
  <Col span={24}>
  <Input
- placeholder='Print a comment here..'
+ placeholder='Type a comment here..'
  value={currentText}
  onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
  setCurrentText(event.target.value);