@rcsb/rcsb-saguaro
Version:
RCSB 1D Feature Viewer
78 lines (77 loc) • 3.59 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import React from "react";
import * as classes from "../../../scss/RcsbFvRow.module.scss";
import { asyncScheduler } from "rxjs";
import { RcsbFvDefaultConfigValues } from "../../RcsbFvConfig/RcsbFvDefaultConfigValues";
import { EventType } from "../../RcsbFvContextManager/RcsbFvContextManager";
export class BoardGlow extends React.Component {
constructor() {
super(...arguments);
/**Mouse Leave task*/
this.hideTask = null;
}
render() {
return (_jsx("div", { id: this.props.boardId + "_glowDiv" /* RcsbFvDOMConstants.GLOW_DOM_ID_PREFIX */, className: classes.rcsbNoGlow, children: _jsx("div", {}) }));
}
componentDidMount() {
this.subscription = this.subscribe();
}
componentWillUnmount() {
this.subscription.unsubscribe();
}
subscribe() {
return this.props.contextManager.subscribe((o) => {
switch (o.eventType) {
case 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.borderWidth);
const titleWidth = ((_e = this.props.boardConfigData.rowTitleWidth) !== null && _e !== void 0 ? _e : RcsbFvDefaultConfigValues.rowTitleWidth);
glowDiv.style.top = axisDivSize + "px";
glowDiv.style.marginLeft = titleWidth + 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 = asyncScheduler.schedule(() => {
glowDiv.className = classes.rcsbNoGlow;
this.hideTask = 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);
}
}
}