Feature/3d highlighting (#191)

* Add hover to volume view

* Reset hover label when leaving views

* Add onEdit to volume view

* Render brush on top of outlines

* Clear widget position on mouseout

* Adjust brush z offset

* Reset highlight region on mouseout

* Experiment with warp scalar for highlight

* Adjust highlight color

* Add basic shaders for highlightj

* Working on shaders

* Expand highlight surface in shader instead of using vtkWarpScalars

* Highlight active region as placeholder

* Highlight 3D region from 2D view

* Add comment

* Fix bug with create due to mouseout with dialog

* Add highlighting for non-background region tools

* Experimenting with background region highlighting

* Able to highlight background by passing in mapped color to shader

* Add 2D only to tool information

* Background highlighting on mouseover working

* Add missing shaders

* Background highlighting works with region highlights

* Only use fragment program for background

* Add setTableColors function

* Clean up shader code

* Clear highlighted region on tool change

* Clear highlighted region on tool change

* Try using sign of mouse spin to see if that helps with skipped slices

* Clear highlight on mouseout

* Remove some warnings

* Set highlight to transparent in shader

client/src/contexts/annotate-context.js

@@ -30,7 +30,7 @@ const tools = [
     info: 'Click and drag to erase voxels containing the active region label. Change brush size by clicking the option button next to the icon.'  
   },
   { group: 'edit', value: 'crop', icon: 'crop', cursor: getCursor('crop.png', 11, 21), tooltip: 'crop', disabled: disabled('no active'),
-    info: 'Click and drag to erase all voxels containing the active region label within the specified rectangle.'
+    info: 'Click and drag to erase all voxels containing the active region label within the specified rectangle – 2D only.'
   },
   { group: 'region', value: 'split', icon: 'share alternate', cursor: getCursor('split.png', 12, 16), tooltip: 'split', disabled: disabled('no active'), volume: true,
     info: 'Click on a region in the assignment to split it into two regions at the current z slice.'
@@ -39,7 +39,7 @@ const tools = [
     info: 'Click on a region in the assignment to assign all of its voxels to the active region.'
   },
   { group: 'region', value: 'create', icon: 'plus circle', cursor: getCursor('create.png', 15, 16), tooltip: 'create', disabled: disabled('never'),
-    info: 'Click to add a new region.'
+    info: 'Click to add a new region – 2D only.'
   },
   { group: 'region', value: 'delete', icon: 'minus circle', cursor: getCursor('delete.png', 15, 16), tooltip: 'delete', disabled: disabled('no active'), volume: true,
     info: 'Click to delete a region in the assignment, erasing all of its voxels.'

client/src/modules/view/components/slice-view/slice-view-wrapper.js

@@ -114,6 +114,14 @@ export const SliceViewWrapper = ({ sliceView, onEdit, onSliceChange, onSelect, o
   }, [initialized, sliceView]);
 
   return (
-    <div ref={ div } style={{ height: width }} />
+    <div 
+      ref={ div } 
+      style={{ height: width }}
+      onMouseOut={ () => {
+        onHover(null);
+        onHighlight(null);
+        if (sliceView) sliceView.mouseOut();
+      }}
+    />
   );
 };

client/src/modules/view/components/slice-view/slice-view.js

@@ -156,6 +156,10 @@ export function SliceView() {
     },
     canUndo: () => mask.getPainter().canUndo(),
     canRedo: () => mask.getPainter().canRedo(),
+    mouseOut: () => {
+      widgets.mouseOut();
+      mask.setHighlightRegion(null);
+    },
     cleanUp: () => {
       console.log('Clean up slice view');
 

client/src/modules/view/components/slice-view/widgets.js

@@ -331,11 +331,16 @@ export function Widgets(painter) {
       setColor(handles.erase, color);
       setColor(handles.crop, color);
     },
+    mouseOut: () => {
+      hoverLabel = null;
+      highlightLabel = null;
+      if (activeWidget) activeWidget.setPosition(null);
+    },
     createRegion: async () => {
       painter.startStroke();
 
       painter.paintFloodFill(
-        handles.create.getPoints(), 
+        widgets.create.getEventPos(),
         handles.create.getRepresentations()[0].getBrush()
       );
 

client/src/modules/view/components/slice.js

@@ -1,5 +1,3 @@
-//import vtkInteractorStyleManipulator from '@kitware/vtk.js/Interaction/Style/InteractorStyleManipulator';
-//import vtkInteractorStyleImage from '@kitware/vtk.js/Interaction/Style/InteractorStyleImage';
 import vtkMouseRangeManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseRangeManipulator';
 import vtkImageMapper from '@kitware/vtk.js/Rendering/Core/ImageMapper';
 
@@ -147,6 +145,9 @@ export function Slice() {
           setWindowLevel(imageActor, sliceRanges[z]);
 
           if (onSliceChange) onSliceChange(z, position);
+
+          // Need this when no widget enabled
+          interactor.getFirstRenderer().getRenderWindow().render();
         };
 
         imageMapper.onModified(updateSlice);