pdbe-molstar
Version:
Molstar implementation for PDBe
33 lines (32 loc) • 2.8 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.PDBeViewportControls = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
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() })] });
}
}
exports.PDBeViewportControls = PDBeViewportControls;