Spline widget appears behind image mapper

I mixed the SplineWidget example with the ImageMapper example:

See code

import 'vtk.js/Sources/favicon';

import vtkFullScreenRenderWindow from 'vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow';
import vtkSplineWidget from 'vtk.js/Sources/Widgets/Widgets3D/SplineWidget';
import vtkWidgetManager from 'vtk.js/Sources/Widgets/Core/WidgetManager';

import { SlicingMode } from 'vtk.js/Sources/Rendering/Core/ImageMapper/Constants';
import vtkRTAnalyticSource from 'vtk.js/Sources/Filters/Sources/RTAnalyticSource';
import vtkImageMapper from 'vtk.js/Sources/Rendering/Core/ImageMapper';
import vtkImageSlice from 'vtk.js/Sources/Rendering/Core/ImageSlice';
import vtkInteractorStyleImage from 'vtk.js/Sources/Interaction/Style/InteractorStyleImage';
import vtkColorTransferFunction from 'vtk.js/Sources/Rendering/Core/ColorTransferFunction';
import vtkPiecewiseFunction from 'vtk.js/Sources/Common/DataModel/PiecewiseFunction';

import controlPanel from './controlPanel.html';

// ----------------------------------------------------------------------------
// Standard rendering code setup
// ----------------------------------------------------------------------------

const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
  background: [0, 0, 0],
});
const renderer = fullScreenRenderer.getRenderer();
const renderWindow = fullScreenRenderer.getRenderWindow();

// ----------------------------------------------------------------------------
// ImageMapper example
// ----------------------------------------------------------------------------

const rtSource = vtkRTAnalyticSource.newInstance();
rtSource.setWholeExtent(0, 200, 0, 200, 0, 200);
rtSource.setCenter(100, 100, 100);
rtSource.setStandardDeviation(0.3);

const mapper = vtkImageMapper.newInstance();
mapper.setInputConnection(rtSource.getOutputPort());
mapper.setSliceAtFocalPoint(true);
mapper.setSlicingMode(SlicingMode.Z);
// mapper.setZSlice(5);

const rgb = vtkColorTransferFunction.newInstance();
global.rgb = rgb;
rgb.addRGBPoint(0, 0, 0, 0);
rgb.addRGBPoint(255, 1, 1, 1);

const ofun = vtkPiecewiseFunction.newInstance();
global.ofun = ofun;
ofun.addPoint(0, 1);
ofun.addPoint(150, 1);
ofun.addPoint(180, 0);
ofun.addPoint(255, 0);

const actor = vtkImageSlice.newInstance();
actor.getProperty().setColorWindow(255);
actor.getProperty().setColorLevel(127);
// Uncomment this if you want to use a fixed colorwindow/level
// actor.getProperty().setRGBTransferFunction(rgb);
actor.getProperty().setPiecewiseFunction(ofun);
actor.setMapper(mapper);
renderer.addActor(actor);

const iStyle = vtkInteractorStyleImage.newInstance();
iStyle.setInteractionMode('IMAGE_SLICING');
renderWindow.getInteractor().setInteractorStyle(iStyle);

const camera = renderer.getActiveCamera();
const position = camera.getFocalPoint();
// offset along the slicing axis
const normal = mapper.getSlicingModeNormal();
position[0] += normal[0];
position[1] += normal[1];
position[2] += normal[2];
camera.setPosition(...position);
switch (mapper.getSlicingMode()) {
  case SlicingMode.X:
    camera.setViewUp([0, 1, 0]);
    break;
  case SlicingMode.Y:
    camera.setViewUp([1, 0, 0]);
    break;
  case SlicingMode.Z:
    camera.setViewUp([0, 1, 0]);
    break;
  default:
}
camera.setParallelProjection(true);
renderer.resetCamera();
renderWindow.render();

// ----------------------------------------------------------------------------
// SplineWidget example
// ----------------------------------------------------------------------------

const widgetManager = vtkWidgetManager.newInstance();
widgetManager.setRenderer(renderer);

const widget = vtkSplineWidget.newInstance();

widgetManager.addWidget(widget);

renderer.resetCamera();
widgetManager.enablePicking();

// -----------------------------------------------------------
// UI control handling
// -----------------------------------------------------------

fullScreenRenderer.addController(controlPanel);

document.querySelector('button').addEventListener('click', () => {
  widgetManager.grabFocus(widget);
});

The spline handles don’t stick on the actor surface here (the spline doesn’t look curvy because I had to press Shift to take a screenshot, which modifies the spline representation):

cc: @RemiCecchinato, @finetjul

Thank you

Edit: second issue moved to #1423

[finetjul]

I believe the first issue is the same as in the ShapeWidget example.

I do not know when this has been broken (@boucaud could it be your recent changes ?)

This can be solved (in ShapeWidget example at least) with:

image.imageMapper.setResolveCoincidentTopologyToPolygonOffset();
image.imageMapper.setRelativeCoincidentTopologyPolygonOffsetParameters(
      1.0,
      1.0
    );

However, I do not think it is the right solution. I think Widgets should have coincidentTopolyogy parameters set. What do you think @floryst @boucaud ?

[agirault]

Fixed by #1430, thank you @boucaud @finetjul