From 614f4efb951fb6c8f2b4d4cfa2ec840d72861374 Mon Sep 17 00:00:00 2001
From: Jamie Wong <jamie.lf.wong@gmail.com>
Date: Mon, 4 Dec 2017 00:03:52 -0800
Subject: [PATCH] Stop dragging mouse up outside window bounds

---
 flamechart.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/flamechart.tsx b/flamechart.tsx
index 971d3f3..a96bdc8 100644
--- a/flamechart.tsx
+++ b/flamechart.tsx
@@ -502,9 +502,6 @@ export class FlamechartView extends Component<FlamechartViewProps, void> {
   private onMouseDown = (ev: MouseEvent) => {
     this.lastDragPos = new Vec2(ev.offsetX, ev.offsetY)
   }
-  private onMouseUp = (ev: MouseEvent) => {
-    this.lastDragPos = null
-  }
 
   private onMouseDrag = (ev: MouseEvent) => {
     if (!this.lastDragPos) return
@@ -564,8 +561,17 @@ export class FlamechartView extends Component<FlamechartViewProps, void> {
     this.renderCanvas()
   }
 
+  private onWindowMouseUp = (ev: MouseEvent) => {
+    this.lastDragPos = null
+  }
+
   componentDidUpdate() { this.renderCanvas() }
-  componentDidMount() { this.renderCanvas() }
+  componentDidMount() {
+    window.addEventListener('mouseup', this.onWindowMouseUp)
+  }
+  componentWillUnmount() {
+    window.removeEventListener('mouseup', this.onWindowMouseUp)
+  }
 
   render() {
     const {width, height} = this.props
@@ -574,7 +580,6 @@ export class FlamechartView extends Component<FlamechartViewProps, void> {
       <div
         className={css(style.fill)}
         onMouseDown={this.onMouseDown}
-        onMouseUp={this.onMouseUp}
         onMouseMove={this.onMouseMove}
         onWheel={this.onWheel}>
         <canvas