test(Rendering): add test for using vectorComponent coloring

Added a test testing setVectorComponent on the lut.
Removed old ColorByComponent ivar.
Updated GeometryViewer and fixed a couple items,

Examples/Applications/GeometryViewer/index.js

@@ -223,19 +223,23 @@ function createPipeline(fileName, fileContentAsText) {
     const interpolateScalarsBeforeMapping = (location === 'PointData');
     let colorMode = ColorMode.DEFAULT;
     let scalarMode = ScalarMode.DEFAULT;
-    const colorByArrayComponent = -1;
     const scalarVisibility = (location.length > 0);
     if (scalarVisibility) {
       const activeArray = source[`get${location}`]().getArrayByName(colorByArrayName);
       const newDataRange = activeArray.getRange();
       dataRange[0] = newDataRange[0];
       dataRange[1] = newDataRange[1];
       colorMode = ColorMode.MAP_SCALARS;
-      scalarMode = interpolateScalarsBeforeMapping ? ScalarMode.USE_POINT_FIELD_DATA : ScalarMode.USE_CELL_FIELD_DATA;
+      scalarMode = (location === 'PointData') ? ScalarMode.USE_POINT_FIELD_DATA : ScalarMode.USE_CELL_FIELD_DATA;
 
       const numberOfComponents = activeArray.getNumberOfComponents();
       if (numberOfComponents > 1) {
-        // componentSelector.style.display = 'block'; // FIXME the 'colorByArrayComponent' is not yet processed in mapper
+        // always start on magnitude setting
+        if (mapper.getLookupTable()) {
+          const lut = mapper.getLookupTable();
+          lut.setVectorModeToMagnitude();
+        }
+        componentSelector.style.display = 'block';
         const compOpts = ['Magnitude'];
         while (compOpts.length <= numberOfComponents) {
           compOpts.push(`Component ${compOpts.length}`);
@@ -244,9 +248,10 @@ function createPipeline(fileName, fileContentAsText) {
       } else {
         componentSelector.style.display = 'none';
       }
+    } else {
+      componentSelector.style.display = 'none';
     }
     mapper.set({
-      colorByArrayComponent,
       colorByArrayName,
       colorMode,
       interpolateScalarsBeforeMapping,
@@ -259,8 +264,16 @@ function createPipeline(fileName, fileContentAsText) {
   updateColorBy({ target: colorBySelector });
 
   function updateColorByComponent(event) {
-    mapper.setColorByArrayComponent(Number(event.target.value));
-    renderWindow.render();
+    if (mapper.getLookupTable()) {
+      const lut = mapper.getLookupTable();
+      if (event.target.value === -1) {
+        lut.setVectorModeToMagnitude();
+      } else {
+        lut.setVectorModeToComponent();
+        lut.setVectorComponent(Number(event.target.value));
+      }
+      renderWindow.render();
+    }
   }
   componentSelector.addEventListener('change', updateColorByComponent);
 

Sources/Common/Core/ScalarsToColors/api.md

@@ -32,8 +32,7 @@ table.
 
 ## VectorComponent
 
-If the mapper does not select which component of a vector
-to map to colors, you can specify it here.
+Select which component of a vector to map to colors.
 
 ## VectorSize
 

Sources/Rendering/Core/Mapper/api.md

@@ -157,10 +157,6 @@ for coloring the entire data set.
 
 Set/Get the array name to color by.
 
-### colorByArrayComponent
-
-Set/Get the array component to color by.
-
 ### resolveCoincidentTopology (STATIC)
 
 Set/Get a global flag that controls whether coincident topology (e.g., a

Sources/Rendering/Core/Mapper/index.js

@@ -494,7 +494,6 @@ const DEFAULT_VALUES = {
   renderTime: 0,
 
   colorByArrayName: null,
-  colorByArrayComponent: -1,
 
   fieldDataTupleId: -1,
 
@@ -525,7 +524,6 @@ export function extend(publicAPI, model, initialValues = {}) {
     'colorTextureMap',
   ]);
   macro.setGet(publicAPI, model, [
-    'colorByArrayComponent',
     'colorByArrayName',
     'arrayAccessMode',
     'colorMode',

Sources/Rendering/Core/Mapper/test/testVectorComponent.js

@@ -0,0 +1,62 @@
+import test      from 'tape-catch';
+import testUtils from 'vtk.js/Sources/Testing/testUtils';
+
+import vtkLookupTable        from 'vtk.js/Sources/Common/Core/LookupTable';
+import vtkOpenGLRenderWindow from 'vtk.js/Sources/Rendering/OpenGL/RenderWindow';
+import vtkRenderWindow       from 'vtk.js/Sources/Rendering/Core/RenderWindow';
+import vtkRenderer           from 'vtk.js/Sources/Rendering/Core/Renderer';
+import vtkSphereSource       from 'vtk.js/Sources/Filters/Sources/SphereSource';
+import vtkActor              from 'vtk.js/Sources/Rendering/Core/Actor';
+import vtkMapper             from 'vtk.js/Sources/Rendering/Core/Mapper';
+
+const { GetArray } = vtkMapper;
+
+import baseline from './testVectorComponent.png';
+
+test.onlyIfWebGL('Test VectorComponent', (t) => {
+  const gc = testUtils.createGarbageCollector(t);
+  t.ok('rendering', 'vtkMapper Vector Component');
+
+  // Create some control UI
+  const container = document.querySelector('body');
+  const renderWindowContainer = gc.registerDOMElement(document.createElement('div'));
+  container.appendChild(renderWindowContainer);
+
+  // create what we will view
+  const renderWindow = gc.registerResource(vtkRenderWindow.newInstance());
+  const renderer = gc.registerResource(vtkRenderer.newInstance());
+  renderWindow.addRenderer(renderer);
+  renderer.setBackground(0.32, 0.34, 0.43);
+
+  const actor = gc.registerResource(vtkActor.newInstance());
+  renderer.addActor(actor);
+
+  const mapper = gc.registerResource(vtkMapper.newInstance());
+  actor.setMapper(mapper);
+
+  const sphereSource = gc.registerResource(vtkSphereSource.newInstance());
+  sphereSource.setThetaResolution(30);
+  sphereSource.setPhiResolution(16);
+  mapper.setInputConnection(sphereSource.getOutputPort());
+
+  const lut = vtkLookupTable.newInstance();
+  lut.setVectorComponent(1);
+  lut.setVectorModeToComponent(); // the default
+  mapper.setLookupTable(lut);
+  mapper.setScalarModeToUsePointFieldData();
+  mapper.setArrayAccessMode(GetArray.BY_NAME);
+  mapper.setColorByArrayName('Normals');
+  mapper.setScalarVisibility(true);
+  mapper.setScalarRange(-1.0, 1.0);
+
+  // now create something to view it, in this case webgl
+  const glwindow = gc.registerResource(vtkOpenGLRenderWindow.newInstance());
+  glwindow.setContainer(renderWindowContainer);
+  renderWindow.addView(glwindow);
+  glwindow.setSize(400, 400);
+
+  renderWindow.render();
+
+  const image = glwindow.captureImage();
+  testUtils.compareImages(image, [baseline], 'Rendering/Core/Mapper/testVectorComponent.js', t, 5, gc.releaseResources);
+});

Sources/Testing/Examples/ActorSerialization/example/actor.json

@@ -16,7 +16,6 @@
     "bounds": [-0.5, 0.5, -0.5, 0.5, -0.5, 0.5],
     "center": [0, 0],
     "classHierarchy": ["vtkObject", "vtkMapper"],
-    "colorByArrayComponent": -1,
     "colorMapColors": {
       "classHierarchy": ["vtkObject", "vtkDataArray"],
       "dataType": "Uint8Array",

Sources/tests.js

@@ -21,6 +21,8 @@ import './Rendering/Core/ColorTransferFunction/test/testColorTransferFunctionPre
 import './Rendering/Core/ColorTransferFunction/test/testColorTransferFunctionInterpolation';
 import './Rendering/Core/Coordinate/test/testCoordinate';
 import './Rendering/Core/Glyph3DMapper/test/testGlyph3DMapper';
+import './Rendering/Core/Mapper/test/testEdgeVisibility';
+import './Rendering/Core/Mapper/test/testVectorComponent';
 import './Rendering/Core/Prop3D/test/testUserMatrix';
 import './Rendering/Core/RenderWindow/test/testMultipleRenderers';
 import './Rendering/Core/SphereMapper/test/testDisableScalarColoring';
@@ -37,7 +39,6 @@ import './Rendering/OpenGL/StickMapper/test/testStick';
 import './Rendering/OpenGL/Texture/test/testCreateCubeFromRawTexture';
 import './Rendering/OpenGL/VolumeMapper/test/testComposite';
 import './Rendering/OpenGL/VolumeMapper/test/testComposite16Bit';
-import './Rendering/Core/Mapper/test/testEdgeVisibility';
 import './Rendering/OpenGL/VolumeMapper/test/testIntermixed';
 import './Rendering/OpenGL/VolumeMapper/test/testLighting';
 import './Testing/testAlgorithm';