Skip to content

Commit a341798

Browse files
mantou132mantou132
committed
Add gemPanel.activePanel 
1 parent e60528a commit a341798

File tree

5 files changed

+84
-22
lines changed

5 files changed

+84
-22
lines changed

‎api-docs.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,11 @@
1717

1818
| Method | Type |
1919
| ------------------- | ------------------------------------------------------------------------------------- |
20-
| `openHiddenPanel` | `(arg: string \| Panel): void` |
21-
| `openPanelInWindow` | `(arg: string \| Panel, window: Window): void` |
20+
| `getWindow` | `(arg: string \| Panel): Window` |
21+
| `activePanel` | `(arg: string \| Panel): void` |
22+
| `openPanel` | `(arg: string \| Panel): void` |
2223
| `closePanel` | `(arg: string \| Panel): void` |
24+
| `openPanelInWindow` | `(arg: string \| Panel, window: Window, side?: Side): void` |
2325
| `addPanel` | `(panel: Panel): void` |
2426
| `deletePanel` | `(arg: string \| Panel): void` |
2527
| `updateAllPanel` | `(): void` |

‎src/elements/root.ts‎

Lines changed: 41 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,13 @@ import {
1212
updateAppState,
1313
deletePanelFromWindow,
1414
deleteHiddenPanel,
15+
activePanel,
1516
} from '../lib/store';
1617
import { theme, Theme } from '../lib/theme';
1718
import { isOutside, keyBy, exclude } from '../lib/utils';
1819
import { MenuItem, openContextMenu } from './menu';
1920
import { GemPanelWindowElement, windowTagName } from './window';
21+
import { Side } from './window-handle';
2022
import './menu';
2123

2224
@customElement('gem-panel')
@@ -55,17 +57,22 @@ export class GemPanelElement extends GemElement {
5557
#save = () => this.#cacheAs();
5658

5759
#queryPanel = (arg: string | Panel, panels: Panel[]) => {
58-
const title = typeof arg === 'string' ? arg : arg.name;
59-
return panels.find((e) => e.name === title);
60+
const panelName = typeof arg === 'string' ? arg : arg.name;
61+
return panels.find((e) => e.name === panelName);
6062
};
6163

62-
#queryWindow = (panel: Panel) => {
63-
return store.layout.windows.find((w) => w.panels.includes(panel.name));
64+
#queryWindow = (arg: string | Panel) => {
65+
const panelName = typeof arg === 'string' ? arg : arg.name;
66+
return store.layout.windows.find((w) => w.panels.includes(panelName));
67+
};
68+
69+
#getAllWindowElement = () => {
70+
return [...this.shadowRoot!.querySelectorAll<GemPanelWindowElement>(windowTagName)];
6471
};
6572

6673
#cleanOutsideWindow = () => {
6774
const rect = this.getBoundingClientRect();
68-
this.shadowRoot?.querySelectorAll<GemPanelWindowElement>(windowTagName).forEach((ele) => {
75+
this.#getAllWindowElement().forEach((ele) => {
6976
if (ele.window.isGridWindow()) return;
7077
const targetRect = ele.getBoundingClientRect();
7178
if (isOutside(rect, targetRect)) {
@@ -177,16 +184,39 @@ export class GemPanelElement extends GemElement {
177184
return Object.values(exclude({ ...store.panels }, 'name', this.showPanels));
178185
}
179186

180-
openHiddenPanel(arg: string | Panel) {
181-
const panel = this.#queryPanel(arg, this.hiddenPanels);
187+
getWindow(arg: string | Panel) {
188+
const panel = this.#queryPanel(arg, this.showPanels);
182189
if (!panel) return;
183-
openHiddenPanel(panel.name);
190+
return this.#queryWindow(panel);
184191
}
185192

186-
openPanelInWindow(arg: string | Panel, window: Window) {
187-
const panel = this.#queryPanel(arg, this.hiddenPanels);
193+
activePanel(arg: string | Panel) {
194+
const panel = this.#queryPanel(arg, this.showPanels);
188195
if (!panel) return;
189-
openPanelInWindow(window, panel.name);
196+
const window = this.#queryWindow(arg);
197+
if (!window) return;
198+
activePanel(window, panel.name);
199+
this.#getAllWindowElement()
200+
.find((ele) => ele.window === window)
201+
?.focus();
202+
}
203+
204+
openPanel(arg: string | Panel) {
205+
const panel = this.#queryPanel(arg, this.hiddenPanels);
206+
if (!panel) {
207+
this.activePanel(arg);
208+
} else {
209+
openHiddenPanel(panel.name);
210+
}
211+
}
212+
213+
openPanelInWindow(arg: string | Panel, window: Window, side?: Side) {
214+
const panel = this.#queryPanel(arg, this.hiddenPanels);
215+
if (!panel) {
216+
this.activePanel(arg);
217+
} else {
218+
openPanelInWindow(window, panel.name, side);
219+
}
190220
}
191221

192222
closePanel(arg: string | Panel) {

‎src/elements/window.ts‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { html, GemElement, customElement, connectStore } from '@mantou/gem';
1+
import { html, GemElement, customElement, connectStore, refobject, RefObject } from '@mantou/gem';
22
import { PanEventDetail } from '@mantou/gem/elements/gesture';
33
import '@mantou/gem/elements/gesture';
44

@@ -62,6 +62,7 @@ type State = {
6262
@customElement(windowTagName)
6363
@connectStore(store)
6464
export class GemPanelWindowElement extends GemElement<State> {
65+
@refobject windowRef: RefObject<HTMLElement>;
6566
window: Window;
6667

6768
state: State = {
@@ -313,7 +314,12 @@ export class GemPanelWindowElement extends GemElement<State> {
313314
outline: none;
314315
}
315316
</style>
316-
<div part="window ${isGrid ? 'cell-window' : 'fixed-window'}" tabindex="0" class="window">
317+
<div
318+
ref=${this.windowRef.ref}
319+
part="window ${isGrid ? 'cell-window' : 'fixed-window'}"
320+
tabindex="0"
321+
class="window"
322+
>
317323
${isGrid
318324
? ''
319325
: html`
@@ -377,4 +383,8 @@ export class GemPanelWindowElement extends GemElement<State> {
377383
<gem-panel-handle .window=${this.window}></gem-panel-handle>
378384
`;
379385
};
386+
387+
focus = () => {
388+
this.windowRef.element?.focus();
389+
};
380390
}

‎src/lib/layout.ts‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -303,6 +303,10 @@ export class Layout implements LayoutOptional {
303303
window.dimension = [w < WINDOW_MIN_WIDTH || x < 0 ? originW : w, h < WINDOW_MIN_HEIGHT || y < 0 ? originH : h];
304304
}
305305

306+
activePanel(window: Window, panelName: string) {
307+
window.changeCurrent(window.panels.findIndex((p) => p === panelName));
308+
}
309+
306310
focusWindow(window: Window) {
307311
if (window.isGridWindow()) return false;
308312
const maxZIndex = Math.max(...this.windows.filter((w) => w !== window).map((w) => w.zIndex));
@@ -366,7 +370,7 @@ export class Layout implements LayoutOptional {
366370
this.focusWindow(target);
367371
}
368372

369-
createGridWindow(window: Window, hoverWindow: Window, side: Side) {
373+
convertGridWindow(window: Window, hoverWindow: Window, side: Side) {
370374
const areas = this.#findAreas(hoverWindow);
371375
const { rows, columns, width, height } = this.#findAreasBoundary(areas);
372376
const gridArea = this.#getNewGridArea();
@@ -444,9 +448,20 @@ export class Layout implements LayoutOptional {
444448
this.focusWindow(newWindow);
445449
}
446450

447-
openPanelInWindow(window: Window, panelName: string) {
448-
window.changeCurrent(window.panels.push(panelName) - 1);
449-
this.focusWindow(window);
451+
openPanelInWindow(window: Window, panelName: string, side?: Side) {
452+
if (side) {
453+
if (window.isGridWindow()) {
454+
const newWindow = new Window([panelName]);
455+
this.windows.push(newWindow);
456+
this.convertGridWindow(newWindow, window, side);
457+
} else {
458+
this.openHiddenPanel(panelName);
459+
}
460+
return;
461+
} else {
462+
window.changeCurrent(window.panels.push(panelName) - 1);
463+
this.focusWindow(window);
464+
}
450465
}
451466

452467
closePanel(window: Window, panelName: string) {

‎src/lib/store.ts‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,13 @@ export function openHiddenPanel(panelName: string) {
4848
updateStore(store);
4949
}
5050

51-
export function openPanelInWindow(window: Window, panelName: string) {
52-
store.layout.openPanelInWindow(window, panelName);
51+
export function activePanel(window: Window, panelName: string) {
52+
store.layout.activePanel(window, panelName);
53+
updateStore(store);
54+
}
55+
56+
export function openPanelInWindow(window: Window, panelName: string, side?: Side) {
57+
store.layout.openPanelInWindow(window, panelName, side);
5358
updateStore(store);
5459
}
5560

@@ -119,7 +124,7 @@ export function dropHandleWindow(window: Window) {
119124
if (store.hoverWindowPosition === 'center' || store.hoverWindowPosition === 'header') {
120125
store.layout.mergeWindow(window, store.hoverWindow);
121126
} else {
122-
store.layout.createGridWindow(window, store.hoverWindow, store.hoverWindowPosition);
127+
store.layout.convertGridWindow(window, store.hoverWindow, store.hoverWindowPosition);
123128
}
124129
cancelHandleWindow();
125130
}

0 commit comments

Comments
 (0)