@rcsb/rcsb-saguaro
Version:
RCSB 1D Feature Viewer
83 lines (82 loc) • 3.99 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.BoardGlow = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const classes = tslib_1.__importStar(require("../../../scss/RcsbFvRow.module.scss"));
const rxjs_1 = require("rxjs");
const RcsbFvDefaultConfigValues_1 = require("../../RcsbFvConfig/RcsbFvDefaultConfigValues");
const RcsbFvContextManager_1 = require("../../RcsbFvContextManager/RcsbFvContextManager");
class BoardGlow extends react_1.default.Component {
constructor() {
super(...arguments);
/**Mouse Leave task*/
this.hideTask = null;
}
render() {
return ((0, jsx_runtime_1.jsx)("div", { id: this.props.boardId + "_glowDiv" /* RcsbFvDOMConstants.GLOW_DOM_ID_PREFIX */, className: classes.rcsbNoGlow, children: (0, jsx_runtime_1.jsx)("div", {}) }));
}
componentDidMount() {
this.subscription = this.subscribe();
}
componentWillUnmount() {
this.subscription.unsubscribe();
}
subscribe() {
return this.props.contextManager.subscribe((o) => {
switch (o.eventType) {
case RcsbFvContextManager_1.EventType.BOARD_HOVER:
this.boardHover(o.eventData);
break;
}
});
}
boardHover(flag) {
if (flag) {
this.displayGlow();
}
else {
this.hideGlow();
}
}
displayGlow() {
var _a, _b, _c, _d, _e;
if (this.hideTask)
this.hideTask.unsubscribe();
const mainDiv = document.getElementById(this.props.boardId);
if (mainDiv != null) {
const mainDivSize = mainDiv.getBoundingClientRect();
const axisDivSize = (_b = (_a = mainDiv.getElementsByClassName(classes.rcsbFvRowAxis)[0]) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) !== null && _b !== void 0 ? _b : 0;
const height = mainDivSize.height - axisDivSize;
const glowDiv = document.getElementById(this.props.boardId + "_glowDiv" /* RcsbFvDOMConstants.GLOW_DOM_ID_PREFIX */);
if (glowDiv != null) {
const innerGlowDiv = glowDiv.getElementsByTagName("div")[0];
const trackWidth = ((_c = this.props.boardConfigData.trackWidth) !== null && _c !== void 0 ? _c : 0) + 2 * ((_d = this.props.boardConfigData.borderWidth) !== null && _d !== void 0 ? _d : RcsbFvDefaultConfigValues_1.RcsbFvDefaultConfigValues.borderWidth);
const titleWidth = ((_e = this.props.boardConfigData.rowTitleWidth) !== null && _e !== void 0 ? _e : RcsbFvDefaultConfigValues_1.RcsbFvDefaultConfigValues.rowTitleWidth);
glowDiv.style.top = axisDivSize + "px";
glowDiv.style.marginLeft = titleWidth + RcsbFvDefaultConfigValues_1.RcsbFvDefaultConfigValues.titleAndTrackSpace + "px";
glowDiv.className = classes.rcsbGlow;
innerGlowDiv.style.height = height + "px";
innerGlowDiv.style.width = trackWidth + "px";
}
}
}
hideGlow() {
const glowDiv = document.getElementById(this.props.boardId + "_glowDiv" /* RcsbFvDOMConstants.GLOW_DOM_ID_PREFIX */);
if (glowDiv != null) {
this.hideTask = rxjs_1.asyncScheduler.schedule(() => {
glowDiv.className = classes.rcsbNoGlow;
this.hideTask = rxjs_1.asyncScheduler.schedule(() => {
this.hideTask = null;
const innerGlowDiv = glowDiv.getElementsByTagName("div")[0];
glowDiv.style.top = "0px";
glowDiv.style.marginLeft = "0px";
innerGlowDiv.style.height = "0px";
innerGlowDiv.style.width = "0px";
}, 300);
}, 300);
}
}
}
exports.BoardGlow = BoardGlow;