diff --git a/src/mol-canvas3d/canvas3d.ts b/src/mol-canvas3d/canvas3d.ts
index 3a6a815b6d2b6fa5c76dbf66e52c49f9987c9d5f..e810bf871c9eac3b6aff14aefa373166b894058b 100644
--- a/src/mol-canvas3d/canvas3d.ts
+++ b/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)
diff --git a/src/mol-canvas3d/util.ts b/src/mol-canvas3d/util.ts
deleted file mode 100644
index 294907ad30cdd987b883f7b95848829de48a611e..0000000000000000000000000000000000000000
--- a/src/mol-canvas3d/util.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * 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
diff --git a/src/mol-plugin/context.ts b/src/mol-plugin/context.ts
index d35533a86d220de1f817fdd6b665b5c98063a986..9258b1dac4312f6d3bc0236ee8b20213f8cec1af 100644
--- a/src/mol-plugin/context.ts
+++ b/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();
diff --git a/src/mol-plugin/ui/viewport.tsx b/src/mol-plugin/ui/viewport.tsx
index 859d1e421ad81d05154e84f66728cebdb638ed27..99263d9d012a04ffe07ddf5074049904119cdfa4 100644
--- a/src/mol-plugin/ui/viewport.tsx
+++ b/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();
}
diff --git a/src/tests/browser/marching-cubes.ts b/src/tests/browser/marching-cubes.ts
index 2aa507cc08ade1e0745f08befbfd7fa8dd1103e9..6fcebee4a8d0e9566cbd4d6db6c2959917fccfc8 100644
--- a/src/tests/browser/marching-cubes.ts
+++ b/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'
})
diff --git a/src/tests/browser/render-asa.ts b/src/tests/browser/render-asa.ts
index a77239225bb01a525e33481bcd6a0403c341b757..7c00786ea27e8dadef38fc1710dcb50f912b4b30 100644
--- a/src/tests/browser/render-asa.ts
+++ b/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()
diff --git a/src/tests/browser/render-lines.ts b/src/tests/browser/render-lines.ts
index 40962cea9511bd2940f28dbf733a856028cd1f81..1b5b104bb5f7ebba3b6326a7ec83b6f0685c5420 100644
--- a/src/tests/browser/render-lines.ts
+++ b/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() {
diff --git a/src/tests/browser/render-mesh.ts b/src/tests/browser/render-mesh.ts
index 13d752b7d66c0c6fd45fa42cba6be670c3c57646..1100bb5af426ba30b01990dee5f9c9587a28b40e 100644
--- a/src/tests/browser/render-mesh.ts
+++ b/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() {
diff --git a/src/tests/browser/render-shape.ts b/src/tests/browser/render-shape.ts
index 124831af933b93214d6e7ac48647b5eee8ce06e2..7c829058630c3a44d16be1ebbeee9d62f5c2c725 100644
--- a/src/tests/browser/render-shape.ts
+++ b/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)
diff --git a/src/tests/browser/render-spheres.ts b/src/tests/browser/render-spheres.ts
index c933d27819eb94058201acaee3b175be2f4f1a84..8223d4b189b0466b67024945825768994b0a574f 100644
--- a/src/tests/browser/render-spheres.ts
+++ b/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() {
diff --git a/src/tests/browser/render-structure.ts b/src/tests/browser/render-structure.ts
index e0c5249bf7b60d7144c4cb24640512b69e8876f9..b8962abb0b2ed56eda91d5af4e0e79195524f803 100644
--- a/src/tests/browser/render-structure.ts
+++ b/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()
diff --git a/src/tests/browser/render-text.ts b/src/tests/browser/render-text.ts
index c8f55c2fb9659ecf1883bac6a07b129ac3e148f5..145ea3a431ab18335c5d77259a5e966a0a337512 100644
--- a/src/tests/browser/render-text.ts
+++ b/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() {