about the ViewProxy

Hi, I have a question about the ViewProxy. I try to realize the code like the MouseRangeManipulator example through the ViewProxy. and I create a div in the index.html as a container. But I find that although my mouse is outside the div, I can still control the actor. so how can I set the Interactor inside the element?Maybe it’s because I still don’t know the concept very well, and any suggestions will be helpful. Thanks in advance.

const container = document.querySelector('#app')

That should work. Are you sure you are outside your div? My thinking is that the view is not feeling the full div.

When I tried again, I found some details. The page seems to be divided by CornerAnnotation. And the div I created become a canvas. However when I try to use GenericRenderWindow, the problem is solved. Is it because I misunderstood some concepts of the ViewProxy?

This is the detail about an example code

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    #app {
        width: 500px;
        height: 500px;
<div id="app"></div>
<script type="text/javascript" src="MyWebApp.js"></script>
import 'vtk.js/Sources/favicon';
import vtkViewProxy from 'vtk.js/Sources/Proxy/Core/ViewProxy'
import vtkRTAnalyticSource from 'vtk.js/Sources/Filters/Sources/RTAnalyticSource';
import vtkImageMapper from 'vtk.js/Sources/Rendering/Core/ImageMapper';
import vtkImageSlice from 'vtk.js/Sources/Rendering/Core/ImageSlice';
import vtkInteractorStyleManipulator from 'vtk.js/Sources/Interaction/Style/InteractorStyleManipulator';
import vtkMouseRangeManipulator from 'vtk.js/Sources/Interaction/Manipulators/MouseRangeManipulator';
const { SlicingMode } = vtkImageMapper;

// ----------------------------------------------------------------------------
// Standard rendering code setup
// ----------------------------------------------------------------------------

const viewProxy = vtkViewProxy.newInstance();
const container = document.querySelector('#app')
viewProxy.getRenderer().setBackground(0.5, 0.5, 0.5)

const rtSource = vtkRTAnalyticSource.newInstance();
rtSource.setWholeExtent(0, 200, 0, 200, 0, 200);
rtSource.setCenter(100, 100, 100);

const mapper = vtkImageMapper.newInstance();

const actor = vtkImageSlice.newInstance();


//add manipulator and interactor
const manipulator = vtkMouseRangeManipulator.newInstance({
    button: 1,
    scrollEnabled: true,
const wMin = 1
const range = rtSource.getOutputData().getPointData().getScalars().getRange()
const wMax = range[1] - range[0]
const wGet = actor.getProperty().getColorWindow;
const wSet = (w) => {
manipulator.setVerticalListener(wMin, wMax, 1, wGet, wSet);
const interactorStyle = vtkInteractorStyleManipulator.newInstance();

The viewProxy give you more than what you care for and it is possible that the annotation part bleed outside of your container unless you add to its style position: relative;.

1 Like

Thank you so much for your reply and suggestions!
Indeed, I still need to learn a lot and pay more attention to the core functions of vtk.js.