Use mouse movement for change level/window in AMI Medical Imaging (AMI) JS ToolKit

Question

I'm playing a bit with AMI Medical Imaging (AMI) JS ToolKit. Is there a way to move the windowing to a mouse event like right click & move?

I know that it's possible to change window/level with the menus on the examples, but I would like to change the controller to do it moving the mouse.

Thanks!

Answer 1

To control the window/level by moving the mouse you will have to listen to the mousemouve event then update the stackHelper -> slice -> windowWidth/Center as you wish.

You could enable window/level if the user press shift:

var drag =  {
  x: null,
  y: null
}

var shiftDown = false;

function onKeyPressed(event){

  shiftDown = event.shiftKey;

  if(!shiftDown){
    drag.x = null;
    drag.y = null;
  }

}

container.addEventListener('keydown', onKeyPressed);
container.addEventListener('keyup', onKeyPressed);

Then update the window/level on mouse move:

function onMouseMove(event){

  if(!shiftDown || !stack || !stackHelper){
    return;
  }

  if(drag.x === null){
    drag.x = event.offsetX;
    drag.y = event.offsetY;
  }

  var threshold = 15;
  var dynamicRange = stack.minMax[1] - stack.minMax[0];
  dynamicRange /= container.clientWidth;

  if(Math.abs(event.offsetX - drag.x) > threshold){
    // window width
    stackHelper.slice.windowWidth += dynamicRange * (event.offsetX - drag.x);
    drag.x = event.offsetX;
  }

  if(Math.abs(event.offsetY - drag.y) > threshold){
    // window center
    stackHelper.slice.windowCenter -= dynamicRange * (event.offsetY - drag.y);
    drag.y = event.offsetY;
  }

}
container.addEventListener('mousemove', onMouseMove);

See a live demo at (shift + mouse move to control the window level): http://jsfiddle.net/vabL3qo0/41/