Fixed double issues & scaling

cvat-ai · Aug 28, 2023 · 40f545b · 40f545b
1 parent 2ce6a3c
commit 40f545b
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 22 deletions.
diff --git a/cvat-canvas/src/typescript/canvasView.ts b/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;

diff --git a/cvat-ui/src/components/annotation-page/review/create-issue-dialog.tsx b/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());

diff --git a/cvat-ui/src/components/annotation-page/review/hidden-issue-label.tsx b/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'
             >

diff --git a/cvat-ui/src/components/annotation-page/review/issue-dialog.tsx b/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);