refactor(AxesActor): ability to invert axis

Kitware · Mar 15, 2024 · ed1bc4c · ed1bc4c
1 parent 5359685
commit ed1bc4c
Show file tree

Hide file tree

Showing 3 changed files with 138 additions and 11 deletions.
diff --git a/Examples/Geometry/AxesActor/controlPanel.html b/Examples/Geometry/AxesActor/controlPanel.html
@@ -0,0 +1,26 @@
+<table>
+  <tr>
+    <td>Center axis</td>
+    <td>
+      <input class="recenter"  type="checkbox" checked />
+    </td>
+  </tr>
+  <tr>
+    <td>X axis inversion</td>
+    <td>
+      <input class="xAxisInvert"  type="checkbox" />
+    </td>
+  </tr>
+  <tr>
+    <td>Y axis inversion</td>
+    <td>
+      <input class="yAxisInvert"  type="checkbox" />
+    </td>
+  </tr>
+  <tr>
+    <td>Z axis inversion</td>
+    <td>
+      <input class="zAxisInvert"  type="checkbox" />
+    </td>
+  </tr>
+</table>
diff --git a/Examples/Geometry/AxesActor/index.js b/Examples/Geometry/AxesActor/index.js
@@ -0,0 +1,74 @@
+import '@kitware/vtk.js/favicon';
+
+// Load the rendering pieces we want to use (for both WebGL and WebGPU)
+import '@kitware/vtk.js/Rendering/Profiles/Geometry';
+
+import macro from '@kitware/vtk.js/macros';
+import vtkAxesActor from 'vtk.js/Sources/Rendering/Core/AxesActor';
+import vtkFullScreenRenderWindow from '@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow';
+
+import controlPanel from './controlPanel.html';
+
+console.warn(
+  'Click on index.ts to open source code for this example --------->'
+);
+
+// ----------------------------------------------------------------------------
+// Standard rendering code setup
+// ----------------------------------------------------------------------------
+
+const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
+  background: [0.9, 0.9, 0.9],
+});
+const renderer = fullScreenRenderer.getRenderer();
+const renderWindow = fullScreenRenderer.getRenderWindow();
+
+const axesActor = vtkAxesActor.newInstance();
+renderer.addActor(axesActor);
+
+renderer.resetCamera();
+renderWindow.render();
+
+// ----------------------------------------------------------------------------
+// UI control handling
+// ----------------------------------------------------------------------------
+
+fullScreenRenderer.addController(controlPanel);
+
+function updateRendering() {
+  axesActor.update();
+  renderer.resetCameraClippingRange();
+  renderWindow.render();
+}
+
+document.querySelector('.recenter').addEventListener('change', (e) => {
+  const config = axesActor.getConfig();
+  config.recenter = !!e.target.checked;
+  axesActor.setConfig(config);
+  updateRendering();
+});
+
+document.querySelector('.xAxisInvert').addEventListener('change', (e) => {
+  axesActor.setXAxisInvert(!!e.target.checked);
+  updateRendering();
+});
+
+document.querySelector('.yAxisInvert').addEventListener('change', (e) => {
+  axesActor.setYAxisInvert(!!e.target.checked);
+  updateRendering();
+});
+
+document.querySelector('.zAxisInvert').addEventListener('change', (e) => {
+  axesActor.setZAxisInvert(!!e.target.checked);
+  updateRendering();
+});
+
+// -----------------------------------------------------------
+// Make some variables global so that you can inspect and
+// modify objects in your browser's developer console:
+// -----------------------------------------------------------
+
+global.setLoggerFunction = macro.setLoggerFunction;
+global.axesActor = axesActor;
+global.renderer = renderer;
+global.renderWindow = renderWindow;
diff --git a/Sources/Rendering/Core/AxesActor/index.js b/Sources/Rendering/Core/AxesActor/index.js
@@ -21,10 +21,14 @@ function centerDataSet(ds) {
     .apply(ds.getPoints().getData());
 }
 
-function shiftDataset(ds, axis) {
+function shiftDataset(ds, axis, invert = false) {
   const bounds = ds.getPoints().getBounds();
   const center = [0, 0, 0];
-  center[axis] = -bounds[axis * 2];
+  if (invert) {
+    center[axis] = -bounds[axis * 2 + 1];
+  } else {
+    center[axis] = -bounds[axis * 2];
+  }
   vtkMatrixBuilder
     .buildFromDegree()
     .translate(...center)
@@ -35,7 +39,7 @@ function shiftDataset(ds, axis) {
 
 function addColor(ds, r, g, b) {
   const size = ds.getPoints().getData().length;
-  const rgbArray = new Uint8ClampedArray(size);
+  const rgbArray = new Uint8Array(size);
   let offset = 0;
 
   while (offset < size) {
@@ -65,34 +69,50 @@ function vtkAxesActor(publicAPI, model) {
   publicAPI.setMapper(_mapper);
 
   publicAPI.update = () => {
+    let direction;
+    if (model.xAxisInvert) {
+      direction = [-1, 0, 0];
+    } else {
+      direction = [1, 0, 0];
+    }
     const xAxis = vtkArrowSource
-      .newInstance({ direction: [1, 0, 0], ...model.config })
+      .newInstance({ direction, ...model.config })
       .getOutputData();
     if (model.config.recenter) {
       centerDataSet(xAxis);
     } else {
-      shiftDataset(xAxis, 0);
+      shiftDataset(xAxis, 0, model.xAxisInvert);
     }
     addColor(xAxis, ...model.xAxisColor);
 
+    if (model.yAxisInvert) {
+      direction = [0, -1, 0];
+    } else {
+      direction = [0, 1, 0];
+    }
     const yAxis = vtkArrowSource
-      .newInstance({ direction: [0, 1, 0], ...model.config })
+      .newInstance({ direction, ...model.config })
       .getOutputData();
     if (model.config.recenter) {
       centerDataSet(yAxis);
     } else {
-      shiftDataset(yAxis, 1);
+      shiftDataset(yAxis, 1, model.yAxisInvert);
     }
 
     addColor(yAxis, ...model.yAxisColor);
 
+    if (model.zAxisInvert) {
+      direction = [0, 0, -1];
+    } else {
+      direction = [0, 0, 1];
+    }
     const zAxis = vtkArrowSource
-      .newInstance({ direction: [0, 0, 1], ...model.config })
+      .newInstance({ direction, ...model.config })
       .getOutputData();
     if (model.config.recenter) {
       centerDataSet(zAxis);
     } else {
-      shiftDataset(zAxis, 2);
+      shiftDataset(zAxis, 2, model.zAxisInvert);
     }
     addColor(zAxis, ...model.zAxisColor);
 
@@ -154,11 +174,13 @@ export const DEFAULT_VALUES = {
     tipLength: 0.2,
     shaftResolution: 60,
     shaftRadius: 0.03,
-    invert: false,
   },
   xAxisColor: [255, 0, 0],
   yAxisColor: [255, 255, 0],
   zAxisColor: [0, 128, 0],
+  xAxisInvert: false,
+  yAxisInvert: false,
+  zAxisInvert: false,
 };
 
 // ----------------------------------------------------------------------------
@@ -169,7 +191,12 @@ export function extend(publicAPI, model, initialValues = {}) {
   // Inheritance
   vtkActor.extend(publicAPI, model, initialValues);
 
-  macro.setGet(publicAPI, model, ['config']);
+  macro.setGet(publicAPI, model, [
+    'config',
+    'xAxisInvert',
+    'yAxisInvert',
+    'zAxisInvert',
+  ]);
   macro.setGetArray(
     publicAPI,
     model,