Merge pull request #475 from FormidableLabs/zoom-and-brush-fixes

Zoom and Brush container fixes
FormidableLabs · Jun 1, 2017 · a604159 · a604159
2 parents b384fe8 + f64e014
commit a604159
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 29 deletions.
diff --git a/demo/app.js b/demo/app.js
@@ -22,6 +22,7 @@ import CreateContainerDemo from "./components/create-container-demo";
 import BrushContainerDemo from "./components/victory-brush-container-demo";
 import AnimationDemo from "./components/animation-demo";
 import SelectionDemo from "./components/selection-demo";
+import DebugDemo from "./components/debug-demo";
 
 class Home extends React.Component {
   render() {
@@ -69,6 +70,7 @@ class App extends React.Component {
     case "/animation": Child = AnimationDemo; break;
     case "/selection-container": Child = SelectionDemo; break;
     case "/create-container": Child = CreateContainerDemo; break;
+    case "/debug": Child = DebugDemo; break;
     default: Child = Home;
     }
     return Child;

diff --git a/demo/components/debug-demo.js b/demo/components/debug-demo.js
@@ -0,0 +1,66 @@
+/*eslint-disable no-magic-numbers */
+import React from "react";
+import {
+  VictoryChart, VictoryLine, VictoryGroup, VictoryZoomContainer
+} from "../../src/index";
+
+const edata = [
+  { x: 1, y: -3 },
+  { x: 2, y: 5 },
+  { x: 3, y: 3 },
+  { x: 4, y: 0 },
+  { x: 5, y: -2 },
+  { x: 6, y: -2 },
+  { x: 7, y: 5 }
+];
+
+class App extends React.Component {
+  constructor() {
+    super();
+    this.state = { data: edata.slice(3) };
+  }
+
+
+  handleDomainChange(domain) {
+    this.setState({ selectedDomain: domain });
+  }
+  changeDataSet(data) {
+    this.setState({
+      data,
+      selectedDomain: { x: [data[0].x, data[data.length - 1].x] }
+    });
+  }
+
+  render() {
+    return (
+      <div style={{ width: 300 }}>
+        <button onClick={() => this.changeDataSet(edata.slice(3))}>Part</button>
+        <button onClick={() => this.changeDataSet(edata)}>All</button>
+        <VictoryChart
+          containerComponent={
+            <VictoryZoomContainer
+              dimension="x"
+              onDomainChange={this.handleDomainChange.bind(this)}
+              zoomDomain={this.state.selectedDomain}
+            />
+          }
+          style={{ parent: { cursor: "pointer" } }}
+        >
+            <VictoryGroup
+
+              data={this.state.data}
+            >
+              <VictoryLine/>
+            </VictoryGroup>
+         </VictoryChart>
+         <p>
+           currentDomain (domain),
+           domain,
+           cachedZoomDomain
+         </p>
+      </div>
+    );
+  }
+}
+
+export default App;
diff --git a/demo/components/victory-brush-container-demo.js b/demo/components/victory-brush-container-demo.js
@@ -12,10 +12,6 @@ class App extends React.Component {
   }
 
   handleZoom(domain) {
-    this.setState({ selectedDomain: domain });
-  }
-
-  handleBrush(domain) {
     this.setState({ zoomDomain: domain });
   }
 
@@ -37,6 +33,7 @@ class App extends React.Component {
             containerComponent={
               <VictoryZoomContainer responsive={false}
                 zoomDomain={this.state.zoomDomain}
+                dimension="x"
                 onDomainChange={this.handleZoom.bind(this)}
               />
             }
@@ -63,8 +60,9 @@ class App extends React.Component {
             width={800} height={100} scale={{ x: "time" }}
             containerComponent={
               <VictoryBrushContainer responsive={false}
-                selectedDomain={this.state.selectedDomain}
-                onDomainChange={this.handleBrush.bind(this)}
+                selectedDomain={this.state.zoomDomain}
+                dimension="x"
+                onDomainChange={this.handleZoom.bind(this)}
               />
             }
           >

diff --git a/demo/components/victory-zoom-container-demo.js b/demo/components/victory-zoom-container-demo.js
@@ -89,7 +89,7 @@ export default class App extends React.Component {
           />
 
           <VictoryGroup
-            containerComponent={<VictoryZoomContainer/>}
+            containerComponent={<VictoryZoomContainer dimension="y"/>}
             style={{ parent: parentStyle }} data={this.state.transitionData}
           >
             <VictoryLine animate={{ duration: 1500 }} style={{ data: this.state.style }} />
@@ -99,6 +99,7 @@ export default class App extends React.Component {
             containerComponent={
               <VictoryZoomContainer
                 zoomDomain={{ x: [new Date(1993, 1, 1), new Date(2005, 1, 1)] }}
+                dimension="x"
               />
             }
             scale={{

diff --git a/src/components/containers/brush-helpers.js b/src/components/containers/brush-helpers.js
@@ -250,11 +250,14 @@ const Helpers = {
     }];
   },
 
-  onMouseLeave() {
-    return [{
-      target: "parent",
-      mutation: () => ({ isPanning: false, isSelecting: false })
-    }];
+  onMouseLeave(evt) {
+    if (evt.target.nodeName === "svg") {
+      return [{
+        target: "parent",
+        mutation: () => ({ isPanning: false, isSelecting: false })
+      }];
+    }
+    return [];
   }
 };
 

diff --git a/src/components/containers/zoom-helpers.js b/src/components/containers/zoom-helpers.js
@@ -1,6 +1,6 @@
 /*eslint no-magic-numbers: ["error", { "ignore": [-1, 0, 1, 2, 1000] }]*/
 import { Selection, Collection } from "victory-core";
-import { throttle, isFunction, defaults } from "lodash";
+import { throttle, isFunction, defaults, isEqual } from "lodash";
 import { attachId } from "../../helpers/event-handlers.js";
 
 const Helpers = {
@@ -128,26 +128,32 @@ const Helpers = {
     return undefined;
   },
 
+  getLastDomain(targetProps, originalDomain) {
+    const { zoomDomain, cachedZoomDomain, currentDomain, domain } = targetProps;
+    if (zoomDomain && !isEqual(zoomDomain, cachedZoomDomain)) {
+      return defaults(
+        {}, zoomDomain, domain
+      );
+    }
+    return defaults(
+      {}, currentDomain || zoomDomain || originalDomain, domain
+    );
+  },
+
   getDomain(props) {
     const { originalDomain, domain, scale } = props;
     const scaleDomain = { x: scale.x.domain(), y: scale.y.domain() };
     return defaults({}, originalDomain, domain, scaleDomain);
   },
 
-  onMouseDown(evt, targetProps) {
+  onMouseDown(evt) {
     evt.preventDefault();
-    const { domain, zoomDomain } = targetProps;
-    const originalDomain = this.getDomain(targetProps);
-    const currentDomain = defaults(
-      {}, targetProps.currentDomain || zoomDomain || originalDomain, domain
-    );
     const { x, y } = Selection.getSVGEventCoordinates(evt);
     return [{
       target: "parent",
       mutation: () => {
         return {
-          startX: x, startY: y, domain: currentDomain, cachedZoomDomain: zoomDomain,
-          originalDomain, currentDomain, panning: true,
+          startX: x, startY: y, panning: true,
           parentControlledProps: ["domain"]
         };
       }
@@ -174,12 +180,10 @@ const Helpers = {
 
   onMouseMove(evt, targetProps, eventKey, ctx) { // eslint-disable-line max-params
     if (targetProps.panning) {
-      const { scale, startX, startY, onDomainChange, dimension, domain, zoomDomain } = targetProps;
+      const { scale, startX, startY, onDomainChange, dimension, zoomDomain } = targetProps;
       const { x, y } = Selection.getSVGEventCoordinates(evt);
       const originalDomain = this.getDomain(targetProps);
-      const lastDomain = defaults(
-        {}, targetProps.currentDomain || zoomDomain || originalDomain, domain
-      );
+      const lastDomain = this.getLastDomain(targetProps, originalDomain);
       const dx = (startX - x) / this.getDomainScale(lastDomain, scale, "x");
       const dy = (y - startY) / this.getDomainScale(lastDomain, scale, "y");
       const currentDomain = {
@@ -208,11 +212,9 @@ const Helpers = {
     if (!targetProps.allowZoom) {
       return {};
     }
-    const { onDomainChange, dimension, domain, zoomDomain } = targetProps;
+    const { onDomainChange, dimension, zoomDomain } = targetProps;
     const originalDomain = this.getDomain(targetProps);
-    const lastDomain = defaults(
-      {}, targetProps.currentDomain || zoomDomain || originalDomain, domain
-    );
+    const lastDomain = this.getLastDomain(targetProps, originalDomain);
     const { x, y } = lastDomain;
     const currentDomain = {
       x: dimension === "y" ? lastDomain.x : this.scale(x, evt, targetProps, "x"),