mol-plugin: createPluginAsync, initial Canvas3DProps in PluginSpec

src/apps/viewer/index.ts

@@ -92,7 +92,7 @@ export class Viewer {
             },
             components: {
                 ...DefaultPluginSpec.components,
-                remoteState: o.layoutShowRemoteState ? 'default' : 'none',
+                remoteState: o.layoutShowRemoteState ? 'default' : 'none'
             },
             config: [
                 [PluginConfig.Viewport.ShowExpand, o.viewportShowExpand],

src/mol-canvas3d/canvas3d.ts

@@ -66,6 +66,7 @@ export const Canvas3DParams = {
 };
 export const DefaultCanvas3DParams = PD.getDefaultValues(Canvas3DParams);
 export type Canvas3DProps = PD.Values<typeof Canvas3DParams>
+export type PartialCanvas3DProps = { [K in keyof Canvas3DProps]?: Partial<Canvas3DProps[K]> }
 
 export { Canvas3D };
 
@@ -97,7 +98,7 @@ interface Canvas3D {
     readonly camera: Camera
     readonly boundingSphere: Readonly<Sphere3D>
     getPixelData(variant: GraphicsRenderVariant): PixelData
-    setProps(props: Partial<Canvas3DProps> | ((old: Canvas3DProps) => Partial<Canvas3DProps> | void)): void
+    setProps(props: PartialCanvas3DProps | ((old: Canvas3DProps) => Partial<Canvas3DProps> | void)): void
     getImagePass(props: Partial<ImageProps>): ImagePass
 
     /** Returns a copy of the current Canvas3D instance props */
@@ -530,7 +531,7 @@ namespace Canvas3D {
             didDraw,
             reprCount,
             setProps: (properties) => {
-                const props: Partial<Canvas3DProps> = typeof properties === 'function'
+                const props: PartialCanvas3DProps = typeof properties === 'function'
                     ? produce(getProps(), properties)
                     : properties;
 
@@ -538,7 +539,7 @@ namespace Canvas3D {
                 if (props.camera && props.camera.mode !== undefined && props.camera.mode !== camera.state.mode) {
                     cameraState.mode = props.camera.mode;
                 }
-                if (props.cameraFog !== undefined) {
+                if (props.cameraFog !== undefined && props.cameraFog.params) {
                     const newFog = props.cameraFog.name === 'on' ? props.cameraFog.params.intensity : 0;
                     if (newFog !== camera.state.fog) cameraState.fog = newFog;
                 }

src/mol-plugin-state/manager/loci-label.ts

@@ -22,6 +22,12 @@ export type LociLabelProvider = {
 export class LociLabelManager {
     providers: LociLabelProvider[] = [];
 
+    clearProviders() {
+        this.providers = [];
+        this.isDirty = true;
+        this.showLabels();
+    }
+
     addProvider(provider: LociLabelProvider) {
         this.providers.push(provider);
         this.providers.sort((a, b) => (b.priority || 0) - (a.priority || 0));

src/mol-plugin/context.ts

@@ -182,8 +182,7 @@ export class PluginContext {
 
             (this.canvas3d as Canvas3D) = Canvas3D.fromCanvas(canvas);
             this.canvas3dInit.next(true);
-            const renderer = this.canvas3d!.props.renderer;
-            PluginCommands.Canvas3D.SetSettings(this, { settings: { renderer: { ...renderer, backgroundColor: Color(0xFCFBF9) } } });
+            this.canvas3d?.setProps(this.spec.components?.viewport?.canvas3d || { renderer: { backgroundColor: Color(0xFCFBF9) } });
             this.canvas3d!.animate();
             (this.helpers.viewportScreenshot as ViewportScreenshotHelper) = new ViewportScreenshotHelper(this);
             return true;
@@ -346,29 +345,31 @@ export class PluginContext {
         }
     }
 
-    constructor(public spec: PluginSpec) {
-        // the reason for this is that sometimes, transform params get modified inline (i.e. palette.valueLabel)
-        // and freezing the params object causes "read-only exception"
-        // TODO: is this the best place to do it?
-        setAutoFreeze(false);
-
+    async init() {
         this.events.log.subscribe(e => this.log.entries = this.log.entries.push(e));
 
         this.initBehaviorEvents();
         this.initBuiltInBehavior();
 
-        this.initBehaviors();
+        (this.managers.interactivity as InteractivityManager) = new InteractivityManager(this);
+        (this.managers.lociLabels as LociLabelManager) = new LociLabelManager(this);
+        (this.builders.structure as StructureBuilder) = new StructureBuilder(this);
+
         this.initDataActions();
         this.initAnimations();
         this.initCustomParamEditors();
 
-        (this.managers.interactivity as InteractivityManager) = new InteractivityManager(this);
-        (this.managers.lociLabels as LociLabelManager) = new LociLabelManager(this);
-
-        (this.builders.structure as StructureBuilder) = new StructureBuilder(this);
+        await this.initBehaviors();
 
         this.log.message(`Mol* Plugin ${PLUGIN_VERSION} [${PLUGIN_VERSION_DATE.toLocaleString()}]`);
         if (!isProductionMode) this.log.message(`Development mode enabled`);
         if (isDebugMode) this.log.message(`Debug mode enabled`);
     }
+
+    constructor(public spec: PluginSpec) {
+        // the reason for this is that sometimes, transform params get modified inline (i.e. palette.valueLabel)
+        // and freezing the params object causes "read-only exception"
+        // TODO: is this the best place to do it?
+        setAutoFreeze(false);
+    }
 }

src/mol-plugin/index.ts

@@ -94,6 +94,16 @@ export const DefaultPluginSpec: PluginSpec = {
 
 export function createPlugin(target: HTMLElement, spec?: PluginSpec): PluginContext {
     const ctx = new PluginContext(spec || DefaultPluginSpec);
+    ctx.init();
     ReactDOM.render(React.createElement(Plugin, { plugin: ctx }), target);
     return ctx;
+}
+
+/** Returns the instance of the plugin after all behaviors have been initialized */
+export async function createPluginAsync(target: HTMLElement, spec?: PluginSpec) {
+    const ctx = new PluginContext(spec || DefaultPluginSpec);
+    const init = ctx.init();
+    ReactDOM.render(React.createElement(Plugin, { plugin: ctx }), target);
+    await init;
+    return ctx;
 }

src/mol-plugin/spec.ts

@@ -10,6 +10,7 @@ import { StateTransformParameters } from '../mol-plugin-ui/state/common';
 import { PluginLayoutStateProps } from './layout';
 import { PluginStateAnimation } from '../mol-plugin-state/animation/model';
 import { PluginConfigItem } from './config';
+import { PartialCanvas3DProps } from '../mol-canvas3d/canvas3d';
 
 export { PluginSpec };
 
@@ -27,7 +28,8 @@ interface PluginSpec {
         structureTools?: React.ComponentClass,
         viewport?: {
             view?: React.ComponentClass,
-            controls?: React.ComponentClass
+            controls?: React.ComponentClass,
+            canvas3d?: PartialCanvas3DProps
         }
     },
     config?: [PluginConfigItem, unknown][]