cursor-centered zoom

dashboard/src/main/home/dashboard/expanded-chart/graph/GraphDisplay.tsx

@@ -76,8 +76,14 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
       originY: Math.round(height / 2)
     });
 
-    this.myRef.addEventListener("touchmove", (e: any) => e.preventDefault(), false);
-    this.myRef.addEventListener("mousewheel", (e: any) => e.preventDefault(), false);
+    // Suppress trackpad gestures
+    this.myRef.addEventListener("touchmove", (e: any) => e.preventDefault());
+    this.myRef.addEventListener("mousewheel", (e: any) => e.preventDefault());
+  }
+
+  componentWillUnmount() {
+    this.myRef.removeEventListener("touchmove", (e: any) => e.preventDefault());
+    this.myRef.removeEventListener("mousewheel", (e: any) => e.preventDefault());
   }
 
   // Push to activeIds if not already present
@@ -128,8 +134,8 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
     }
   }
 
+  // Set zoom scale
   handleOnWheel = (e: any) => {
-    e.preventDefault();
     var scale = 1;
     scale -= e.deltaY * zoomConstant;
     this.setState({ scale });
@@ -137,7 +143,7 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
 
   // Pass origin to node for offset
   renderNodes = () => {
-    let { activeIds, originX, originY, cursorX, cursorY } = this.state;
+    let { activeIds, originX, originY, cursorX, cursorY, scale } = this.state;
 
     return this.state.nodes.map((node: NodeType, i: number) => {
 
@@ -153,8 +159,11 @@ export default class GraphDisplay extends Component<PropsType, StateType> {
         node.y -= this.state.deltaY;
       }
 
-      node.x *= this.state.scale;
-      node.y *= this.state.scale;
+      // Apply cursor-centered zoom
+      if (this.state.scale !== 1) {
+        node.x = cursorX + scale * (node.x - cursorX);
+        node.y = cursorY + scale * (node.y - cursorY);
+      }
       
       return (
         <Node

dashboard/src/main/home/dashboard/expanded-chart/graph/Node.tsx

@@ -49,11 +49,15 @@ const NodeLabel = styled.div`
   position: absolute;
   bottom: -25px;
   color: #aaaabb;
-  width: 200px;
-  left: -80px;
+  padding-top: 12px;
+  width: 40px;
+  left: 0px;
   font-size: 13px;
+  white-space: nowrap;
   font-family: 'Work Sans', sans-serif;
-  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 `;
 
 const StyledNode: any = styled.div.attrs((props: NodeType) => ({
@@ -67,13 +71,16 @@ const StyledNode: any = styled.div.attrs((props: NodeType) => ({
   height: ${(props: NodeType) => props.h + 'px'};;
   background: #444446;
   box-shadow: ${(props: any) => props.isActive ? '0 0 10px #ffffff66' : '0px 0px 10px 2px #00000022'};
-  cursor: pointer;
+  cursor: grab;
   border-radius: 5px;
   color: #ffffff22;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1;
+  :hover {
+    background: #555556;
+  }
 
   > i {
     color: white;