Skip to content
Snippets Groups Projects
Commit b8ddccfe authored by Alexander Rose's avatar Alexander Rose
Browse files

removed container param from canvas3d constructor

parent 0b346a58
Branches
Tags
No related merge requests found
...@@ -14,7 +14,6 @@ import { GraphicsRenderObject } from 'mol-gl/render-object' ...@@ -14,7 +14,6 @@ import { GraphicsRenderObject } from 'mol-gl/render-object'
import { TrackballControls, TrackballControlsParams } from './controls/trackball' import { TrackballControls, TrackballControlsParams } from './controls/trackball'
import { Viewport } from './camera/util' import { Viewport } from './camera/util'
import { resizeCanvas } from './util';
import { createContext, getGLContext, WebGLContext } from 'mol-gl/webgl/context'; import { createContext, getGLContext, WebGLContext } from 'mol-gl/webgl/context';
import { Representation } from 'mol-repr/representation'; import { Representation } from 'mol-repr/representation';
import { createRenderTarget } from 'mol-gl/webgl/render-target'; import { createRenderTarget } from 'mol-gl/webgl/render-target';
...@@ -93,7 +92,7 @@ namespace Canvas3D { ...@@ -93,7 +92,7 @@ namespace Canvas3D {
export interface HighlightEvent { current: Representation.Loci, prev: Representation.Loci, modifiers?: ModifiersKeys } export interface HighlightEvent { current: Representation.Loci, prev: Representation.Loci, modifiers?: ModifiersKeys }
export interface ClickEvent { current: Representation.Loci, buttons: ButtonsType, 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 p = { ...PD.getDefaultValues(Canvas3DParams), ...props }
const reprRenderObjects = new Map<Representation.Any, Set<GraphicsRenderObject>>() const reprRenderObjects = new Map<Representation.Any, Set<GraphicsRenderObject>>()
...@@ -682,7 +681,6 @@ namespace Canvas3D { ...@@ -682,7 +681,6 @@ namespace Canvas3D {
} }
function handleResize() { function handleResize() {
resizeCanvas(canvas, container)
renderer.setViewport(0, 0, canvas.width, canvas.height) renderer.setViewport(0, 0, canvas.width, canvas.height)
Viewport.set(camera.viewport, 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) Viewport.set(controls.viewport, 0, 0, canvas.width, canvas.height)
......
/**
* 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
...@@ -113,7 +113,7 @@ export class PluginContext { ...@@ -113,7 +113,7 @@ export class PluginContext {
try { try {
this.layout.setRoot(container); this.layout.setRoot(container);
if (this.spec.layout && this.spec.layout.initial) this.layout.setProps(this.spec.layout.initial); 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; const renderer = this.canvas3d.props.renderer;
PluginCommands.Canvas3D.SetSettings.dispatch(this, { settings: { renderer: { ...renderer, backgroundColor: Color(0xFCFBF9) } } }); PluginCommands.Canvas3D.SetSettings.dispatch(this, { settings: { renderer: { ...renderer, backgroundColor: Color(0xFCFBF9) } } });
this.canvas3d.animate(); this.canvas3d.animate();
......
...@@ -91,6 +91,19 @@ export class Viewport extends PluginUIComponent<{ }, ViewportState> { ...@@ -91,6 +91,19 @@ export class Viewport extends PluginUIComponent<{ }, ViewportState> {
}; };
private handleResize = () => { 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(); this.plugin.canvas3d.handleResize();
} }
......
...@@ -32,7 +32,7 @@ canvas.style.width = '100%' ...@@ -32,7 +32,7 @@ canvas.style.width = '100%'
canvas.style.height = '100%' canvas.style.height = '100%'
parent.appendChild(canvas) parent.appendChild(canvas)
const canvas3d = Canvas3D.create(canvas, parent, { const canvas3d = Canvas3D.create(canvas, {
renderer: { ...PD.getDefaultValues(RendererParams), backgroundColor: ColorNames.white }, renderer: { ...PD.getDefaultValues(RendererParams), backgroundColor: ColorNames.white },
cameraMode: 'orthographic' cameraMode: 'orthographic'
}) })
......
...@@ -28,7 +28,7 @@ canvas.style.width = '100%' ...@@ -28,7 +28,7 @@ canvas.style.width = '100%'
canvas.style.height = '100%' canvas.style.height = '100%'
parent.appendChild(canvas) parent.appendChild(canvas)
const canvas3d = Canvas3D.create(canvas, parent) const canvas3d = Canvas3D.create(canvas)
canvas3d.animate() canvas3d.animate()
......
...@@ -23,7 +23,7 @@ canvas.style.width = '100%' ...@@ -23,7 +23,7 @@ canvas.style.width = '100%'
canvas.style.height = '100%' canvas.style.height = '100%'
parent.appendChild(canvas) parent.appendChild(canvas)
const canvas3d = Canvas3D.create(canvas, parent) const canvas3d = Canvas3D.create(canvas)
canvas3d.animate() canvas3d.animate()
function linesRepr() { function linesRepr() {
......
...@@ -24,7 +24,7 @@ canvas.style.width = '100%' ...@@ -24,7 +24,7 @@ canvas.style.width = '100%'
canvas.style.height = '100%' canvas.style.height = '100%'
parent.appendChild(canvas) parent.appendChild(canvas)
const canvas3d = Canvas3D.create(canvas, parent) const canvas3d = Canvas3D.create(canvas)
canvas3d.animate() canvas3d.animate()
function meshRepr() { function meshRepr() {
......
...@@ -38,7 +38,7 @@ info.style.color = 'white' ...@@ -38,7 +38,7 @@ info.style.color = 'white'
parent.appendChild(info) parent.appendChild(info)
let prevReprLoci = Representation.Loci.Empty let prevReprLoci = Representation.Loci.Empty
const canvas3d = Canvas3D.create(canvas, parent) const canvas3d = Canvas3D.create(canvas)
canvas3d.animate() canvas3d.animate()
canvas3d.input.move.subscribe(({x, y}) => { canvas3d.input.move.subscribe(({x, y}) => {
const pickingId = canvas3d.identify(x, y) const pickingId = canvas3d.identify(x, y)
......
...@@ -21,7 +21,7 @@ canvas.style.width = '100%' ...@@ -21,7 +21,7 @@ canvas.style.width = '100%'
canvas.style.height = '100%' canvas.style.height = '100%'
parent.appendChild(canvas) parent.appendChild(canvas)
const canvas3d = Canvas3D.create(canvas, parent) const canvas3d = Canvas3D.create(canvas)
canvas3d.animate() canvas3d.animate()
function spheresRepr() { function spheresRepr() {
......
...@@ -26,7 +26,7 @@ canvas.style.width = '100%' ...@@ -26,7 +26,7 @@ canvas.style.width = '100%'
canvas.style.height = '100%' canvas.style.height = '100%'
parent.appendChild(canvas) parent.appendChild(canvas)
const canvas3d = Canvas3D.create(canvas, parent) const canvas3d = Canvas3D.create(canvas)
canvas3d.animate() canvas3d.animate()
......
...@@ -24,7 +24,7 @@ canvas.style.width = '100%' ...@@ -24,7 +24,7 @@ canvas.style.width = '100%'
canvas.style.height = '100%' canvas.style.height = '100%'
parent.appendChild(canvas) parent.appendChild(canvas)
const canvas3d = Canvas3D.create(canvas, parent) const canvas3d = Canvas3D.create(canvas)
canvas3d.animate() canvas3d.animate()
function textRepr() { function textRepr() {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment