rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-05-02 17:48:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/mathuo/dockview into master

Browse Source
This commit is contained in:
mathuo 2022-03-14 20:03:26 +00:00
commit 4f4d21d9dc
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
8 changed files with 69 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/dockview/src/__tests__/api/component.api.spec.ts
View File

@ -22,6 +22,10 @@ describe('component.api', () => {
'onDidLayoutChange',
'onDidAddView',
'onDidRemoveView',
'getPanels',
'focus',
'resizeToFit',
'toJSON',
];
for (const _ of list) {
@ -33,7 +37,7 @@ describe('component.api', () => {
const cut = new SplitviewApi(<SplitviewComponent>component);
expect((cut as any)[_]).toBeFalsy();
(cut as any)[_];
expect(f).toBeCalledTimes(1);
}
@ -50,6 +54,10 @@ describe('component.api', () => {
'onDidLayoutChange',
'onDidAddView',
'onDidRemoveView',
'getPanels',
'focus',
'resizeToFit',
'toJSON',
];
for (const _ of list) {
@ -61,7 +69,7 @@ describe('component.api', () => {
const cut = new PaneviewApi(<PaneviewComponent>component);
expect((cut as any)[_]).toBeFalsy();
(cut as any)[_];
expect(f).toBeCalledTimes(1);
}
@ -80,6 +88,9 @@ describe('component.api', () => {
'onGridEvent',
'onDidLayoutChange',
'orientation',
'focus',
'resizeToFit',
'toJSON',
];
for (const _ of list) {
@ -91,7 +102,7 @@ describe('component.api', () => {
const cut = new GridviewApi(<GridviewComponent>component);
expect((cut as any)[_]).toBeFalsy();
(cut as any)[_];
expect(f).toBeCalledTimes(1);
}
@ -115,6 +126,10 @@ describe('component.api', () => {
'groups',
'activeGroup',
'activePanel',
'focus',
'closeAllGroups',
'resizeToFit',
'toJSON',
];
for (const _ of list) {
@ -126,7 +141,7 @@ describe('component.api', () => {
const cut = new DockviewApi(<DockviewComponent>component);
expect((cut as any)[_]).toBeFalsy();
(cut as any)[_];
expect(f).toBeCalledTimes(1);
}

38
packages/dockview/src/__tests__/groupview/groupview.spec.ts
View File

@ -1,4 +1,7 @@
import { IDockviewComponent } from '../../dockview/dockviewComponent';
import {
IDockviewComponent,
DockviewComponent,
} from '../../dockview/dockviewComponent';
import {
GroupviewPanelState,
IGroupPanel,
@ -198,13 +201,21 @@ describe('groupview', () => {
let dockview: IDockviewComponent;
let options: GroupOptions;
let removePanelMock: jest.Mock;
let removeGroupMock: jest.Mock;
beforeEach(() => {
dockview = <IDockviewComponent>(<any>{
removePanelMock = jest.fn();
removeGroupMock = jest.fn();
dockview = (<Partial<DockviewComponent>>{
options: {},
createWatermarkComponent: () => new Watermark(),
doSetGroupActive: jest.fn(),
id: 'dockview-1',
});
removePanel: removePanelMock,
removeGroup: removeGroupMock,
}) as DockviewComponent;
options = {
tabHeight: 30,
@ -412,4 +423,25 @@ describe('groupview', () => {
);
expect(viewQuery).toBeTruthy();
});
test('closeAllPanels with panels', () => {
const panel1 = new TestPanel('panel1', jest.fn() as any);
const panel2 = new TestPanel('panel2', jest.fn() as any);
const panel3 = new TestPanel('panel3', jest.fn() as any);
groupview.model.openPanel(panel1);
groupview.model.openPanel(panel2);
groupview.model.openPanel(panel3);
groupview.model.closeAllPanels();
expect(removePanelMock).toBeCalledWith(panel1);
expect(removePanelMock).toBeCalledWith(panel2);
expect(removePanelMock).toBeCalledWith(panel3);
});
test('closeAllPanels with no panels', () => {
groupview.model.closeAllPanels();
expect(removeGroupMock).toBeCalledWith(groupview);
});
});

23
packages/dockview/src/dockview/dockviewComponent.ts
View File

@ -221,11 +221,6 @@ export class DockviewComponent
typeof options.orientation === 'string' &&
this.options.orientation !== options.orientation;
// TODO support style update
// const hasStylesChanged =
// typeof options.styles === 'object' &&
// this.options.styles !== options.styles;
this._options = { ...this.options, ...options };
if (hasOrientationChanged) {
@ -409,16 +404,14 @@ export class DockviewComponent
}
fireMouseEvent(event: LayoutMouseEvent): void {
switch (event.kind) {
case MouseEventKind.CONTEXT_MENU:
if (event.tab && event.panel) {
this._onTabContextMenu.fire({
event: event.event,
api: this._api,
panel: event.panel,
});
}
break;
if (event.kind === MouseEventKind.CONTEXT_MENU) {
if (event.tab && event.panel) {
this._onTabContextMenu.fire({
event: event.event,
api: this._api,
panel: event.panel,
});
}
}
}

2
packages/dockview/src/events.ts
View File

@ -42,8 +42,6 @@ export class Emitter<T> implements IDisposable {
listener(this._last);
}
const firstListener = this._listeners.length === 0;
this._listeners.push(listener);
return {

4
packages/dockview/src/gridview/gridview.ts
View File

@ -618,9 +618,10 @@ export class Gridview implements IDisposable {
return node.view;
}
const sibling = parent.children[0];
if (pathToParent.length === 0) {
// parent is root
const sibling = parent.children[0];
if (sibling instanceof LeafNode) {
return node.view;
@ -635,7 +636,6 @@ export class Gridview implements IDisposable {
const [grandParent, ..._] = [...pathToParent].reverse();
const [parentIndex, ...__] = [...rest].reverse();
const sibling = parent.children[0];
const isSiblingVisible = parent.isChildVisible(0);
parent.removeChild(0, sizing);

71
packages/dockview/src/groupview/panel/hostedPanel.ts
View File

@ -1,71 +0,0 @@
import { IDisposable } from '../../lifecycle';
import { IGroupPanel } from '../groupPanel';
import { IRenderable } from '../types';
export interface HostedPanelOptions {
id: string;
parent?: HTMLElement;
}
export class HostedPanel implements IRenderable, IDisposable {
private readonly _element: HTMLElement;
get element() {
return this._element;
}
get id() {
return this.panel.id;
}
constructor(
private readonly panel: IGroupPanel,
private readonly options: HostedPanelOptions
) {
if (!options.parent) {
options.parent = document.getElementById('app') as HTMLElement;
options.parent.style.position = 'relative';
}
this._element = document.createElement('div');
this._element.style.visibility = 'hidden';
this._element.style.overflow = 'hidden';
// this._element.style.pointerEvents = 'none';
this._element.id = `webivew-${options.id}`;
options.parent.appendChild(this._element);
}
hide() {
this._element.style.visibility = 'hidden';
}
show() {
this._element.style.visibility = 'visible';
}
layout(
element: HTMLElement,
dimension?: { width: number; height: number }
) {
if (!this.element || !this.element.parentElement) {
return;
}
const frameRect = element.getBoundingClientRect();
const containerRect =
this.element.parentElement.getBoundingClientRect();
this.element.style.position = 'absolute';
this.element.style.top = `${frameRect.top - containerRect.top}px`;
this.element.style.left = `${frameRect.left - containerRect.left}px`;
this.element.style.width = `${
dimension ? dimension.width : frameRect.width
}px`;
this.element.style.height = `${
dimension ? dimension.height : frameRect.height
}px`;
}
dispose() {
this._element.remove();
}
}

10
packages/dockview/src/groupview/titlebar/tabsContainer.ts
View File

@ -261,12 +261,10 @@ export class TabsContainer
return;
}
switch (event.kind) {
case MouseEventKind.CLICK:
this.group.model.openPanel(panel, {
skipFocus: alreadyFocused,
});
break;
if (event.kind === MouseEventKind.CLICK) {
this.group.model.openPanel(panel, {
skipFocus: alreadyFocused,
});
}
}),
tabToAdd.onDrop((event) => {

3
packages/dockview/src/react/react.ts
View File

@ -92,7 +92,6 @@ export class ReactPart<P extends object, C extends object = {}>
throw new Error('invalid operation: resource is already disposed');
}
// TODO use a better check for isReactFunctionalComponent
if (typeof this.component !== 'function') {
/**
* we know this isn't a React.FunctionComponent so throw an error here.
@ -100,7 +99,7 @@ export class ReactPart<P extends object, C extends object = {}>
* for the same reason, at least at this point we will emit a sensible stacktrace.
*/
throw new Error(
'invalid operation: only functional components are supported'
'Invalid Operation. dockview only supports React Functional Components.'
);
}