fix(CanvasView): allow setting canvas element

Author: daker

Sources/Rendering/Misc/CanvasView/index.js

@@ -148,8 +148,10 @@ export function extend(publicAPI, model, initialValues = {}) {
   Object.assign(model, DEFAULT_VALUES, initialValues);
 
   // Create internal instances
-  model.canvas = document.createElement('canvas');
-  model.canvas.style.width = '100%';
+  if (!model.canvas) {
+    model.canvas = document.createElement('canvas');
+    model.canvas.style.width = '100%';
+  }
 
   // Create internal bgImage
   model.bgImage = new Image();

Sources/Rendering/Misc/RemoteView/index.d.ts

@@ -13,21 +13,27 @@ interface IRemoteViewInitialValues {
   rpcGestureEvent?: any;
   rpcWheelEvent?: any;
   viewStream?: vtkViewStream;
+  canvasElement?: HTMLCanvasElement;
 }
 
 export interface vtkRemoteView extends vtkObject {
   /**
-   * Get container element
+   * Get container HTML element
    */
   getContainer(): HTMLElement;
 
   /**
-   *
+   * Get vtkViewStream object
    */
   getViewStream(): vtkViewStream;
 
   /**
-   *
+   * Get the canvas HTML element
+   */
+  getCanvasElement(): HTMLCanvasElement;
+
+  /**
+   * Get the vtkCanvasView object
    */
   getCanvasView(): vtkCanvasView;
 

Sources/Rendering/Misc/RemoteView/index.js

@@ -17,7 +17,9 @@ function vtkRemoteView(publicAPI, model) {
   model.classHierarchy.push('vtkRemoteView');
 
   // Constructor
-  model.canvasView = vtkCanvasView.newInstance();
+  model.canvasView = vtkCanvasView.newInstance({
+    canvas: model.canvasElement,
+  });
   model.interactorStyle = vtkInteractorStyleRemoteMouse.newInstance();
 
   model.interactor = vtkRenderWindowInteractor.newInstance();
@@ -62,6 +64,8 @@ function vtkRemoteView(publicAPI, model) {
     }
   }, publicAPI.delete);
 
+  publicAPI.getCanvasElement = () => model.canvasView.getCanvas();
+
   // --------------------------------------------------------------------------
   // remote handing
   // --------------------------------------------------------------------------
@@ -201,6 +205,7 @@ const DEFAULT_VALUES = {
   rpcMouseEvent: 'viewport.mouse.interaction',
   rpcGestureEvent: null,
   rpcWheelEvent: null,
+  canvasElement: null,
 };
 
 // ----------------------------------------------------------------------------
@@ -219,6 +224,7 @@ export function extend(publicAPI, model, initialValues = {}) {
     'interactiveRatio',
     'stillQuality',
     'stillRatio',
+    'canvasElement',
   ]);
   macro.setGet(publicAPI, model, [
     'session',