/
BoardGlow.tsx
92 lines (81 loc) · 3.75 KB
/
BoardGlow.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
import React from "react";
import {RcsbFvDOMConstants} from "../../RcsbFvConfig/RcsbFvDOMConstants";
import classes from "../../../scss/RcsbFvRow.module.scss";
import {asyncScheduler, Subscription} from "rxjs";
import {RcsbFvDefaultConfigValues} from "../../RcsbFvConfig/RcsbFvDefaultConfigValues";
import {RcsbFvBoardConfigInterface} from "../../RcsbFvConfig/RcsbFvConfigInterface";
import {EventType, RcsbFvContextManager} from "../../RcsbFvContextManager/RcsbFvContextManager";
interface BoardGlowInterface {
readonly boardId:string;
readonly boardConfigData: RcsbFvBoardConfigInterface;
readonly contextManager: RcsbFvContextManager;
}
export class BoardGlow extends React.Component <BoardGlowInterface> {
/**Mouse Leave task*/
private hideTask: Subscription | null = null;
private subscription: Subscription;
render() {
return (<div id={this.props.boardId+RcsbFvDOMConstants.GLOW_DOM_ID_PREFIX} className={classes.rcsbNoGlow}>
<div />
</div>);
}
componentDidMount() {
this.subscription = this.subscribe();
}
componentWillUnmount() {
this.subscription.unsubscribe();
}
private subscribe(): Subscription{
return this.props.contextManager.subscribe((o)=>{
switch (o.eventType){
case EventType.BOARD_HOVER:
this.boardHover(o.eventData as boolean);
break;
}
});
}
private boardHover(flag: boolean): void{
if(flag){
this.displayGlow();
}else{
this.hideGlow();
}
}
private displayGlow(): void{
if(this.hideTask)
this.hideTask.unsubscribe();
const mainDiv: HTMLElement | null = document.getElementById(this.props.boardId);
if (mainDiv != null) {
const mainDivSize: DOMRect = mainDiv.getBoundingClientRect();
const axisDivSize: number = mainDiv.getElementsByClassName(classes.rcsbFvRowAxis)[0]?.getBoundingClientRect().height ?? 0;
const height: number = mainDivSize.height - axisDivSize;
const glowDiv: HTMLElement | null = document.getElementById(this.props.boardId + RcsbFvDOMConstants.GLOW_DOM_ID_PREFIX);
if (glowDiv != null) {
const innerGlowDiv: HTMLElement | undefined = glowDiv.getElementsByTagName("div")[0];
const trackWidth: number = (this.props.boardConfigData.trackWidth ?? 0) + 2*(this.props.boardConfigData.borderWidth ?? RcsbFvDefaultConfigValues.borderWidth);
const titleWidth: number = (this.props.boardConfigData.rowTitleWidth ?? 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";
}
}
}
private hideGlow(): void {
const glowDiv: HTMLElement|null = document.getElementById(this.props.boardId+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: HTMLElement|undefined = glowDiv.getElementsByTagName("div")[0];
glowDiv.style.top = "0px";
glowDiv.style.marginLeft = "0px";
innerGlowDiv.style.height = "0px";
innerGlowDiv.style.width = "0px";
},300);
},300);
}
}
}