InteractorStyleImageSlicing for Touch Screen

I’m writing a tablet app for displaying image slices and want to override the handleStartPan function to make double touch & drag to change slices of the image, and disable the panning. Following code does not seem to work, it still does the panning instead of slicing.

function InteractorStyleImageTouch(publicAPI, model) {

  publicAPI.handleStartPan = (callData) => {
    model.previousTranslation = callData.translation;
    const touches = callData.touches;
    callData['position'] = {
      x: callData.touches[Object.keys(touches)[0]].x,
      y: callData.touches[Object.keys(touches)[0]].y
    model.lastSlicePosition = callData.touches[Object.keys(touches)[0]].y;

  publicAPI.superHandleEndPan = publicAPI.handleEndPan;
  publicAPI.handleEndPan = () => {

function extend(publicAPI, model, initialValues = {}) {
  vtkInteractorStyleImage.extend(publicAPI, model, initialValues);

  InteractorStyleImageTouch(publicAPI, model);

const createImageTouchStyle = macro.newInstance(extend, 'InteractorStyleImageTouch');

Do I need to override a deeper level function to make this work, or create some new functions? I’m from a c++ background and maybe there’s a better way to extending a js class. Is there any guideline in vtk-js to do this?

Are you correctly using your new InteractorStyleImageTouch class, instead of the vtkInteractorStyleImage class?

Hi Forrest, thanks for the reply. Yes, I’ve tried printing out information inside of the overriding functions. The messages showed up in the console, but the behavior was not slicing but panning.

Here’s my code using the new class:

const renderWindow = fullScreenRenderWindow.getRenderWindow();
const iStyle = createImageTouchStyle();

Could Style.setInteractionMode('IMAGE_SLICING'); be doing anything here?

Ah, I think you’ll have to override LeftButtonPress/Move in order to get it to work. Looking at the InteractorStyleImage (link), the interaction gets set to IMAGE_SLICING based on whether the controlKey is set.

Hi Forrest,

Thanks for the hint! I did try your suggestion, but I realized that I should be focusing on handlePan since what I need is overriding the double touch behavior (pan).

Currently the problem is handlePan got called but startSlice is not. I’m looking at the here and my question is where can I find the code that calls this slice function from the startSlice function?

Could it be that startSlice has some logic that has led to slice not being called?


I looked more closely and realized that you are correct in overriding handleStart/EndPan. I think you will have to also override publicAPI.handlePan and have that call publicAPI.slice.