help setting Manipulator Style

Support
1

Hello
I need help setting a specific Manipulator style in vtk.js, so far I have written

function getInteractorStyle(){
		// Interactor (view https://kitware.github.io/vtk-js/examples/InteractorStyleManipulator.html)
		const interactorStyleDefinitions = { // To be used by vtkInteractorStyleManipulator
			// Pan on Middle button drag and on Shift + Left button drag
			Pan: { 
				klass: vtk.Interaction.Manipulators.vtkMouseCameraTrackballPanManipulator, 
				options: [
					{ button: 2 },  
					{ button: 1, shift: true }]
			},  
			// Zoom on Ctrl + Right button drag and on scroll
			Zoom: { 
				klass: vtk.Interaction.Manipulators.vtkMouseCameraTrackballZoomManipulator, 
				options: [
					{ button: 3, control: true },
					{ dragEnabled: false, scrollEnabled: true }	
				]
			}, 
			// Rotate on Left button drag
			Rotate: {
				klass: vtk.Interaction.Manipulators.vtkMouseCameraTrackballRotateManipulator,
				options: [
					{ button: 1 }
				]
			},
			// Roll on Right button drag and on Ctrl + Left button drag
			Roll: {
				klass: vtk.Interaction.Manipulators.vtkMouseCameraTrackballRollManipulator,
				options: [
					{ button: 1, control: true },
					{ button: 3 }
				]
			}
		};
		
		const interactorStyle = vtk.Interaction.Style.vtkInteractorStyleManipulator.newInstance();
		interactorStyle.removeAllMouseManipulators();
		Object.keys(interactorStyleDefinitions).forEach((keyName) => {
			const manipulator = interactorStyleDefinitions[keyName].klass.newInstance();
			manipulator.setButton(interactorStyleDefinitions[keyName].options.button);
			manipulator.setShift(!!interactorStyleDefinitions[keyName].options.shift);
			manipulator.setControl(!!interactorStyleDefinitions[keyName].options.control);
			manipulator.setAlt(!!interactorStyleDefinitions[keyName].options.alt);
			if (interactorStyleDefinitions[keyName].options.scrollEnabled !== undefined) {
				manipulator.setScrollEnabled(interactorStyleDefinitions[keyName].options.scrollEnabled);
			}
			if (interactorStyleDefinitions[keyName].options.dragEnabled !== undefined) {
				manipulator.setDragEnabled(interactorStyleDefinitions[keyName].options.dragEnabled);
			}
			interactorStyle.addMouseManipulator(manipulator);
		});
		// Always add gesture
		interactorStyle.addGestureManipulator(
			vtk.Interaction.Manipulators.vtkGestureCameraManipulator.newInstance()
		);

		return interactorStyle;
	}

But this does not work, the rendering does anything on mouse interaction.

This simple function works, but it has all the wrong setup for mouse handling:

function getInteractorStyle(){
    return vtk.Interaction.Style.vtkInteractorStyleTrackballCamera.newInstance();
}
2

I made it! Here it is the final working code:

    function getInteractorStyle(){
		const interactorStyleDefinitions = { // To be used by vtkInteractorStyleManipulator
			// Pan on Middle button drag and on Shift + Left button drag
			Pan: { 
				klass: vtk.Interaction.Manipulators.vtkMouseCameraTrackballPanManipulator, 
				options: [
					{ button: 2 },  
					{ button: 1, shift: true }]
			},  
			// Zoom on Ctrl + Right button drag and on scroll
			Zoom: { 
				klass: vtk.Interaction.Manipulators.vtkMouseCameraTrackballZoomManipulator, 
				options: [
					{ button: 3, control: true },
					{ dragEnabled: false, scrollEnabled: true }	
				]
			}, 
			// Rotate on Left button drag
			Rotate: {
				klass: vtk.Interaction.Manipulators.vtkMouseCameraTrackballRotateManipulator,
				options: [
					{ button: 1 }
				]
			},
			// Roll on Right button drag and on Ctrl + Left button drag
			Roll: {
				klass: vtk.Interaction.Manipulators.vtkMouseCameraTrackballRollManipulator,
				options: [
					{ button: 1, control: true },
					{ button: 3 }
				]
			}
		};

		const interactorStyle = vtk.Interaction.Style.vtkInteractorStyleManipulator.newInstance();
		interactorStyle.removeAllMouseManipulators();
		for (let [keyName, Definition] of Object.entries(interactorStyleDefinitions)) {
			for (let option of Definition.options) {
				const manipulator = Definition.klass.newInstance(option);
				interactorStyle.addMouseManipulator(manipulator);
			}			
		};
		// Always add gesture
		interactorStyle.addGestureManipulator(
			vtk.Interaction.Manipulators.vtkGestureCameraManipulator.newInstance()
		);

		return interactorStyle;
	}

[This example]( vtk.js (kitware.github.io)) is a bit misleading, since it doesn’t tells you you can instantiate a manipulator directly with their options and instead leads you to set each option independently.
Also Each button option requires a whole new manipulator instance. This was the critical part.