@rcsb/rcsb-saguaro-3d
Version:
RCSB Molstar/Saguaro Web App
101 lines • 4.95 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*
* Copyright (c) 2021 RCSB PDB and contributors, licensed under MIT, See LICENSE file for more info.
* @author Joan Segura Mora <joan.segura@rcsb.org>
*/
import * as React from "react";
import { MsaRowTitleCheckboxComponent } from "./MsaRowTitleCheckboxComponent";
import { parseEntityOrInstance } from "../../../../../Utils/RcsbIdParser";
export class MsaRowTitleComponent extends React.Component {
constructor(props) {
super(props);
this.INACTIVE_COLOR = "#ccc";
this.ACTIVE_COLOR = "rgb(51, 122, 183)";
this.state = {
expandTitle: false,
disabled: true,
titleColor: this.INACTIVE_COLOR,
blocked: false
};
this.configData = this.props.data;
}
render() {
var _a, _b;
return (_jsxs("div", { style: { textAlign: "right", display: "flex", alignItems: "center" }, onMouseOver: () => this.hover(true), onMouseOut: () => this.hover(false), children: [_jsx("div", { style: {
MozUserSelect: "none",
WebkitUserSelect: "none",
msUserSelect: "none",
color: this.state.titleColor,
cursor: this.state.blocked ? "wait" : "pointer",
maxWidth: ((_a = this.configData.rowTitleWidth) !== null && _a !== void 0 ? _a : 190) - 60,
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
textAlign: "right"
}, onClick: (e) => this.click(e), title: (_b = this.props.targetAlignment.target_id) !== null && _b !== void 0 ? _b : undefined, children: this.props.targetAlignment.target_id }), _jsxs("div", { style: { cursor: this.cursor(), width: 39 }, onClick: (e) => this.altClick(e), children: [_jsx(MsaRowTitleCheckboxComponent, Object.assign({ disabled: this.state.disabled }, parseEntityOrInstance(this.props.targetAlignment.target_id), { tag: "aligned", stateManager: this.props.stateManager })), _jsx(MsaRowTitleCheckboxComponent, Object.assign({ disabled: this.state.disabled }, parseEntityOrInstance(this.props.targetAlignment.target_id), { tag: "polymer", stateManager: this.props.stateManager })), _jsx(MsaRowTitleCheckboxComponent, Object.assign({ disabled: this.state.disabled }, parseEntityOrInstance(this.props.targetAlignment.target_id), { tag: "non-polymer", stateManager: this.props.stateManager }))] })] }));
}
componentDidMount() {
this.subscribe();
this.modelChange();
}
componentWillUnmount() {
this.subscription.unsubscribe();
}
subscribe() {
this.subscription = this.props.stateManager.subscribe((o) => {
if (o.type == "model-change" && o.view == "1d-view")
this.block();
if (o.type == "model-change" && o.view == "3d-view")
this.modelChange();
});
}
block() {
this.setState({ blocked: true });
}
modelChange() {
var _a;
if (this.props.targetAlignment.target_id && ((_a = this.props.stateManager.assemblyModelSate.getMap()) === null || _a === void 0 ? void 0 : _a.has(this.props.targetAlignment.target_id))) {
if (this.state.disabled)
this.setState({ disabled: false, titleColor: this.ACTIVE_COLOR, blocked: false });
else
this.setState({ blocked: false });
}
else if (!this.state.disabled) {
this.setState({ disabled: true, titleColor: this.INACTIVE_COLOR, blocked: false });
}
else if (this.state.blocked) {
this.setState({ blocked: false });
}
}
hover(flag) {
if (this.state.disabled && flag)
this.setState({ titleColor: this.ACTIVE_COLOR });
else if (this.state.disabled && !flag)
this.setState({ titleColor: this.INACTIVE_COLOR });
}
click(e) {
const rcsbId = parseEntityOrInstance(this.props.targetAlignment.target_id);
const entityTag = "entityId" in rcsbId ? `#entity-${rcsbId.entityId}` : "";
if (e.shiftKey) {
const newWin = window.open(`/structure/${rcsbId.entryId}${entityTag}`, "_blank");
if (!newWin || newWin.closed || typeof newWin.closed === 'undefined')
document.location.href = `/structure/${rcsbId.entryId}${entityTag}`;
}
else {
if (this.state.blocked)
return;
this.block();
this.props.titleClick();
}
}
cursor() {
if (this.state.blocked)
return "wait";
return this.state.disabled ? "pointer" : undefined;
}
altClick(e) {
if (this.state.disabled)
this.props.titleClick();
}
}
//# sourceMappingURL=MsaRowTitleComponent.js.map