fix: Add requestAnimationFrame for Crosshairs SVG updates. Include la… (OHIF#36)

* fix: Add requestAnimationFrame for Crosshairs SVG updates. Include larger head model for testing performance

* Fix lockfile

Author: swederik

examples/VTKCrosshairsExample.js

@@ -71,7 +71,7 @@ class VTKCrosshairsExample extends Component {
 
     volumeActor.setMapper(volumeMapper);
 
-    reader.setUrl('/headsq.vti', { loadData: true }).then(() => {
+    reader.setUrl('/vmhead2-large.vti', { loadData: true }).then(() => {
       const data = reader.getOutputData();
       volumeMapper.setInputData(data);
 

public/vmhead2-large.vti/data/cd5fdd0a0c562d5753de2e8189c7fdf7.gz

@@ -0,0 +1,59 @@
+{
+  "origin": [
+    0.0, 
+    0.0, 
+    0.0
+  ], 
+  "cellData": {
+    "arrays": [], 
+    "vtkClass": "vtkDataSetAttributes"
+  }, 
+  "FieldData": {
+    "arrays": [], 
+    "vtkClass": "vtkDataSetAttributes"
+  }, 
+  "vtkClass": "vtkImageData", 
+  "pointData": {
+    "arrays": [
+      {
+        "data": {
+          "numberOfComponents": 1, 
+          "name": "nrrd75611", 
+          "vtkClass": "vtkDataArray", 
+          "dataType": "Uint16Array", 
+          "ranges": [
+            {
+              "max": 4095.0, 
+              "component": null, 
+              "min": 0.0
+            }
+          ], 
+          "ref": {
+            "encode": "LittleEndian", 
+            "basepath": "data", 
+            "id": "cd5fdd0a0c562d5753de2e8189c7fdf7", 
+            "registration": "setScalars"
+          }, 
+          "size": 77070336
+        }
+      }
+    ], 
+    "vtkClass": "vtkDataSetAttributes"
+  }, 
+  "spacing": [
+    0.527344, 
+    0.527344, 
+    1.0
+  ], 
+  "extent": [
+    0, 
+    511, 
+    0, 
+    511, 
+    0, 
+    293
+  ], 
+  "metadata": {
+    "name": "vmhead2-large.vti"
+  }
+}

public/vmhead2-large.vti/index.json

@@ -74,17 +74,22 @@ function vtkSVGWidgetManager(publicAPI, model) {
 
   publicAPI.render = () => {
     if (model.svgRootNode) {
-      const { scale } = model;
-      const [width, height] = publicAPI.getSize();
-      model.svgRootNode.setAttribute(
-        'viewBox',
-        `0 0 ${width * scale} ${height * scale}`
-      );
-      model.svgRootNode.setAttribute('width', `${width * scale}`);
-      model.svgRootNode.setAttribute('height', `${height * scale}`);
-      for (let i = 0; i < model.widgets.length; i++) {
-        model.widgets[i].render(model.svgRootNode, model.scale);
-      }
+      // TODO: Not sure this is the best approach but it seems to be
+      // making things smoother. Updating the DOM seemed to be
+      // the performance bottleneck for the crosshairs tool
+      requestAnimationFrame(() => {
+        const { scale } = model;
+        const [width, height] = publicAPI.getSize();
+        model.svgRootNode.setAttribute(
+          'viewBox',
+          `0 0 ${width * scale} ${height * scale}`
+        );
+        model.svgRootNode.setAttribute('width', `${width * scale}`);
+        model.svgRootNode.setAttribute('height', `${height * scale}`);
+        for (let i = 0; i < model.widgets.length; i++) {
+          model.widgets[i].render(model.svgRootNode, model.scale);
+        }
+      });
     }
   };
 }