Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Balance timeline zooming sensitivity between Firefox and Chrome #2788

Merged
merged 2 commits into from
Aug 7, 2017
Merged

Balance timeline zooming sensitivity between Firefox and Chrome #2788

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ded2e94
Balanced timeline zooming sensitivity between Firefox and Chrome.
fbarl Aug 2, 2017
827fa7d
Organize the wheel delta zooming logic better.
fbarl Aug 4, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions client/app/scripts/components/time-travel-timeline.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;

Expand Down
14 changes: 12 additions & 2 deletions client/app/scripts/utils/zoom-utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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));
}