molstar 3.0.0-dev.3 → 3.0.0-dev.7

package/lib/apps/docking-viewer/index.d.ts

@@ -14,7 +14,8 @@ export { setDebugMode, setProductionMode } from '../../mol-util/debug';
 export { Viewer as DockingViewer };
 declare class Viewer {
     plugin: PluginUIContext;
-    constructor(elementOrId: string | HTMLElement, colors?: Color[], showButtons?: boolean);
+    constructor(plugin: PluginUIContext);
+    static create(elementOrId: string | HTMLElement, colors?: Color[], showButtons?: boolean): Promise<Viewer>;
     loadStructuresFromUrlsAndMerge(sources: {
         url: string;
         format: BuiltInTrajectoryFormat;

package/lib/apps/docking-viewer/index.html

@@ -19,19 +19,19 @@
         <div id="app"></div>
         <script type="text/javascript" src="./molstar.js"></script>
         <script type="text/javascript">
-            var viewer = new DockingViewer('app', [0x33DD22, 0x1133EE], true);
-
             function getParam(name, regex) {
                 var r = new RegExp(name + '=' + '(' + regex + ')[&]?', 'i');
                 return decodeURIComponent(((window.location.search || '').match(r) || [])[1] || '');
             }
-            var pdbqt = getParam('pdbqt', '[^&]+').trim();
-            var mol2 = getParam('mol2', '[^&]+').trim();
+            var pdbqt = getParam('pdbqt', '[^&]+').trim() || '../../examples/ace2.pdbqt';
+            var mol2 = getParam('mol2', '[^&]+').trim() || '../../examples/ace2-hit.mol2';
 
-            viewer.loadStructuresFromUrlsAndMerge([
-                { url: pdbqt, format: 'pdbqt' },
-                { url: mol2, format: 'mol2' }
-            ]);
+            DockingViewer.create('app', [0x33DD22, 0x1133EE], true).then(viewer => {
+                viewer.loadStructuresFromUrlsAndMerge([
+                    { url: pdbqt, format: 'pdbqt' },
+                    { url: mol2, format: 'mol2' }
+                ]);
+            });
         </script>
     </body>
 </html>

package/lib/apps/docking-viewer/index.js

@@ -7,7 +7,7 @@
 import { __assign, __awaiter, __generator } from "tslib";
 import { Structure } from '../../mol-model/structure';
 import { PluginStateObject as PSO, PluginStateTransform } from '../../mol-plugin-state/objects';
-import { createPlugin } from '../../mol-plugin-ui';
+import { createPluginUI } from '../../mol-plugin-ui';
 import { DefaultPluginUISpec } from '../../mol-plugin-ui/spec';
 import { PluginBehaviors } from '../../mol-plugin/behavior';
 import { PluginCommands } from '../../mol-plugin/commands';
@@ -46,82 +46,95 @@ var DefaultViewerOptions = {
     emdbProvider: PluginConfig.Download.DefaultEmdbProvider.defaultValue,
 };
 var Viewer = /** @class */ (function () {
-    function Viewer(elementOrId, colors, showButtons) {
-        var _this = this;
+    function Viewer(plugin) {
+        this.plugin = plugin;
+    }
+    Viewer.create = function (elementOrId, colors, showButtons) {
+        var _a;
         if (colors === void 0) { colors = [Color(0x992211), Color(0xDDDDDD)]; }
         if (showButtons === void 0) { showButtons = true; }
-        var _a;
-        var o = __assign(__assign({}, DefaultViewerOptions), {
-            layoutIsExpanded: false,
-            layoutShowControls: false,
-            layoutShowRemoteState: false,
-            layoutShowSequence: true,
-            layoutShowLog: false,
-            layoutShowLeftPanel: true,
-            viewportShowExpand: true,
-            viewportShowControls: false,
-            viewportShowSettings: false,
-            viewportShowSelectionMode: false,
-            viewportShowAnimation: false,
-        });
-        var defaultSpec = DefaultPluginUISpec();
-        var spec = {
-            actions: defaultSpec.actions,
-            behaviors: [
-                PluginSpec.Behavior(PluginBehaviors.Representation.HighlightLoci, { mark: false }),
-                PluginSpec.Behavior(PluginBehaviors.Representation.DefaultLociLabelProvider),
-                PluginSpec.Behavior(PluginBehaviors.Camera.FocusLoci),
-                PluginSpec.Behavior(PluginBehaviors.CustomProps.StructureInfo),
-                PluginSpec.Behavior(PluginBehaviors.CustomProps.Interactions),
-                PluginSpec.Behavior(PluginBehaviors.CustomProps.SecondaryStructure),
-            ],
-            animations: defaultSpec.animations,
-            customParamEditors: defaultSpec.customParamEditors,
-            layout: {
-                initial: {
-                    isExpanded: o.layoutIsExpanded,
-                    showControls: o.layoutShowControls,
-                    controlsDisplay: o.layoutControlsDisplay,
-                },
-            },
-            components: __assign(__assign({}, defaultSpec.components), { controls: __assign(__assign({}, (_a = defaultSpec.components) === null || _a === void 0 ? void 0 : _a.controls), { top: o.layoutShowSequence ? undefined : 'none', bottom: o.layoutShowLog ? undefined : 'none', left: o.layoutShowLeftPanel ? undefined : 'none' }), remoteState: o.layoutShowRemoteState ? 'default' : 'none', viewport: {
-                    view: ViewportComponent
-                } }),
-            config: [
-                [PluginConfig.Viewport.ShowExpand, o.viewportShowExpand],
-                [PluginConfig.Viewport.ShowControls, o.viewportShowControls],
-                [PluginConfig.Viewport.ShowSettings, o.viewportShowSettings],
-                [PluginConfig.Viewport.ShowSelectionMode, o.viewportShowSelectionMode],
-                [PluginConfig.Viewport.ShowAnimation, o.viewportShowAnimation],
-                [PluginConfig.State.DefaultServer, o.pluginStateServer],
-                [PluginConfig.State.CurrentServer, o.pluginStateServer],
-                [PluginConfig.VolumeStreaming.DefaultServer, o.volumeStreamingServer],
-                [PluginConfig.Download.DefaultPdbProvider, o.pdbProvider],
-                [PluginConfig.Download.DefaultEmdbProvider, o.emdbProvider],
-                [ShowButtons, showButtons]
-            ]
-        };
-        var element = typeof elementOrId === 'string'
-            ? document.getElementById(elementOrId)
-            : elementOrId;
-        if (!element)
-            throw new Error("Could not get element with id '".concat(elementOrId, "'"));
-        this.plugin = createPlugin(element, spec);
-        this.plugin.customState = {
-            colorPalette: {
-                name: 'colors',
-                params: { list: { colors: colors } }
-            }
-        };
-        this.plugin.behaviors.canvas3d.initialized.subscribe(function (v) {
-            if (v) {
-                PluginCommands.Canvas3D.SetSettings(_this.plugin, { settings: {
-                        renderer: __assign(__assign({}, _this.plugin.canvas3d.props.renderer), { backgroundColor: ColorNames.white }),
-                        camera: __assign(__assign({}, _this.plugin.canvas3d.props.camera), { helper: { axes: { name: 'off', params: {} } } })
-                    } });
-            }
+        return __awaiter(this, void 0, void 0, function () {
+            var o, defaultSpec, spec, element, plugin;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        o = __assign(__assign({}, DefaultViewerOptions), {
+                            layoutIsExpanded: false,
+                            layoutShowControls: false,
+                            layoutShowRemoteState: false,
+                            layoutShowSequence: true,
+                            layoutShowLog: false,
+                            layoutShowLeftPanel: true,
+                            viewportShowExpand: true,
+                            viewportShowControls: false,
+                            viewportShowSettings: false,
+                            viewportShowSelectionMode: false,
+                            viewportShowAnimation: false,
+                        });
+                        defaultSpec = DefaultPluginUISpec();
+                        spec = {
+                            actions: defaultSpec.actions,
+                            behaviors: [
+                                PluginSpec.Behavior(PluginBehaviors.Representation.HighlightLoci, { mark: false }),
+                                PluginSpec.Behavior(PluginBehaviors.Representation.DefaultLociLabelProvider),
+                                PluginSpec.Behavior(PluginBehaviors.Camera.FocusLoci),
+                                PluginSpec.Behavior(PluginBehaviors.CustomProps.StructureInfo),
+                                PluginSpec.Behavior(PluginBehaviors.CustomProps.Interactions),
+                                PluginSpec.Behavior(PluginBehaviors.CustomProps.SecondaryStructure),
+                            ],
+                            animations: defaultSpec.animations,
+                            customParamEditors: defaultSpec.customParamEditors,
+                            layout: {
+                                initial: {
+                                    isExpanded: o.layoutIsExpanded,
+                                    showControls: o.layoutShowControls,
+                                    controlsDisplay: o.layoutControlsDisplay,
+                                },
+                            },
+                            components: __assign(__assign({}, defaultSpec.components), { controls: __assign(__assign({}, (_a = defaultSpec.components) === null || _a === void 0 ? void 0 : _a.controls), { top: o.layoutShowSequence ? undefined : 'none', bottom: o.layoutShowLog ? undefined : 'none', left: o.layoutShowLeftPanel ? undefined : 'none' }), remoteState: o.layoutShowRemoteState ? 'default' : 'none', viewport: {
+                                    view: ViewportComponent
+                                } }),
+                            config: [
+                                [PluginConfig.Viewport.ShowExpand, o.viewportShowExpand],
+                                [PluginConfig.Viewport.ShowControls, o.viewportShowControls],
+                                [PluginConfig.Viewport.ShowSettings, o.viewportShowSettings],
+                                [PluginConfig.Viewport.ShowSelectionMode, o.viewportShowSelectionMode],
+                                [PluginConfig.Viewport.ShowAnimation, o.viewportShowAnimation],
+                                [PluginConfig.State.DefaultServer, o.pluginStateServer],
+                                [PluginConfig.State.CurrentServer, o.pluginStateServer],
+                                [PluginConfig.VolumeStreaming.DefaultServer, o.volumeStreamingServer],
+                                [PluginConfig.Download.DefaultPdbProvider, o.pdbProvider],
+                                [PluginConfig.Download.DefaultEmdbProvider, o.emdbProvider],
+                                [ShowButtons, showButtons]
+                            ]
+                        };
+                        element = typeof elementOrId === 'string'
+                            ? document.getElementById(elementOrId)
+                            : elementOrId;
+                        if (!element)
+                            throw new Error("Could not get element with id '".concat(elementOrId, "'"));
+                        return [4 /*yield*/, createPluginUI(element, spec)];
+                    case 1:
+                        plugin = _b.sent();
+                        plugin.customState = {
+                            colorPalette: {
+                                name: 'colors',
+                                params: { list: { colors: colors } }
+                            }
+                        };
+                        plugin.behaviors.canvas3d.initialized.subscribe(function (v) {
+                            if (v) {
+                                PluginCommands.Canvas3D.SetSettings(plugin, { settings: {
+                                        renderer: __assign(__assign({}, plugin.canvas3d.props.renderer), { backgroundColor: ColorNames.white }),
+                                        camera: __assign(__assign({}, plugin.canvas3d.props.camera), { helper: { axes: { name: 'off', params: {} } } })
+                                    } });
+                            }
+                        });
+                        return [2 /*return*/, new Viewer(plugin)];
+                }
+            });
         });
-    }
+    };
     Viewer.prototype.loadStructuresFromUrlsAndMerge = function (sources) {
         return __awaiter(this, void 0, void 0, function () {
             var structures, _i, sources_1, _a, url, format, isBinary, data_1, trajectory, model, modelProperties, structure_1, structureProperties_1, dependsOn, data, structure, structureProperties;

package/lib/apps/docking-viewer/viewport.js

@@ -37,7 +37,8 @@ function occlusionStyle(plugin) {
                         blurKernelSize: 13
                     } }, outline: { name: 'on', params: {
                         scale: 1.0,
-                        threshold: 0.33
+                        threshold: 0.33,
+                        color: Color(0x0000),
                     } } })
         } });
 }

package/lib/apps/viewer/embedded.html

@@ -20,7 +20,7 @@
         <div id="app"></div>
         <script type="text/javascript" src="./molstar.js"></script>
         <script type="text/javascript">
-            var viewer = new molstar.Viewer('app', {
+            molstar.Viewer.create('app', {
                 layoutIsExpanded: true,
                 layoutShowControls: false,
                 layoutShowRemoteState: false,
@@ -34,11 +34,11 @@
 
                 pdbProvider: 'rcsb',
                 emdbProvider: 'rcsb',
+            }).then(viewer => {
+                viewer.loadPdb('7bv2');
+                viewer.loadEmdb('EMD-30210', { detail: 6 });
+                // viewer.loadAllModelsOrAssemblyFromUrl('https://cs.litemol.org/5ire/full', 'mmcif', false, { representationParams: { theme: { globalName: 'operator-name' } } })
             });
-            viewer.loadPdb('7bv2');
-            viewer.loadEmdb('EMD-30210', { detail: 6 });            
-
-            // viewer.loadAllModelsOrAssemblyFromUrl('https://cs.litemol.org/5ire/full', 'mmcif', false, { representationParams: { theme: { globalName: 'operator-name' } } })
         </script>
     </body>
 </html>