re-added resizeCanvas util

src/mol-canvas3d/util.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+/** resize canvas to container element */
+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` })
+}

src/mol-plugin/ui/viewport.tsx

@@ -13,6 +13,7 @@ import { ParameterControls } from './controls/parameters';
 import { Canvas3DParams } from 'mol-canvas3d/canvas3d';
 import { PluginLayoutStateParams } from 'mol-plugin/layout';
 import { ControlGroup, IconButton } from './controls/common';
+import { resizeCanvas } from 'mol-canvas3d/util';
 
 interface ViewportState {
     noWebGl: boolean
@@ -91,20 +92,12 @@ 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
+        const container = this.container.current;
+        const canvas = this.canvas.current;
+        if (container && canvas) {
+            resizeCanvas(canvas, container);
+            this.plugin.canvas3d.handleResize();
         }
-        canvas.width = window.devicePixelRatio * w
-        canvas.height = window.devicePixelRatio * h
-        Object.assign(canvas.style, { width: `${w}px`, height: `${h}px` })
-        this.plugin.canvas3d.handleResize();
     }
 
     componentDidMount() {

src/tests/browser/marching-cubes.ts

@@ -22,15 +22,15 @@ import { createHistogramPyramid } from 'mol-gl/compute/histogram-pyramid/reducti
 import { createIsosurfaceBuffers } from 'mol-gl/compute/marching-cubes/isosurface';
 import { RendererParams } from 'mol-gl/renderer';
 import { ParamDefinition as PD } from 'mol-util/param-definition';
+import { resizeCanvas } from 'mol-canvas3d/util';
 
 const parent = document.getElementById('app')!
 parent.style.width = '100%'
 parent.style.height = '100%'
 
 const canvas = document.createElement('canvas')
-canvas.style.width = '100%'
-canvas.style.height = '100%'
 parent.appendChild(canvas)
+resizeCanvas(canvas, parent)
 
 const canvas3d = Canvas3D.fromCanvas(canvas, {
     renderer: { ...PD.getDefaultValues(RendererParams), backgroundColor: ColorNames.white },

src/tests/browser/render-asa.ts

@@ -18,15 +18,15 @@ import { Location } from 'mol-model/location';
 import { ThemeDataContext } from 'mol-theme/theme';
 import { ParamDefinition as PD } from 'mol-util/param-definition';
 import { ColorListName, ColorListOptions } from 'mol-util/color/scale';
+import { resizeCanvas } from 'mol-canvas3d/util';
 
 const parent = document.getElementById('app')!
 parent.style.width = '100%'
 parent.style.height = '100%'
 
 const canvas = document.createElement('canvas')
-canvas.style.width = '100%'
-canvas.style.height = '100%'
 parent.appendChild(canvas)
+resizeCanvas(canvas, parent)
 
 const canvas3d = Canvas3D.fromCanvas(canvas)
 canvas3d.animate()

src/tests/browser/render-lines.ts

@@ -13,15 +13,15 @@ import { createRenderObject } from 'mol-gl/render-object';
 import { Lines } from 'mol-geo/geometry/lines/lines';
 import { LinesBuilder } from 'mol-geo/geometry/lines/lines-builder';
 import { DodecahedronCage } from 'mol-geo/primitive/dodecahedron';
+import { resizeCanvas } from 'mol-canvas3d/util';
 
 const parent = document.getElementById('app')!
 parent.style.width = '100%'
 parent.style.height = '100%'
 
 const canvas = document.createElement('canvas')
-canvas.style.width = '100%'
-canvas.style.height = '100%'
 parent.appendChild(canvas)
+resizeCanvas(canvas, parent)
 
 const canvas3d = Canvas3D.fromCanvas(canvas)
 canvas3d.animate()

src/tests/browser/render-mesh.ts

@@ -14,15 +14,15 @@ import { Color } from 'mol-util/color';
 import { createRenderObject } from 'mol-gl/render-object';
 import { SpikedBall } from 'mol-geo/primitive/spiked-ball';
 import { HexagonalPrismCage } from 'mol-geo/primitive/prism';
+import { resizeCanvas } from 'mol-canvas3d/util';
 
 const parent = document.getElementById('app')!
 parent.style.width = '100%'
 parent.style.height = '100%'
 
 const canvas = document.createElement('canvas')
-canvas.style.width = '100%'
-canvas.style.height = '100%'
 parent.appendChild(canvas)
+resizeCanvas(canvas, parent)
 
 const canvas3d = Canvas3D.fromCanvas(canvas)
 canvas3d.animate()

src/tests/browser/render-shape.ts

@@ -18,15 +18,15 @@ import { RuntimeContext, Progress } from 'mol-task';
 import { Representation } from 'mol-repr/representation';
 import { MarkerAction } from 'mol-geo/geometry/marker-data';
 import { EveryLoci } from 'mol-model/loci';
+import { resizeCanvas } from 'mol-canvas3d/util';
 
 const parent = document.getElementById('app')!
 parent.style.width = '100%'
 parent.style.height = '100%'
 
 const canvas = document.createElement('canvas')
-canvas.style.width = '100%'
-canvas.style.height = '100%'
 parent.appendChild(canvas)
+resizeCanvas(canvas, parent)
 
 const info = document.createElement('div')
 info.style.position = 'absolute'

src/tests/browser/render-spheres.ts

@@ -11,15 +11,15 @@ import { Representation } from 'mol-repr/representation';
 import { Spheres } from 'mol-geo/geometry/spheres/spheres';
 import { Color } from 'mol-util/color';
 import { createRenderObject } from 'mol-gl/render-object';
+import { resizeCanvas } from 'mol-canvas3d/util';
 
 const parent = document.getElementById('app')!
 parent.style.width = '100%'
 parent.style.height = '100%'
 
 const canvas = document.createElement('canvas')
-canvas.style.width = '100%'
-canvas.style.height = '100%'
 parent.appendChild(canvas)
+resizeCanvas(canvas, parent)
 
 const canvas3d = Canvas3D.fromCanvas(canvas)
 canvas3d.animate()

src/tests/browser/render-structure.ts

@@ -16,15 +16,15 @@ import { MolecularSurfaceRepresentationProvider } from 'mol-repr/structure/repre
 import { BallAndStickRepresentationProvider } from 'mol-repr/structure/representation/ball-and-stick';
 import { GaussianSurfaceRepresentationProvider } from 'mol-repr/structure/representation/gaussian-surface';
 import { ComputedSecondaryStructure } from 'mol-model-props/computed/secondary-structure';
+import { resizeCanvas } from 'mol-canvas3d/util';
 
 const parent = document.getElementById('app')!
 parent.style.width = '100%'
 parent.style.height = '100%'
 
 const canvas = document.createElement('canvas')
-canvas.style.width = '100%'
-canvas.style.height = '100%'
 parent.appendChild(canvas)
+resizeCanvas(canvas, parent)
 
 const canvas3d = Canvas3D.fromCanvas(canvas)
 canvas3d.animate()

src/tests/browser/render-text.ts

@@ -14,15 +14,15 @@ import { Representation } from 'mol-repr/representation';
 import { SpheresBuilder } from 'mol-geo/geometry/spheres/spheres-builder';
 import { createRenderObject } from 'mol-gl/render-object';
 import { Spheres } from 'mol-geo/geometry/spheres/spheres';
+import { resizeCanvas } from 'mol-canvas3d/util';
 
 const parent = document.getElementById('app')!
 parent.style.width = '100%'
 parent.style.height = '100%'
 
 const canvas = document.createElement('canvas')
-canvas.style.width = '100%'
-canvas.style.height = '100%'
 parent.appendChild(canvas)
+resizeCanvas(canvas, parent)
 
 const canvas3d = Canvas3D.fromCanvas(canvas)
 canvas3d.animate()