Add volume undo/redo support

.prettierrc

@@ -1,5 +1,12 @@
 {
   "trailingComma": "all",
   "printWidth": 100,
+  "overrides": [
+    {
+      "files": "effect-generators.js.flow",
+      "options": {
+        "printWidth": 200
+      }
+    }
+  ]
 }
-

CHANGELOG.unreleased.md

@@ -12,6 +12,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 
 ### Added
 - Added the possibility to remove the fallback segmentation layer from a hybrid/volume tracing. Accessible by a minus button next to the layer's settings. [#4741](https://github.com/scalableminds/webknossos/pull/4766)
+- Added the possibility to undo and redo volume annotation strokes. [#4771](https://github.com/scalableminds/webknossos/pull/4771)
 
 ### Changed
 -

frontend/javascripts/messages.js

@@ -97,6 +97,8 @@ instead. Only enable this option if you understand its effect. All layers will n
   "tracing.branchpoint_set": "Branchpoint set",
   "tracing.branchpoint_jump_twice":
     "You didn't add a node after jumping to this branchpoint, do you really want to jump again?",
+  "tracing.edit_volume_in_merger_mode":
+    "The volume annotation would be changed by this action. This is not allowed while merger mode is active.",
   "tracing.segmentation_zoom_warning":
     "Segmentation data and volume annotation is only fully supported at a smaller zoom level.",
   "tracing.uint64_segmentation_warning":

frontend/javascripts/oxalis/controller/combinations/volumetracing_plane_controller.js

@@ -20,7 +20,7 @@ import {
   addToLayerAction,
   finishEditingAction,
   hideBrushAction,
-  setContourTracingMode,
+  setContourTracingModeAction,
   cycleToolAction,
   copySegmentationLayerAction,
   inferSegmentationInViewportAction,
@@ -99,9 +99,9 @@ export function getPlaneMouseControls(_planeId: OrthoView): * {
           if (isAutomaticBrushEnabled()) {
             return;
           }
-          Store.dispatch(setContourTracingMode(ContourModeEnum.DRAW));
+          Store.dispatch(setContourTracingModeAction(ContourModeEnum.DRAW));
         } else {
-          Store.dispatch(setContourTracingMode(ContourModeEnum.DRAW_OVERWRITE));
+          Store.dispatch(setContourTracingModeAction(ContourModeEnum.DRAW_OVERWRITE));
         }
         Store.dispatch(startEditingAction(calculateGlobalPos(pos), plane));
       }
@@ -110,7 +110,7 @@ export function getPlaneMouseControls(_planeId: OrthoView): * {
     leftMouseUp: () => {
       const tool = Utils.enforce(getVolumeTool)(Store.getState().tracing.volume);
 
-      Store.dispatch(setContourTracingMode(ContourModeEnum.IDLE));
+      Store.dispatch(setContourTracingModeAction(ContourModeEnum.IDLE));
 
       if (tool === VolumeToolEnum.TRACE || tool === VolumeToolEnum.BRUSH) {
         Store.dispatch(finishEditingAction());
@@ -137,9 +137,9 @@ export function getPlaneMouseControls(_planeId: OrthoView): * {
 
       if (!event.shiftKey && (tool === VolumeToolEnum.TRACE || tool === VolumeToolEnum.BRUSH)) {
         if (event.ctrlKey) {
-          Store.dispatch(setContourTracingMode(ContourModeEnum.DELETE_FROM_ANY_CELL));
+          Store.dispatch(setContourTracingModeAction(ContourModeEnum.DELETE_FROM_ANY_CELL));
         } else {
-          Store.dispatch(setContourTracingMode(ContourModeEnum.DELETE_FROM_ACTIVE_CELL));
+          Store.dispatch(setContourTracingModeAction(ContourModeEnum.DELETE_FROM_ACTIVE_CELL));
         }
         Store.dispatch(startEditingAction(calculateGlobalPos(pos), plane));
       }
@@ -148,11 +148,11 @@ export function getPlaneMouseControls(_planeId: OrthoView): * {
     rightMouseUp: () => {
       const tool = Utils.enforce(getVolumeTool)(Store.getState().tracing.volume);
 
-      Store.dispatch(setContourTracingMode(ContourModeEnum.IDLE));
+      Store.dispatch(setContourTracingModeAction(ContourModeEnum.IDLE));
 
       if (tool === VolumeToolEnum.TRACE || tool === VolumeToolEnum.BRUSH) {
         Store.dispatch(finishEditingAction());
-        Store.dispatch(setContourTracingMode(ContourModeEnum.IDLE));
+        Store.dispatch(setContourTracingModeAction(ContourModeEnum.IDLE));
       }
     },
 

frontend/javascripts/oxalis/model/actions/save_actions.js

@@ -29,8 +29,8 @@ type SetVersionNumberAction = {
   version: number,
   tracingType: Tracing,
 };
-type UndoAction = { type: "UNDO" };
-type RedoAction = { type: "REDO" };
+export type UndoAction = { type: "UNDO" };
+export type RedoAction = { type: "REDO" };
 type DisableSavingAction = { type: "DISABLE_SAVING" };
 export type SaveAction =
   | PushSaveQueueTransaction

frontend/javascripts/oxalis/model/actions/volumetracing_actions.js

@@ -3,7 +3,15 @@
  * @flow
  */
 import type { ServerVolumeTracing } from "admin/api_flow_types";
-import type { Vector2, Vector3, OrthoView, VolumeTool, ContourMode } from "oxalis/constants";
+import type {
+  Vector2,
+  Vector3,
+  Vector4,
+  OrthoView,
+  VolumeTool,
+  ContourMode,
+} from "oxalis/constants";
+import type { BucketDataArray } from "oxalis/model/bucket_data_handling/bucket";
 
 type InitializeVolumeTracingAction = {
   type: "INITIALIZE_VOLUMETRACING",
@@ -20,11 +28,17 @@ export type CopySegmentationLayerAction = {
   type: "COPY_SEGMENTATION_LAYER",
   source: "previousLayer" | "nextLayer",
 };
+export type AddBucketToUndoAction = {
+  type: "ADD_BUCKET_TO_UNDO",
+  zoomedBucketAddress: Vector4,
+  bucketData: BucketDataArray,
+};
 type UpdateDirectionAction = { type: "UPDATE_DIRECTION", centroid: Vector3 };
 type ResetContourAction = { type: "RESET_CONTOUR" };
+export type FinishAnnotationStrokeAction = { type: "FINISH_ANNOTATION_STROKE" };
 type SetMousePositionAction = { type: "SET_MOUSE_POSITION", position: Vector2 };
 type HideBrushAction = { type: "HIDE_BRUSH" };
-type SetContourTracingMode = { type: "SET_CONTOUR_TRACING_MODE", mode: ContourMode };
+type SetContourTracingModeAction = { type: "SET_CONTOUR_TRACING_MODE", mode: ContourMode };
 export type InferSegmentationInViewportAction = {
   type: "INFER_SEGMENT_IN_VIEWPORT",
   position: Vector3,
@@ -42,11 +56,13 @@ export type VolumeTracingAction =
   | CycleToolAction
   | UpdateDirectionAction
   | ResetContourAction
+  | FinishAnnotationStrokeAction
   | SetMousePositionAction
   | HideBrushAction
   | CopySegmentationLayerAction
   | InferSegmentationInViewportAction
-  | SetContourTracingMode
+  | SetContourTracingModeAction
+  | AddBucketToUndoAction
   | RemoveFallbackLayerAction;
 
 export const VolumeTracingSaveRelevantActions = [
@@ -57,6 +73,8 @@ export const VolumeTracingSaveRelevantActions = [
   "REMOVE_FALLBACK_LAYER",
 ];
 
+export const VolumeTracingUndoRelevantActions = ["START_EDITING", "COPY_SEGMENTATION_LAYER"];
+
 export const initializeVolumeTracingAction = (
   tracing: ServerVolumeTracing,
 ): InitializeVolumeTracingAction => ({
@@ -112,6 +130,10 @@ export const resetContourAction = (): ResetContourAction => ({
   type: "RESET_CONTOUR",
 });
 
+export const finishAnnotationStrokeAction = (): FinishAnnotationStrokeAction => ({
+  type: "FINISH_ANNOTATION_STROKE",
+});
+
 export const setMousePositionAction = (position: Vector2): SetMousePositionAction => ({
   type: "SET_MOUSE_POSITION",
   position,
@@ -121,11 +143,16 @@ export const hideBrushAction = (): HideBrushAction => ({
   type: "HIDE_BRUSH",
 });
 
-export const setContourTracingMode = (mode: ContourMode): SetContourTracingMode => ({
+export const setContourTracingModeAction = (mode: ContourMode): SetContourTracingModeAction => ({
   type: "SET_CONTOUR_TRACING_MODE",
   mode,
 });
 
+export const addBucketToUndoAction = (
+  zoomedBucketAddress: Vector4,
+  bucketData: BucketDataArray,
+): AddBucketToUndoAction => ({ type: "ADD_BUCKET_TO_UNDO", zoomedBucketAddress, bucketData });
+
 export const inferSegmentationInViewportAction = (
   position: Vector3,
 ): InferSegmentationInViewportAction => ({

frontend/javascripts/oxalis/model/bucket_data_handling/bucket.js

@@ -19,6 +19,7 @@ import TemporalBucketManager from "oxalis/model/bucket_data_handling/temporal_bu
 import Constants, { type Vector4 } from "oxalis/constants";
 import window from "libs/window";
 import { type ElementClass } from "admin/api_flow_types";
+import { addBucketToUndoAction } from "oxalis/model/actions/volumetracing_actions";
 
 export const BucketStateEnum = {
   UNREQUESTED: "UNREQUESTED",
@@ -28,6 +29,9 @@ export const BucketStateEnum = {
 };
 export type BucketStateEnumType = $Keys<typeof BucketStateEnum>;
 export type BucketDataArray = Uint8Array | Uint16Array | Uint32Array | Float32Array;
+// This set saves whether a bucket is already added to the current undo volume batch
+// and gets cleared by the save saga after an annotation step has finished.
+export const bucketsAlreadyInUndoState: Set<string> = new Set();
 
 export const bucketDebuggingFlags = {
   // For visualizing buckets which are passed to the GPU
@@ -161,7 +165,15 @@ export class DataBucket {
   }
 
   label(labelFunc: BucketDataArray => void) {
-    labelFunc(this.getOrCreateData());
+    const bucketData = this.getOrCreateData();
+    const zoomedAddressAsString = this.zoomedAddress.toString();
+    if (!bucketsAlreadyInUndoState.has(zoomedAddressAsString)) {
+      const TypedArrayClass = getConstructorForElementClass(this.elementClass)[0];
+      const dataClone = new TypedArrayClass(bucketData);
+      Store.dispatch(addBucketToUndoAction(this.zoomedAddress, dataClone));
+      bucketsAlreadyInUndoState.add(zoomedAddressAsString);
+    }
+    labelFunc(bucketData);
     this.dirty = true;
     this.throttledTriggerLabeled();
   }
@@ -173,14 +185,25 @@ export class DataBucket {
   }
 
   getData(): BucketDataArray {
-    const data = this.data;
+    const { data } = this;
     if (data == null) {
       throw new Error("Bucket.getData() called, but data does not exist (anymore).");
     }
 
     return data;
   }
 
+  setData(newData: Uint8Array) {
+    const TypedArrayClass = getConstructorForElementClass(this.elementClass)[0];
+    this.data = new TypedArrayClass(
+      newData.buffer,
+      newData.byteOffset,
+      newData.byteLength / TypedArrayClass.BYTES_PER_ELEMENT,
+    );
+    this.dirty = true;
+    this.trigger("bucketLabeled");
+  }
+
   markAsNeeded(): void {
     this.accessed = true;
   }

frontend/javascripts/oxalis/model/bucket_data_handling/data_cube.js

@@ -59,7 +59,7 @@ class DataCube {
   on: Function;
   off: Function;
 
-  // The cube stores the buckets in a seperate array for each zoomStep. For each
+  // The cube stores the buckets in a separate array for each zoomStep. For each
   // zoomStep the cube-array contains the boundaries and an array holding the buckets.
   // The bucket-arrays are initialized large enough to hold the whole cube. Thus no
   // expanding is necessary. bucketCount keeps track of how many buckets are currently
@@ -331,8 +331,7 @@ class DataCube {
       this.labelVoxel(voxel, label, activeCellId);
     }
 
-    this.pushQueue.push();
-    this.trigger("volumeLabeled");
+    this.triggerPushQueue();
   }
 
   labelVoxel(voxel: Vector3, label: number, activeCellId: ?number): void {
@@ -368,6 +367,20 @@ class DataCube {
     }
   }
 
+  setBucketData(zoomedAddress: Vector4, data: Uint8Array) {
+    const bucket = this.getOrCreateBucket(zoomedAddress);
+    if (bucket.type === "null") {
+      return;
+    }
+    bucket.setData(data);
+    this.pushQueue.insert(bucket);
+  }
+
+  triggerPushQueue() {
+    this.pushQueue.push();
+    this.trigger("volumeLabeled");
+  }
+
   hasDataAtPositionAndZoomStep(voxel: Vector3, zoomStep: number = 0) {
     return this.getBucket(this.positionToZoomedAddress(voxel, zoomStep)).hasData();
   }

frontend/javascripts/oxalis/model/sagas/effect-generators.js

@@ -34,6 +34,10 @@ export function* race(...args) {
   return yield IOEffects.race(...args);
 }
 
+export function* join(...args) {
+  return yield IOEffects.join(...args);
+}
+
 export const _take = IOEffects.take;
 export const _call = IOEffects.call;
 export const _takeEvery = IOEffects.takeEvery;