Skip to content

Commit 1db0cdb

Browse files
author
Brian Vaughn
committed
Changed scroll wheel behavior
Vertical wheel now zooms. Horizontal wheel pans. (Vertical wheel with shift zooms.) Wheel events of any kind clear the current tooltip as well.
1 parent 7dfc9b1 commit 1db0cdb

File tree

3 files changed

+65
-55
lines changed

3 files changed

+65
-55
lines changed

packages/react-devtools-scheduling-profiler/src/CanvasPage.js

+33
Original file line numberDiff line numberDiff line change
@@ -310,6 +310,39 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
310310
return;
311311
}
312312

313+
// Wheel events should always hide the current toolltip.
314+
switch (interaction.type) {
315+
case 'wheel-control':
316+
case 'wheel-meta':
317+
case 'wheel-plain':
318+
case 'wheel-shift':
319+
setHoveredEvent(prevHoverEvent => {
320+
if (prevHoverEvent === null) {
321+
return prevHoverEvent;
322+
} else if (
323+
prevHoverEvent.flamechartStackFrame !== null ||
324+
prevHoverEvent.measure !== null ||
325+
prevHoverEvent.nativeEvent !== null ||
326+
prevHoverEvent.schedulingEvent !== null ||
327+
prevHoverEvent.suspenseEvent !== null ||
328+
prevHoverEvent.userTimingMark !== null
329+
) {
330+
return {
331+
data: prevHoverEvent.data,
332+
flamechartStackFrame: null,
333+
measure: null,
334+
nativeEvent: null,
335+
schedulingEvent: null,
336+
suspenseEvent: null,
337+
userTimingMark: null,
338+
};
339+
} else {
340+
return prevHoverEvent;
341+
}
342+
});
343+
break;
344+
}
345+
313346
const surface = surfaceRef.current;
314347
surface.handleInteraction(interaction);
315348

packages/react-devtools-scheduling-profiler/src/view-base/HorizontalPanAndZoomView.js

+28-51
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,6 @@ import type {
1313
MouseMoveInteraction,
1414
MouseUpInteraction,
1515
WheelPlainInteraction,
16-
WheelWithShiftInteraction,
17-
WheelWithControlInteraction,
18-
WheelWithMetaInteraction,
1916
} from './useCanvasInteraction';
2017
import type {Rect} from './geometry';
2118
import type {ScrollState} from './utils/scrollState';
@@ -214,51 +211,36 @@ export class HorizontalPanAndZoomView extends View {
214211

215212
const absDeltaX = Math.abs(deltaX);
216213
const absDeltaY = Math.abs(deltaY);
217-
if (absDeltaY > absDeltaX) {
218-
return; // Scrolling vertically
219-
}
220-
if (absDeltaX < MOVE_WHEEL_DELTA_THRESHOLD) {
221-
return;
222-
}
223-
224-
const newState = translateState({
225-
state: this._scrollState,
226-
delta: -deltaX,
227-
containerLength: this.frame.size.width,
228-
});
229-
this._setStateAndInformCallbacksIfChanged(newState);
230-
}
231-
232-
_handleWheelZoom(
233-
interaction:
234-
| WheelWithShiftInteraction
235-
| WheelWithControlInteraction
236-
| WheelWithMetaInteraction,
237-
) {
238-
const {
239-
location,
240-
delta: {deltaY},
241-
} = interaction.payload;
242214

243-
if (!rectContainsPoint(location, this.frame)) {
244-
return; // Not scrolling on view
245-
}
246-
247-
const absDeltaY = Math.abs(deltaY);
248-
if (absDeltaY < MOVE_WHEEL_DELTA_THRESHOLD) {
249-
return;
215+
// Vertical scrolling zooms in and out (unless the SHIFT modifier is used).
216+
// Horizontal scrolling pans.
217+
if (absDeltaY > absDeltaX) {
218+
if (absDeltaY < MOVE_WHEEL_DELTA_THRESHOLD) {
219+
return;
220+
}
221+
222+
const newState = zoomState({
223+
state: this._scrollState,
224+
multiplier: 1 + 0.005 * -deltaY,
225+
fixedPoint: location.x - this._scrollState.offset,
226+
227+
minContentLength: this._intrinsicContentWidth * MIN_ZOOM_LEVEL,
228+
maxContentLength: this._intrinsicContentWidth * MAX_ZOOM_LEVEL,
229+
containerLength: this.frame.size.width,
230+
});
231+
this._setStateAndInformCallbacksIfChanged(newState);
232+
} else {
233+
if (absDeltaX < MOVE_WHEEL_DELTA_THRESHOLD) {
234+
return;
235+
}
236+
237+
const newState = translateState({
238+
state: this._scrollState,
239+
delta: -deltaX,
240+
containerLength: this.frame.size.width,
241+
});
242+
this._setStateAndInformCallbacksIfChanged(newState);
250243
}
251-
252-
const newState = zoomState({
253-
state: this._scrollState,
254-
multiplier: 1 + 0.005 * -deltaY,
255-
fixedPoint: location.x - this._scrollState.offset,
256-
257-
minContentLength: this._intrinsicContentWidth * MIN_ZOOM_LEVEL,
258-
maxContentLength: this._intrinsicContentWidth * MAX_ZOOM_LEVEL,
259-
containerLength: this.frame.size.width,
260-
});
261-
this._setStateAndInformCallbacksIfChanged(newState);
262244
}
263245

264246
handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
@@ -275,11 +257,6 @@ export class HorizontalPanAndZoomView extends View {
275257
case 'wheel-plain':
276258
this._handleWheelPlain(interaction);
277259
break;
278-
case 'wheel-shift':
279-
case 'wheel-control':
280-
case 'wheel-meta':
281-
this._handleWheelZoom(interaction);
282-
break;
283260
}
284261
}
285262
}

packages/react-devtools-scheduling-profiler/src/view-base/VerticalScrollView.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import type {
1212
MouseDownInteraction,
1313
MouseMoveInteraction,
1414
MouseUpInteraction,
15-
WheelPlainInteraction,
15+
WheelWithShiftInteraction,
1616
} from './useCanvasInteraction';
1717
import type {Rect} from './geometry';
1818
import type {ScrollState} from './utils/scrollState';
@@ -157,7 +157,7 @@ export class VerticalScrollView extends View {
157157
}
158158
}
159159

160-
_handleWheelPlain(interaction: WheelPlainInteraction) {
160+
_handleWheelShift(interaction: WheelWithShiftInteraction) {
161161
const {
162162
location,
163163
delta: {deltaX, deltaY},
@@ -195,8 +195,8 @@ export class VerticalScrollView extends View {
195195
case 'mouseup':
196196
this._handleMouseUp(interaction);
197197
break;
198-
case 'wheel-plain':
199-
this._handleWheelPlain(interaction);
198+
case 'wheel-shift':
199+
this._handleWheelShift(interaction);
200200
break;
201201
}
202202
}

0 commit comments

Comments
 (0)