Merge pull request #257 from webpack-contrib/fix-context-menu-positio…

…ning Fix positioning of the context menu when sidebar is pinned
webpack-contrib · Apr 10, 2019 · 26a1474 · 26a1474
2 parents 49ce234 + b22015a
commit 26a1474
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 30 deletions.
diff --git a/client/components/ModulesTreemap.jsx b/client/components/ModulesTreemap.jsx
@@ -26,6 +26,11 @@ const SIZE_SWITCH_ITEMS = [
 
 @observer
 export default class ModulesTreemap extends Component {
+  mouseCoords = {
+    x: 0,
+    y: 0
+  };
+
   state = {
     selectedChunk: null,
     selectedMouseCoords: {x: 0, y: 0},
@@ -35,6 +40,14 @@ export default class ModulesTreemap extends Component {
     tooltipContent: null
   };
 
+  componentDidMount() {
+    document.addEventListener('mousemove', this.handleMouseMove, true);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('mousemove', this.handleMouseMove, true);
+  }
+
   render() {
     const {
       selectedChunk,
@@ -245,14 +258,12 @@ export default class ModulesTreemap extends Component {
   };
 
   handleTreemapGroupSecondaryClick = event => {
-    const {group, x, y} = event;
+    const {group} = event;
+
     if (group && group.isAsset) {
       this.setState({
         selectedChunk: group,
-        selectedMouseCoords: {
-          x,
-          y
-        },
+        selectedMouseCoords: {...this.mouseCoords},
         showChunkContextMenu: true
       });
     } else {
@@ -278,6 +289,13 @@ export default class ModulesTreemap extends Component {
 
   handleFoundModuleClick = module => this.treemap.zoomToGroup(module);
 
+  handleMouseMove = event => {
+    Object.assign(this.mouseCoords, {
+      x: event.pageX,
+      y: event.pageY
+    });
+  }
+
   isModuleVisible = module => (
     this.treemap.isGroupRendered(module)
   )

diff --git a/client/components/Tooltip.jsx b/client/components/Tooltip.jsx
@@ -9,30 +9,26 @@ export default class Tooltip extends Component {
   static marginX = 10;
   static marginY = 30;
 
-  constructor(props) {
-    super(props);
-
-    this.mouseCoords = {
-      x: 0,
-      y: 0
-    };
+  mouseCoords = {
+    x: 0,
+    y: 0
+  };
 
-    this.state = {
-      left: 0,
-      top: 0
-    };
-  }
+  state = {
+    left: 0,
+    top: 0
+  };
 
   componentDidMount() {
-    document.addEventListener('mousemove', this.onMouseMove, false);
+    document.addEventListener('mousemove', this.handleMouseMove, true);
   }
 
   shouldComponentUpdate(nextProps) {
     return this.props.visible || nextProps.visible;
   }
 
   componentWillUnmount() {
-    document.removeEventListener('mousemove', this.onMouseMove);
+    document.removeEventListener('mousemove', this.handleMouseMove, true);
   }
 
   render() {
@@ -51,6 +47,17 @@ export default class Tooltip extends Component {
     );
   }
 
+  handleMouseMove = event => {
+    Object.assign(this.mouseCoords, {
+      x: event.pageX,
+      y: event.pageY
+    });
+
+    if (this.props.visible) {
+      this.updatePosition();
+    }
+  };
+
   saveNode = node => (this.node = node);
 
   getStyle() {
@@ -83,15 +90,4 @@ export default class Tooltip extends Component {
     this.setState(pos);
   }
 
-  onMouseMove = event => {
-    Object.assign(this.mouseCoords, {
-      x: event.pageX,
-      y: event.pageY
-    });
-
-    if (this.props.visible) {
-      this.updatePosition();
-    }
-  };
-
 }