pdbe-molstar 3.7.0 → 3.7.1

package/lib/ui/_layout.js

@@ -0,0 +1,162 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Layout = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const file_1 = require("molstar/lib/mol-plugin-state/actions/file");
+const base_1 = require("molstar/lib/mol-plugin-ui/base");
+const use_behavior_1 = require("molstar/lib/mol-plugin-ui/hooks/use-behavior");
+const left_panel_1 = require("molstar/lib/mol-plugin-ui/left-panel");
+const plugin_1 = require("molstar/lib/mol-plugin-ui/plugin");
+const sequence_1 = require("molstar/lib/mol-plugin-ui/sequence");
+const task_1 = require("molstar/lib/mol-plugin-ui/task");
+const commands_1 = require("molstar/lib/mol-plugin/commands");
+const assets_1 = require("molstar/lib/mol-util/assets");
+const rxjs_1 = require("rxjs");
+/** Copy of `Layout` in molstar/src/mol-plugin-ui/plugin.tsx, TODO export from core Molstar and remove here */
+class Layout extends base_1.PluginUIComponent {
+    constructor() {
+        super(...arguments);
+        this.onDrop = (ev) => {
+            ev.preventDefault();
+            const files = [];
+            if (ev.dataTransfer.items) {
+                // Use DataTransferItemList interface to access the file(s)
+                for (let i = 0; i < ev.dataTransfer.items.length; i++) { // eslint-disable-line @typescript-eslint/prefer-for-of
+                    if (ev.dataTransfer.items[i].kind !== 'file')
+                        continue;
+                    const file = ev.dataTransfer.items[i].getAsFile();
+                    if (file)
+                        files.push(file);
+                }
+            }
+            else {
+                for (let i = 0; i < ev.dataTransfer.files.length; i++) { // eslint-disable-line @typescript-eslint/prefer-for-of
+                    const file = ev.dataTransfer.files[i];
+                    if (file)
+                        files.push(file);
+                }
+            }
+            const sessions = files.filter(f => {
+                const fn = f.name.toLowerCase();
+                return fn.endsWith('.molx') || fn.endsWith('.molj');
+            });
+            if (sessions.length > 0) {
+                commands_1.PluginCommands.State.Snapshots.OpenFile(this.plugin, { file: sessions[0] });
+            }
+            else {
+                this.plugin.runTask(this.plugin.state.data.applyAction(file_1.OpenFiles, {
+                    files: files.map(f => assets_1.Asset.File(f)),
+                    format: { name: 'auto', params: {} },
+                    visuals: true,
+                }));
+            }
+        };
+        this.onDragOver = (ev) => {
+            ev.preventDefault();
+        };
+        this.showDragOverlay = new rxjs_1.BehaviorSubject(false);
+        this.onDragEnter = (ev) => {
+            let hasFile = false;
+            if (ev.dataTransfer.items && ev.dataTransfer.items.length > 0) {
+                for (let i = 0; i < ev.dataTransfer.items.length; i++) { // eslint-disable-line @typescript-eslint/prefer-for-of
+                    if (ev.dataTransfer.items[i].kind !== 'file')
+                        continue;
+                    hasFile = true;
+                    break;
+                }
+            }
+            else {
+                for (let i = 0; i < ev.dataTransfer.types.length; i++) { // eslint-disable-line @typescript-eslint/prefer-for-of
+                    if (ev.dataTransfer.types[i] !== 'Files')
+                        continue;
+                    hasFile = true;
+                    break;
+                }
+            }
+            if (hasFile) {
+                this.showDragOverlay.next(true);
+            }
+        };
+    }
+    componentDidMount() {
+        this.subscribe(this.plugin.layout.events.updated, () => this.forceUpdate());
+    }
+    region(kind, Element) {
+        return (0, jsx_runtime_1.jsx)("div", { className: `msp-layout-region msp-layout-${kind}`, children: (0, jsx_runtime_1.jsx)("div", { className: 'msp-layout-static', children: Element ? (0, jsx_runtime_1.jsx)(Element, {}) : null }) });
+    }
+    get layoutVisibilityClassName() {
+        var _a, _b;
+        const layout = this.plugin.layout.state;
+        const controls = (_b = (_a = this.plugin.spec.components) === null || _a === void 0 ? void 0 : _a.controls) !== null && _b !== void 0 ? _b : {};
+        const classList = [];
+        if (controls.top === 'none' || !layout.showControls || layout.regionState.top === 'hidden') {
+            classList.push('msp-layout-hide-top');
+        }
+        if (controls.left === 'none' || !layout.showControls || layout.regionState.left === 'hidden') {
+            classList.push('msp-layout-hide-left');
+        }
+        else if (layout.regionState.left === 'collapsed') {
+            classList.push('msp-layout-collapse-left');
+        }
+        if (controls.right === 'none' || !layout.showControls || layout.regionState.right === 'hidden') {
+            classList.push('msp-layout-hide-right');
+        }
+        if (controls.bottom === 'none' || !layout.showControls || layout.regionState.bottom === 'hidden') {
+            classList.push('msp-layout-hide-bottom');
+        }
+        return classList.join(' ');
+    }
+    get layoutClassName() {
+        const layout = this.plugin.layout.state;
+        const classList = ['msp-plugin-content'];
+        if (layout.isExpanded) {
+            classList.push('msp-layout-expanded');
+        }
+        else {
+            classList.push('msp-layout-standard', `msp-layout-standard-${layout.controlsDisplay}`);
+        }
+        return classList.join(' ');
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const layout = this.plugin.layout.state;
+        const controls = ((_a = this.plugin.spec.components) === null || _a === void 0 ? void 0 : _a.controls) || {};
+        const viewport = ((_c = (_b = this.plugin.spec.components) === null || _b === void 0 ? void 0 : _b.viewport) === null || _c === void 0 ? void 0 : _c.view) || plugin_1.DefaultViewport;
+        const sequenceView = ((_e = (_d = this.plugin.spec.components) === null || _d === void 0 ? void 0 : _d.sequenceViewer) === null || _e === void 0 ? void 0 : _e.view) || sequence_1.SequenceView;
+        return (0, jsx_runtime_1.jsx)("div", { className: 'msp-plugin', children: (0, jsx_runtime_1.jsxs)("div", { className: this.layoutClassName, onDragEnter: this.onDragEnter, children: [(0, jsx_runtime_1.jsxs)("div", { className: this.layoutVisibilityClassName, children: [this.region('main', viewport), layout.showControls && controls.top !== 'none' && this.region('top', controls.top || sequenceView), layout.showControls && controls.left !== 'none' && this.region('left', controls.left || left_panel_1.LeftPanelControls), layout.showControls && controls.right !== 'none' && this.region('right', controls.right || plugin_1.ControlsWrapper), layout.showControls && controls.bottom !== 'none' && this.region('bottom', controls.bottom || plugin_1.Log)] }), !((_f = this.plugin.spec.components) === null || _f === void 0 ? void 0 : _f.hideTaskOverlay) && (0, jsx_runtime_1.jsx)(task_1.OverlayTaskProgress, {}), !((_g = this.plugin.spec.components) === null || _g === void 0 ? void 0 : _g.disableDragOverlay) && (0, jsx_runtime_1.jsx)(DragOverlay, { plugin: this.plugin, showDragOverlay: this.showDragOverlay })] }) });
+    }
+}
+exports.Layout = Layout;
+function dropFiles(ev, plugin, showDragOverlay) {
+    ev.preventDefault();
+    ev.stopPropagation();
+    showDragOverlay.next(false);
+    const files = [];
+    if (ev.dataTransfer.items) {
+        // Use DataTransferItemList interface to access the file(s)
+        for (let i = 0; i < ev.dataTransfer.items.length; i++) { // eslint-disable-line @typescript-eslint/prefer-for-of
+            if (ev.dataTransfer.items[i].kind !== 'file')
+                continue;
+            const file = ev.dataTransfer.items[i].getAsFile();
+            if (file)
+                files.push(file);
+        }
+    }
+    else {
+        for (let i = 0; i < ev.dataTransfer.files.length; i++) { // eslint-disable-line @typescript-eslint/prefer-for-of
+            const file = ev.dataTransfer.files[i];
+            if (file)
+                files.push(file);
+        }
+    }
+    plugin.managers.dragAndDrop.handle(files);
+}
+function DragOverlay({ plugin, showDragOverlay }) {
+    const show = (0, use_behavior_1.useBehavior)(showDragOverlay);
+    const preventDrag = (e) => {
+        e.dataTransfer.dropEffect = 'copy';
+        e.preventDefault();
+        e.stopPropagation();
+    };
+    return (0, jsx_runtime_1.jsx)("div", { className: 'msp-drag-drop-overlay', style: { display: show ? 'flex' : 'none' }, onDragEnter: preventDrag, onDragOver: preventDrag, onDragLeave: () => showDragOverlay.next(false), onDrop: e => dropFiles(e, plugin, showDragOverlay), children: "Load File(s)" });
+}

package/lib/ui/layout-no-controls-unless-expanded.d.ts

@@ -0,0 +1,5 @@
+import { Layout } from './_layout';
+export declare class FullLayoutNoControlsUnlessExpanded extends Layout {
+    componentDidMount(): void;
+    get layoutVisibilityClassName(): string;
+}

package/lib/ui/layout-no-controls-unless-expanded.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FullLayoutNoControlsUnlessExpanded = void 0;
+const config_1 = require("molstar/lib/mol-plugin/config");
+const plugin_custom_state_1 = require("../plugin-custom-state");
+const _layout_1 = require("./_layout");
+class FullLayoutNoControlsUnlessExpanded extends _layout_1.Layout {
+    componentDidMount() {
+        super.componentDidMount();
+        // Hide Toggle Controls button unless expanded:
+        this.subscribe(this.plugin.layout.events.updated, () => {
+            var _a, _b;
+            const isExpanded = this.plugin.layout.state.isExpanded;
+            const hideControlToggle = (_b = (_a = (0, plugin_custom_state_1.PluginCustomState)(this.plugin).initParams) === null || _a === void 0 ? void 0 : _a.hideCanvasControls.includes('controlToggle')) !== null && _b !== void 0 ? _b : false;
+            this.plugin.config.set(config_1.PluginConfig.Viewport.ShowControls, isExpanded && !hideControlToggle);
+        });
+    }
+    get layoutVisibilityClassName() {
+        const classes = super.layoutVisibilityClassName.split(' ');
+        const state = this.plugin.layout.state;
+        if (!state.isExpanded) {
+            if (!classes.includes('msp-layout-hide-top'))
+                classes.push('msp-layout-hide-top');
+            if (!classes.includes('msp-layout-hide-bottom'))
+                classes.push('msp-layout-hide-bottom');
+            if (!classes.includes('msp-layout-hide-left'))
+                classes.push('msp-layout-hide-left');
+            if (!classes.includes('msp-layout-hide-right'))
+                classes.push('msp-layout-hide-right');
+        }
+        return classes.join(' ');
+    }
+}
+exports.FullLayoutNoControlsUnlessExpanded = FullLayoutNoControlsUnlessExpanded;

package/lib/ui/pdbe-viewport-controls.d.ts

@@ -1,5 +1,4 @@
 import { ViewportControls } from 'molstar/lib/mol-plugin-ui/viewport';
 export declare class PDBeViewportControls extends ViewportControls {
-    private isBlack;
     render(): import("react/jsx-runtime").JSX.Element;
 }

package/lib/ui/pdbe-viewport-controls.js

@@ -2,31 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PDBeViewportControls = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const common_1 = require("molstar/lib/mol-plugin-ui/controls/common");
 const viewport_1 = require("molstar/lib/mol-plugin-ui/viewport");
-const names_1 = require("molstar/lib/mol-util/color/names");
-const helpers_1 = require("../helpers");
 const plugin_custom_state_1 = require("../plugin-custom-state");
 class PDBeViewportControls extends viewport_1.ViewportControls {
-    isBlack() {
-        var _a;
-        const bgColor = (_a = (0, plugin_custom_state_1.PluginCustomState)(this.plugin).initParams) === null || _a === void 0 ? void 0 : _a.bgColor;
-        return bgColor !== undefined && (0, helpers_1.normalizeColor)(bgColor) === names_1.ColorNames.black;
-    }
     render() {
         const initParams = (0, plugin_custom_state_1.PluginCustomState)(this.plugin).initParams;
         const showPDBeLink = (initParams === null || initParams === void 0 ? void 0 : initParams.moleculeId) && (initParams === null || initParams === void 0 ? void 0 : initParams.pdbeLink) && !(initParams === null || initParams === void 0 ? void 0 : initParams.superposition);
-        const pdbeLinkColor = this.isBlack() ? '#fff' : '#555';
-        const pdbeLink = {
-            containerStyle: { position: 'absolute', right: '10px', top: '10px', padding: '6px', paddingRight: '3px', paddingLeft: '18px' },
-            bgStyle: { position: 'absolute', height: '32px', width: '54px', marginLeft: '-33px' },
-            style: { display: 'inline-block', fontSize: '14px', color: pdbeLinkColor, borderBottom: 'none', cursor: 'pointer', textDecoration: 'none', position: 'absolute', right: '5px' },
-            pdbeImg: {
-                src: 'https://www.ebi.ac.uk/pdbe/entry/static/images/logos/PDBe/logo_T_64.png',
-                alt: 'PDBe logo',
-                style: { height: '12px', width: '12px', border: 0, position: 'absolute', margin: '4px 0 0 -13px' },
-            },
-        };
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showPDBeLink && (0, jsx_runtime_1.jsxs)("div", { className: 'msp-viewport-controls-buttons', style: pdbeLink.containerStyle, children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-semi-transparent-background', style: pdbeLink.bgStyle }), (0, jsx_runtime_1.jsxs)("a", { className: 'msp-pdbe-link', style: pdbeLink.style, target: "_blank", href: `https://pdbe.org/${initParams.moleculeId}`, children: [(0, jsx_runtime_1.jsx)("img", { src: pdbeLink.pdbeImg.src, alt: pdbeLink.pdbeImg.alt, style: pdbeLink.pdbeImg.style }), initParams.moleculeId] })] }), (0, jsx_runtime_1.jsx)("div", { style: { position: 'absolute', top: showPDBeLink ? (32 + 4) : 0, right: 0 }, children: super.render() })] });
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showPDBeLink &&
+                    (0, jsx_runtime_1.jsx)("div", { className: 'msp-viewport-controls', children: (0, jsx_runtime_1.jsx)("div", { className: 'msp-viewport-controls-buttons', children: (0, jsx_runtime_1.jsxs)("div", { className: 'pdbemolstar-pdbe-link-box', children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-semi-transparent-background' }), (0, jsx_runtime_1.jsx)("a", { target: '_blank', href: `https://pdbe.org/${initParams.moleculeId}`, style: { textDecoration: 'none', color: 'initial' }, children: (0, jsx_runtime_1.jsxs)(common_1.Button, { className: 'msp-btn-link-toggle-on pdbemolstar-pdbe-link', title: 'Go to PDBe Pages', children: [(0, jsx_runtime_1.jsx)("img", { className: 'pdbemolstar-pdbe-logo', alt: 'PDBe logo', src: 'https://www.ebi.ac.uk/pdbe/entry/static/images/logos/PDBe/logo_T_64.png' }), initParams.moleculeId] }) })] }) }) }), (0, jsx_runtime_1.jsx)("div", { className: showPDBeLink ? 'pdbemolstar-viewport-controls-shifted' : 'pdbemolstar-viewport-controls-normal', children: super.render() })] });
     }
 }
 exports.PDBeViewportControls = PDBeViewportControls;

package/lib/ui/split-ui/components.d.ts

@@ -1,5 +1,6 @@
 import { ControlsWrapper, Log } from 'molstar/lib/mol-plugin-ui/plugin';
 import { SequenceView } from 'molstar/lib/mol-plugin-ui/sequence';
+import { FullLayoutNoControlsUnlessExpanded } from '../layout-no-controls-unless-expanded';
 export declare const UIComponents: {
     /** Component containing 3D canvas, button in top left and top right corners, and tooltip box (center panel in default layout). Changes to fullscreen view by "Toggle Expanded Viewport" button, or "expanded" option. */
     readonly PDBeViewport: import("react").ComponentClass<{}, any>;
@@ -13,4 +14,6 @@ export declare const UIComponents: {
     readonly DefaultLeftPanelControls: import("react").ComponentClass<{}, any>;
     /** Component containing right panel controls (contents depend on PDBeMolstar init params (superposition/ligand/default view)) */
     readonly DefaultRightPanelControls: typeof ControlsWrapper;
+    /** Component containing only `PDBeViewport` when not in fullscreen view, but shows full UI layout when in fullscreen view. */
+    readonly FullLayoutNoControlsUnlessExpanded: typeof FullLayoutNoControlsUnlessExpanded;
 };

package/lib/ui/split-ui/components.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.UIComponents = void 0;
 const plugin_1 = require("molstar/lib/mol-plugin-ui/plugin");
 const sequence_1 = require("molstar/lib/mol-plugin-ui/sequence");
+const layout_no_controls_unless_expanded_1 = require("../layout-no-controls-unless-expanded");
 const pdbe_left_panel_1 = require("../left-panel/pdbe-left-panel");
 const pdbe_viewport_1 = require("../pdbe-viewport");
 exports.UIComponents = {
@@ -18,5 +19,7 @@ exports.UIComponents = {
     DefaultLeftPanelControls: pdbe_left_panel_1.DefaultLeftPanelControls,
     /** Component containing right panel controls (contents depend on PDBeMolstar init params (superposition/ligand/default view)) */
     DefaultRightPanelControls: plugin_1.ControlsWrapper,
+    /** Component containing only `PDBeViewport` when not in fullscreen view, but shows full UI layout when in fullscreen view. */
+    FullLayoutNoControlsUnlessExpanded: layout_no_controls_unless_expanded_1.FullLayoutNoControlsUnlessExpanded,
     // TODO add all meaningful components,
 };

package/lib/viewer.d.ts

@@ -232,6 +232,7 @@ export declare class PDBeMolstarPlugin {
         readonly PDBeLeftPanelControls: import("react").ComponentClass<{}, any>;
         readonly DefaultLeftPanelControls: import("react").ComponentClass<{}, any>;
         readonly DefaultRightPanelControls: typeof import("molstar/lib/mol-plugin-ui/plugin").ControlsWrapper;
+        readonly FullLayoutNoControlsUnlessExpanded: typeof import("./ui/layout-no-controls-unless-expanded").FullLayoutNoControlsUnlessExpanded;
     };
     static MAIN_STRUCTURE_ID: string;
 }

package/lib/viewer.js

@@ -431,8 +431,6 @@ class PDBeMolstarPlugin {
                 if (this.initParams.customData && this.initParams.customData.url && !this.initParams.customData.format)
                     return false;
                 (0, plugin_custom_state_1.PluginCustomState)(this.plugin).initParams = this.initParams;
-                // Update layout
-                commands_1.PluginCommands.Layout.Update(this.plugin, { state: (0, helpers_1.pluginLayoutStateFromInitParams)(this.initParams) });
                 // Show/hide buttons in the viewport control panel
                 this.plugin.config.set(config_1.PluginConfig.Viewport.ShowScreenshotControls, !this.initParams.hideCanvasControls.includes('screenshot'));
                 this.plugin.config.set(config_1.PluginConfig.Viewport.ShowExpand, !this.initParams.hideCanvasControls.includes('expand'));
@@ -441,6 +439,8 @@ class PDBeMolstarPlugin {
                 this.plugin.config.set(config_1.PluginConfig.Viewport.ShowSelectionMode, !this.initParams.hideCanvasControls.includes('selection'));
                 this.plugin.config.set(config_1.PluginConfig.Viewport.ShowAnimation, !this.initParams.hideCanvasControls.includes('animation'));
                 this.plugin.config.set(config_1.PluginConfig.Viewport.ShowTrajectoryControls, !this.initParams.hideCanvasControls.includes('trajectory'));
+                // Update layout
+                commands_1.PluginCommands.Layout.Update(this.plugin, { state: (0, helpers_1.pluginLayoutStateFromInitParams)(this.initParams) });
                 // Set background colour
                 if (this.initParams.bgColor || this.initParams.lighting) {
                     yield this.canvas.applySettings({ color: this.initParams.bgColor, lighting: this.initParams.lighting });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pdbe-molstar",
-  "version": "3.7.0",
+  "version": "3.7.1",
   "description": "Molstar implementation for PDBe",
   "main": "index.js",
   "scripts": {