pdbe-molstar
Version:
Molstar implementation for PDBe
48 lines (47 loc) • 4.88 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.PDBeViewport = exports.PDBeViewport_NoFullscreen = exports.CustomizableDefaultViewport = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const base_1 = require("molstar/lib/mol-plugin-ui/base");
const controls_1 = require("molstar/lib/mol-plugin-ui/controls");
const plugin_1 = require("molstar/lib/mol-plugin-ui/plugin");
const task_1 = require("molstar/lib/mol-plugin-ui/task");
const toast_1 = require("molstar/lib/mol-plugin-ui/toast");
const viewport_1 = require("molstar/lib/mol-plugin-ui/viewport");
const plugin_custom_state_1 = require("../plugin-custom-state");
const custom_controls_1 = require("./custom-controls");
const overlay_1 = require("./overlay");
/** A modified copy of DefaultViewport */
class CustomizableDefaultViewport extends plugin_1.DefaultViewport {
render() {
var _a, _b, _c, _d, _e;
const VPControls = ((_b = (_a = this.plugin.spec.components) === null || _a === void 0 ? void 0 : _a.viewport) === null || _b === void 0 ? void 0 : _b.controls) || viewport_1.ViewportControls;
const SnapshotDescription = ((_d = (_c = this.plugin.spec.components) === null || _c === void 0 ? void 0 : _c.viewport) === null || _d === void 0 ? void 0 : _d.snapshotDescription) || controls_1.ViewportSnapshotDescription;
const hideCanvasControls = (_e = (0, plugin_custom_state_1.PluginCustomState)(this.plugin).initParams) === null || _e === void 0 ? void 0 : _e.hideCanvasControls;
const hideSnapshotControls = (hideCanvasControls === null || hideCanvasControls === void 0 ? void 0 : hideCanvasControls.includes('snapshotControls')) || (hideCanvasControls === null || hideCanvasControls === void 0 ? void 0 : hideCanvasControls.includes('all'));
const hideSnapshotDescription = (hideCanvasControls === null || hideCanvasControls === void 0 ? void 0 : hideCanvasControls.includes('snapshotDescription')) || (hideCanvasControls === null || hideCanvasControls === void 0 ? void 0 : hideCanvasControls.includes('all'));
return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(viewport_1.Viewport, {}), (0, jsx_runtime_1.jsxs)("div", { style: { position: 'absolute', inset: 0, pointerEvents: 'none' }, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'pdbemolstar-viewport-top-center-controls', children: [(0, jsx_runtime_1.jsx)(custom_controls_1.CustomControls, { region: 'viewport-top-center' }), (0, jsx_runtime_1.jsx)(controls_1.SelectionViewportControls, {})] }), (0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', pointerEvents: 'auto' }, children: (0, jsx_runtime_1.jsxs)("div", { className: 'msp-viewport-top-left-controls', children: [(0, jsx_runtime_1.jsx)(controls_1.AnimationViewportControls, {}), (0, jsx_runtime_1.jsx)(controls_1.TrajectoryViewportControls, {}), !hideSnapshotControls && (0, jsx_runtime_1.jsx)(controls_1.StateSnapshotViewportControls, {}), (0, jsx_runtime_1.jsx)(custom_controls_1.CustomControls, { region: 'viewport-top-left' }), !hideSnapshotDescription && (0, jsx_runtime_1.jsx)(SnapshotDescription, {})] }) })] }), (0, jsx_runtime_1.jsx)(VPControls, {}), (0, jsx_runtime_1.jsx)(task_1.BackgroundTaskProgress, {}), (0, jsx_runtime_1.jsxs)("div", { className: 'msp-highlight-toast-wrapper', children: [(0, jsx_runtime_1.jsx)(controls_1.LociLabels, {}), (0, jsx_runtime_1.jsx)(toast_1.Toasts, {})] })] });
}
}
exports.CustomizableDefaultViewport = CustomizableDefaultViewport;
/** Return a React component with MainContent, expanded to whole browser window whenever `this.plugin.layout.state.isExpanded === true`. */
function Fullscreenable(MainContent) {
return class _Fullscreenable extends base_1.PurePluginUIComponent {
constructor() {
super(...arguments);
this.state = { fullscreen: this.plugin.layout.state.isExpanded };
}
componentDidMount() {
this.subscribe(this.plugin.layout.events.updated, () => {
this.setState({ fullscreen: this.plugin.layout.state.isExpanded });
});
}
render() {
return (0, jsx_runtime_1.jsxs)("div", { className: this.state.fullscreen ? 'msp-layout-expanded msp-viewport-expanded' : undefined, children: [(0, jsx_runtime_1.jsx)(MainContent, {}), ";"] });
}
};
}
/** Version of `PDBeViewport` to use as part of other components. Does not expand to fullscreen individually. */
exports.PDBeViewport_NoFullscreen = (0, overlay_1.WithLoadingOverlay)(CustomizableDefaultViewport);
/** 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. */
exports.PDBeViewport = Fullscreenable(exports.PDBeViewport_NoFullscreen);