feat: 🎸 dispatch vtk scroll event

* chore: add uuid func

* feat: emit vtkscrollevent

* feat: set uuid on api and for interactorStyle's model

* chore: shift the responsibility of setting the UID on the iStyle to the components consumer

Co-authored-by: James Petts <[email protected]>

Author: dannyrb

src/VTKViewport/View2D.js

@@ -13,6 +13,7 @@ import { ViewTypes } from 'vtk.js/Sources/Widgets/Core/WidgetManager/Constants';
 import { createSub } from '../lib/createSub.js';
 import realsApproximatelyEqual from '../lib/math/realsApproximatelyEqual';
 import createLabelPipeline from './createLabelPipeline';
+import { uuidv4 } from './../helpers';
 
 const minSlabThickness = 0.1; // TODO -> Should this be configurable or not?
 
@@ -74,6 +75,9 @@ export default class View2D extends Component {
   }
 
   componentDidMount() {
+    // Tracking ID to tie emitted events to this component
+    const uid = uuidv4();
+
     this.genericRenderWindow = vtkGenericRenderWindow.newInstance({
       background: [0, 0, 0],
     });
@@ -213,6 +217,7 @@ export default class View2D extends Component {
        * we make with consumers of this component.
        */
       const api = {
+        uid, // Tracking id available on `api`
         genericRenderWindow: this.genericRenderWindow,
         widgetManager: this.widgetManager,
         svgWidgetManager: this.svgWidgetManager,

src/VTKViewport/vtkInteractorStyleMPRSlice.js

@@ -200,6 +200,7 @@ function vtkInteractorStyleMPRSlice(publicAPI, model) {
   let cameraSub = null;
   let interactorSub = null;
   const superSetInteractor = publicAPI.setInteractor;
+
   publicAPI.setInteractor = interactor => {
     superSetInteractor(interactor);
 
@@ -339,6 +340,12 @@ function vtkInteractorStyleMPRSlice(publicAPI, model) {
   // Only run the onScroll callback if called from scrolling,
   // preventing manual setSlice calls from triggering the CB.
   publicAPI.scrollToSlice = slice => {
+    // Dispatch custom event
+    const vtkScrollEvent = new CustomEvent('vtkscrollevent', {
+      detail: { uid: publicAPI.getUid() },
+    });
+    window.dispatchEvent(vtkScrollEvent);
+
     const slicePoint = publicAPI.setSlice(slice);
 
     // run Callback
@@ -560,6 +567,14 @@ function vtkInteractorStyleMPRSlice(publicAPI, model) {
     camera.setThicknessFromFocalPoint(slabThickness);
   };
 
+  publicAPI.setUid = uid => {
+    model.uid = uid;
+  };
+
+  publicAPI.getUid = () => {
+    return model.uid;
+  };
+
   setManipulators();
 }
 
@@ -569,6 +584,7 @@ function vtkInteractorStyleMPRSlice(publicAPI, model) {
 
 const DEFAULT_VALUES = {
   slabThickness: 0.1,
+  uid: '',
 };
 
 // ----------------------------------------------------------------------------
@@ -593,6 +609,7 @@ export function extend(publicAPI, model, initialValues = {}) {
 
 // ----------------------------------------------------------------------------
 
+// Returns new instance factory, takes initial values object
 export const newInstance = macro.newInstance(
   extend,
   'vtkInteractorStyleMPRSlice'

src/helpers/index.js

@@ -3,6 +3,7 @@ import formatDA from './formatDA';
 import formatTM from './formatTM';
 import formatNumberPrecision from './formatNumberPrecision';
 import isValidNumber from './isValidNumber';
+import uuidv4 from './uuidv4.js';
 
 const helpers = {
   formatPN,
@@ -12,4 +13,4 @@ const helpers = {
   isValidNumber,
 };
 
-export { helpers };
+export { helpers, uuidv4 };

src/helpers/uuidv4.js

@@ -0,0 +1,8 @@
+// From: https://stackoverflow.com/a/2117523/1867984
+
+// prettier-ignore
+export default function uuidv4() {
+  return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
+    (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
+  );
+}