From ded2e94a4f4db6f374e7cb3916f15e36caf8680f Mon Sep 17 00:00:00 2001 From: Filip Barl Date: Wed, 2 Aug 2017 18:43:19 +0200 Subject: [PATCH 1/2] Balanced timeline zooming sensitivity between Firefox and Chrome. --- client/app/scripts/utils/zoom-utils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/app/scripts/utils/zoom-utils.js b/client/app/scripts/utils/zoom-utils.js index a4a5afcb7f..e67669cfdc 100644 --- a/client/app/scripts/utils/zoom-utils.js +++ b/client/app/scripts/utils/zoom-utils.js @@ -1,5 +1,5 @@ // See https://github.com/d3/d3-zoom/blob/807f02c7a5fe496fbd08cc3417b62905a8ce95fa/src/zoom.js export function defaultWheelDelta(ev) { - return ev.deltaY * (ev.deltaMode ? 120 : 1) * 0.002; + return ev.deltaY * (ev.deltaMode ? 15 : 1) * 0.0035; } From 827fa7d280fd77e73063d36a990d29230a423246 Mon Sep 17 00:00:00 2001 From: Filip Barl Date: Fri, 4 Aug 2017 11:17:45 +0200 Subject: [PATCH 2/2] Organize the wheel delta zooming logic better. --- .../app/scripts/components/time-travel-timeline.js | 6 ++---- client/app/scripts/utils/zoom-utils.js | 14 ++++++++++++-- 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/client/app/scripts/components/time-travel-timeline.js b/client/app/scripts/components/time-travel-timeline.js index 68b77f434a..b7dbbacfc5 100644 --- a/client/app/scripts/components/time-travel-timeline.js +++ b/client/app/scripts/components/time-travel-timeline.js @@ -8,7 +8,7 @@ import { scaleUtc } from 'd3-scale'; import { event as d3Event, select } from 'd3-selection'; import { Motion, spring } from 'react-motion'; -import { defaultWheelDelta } from '../utils/zoom-utils'; +import { zoomFactor } from '../utils/zoom-utils'; import { linearGradientValue } from '../utils/math-utils'; import { trackMixpanelEvent } from '../utils/tracking-utils'; import { @@ -66,7 +66,6 @@ const INIT_DURATION_PER_PX = moment.duration(1, 'minute'); const MAX_DURATION_PER_PX = moment.duration(3, 'days'); const MIN_TICK_SPACING_PX = 70; const MAX_TICK_SPACING_PX = 415; -const ZOOM_SENSITIVITY = 2; const FADE_OUT_FACTOR = 1.4; const TICKS_ROW_SPACING = 16; const MAX_TICK_ROWS = 3; @@ -169,8 +168,7 @@ class TimeTravelTimeline extends React.Component { } handleZoom(ev) { - const scale = Math.pow(ZOOM_SENSITIVITY, defaultWheelDelta(ev)); - let durationPerPixel = scaleDuration(this.state.durationPerPixel, scale); + let durationPerPixel = scaleDuration(this.state.durationPerPixel, zoomFactor(ev)); if (durationPerPixel > MAX_DURATION_PER_PX) durationPerPixel = MAX_DURATION_PER_PX; if (durationPerPixel < MIN_DURATION_PER_PX) durationPerPixel = MIN_DURATION_PER_PX; diff --git a/client/app/scripts/utils/zoom-utils.js b/client/app/scripts/utils/zoom-utils.js index e67669cfdc..043d59a65e 100644 --- a/client/app/scripts/utils/zoom-utils.js +++ b/client/app/scripts/utils/zoom-utils.js @@ -1,5 +1,15 @@ +const ZOOM_SENSITIVITY = 0.0025; +const DOM_DELTA_LINE = 1; + // See https://github.com/d3/d3-zoom/blob/807f02c7a5fe496fbd08cc3417b62905a8ce95fa/src/zoom.js -export function defaultWheelDelta(ev) { - return ev.deltaY * (ev.deltaMode ? 15 : 1) * 0.0035; +function wheelDelta(ev) { + // Only Firefox seems to use the line unit (which we assume to + // be 25px), otherwise the delta is already measured in pixels. + const unitInPixels = (ev.deltaMode === DOM_DELTA_LINE ? 25 : 1); + return ev.deltaY * unitInPixels * ZOOM_SENSITIVITY; +} + +export function zoomFactor(ev) { + return Math.exp(wheelDelta(ev)); }