mol-canvas3d: fixed viewport freezing

src/mol-canvas3d/canvas3d.ts

@@ -248,7 +248,7 @@ namespace Canvas3D {
         }
 
         async function identify(x: number, y: number): Promise<PickingId | undefined> {
-            if (pickDirty || isPicking) return undefined
+            if (pickDirty || isPicking) return;
 
             isPicking = true
 
@@ -265,19 +265,19 @@ namespace Canvas3D {
             // await webgl.readPixelsAsync(xp, yp, 1, 1, buffer)
             webgl.readPixels(xp, yp, 1, 1, buffer)
             const objectId = decodeIdRGB(buffer[0], buffer[1], buffer[2])
-            if (objectId === -1) return
+            if (objectId === -1) { isPicking = false; return; }
 
             instancePickTarget.bind()
             // await webgl.readPixelsAsync(xp, yp, 1, 1, buffer)
             webgl.readPixels(xp, yp, 1, 1, buffer)
             const instanceId = decodeIdRGB(buffer[0], buffer[1], buffer[2])
-            if (instanceId === -1) return
+            if (instanceId === -1) { isPicking = false; return; }
 
             groupPickTarget.bind()
             // await webgl.readPixelsAsync(xp, yp, 1, 1, buffer)
             webgl.readPixels(xp, yp, 1, 1, buffer)
             const groupId = decodeIdRGB(buffer[0], buffer[1], buffer[2])
-            if (groupId === -1) return
+            if (groupId === -1) { isPicking = false; return; }
 
             isPicking = false
 

src/mol-plugin/ui/viewport.tsx

@@ -67,8 +67,8 @@ export class ViewportControls extends PluginComponent {
 }
 
 export class Viewport extends PluginComponent<{ }, ViewportState> {
-    private container: HTMLDivElement | null = null;
-    private canvas: HTMLCanvasElement | null = null;
+    private container = React.createRef<HTMLDivElement>();
+    private canvas = React.createRef<HTMLCanvasElement>();
 
     state: ViewportState = {
         noWebGl: false
@@ -79,7 +79,7 @@ export class Viewport extends PluginComponent<{ }, ViewportState> {
     }
 
     componentDidMount() {
-        if (!this.canvas || !this.container || !this.plugin.initViewer(this.canvas, this.container)) {
+        if (!this.canvas.current || !this.container.current || !this.plugin.initViewer(this.canvas.current!, this.container.current!)) {
             this.setState({ noWebGl: true });
         }
         this.handleResize();
@@ -123,11 +123,8 @@ export class Viewport extends PluginComponent<{ }, ViewportState> {
         if (this.state.noWebGl) return this.renderMissing();
 
         return <div className='msp-viewport'>
-            <div className='msp-viewport-host3d' ref={elm => this.container = elm}>
-                <canvas ref={elm => {
-                    if (!!this.canvas && this.canvas !== elm) console.warn('changed viewport canvas')
-                    this.canvas = elm
-                }} />
+            <div className='msp-viewport-host3d' ref={this.container}>
+                <canvas ref={this.canvas} />
             </div>
         </div>;
     }