Skip to content

Commit 4cee86b

Browse files
author
Brian Vaughn
committed
Hide context menu(s) when zooming or panning
1 parent 2028e7b commit 4cee86b

File tree

2 files changed

+10
-2
lines changed

2 files changed

+10
-2
lines changed

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import type {
2020
import * as React from 'react';
2121
import {
2222
Fragment,
23+
useContext,
2324
useEffect,
2425
useLayoutEffect,
2526
useRef,
@@ -56,6 +57,7 @@ import {
5657
import {COLORS} from './content-views/constants';
5758

5859
import EventTooltip from './EventTooltip';
60+
import {RegistryContext} from 'react-devtools-shared/src/devtools/ContextMenu/Contexts';
5961
import ContextMenu from 'react-devtools-shared/src/devtools/ContextMenu/ContextMenu';
6062
import ContextMenuItem from 'react-devtools-shared/src/devtools/ContextMenu/ContextMenuItem';
6163
import useContextMenu from 'react-devtools-shared/src/devtools/ContextMenu/useContextMenu';
@@ -139,6 +141,8 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
139141
[],
140142
);
141143

144+
const {hideMenu: hideContextMenu} = useContext(RegistryContext);
145+
142146
useLayoutEffect(() => {
143147
const surface = surfaceRef.current;
144148
const defaultFrame = {origin: zeroPoint, size: {width, height}};
@@ -150,6 +154,9 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
150154
newState,
151155
triggeringView?: HorizontalPanAndZoomView,
152156
) => {
157+
// Hide context menu when panning.
158+
hideContextMenu();
159+
153160
syncedHorizontalPanAndZoomViewsRef.current.forEach(
154161
syncedView =>
155162
triggeringView !== syncedView && syncedView.setScrollState(newState),

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export class HorizontalPanAndZoomView extends View {
5252
frame: Rect,
5353
contentView: View,
5454
intrinsicContentWidth: number,
55-
onStateChange?: HorizontalPanAndZoomViewOnChangeCallback,
55+
onStateChange: HorizontalPanAndZoomViewOnChangeCallback,
5656
) {
5757
super(surface, frame);
5858
this.addSubview(contentView);
@@ -61,7 +61,8 @@ export class HorizontalPanAndZoomView extends View {
6161
offset: 0,
6262
length: intrinsicContentWidth * DEFAULT_ZOOM_LEVEL,
6363
});
64-
if (onStateChange) this._onStateChange = onStateChange;
64+
65+
this._onStateChange = onStateChange;
6566
}
6667

6768
setFrame(newFrame: Rect) {

0 commit comments

Comments
 (0)