Add PluginContext.initContainer/canvas3dInitialized and their usage

CHANGELOG.md

@@ -6,7 +6,9 @@ Note that since we don't clearly distinguish between a public and private interf
 
 ## [Unreleased]
 
-- Add `PluginContext.mount/unmount` methods; these should make it easier to reuse a plugin context with both custom and built-in UI
+- Add `PluginContext.initContainer/mount/unmount` methods; these should make it easier to reuse a plugin context with both custom and built-in UI
+- Add `PluginContext.canvas3dInitialized`
+- `createPluginUI` now resolves after the 3d canvas has been initialized.
 
 ## [v3.22.0] - 2022-10-17
 

src/apps/docking-viewer/index.ts

@@ -58,20 +58,22 @@ class Viewer {
     }
 
     static async create(elementOrId: string | HTMLElement, colors = [Color(0x992211), Color(0xDDDDDD)], showButtons = true) {
-        const o = { ...DefaultViewerOptions, ...{
-            layoutIsExpanded: false,
-            layoutShowControls: false,
-            layoutShowRemoteState: false,
-            layoutShowSequence: true,
-            layoutShowLog: false,
-            layoutShowLeftPanel: true,
-
-            viewportShowExpand: true,
-            viewportShowControls: false,
-            viewportShowSettings: false,
-            viewportShowSelectionMode: false,
-            viewportShowAnimation: false,
-        } };
+        const o = {
+            ...DefaultViewerOptions, ...{
+                layoutIsExpanded: false,
+                layoutShowControls: false,
+                layoutShowRemoteState: false,
+                layoutShowSequence: true,
+                layoutShowLog: false,
+                layoutShowLeftPanel: true,
+
+                viewportShowExpand: true,
+                viewportShowControls: false,
+                viewportShowSettings: false,
+                viewportShowSelectionMode: false,
+                viewportShowAnimation: false,
+            }
+        };
         const defaultSpec = DefaultPluginUISpec();
 
         const spec: PluginUISpec = {
@@ -135,18 +137,16 @@ class Viewer {
             }
         };
 
-        plugin.behaviors.canvas3d.initialized.subscribe(v => {
-            if (v) {
-                PluginCommands.Canvas3D.SetSettings(plugin, { settings: {
-                    renderer: {
-                        ...plugin.canvas3d!.props.renderer,
-                        backgroundColor: ColorNames.white,
-                    },
-                    camera: {
-                        ...plugin.canvas3d!.props.camera,
-                        helper: { axes: { name: 'off', params: {} } }
-                    }
-                } });
+        PluginCommands.Canvas3D.SetSettings(plugin, {
+            settings: {
+                renderer: {
+                    ...plugin.canvas3d!.props.renderer,
+                    backgroundColor: ColorNames.white,
+                },
+                camera: {
+                    ...plugin.canvas3d!.props.camera,
+                    helper: { axes: { name: 'off', params: {} } }
+                }
             }
         });
 

src/examples/alpha-orbitals/controls.tsx

@@ -4,16 +4,16 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import * as ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { AlphaOrbitalsExample } from '.';
 import { ParameterControls } from '../../mol-plugin-ui/controls/parameters';
 import { useBehavior } from '../../mol-plugin-ui/hooks/use-behavior';
 import { PluginContextContainer } from '../../mol-plugin-ui/plugin';
 
 export function mountControls(orbitals: AlphaOrbitalsExample, parent: Element) {
-    ReactDOM.render(<PluginContextContainer plugin={orbitals.plugin}>
+    createRoot(parent).render(<PluginContextContainer plugin={orbitals.plugin}>
         <Controls orbitals={orbitals} />
-    </PluginContextContainer>, parent);
+    </PluginContextContainer>);
 }
 
 function Controls({ orbitals }: { orbitals: AlphaOrbitalsExample }) {

src/examples/alpha-orbitals/index.ts

@@ -82,24 +82,20 @@ export class AlphaOrbitalsExample {
 
         this.plugin.managers.interactivity.setProps({ granularity: 'element' });
 
-        this.plugin.behaviors.canvas3d.initialized.subscribe(init => {
-            if (!init) return;
-
-            if (!canComputeGrid3dOnGPU(this.plugin.canvas3d?.webgl)) {
-                PluginCommands.Toast.Show(this.plugin, {
-                    title: 'Error',
-                    message: `Browser/device does not support required WebGL extension (OES_texture_float).`
-                });
-                return;
-            }
-
-            this.load({
-                moleculeSdf: DemoMoleculeSDF,
-                ...DemoOrbitals
+        if (!canComputeGrid3dOnGPU(this.plugin.canvas3d?.webgl)) {
+            PluginCommands.Toast.Show(this.plugin, {
+                title: 'Error',
+                message: `Browser/device does not support required WebGL extension (OES_texture_float).`
             });
+            return;
+        }
 
-            mountControls(this, document.getElementById('controls')!);
+        this.load({
+            moleculeSdf: DemoMoleculeSDF,
+            ...DemoOrbitals
         });
+
+        mountControls(this, document.getElementById('controls')!);
     }
 
     readonly params = new BehaviorSubject<ParamDefinition.For<Params>>({} as any);

src/mol-plugin-ui/index.ts

@@ -18,5 +18,10 @@ export async function createPluginUI(target: HTMLElement, spec?: PluginUISpec, o
         await options.onBeforeUIRender(ctx);
     }
     ReactDOM.render(React.createElement(Plugin, { plugin: ctx }), target);
+    try {
+        await ctx.canvas3dInitialized;
+    } catch {
+        // Error reported in UI/console elsewhere.
+    }
     return ctx;
 }

src/mol-plugin-ui/react18.ts

@@ -18,5 +18,10 @@ export async function createPluginUI(target: HTMLElement, spec?: PluginUISpec, o
         await options.onBeforeUIRender(ctx);
     }
     createRoot(target).render(createElement(Plugin, { plugin: ctx }));
+    try {
+        await ctx.canvas3dInitialized;
+    } catch {
+        // Error reported in UI/console elsewhere.
+    }
     return ctx;
 }

src/mol-plugin/context.ts

@@ -35,7 +35,7 @@ import { Representation } from '../mol-repr/representation';
 import { StructureRepresentationRegistry } from '../mol-repr/structure/registry';
 import { VolumeRepresentationRegistry } from '../mol-repr/volume/registry';
 import { StateTransform } from '../mol-state';
-import { RuntimeContext, Task } from '../mol-task';
+import { RuntimeContext, Scheduler, Task } from '../mol-task';
 import { ColorTheme } from '../mol-theme/color';
 import { SizeTheme } from '../mol-theme/size';
 import { ThemeRegistryContext } from '../mol-theme/theme';
@@ -71,6 +71,7 @@ export class PluginContext {
     };
 
     protected subs: Subscription[] = [];
+    private initCanvas3dPromiseCallbacks: [res: () => void, rej: (err: any) => void] = [() => {}, () => {}];
 
     private disposed = false;
     private canvasContainer: HTMLDivElement | undefined = void 0;
@@ -103,10 +104,15 @@ export class PluginContext {
             leftPanelTabName: this.ev.behavior<LeftPanelTabName>('root')
         },
         canvas3d: {
+            // TODO: remove in 4.0?
             initialized: this.canvas3dInit.pipe(filter(v => !!v), take(1))
         }
     } as const;
 
+    readonly canvas3dInitialized = new Promise<void>((res, rej) => {
+        this.initCanvas3dPromiseCallbacks = [res, rej];
+    });
+
     readonly canvas3dContext: Canvas3DContext | undefined;
     readonly canvas3d: Canvas3D | undefined;
     readonly layout = new PluginLayout(this);
@@ -187,44 +193,49 @@ export class PluginContext {
      */
     readonly customState: unknown = Object.create(null);
 
-    mount(target: HTMLElement, canvas3dContext?: Canvas3DContext) {
-        if (this.disposed) throw new Error('Cannot mount a disposed context');
-
-        if (!this.canvasContainer) {
-            const container = document.createElement('div');
-            Object.assign(container.style, {
-                position: 'absolute',
-                left: 0,
-                top: 0,
-                right: 0,
-                bottom: 0,
-                '-webkit-user-select': 'none',
-                'user-select': 'none',
-                '-webkit-tap-highlight-color': 'rgba(0,0,0,0)',
-                '-webkit-touch-callout': 'none',
-                'touch-action': 'manipulation',
+    initContainer(canvas3dContext?: Canvas3DContext) {
+        if (this.canvasContainer) return true;
+
+        const container = document.createElement('div');
+        Object.assign(container.style, {
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            right: 0,
+            bottom: 0,
+            '-webkit-user-select': 'none',
+            'user-select': 'none',
+            '-webkit-tap-highlight-color': 'rgba(0,0,0,0)',
+            '-webkit-touch-callout': 'none',
+            'touch-action': 'manipulation',
+        });
+        let canvas = canvas3dContext?.canvas;
+        if (!canvas) {
+            canvas = document.createElement('canvas');
+            Object.assign(canvas.style, {
+                'background-image': 'linear-gradient(45deg, lightgrey 25%, transparent 25%, transparent 75%, lightgrey 75%, lightgrey), linear-gradient(45deg, lightgrey 25%, transparent 25%, transparent 75%, lightgrey 75%, lightgrey)',
+                'background-size': '60px 60px',
+                'background-position': '0 0, 30px 30px'
             });
-            let canvas = canvas3dContext?.canvas;
-            if (!canvas) {
-                canvas = document.createElement('canvas');
-                Object.assign(canvas.style, {
-                    'background-image': 'linear-gradient(45deg, lightgrey 25%, transparent 25%, transparent 75%, lightgrey 75%, lightgrey), linear-gradient(45deg, lightgrey 25%, transparent 25%, transparent 75%, lightgrey 75%, lightgrey)',
-                    'background-size': '60px 60px',
-                    'background-position': '0 0, 30px 30px'
-                });
-                container.appendChild(canvas);
-            }
-            if (!this.initViewer(canvas, container, canvas3dContext)) {
-                return false;
-            }
-            this.canvasContainer = container;
+            container.appendChild(canvas);
+        }
+        if (!this.initViewer(canvas, container, canvas3dContext)) {
+            return false;
         }
+        this.canvasContainer = container;
+        return true;
+    }
+
+    mount(target: HTMLElement) {
+        if (this.disposed) throw new Error('Cannot mount a disposed context');
+
+        if (!this.initContainer()) return false;
 
-        if (this.canvasContainer.parentElement !== target) {
-            this.canvasContainer.parentElement?.removeChild(this.canvasContainer);
+        if (this.canvasContainer!.parentElement !== target) {
+            this.canvasContainer!.parentElement?.removeChild(this.canvasContainer!);
         }
 
-        target.appendChild(this.canvasContainer);
+        target.appendChild(this.canvasContainer!);
         this.handleResize();
         return true;
     }
@@ -279,10 +290,12 @@ export class PluginContext {
 
             this.handleResize();
 
+            Scheduler.setImmediate(() => this.initCanvas3dPromiseCallbacks[0]());
             return true;
         } catch (e) {
             this.log.error('' + e);
             console.error(e);
+            Scheduler.setImmediate(() => this.initCanvas3dPromiseCallbacks[1](e));
             return false;
         }
     }