# help setting Manipulator Style

**URL:** https://discourse.vtk.org/t/help-setting-manipulator-style/11583
**Category:** Support
**Tags:** vtkjs
**Created:** [May 31, 2023, 11:55am UTC](https://discourse.vtk.org/t/help-setting-manipulator-style/11583 "2023-05-31T11:55:57Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![Alex\_Vergara](https://discourse.vtk.org/user_avatar/discourse.vtk.org/alex_vergara/32/7082_2.png) [@Alex\_Vergara](https://discourse.vtk.org/u/Alex_Vergara)
#### Post date: [May 31, 2023, 11:55am UTC](https://discourse.vtk.org/t/help-setting-manipulator-style/11583/1 "2023-05-31T11:55:57Z")

</div>

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

```auto
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:

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

```

---

<div class="post-metadata">

### Author: ![Alex\_Vergara](https://discourse.vtk.org/user_avatar/discourse.vtk.org/alex_vergara/32/7082_2.png) [@Alex\_Vergara](https://discourse.vtk.org/u/Alex_Vergara)
#### Post date: [May 31, 2023, 3:20pm UTC](https://discourse.vtk.org/t/help-setting-manipulator-style/11583/2 "2023-05-31T15:20:37Z")

</div>

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

```javascript
    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)](https://kitware.github.io/vtk-js/examples/InteractorStyleManipulator.html)) 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.