Skip to content

Commit c516474

Browse files
gzh2003gzh2003
committed
Refactor to use new listeners
1 parent e1ecc96 commit c516474

7 files changed

Lines changed: 84 additions & 63 deletions

File tree

‎packages/code-studio/src/main/AppMainContainer.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,10 @@ import {
4040
setDashboardData as setDashboardDataAction,
4141
setDashboardPluginData as setDashboardPluginDataAction,
4242
updateDashboardData as updateDashboardDataAction,
43+
emitCycleToNextStack,
44+
emitCycleToPreviousStack,
45+
emitCycleToNextTab,
46+
emitCycleToPreviousTab,
4347
} from '@deephaven/dashboard';
4448
import {
4549
ConsolePlugin,
@@ -441,19 +445,19 @@ export class AppMainContainer extends Component<
441445
}
442446

443447
sendCycleStackForward(): void {
444-
this.emitLayoutEvent(PanelEvent.CYCLE_TO_NEXT_STACK);
448+
emitCycleToNextStack(this.getActiveEventHub());
445449
}
446450

447451
sendCycleStackBackward(): void {
448-
this.emitLayoutEvent(PanelEvent.CYCLE_TO_PREVIOUS_STACK);
452+
emitCycleToPreviousStack(this.getActiveEventHub());
449453
}
450454

451455
sendCycleTabForward(): void {
452-
this.emitLayoutEvent(PanelEvent.CYCLE_TO_NEXT_TAB);
456+
emitCycleToNextTab(this.getActiveEventHub());
453457
}
454458

455459
sendCycleTabBackward(): void {
456-
this.emitLayoutEvent(PanelEvent.CYCLE_TO_PREVIOUS_TAB);
460+
emitCycleToPreviousTab(this.getActiveEventHub());
457461
}
458462

459463
sendReopenLast(): void {

‎packages/components/src/shortcuts/NavigationShortcuts.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,14 @@ const NAVIGATION_SHORTCUTS = {
1919
CYCLE_TO_NEXT_TAB: ShortcutRegistry.createAndAdd({
2020
id: 'NAVIGATION.CYCLE_TO_NEXT_TAB',
2121
name: 'Cycle To Next Tab',
22-
shortcut: [MODIFIER.CTRL, MODIFIER.SHIFT, KEY.SINGLE_QUOTE],
22+
shortcut: [MODIFIER.CTRL, MODIFIER.SHIFT, KEY.DOUBLE_QUOTE],
2323
macShortcut: [MODIFIER.CMD, MODIFIER.SHIFT, KEY.SINGLE_QUOTE],
2424
isEditable: true,
2525
}),
2626
CYCLE_TO_PREVIOUS_TAB: ShortcutRegistry.createAndAdd({
2727
id: 'NAVIGATION.CYCLE_TO_PREVIOUS_TAB',
2828
name: 'Cycle To Previous TAB',
29-
shortcut: [MODIFIER.CTRL, MODIFIER.SHIFT, KEY.SEMICOLON],
29+
shortcut: [MODIFIER.CTRL, MODIFIER.SHIFT, KEY.COLON],
3030
macShortcut: [MODIFIER.CMD, MODIFIER.SHIFT, KEY.SEMICOLON],
3131
isEditable: true,
3232
}),

‎packages/dashboard/src/NavigationEvent.ts‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { makeEventFunctions } from '@deephaven/golden-layout';
2+
3+
const NavigationEvent = Object.freeze({
4+
CYCLE_TO_NEXT_STACK: 'NavigationEvent.CYCLE_TO_NEXT_STACK',
5+
CYCLE_TO_PREVIOUS_STACK: 'NavigationEvent.CYCLE_TO_PREVIOUS_STACK',
6+
CYCLE_TO_NEXT_TAB: 'NavigationEvent.CYCLE_TO_NEXT_TAB',
7+
CYCLE_TO_PREVIOUS_TAB: 'NavigationEvent.CYCLE_TO_PREVIOUS_TAB',
8+
});
9+
10+
export const {
11+
listen: listenForCycleToNextStack,
12+
emit: emitCycleToNextStack,
13+
useListener: useCycleToNextStackListener,
14+
} = makeEventFunctions(NavigationEvent.CYCLE_TO_NEXT_STACK);
15+
16+
export const {
17+
listen: listenForCycleToPreviousStack,
18+
emit: emitCycleToPreviousStack,
19+
useListener: useCycleToPreviousStackListener,
20+
} = makeEventFunctions(NavigationEvent.CYCLE_TO_PREVIOUS_STACK);
21+
22+
export const {
23+
listen: listenForCycleToNextTab,
24+
emit: emitCycleToNextTab,
25+
useListener: useCycleToNextTabListener,
26+
} = makeEventFunctions(NavigationEvent.CYCLE_TO_NEXT_TAB);
27+
28+
export const {
29+
listen: listenForCycleToPreviousTab,
30+
emit: emitCycleToPreviousTab,
31+
useListener: useCycleToPreviousTabListener,
32+
} = makeEventFunctions(NavigationEvent.CYCLE_TO_PREVIOUS_TAB);
33+
34+
export default NavigationEvent;

‎packages/dashboard/src/PanelEvent.ts‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -70,18 +70,6 @@ export const PanelEvent = Object.freeze({
7070

7171
// Panel is dropped
7272
DROPPED: 'PanelEvent.DROPPED',
73-
74-
// Event to change focus to next stack
75-
CYCLE_TO_NEXT_STACK: 'PanelEvent.CYCLE_TO_NEXT_STACK',
76-
77-
// Event to change focus to previous stack
78-
CYCLE_TO_PREVIOUS_STACK: 'PanelEvent.CYCLE_TO_PREVIOUS_STACK',
79-
80-
// Event to change focus to next tab
81-
CYCLE_TO_NEXT_TAB: 'PanelEvent.CYCLE_TO_NEXT_TAB',
82-
83-
// Event to change focus to previous tab
84-
CYCLE_TO_PREVIOUS_TAB: 'PanelEvent.CYCLE_TO_PREVIOUS_TAB',
8573
});
8674

8775
export const {

‎packages/dashboard/src/PanelManager.ts‎

Lines changed: 34 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,12 @@ import type {
88
} from '@deephaven/golden-layout';
99
import Log from '@deephaven/log';
1010
import PanelEvent from './PanelEvent';
11+
import {
12+
listenForCycleToNextStack,
13+
listenForCycleToPreviousStack,
14+
listenForCycleToNextTab,
15+
listenForCycleToPreviousTab,
16+
} from './NavigationEvent';
1117
import LayoutUtils, { isReactComponentConfig } from './layout/LayoutUtils';
1218
import {
1319
isWrappedComponent,
@@ -69,6 +75,8 @@ class PanelManager {
6975

7076
openedMap: OpenedPanelMap;
7177

78+
navigationEventListenerRemovers: (() => void)[];
79+
7280
/**
7381
* @param layout The GoldenLayout object to attach to
7482
* @param hydrateComponent Function to hydrate a panel from a dehydrated state
@@ -113,6 +121,9 @@ class PanelManager {
113121
// Closed panels are stored in their dehydrated state
114122
this.closed = [...closed];
115123

124+
// Store the navigation event listener removers
125+
this.navigationEventListenerRemovers = [];
126+
116127
this.startListening();
117128
}
118129

@@ -122,21 +133,24 @@ class PanelManager {
122133
eventHub.on(PanelEvent.MOUNT, this.handleMount);
123134
eventHub.on(PanelEvent.UNMOUNT, this.handleUnmount);
124135
eventHub.on(PanelEvent.REOPEN, this.handleReopen);
125-
eventHub.on(PanelEvent.CYCLE_TO_NEXT_STACK, this.handleCycleToNextStack);
126-
eventHub.on(
127-
PanelEvent.CYCLE_TO_PREVIOUS_STACK,
128-
this.handleCycleToPreviousStack
129-
);
130-
eventHub.on(PanelEvent.CYCLE_TO_NEXT_TAB, this.handleCycleToNextTab);
131-
eventHub.on(
132-
PanelEvent.CYCLE_TO_PREVIOUS_TAB,
133-
this.handleCycleToPreviousTab
134-
);
135136
eventHub.on(PanelEvent.REOPEN_LAST, this.handleReopenLast);
136137
eventHub.on(PanelEvent.DELETE, this.handleDeleted);
137138
eventHub.on(PanelEvent.CLOSED, this.handleClosed);
138139
eventHub.on(PanelEvent.CLOSE, this.handleControlClose);
139140
// PanelEvent.OPEN should be listened to by plugins to open a panel
141+
142+
this.navigationEventListenerRemovers.push(
143+
listenForCycleToNextStack(eventHub, this.handleCycleToNextStack)
144+
);
145+
this.navigationEventListenerRemovers.push(
146+
listenForCycleToPreviousStack(eventHub, this.handleCycleToPreviousStack)
147+
);
148+
this.navigationEventListenerRemovers.push(
149+
listenForCycleToNextTab(eventHub, this.handleCycleToNextTab)
150+
);
151+
this.navigationEventListenerRemovers.push(
152+
listenForCycleToPreviousTab(eventHub, this.handleCycleToPreviousTab)
153+
);
140154
}
141155

142156
stopListening(): void {
@@ -145,20 +159,13 @@ class PanelManager {
145159
eventHub.off(PanelEvent.MOUNT, this.handleMount);
146160
eventHub.off(PanelEvent.UNMOUNT, this.handleUnmount);
147161
eventHub.off(PanelEvent.REOPEN, this.handleReopen);
148-
eventHub.off(PanelEvent.CYCLE_TO_NEXT_STACK, this.handleCycleToNextStack);
149-
eventHub.off(
150-
PanelEvent.CYCLE_TO_PREVIOUS_STACK,
151-
this.handleCycleToPreviousStack
152-
);
153-
eventHub.off(PanelEvent.CYCLE_TO_NEXT_TAB, this.handleCycleToNextTab);
154-
eventHub.off(
155-
PanelEvent.CYCLE_TO_PREVIOUS_TAB,
156-
this.handleCycleToPreviousTab
157-
);
158162
eventHub.off(PanelEvent.REOPEN_LAST, this.handleReopenLast);
159163
eventHub.off(PanelEvent.DELETE, this.handleDeleted);
160164
eventHub.off(PanelEvent.CLOSED, this.handleClosed);
161165
eventHub.off(PanelEvent.CLOSE, this.handleControlClose);
166+
167+
this.navigationEventListenerRemovers.forEach(remover => remover());
168+
this.navigationEventListenerRemovers = [];
162169
}
163170

164171
getClosedPanelConfigsOfType(typeString: string): ClosedPanels {
@@ -301,13 +308,13 @@ class PanelManager {
301308
this.sendUpdate();
302309
}
303310

304-
handleCycleStack(direction: CycleDirection): void {
311+
cycleStack(direction: CycleDirection): void {
305312
const allStacks = LayoutUtils.getAllStackContainers(this.layout);
306313
if (allStacks.length <= 1) {
307314
return;
308315
}
309316

310-
const focusedIndex = LayoutUtils.getFocusedStackIndex(this.layout);
317+
const focusedIndex = LayoutUtils.getFocusedStackIndex(allStacks);
311318

312319
// If no stack is focused, activate the first stack's content item
313320
if (focusedIndex === -1) {
@@ -338,14 +345,14 @@ class PanelManager {
338345
}
339346

340347
handleCycleToNextStack(): void {
341-
this.handleCycleStack(CycleDirection.Next);
348+
this.cycleStack(CycleDirection.Next);
342349
}
343350

344351
handleCycleToPreviousStack(): void {
345-
this.handleCycleStack(CycleDirection.Previous);
352+
this.cycleStack(CycleDirection.Previous);
346353
}
347354

348-
handleCycleTab(direction: CycleDirection): void {
355+
cycleTab(direction: CycleDirection): void {
349356
const focusedStack = LayoutUtils.getFocusedStack(this.layout);
350357
if (focusedStack === undefined) {
351358
return;
@@ -367,11 +374,11 @@ class PanelManager {
367374
}
368375

369376
handleCycleToNextTab(): void {
370-
this.handleCycleTab(CycleDirection.Next);
377+
this.cycleTab(CycleDirection.Next);
371378
}
372379

373380
handleCycleToPreviousTab(): void {
374-
this.handleCycleTab(CycleDirection.Previous);
381+
this.cycleTab(CycleDirection.Previous);
375382
}
376383

377384
/**

‎packages/dashboard/src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,5 +14,6 @@ export * from './layout';
1414
export * from './redux';
1515
export * from './PanelManager';
1616
export * from './PanelEvent';
17+
export * from './NavigationEvent';
1718
export { default as PanelErrorBoundary } from './PanelErrorBoundary';
1819
export { default as PanelManager } from './PanelManager';

‎packages/dashboard/src/layout/LayoutUtils.ts‎

Lines changed: 5 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -176,22 +176,18 @@ class LayoutUtils {
176176

177177
/**
178178
* Get the index of the stack that is currently focused
179-
* @param layout GoldenLayout instance
179+
* @param allStacks All the stacks
180180
* @returns The focused stack's index or -1 if not found
181181
*/
182-
static getFocusedStackIndex(layout: GoldenLayout): number {
183-
const allStacks = LayoutUtils.getAllStackContainers(layout);
184-
182+
static getFocusedStackIndex(allStacks: Stack[]): number {
185183
// NOTE: We target the 'lm_focusin' class because GoldenLayout automatically applies this class
186184
// to tab elements when they receive focus. Until we enhance focus tracking in GoldenLayout, we
187185
// will have to rely on this internal CSS class.
188-
const foundIndex = allStacks.findIndex(stack =>
186+
return allStacks.findIndex(stack =>
189187
stack.header.tabs.some(tab =>
190188
tab.element[0].classList.contains('lm_focusin')
191189
)
192190
);
193-
194-
return foundIndex;
195191
}
196192

197193
/**
@@ -201,17 +197,8 @@ class LayoutUtils {
201197
*/
202198
static getFocusedStack(layout: GoldenLayout): Stack | undefined {
203199
const allStacks = LayoutUtils.getAllStackContainers(layout);
204-
205-
// NOTE: We target the 'lm_focusin' class because GoldenLayout automatically applies this class
206-
// to tab elements when they receive focus. Until we enhance focus tracking in GoldenLayout, we
207-
// will have to rely on this internal CSS class.
208-
const focusedStack = allStacks.find(stack =>
209-
stack.header.tabs.some(tab =>
210-
tab.element[0].classList.contains('lm_focusin')
211-
)
212-
);
213-
214-
return focusedStack;
200+
const focusedStackIndex = LayoutUtils.getFocusedStackIndex(allStacks);
201+
return allStacks[focusedStackIndex];
215202
}
216203

217204
/**

0 commit comments

Comments
 (0)
⚡