How to force widget manager to use a particular renderer?

Development
1

Hello ,
I am trying to add axes actor to my vtk.js viewer component. I am then trying to use the axesActor to rotate the scene in y axis by 180 degree. I have created an instance of orientation widget and added the axesActor as actor to the widget. The issue is by adding “widgetManager.setRenderer(operationRenderer);” to the code, any other widget that I create is limited to the “operationRenderer”, which in my case is the small box holding the axesActor at the bottom left corner(screen shot attached). For example when i create a rectangle widget, it is created on that small left corner box. I want the axesActor to flip the actor in the parent renderer or the main screen and not the orientationWidget renderer.
Please provide suggestions. Appreciate all the help.


///----------------trigger flip/rotate axis-----------
const handleFlipAxis = () => {
    console.log(" axis Handle flip run");
    const { axesActor, orientationWidget } = sceneLiveFrame;
    axesActor.rotateWXYZ(180, 0, 1, 0);
    
  };

//----------------creating the live viewer---------------
export const createLiveFrameScene = (
  container,
  dataArray,
  colorMap,
  maskDataArray,
  opacityFunction
) => {
  const renderWindow = vtkRenderWindow.newInstance({
    rootContainer: container,
  });

  const renderer = vtkRenderer.newInstance();
  const render = renderWindow.render;
  renderWindow.addRenderer(renderer);
  const openglRenderWindow = vtkOpenGLRenderWindow.newInstance();
  openglRenderWindow.setContainer(container);
  const { width, height } = container.getBoundingClientRect();
  openglRenderWindow.setSize(width, height);
  renderWindow.addView(openglRenderWindow);
  const interactor = vtkRenderWindowInteractor.newInstance();
  interactor.setView(openglRenderWindow);
  interactor.initialize();
  interactor.bindEvents(container);

  // mapper and actor
  const actorImage = vtkImageSlice.newInstance();
  const mapperImage = vtkImageMapper.newInstance();

  const interactorStyle = vtkInteractorStyleManipulator.newInstance();

  // // InteractionPresets.applyPreset('2D', interactorStyle);
  interactor.setInteractorStyle(interactorStyle);

  // enable zoom in / zoom out
  const zoomManipulatorMiddleButton =
    vtkMouseCameraTrackballZoomManipulator.newInstance();
  zoomManipulatorMiddleButton.setButton(2); // Middle Button
  interactorStyle.addMouseManipulator(zoomManipulatorMiddleButton);

  const zoomManipulatorScroll =
    vtkMouseCameraTrackballZoomManipulator.newInstance();
  zoomManipulatorScroll.setDragEnabled(false);
  zoomManipulatorScroll.setScrollEnabled(true);
  interactorStyle.addMouseManipulator(zoomManipulatorScroll);

  const zoomManipulatorLeft =
    vtkMouseCameraTrackballZoomManipulator.newInstance();
  zoomManipulatorLeft.setButton(1); // Left Button
  zoomManipulatorLeft.setControl(true);
  interactorStyle.addMouseManipulator(zoomManipulatorLeft);

  // enable pan
  const panManipulatorRightMouse =
    vtkMouseCameraTrackballPanManipulator.newInstance();
  panManipulatorRightMouse.setButton(3); // Right button
  interactorStyle.addMouseManipulator(panManipulatorRightMouse);

  const panManipulatorLeftMouse =
    vtkMouseCameraTrackballPanManipulator.newInstance();
  panManipulatorLeftMouse.setButton(1); // Left button
  panManipulatorLeftMouse.setShift(true);
  interactorStyle.addMouseManipulator(panManipulatorLeftMouse);


**********Adding the axes actor to represent the x and y axis of the live image viewer*********

// Setup axes

  const axesActor = vtkAxesActor.newInstance();
  const orientationWidget = vtkOrientationMarkerWidget.newInstance({
    actor: axesActor,
    interactor: interactor,
    renderer: renderer,
  });
  const operationRenderer = orientationWidget.getRenderer();
  orientationWidget.setParentRenderer();


  orientationWidget.setEnabled(true);
  orientationWidget.setViewportCorner(
    vtkOrientationMarkerWidget.Corners.BOTTOM_LEFT
  );
  orientationWidget.setViewportSize(0.1);
  orientationWidget.setMinPixelSize(100);
  orientationWidget.setMaxPixelSize(300);

  console.log('axes', axesActor, );

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

*//----**************************suspected cause of problem**********************----------
  widgetManager.setRenderer(operationRenderer);





axesActor.onModified(() => {
    // Get the orientation matrix of the axes actor
    console.log("axes actor modified");
    const orientationMatrix = axesActor.getMatrix();
    const axesOrientation = axesActor.getOrientation();
    const matrix = vtkMatrixBuilder.buildFromDegre(0,0,0);
    console.log('axes matrix', matrix);
    // Extract the y-axis of the orientation matrix
    const yAxis = [
      orientationMatrix[1],
      orientationMatrix[5],
      orientationMatrix[9],
    ];
    console.log("yAxis MATRIX", orientationMatrix, yAxis);

    // Check if the y-axis is pointing down (y < 0)
    if (yAxis[1] < 0) {
      // Flip the scene
      flipScene(camera, widgetManager, renderWindow, orientationWidget);
      axesActor.setMatrix(orientationMatrix);
      // console.log('newMatrix', newMatrix);
    }

      });

image
image1165×534 54.2 KB

2

Are you trying to move the camera or the object? Based on your description, you want to modify the camera but your code move the object.

Then I don’t understand the intent behind those lines of code

const operationRenderer = orientationWidget.getRenderer();
orientationWidget.setParentRenderer();

axesActor.onModified(...);

Did you look at that widget example?

3

@Sebastien_Jourdain the intention behind this lines is to make the renderer of the orientationWidget same as those of other widgets being used. I am also using a rectangle widget.
I want to move the object by moving or rotating the axis. I am not aware of a way of doing that without moving the camera.

4

Well the problem is that you are not moving the camera and that is why I wasn’t sure what you were doing.

Also none of the lines I listed does what you say they do.