drugflow-molstar 0.3.77 → 0.4.1

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

@@ -1,33 +1,28 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PDBeViewportControls = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var config_1 = require("Molstar/mol-plugin/config");
-var common_1 = require("Molstar/mol-plugin-ui/controls/common");
-var selection_1 = require("Molstar/mol-plugin-ui/structure/selection");
-var pdbe_screenshot_controls_1 = require("./pdbe-screenshot-controls");
-var simple_settings_1 = require("Molstar/mol-plugin-ui/viewport/simple-settings");
-var viewport_1 = require("Molstar/mol-plugin-ui/viewport");
-var icons_1 = require("Molstar/mol-plugin-ui/controls/icons");
-var PDBeViewportControls = /** @class */ (function (_super) {
-    tslib_1.__extends(PDBeViewportControls, _super);
-    function PDBeViewportControls() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    PDBeViewportControls.prototype.isBlack = function (customeState) {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const config_1 = require("Molstar/mol-plugin/config");
+const common_1 = require("Molstar/mol-plugin-ui/controls/common");
+const selection_1 = require("Molstar/mol-plugin-ui/structure/selection");
+const pdbe_screenshot_controls_1 = require("./pdbe-screenshot-controls");
+const simple_settings_1 = require("Molstar/mol-plugin-ui/viewport/simple-settings");
+const viewport_1 = require("Molstar/mol-plugin-ui/viewport");
+const icons_1 = require("Molstar/mol-plugin-ui/controls/icons");
+class PDBeViewportControls extends viewport_1.ViewportControls {
+    isBlack(customeState) {
         if (customeState && customeState.initParams && customeState.initParams.bgColor) {
-            var color = customeState.initParams.bgColor;
+            const color = customeState.initParams.bgColor;
             if (color.r === 0 && color.g === 0 && color.b === 0)
                 return true;
         }
         return false;
-    };
-    PDBeViewportControls.prototype.render = function () {
-        var customeState = this.plugin.customState;
-        var showPDBeLink = false;
-        var showControlToggle = true;
-        var showControlInfo = true;
+    }
+    render() {
+        const customeState = this.plugin.customState;
+        let showPDBeLink = false;
+        let showControlToggle = true;
+        let showControlInfo = true;
         if (customeState && customeState.initParams && customeState.initParams.moleculeId && customeState.initParams.pdbeLink)
             showPDBeLink = true;
         if (customeState && customeState.initParams && customeState.initParams.superposition)
@@ -36,8 +31,8 @@ var PDBeViewportControls = /** @class */ (function (_super) {
             showControlToggle = false;
         if (customeState && customeState.initParams && customeState.initParams.hideCanvasControls && customeState.initParams.hideCanvasControls.indexOf('controlInfo') > -1)
             showControlInfo = false;
-        var bgColor = this.isBlack(customeState) ? '#fff' : '#555';
-        var pdbeLink = {
+        const bgColor = this.isBlack(customeState) ? '#fff' : '#555';
+        const pdbeLink = {
             parentStyle: { width: 'auto' },
             bgStyle: { position: 'absolute', height: '27px', width: '54px', marginLeft: '-33px' },
             containerStyle: { position: 'absolute', right: '10px', top: '10px', padding: '3px 3px 3px 18px' },
@@ -48,9 +43,8 @@ var PDBeViewportControls = /** @class */ (function (_super) {
                 style: { height: '12px', width: '12px', border: 0, position: 'absolute', margin: '4px 0 0 -13px' }
             }
         };
-        var vwpBtnsTopMargin = { marginTop: '30px' };
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showPDBeLink && (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ 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", tslib_1.__assign({ className: 'msp-pdbe-link', style: pdbeLink.style, target: "_blank", href: "https://pdbe.org/".concat(customeState.initParams.moleculeId) }, { children: [(0, jsx_runtime_1.jsx)("img", { src: pdbeLink.pdbeImg.src, alt: pdbeLink.pdbeImg.alt, style: pdbeLink.pdbeImg.style }), customeState.initParams.moleculeId] }))] })), (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-viewport-controls', onMouseMove: this.onMouseMove, style: showPDBeLink ? vwpBtnsTopMargin : void 0 }, { children: [(0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-viewport-controls-buttons' }, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-semi-transparent-background' }), this.icon(icons_1.AutorenewSvg, this.resetCamera, 'Reset Camera')] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-semi-transparent-background' }), this.icon(icons_1.CameraOutlinedSvg, this.toggleScreenshotExpanded, 'Screenshot / State Snapshot', this.state.isScreenshotExpanded)] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-semi-transparent-background' }), showControlToggle && this.icon(icons_1.BuildOutlinedSvg, this.toggleControls, 'Toggle Controls Panel', this.plugin.layout.state.showControls), this.plugin.config.get(config_1.PluginConfig.Viewport.ShowExpand) && this.icon(icons_1.FullscreenSvg, this.toggleExpanded, 'Toggle Expanded Viewport', this.plugin.layout.state.isExpanded), showControlInfo && this.icon(icons_1.TuneSvg, this.toggleSettingsExpanded, 'Settings / Controls Info', this.state.isSettingsExpanded)] }), this.plugin.config.get(config_1.PluginConfig.Viewport.ShowSelectionMode) && (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-semi-transparent-background' }), (0, jsx_runtime_1.jsx)(selection_1.ToggleSelectionModeButton, {})] })] })), this.state.isScreenshotExpanded && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-viewport-controls-panel' }, { children: (0, jsx_runtime_1.jsx)(common_1.ControlGroup, tslib_1.__assign({ header: 'Screenshot / State', title: 'Click to close.', initialExpanded: true, hideExpander: true, hideOffset: true, onHeaderClick: this.toggleScreenshotExpanded, topRightIcon: icons_1.CloseSvg, noTopMargin: true, childrenClassName: 'msp-viewport-controls-panel-controls' }, { children: (0, jsx_runtime_1.jsx)(pdbe_screenshot_controls_1.DownloadScreenshotControls, { close: this.toggleScreenshotExpanded }) })) })), this.state.isSettingsExpanded && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-viewport-controls-panel' }, { children: (0, jsx_runtime_1.jsx)(common_1.ControlGroup, tslib_1.__assign({ header: 'Settings / Controls Info', title: 'Click to close.', initialExpanded: true, hideExpander: true, hideOffset: true, onHeaderClick: this.toggleSettingsExpanded, topRightIcon: icons_1.CloseSvg, noTopMargin: true, childrenClassName: 'msp-viewport-controls-panel-controls' }, { children: (0, jsx_runtime_1.jsx)(simple_settings_1.SimpleSettingsControl, {}) })) }))] }))] });
-    };
-    return PDBeViewportControls;
-}(viewport_1.ViewportControls));
+        let vwpBtnsTopMargin = { marginTop: '30px' };
+        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/${customeState.initParams.moleculeId}`, children: [(0, jsx_runtime_1.jsx)("img", { src: pdbeLink.pdbeImg.src, alt: pdbeLink.pdbeImg.alt, style: pdbeLink.pdbeImg.style }), customeState.initParams.moleculeId] })] }), (0, jsx_runtime_1.jsxs)("div", { className: 'msp-viewport-controls', style: showPDBeLink ? vwpBtnsTopMargin : void 0, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'msp-viewport-controls-buttons', children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-semi-transparent-background' }), this.icon(icons_1.AutorenewSvg, this.resetCamera, 'Reset Camera')] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-semi-transparent-background' }), this.icon(icons_1.CameraOutlinedSvg, this.toggleScreenshotExpanded, 'Screenshot / State Snapshot', this.state.isScreenshotExpanded)] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-semi-transparent-background' }), showControlToggle && this.icon(icons_1.BuildOutlinedSvg, this.toggleControls, 'Toggle Controls Panel', this.plugin.layout.state.showControls), this.plugin.config.get(config_1.PluginConfig.Viewport.ShowExpand) && this.icon(icons_1.FullscreenSvg, this.toggleExpanded, 'Toggle Expanded Viewport', this.plugin.layout.state.isExpanded), showControlInfo && this.icon(icons_1.TuneSvg, this.toggleSettingsExpanded, 'Settings / Controls Info', this.state.isSettingsExpanded)] }), this.plugin.config.get(config_1.PluginConfig.Viewport.ShowSelectionMode) && (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-semi-transparent-background' }), (0, jsx_runtime_1.jsx)(selection_1.ToggleSelectionModeButton, {})] })] }), this.state.isScreenshotExpanded && (0, jsx_runtime_1.jsx)("div", { className: 'msp-viewport-controls-panel', children: (0, jsx_runtime_1.jsx)(common_1.ControlGroup, { header: 'Screenshot / State', title: 'Click to close.', initialExpanded: true, hideExpander: true, hideOffset: true, onHeaderClick: this.toggleScreenshotExpanded, topRightIcon: icons_1.CloseSvg, noTopMargin: true, childrenClassName: 'msp-viewport-controls-panel-controls', children: (0, jsx_runtime_1.jsx)(pdbe_screenshot_controls_1.DownloadScreenshotControls, { close: this.toggleScreenshotExpanded }) }) }), this.state.isSettingsExpanded && (0, jsx_runtime_1.jsx)("div", { className: 'msp-viewport-controls-panel', children: (0, jsx_runtime_1.jsx)(common_1.ControlGroup, { header: 'Settings / Controls Info', title: 'Click to close.', initialExpanded: true, hideExpander: true, hideOffset: true, onHeaderClick: this.toggleSettingsExpanded, topRightIcon: icons_1.CloseSvg, noTopMargin: true, childrenClassName: 'msp-viewport-controls-panel-controls', children: (0, jsx_runtime_1.jsx)(simple_settings_1.SimpleSettingsControl, {}) }) })] })] });
+    }
+}
 exports.PDBeViewportControls = PDBeViewportControls;

package/lib/ui/segment-tree.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { PurePluginUIComponent } from 'Molstar/mol-plugin-ui/base';
 import { StateObjectRef } from 'Molstar/mol-state';
 import { PluginStateObject } from 'Molstar/mol-plugin-state/objects';
@@ -14,5 +13,5 @@ export declare class SegmentTree extends PurePluginUIComponent<{}, {
     hideStructures: (segmentIndex: number) => void;
     displayStructures: (segmentIndex: number) => Promise<void>;
     transform(s: StateObjectRef<PluginStateObject.Molecule.Structure>, matrix: Mat4): Promise<void>;
-    render(): JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }