From 8454fa241cce1469a812966e036d8b4d17c9f2e9 Mon Sep 17 00:00:00 2001 From: boygirl Date: Sun, 5 Feb 2017 15:05:04 -0800 Subject: [PATCH 1/2] guard for minimum domains, set maximum scaling for wheel events --- demo/components/victory-brush-container-demo.js | 4 +--- src/components/containers/zoom-helpers.js | 17 ++++++++++++----- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/demo/components/victory-brush-container-demo.js b/demo/components/victory-brush-container-demo.js index 3a6ac2de..f833f57a 100644 --- a/demo/components/victory-brush-container-demo.js +++ b/demo/components/victory-brush-container-demo.js @@ -8,9 +8,7 @@ class App extends React.Component { constructor() { super(); - this.state = { - points: [] - }; + this.state = {}; } handleZoom(domain) { diff --git a/src/components/containers/zoom-helpers.js b/src/components/containers/zoom-helpers.js index 236ed4ca..d6929f19 100644 --- a/src/components/containers/zoom-helpers.js +++ b/src/components/containers/zoom-helpers.js @@ -15,11 +15,16 @@ const Helpers = { const [from, to] = currentDomain; const range = Math.abs(from - to); const midpoint = +from + (range / 2); - const newRange = (range * factor) / 2; - return [ + const newRange = (range * Math.abs(factor)) / 2; + const minDomain = Collection.containsDates(originalDomain) ? + [ new Date(midpoint - 4), new Date(midpoint) ] : // 4ms is standard browser date precision + [ midpoint - 1 / Number.MAX_SAFE_INTEGER, midpoint ]; + const newDomain = [ Collection.getMaxValue([midpoint - newRange, fromBound]), Collection.getMinValue([midpoint + newRange, toBound]) ]; + return Math.abs(minDomain[1] - minDomain[0]) > Math.abs(newDomain[1] - newDomain[0]) ? + minDomain : newDomain; }, /** @@ -127,7 +132,7 @@ const Helpers = { } }, - onWheel(evt, targetProps, eventKey, ctx) { // eslint-disable-line max-params + onWheel(evt, targetProps, eventKey, ctx) { // eslint-disable-line max-params, max-statements if (!targetProps.allowZoom) { return {}; } @@ -136,8 +141,10 @@ const Helpers = { const lastDomain = targetProps.currentDomain || zoomDomain || originalDomain; const {x} = lastDomain; const xBounds = originalDomain.x; - // TODO: Check scale factor - const nextXDomain = this.scale(x, xBounds, 1 + (evt.deltaY / 300)); + const delta = evt.deltaY / 300; // TODO: Check scale factor + const maxDelta = delta > 0 ? 0.75 : -0.75; // TODO: Check max scale factor + const factor = Math.abs(delta) > 1 ? 1 + maxDelta : 1 + delta; + const nextXDomain = this.scale(x, xBounds, factor); const currentDomain = { x: nextXDomain, y: originalDomain.y }; const resumeAnimation = this.handleAnimation(ctx); if (isFunction(onDomainChange)) { From b90d886e4128252b01779dc753251c7db79de320 Mon Sep 17 00:00:00 2001 From: boygirl Date: Sun, 5 Feb 2017 15:20:20 -0800 Subject: [PATCH 2/2] simplify scale factor logic --- src/components/containers/zoom-helpers.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/containers/zoom-helpers.js b/src/components/containers/zoom-helpers.js index d6929f19..d64a256e 100644 --- a/src/components/containers/zoom-helpers.js +++ b/src/components/containers/zoom-helpers.js @@ -132,7 +132,7 @@ const Helpers = { } }, - onWheel(evt, targetProps, eventKey, ctx) { // eslint-disable-line max-params, max-statements + onWheel(evt, targetProps, eventKey, ctx) { // eslint-disable-line max-params if (!targetProps.allowZoom) { return {}; } @@ -141,10 +141,9 @@ const Helpers = { const lastDomain = targetProps.currentDomain || zoomDomain || originalDomain; const {x} = lastDomain; const xBounds = originalDomain.x; - const delta = evt.deltaY / 300; // TODO: Check scale factor - const maxDelta = delta > 0 ? 0.75 : -0.75; // TODO: Check max scale factor - const factor = Math.abs(delta) > 1 ? 1 + maxDelta : 1 + delta; - const nextXDomain = this.scale(x, xBounds, factor); + const sign = evt.deltaY > 0 ? 1 : -1; + const delta = Math.min(Math.abs(evt.deltaY / 300), 0.75); // TODO: Check scale factor + const nextXDomain = this.scale(x, xBounds, 1 + sign * delta); const currentDomain = { x: nextXDomain, y: originalDomain.y }; const resumeAnimation = this.handleAnimation(ctx); if (isFunction(onDomainChange)) {