From 65be7bcd499362566fb0b79c11569a22a1128894 Mon Sep 17 00:00:00 2001
From: Alexander Rose <alexander.rose@weirdbyte.de>
Date: Sat, 2 Jun 2018 17:11:57 -0400
Subject: [PATCH] tweaks
---
src/mol-app/ui/visualization/viewport.tsx | 35 +++++++++++++++++++----
src/mol-view/stage.ts | 13 ++++++---
2 files changed, 39 insertions(+), 9 deletions(-)
diff --git a/src/mol-app/ui/visualization/viewport.tsx b/src/mol-app/ui/visualization/viewport.tsx
index 345fad88a..a13c12809 100644
--- a/src/mol-app/ui/visualization/viewport.tsx
+++ b/src/mol-app/ui/visualization/viewport.tsx
@@ -98,6 +98,8 @@ type ViewportState = {
noWebGl: boolean,
showLogo: boolean,
aspectRatio: number,
+ width: number
+ height: number
images: { [k: string]: ImageData }
info: string
}
@@ -106,7 +108,25 @@ export class Viewport extends View<ViewportController, ViewportState, { noWebGl?
private container: HTMLDivElement | null = null;
private canvas: HTMLCanvasElement | null = null;
private defaultBg = { r: 1, g: 1, b: 1 }
- state: ViewportState = { noWebGl: false, showLogo: true, images: {}, aspectRatio: 1, info: '' };
+ state: ViewportState = {
+ noWebGl: false,
+ showLogo: true,
+ images: {},
+ aspectRatio: 1,
+ width: 0,
+ height: 0,
+ info: ''
+ };
+
+ handleResize() {
+ if (this.container) {
+ this.setState({
+ aspectRatio: this.container.clientWidth / this.container.clientHeight,
+ width: this.container.clientWidth,
+ height: this.container.clientHeight
+ })
+ }
+ }
componentDidMount() {
if (!this.canvas || !this.container || !this.controller.context.initStage(this.canvas, this.container)) {
@@ -137,9 +157,8 @@ export class Viewport extends View<ViewportController, ViewportState, { noWebGl?
})
})
- if (this.container) {
- this.setState({ aspectRatio: this.container.clientWidth / this.container.clientHeight })
- }
+ viewer.input.resize.subscribe(() => this.handleResize())
+ this.handleResize()
}
componentWillUnmount() {
@@ -188,7 +207,13 @@ export class Viewport extends View<ViewportController, ViewportState, { noWebGl?
>
{Object.keys(this.state.images).map(k => {
const imageData = this.state.images[k]
- return <ImageCanvas key={k} imageData={imageData} aspectRatio={this.state.aspectRatio} maxWidth={256} maxHeight={256} />
+ return <ImageCanvas
+ key={k}
+ imageData={imageData}
+ aspectRatio={this.state.aspectRatio}
+ maxWidth={this.state.width / 4}
+ maxHeight={this.state.height / 4}
+ />
})}
</div>
</div>;
diff --git a/src/mol-view/stage.ts b/src/mol-view/stage.ts
index df5a3f862..1992d98de 100644
--- a/src/mol-view/stage.ts
+++ b/src/mol-view/stage.ts
@@ -34,18 +34,23 @@ export class Stage {
}
- async initRenderer (canvas: HTMLCanvasElement, container: HTMLDivElement) {
+ initRenderer (canvas: HTMLCanvasElement, container: HTMLDivElement) {
this.viewer = Viewer.create(canvas, container)
this.viewer.animate()
this.ctx.viewer = this.viewer
- this.loadPdbid('1crn')
+ // this.loadPdbid('1crn')
+ this.loadMmcifUrl(`../../examples/1cbs_full.bcif`)
}
- async loadPdbid (pdbid: string) {
- const urlEntity = UrlEntity.ofUrl(this.ctx, `https://files.rcsb.org/download/${pdbid}.cif`)
+ loadMmcifUrl (url: string) {
+ const urlEntity = UrlEntity.ofUrl(this.ctx, url)
MmcifUrlToSpacefill.apply(this.ctx, urlEntity, spacefillProps)
}
+ loadPdbid (pdbid: string) {
+ return this.loadMmcifUrl(`https://files.rcsb.org/download/${pdbid}.cif`)
+ }
+
dispose () {
// TODO
}
--
GitLab