Can not stop the interactor event[Bug]

[MountainAndMorning]

Bug description

I am using vtk.js in vue 3 as below:

<script setup>
...

const container = ref(null)
onMounted(async ()=>{
    context.genericRenderWindow = vtkGenericRenderWindow.newInstance({container: toRaw(container.value)})
    const openglRenderWindow = context.genericRenderWindow.getApiSpecificRenderWindow()
    openglRenderWindow.buildPass(true)
    context.renderWindow = context.genericRenderWindow.getRenderWindow()
    context.renderer = context.genericRenderWindow.getRenderer()
    const camera = context.renderer.getActiveCamera()
    camera.setParallelProjection(true);

    context.istyle = vtkInteractorStyleTrackballCamera.newInstance();
    context.interactor = context.renderWindow.getInteractor()
    context.interactor.setInteractorStyle(context.istyle)

    const sphereSource = vtkSphereSource.newInstance({radius: 1.5});
    context.sphereSource = sphereSource
    const sphereMapper = vtkMapper.newInstance();
    context.sphereMapper = sphereMapper
    sphereMapper.setInputConnection(sphereSource.getOutputPort());
    const sphereActor = vtkActor.newInstance();
    sphereActor.getProperty().setColor(1.0, 0.0, 0.0)
    context.sphereActor = sphereActor
    sphereActor.setMapper(sphereMapper);
    context.renderer.addActor(sphereActor);

})

...
</script>


<template>
    <div :style="`width: 100%; height: 100%; border: #8E24AA 1px solid; position: relative; background-color: #000; overflow:hidden`">
        <div
            ref="container"
            :style="`width: 100%; height: 100%; `"
            @mousemove="onMouseMove"
            @mouseup="onMouseUp"
        >
            <svg
                :width="width"
                :height="height"
                :viewBox="viewBox"
                style="position: absolute; top: 0; left: 0;"
                @mousedown.stop="handleSVGEvent"
            >
           
            </svg>
        </div>
        
    </div>
</template>

Sometimes I need to interact with the svg element and don't want to interact with vtk.js, so I use the .stop event modifier. In an old vtk.js version "@kitware/vtk.js": "^21.4.1" this is OK. However, recently I update the vtk.js to @kitware/vtk.js": "^29.0.0" and I find the .stop modifier don't work. When I drag the element in svg the vtk.js camera is modified, too. I also try the .prevent and .self modifiers. In the handleSVGEvent function I also try the e.preventDefault() and e.stopPropagation() methods and nothing Works.

Steps to reproduce

Show in above.

Detailed Behavior

No response

Expected Behavior

Prevent the event in vtk.js.

Environment

• vtk.js version: 29.0.0
• OS: MacOS 14.0
• electron: 24.4.0

"dependencies": {
    "@kitware/vtk.js": "^29.0.0",
    "@tensorflow/tfjs-node": "^4.11.0",
    "dicom-parser": "^1.8.21",
    "itk-image-io": "^1.0.0-b.18",
    "itk-wasm": "^1.0.0-b.18",
    "vue": "^3.2.47",
    "vuetify": "^3.3.3"
  },
"devDependencies": {
    "@mdi/js": "^7.2.96",
    "@vitejs/plugin-vue": "^4.1.0",
    "electron": "^24.4.0",
    "electron-builder": "^23.6.0",
    "typescript": "^5.0.2",
    "vite": "^4.3.2",
    "vite-plugin-electron": "^0.11.2",
    "vite-plugin-electron-renderer": "^0.14.5",
    "vite-plugin-static-copy": "^0.16.0",
    "vue-tsc": "^1.4.2"
  },

[bruyeret]

Have you tried stopping propagation during capturing phase instead of bubbling phase with .capture.stop?

[MountainAndMorning]

Thanks for your help. It's not work.

[jourdain]

Why don't you disable the interactor when you don't want it to process events?

[MountainAndMorning]

I just want to disable the interactor when I drag the svg element, then when I drag other area, the WWWL function remain works. Therefore, I try to call the function context.interactor.disable in the handleSVGEvent function. However, after I finish the handle of svg element and invoke the context.interactor.enable function I find the interactor keeping interaction. I think that is because the 'mousedown' event has been detected by vtk.js before the handleSVGEvent function. This is strange, because when I dig into the source code I find the interactor bind events for the container, then as a child node of the container, svg should get the event before the container in the bubble process of the event.

vtkFullScreenRenderWindow:

// Interactor
  model.interactor = vtkRenderWindowInteractor.newInstance();
  model.interactor.setInteractorStyle(vtkInteractorStyleTrackballCamera.newInstance());
  model.interactor.setView(model.apiSpecificRenderWindow);
  model.interactor.initialize();
  model.interactor.bindEvents(model.container);

vtkRenderWindowInteractor:

publicAPI.bindEvents = container => {
    model.container = container;
    container.addEventListener('contextmenu', preventDefault);
    container.addEventListener('wheel', publicAPI.handleWheel);
    container.addEventListener('DOMMouseScroll', publicAPI.handleWheel);
    container.addEventListener('pointerenter', publicAPI.handlePointerEnter);
    container.addEventListener('pointerleave', publicAPI.handlePointerLeave);
    container.addEventListener('pointermove', publicAPI.handlePointerMove, {
      passive: false
    });
    container.addEventListener('pointerdown', publicAPI.handlePointerDown, {
      passive: false
    });
    container.addEventListener('pointerup', publicAPI.handlePointerUp);
    container.addEventListener('pointercancel', publicAPI.handlePointerCancel);
    document.addEventListener('keypress', publicAPI.handleKeyPress);
    document.addEventListener('keydown', publicAPI.handleKeyDown);
    document.addEventListener('keyup', publicAPI.handleKeyUp);
    document.addEventListener('pointerlockchange', publicAPI.handlePointerLockChange);

    // using touchAction is more performant than preventDefault
    // in a touchstart handler.
    container.style.touchAction = 'none';
    container.style.userSelect = 'none';
    // disables tap highlight for when cursor is pointer
    container.style.webkitTapHighlightColor = 'rgba(0,0,0,0)';
  };

So, for this situation, what is changed from the ^21.4.1 to 29.0.0 and how I can get the same behavior of the older version.

[MountainAndMorning]

I have figured out what happened. In the older vtk.js the mouse related events are binded. However, the new vtk.js binds the pointer related events. I guess when I click the svg element, the vtk.js binded pointerdown event is triggered and another mousedown event may dispatch at the same time or lated with the pointerdown event. Therefore, I can not influence the pointerdown event caught by vtk.js by stopping the mousedown event caught by svg.