npm - molstar - Versions diffs - 3.0.1 → 3.0.2 - Mend

molstar 3.0.1 → 3.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1754) hide show

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

@@ -1,37 +1,37 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <meta charset="utf-8" />
-        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-        <title>Mol* Docking Viewer</title>
-        <style>
-            #app {
-                position: absolute;
-                left: 100px;
-                top: 100px;
-                width: 800px;
-                height: 600px;
-            }
-        </style>
-        <link rel="stylesheet" type="text/css" href="molstar.css" />
-    </head>
-    <body>
-        <div id="app"></div>
-        <script type="text/javascript" src="./molstar.js"></script>
-        <script type="text/javascript">
-            function getParam(name, regex) {
-                var r = new RegExp(name + '=' + '(' + regex + ')[&]?', 'i');
-                return decodeURIComponent(((window.location.search || '').match(r) || [])[1] || '');
-            }
-            var pdbqt = getParam('pdbqt', '[^&]+').trim() || '../../examples/ace2.pdbqt';
-            var mol2 = getParam('mol2', '[^&]+').trim() || '../../examples/ace2-hit.mol2';
-            DockingViewer.create('app', [0x33DD22, 0x1133EE], true).then(viewer => {
-                viewer.loadStructuresFromUrlsAndMerge([
-                    { url: pdbqt, format: 'pdbqt' },
-                    { url: mol2, format: 'mol2' }
-                ]);
-            });
-        </script>
-    </body>
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+        <title>Mol* Docking Viewer</title>
+        <style>
+            #app {
+                position: absolute;
+                left: 100px;
+                top: 100px;
+                width: 800px;
+                height: 600px;
+            }
+        </style>
+        <link rel="stylesheet" type="text/css" href="molstar.css" />
+    </head>
+    <body>
+        <div id="app"></div>
+        <script type="text/javascript" src="./molstar.js"></script>
+        <script type="text/javascript">
+            function getParam(name, regex) {
+                var r = new RegExp(name + '=' + '(' + regex + ')[&]?', 'i');
+                return decodeURIComponent(((window.location.search || '').match(r) || [])[1] || '');
+            }
+            var pdbqt = getParam('pdbqt', '[^&]+').trim() || '../../examples/ace2.pdbqt';
+            var mol2 = getParam('mol2', '[^&]+').trim() || '../../examples/ace2-hit.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/viewer/embedded.html CHANGED Viewed

@@ -1,44 +1,44 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <meta charset="utf-8" />
-        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-        <link rel="icon" href="./favicon.ico" type="image/x-icon">
-        <title>Embedded Mol* Viewer</title>
-        <style>
-            #app {
-                position: absolute;
-                left: 100px;
-                top: 100px;
-                width: 800px;
-                height: 600px;
-            }
-        </style>
-        <link rel="stylesheet" type="text/css" href="molstar.css" />
-    </head>
-    <body>
-        <div id="app"></div>
-        <script type="text/javascript" src="./molstar.js"></script>
-        <script type="text/javascript">
-            molstar.Viewer.create('app', {
-                layoutIsExpanded: true,
-                layoutShowControls: false,
-                layoutShowRemoteState: false,
-                layoutShowSequence: true,
-                layoutShowLog: false,
-                layoutShowLeftPanel: true,
-                viewportShowExpand: true,
-                viewportShowSelectionMode: false,
-                viewportShowAnimation: false,
-                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' } } })
-            });
-        </script>
-    </body>
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+        <link rel="icon" href="./favicon.ico" type="image/x-icon">
+        <title>Embedded Mol* Viewer</title>
+        <style>
+            #app {
+                position: absolute;
+                left: 100px;
+                top: 100px;
+                width: 800px;
+                height: 600px;
+            }
+        </style>
+        <link rel="stylesheet" type="text/css" href="molstar.css" />
+    </head>
+    <body>
+        <div id="app"></div>
+        <script type="text/javascript" src="./molstar.js"></script>
+        <script type="text/javascript">
+            molstar.Viewer.create('app', {
+                layoutIsExpanded: true,
+                layoutShowControls: false,
+                layoutShowRemoteState: false,
+                layoutShowSequence: true,
+                layoutShowLog: false,
+                layoutShowLeftPanel: true,
+                viewportShowExpand: true,
+                viewportShowSelectionMode: false,
+                viewportShowAnimation: false,
+                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' } } })
+            });
+        </script>
+    </body>
 </html>

package/lib/apps/viewer/index.html CHANGED Viewed

@@ -1,107 +1,107 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <meta charset="utf-8" />
-        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-        <link rel="icon" href="./favicon.ico" type="image/x-icon">
-        <title>Mol* Viewer</title>
-        <style>
-            * {
-                margin: 0;
-                padding: 0;
-                box-sizing: border-box;
-            }
-            html, body {
-                width: 100%;
-                height: 100%;
-                overflow: hidden;
-            }
-            hr {
-                margin: 10px;
-            }
-            h1, h2, h3, h4, h5 {
-                margin-top: 5px;
-                margin-bottom: 3px;
-            }
-            button {
-                padding: 2px;
-            }
-            #app {
-                position: absolute;
-                left: 100px;
-                top: 100px;
-                width: 800px;
-                height: 600px;
-            }
-        </style>
-        <link rel="stylesheet" type="text/css" href="molstar.css" />
-    </head>
-    <body>
-        <div id="app"></div>
-        <script type="text/javascript" src="./molstar.js"></script>
-        <script type="text/javascript">
-            function getParam(name, regex) {
-                var r = new RegExp(name + '=' + '(' + regex + ')[&]?', 'i');
-                return decodeURIComponent(((window.location.search || '').match(r) || [])[1] || '');
-            }
-            var debugMode = getParam('debug-mode', '[^&]+').trim() === '1';
-            if (debugMode) molstar.setDebugMode(debugMode, debugMode);
-            var hideControls = getParam('hide-controls', '[^&]+').trim() === '1';
-            var collapseLeftPanel = getParam('collapse-left-panel', '[^&]+').trim() === '1';
-            var pdbProvider = getParam('pdb-provider', '[^&]+').trim().toLowerCase();
-            var emdbProvider = getParam('emdb-provider', '[^&]+').trim().toLowerCase();
-            var mapProvider = getParam('map-provider', '[^&]+').trim().toLowerCase();
-            var pixelScale = getParam('pixel-scale', '[^&]+').trim();
-            var pickScale = getParam('pick-scale', '[^&]+').trim();
-            var pickPadding = getParam('pick-padding', '[^&]+').trim();
-            var disableWboit = getParam('disable-wboit', '[^&]+').trim() === '1';
-            var preferWebgl1 = getParam('prefer-webgl1', '[^&]+').trim() === '1' || void 0;
-            molstar.Viewer.create('app', {
-                layoutShowControls: !hideControls,
-                viewportShowExpand: false,
-                collapseLeftPanel: collapseLeftPanel,
-                pdbProvider: pdbProvider || 'pdbe',
-                emdbProvider: emdbProvider || 'pdbe',
-                volumeStreamingServer: (mapProvider || 'pdbe') === 'rcsb'
-                    ? 'https://maps.rcsb.org'
-                    : 'https://www.ebi.ac.uk/pdbe/densities',
-                pixelScale: parseFloat(pixelScale) || 1,
-                pickScale: parseFloat(pickScale) || 0.25,
-                pickPadding: isNaN(parseFloat(pickPadding)) ? 1 : parseFloat(pickPadding),
-                enableWboit: disableWboit ? true : void 0, // use default value if disable-wboit is not set
-                preferWebgl1: preferWebgl1,
-            }).then(viewer => {
-                var snapshotId = getParam('snapshot-id', '[^&]+').trim();
-                if (snapshotId) viewer.setRemoteSnapshot(snapshotId);
-                var snapshotUrl = getParam('snapshot-url', '[^&]+').trim();
-                var snapshotUrlType = getParam('snapshot-url-type', '[^&]+').toLowerCase().trim() || 'molj';
-                if (snapshotUrl && snapshotUrlType) viewer.loadSnapshotFromUrl(snapshotUrl, snapshotUrlType);
-                var structureUrl = getParam('structure-url', '[^&]+').trim();
-                var structureUrlFormat = getParam('structure-url-format', '[a-z]+').toLowerCase().trim();
-                var structureUrlIsBinary = getParam('structure-url-is-binary', '[^&]+').trim() === '1';
-                if (structureUrl) viewer.loadStructureFromUrl(structureUrl, structureUrlFormat, structureUrlIsBinary);
-                var pdb = getParam('pdb', '[^&]+').trim();
-                if (pdb) viewer.loadPdb(pdb);
-                var pdbDev = getParam('pdb-dev', '[^&]+').trim();
-                if (pdbDev) viewer.loadPdbDev(pdbDev);
-                var emdb = getParam('emdb', '[^&]+').trim();
-                if (emdb) viewer.loadEmdb(emdb);
-                var afdb = getParam('afdb', '[^&]+').trim();
-                if (afdb) viewer.loadAlphaFoldDb(afdb);
-                var modelArchive = getParam('model-archive', '[^&]+').trim();
-                if (modelArchive) viewer.loadModelArchive(modelArchive);
-            });
-        </script>
-        <!-- __MOLSTAR_ANALYTICS__ -->
-    </body>
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+        <link rel="icon" href="./favicon.ico" type="image/x-icon">
+        <title>Mol* Viewer</title>
+        <style>
+            * {
+                margin: 0;
+                padding: 0;
+                box-sizing: border-box;
+            }
+            html, body {
+                width: 100%;
+                height: 100%;
+                overflow: hidden;
+            }
+            hr {
+                margin: 10px;
+            }
+            h1, h2, h3, h4, h5 {
+                margin-top: 5px;
+                margin-bottom: 3px;
+            }
+            button {
+                padding: 2px;
+            }
+            #app {
+                position: absolute;
+                left: 100px;
+                top: 100px;
+                width: 800px;
+                height: 600px;
+            }
+        </style>
+        <link rel="stylesheet" type="text/css" href="molstar.css" />
+    </head>
+    <body>
+        <div id="app"></div>
+        <script type="text/javascript" src="./molstar.js"></script>
+        <script type="text/javascript">
+            function getParam(name, regex) {
+                var r = new RegExp(name + '=' + '(' + regex + ')[&]?', 'i');
+                return decodeURIComponent(((window.location.search || '').match(r) || [])[1] || '');
+            }
+            var debugMode = getParam('debug-mode', '[^&]+').trim() === '1';
+            if (debugMode) molstar.setDebugMode(debugMode, debugMode);
+            var hideControls = getParam('hide-controls', '[^&]+').trim() === '1';
+            var collapseLeftPanel = getParam('collapse-left-panel', '[^&]+').trim() === '1';
+            var pdbProvider = getParam('pdb-provider', '[^&]+').trim().toLowerCase();
+            var emdbProvider = getParam('emdb-provider', '[^&]+').trim().toLowerCase();
+            var mapProvider = getParam('map-provider', '[^&]+').trim().toLowerCase();
+            var pixelScale = getParam('pixel-scale', '[^&]+').trim();
+            var pickScale = getParam('pick-scale', '[^&]+').trim();
+            var pickPadding = getParam('pick-padding', '[^&]+').trim();
+            var disableWboit = getParam('disable-wboit', '[^&]+').trim() === '1';
+            var preferWebgl1 = getParam('prefer-webgl1', '[^&]+').trim() === '1' || void 0;
+            molstar.Viewer.create('app', {
+                layoutShowControls: !hideControls,
+                viewportShowExpand: false,
+                collapseLeftPanel: collapseLeftPanel,
+                pdbProvider: pdbProvider || 'pdbe',
+                emdbProvider: emdbProvider || 'pdbe',
+                volumeStreamingServer: (mapProvider || 'pdbe') === 'rcsb'
+                    ? 'https://maps.rcsb.org'
+                    : 'https://www.ebi.ac.uk/pdbe/densities',
+                pixelScale: parseFloat(pixelScale) || 1,
+                pickScale: parseFloat(pickScale) || 0.25,
+                pickPadding: isNaN(parseFloat(pickPadding)) ? 1 : parseFloat(pickPadding),
+                enableWboit: disableWboit ? true : void 0, // use default value if disable-wboit is not set
+                preferWebgl1: preferWebgl1,
+            }).then(viewer => {
+                var snapshotId = getParam('snapshot-id', '[^&]+').trim();
+                if (snapshotId) viewer.setRemoteSnapshot(snapshotId);
+                var snapshotUrl = getParam('snapshot-url', '[^&]+').trim();
+                var snapshotUrlType = getParam('snapshot-url-type', '[^&]+').toLowerCase().trim() || 'molj';
+                if (snapshotUrl && snapshotUrlType) viewer.loadSnapshotFromUrl(snapshotUrl, snapshotUrlType);
+                var structureUrl = getParam('structure-url', '[^&]+').trim();
+                var structureUrlFormat = getParam('structure-url-format', '[a-z]+').toLowerCase().trim();
+                var structureUrlIsBinary = getParam('structure-url-is-binary', '[^&]+').trim() === '1';
+                if (structureUrl) viewer.loadStructureFromUrl(structureUrl, structureUrlFormat, structureUrlIsBinary);
+                var pdb = getParam('pdb', '[^&]+').trim();
+                if (pdb) viewer.loadPdb(pdb);
+                var pdbDev = getParam('pdb-dev', '[^&]+').trim();
+                if (pdbDev) viewer.loadPdbDev(pdbDev);
+                var emdb = getParam('emdb', '[^&]+').trim();
+                if (emdb) viewer.loadEmdb(emdb);
+                var afdb = getParam('afdb', '[^&]+').trim();
+                if (afdb) viewer.loadAlphaFoldDb(afdb);
+                var modelArchive = getParam('model-archive', '[^&]+').trim();
+                if (modelArchive) viewer.loadModelArchive(modelArchive);
+            });
+        </script>
+        <!-- __MOLSTAR_ANALYTICS__ -->
+    </body>
 </html>

package/lib/commonjs/apps/docking-viewer/index.js ADDED Viewed

@@ -0,0 +1,253 @@
+"use strict";
+/**
+ * Copyright (c) 2018-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author David Sehnal <david.sehnal@gmail.com>
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DockingViewer = exports.setProductionMode = exports.setDebugMode = exports.version = void 0;
+var tslib_1 = require("tslib");
+var structure_1 = require("../../mol-model/structure");
+var objects_1 = require("../../mol-plugin-state/objects");
+var mol_plugin_ui_1 = require("../../mol-plugin-ui");
+var spec_1 = require("../../mol-plugin-ui/spec");
+var behavior_1 = require("../../mol-plugin/behavior");
+var commands_1 = require("../../mol-plugin/commands");
+var config_1 = require("../../mol-plugin/config");
+var spec_2 = require("../../mol-plugin/spec");
+var mol_state_1 = require("../../mol-state");
+var mol_task_1 = require("../../mol-task");
+var color_1 = require("../../mol-util/color");
+var names_1 = require("../../mol-util/color/names");
+var param_definition_1 = require("../../mol-util/param-definition");
+require("../../mol-util/polyfill");
+var type_helpers_1 = require("../../mol-util/type-helpers");
+require("./index.html");
+var viewport_1 = require("./viewport");
+require('mol-plugin-ui/skin/light.scss');
+var version_1 = require("../../mol-plugin/version");
+Object.defineProperty(exports, "version", { enumerable: true, get: function () { return version_1.PLUGIN_VERSION; } });
+var debug_1 = require("../../mol-util/debug");
+Object.defineProperty(exports, "setDebugMode", { enumerable: true, get: function () { return debug_1.setDebugMode; } });
+Object.defineProperty(exports, "setProductionMode", { enumerable: true, get: function () { return debug_1.setProductionMode; } });
+var DefaultViewerOptions = {
+    extensions: (0, type_helpers_1.ObjectKeys)({}),
+    layoutIsExpanded: true,
+    layoutShowControls: true,
+    layoutShowRemoteState: true,
+    layoutControlsDisplay: 'reactive',
+    layoutShowSequence: true,
+    layoutShowLog: true,
+    layoutShowLeftPanel: true,
+    viewportShowExpand: config_1.PluginConfig.Viewport.ShowExpand.defaultValue,
+    viewportShowControls: config_1.PluginConfig.Viewport.ShowControls.defaultValue,
+    viewportShowSettings: config_1.PluginConfig.Viewport.ShowSettings.defaultValue,
+    viewportShowSelectionMode: config_1.PluginConfig.Viewport.ShowSelectionMode.defaultValue,
+    viewportShowAnimation: config_1.PluginConfig.Viewport.ShowAnimation.defaultValue,
+    pluginStateServer: config_1.PluginConfig.State.DefaultServer.defaultValue,
+    volumeStreamingServer: config_1.PluginConfig.VolumeStreaming.DefaultServer.defaultValue,
+    pdbProvider: config_1.PluginConfig.Download.DefaultPdbProvider.defaultValue,
+    emdbProvider: config_1.PluginConfig.Download.DefaultEmdbProvider.defaultValue,
+};
+var Viewer = /** @class */ (function () {
+    function Viewer(plugin) {
+        this.plugin = plugin;
+    }
+    Viewer.create = function (elementOrId, colors, showButtons) {
+        var _a;
+        if (colors === void 0) { colors = [(0, color_1.Color)(0x992211), (0, color_1.Color)(0xDDDDDD)]; }
+        if (showButtons === void 0) { showButtons = true; }
+        return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
+            var o, defaultSpec, spec, element, plugin;
+            return (0, tslib_1.__generator)(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        o = (0, tslib_1.__assign)((0, tslib_1.__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 = (0, spec_1.DefaultPluginUISpec)();
+                        spec = {
+                            actions: defaultSpec.actions,
+                            behaviors: [
+                                spec_2.PluginSpec.Behavior(behavior_1.PluginBehaviors.Representation.HighlightLoci, { mark: false }),
+                                spec_2.PluginSpec.Behavior(behavior_1.PluginBehaviors.Representation.DefaultLociLabelProvider),
+                                spec_2.PluginSpec.Behavior(behavior_1.PluginBehaviors.Camera.FocusLoci),
+                                spec_2.PluginSpec.Behavior(behavior_1.PluginBehaviors.CustomProps.StructureInfo),
+                                spec_2.PluginSpec.Behavior(behavior_1.PluginBehaviors.CustomProps.Interactions),
+                                spec_2.PluginSpec.Behavior(behavior_1.PluginBehaviors.CustomProps.SecondaryStructure),
+                            ],
+                            animations: defaultSpec.animations,
+                            customParamEditors: defaultSpec.customParamEditors,
+                            layout: {
+                                initial: {
+                                    isExpanded: o.layoutIsExpanded,
+                                    showControls: o.layoutShowControls,
+                                    controlsDisplay: o.layoutControlsDisplay,
+                                },
+                            },
+                            components: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, defaultSpec.components), { controls: (0, tslib_1.__assign)((0, tslib_1.__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: viewport_1.ViewportComponent
+                                } }),
+                            config: [
+                                [config_1.PluginConfig.Viewport.ShowExpand, o.viewportShowExpand],
+                                [config_1.PluginConfig.Viewport.ShowControls, o.viewportShowControls],
+                                [config_1.PluginConfig.Viewport.ShowSettings, o.viewportShowSettings],
+                                [config_1.PluginConfig.Viewport.ShowSelectionMode, o.viewportShowSelectionMode],
+                                [config_1.PluginConfig.Viewport.ShowAnimation, o.viewportShowAnimation],
+                                [config_1.PluginConfig.State.DefaultServer, o.pluginStateServer],
+                                [config_1.PluginConfig.State.CurrentServer, o.pluginStateServer],
+                                [config_1.PluginConfig.VolumeStreaming.DefaultServer, o.volumeStreamingServer],
+                                [config_1.PluginConfig.Download.DefaultPdbProvider, o.pdbProvider],
+                                [config_1.PluginConfig.Download.DefaultEmdbProvider, o.emdbProvider],
+                                [viewport_1.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*/, (0, mol_plugin_ui_1.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) {
+                                commands_1.PluginCommands.Canvas3D.SetSettings(plugin, { settings: {
+                                        renderer: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, plugin.canvas3d.props.renderer), { backgroundColor: names_1.ColorNames.white }),
+                                        camera: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, plugin.canvas3d.props.camera), { helper: { axes: { name: 'off', params: {} } } })
+                                    } });
+                            }
+                        });
+                        return [2 /*return*/, new Viewer(plugin)];
+                }
+            });
+        });
+    };
+    Viewer.prototype.loadStructuresFromUrlsAndMerge = function (sources) {
+        return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
+            var structures, _i, sources_1, _a, url, format, isBinary, data_1, trajectory, model, modelProperties, structure_2, structureProperties_1, dependsOn, data, structure, structureProperties;
+            var _this = this;
+            return (0, tslib_1.__generator)(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        structures = [];
+                        _i = 0, sources_1 = sources;
+                        _b.label = 1;
+                    case 1:
+                        if (!(_i < sources_1.length)) return [3 /*break*/, 9];
+                        _a = sources_1[_i], url = _a.url, format = _a.format, isBinary = _a.isBinary;
+                        return [4 /*yield*/, this.plugin.builders.data.download({ url: url, isBinary: isBinary })];
+                    case 2:
+                        data_1 = _b.sent();
+                        return [4 /*yield*/, this.plugin.builders.structure.parseTrajectory(data_1, format)];
+                    case 3:
+                        trajectory = _b.sent();
+                        return [4 /*yield*/, this.plugin.builders.structure.createModel(trajectory)];
+                    case 4:
+                        model = _b.sent();
+                        return [4 /*yield*/, this.plugin.builders.structure.insertModelProperties(model)];
+                    case 5:
+                        modelProperties = _b.sent();
+                        return [4 /*yield*/, this.plugin.builders.structure.createStructure(modelProperties || model)];
+                    case 6:
+                        structure_2 = _b.sent();
+                        return [4 /*yield*/, this.plugin.builders.structure.insertStructureProperties(structure_2)];
+                    case 7:
+                        structureProperties_1 = _b.sent();
+                        structures.push({ ref: (structureProperties_1 === null || structureProperties_1 === void 0 ? void 0 : structureProperties_1.ref) || structure_2.ref });
+                        _b.label = 8;
+                    case 8:
+                        _i++;
+                        return [3 /*break*/, 1];
+                    case 9:
+                        // remove current structuresfrom hierarchy as they will be merged
+                        // TODO only works with using loadStructuresFromUrlsAndMerge once
+                        //      need some more API metho to work with the hierarchy
+                        this.plugin.managers.structure.hierarchy.updateCurrent(this.plugin.managers.structure.hierarchy.current.structures, 'remove');
+                        dependsOn = structures.map(function (_a) {
+                            var ref = _a.ref;
+                            return ref;
+                        });
+                        data = this.plugin.state.data.build().toRoot().apply(MergeStructures, { structures: structures }, { dependsOn: dependsOn });
+                        return [4 /*yield*/, data.commit()];
+                    case 10:
+                        structure = _b.sent();
+                        return [4 /*yield*/, this.plugin.builders.structure.insertStructureProperties(structure)];
+                    case 11:
+                        structureProperties = _b.sent();
+                        this.plugin.behaviors.canvas3d.initialized.subscribe(function (v) { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
+                            return (0, tslib_1.__generator)(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, this.plugin.builders.structure.representation.applyPreset(structureProperties || structure, viewport_1.StructurePreset)];
+                                    case 1:
+                                        _a.sent();
+                                        return [2 /*return*/];
+                                }
+                            });
+                        }); });
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    return Viewer;
+}());
+exports.DockingViewer = Viewer;
+var MergeStructures = objects_1.PluginStateTransform.BuiltIn({
+    name: 'merge-structures',
+    display: { name: 'Merge Structures', description: 'Merge Structure' },
+    from: objects_1.PluginStateObject.Root,
+    to: objects_1.PluginStateObject.Molecule.Structure,
+    params: {
+        structures: param_definition_1.ParamDefinition.ObjectList({
+            ref: param_definition_1.ParamDefinition.Text('')
+        }, function (_a) {
+            var ref = _a.ref;
+            return ref;
+        }, { isHidden: true })
+    }
+})({
+    apply: function (_a) {
+        var _this = this;
+        var params = _a.params, dependencies = _a.dependencies;
+        return mol_task_1.Task.create('Merge Structures', function (ctx) { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
+            var first, builder, _i, _a, ref, s, _b, _c, unit, structure;
+            return (0, tslib_1.__generator)(this, function (_d) {
+                if (params.structures.length === 0)
+                    return [2 /*return*/, mol_state_1.StateObject.Null];
+                first = dependencies[params.structures[0].ref].data;
+                builder = structure_1.Structure.Builder({ masterModel: first.models[0] });
+                for (_i = 0, _a = params.structures; _i < _a.length; _i++) {
+                    ref = _a[_i].ref;
+                    s = dependencies[ref].data;
+                    for (_b = 0, _c = s.units; _b < _c.length; _b++) {
+                        unit = _c[_b];
+                        // TODO invariantId
+                        builder.addUnit(unit.kind, unit.model, unit.conformation.operator, unit.elements, unit.traits);
+                    }
+                }
+                structure = builder.getStructure();
+                return [2 /*return*/, new objects_1.PluginStateObject.Molecule.Structure(structure, { label: 'Merged Structure' })];
+            });
+        }); });
+    }
+});
+window.DockingViewer = Viewer;
+//# sourceMappingURL=index.js.map

package/lib/commonjs/apps/docking-viewer/viewport.d.ts CHANGED Viewed

@@ -9,7 +9,7 @@ import { StructureRef } from '../../mol-plugin-state/manager/structure/hierarchy
 import { PluginUIComponent } from '../../mol-plugin-ui/base';
 export declare const StructurePreset: StructureRepresentationPresetProvider<{
     ignoreHydrogens: boolean | undefined;
-    quality: "custom" | "auto" | "highest" | "higher" | "high" | "medium" | "low" | "lower" | "lowest" | undefined;
+    quality: "auto" | "medium" | "high" | "low" | "custom" | "highest" | "higher" | "lower" | "lowest" | undefined;
     theme: import("../../mol-util/param-definition").ParamDefinition.Normalize<{
         globalName: any;
         carbonColor: any;
@@ -31,7 +31,7 @@ export declare const StructurePreset: StructureRepresentationPresetProvider<{
 }>;
 export declare const IllustrativePreset: StructureRepresentationPresetProvider<{
     ignoreHydrogens: boolean | undefined;
-    quality: "custom" | "auto" | "highest" | "higher" | "high" | "medium" | "low" | "lower" | "lowest" | undefined;
+    quality: "auto" | "medium" | "high" | "low" | "custom" | "highest" | "higher" | "lower" | "lowest" | undefined;
     theme: import("../../mol-util/param-definition").ParamDefinition.Normalize<{
         globalName: any;
         carbonColor: any;