React UI: Undo/redo

cvat-core/src/annotations-collection.js

@@ -32,6 +32,7 @@
     } = require('./exceptions');
 
     const {
+        HistoryActions,
         ObjectShape,
         ObjectType,
         colors,
@@ -109,6 +110,7 @@
                 return labelAccumulator;
             }, {});
 
+            this.history = data.history;
             this.shapes = {}; // key is a frame
             this.tags = {}; // key is a frame
             this.tracks = [];
@@ -124,16 +126,25 @@
                 collectionZ: this.collectionZ,
                 groups: this.groups,
                 frameMeta: this.frameMeta,
+                history: this.history,
             };
         }
 
         import(data) {
+            const result = {
+                tags: [],
+                shapes: [],
+                tracks: [],
+            };
+
             for (const tag of data.tags) {
                 const clientID = ++this.count;
                 const tagModel = new Tag(tag, clientID, this.injection);
                 this.tags[tagModel.frame] = this.tags[tagModel.frame] || [];
                 this.tags[tagModel.frame].push(tagModel);
                 this.objects[clientID] = tagModel;
+
+                result.tags.push(tagModel);
             }
 
             for (const shape of data.shapes) {
@@ -142,6 +153,8 @@
                 this.shapes[shapeModel.frame] = this.shapes[shapeModel.frame] || [];
                 this.shapes[shapeModel.frame].push(shapeModel);
                 this.objects[clientID] = shapeModel;
+
+                result.shapes.push(shapeModel);
             }
 
             for (const track of data.tracks) {
@@ -152,10 +165,12 @@
                 if (trackModel) {
                     this.tracks.push(trackModel);
                     this.objects[clientID] = trackModel;
+
+                    result.tracks.push(trackModel);
                 }
             }
 
-            return this;
+            return result;
         }
 
         export() {
@@ -378,6 +393,18 @@
             for (const object of objectsForMerge) {
                 object.removed = true;
             }
+
+            this.history.do(HistoryActions.MERGED_OBJECTS, () => {
+                trackModel.removed = true;
+                for (const object of objectsForMerge) {
+                    object.removed = false;
+                }
+            }, () => {
+                trackModel.removed = false;
+                for (const object of objectsForMerge) {
+                    object.removed = true;
+                }
+            }, [...objectsForMerge.map((object) => object.clientID), trackModel.clientID]);
         }
 
         split(objectState, frame) {
@@ -463,6 +490,16 @@
 
             // Remove source object
             object.removed = true;
+
+            this.history.do(HistoryActions.SPLITTED_TRACK, () => {
+                object.removed = false;
+                prevTrack.removed = true;
+                nextTrack.removed = true;
+            }, () => {
+                object.removed = true;
+                prevTrack.removed = false;
+                nextTrack.removed = false;
+            }, [object.clientID, prevTrack.clientID, nextTrack.clientID]);
         }
 
         group(objectStates, reset) {
@@ -480,9 +517,21 @@
             });
 
             const groupIdx = reset ? 0 : ++this.groups.max;
+            const undoGroups = objectsForGroup.map((object) => object.group);
             for (const object of objectsForGroup) {
                 object.group = groupIdx;
             }
+            const redoGroups = objectsForGroup.map((object) => object.group);
+
+            this.history.do(HistoryActions.GROUPED_OBJECTS, () => {
+                objectsForGroup.forEach((object, idx) => {
+                    object.group = undoGroups[idx];
+                });
+            }, () => {
+                objectsForGroup.forEach((object, idx) => {
+                    object.group = redoGroups[idx];
+                });
+            }, objectsForGroup.map((object) => object.clientID));
 
             return groupIdx;
         }
@@ -704,7 +753,20 @@
             }
 
             // Add constructed objects to a collection
-            this.import(constructed);
+            const imported = this.import(constructed);
+            const importedArray = imported.tags
+                .concat(imported.tracks)
+                .concat(imported.shapes);
+
+            this.history.do(HistoryActions.CREATED_OBJECTS, () => {
+                importedArray.forEach((object) => {
+                    object.removed = true;
+                });
+            }, () => {
+                importedArray.forEach((object) => {
+                    object.removed = false;
+                });
+            }, importedArray.map((object) => object.clientID));
         }
 
         select(objectStates, x, y) {

cvat-core/src/annotations-history.js

@@ -0,0 +1,71 @@
+/*
+* Copyright (C) 2019-2020 Intel Corporation
+* SPDX-License-Identifier: MIT
+*/
+
+const MAX_HISTORY_LENGTH = 128;
+
+class AnnotationHistory {
+    constructor() {
+        this.clear();
+    }
+
+    get() {
+        return {
+            undo: this._undo.map((undo) => undo.action),
+            redo: this._redo.map((redo) => redo.action),
+        };
+    }
+
+    do(action, undo, redo, clientIDs) {
+        const actionItem = {
+            clientIDs,
+            action,
+            undo,
+            redo,
+        };
+
+        this._undo = this._undo.slice(-MAX_HISTORY_LENGTH + 1);
+        this._undo.push(actionItem);
+        this._redo = [];
+    }
+
+    undo(count) {
+        const affectedObjects = [];
+        for (let i = 0; i < count; i++) {
+            const action = this._undo.pop();
+            if (action) {
+                action.undo();
+                this._redo.push(action);
+                affectedObjects.push(...action.clientIDs);
+            } else {
+                break;
+            }
+        }
+
+        return affectedObjects;
+    }
+
+    redo(count) {
+        const affectedObjects = [];
+        for (let i = 0; i < count; i++) {
+            const action = this._redo.pop();
+            if (action) {
+                action.redo();
+                this._undo.push(action);
+                affectedObjects.push(...action.clientIDs);
+            } else {
+                break;
+            }
+        }
+
+        return affectedObjects;
+    }
+
+    clear() {
+        this._undo = [];
+        this._redo = [];
+    }
+}
+
+module.exports = AnnotationHistory;