@rcsb/rcsb-saguaro-3d
Version:
RCSB Molstar/Saguaro Web App
115 lines (114 loc) • 6.61 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.RcsbFv3DCustomComponent = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const classes = tslib_1.__importStar(require("../scss/RcsbFvStyle.module.scss"));
require("../scss/RcsbFvMolstarStyle.module.scss");
const RcsbFvStructure_1 = require("../RcsbFvStructure/RcsbFvStructure");
const RcsbFvStateManager_1 = require("../RcsbFvState/RcsbFvStateManager");
const RcsbFvCustomSequence_1 = require("../RcsbFvSequence/RcsbFvCustomSequence");
const RcsbFvCustomContextManager_1 = require("../RcsbFvContextManager/RcsbFvCustomContextManager");
class RcsbFv3DCustomComponent extends React.Component {
constructor() {
super(...arguments);
this.stateManager = new RcsbFvStateManager_1.RcsbFvStateManager();
this.ROOT_DIV_ID = "rootPanelDiv";
this.state = {
structurePanelConfig: this.props.structurePanelConfig,
sequencePanelConfig: this.props.sequencePanelConfig,
pfvScreenFraction: 0.55
};
this.resize = null;
}
render() {
var _a, _b, _c;
return ((0, jsx_runtime_1.jsx)("div", { className: this.props.fullScreen ? classes.fullScreen : classes.fullHeight, children: (0, jsx_runtime_1.jsxs)("div", { id: this.ROOT_DIV_ID, style: RcsbFv3DCustomComponent.mainDivCssConfig((_a = this.props.cssConfig) === null || _a === void 0 ? void 0 : _a.rootPanel), className: this.useDefaultCss() ? classes.rcsbFvMain : "", onMouseMove: (evt) => { this.mouseMove(evt); }, onMouseUp: (e) => { this.splitPanelMouseUp(); }, children: [(0, jsx_runtime_1.jsx)("div", { style: this.structureCssConfig((_b = this.props.cssConfig) === null || _b === void 0 ? void 0 : _b.structurePanel), children: (0, jsx_runtime_1.jsx)(RcsbFvStructure_1.RcsbFvStructure, Object.assign({}, this.state.structurePanelConfig, { componentId: this.props.id, structureViewer: this.props.structureViewer, stateManager: this.stateManager, structureViewerBehaviourObserver: this.props.structureViewerBehaviourObserver })) }), (0, jsx_runtime_1.jsx)("div", { style: this.sequenceCssConfig((_c = this.props.cssConfig) === null || _c === void 0 ? void 0 : _c.sequencePanel), children: (0, jsx_runtime_1.jsx)(RcsbFvCustomSequence_1.RcsbFvCustomSequence, { config: this.state.sequencePanelConfig.config, structureViewer: this.props.structureViewer, componentId: this.props.id, stateManager: this.stateManager, title: this.state.sequencePanelConfig.title, subtitle: this.state.sequencePanelConfig.subtitle, unmount: this.props.unmount }) }), this.panelDelimiter()] }) }));
}
componentDidMount() {
this.subscription = this.subscribe();
}
componentWillUnmount() {
this.unsubscribe();
}
useDefaultCss() {
var _a;
return !((_a = this.props.cssConfig) === null || _a === void 0 ? void 0 : _a.overwriteCss);
}
panelDelimiter() {
return this.useDefaultCss() ? (0, jsx_runtime_1.jsx)("div", { onMouseDown: () => {
this.splitPanelMouseDown();
}, className: classes.rcsbFvSplitPanel, style: { right: Math.round((1 - this.state.pfvScreenFraction) * 100) + "%" } }) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
}
structureCssConfig(css) {
const widthFr = Math.round((1 - this.state.pfvScreenFraction) * 100);
const cssWidth = widthFr.toString() + "%";
const cssHeight = "100%";
return Object.assign(Object.assign({}, (this.useDefaultCss() ? { width: cssWidth, height: cssHeight } : {})), css);
}
sequenceCssConfig(css) {
const widthFr = Math.round((this.state.pfvScreenFraction) * 100);
const cssWidth = widthFr.toString() + "%";
const cssHeight = "100%";
return Object.assign(Object.assign({}, (this.useDefaultCss() ? { width: cssWidth, height: cssHeight, overflowY: "auto", overflowX: "hidden", paddingBottom: 5 } : {})), css);
}
static mainDivCssConfig(css) {
return Object.assign({}, css);
}
subscribe() {
return this.props.ctxManager.subscribe((obj) => {
if (obj.eventType == RcsbFvCustomContextManager_1.EventType.UPDATE_CONFIG) {
this.updateConfig(obj.eventData);
}
else if (obj.eventType == RcsbFvCustomContextManager_1.EventType.PLUGIN_CALL) {
this.props.structureViewer.pluginCall(obj.eventData);
}
});
}
/**Unsubscribe className to rxjs events. Useful if many panels are created an destroyed.*/
unsubscribe() {
this.subscription.unsubscribe();
}
updateConfig(config) {
const structureConfig = config.structurePanelConfig;
const sequenceConfig = config.sequencePanelConfig;
if (structureConfig != null && sequenceConfig != null) {
this.setState({ structurePanelConfig: Object.assign(Object.assign({}, this.state.structurePanelConfig), structureConfig), sequencePanelConfig: Object.assign(Object.assign({}, this.state.sequencePanelConfig), sequenceConfig) });
}
else if (structureConfig != null) {
this.setState({ structurePanelConfig: Object.assign(Object.assign({}, this.state.structurePanelConfig), structureConfig) });
}
else if (sequenceConfig != null) {
this.setState({ sequencePanelConfig: Object.assign(Object.assign({}, this.state.sequencePanelConfig), sequenceConfig) });
}
}
splitPanelMouseDown() {
const element = document.getElementById(this.ROOT_DIV_ID);
if (!element)
return;
element.style.cursor = "ew-resize";
document.body.classList.add(classes.disableTextSelection);
this.resize = (evt) => {
const rect = element.getBoundingClientRect();
const x = evt.clientX - rect.left;
this.setState({ pfvScreenFraction: x / rect.width });
};
}
splitPanelMouseUp() {
if (typeof this.resize === "function") {
const element = document.getElementById(this.ROOT_DIV_ID);
if (!element)
return;
element.style.cursor = "auto";
document.body.classList.remove(classes.disableTextSelection);
window.dispatchEvent(new Event('resize'));
this.resize = null;
}
}
mouseMove(evt) {
if (typeof this.resize === "function")
this.resize(evt);
}
}
exports.RcsbFv3DCustomComponent = RcsbFv3DCustomComponent;