first attempt to fix highlighting

uber · Jun 10, 2020 · 8e56d05 · 8e56d05
1 parent e47597a
commit 8e56d05
Show file tree

Hide file tree

Showing 2 changed files with 132 additions and 26 deletions.
diff --git a/packages/react-vis/src/plot/highlight.js b/packages/react-vis/src/plot/highlight.js
@@ -6,8 +6,10 @@ import {getAttributeScale} from 'utils/scales-utils';
 import {getCombinedClassName} from 'utils/styling-utils';
 
 function getLocs(evt) {
-  const xLoc = evt.type === 'touchstart' ? evt.pageX : evt.offsetX;
-  const yLoc = evt.type === 'touchstart' ? evt.pageY : evt.offsetY;
+  // const xLoc = evt.type === 'touchstart' ? evt.pageX : evt.offsetX;
+  // const yLoc = evt.type === 'touchstart' ? evt.pageY : evt.offsetY;
+  const xLoc = evt.offsetX ?? evt.pageX;
+  const yLoc = evt.offsetY ?? evt.pageY;
   return {xLoc, yLoc};
 }
 
@@ -20,7 +22,7 @@ class Highlight extends AbstractSeries {
     startLocY: 0,
     dragArea: null
   };
-
+  ref = React.createRef();
   _getDrawArea(xLoc, yLoc) {
     const {startLocX, startLocY} = this.state;
     const {
@@ -116,10 +118,69 @@ class Highlight extends AbstractSeries {
     return {};
   }
 
-  startBrushing(e) {
+  _captureMouse = e => {
+    console.log('capture', e.type, e.target, e);
+
+    document.addEventListener('mouseup', this.stopBrushing, {capture: true});
+    document.addEventListener('mousemove', this.onBrush, {capture: true});
+    // document.body.style['pointer-events'] = 'none';
+
+    if (this.ref.current) {
+      this.ref.current.addEventListener('mouseleave', this._mouseLeave, {
+        capture: true
+      });
+    }
+
+    e.preventDefault();
+    e.stopPropagation();
+    // this.startBrushing(e);
+  };
+
+  _releaseMouse = e => {
+    console.log('release', e.type, e.target, e);
+
+    document.removeEventListener('mouseup', this.stopBrushing, {capture: true});
+    document.removeEventListener('mousemove', this.onBrush, {capture: true});
+
+    if (this.ref.current) {
+      this.ref.current.removeEventListener('mouseleave', this._mouseLeave, {
+        capture: true
+      });
+    }
+    // document.body.style['pointer-events'] = 'auto';
+    e.stopPropagation();
+  };
+
+  _mouseLeave = e => {
+    const {toElement} = e;
+    if (toElement === document.documentElement) {
+      this.stopBrushing(e);
+      return;
+    }
+    if (toElement === this.ref.current.parentNode.parentNode) {
+      this.stopBrushing(e);
+      return;
+    }
+    console.log('didnt really leave', toElement, this.ref.current.parentNode);
+    // this.ref.current.
+  };
+
+  startBrushing = e => {
+    // e.preventDefault();
+    this._captureMouse(e);
     const {onBrushStart, onDragStart, drag} = this.props;
     const {dragArea} = this.state;
-    const {xLoc, yLoc} = getLocs(e.nativeEvent);
+    const {xLoc, yLoc} = getLocs(e);
+    console.log(
+      'start',
+      xLoc,
+      yLoc,
+      e.type,
+      e.offsetX,
+      e.offsetY,
+      e.pageX,
+      e.pageY
+    );
 
     const startArea = (dragging, resetDrag) => {
       const emptyBrush = {
@@ -153,9 +214,23 @@ class Highlight extends AbstractSeries {
         onDragStart(e);
       }
     }
-  }
+  };
 
-  stopBrushing() {
+  stopBrushing = e => {
+    if (e.toElement === document.documentElement) {
+      console.log('is document');
+      // return;
+    }
+    console.log(
+      'stop',
+      e.type,
+      e.target,
+      e.currentTarget,
+      e.toElement,
+      document,
+      e
+    );
+    this._releaseMouse(e);
     const {brushing, dragging, brushArea} = this.state;
     // Quickly short-circuit if the user isn't brushing in our component
     if (!brushing && !dragging) {
@@ -183,14 +258,18 @@ class Highlight extends AbstractSeries {
     if (drag && onDragEnd) {
       onDragEnd(!isNulled ? this._convertAreaToCoordinates(brushArea) : null);
     }
-  }
+  };
 
-  onBrush(e) {
+  onBrush = e => {
+    e.preventDefault();
+    e.stopPropagation();
     const {onBrush, onDrag, drag} = this.props;
     const {brushing, dragging} = this.state;
-    const {xLoc, yLoc} = getLocs(e.nativeEvent);
+    const {xLoc, yLoc} = getLocs(e);
+    // console.log('brush', xLoc, yLoc);
     if (brushing) {
       const brushArea = this._getDrawArea(xLoc, yLoc);
+      // console.log('brush area', brushArea);
       this.setState({brushArea});
 
       if (onBrush) {
@@ -205,7 +284,7 @@ class Highlight extends AbstractSeries {
         onDrag(this._convertAreaToCoordinates(brushArea));
       }
     }
-  }
+  };
 
   render() {
     const {
@@ -250,26 +329,36 @@ class Highlight extends AbstractSeries {
         className={getCombinedClassName(className, 'rv-highlight-container')}
       >
         <rect
+          ref={this.ref}
           className="rv-mouse-target"
           fill="black"
           opacity="0"
           x="0"
           y="0"
           width={Math.max(touchWidth, 0)}
           height={Math.max(touchHeight, 0)}
-          onMouseDown={e => this.startBrushing(e)}
-          onMouseMove={e => this.onBrush(e)}
-          onMouseUp={e => this.stopBrushing(e)}
-          onMouseLeave={e => this.stopBrushing(e)}
+          onMouseDownCapture={e => this.startBrushing(e.nativeEvent)}
+          // onMouseMoveCapture={e => this.onBrush(e)}
+          // onMouseUpCapture={e => this.stopBrushing(e)}
+          // onMouseLeave={e => {
+          //   console.log(
+          //     'mouse leave',
+          //     e.target,
+          //     e.currentTarget,
+          //     getLocs(e.nativeEvent)
+          //   );
+          //   // this._releaseMouse(e);
+          //   // this.stopBrushing(e);
+          // }}
           // preventDefault() so that mouse event emulation does not happen
-          onTouchEnd={e => {
-            e.preventDefault();
-            this.stopBrushing(e);
-          }}
-          onTouchCancel={e => {
-            e.preventDefault();
-            this.stopBrushing(e);
-          }}
+          // onTouchEnd={e => {
+          //   e.preventDefault();
+          //   this.stopBrushing(e);
+          // }}
+          // onTouchCancel={e => {
+          //   e.preventDefault();
+          //   this.stopBrushing(e);
+          // }}
           onContextMenu={e => e.preventDefault()}
           onContextMenuCapture={e => e.preventDefault()}
         />

diff --git a/packages/website/storybook/misc-story.js b/packages/website/storybook/misc-story.js
@@ -1,14 +1,14 @@
 /* eslint-env node */
 
-import React from 'react';
+import React, {useState, useCallback} from 'react';
 
 import {storiesOf} from '@storybook/react';
 
-import {withKnobs, boolean} from '@storybook/addon-knobs/react';
+import {withKnobs, boolean, button} from '@storybook/addon-knobs/react';
 import {SimpleChartWrapper} from './storybook-utils';
 import {generateLinearData} from './storybook-data';
 
-import {LineSeries, ContentClipPath} from 'react-vis';
+import {LineSeries, ContentClipPath, Highlight} from 'react-vis';
 
 const data = generateLinearData({randomFactor: 10});
 
@@ -28,4 +28,21 @@ storiesOf('Misc', module)
         <LineSeries data={data} style={{clipPath: 'url(#clip)'}} />
       </SimpleChartWrapper>
     );
+  })
+  .addWithJSX('Highlight', () => {
+    const [zoom, setZoom] = useState();
+    const onZoom = useCallback(area => {
+      console.log('zoom', area);
+    }, []);
+
+    button('Reset Zoom', () => setZoom(null), 'Zoom');
+
+    const xDomain = zoom ? [zoom.left, zoom.right] : undefined;
+
+    return (
+      <SimpleChartWrapper xDomain={xDomain}>
+        <Highlight onBrushEnd={onZoom} />
+        <LineSeries data={data} />
+      </SimpleChartWrapper>
+    );
   });