@acransac/vtk.js/Sources/Interaction/Style/InteractorStyleManipulator/example/controller.html

Visualization Toolkit for the Web

<table>
  <thead>
    <tr>
      <td>Modifier Key</td>
      <td>Left Button</td>
      <td>Middle Button</td>
      <td>Right Button</td>
      <td>Scroll</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>None</td>
      <td>
        <select class='leftButton' style="width: 100%">
          <option value='None'>None</option>
          <option value='Pan'>Pan</option>
          <option value='Zoom'>Zoom</option>
          <option value='Roll'>Roll</option>
          <option value='Rotate' selected>Rotate</option>
          <option value='MultiRotate'>MultiRotate</option>
          <option value='ZoomToMouse'>ZoomToMouse</option>
        </select>
      </td>
      <td>
        <select class='middleButton' style="width: 100%">
          <option value='None'>None</option>
          <option value='Pan' selected>Pan</option>
          <option value='Zoom'>Zoom</option>
          <option value='Roll'>Roll</option>
          <option value='Rotate'>Rotate</option>
          <option value='MultiRotate'>MultiRotate</option>
          <option value='ZoomToMouse'>ZoomToMouse</option>
        </select>
      </td>
      <td>
        <select class='rightButton' style="width: 100%">
          <option value='None'>None</option>
          <option value='Pan'>Pan</option>
          <option value='Zoom' selected>Zoom</option>
          <option value='Roll'>Roll</option>
          <option value='Rotate'>Rotate</option>
          <option value='MultiRotate'>MultiRotate</option>
          <option value='ZoomToMouse'>ZoomToMouse</option>
        </select>
      </td>
      <td>
        <select class='scrollMiddleButton' style="width: 100%">
          <option value='None'>None</option>
          <option value='Zoom' selected >Zoom</option>
          <option value='ZoomToMouse' >ZoomToMouse</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>Shift +</td>
      <td>
        <select class='shiftLeftButton' style="width: 100%">
          <option value='None'>None</option>
          <option value='Pan'>Pan</option>
          <option value='Zoom'>Zoom</option>
          <option value='Roll' selected>Roll</option>
          <option value='Rotate'>Rotate</option>
          <option value='MultiRotate'>MultiRotate</option>
          <option value='ZoomToMouse'>ZoomToMouse</option>
        </select>
      </td>
      <td>
        <select class='shiftMiddleButton' style="width: 100%">
          <option value='None'>None</option>
          <option value='Pan'>Pan</option>
          <option value='Zoom'>Zoom</option>
          <option value='Roll'>Roll</option>
          <option value='Rotate' selected>Rotate</option>
          <option value='MultiRotate'>MultiRotate</option>
          <option value='ZoomToMouse'>ZoomToMouse</option>
        </select>
      </td>
      <td>
        <select class='shiftRightButton' style="width: 100%">
          <option value='None'>None</option>
          <option value='Pan' selected>Pan</option>
          <option value='Zoom'>Zoom</option>
          <option value='Roll'>Roll</option>
          <option value='Rotate'>Rotate</option>
          <option value='MultiRotate'>MultiRotate</option>
          <option value='ZoomToMouse'>ZoomToMouse</option>
        </select>
      </td>
      <td>
        <select class='shiftScrollMiddleButton' style="width: 100%">
          <option value='None' selected >None</option>
          <option value='Zoom'>Zoom</option>
          <option value='ZoomToMouse' >ZoomToMouse</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>Ctrl +</td>
      <td>
        <select class='controlLeftButton' style="width: 100%">
          <option value='None'>None</option>
          <option value='Pan'>Pan</option>
          <option value='Zoom' selected>Zoom</option>
          <option value='Roll'>Roll</option>
          <option value='Rotate'>Rotate</option>
          <option value='MultiRotate'>MultiRotate</option>
          <option value='ZoomToMouse'>ZoomToMouse</option>
        </select>
      </td>
      <td>
        <select class='controlMiddleButton' style="width: 100%">
          <option value='None'>None</option>
          <option value='Pan'>Pan</option>
          <option value='Zoom'>Zoom</option>
          <option value='Roll'>Roll</option>
          <option value='Rotate' selected>Rotate</option>
          <option value='MultiRotate'>MultiRotate</option>
          <option value='ZoomToMouse'>ZoomToMouse</option>
        </select>
      </td>
      <td>
        <select class='controlRightButton' style="width: 100%">
          <option value='None'>None</option>
          <option value='Pan'>Pan</option>
          <option value='Zoom'>Zoom</option>
          <option value='Roll'>Roll</option>
          <option value='Rotate'>Rotate</option>
          <option value='MultiRotate'>MultiRotate</option>
          <option value='ZoomToMouse' selected>ZoomToMouse</option>
        </select>
      </td>
      <td>
        <select class='controlScrollMiddleButton' style="width: 100%">
          <option value='None' selected >None</option>
          <option value='Zoom'>Zoom</option>
          <option value='ZoomToMouse' >ZoomToMouse</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>Alt +</td>
      <td>
        <select class='altLeftButton' style="width: 100%">
          <option value='None'>None</option>
          <option value='Pan'>Pan</option>
          <option value='Zoom' selected>Zoom</option>
          <option value='Roll'>Roll</option>
          <option value='Rotate'>Rotate</option>
          <option value='MultiRotate'>MultiRotate</option>
          <option value='ZoomToMouse'>ZoomToMouse</option>
        </select>
      </td>
      <td>
        <select class='altMiddleButton' style="width: 100%">
          <option value='None'>None</option>
          <option value='Pan'>Pan</option>
          <option value='Zoom'>Zoom</option>
          <option value='Roll'>Roll</option>
          <option value='Rotate' selected>Rotate</option>
          <option value='MultiRotate'>MultiRotate</option>
          <option value='ZoomToMouse'>ZoomToMouse</option>
        </select>
      </td>
      <td>
        <select class='altRightButton' style="width: 100%">
          <option value='None'>None</option>
          <option value='Pan'>Pan</option>
          <option value='Zoom'>Zoom</option>
          <option value='Roll'>Roll</option>
          <option value='Rotate'>Rotate</option>
          <option value='MultiRotate'>MultiRotate</option>
          <option value='ZoomToMouse' selected>ZoomToMouse</option>
        </select>
      </td>
      <td>
        <select class='altScrollMiddleButton' style="width: 100%">
          <option value='None' selected>None</option>
          <option value='Zoom'>Zoom</option>
          <option value='ZoomToMouse'>ZoomToMouse</option>
        </select>
      </td>
    </tr>
    <!-- <tr>
      <td>Scroll</td>
      <td colspan="3">
        <select class='scrollMiddleButton' style="width: 100%">
          <option value='None'>None</option>
          <option value='Zoom'>Zoom</option>
        </select>
      </td>
    </tr> -->
  </tbody>
</table>