React UI: Batch of fixes (#1383)

* Fixed: cannot read property 'set' of undefined

* Fixed UI failing: save during drag/resize

* Fixed multiple saving (shortcut sticking)

* Undo/redo fixed

* Allowed one interpolated point

* Fixed API reaction when repository synchronization is failed

* Updated changelog

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Button to reset colors settings (brightness, saturation, contrast) in the new UI
 - Option to display shape text always
 - Dedicated message with clarifications when share is unmounted (https://github.com/opencv/cvat/pull/1373)
+- Ability to create one tracked point (https://github.com/opencv/cvat/pull/1383)
 - Tutorial: instructions for CVAT over HTTPS
 
 ### Changed
@@ -35,6 +36,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Merge is allowed for points, but clicks on points conflict with frame dragging logic
 - Removed objects are visible for search
 - Add missed task_id and job_id fields into exception logs for the new UI (https://github.com/opencv/cvat/pull/1372)
+- UI fails when annotations saving occurs during drag/resize/edit (https://github.com/opencv/cvat/pull/1383)
+- Multiple savings when hold Ctrl+S (a lot of the same copies of events were sent with the same working time) (https://github.com/opencv/cvat/pull/1383)
+- UI doesn't have any reaction when git repos synchronization failed (https://github.com/opencv/cvat/pull/1383)
+- Bug when annotations cannot be saved after (delete - save - undo - save) (https://github.com/opencv/cvat/pull/1383)
 - VOC format exports Upper case labels correctly in lower case (https://github.com/opencv/cvat/pull/1379)
 - Fixed polygon exporting bug in COCO dataset (https://github.com/opencv/cvat/issues/1387)
 - Task creation from remote files (https://github.com/opencv/cvat/pull/1392)

cvat-canvas/README.md

@@ -182,7 +182,7 @@ Standard JS events are used.
 |              | IDLE | GROUP | SPLIT | DRAW | MERGE | EDIT | DRAG | RESIZE | ZOOM_CANVAS | DRAG_CANVAS |
 |--------------|------|-------|-------|------|-------|------|------|--------|-------------|-------------|
 | html()       | +    | +     | +     | +    | +     | +    | +    | +      | +           | +           |
-| setup()      | +    | +     | +     | +    | +     | -    | -    | -      | +           | +           |
+| setup()      | +    | +     | +     | +    | +     | +/-  | +/-  | +/-    | +           | +           |
 | activate()   | +    | -     | -     | -    | -     | -    | -    | -      | -           | -           |
 | rotate()     | +    | +     | +     | +    | +     | +    | +    | +      | +           | +           |
 | focus()      | +    | +     | +     | +    | +     | +    | +    | +      | +           | +           |
@@ -199,3 +199,5 @@ Standard JS events are used.
 | configure()  | +    | -     | -     | -    | -     | -    | -    | -      | -           | -           |
 | bitmap()     | +    | +     | +     | +    | +     | +    | +    | +      | +           | +           |
 | setZLayer()  | +    | +     | +     | +    | +     | +    | +    | +      | +           | +           |
+
+You can call setup() during editing, dragging, and resizing only to update objects, not to change a frame.

cvat-canvas/src/typescript/canvasModel.ts

@@ -327,8 +327,10 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
     }
 
     public setup(frameData: any, objectStates: any[]): void {
-        if ([Mode.EDIT, Mode.DRAG, Mode.RESIZE].includes(this.data.mode)) {
-            throw Error(`Canvas is busy. Action: ${this.data.mode}`);
+        if (this.data.imageID !== frameData.number) {
+            if ([Mode.EDIT, Mode.DRAG, Mode.RESIZE].includes(this.data.mode)) {
+                throw Error(`Canvas is busy. Action: ${this.data.mode}`);
+            }
         }
 
         if (frameData.number === this.data.imageID) {
@@ -364,6 +366,10 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
     }
 
     public activate(clientID: number | null, attributeID: number | null): void {
+        if (this.data.activeElement.clientID === clientID) {
+            return;
+        }
+
         if (this.data.mode !== Mode.IDLE && clientID !== null) {
             // Exception or just return?
             throw Error(`Canvas is busy. Action: ${this.data.mode}`);

cvat-canvas/src/typescript/canvasView.ts

@@ -385,6 +385,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
                 created.push(state);
             } else {
                 const drawnState = this.drawnStates[state.clientID];
+                // object has been changed or changed frame for a track
                 if (drawnState.updated !== state.updated || drawnState.frame !== state.frame) {
                     updated.push(state);
                 }
@@ -395,29 +396,30 @@ export class CanvasViewImpl implements CanvasView, Listener {
             .filter((id: number): boolean => !newIDs.includes(id))
             .map((id: number): any => this.drawnStates[id]);
 
+        if (deleted.length || updated.length || created.length) {
+            if (this.activeElement.clientID !== null) {
+                this.deactivate();
+            }
 
-        if (this.activeElement.clientID !== null) {
-            this.deactivate();
-        }
+            for (const state of deleted) {
+                if (state.clientID in this.svgTexts) {
+                    this.svgTexts[state.clientID].remove();
+                }
 
-        for (const state of deleted) {
-            if (state.clientID in this.svgTexts) {
-                this.svgTexts[state.clientID].remove();
+                this.svgShapes[state.clientID].off('click.canvas');
+                this.svgShapes[state.clientID].remove();
+                delete this.drawnStates[state.clientID];
             }
 
-            this.svgShapes[state.clientID].off('click.canvas');
-            this.svgShapes[state.clientID].remove();
-            delete this.drawnStates[state.clientID];
-        }
-
-        this.addObjects(created, translate);
-        this.updateObjects(updated, translate);
-        this.sortObjects();
+            this.addObjects(created, translate);
+            this.updateObjects(updated, translate);
+            this.sortObjects();
 
-        if (this.controller.activeElement.clientID !== null) {
-            const { clientID } = this.controller.activeElement;
-            if (states.map((state: any): number => state.clientID).includes(clientID)) {
-                this.activate(this.controller.activeElement);
+            if (this.controller.activeElement.clientID !== null) {
+                const { clientID } = this.controller.activeElement;
+                if (states.map((state: any): number => state.clientID).includes(clientID)) {
+                    this.activate(this.controller.activeElement);
+                }
             }
         }
     }
@@ -960,6 +962,8 @@ export class CanvasViewImpl implements CanvasView, Listener {
             attributes: { ...state.attributes },
             zOrder: state.zOrder,
             pinned: state.pinned,
+            updated: state.updated,
+            frame: state.frame,
         };
     }
 

cvat-canvas/src/typescript/svg.patch.ts

@@ -16,7 +16,9 @@ SVG.Element.prototype.draw = function constructor(...args: any): any {
     if (!handler) {
         originalDraw.call(this, ...args);
         handler = this.remember('_paintHandler');
-        if (!handler.set) {
+        // There is use case (drawing a single point when handler is created and destructed immediately in one stack)
+        // So, we need to check if handler still exists
+        if (handler && !handler.set) {
             handler.set = new SVG.Set();
         }
     } else {

cvat-core/src/annotations-objects.js

@@ -184,8 +184,10 @@
 
             this.history.do(HistoryActions.CHANGED_LOCK, () => {
                 this.lock = undoLock;
+                this.updated = Date.now();
             }, () => {
                 this.lock = redoLock;
+                this.updated = Date.now();
             }, [this.clientID], frame);
 
             this.lock = lock;
@@ -197,8 +199,10 @@
 
             this.history.do(HistoryActions.CHANGED_COLOR, () => {
                 this.color = undoColor;
+                this.updated = Date.now();
             }, () => {
                 this.color = redoColor;
+                this.updated = Date.now();
             }, [this.clientID], frame);
 
             this.color = color;
@@ -210,8 +214,10 @@
 
             this.history.do(HistoryActions.CHANGED_HIDDEN, () => {
                 this.hidden = undoHidden;
+                this.updated = Date.now();
             }, () => {
                 this.hidden = redoHidden;
+                this.updated = Date.now();
             }, [this.clientID], frame);
 
             this.hidden = hidden;
@@ -229,9 +235,11 @@
             this.history.do(HistoryActions.CHANGED_LABEL, () => {
                 this.label = undoLabel;
                 this.attributes = undoAttributes;
+                this.updated = Date.now();
             }, () => {
                 this.label = redoLabel;
                 this.attributes = redoAttributes;
+                this.updated = Date.now();
             }, [this.clientID], frame);
         }
 
@@ -246,8 +254,10 @@
 
             this.history.do(HistoryActions.CHANGED_ATTRIBUTES, () => {
                 this.attributes = undoAttributes;
+                this.updated = Date.now();
             }, () => {
                 this.attributes = redoAttributes;
+                this.updated = Date.now();
             }, [this.clientID], frame);
         }
 
@@ -373,9 +383,12 @@
                 this.removed = true;
 
                 this.history.do(HistoryActions.REMOVED_OBJECT, () => {
+                    this.serverID = undefined;
                     this.removed = false;
+                    this.updated = Date.now();
                 }, () => {
                     this.removed = true;
+                    this.updated = Date.now();
                 }, [this.clientID], frame);
             }
 
@@ -398,8 +411,10 @@
 
             this.history.do(HistoryActions.CHANGED_PINNED, () => {
                 this.pinned = undoPinned;
+                this.updated = Date.now();
             }, () => {
                 this.pinned = redoPinned;
+                this.updated = Date.now();
             }, [this.clientID], frame);
 
             this.pinned = pinned;
@@ -489,8 +504,10 @@
 
             this.history.do(HistoryActions.CHANGED_POINTS, () => {
                 this.points = undoPoints;
+                this.updated = Date.now();
             }, () => {
                 this.points = redoPoints;
+                this.updated = Date.now();
             }, [this.clientID], frame);
 
             this.points = points;
@@ -502,8 +519,10 @@
 
             this.history.do(HistoryActions.CHANGED_OCCLUDED, () => {
                 this.occluded = undoOccluded;
+                this.updated = Date.now();
             }, () => {
                 this.occluded = redoOccluded;
+                this.updated = Date.now();
             }, [this.clientID], frame);
 
             this.occluded = occluded;
@@ -515,8 +534,10 @@
 
             this.history.do(HistoryActions.CHANGED_ZORDER, () => {
                 this.zOrder = undoZOrder;
+                this.updated = Date.now();
             }, () => {
                 this.zOrder = redoZOrder;
+                this.updated = Date.now();
             }, [this.clientID], frame);
 
             this.zOrder = zOrder;
@@ -777,12 +798,14 @@
                 for (const mutable of undoAttributes.mutable) {
                     this.shapes[mutable.frame].attributes = mutable.attributes;
                 }
+                this.updated = Date.now();
             }, () => {
                 this.label = redoLabel;
                 this.attributes = redoAttributes.unmutable;
                 for (const mutable of redoAttributes.mutable) {
                     this.shapes[mutable.frame].attributes = mutable.attributes;
                 }
+                this.updated = Date.now();
             }, [this.clientID], frame);
         }
 
@@ -853,11 +876,13 @@
                 } else if (redoShape) {
                     delete this.shapes[frame];
                 }
+                this.updated = Date.now();
             }, () => {
                 this.attributes = redoAttributes;
                 if (redoShape) {
                     this.shapes[frame] = redoShape;
                 }
+                this.updated = Date.now();
             }, [this.clientID], frame);
         }
 
@@ -868,12 +893,14 @@
                 } else {
                     this.shapes[frame] = undoShape;
                 }
+                this.updated = Date.now();
             }, () => {
                 if (!redoShape) {
                     delete this.shapes[frame];
                 } else {
                     this.shapes[frame] = redoShape;
                 }
+                this.updated = Date.now();
             }, [this.clientID], frame);
         }
 

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

@@ -47,6 +47,9 @@ function DrawShapePopoverComponent(props: Props): JSX.Element {
         onChangeRectDrawingMethod,
     } = props;
 
+    const trackDisabled = shapeType === ShapeType.POLYGON || shapeType === ShapeType.POLYLINE
+        || (shapeType === ShapeType.POINTS && numberOfPoints !== 1);
+
     return (
         <div className='cvat-draw-shape-popover-content'>
             <Row type='flex' justify='start'>
@@ -148,7 +151,7 @@ function DrawShapePopoverComponent(props: Props): JSX.Element {
                     <Tooltip title={`Press ${repeatShapeShortcut} to draw again`}>
                         <Button
                             onClick={onDrawTrack}
-                            disabled={shapeType !== ShapeType.RECTANGLE}
+                            disabled={trackDisabled}
                         >
                             Track
                         </Button>

cvat-ui/src/components/task-page/details.tsx

@@ -299,8 +299,14 @@ export default class DetailsComponent extends React.PureComponent<Props, State>
                                                         repositoryStatus: 'sync',
                                                     });
                                                 }
-                                            }).catch((): void => {
+                                            }).catch((error): void => {
                                                 if (this.mounted) {
+                                                    Modal.error({
+                                                        width: 800,
+                                                        title: 'Could not synchronize the repository',
+                                                        content: error.toString(),
+                                                    });
+
                                                     this.setState({
                                                         repositoryStatus: '!sync',
                                                     });

cvat-ui/src/containers/annotation-page/top-bar/top-bar.tsx

@@ -520,7 +520,9 @@ class AnnotationTopBarContainer extends React.PureComponent<Props> {
             },
             SAVE_JOB: (event: KeyboardEvent | undefined) => {
                 preventDefault(event);
-                this.onSaveAnnotation();
+                if (!saving) {
+                    this.onSaveAnnotation();
+                }
             },
             NEXT_FRAME: (event: KeyboardEvent | undefined) => {
                 preventDefault(event);

cvat-ui/src/utils/git-utils.ts

@@ -180,10 +180,10 @@ export function syncRepos(tid: number): Promise<void> {
                     resolve();
                 } else if (response.status === 'failed') {
                     const message = `Can not push to remote repository. Message: ${response.stderr}`;
-                    throw new Error(message);
+                    reject(new Error(message));
                 } else {
                     const message = `Check returned status "${response.status}".`;
-                    throw new Error(message);
+                    reject(new Error(message));
                 }
             }