removed container param from canvas3d constructor

src/mol-canvas3d/canvas3d.ts

@@ -14,7 +14,6 @@ import { GraphicsRenderObject } from 'mol-gl/render-object'
 
 import { TrackballControls, TrackballControlsParams } from './controls/trackball'
 import { Viewport } from './camera/util'
-import { resizeCanvas } from './util';
 import { createContext, getGLContext, WebGLContext } from 'mol-gl/webgl/context';
 import { Representation } from 'mol-repr/representation';
 import { createRenderTarget } from 'mol-gl/webgl/render-target';
@@ -93,7 +92,7 @@ namespace Canvas3D {
     export interface HighlightEvent { current: Representation.Loci, prev: Representation.Loci, modifiers?: ModifiersKeys }
     export interface ClickEvent { current: Representation.Loci, buttons: ButtonsType, modifiers: ModifiersKeys }
 
-    export function create(canvas: HTMLCanvasElement, container: Element, props: Partial<Canvas3DProps> = {}): Canvas3D {
+    export function create(canvas: HTMLCanvasElement, props: Partial<Canvas3DProps> = {}): Canvas3D {
         const p = { ...PD.getDefaultValues(Canvas3DParams), ...props }
 
         const reprRenderObjects = new Map<Representation.Any, Set<GraphicsRenderObject>>()
@@ -682,7 +681,6 @@ namespace Canvas3D {
         }
 
         function handleResize() {
-            resizeCanvas(canvas, container)
             renderer.setViewport(0, 0, canvas.width, canvas.height)
             Viewport.set(camera.viewport, 0, 0, canvas.width, canvas.height)
             Viewport.set(controls.viewport, 0, 0, canvas.width, canvas.height)

src/mol-canvas3d/util.ts

-/**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
- *
- * @author Alexander Rose <alexander.rose@weirdbyte.de>
- */
-
-export function resizeCanvas (canvas: HTMLCanvasElement, container: Element) {
-    let w = window.innerWidth
-    let h = window.innerHeight
-    if (container !== document.body) {
-        let bounds = container.getBoundingClientRect()
-        w = bounds.right - bounds.left
-        h = bounds.bottom - bounds.top
-    }
-    canvas.width = window.devicePixelRatio * w
-    canvas.height = window.devicePixelRatio * h
-    Object.assign(canvas.style, { width: `${w}px`, height: `${h}px` })
-}
\ No newline at end of file

src/mol-plugin/context.ts

@@ -113,7 +113,7 @@ export class PluginContext {
         try {
             this.layout.setRoot(container);
             if (this.spec.layout && this.spec.layout.initial) this.layout.setProps(this.spec.layout.initial);
-            (this.canvas3d as Canvas3D) = Canvas3D.create(canvas, container);
+            (this.canvas3d as Canvas3D) = Canvas3D.create(canvas);
             const renderer = this.canvas3d.props.renderer;
             PluginCommands.Canvas3D.SetSettings.dispatch(this, { settings: { renderer: { ...renderer, backgroundColor: Color(0xFCFBF9) } } });
             this.canvas3d.animate();

src/mol-plugin/ui/viewport.tsx

@@ -91,6 +91,19 @@ export class Viewport extends PluginUIComponent<{ }, ViewportState> {
     };
 
     private handleResize = () => {
+        let w = window.innerWidth
+        let h = window.innerHeight
+        const container = this.container.current
+        const canvas = this.canvas.current
+        if (!container || !canvas) return
+        if (container !== document.body) {
+            let bounds = container.getBoundingClientRect()
+            w = bounds.right - bounds.left
+            h = bounds.bottom - bounds.top
+        }
+        canvas.width = window.devicePixelRatio * w
+        canvas.height = window.devicePixelRatio * h
+        Object.assign(canvas.style, { width: `${w}px`, height: `${h}px` })
         this.plugin.canvas3d.handleResize();
     }
 

src/tests/browser/marching-cubes.ts

@@ -32,7 +32,7 @@ canvas.style.width = '100%'
 canvas.style.height = '100%'
 parent.appendChild(canvas)
 
-const canvas3d = Canvas3D.create(canvas, parent, {
+const canvas3d = Canvas3D.create(canvas, {
     renderer: { ...PD.getDefaultValues(RendererParams), backgroundColor: ColorNames.white },
     cameraMode: 'orthographic'
 })

src/tests/browser/render-asa.ts

@@ -28,7 +28,7 @@ canvas.style.width = '100%'
 canvas.style.height = '100%'
 parent.appendChild(canvas)
 
-const canvas3d = Canvas3D.create(canvas, parent)
+const canvas3d = Canvas3D.create(canvas)
 canvas3d.animate()
 
 

src/tests/browser/render-lines.ts

@@ -23,7 +23,7 @@ canvas.style.width = '100%'
 canvas.style.height = '100%'
 parent.appendChild(canvas)
 
-const canvas3d = Canvas3D.create(canvas, parent)
+const canvas3d = Canvas3D.create(canvas)
 canvas3d.animate()
 
 function linesRepr() {

src/tests/browser/render-mesh.ts

@@ -24,7 +24,7 @@ canvas.style.width = '100%'
 canvas.style.height = '100%'
 parent.appendChild(canvas)
 
-const canvas3d = Canvas3D.create(canvas, parent)
+const canvas3d = Canvas3D.create(canvas)
 canvas3d.animate()
 
 function meshRepr() {

src/tests/browser/render-shape.ts

@@ -38,7 +38,7 @@ info.style.color = 'white'
 parent.appendChild(info)
 
 let prevReprLoci = Representation.Loci.Empty
-const canvas3d = Canvas3D.create(canvas, parent)
+const canvas3d = Canvas3D.create(canvas)
 canvas3d.animate()
 canvas3d.input.move.subscribe(({x, y}) => {
     const pickingId = canvas3d.identify(x, y)

src/tests/browser/render-spheres.ts

@@ -21,7 +21,7 @@ canvas.style.width = '100%'
 canvas.style.height = '100%'
 parent.appendChild(canvas)
 
-const canvas3d = Canvas3D.create(canvas, parent)
+const canvas3d = Canvas3D.create(canvas)
 canvas3d.animate()
 
 function spheresRepr() {

src/tests/browser/render-structure.ts

@@ -26,7 +26,7 @@ canvas.style.width = '100%'
 canvas.style.height = '100%'
 parent.appendChild(canvas)
 
-const canvas3d = Canvas3D.create(canvas, parent)
+const canvas3d = Canvas3D.create(canvas)
 canvas3d.animate()
 
 

src/tests/browser/render-text.ts

@@ -24,7 +24,7 @@ canvas.style.width = '100%'
 canvas.style.height = '100%'
 parent.appendChild(canvas)
 
-const canvas3d = Canvas3D.create(canvas, parent)
+const canvas3d = Canvas3D.create(canvas)
 canvas3d.animate()
 
 function textRepr() {