p20319658
/
monkey
forked from p34709852/monkey
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update VennDiagram/index.js 

[x] Scrolling issue. Since only window/document have 'scroll' event, the only option to fix tooltip issue on scrolling is just simply hide it.

That works well if after scrolling the mouse pointer doesn't stay on any venn nodes. Otherwise, you have to move mouse for the tooltip.

Theoretically, I could store hovered node coordinates and use them in _onScroll function to check if mouse is still on top one Venn nodes find window.pageYOffset difference.
This commit is contained in:
vkuchinov 2019-08-23 02:41:00 +03:00
parent 20e282f5fb
commit 244be146bb
1 changed files with 12 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/VennDiagram/index.js
View File

@ -52,7 +52,7 @@ UPDATED [20.08.2019]
useLayoutEffect(() => { checkForDimensionsUpdate(); }, []); useLayoutEffect(() => { checkForDimensionsUpdate(); }, []);
window.addEventListener("resize", () => { clearInterval(movement_timer); movement_timer = setTimeout(checkForDimensionsUpdate, RESET_TIMEOUT); }); window.addEventListener('resize', () => { clearInterval(movement_timer); movement_timer = setTimeout(checkForDimensionsUpdate, RESET_TIMEOUT); });
return ( return (
@ -201,11 +201,14 @@ class VennDiagram extends React.Component{
}; };
this._onScroll = this._onScroll.bind(this);
} }
componentDidMount() { componentDidMount() {
this.parseData(); this.parseData();
window.addEventListener('scroll', this._onScroll);
} }
@ -219,8 +222,6 @@ class VennDiagram extends React.Component{
let html = ''; let html = '';
let bcolor = '#DEDEDE'; let bcolor = '#DEDEDE';
e.stopPropagation();
document.querySelectorAll('circle, path').forEach((d_, i_) => { d_.setAttribute('opacity', 0.8)}); document.querySelectorAll('circle, path').forEach((d_, i_) => { d_.setAttribute('opacity', 0.8)});
if(e.target.id.includes('Node')) { if(e.target.id.includes('Node')) {
@ -229,6 +230,7 @@ class VennDiagram extends React.Component{
this.divElement.style.cursor = 'pointer'; this.divElement.style.cursor = 'pointer';
hidden = 'block'; e.target.setAttribute('opacity', 0.95); hidden = 'block'; e.target.setAttribute('opacity', 0.95);
bcolor = e.target.getAttribute('fill'); bcolor = e.target.getAttribute('fill');
//set highest z-index //set highest z-index
e.target.parentNode.parentNode.appendChild(e.target.parentNode); e.target.parentNode.parentNode.appendChild(e.target.parentNode);
@ -245,14 +247,13 @@ class VennDiagram extends React.Component{
} }
} }
_onScroll(e){
_onMouseLeave(e){ this.divElement.style.cursor = 'default';
this.setState({target: e, tooltip: { target: null, bcolor: 'none', top: 0, left: 0, display: 'none', html: '' } });
let hidden = 'none';
this.setState({target: null, tooltip: { target: null, bcolor: 'none', top: 0, left: 0, display: hidden, html: '' } });
} }
_onClick(e) { _onClick(e) {
if(this.state.tooltip.target === e.target) { this.toggle = true; } else { this.toggle = false; } if(this.state.tooltip.target === e.target) { this.toggle = true; } else { this.toggle = false; }
@ -360,7 +361,7 @@ class VennDiagram extends React.Component{
return ( return (
<div ref={ (divElement) => this.divElement = divElement} onMouseMove={this._onMouseMove.bind(this)} onMouseLeave={this._onMouseLeave.bind(this)} onClick={this._onClick.bind(this)}> <div ref={ (divElement) => this.divElement = divElement} onMouseMove={this._onMouseMove.bind(this)} onClick={this._onClick.bind(this)} >
<svg id={this.prefix} viewBox={viewPortParameters} width={'100%'} height={'100%'} xmlns='http://www.w3.org/2000/svg' xmlnsXlink='http://www.w3.org/1999/xlink'> <svg id={this.prefix} viewBox={viewPortParameters} width={'100%'} height={'100%'} xmlns='http://www.w3.org/2000/svg' xmlnsXlink='http://www.w3.org/1999/xlink'>
{nodes} {nodes}
</svg> </svg>