From f360da26fc3e0071da4b085af33f259dfe534c59 Mon Sep 17 00:00:00 2001 From: Chris Bolin Date: Thu, 1 Jun 2017 13:37:08 +0000 Subject: [PATCH 1/3] update demos: add debugging, showcase diff zoom dimensions, fix brush bug --- demo/app.js | 2 + demo/components/debug-demo.js | 66 +++++++++++++++++++ .../victory-brush-container-demo.js | 10 ++- .../components/victory-zoom-container-demo.js | 3 +- 4 files changed, 74 insertions(+), 7 deletions(-) create mode 100644 demo/components/debug-demo.js diff --git a/demo/app.js b/demo/app.js index 411e773d..c0723044 100644 --- 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 new file mode 100644 index 00000000..addbe268 --- /dev/null +++ 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 ( +
+ + + + } + style={{ parent: { cursor: "pointer" } }} + > + + + + +

+ currentDomain (domain), + domain, + cachedZoomDomain +

+
+ ); + } +} + +export default App; diff --git a/demo/components/victory-brush-container-demo.js b/demo/components/victory-brush-container-demo.js index 4d4aa71b..eade5ec0 100644 --- 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={ } @@ -63,8 +60,9 @@ class App extends React.Component { width={800} height={100} scale={{ x: "time" }} containerComponent={ } > diff --git a/demo/components/victory-zoom-container-demo.js b/demo/components/victory-zoom-container-demo.js index ba5aca86..c22281d6 100644 --- 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 { /> } + containerComponent={} style={{ parent: parentStyle }} data={this.state.transitionData} > @@ -99,6 +99,7 @@ export default class App extends React.Component { containerComponent={ } scale={{ From 6db476cd173c09f3a7402a68582ae5041a6e4532 Mon Sep 17 00:00:00 2001 From: Chris Bolin Date: Thu, 1 Jun 2017 13:39:58 +0000 Subject: [PATCH 2/3] fix zoom bug: ensure that outside zoomDomain changes are respected --- src/components/containers/zoom-helpers.js | 36 ++++++++++++----------- 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/src/components/containers/zoom-helpers.js b/src/components/containers/zoom-helpers.js index 5e97b440..956e8dbb 100644 --- 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"), From f64e01404229a5b098d30c395953de6104b39464 Mon Sep 17 00:00:00 2001 From: Chris Bolin Date: Thu, 1 Jun 2017 14:47:44 +0000 Subject: [PATCH 3/3] bugfix: brush would end resize if mouse moved too fast --- src/components/containers/brush-helpers.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/components/containers/brush-helpers.js b/src/components/containers/brush-helpers.js index 18e8ffa0..66ea4135 100644 --- 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 []; } };