vtk.js

Resize renderWindow

by Patrick Brockmann

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://unpkg.com/vtk.js@8.11.1/dist/vtk.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<div id='aSpace'></div>

CSS

.aDiv {
   width: 200px;
   height: 200px;
   float: left;
   padding: 5px;
 }

JavaScript

var width = 300;
 var height = 300;

 //==============================================================================================
 var activeWindows = [];

 function createCone(Id) {

   $('#aSpace').append('<div id="div_' + Id + '" class="aDiv"></div>');

   var nbFacets = Math.floor((Math.random() * 10) + 4);
   var coneSource = vtk.Filters.Sources.vtkConeSource.newInstance();
   coneSource.setResolution(nbFacets);
   var mapper = vtk.Rendering.Core.vtkMapper.newInstance();
   var actor = vtk.Rendering.Core.vtkActor.newInstance();
   mapper.setInputConnection(coneSource.getOutputPort());
   actor.setMapper(mapper);

   var renderer = vtk.Rendering.Core.vtkRenderer.newInstance();
   renderer.addActor(actor);
   renderer.setBackground(0.6, 0.6, 0.9);
   renderer.resetCamera();

   var openglRenderWindow = vtk.Rendering.OpenGL.vtkRenderWindow.newInstance();
   openglRenderWindow.setContainer($('#div_' + Id)[0]);
   openglRenderWindow.setSize(width, height);

   var renderWindow = vtk.Rendering.Core.vtkRenderWindow.newInstance();
   renderWindow.addRenderer(renderer);
   renderWindow.addView(openglRenderWindow);

   var interactor = vtk.Rendering.Core.vtkRenderWindowInteractor.newInstance();
   interactor.setView(openglRenderWindow);
   interactor.initialize();
   interactor.bindEvents($('#div_' + Id)[0]);
   interactor.setInteractorStyle(vtk.Interaction.Style.vtkInteractorStyleTrackballCamera.newInstance());


   activeWindows[Id] = {};
   activeWindows[Id]['renderWindow'] = renderWindow;

 }

 //==============================================================================================
 createCone(1);
 $('#div_1').width(width);
 $('#div_1').height(height);
 $('#div_1').resizable();

 createCone(2);
 $('#div_2').width(width);
 $('#div_2').height(height);
 $('#div_2').resizable();
 //==============================================================================================
 $(document).on('resizestop', '.aDiv', function() {
   console.log('resize');
  ...