@rcsb/rcsb-saguaro
Version:
RCSB 1D Feature Viewer
65 lines (64 loc) • 3.05 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import React from "react";
import * as classes from "../../../scss/RcsbFvRow.module.scss";
import { RcsbFvDefaultConfigValues } from "../../RcsbFvConfig/RcsbFvDefaultConfigValues";
import { EventType } from "../../RcsbFvContextManager/RcsbFvContextManager";
export class RowGlow extends React.Component {
render() {
return (_jsx("div", { id: this.props.boardId + "_glowRowDiv" /* RcsbFvDOMConstants.GLOW_ROW_DOM_ID_SUFFIX */, className: classes.rcsbNoRowGlow, children: _jsx("div", { style: { borderWidth: RcsbFvDefaultConfigValues.rowGlowWidth, borderColor: RcsbFvDefaultConfigValues.rowGlowColor } }) }));
}
componentDidMount() {
this.subscription = this.subscribe();
}
componentWillUnmount() {
this.subscription.unsubscribe();
}
subscribe() {
return this.props.contextManager.subscribe((o) => {
switch (o.eventType) {
case EventType.ROW_HOVER:
this.updateGlow(o.eventData);
break;
}
});
}
updateGlow(id) {
if (id) {
this.displayGlow(id);
}
else {
this.hideGlow();
}
}
displayGlow(id) {
var _a, _b;
const boardDiv = document.getElementById(this.props.boardId);
const rowDiv = document.getElementById(id);
if (rowDiv != null && boardDiv != null) {
const top = rowDiv.offsetTop - boardDiv.offsetTop;
const height = rowDiv.getBoundingClientRect().height - 2 * RcsbFvDefaultConfigValues.rowGlowWidth;
const glowDiv = document.getElementById(this.props.boardId + "_glowRowDiv" /* RcsbFvDOMConstants.GLOW_ROW_DOM_ID_SUFFIX */);
if (glowDiv != null) {
const innerGlowDiv = glowDiv.getElementsByTagName("div")[0];
const trackWidth = (_a = this.props.boardConfigData.trackWidth) !== null && _a !== void 0 ? _a : RcsbFvDefaultConfigValues.trackWidth;
const titleWidth = (_b = this.props.boardConfigData.rowTitleWidth) !== null && _b !== void 0 ? _b : RcsbFvDefaultConfigValues.rowTitleWidth;
glowDiv.style.top = top + "px";
glowDiv.style.marginLeft = titleWidth + RcsbFvDefaultConfigValues.titleAndTrackSpace + "px";
glowDiv.className = classes.rcsbRowGlow;
innerGlowDiv.style.height = height + "px";
innerGlowDiv.style.width = trackWidth + "px";
}
}
}
hideGlow() {
const glowDiv = document.getElementById(this.props.boardId + "_glowRowDiv" /* RcsbFvDOMConstants.GLOW_ROW_DOM_ID_SUFFIX */);
if (glowDiv != null) {
const innerGlowDiv = glowDiv.getElementsByTagName("div")[0];
glowDiv.style.top = "0px";
glowDiv.style.marginLeft = "0px";
glowDiv.className = classes.rcsbNoRowGlow;
innerGlowDiv.style.height = "0px";
innerGlowDiv.style.width = "0px";
}
}
}