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 a4a5afcb7f..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 ? 120 : 1) * 0.002; +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)); }