Optimized brush, and eraser, closes #62

Author: jsbroks

client/src/components/annotator/Annotation.vue

@@ -203,6 +203,21 @@ export default {
       }
       return this.compoundPath;
     },
+    createUndoAction(actionName) {
+      if (this.compoundPath == null) this.createCompoundPath();
+
+      let copy = this.compoundPath.clone();
+      copy.visible = false;
+      this.pervious.push(copy);
+
+      let action = new UndoAction({
+        name: "Annotaiton " + this.annotation.id,
+        action: actionName,
+        func: this.undoCompound,
+        args: {}
+      });
+      this.addUndo(action);
+    },
     simplifyPath() {
       let flatten = 1;
       let simplify = this.simplify;
@@ -235,43 +250,39 @@ export default {
       this.compoundPath.remove();
       this.compoundPath = this.pervious.pop();
     },
-    unite(compound) {
+    /**
+     * Unites current annotation path with anyother path.
+     * @param {paper.CompoundPath} compound compound to unite current annotation path with
+     * @param {boolean} simplify simplify compound after unite
+     * @param {undoable} undoable add an undo action
+     */
+    unite(compound, simplify = true, undoable = true) {
       if (this.compoundPath == null) this.createCompoundPath();
 
       let newCompound = this.compoundPath.unite(compound);
+      if (undoable) this.createUndoAction("Unite");
 
-      this.compoundPath.visible = false;
-      this.pervious.push(this.compoundPath);
-
-      let action = new UndoAction({
-        name: "Annotaiton " + this.annotation.id,
-        action: "United",
-        func: this.undoCompound,
-        args: {}
-      });
-      this.addUndo(action);
-
+      this.compoundPath.remove();
       this.compoundPath = newCompound;
-      this.simplifyPath();
+
+      if (simplify) this.simplifyPath();
     },
-    subtract(compound) {
+    /**
+     * Subtract current annotation path with anyother path.
+     * @param {paper.CompoundPath} compound compound to subtract current annotation path with
+     * @param {boolean} simplify simplify compound after subtraction
+     * @param {undoable} undoable add an undo action
+     */
+    subtract(compound, simplify = true, undoable = true) {
       if (this.compoundPath == null) this.createCompoundPath();
 
       let newCompound = this.compoundPath.subtract(compound);
+      if (undoable) this.createUndoAction("Subtract");
 
-      this.compoundPath.visible = false;
-      this.pervious.push(this.compoundPath);
-
-      let action = new UndoAction({
-        name: "Annotaiton " + this.annotation.id,
-        action: "Subtract",
-        func: this.undoCompound,
-        args: {}
-      });
-      this.addUndo(action);
-
+      this.compoundPath.remove();
       this.compoundPath = newCompound;
-      this.simplifyPath();
+
+      if (simplify) this.simplifyPath();
     },
     setColor() {
       if (this.compoundPath == null) return;

client/src/components/annotator/tools/BrushTool.vue

@@ -54,14 +54,23 @@ export default {
       this.moveBrush(event.point);
     },
     onMouseDown() {
+      this.$parent.currentAnnotation.createUndoAction("Unite");
       this.draw();
     },
+    onMouseUp() {
+      this.$parent.currentAnnotation.simplifyPath();
+    },
     onMouseDrag(event) {
       this.moveBrush(event.point);
       this.draw();
     },
+    /**
+     * Unites current brush with selected annotation
+     */
     draw() {
-      this.$parent.uniteCurrentAnnotation(this.brush.path);
+      // Undo action, will be handled on mouse down
+      // Simplify, will be handled on mouse up
+      this.$parent.currentAnnotation.unite(this.brush.path, false, false);
     },
     decreaseRadius() {
       if (!this.isActive) return;

client/src/components/annotator/tools/EraserTool.vue

@@ -59,10 +59,16 @@ export default {
       this.erase();
     },
     onMouseDown() {
+      this.$parent.currentAnnotation.createUndoAction("Subtract");
       this.erase();
     },
+    onMouseUp() {
+      this.$parent.currentAnnotation.simplifyPath();
+    },
     erase() {
-      this.$parent.subtractCurrentAnnotation(this.eraser.brush);
+      // Undo action, will be handled on mouse down
+      // Simplify, will be handled on mouse up
+      this.$parent.currentAnnotation.subtract(this.eraser.brush, false, false);
     },
     decreaseRadius() {
       if (!this.isActive) return;

client/src/components/annotator/tools/MagicWandTool.vue

@@ -25,12 +25,24 @@ export default {
     };
   },
   methods: {
+    /**
+     * Exports settings
+     * @returns {object} current settings
+     */
     export() {
       return {
         threshold: this.wand.threshold,
         blur: this.wand.blur
       };
     },
+    /**
+     * Creates MagicWand selection
+     * @param {number} x x position
+     * @param {number} y y position
+     * @param {number} thr threashold
+     * @param {number} rad radius blur
+     * @returns {paper.CompoundPath} create selection
+     */
     flood(x, y, thr, rad) {
       let image = {
         data: this.imageInfo.data.data,
@@ -61,10 +73,14 @@ export default {
       }
       return null;
     },
+    onMouseUp() {
+      // this.$parent.currentAnnotation.simplifyPath();
+    },
     onMouseDown(event) {
       let x = Math.round(this.imageInfo.width / 2 + event.point.x);
       let y = Math.round(this.imageInfo.height / 2 + event.point.y);
 
+      // Check if valid coordinates
       if (
         x > this.imageInfo.width ||
         y > this.imageInfo.height ||
@@ -74,17 +90,16 @@ export default {
         return;
       }
 
+      // Create shape and apply to current annotation
       let path = this.flood(x, y, this.wand.threshold, this.wand.blur);
-
       if (event.modifiers.shift) {
-        this.$parent.subtractCurrentAnnotation(path);
+        this.$parent.currentAnnotation.unite(path);
       } else {
-        this.$parent.uniteCurrentAnnotation(path);
+        this.$parent.currentAnnotation.unite(path);
       }
 
       if (path != null) path.remove();
     },
-
     onMouseDrag(event) {
       this.onMouseDown(event);
     }
@@ -95,6 +110,7 @@ export default {
     }
   },
   watch: {
+    // Generate data whenever the image changes
     raster(raster) {
       if (raster == null) return;
       if (Object.keys(raster).length === 0) return;

client/src/components/annotator/tools/UndoButton.vue

@@ -35,8 +35,8 @@ export default {
   },
   watch: {
     undoList() {
-      this.iconColor =
-        this.undoList.length === 0 ? this.color.disabled : this.color.enabled;
+      this.disabled = this.undoList.length === 0;
+      this.iconColor = this.disabled ? this.color.disabled : this.color.enabled;
     }
   },
   created() {

client/src/views/Annotator.vue

@@ -415,15 +415,13 @@ export default {
       return this.$refs.category[index];
     },
     // Current Annotation Operations
-    uniteCurrentAnnotation(compound) {
+    uniteCurrentAnnotation(compound, simplify = true, undoable = true) {
       if (this.currentAnnotation == null) return;
-
-      this.currentAnnotation.unite(compound);
+      this.currentAnnotation.unite(compound, simplify, undoable);
     },
-    subtractCurrentAnnotation(compound) {
+    subtractCurrentAnnotation(compound, simplify = true, undoable = true) {
       if (this.currentCategory == null) return;
-
-      this.currentAnnotation.subtract(compound);
+      this.currentAnnotation.subtract(compound, simplify, undoable);
     },
 
     setCursor(newCursor) {