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

Merge branch 'master' of https://github.com/mathuo/dockview into 689-docs-demos-for-vanilla-js-support

Browse Source
This commit is contained in:
mathuo 2024-11-03 19:19:03 +00:00
commit 83b01a9a66
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
22 changed files with 623 additions and 624 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/dockview-core/src/__tests__/__mocks__/mockDockviewPanelMode.ts → packages/dockview-core/src/__tests__/__mocks__/mockDockviewPanelModel.ts
View File

@ -11,12 +11,13 @@ export class DockviewPanelModelMock implements IDockviewPanelModel {
constructor(
readonly contentComponent: string,
readonly content: IContentRenderer,
readonly tabComponent?: string,
readonly tab?: ITabRenderer
readonly tabComponent: string,
readonly tab: ITabRenderer
) {
//
}
init(params: GroupPanelPartInitParameters): void {
//
}

14
packages/dockview-core/src/__tests__/__mocks__/mockWindow.ts
View File

@ -1,4 +1,4 @@
import { fromPartial } from "@total-typescript/shoehorn";
import { fromPartial } from '@total-typescript/shoehorn';
export function setupMockWindow() {
const listeners: Record<string, (() => void)[]> = {};
@ -16,6 +16,14 @@ export function setupMockWindow() {
listener();
}
},
removeEventListener: (type: string, listener: () => void) => {
if (listeners[type]) {
const index = listeners[type].indexOf(listener);
if (index > -1) {
listeners[type].splice(index, 1);
}
}
},
dispatchEvent: (event: Event) => {
const items = listeners[event.type];
if (!items) {
@ -24,7 +32,9 @@ export function setupMockWindow() {
items.forEach((item) => item());
},
document: document,
close: jest.fn(),
close: () => {
listeners['beforeunload']?.forEach((f) => f());
},
get innerWidth() {
return width++;
},

243
packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts
View File

@ -8,7 +8,7 @@ import { PanelUpdateEvent } from '../../panel/types';
import { Orientation } from '../../splitview/splitview';
import { CompositeDisposable } from '../../lifecycle';
import { Emitter } from '../../events';
import { IDockviewPanel } from '../../dockview/dockviewPanel';
import { DockviewPanel, IDockviewPanel } from '../../dockview/dockviewPanel';
import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel';
import { fireEvent, queryByTestId } from '@testing-library/dom';
import { getPanelData } from '../../dnd/dataTransfer';
@ -116,8 +116,6 @@ describe('dockviewComponent', () => {
}
},
});
window.open = jest.fn();
});
test('update className', () => {
@ -4886,6 +4884,150 @@ describe('dockviewComponent', () => {
]);
});
test('popout / floating layouts', async () => {
jest.useRealTimers();
const container = document.createElement('div');
window.open = () => setupMockWindow();
const dockview = new DockviewComponent(container, {
createComponent(options) {
switch (options.name) {
case 'default':
return new PanelContentPartTest(
options.id,
options.name
);
default:
throw new Error(`unsupported`);
}
},
});
dockview.layout(1000, 500);
let panel1 = dockview.addPanel({
id: 'panel_1',
component: 'default',
});
let panel2 = dockview.addPanel({
id: 'panel_2',
component: 'default',
});
let panel3 = dockview.addPanel({
id: 'panel_3',
component: 'default',
});
let panel4 = dockview.addPanel({
id: 'panel_4',
component: 'default',
});
expect(panel1.api.location.type).toBe('grid');
expect(panel2.api.location.type).toBe('grid');
expect(panel3.api.location.type).toBe('grid');
expect(panel4.api.location.type).toBe('grid');
dockview.addFloatingGroup(panel2);
dockview.addFloatingGroup(panel3);
expect(panel1.api.location.type).toBe('grid');
expect(panel2.api.location.type).toBe('floating');
expect(panel3.api.location.type).toBe('floating');
expect(panel4.api.location.type).toBe('grid');
await dockview.addPopoutGroup(panel2);
await dockview.addPopoutGroup(panel4);
expect(panel1.api.location.type).toBe('grid');
expect(panel2.api.location.type).toBe('popout');
expect(panel3.api.location.type).toBe('floating');
expect(panel4.api.location.type).toBe('popout');
const state = dockview.toJSON();
dockview.fromJSON(state);
/**
* exhaust task queue since popout group completion is async but not awaited in `fromJSON(...)`
*/
await new Promise((resolve) => setTimeout(resolve, 0));
expect(dockview.panels.length).toBe(4);
panel1 = dockview.api.getPanel('panel_1') as DockviewPanel;
panel2 = dockview.api.getPanel('panel_2') as DockviewPanel;
panel3 = dockview.api.getPanel('panel_3') as DockviewPanel;
panel4 = dockview.api.getPanel('panel_4') as DockviewPanel;
expect(panel1.api.location.type).toBe('grid');
expect(panel2.api.location.type).toBe('popout');
expect(panel3.api.location.type).toBe('floating');
expect(panel4.api.location.type).toBe('popout');
dockview.clear();
expect(dockview.groups.length).toBe(0);
expect(dockview.panels.length).toBe(0);
});
test('close popout window object', async () => {
const container = document.createElement('div');
const mockWindow = setupMockWindow();
window.open = () => mockWindow;
const dockview = new DockviewComponent(container, {
createComponent(options) {
switch (options.name) {
case 'default':
return new PanelContentPartTest(
options.id,
options.name
);
default:
throw new Error(`unsupported`);
}
},
});
dockview.layout(1000, 500);
let panel1 = dockview.addPanel({
id: 'panel_1',
component: 'default',
});
let panel2 = dockview.addPanel({
id: 'panel_2',
component: 'default',
position: { referencePanel: panel1, direction: 'within' },
});
let panel3 = dockview.addPanel({
id: 'panel_3',
component: 'default',
});
dockview.addFloatingGroup(panel2);
await dockview.addPopoutGroup(panel2);
expect(panel1.group.api.location.type).toBe('grid');
expect(panel2.group.api.location.type).toBe('popout');
expect(panel3.group.api.location.type).toBe('grid');
mockWindow.close();
expect(panel1.group.api.location.type).toBe('grid');
expect(panel2.group.api.location.type).toBe('grid');
expect(panel3.group.api.location.type).toBe('grid');
dockview.clear();
expect(dockview.groups.length).toBe(0);
expect(dockview.panels.length).toBe(0);
});
test('remove all panels from popout group', async () => {
const container = document.createElement('div');
@ -5378,6 +5520,101 @@ describe('dockviewComponent', () => {
});
describe('addPanel', () => {
test('that can add panel to index with referencePanel', () => {
const container = document.createElement('div');
const dockview = new DockviewComponent(container, {
createComponent(options) {
switch (options.name) {
case 'default':
return new PanelContentPartTest(
options.id,
options.name
);
default:
throw new Error(`unsupported`);
}
},
});
const api = new DockviewApi(dockview);
dockview.layout(1000, 1000);
const panel1 = api.addPanel({
id: 'panel_1',
component: 'default',
});
const panel2 = api.addPanel({
id: 'panel_2',
component: 'default',
position: {
referencePanel: panel1,
},
});
const panel3 = api.addPanel({
id: 'panel_3',
component: 'default',
position: {
referencePanel: panel1,
index: 1,
},
});
expect(panel1.api.group.panels).toEqual([panel1, panel3, panel2]);
});
test('that can add panel to index with referenceGroup', () => {
const container = document.createElement('div');
const dockview = new DockviewComponent(container, {
createComponent(options) {
switch (options.name) {
case 'default':
return new PanelContentPartTest(
options.id,
options.name
);
default:
throw new Error(`unsupported`);
}
},
});
const api = new DockviewApi(dockview);
dockview.layout(1000, 1000);
const panel1 = api.addPanel({
id: 'panel_1',
component: 'default',
});
const panel2 = api.addPanel({
id: 'panel_2',
component: 'default',
position: {
referencePanel: panel1,
index: 1,
},
});
const panel3 = api.addPanel({
id: 'panel_3',
component: 'default',
position: {
referenceGroup: panel1.api.group,
index: 1,
},
});
expect(panel1.api.group.panels).toEqual([panel1, panel3, panel2]);
panel1.api.moveTo({ index: 1 });
expect(panel1.api.group.panels).toEqual([panel3, panel1, panel2]);
});
test('that can add panel', () => {
const container = document.createElement('div');

141
packages/dockview-core/src/__tests__/dockview/dockviewGroupPanel.spec.ts Normal file
View File

@ -0,0 +1,141 @@
import { DockviewComponent } from '../../dockview/dockviewComponent';
import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel';
import { fromPartial } from '@total-typescript/shoehorn';
import { GroupOptions } from '../../dockview/dockviewGroupPanelModel';
import { DockviewPanel } from '../../dockview/dockviewPanel';
import { DockviewPanelModelMock } from '../__mocks__/mockDockviewPanelModel';
import { IContentRenderer, ITabRenderer } from '../../dockview/types';
import { OverlayRenderContainer } from '../../overlay/overlayRenderContainer';
describe('dockviewGroupPanel', () => {
test('default minimum/maximium width/height', () => {
const accessor = fromPartial<DockviewComponent>({
onDidActivePanelChange: jest.fn(),
onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(),
options: {},
});
const options = fromPartial<GroupOptions>({});
const cut = new DockviewGroupPanel(accessor, 'test_id', options);
expect(cut.minimumWidth).toBe(100);
expect(cut.minimumHeight).toBe(100);
expect(cut.maximumHeight).toBe(Number.MAX_SAFE_INTEGER);
expect(cut.maximumWidth).toBe(Number.MAX_SAFE_INTEGER);
});
test('group constraints', () => {
const accessor = fromPartial<DockviewComponent>({
onDidActivePanelChange: jest.fn(),
onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(),
doSetGroupActive: jest.fn(),
overlayRenderContainer: fromPartial<OverlayRenderContainer>({
attach: jest.fn(),
detatch: jest.fn(),
}),
options: {},
});
const options = fromPartial<GroupOptions>({});
const cut = new DockviewGroupPanel(accessor, 'test_id', options);
cut.api.setConstraints({
minimumHeight: 10,
maximumHeight: 100,
minimumWidth: 20,
maximumWidth: 200,
});
// initial constraints
expect(cut.minimumWidth).toBe(20);
expect(cut.minimumHeight).toBe(10);
expect(cut.maximumHeight).toBe(100);
expect(cut.maximumWidth).toBe(200);
const panelModel = new DockviewPanelModelMock(
'content_component',
fromPartial<IContentRenderer>({
element: document.createElement('div'),
}),
'tab_component',
fromPartial<ITabRenderer>({
element: document.createElement('div'),
})
);
const panel = new DockviewPanel(
'panel_id',
'component_id',
undefined,
accessor,
accessor.api,
cut,
panelModel,
{
renderer: 'onlyWhenVisible',
minimumWidth: 21,
minimumHeight: 11,
maximumHeight: 101,
maximumWidth: 201,
}
);
cut.model.openPanel(panel);
// active panel constraints
expect(cut.minimumWidth).toBe(21);
expect(cut.minimumHeight).toBe(11);
expect(cut.maximumHeight).toBe(101);
expect(cut.maximumWidth).toBe(201);
const panel2 = new DockviewPanel(
'panel_id',
'component_id',
undefined,
accessor,
accessor.api,
cut,
panelModel,
{
renderer: 'onlyWhenVisible',
minimumWidth: 22,
minimumHeight: 12,
maximumHeight: 102,
maximumWidth: 202,
}
);
cut.model.openPanel(panel2);
// active panel constraints
expect(cut.minimumWidth).toBe(22);
expect(cut.minimumHeight).toBe(12);
expect(cut.maximumHeight).toBe(102);
expect(cut.maximumWidth).toBe(202);
const panel3 = new DockviewPanel(
'panel_id',
'component_id',
undefined,
accessor,
accessor.api,
cut,
panelModel,
{
renderer: 'onlyWhenVisible',
}
);
cut.model.openPanel(panel3);
// active panel without specified constraints so falls back to group constraints
expect(cut.minimumWidth).toBe(20);
expect(cut.minimumHeight).toBe(10);
expect(cut.maximumHeight).toBe(100);
expect(cut.maximumWidth).toBe(200);
});
});

17
packages/dockview-core/src/api/dockviewGroupPanelApi.ts
View File

@ -9,6 +9,15 @@ import { Emitter, Event } from '../events';
import { MutableDisposable } from '../lifecycle';
import { GridviewPanelApi, GridviewPanelApiImpl } from './gridviewPanelApi';
export interface DockviewGroupMoveParams {
group?: DockviewGroupPanel;
position?: Position;
/**
* The index to place the panel within a group, only applicable if the placement is within an existing group
*/
index?: number;
}
export interface DockviewGroupPanelApi extends GridviewPanelApi {
readonly onDidLocationChange: Event<DockviewGroupPanelFloatingChangeEvent>;
readonly onDidActivePanelChange: Event<DockviewGroupChangeEvent>;
@ -17,7 +26,7 @@ export interface DockviewGroupPanelApi extends GridviewPanelApi {
* If you require the Window object
*/
getWindow(): Window;
moveTo(options: { group?: DockviewGroupPanel; position?: Position }): void;
moveTo(options: DockviewGroupMoveParams): void;
maximize(): void;
isMaximized(): boolean;
exitMaximized(): void;
@ -28,7 +37,8 @@ export interface DockviewGroupPanelFloatingChangeEvent {
readonly location: DockviewGroupLocation;
}
const NOT_INITIALIZED_MESSAGE = 'dockview: DockviewGroupPanelApiImpl not initialized';
const NOT_INITIALIZED_MESSAGE =
'dockview: DockviewGroupPanelApiImpl not initialized';
export class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
private readonly _mutableDisposable = new MutableDisposable();
@ -74,7 +84,7 @@ export class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
: window;
}
moveTo(options: { group?: DockviewGroupPanel; position?: Position }): void {
moveTo(options: DockviewGroupMoveParams): void {
if (!this._group) {
throw new Error(NOT_INITIALIZED_MESSAGE);
}
@ -93,6 +103,7 @@ export class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
position: options.group
? options.position ?? 'center'
: 'center',
index: options.index,
},
});
}

26
packages/dockview-core/src/api/dockviewPanelApi.ts
View File

@ -4,9 +4,11 @@ import { DockviewGroupPanel } from '../dockview/dockviewGroupPanel';
import { CompositeDisposable, MutableDisposable } from '../lifecycle';
import { DockviewPanel } from '../dockview/dockviewPanel';
import { DockviewComponent } from '../dockview/dockviewComponent';
import { Position } from '../dnd/droptarget';
import { DockviewPanelRenderer } from '../overlay/overlayRenderContainer';
import { DockviewGroupPanelFloatingChangeEvent } from './dockviewGroupPanelApi';
import {
DockviewGroupMoveParams,
DockviewGroupPanelFloatingChangeEvent,
} from './dockviewGroupPanelApi';
import { DockviewGroupLocation } from '../dockview/dockviewGroupPanelModel';
export interface TitleEvent {
@ -25,6 +27,8 @@ export interface GroupChangedEvent {
// empty
}
export type DockviewPanelMoveParams = DockviewGroupMoveParams;
export interface DockviewPanelApi
extends Omit<
GridviewPanelApi,
@ -50,11 +54,7 @@ export interface DockviewPanelApi
close(): void;
setTitle(title: string): void;
setRenderer(renderer: DockviewPanelRenderer): void;
moveTo(options: {
group: DockviewGroupPanel;
position?: Position;
index?: number;
}): void;
moveTo(options: DockviewPanelMoveParams): void;
maximize(): void;
isMaximized(): boolean;
exitMaximized(): void;
@ -160,16 +160,14 @@ export class DockviewPanelApiImpl
return this.group.api.getWindow();
}
moveTo(options: {
group: DockviewGroupPanel;
position?: Position;
index?: number;
}): void {
moveTo(options: DockviewPanelMoveParams): void {
this.accessor.moveGroupOrPanel({
from: { groupId: this._group.id, panelId: this.panel.id },
to: {
group: options.group,
position: options.position ?? 'center',
group: options.group ?? this._group,
position: options.group
? options.position ?? 'center'
: 'center',
index: options.index,
},
});

4
packages/dockview-core/src/dockview/components/panel/content.ts
View File

@ -154,6 +154,10 @@ export class ContentContainer
referenceContainer: this,
});
break;
default:
throw new Error(
`dockview: invalid renderer type '${panel.api.renderer}'`
);
}
if (doRender) {

3
packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts
View File

@ -347,9 +347,6 @@ export class TabsContainer
return;
}
const tab = new Tab(panel, this.accessor, this.group);
if (!panel.view?.tab) {
throw new Error('invalid header component');
}
tab.setContent(panel.view.tab);
const disposable = new CompositeDisposable(

103
packages/dockview-core/src/dockview/dockviewComponent.ts
View File

@ -541,7 +541,6 @@ export class DockviewComponent
addPopoutGroup(
itemToPopout: DockviewPanel | DockviewGroupPanel,
options?: {
skipRemoveGroup?: boolean;
position?: Box;
popoutUrl?: string;
onDidOpen?: (event: { id: string; window: Window }) => void;
@ -627,41 +626,51 @@ export class DockviewComponent
const referenceLocation = itemToPopout.api.location.type;
const group =
options?.overridePopoutGroup ??
this.createGroup({ id: groupId });
/**
* The group that is being added doesn't already exist within the DOM, the most likely occurance
* of this case is when being called from the `fromJSON(...)` method
*/
const isGroupAddedToDom =
referenceGroup.element.parentElement !== null;
const group = !isGroupAddedToDom
? referenceGroup
: options?.overridePopoutGroup ??
this.createGroup({ id: groupId });
group.model.renderContainer = overlayRenderContainer;
group.layout(
_window.window!.innerWidth,
_window.window!.innerHeight
);
if (!options?.overridePopoutGroup) {
if (!this._groups.has(group.api.id)) {
this._onDidAddGroup.fire(group);
}
if (itemToPopout instanceof DockviewPanel) {
this.movingLock(() => {
const panel =
referenceGroup.model.removePanel(itemToPopout);
group.model.openPanel(panel);
});
} else {
this.movingLock(() =>
moveGroupWithoutDestroying({
from: referenceGroup,
to: group,
})
);
if (!options?.overridePopoutGroup && isGroupAddedToDom) {
if (itemToPopout instanceof DockviewPanel) {
this.movingLock(() => {
const panel =
referenceGroup.model.removePanel(itemToPopout);
group.model.openPanel(panel);
});
} else {
this.movingLock(() =>
moveGroupWithoutDestroying({
from: referenceGroup,
to: group,
})
);
switch (referenceLocation) {
case 'grid':
referenceGroup.api.setVisible(false);
break;
case 'floating':
case 'popout':
this.removeGroup(referenceGroup);
break;
switch (referenceLocation) {
case 'grid':
referenceGroup.api.setVisible(false);
break;
case 'floating':
case 'popout':
this.removeGroup(referenceGroup);
break;
}
}
}
@ -676,7 +685,10 @@ export class DockviewComponent
getWindow: () => _window.window!,
};
if (itemToPopout.api.location.type === 'grid') {
if (
isGroupAddedToDom &&
itemToPopout.api.location.type === 'grid'
) {
itemToPopout.api.setVisible(false);
}
@ -698,8 +710,12 @@ export class DockviewComponent
const value = {
window: _window,
popoutGroup: group,
referenceGroup: this.getPanel(referenceGroup.id)
? referenceGroup.id
referenceGroup: !isGroupAddedToDom
? undefined
: referenceGroup
? this.getPanel(referenceGroup.id)
? referenceGroup.id
: undefined
: undefined,
disposable: {
dispose: () => {
@ -727,7 +743,10 @@ export class DockviewComponent
),
overlayRenderContainer,
Disposable.from(() => {
if (this.getPanel(referenceGroup.id)) {
if (
isGroupAddedToDom &&
this.getPanel(referenceGroup.id)
) {
this.movingLock(() =>
moveGroupWithoutDestroying({
from: group,
@ -745,14 +764,21 @@ export class DockviewComponent
});
}
} else if (this.getPanel(group.id)) {
const removedGroup = this.doRemoveGroup(group, {
this.doRemoveGroup(group, {
skipDispose: true,
skipActive: true,
skipPopoutReturn: true,
});
const removedGroup = group;
removedGroup.model.renderContainer =
this.overlayRenderContainer;
removedGroup.model.location = { type: 'grid' };
returnedGroup = removedGroup;
this.doAddGroup(removedGroup, [0]);
this.doSetGroupAndPanelActive(removedGroup);
}
})
);
@ -1279,7 +1305,6 @@ export class DockviewComponent
? this.getPanel(gridReferenceGroup)
: undefined) ?? group,
{
skipRemoveGroup: true,
position: position ?? undefined,
overridePopoutGroup: gridReferenceGroup
? group
@ -1299,6 +1324,10 @@ export class DockviewComponent
}
}
} catch (err) {
console.error(
'dockview: failed to deserialize layout. Reverting changes',
err
);
/**
* Takes all the successfully created groups and remove all of their panels.
*/
@ -1387,12 +1416,15 @@ export class DockviewComponent
height: options.initialHeight,
};
let index: number | undefined;
if (options.position) {
if (isPanelOptionsWithPanel(options.position)) {
const referencePanel =
typeof options.position.referencePanel === 'string'
? this.getGroupPanel(options.position.referencePanel)
: options.position.referencePanel;
index = options.position.index;
if (!referencePanel) {
throw new Error(
@ -1407,6 +1439,7 @@ export class DockviewComponent
? this._groups.get(options.position.referenceGroup)
?.value
: options.position.referenceGroup;
index = options.position.index;
if (!referenceGroup) {
throw new Error(
@ -1422,6 +1455,7 @@ export class DockviewComponent
group.model.openPanel(panel, {
skipSetActive: options.inactive,
skipSetGroupActive: options.inactive,
index,
});
if (!options.inactive) {
@ -1468,6 +1502,7 @@ export class DockviewComponent
group.model.openPanel(panel, {
skipSetActive: options.inactive,
skipSetGroupActive: options.inactive,
index,
});
} else if (
referenceGroup.api.location.type === 'floating' ||
@ -1477,6 +1512,7 @@ export class DockviewComponent
referenceGroup.model.openPanel(panel, {
skipSetActive: options.inactive,
skipSetGroupActive: options.inactive,
index,
});
referenceGroup.api.setSize({
@ -1505,6 +1541,7 @@ export class DockviewComponent
group.model.openPanel(panel, {
skipSetActive: options.inactive,
skipSetGroupActive: options.inactive,
index,
});
if (!options.inactive) {
@ -1532,6 +1569,7 @@ export class DockviewComponent
group.model.openPanel(panel, {
skipSetActive: options.inactive,
skipSetGroupActive: options.inactive,
index,
});
} else {
const group = this.createGroupAtLocation(
@ -1544,6 +1582,7 @@ export class DockviewComponent
group.model.openPanel(panel, {
skipSetActive: options.inactive,
skipSetGroupActive: options.inactive,
index,
});
if (!options.inactive) {

36
packages/dockview-core/src/dockview/dockviewGroupPanel.ts
View File

@ -34,32 +34,36 @@ export class DockviewGroupPanel
{
private readonly _model: DockviewGroupPanelModel;
get minimumWidth(): number {
override get minimumWidth(): number {
const activePanelMinimumWidth = this.activePanel?.minimumWidth;
return typeof activePanelMinimumWidth === 'number'
? activePanelMinimumWidth
: MINIMUM_DOCKVIEW_GROUP_PANEL_WIDTH;
if (typeof activePanelMinimumWidth === 'number') {
return activePanelMinimumWidth;
}
return super.__minimumWidth();
}
get minimumHeight(): number {
override get minimumHeight(): number {
const activePanelMinimumHeight = this.activePanel?.minimumHeight;
return typeof activePanelMinimumHeight === 'number'
? activePanelMinimumHeight
: MINIMUM_DOCKVIEW_GROUP_PANEL_HEIGHT;
if (typeof activePanelMinimumHeight === 'number') {
return activePanelMinimumHeight;
}
return super.__minimumHeight();
}
get maximumWidth(): number {
override get maximumWidth(): number {
const activePanelMaximumWidth = this.activePanel?.maximumWidth;
return typeof activePanelMaximumWidth === 'number'
? activePanelMaximumWidth
: Number.MAX_SAFE_INTEGER;
if (typeof activePanelMaximumWidth === 'number') {
return activePanelMaximumWidth;
}
return super.__maximumWidth();
}
get maximumHeight(): number {
override get maximumHeight(): number {
const activePanelMaximumHeight = this.activePanel?.maximumHeight;
return typeof activePanelMaximumHeight === 'number'
? activePanelMaximumHeight
: Number.MAX_SAFE_INTEGER;
if (typeof activePanelMaximumHeight === 'number') {
return activePanelMaximumHeight;
}
return super.__maximumHeight();
}
get panels(): IDockviewPanel[] {

5
packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts
View File

@ -264,6 +264,7 @@ export class DockviewGroupPanelModel
private _location: DockviewGroupLocation = { type: 'grid' };
private mostRecentlyUsed: IDockviewPanel[] = [];
private _overwriteRenderContainer: OverlayRenderContainer | null = null;
private readonly _onDidChange = new Emitter<IViewSize | undefined>();
readonly onDidChange: Event<IViewSize | undefined> =
@ -326,7 +327,7 @@ export class DockviewGroupPanelModel
private readonly _api: DockviewApi;
get element(): HTMLElement {
throw new Error('not supported');
throw new Error('dockview: not supported');
}
get activePanel(): IDockviewPanel | undefined {
@ -513,8 +514,6 @@ export class DockviewGroupPanelModel
this.contentContainer.element.focus();
}
private _overwriteRenderContainer: OverlayRenderContainer | null = null;
set renderContainer(value: OverlayRenderContainer | null) {
this.panels.forEach((panel) => {
this.renderContainer.detatch(panel);

2
packages/dockview-core/src/dockview/dockviewPanelModel.ts
View File

@ -13,7 +13,7 @@ export interface IDockviewPanelModel extends IDisposable {
readonly contentComponent: string;
readonly tabComponent?: string;
readonly content: IContentRenderer;
readonly tab?: ITabRenderer;
readonly tab: ITabRenderer;
update(event: PanelUpdateEvent): void;
layout(width: number, height: number): void;
init(params: GroupPanelPartInitParameters): void;

8
packages/dockview-core/src/dockview/options.ts
View File

@ -159,11 +159,19 @@ export interface PanelOptions<P extends object = Parameters> {
type RelativePanel = {
direction?: Direction;
referencePanel: string | IDockviewPanel;
/**
* The index to place the panel within a group, only applicable if the placement is within an existing group
*/
index?: number;
};
type RelativeGroup = {
direction?: Direction;
referenceGroup: string | DockviewGroupPanel;
/**
* The index to place the panel within a group, only applicable if the placement is within an existing group
*/
index?: number;
};
type AbsolutePosition = {

2
packages/dockview-core/src/dockview/types.ts
View File

@ -2,7 +2,7 @@ import { DockviewPanelApi } from '../api/dockviewPanelApi';
import { PanelInitParameters, IPanel } from '../panel/types';
import { DockviewApi } from '../api/component.api';
import { Optional } from '../types';
import { DockviewGroupPanel, IDockviewGroupPanel } from './dockviewGroupPanel';
import { IDockviewGroupPanel } from './dockviewGroupPanel';
import { DockviewPanelRenderer } from '../overlay/overlayRenderContainer';
export interface HeaderPartInitParameters {

64
packages/dockview-core/src/gridview/gridviewPanel.ts
View File

@ -74,6 +74,38 @@ export abstract class GridviewPanel<
}
get minimumWidth(): number {
/**
* defer to protected function to allow subclasses to override easily.
* see https://github.com/microsoft/TypeScript/issues/338
*/
return this.__minimumWidth();
}
get minimumHeight(): number {
/**
* defer to protected function to allow subclasses to override easily.
* see https://github.com/microsoft/TypeScript/issues/338
*/
return this.__minimumHeight();
}
get maximumHeight(): number {
/**
* defer to protected function to allow subclasses to override easily.
* see https://github.com/microsoft/TypeScript/issues/338
*/
return this.__maximumHeight();
}
get maximumWidth(): number {
/**
* defer to protected function to allow subclasses to override easily.
* see https://github.com/microsoft/TypeScript/issues/338
*/
return this.__maximumWidth();
}
protected __minimumWidth(): number {
const width =
typeof this._minimumWidth === 'function'
? this._minimumWidth()
@ -87,7 +119,21 @@ export abstract class GridviewPanel<
return width;
}
get minimumHeight(): number {
protected __maximumWidth(): number {
const width =
typeof this._maximumWidth === 'function'
? this._maximumWidth()
: this._maximumWidth;
if (width !== this._evaluatedMaximumWidth) {
this._evaluatedMaximumWidth = width;
this.updateConstraints();
}
return width;
}
protected __minimumHeight(): number {
const height =
typeof this._minimumHeight === 'function'
? this._minimumHeight()
@ -101,7 +147,7 @@ export abstract class GridviewPanel<
return height;
}
get maximumHeight(): number {
protected __maximumHeight(): number {
const height =
typeof this._maximumHeight === 'function'
? this._maximumHeight()
@ -115,20 +161,6 @@ export abstract class GridviewPanel<
return height;
}
get maximumWidth(): number {
const width =
typeof this._maximumWidth === 'function'
? this._maximumWidth()
: this._maximumWidth;
if (width !== this._evaluatedMaximumWidth) {
this._evaluatedMaximumWidth = width;
this.updateConstraints();
}
return width;
}
get isActive(): boolean {
return this.api.isActive;
}

2
packages/dockview-core/src/index.ts
View File

@ -100,6 +100,7 @@ export {
TitleEvent,
RendererChangedEvent,
DockviewPanelApi,
DockviewPanelMoveParams,
} from './api/dockviewPanelApi';
export {
PanelSizeEvent,
@ -110,6 +111,7 @@ export { ExpansionEvent, PaneviewPanelApi } from './api/paneviewPanelApi';
export {
DockviewGroupPanelApi,
DockviewGroupPanelFloatingChangeEvent,
DockviewGroupMoveParams,
} from './api/dockviewGroupPanelApi';
export {
CommonApi,

1
packages/dockview-core/src/popoutWindow.ts
View File

@ -59,7 +59,6 @@ export class PopoutWindow extends CompositeDisposable {
});
this._window.disposable.dispose();
this._window.value.close();
this._window = null;
this._onDidClose.fire();

1
packages/dockview-core/src/splitview/splitview.scss
View File

@ -134,7 +134,6 @@
position: relative;
height: 100%;
width: 100%;
background-color: var(--dv-background-color);
.dv-view {
height: 100%;

2
packages/dockview-core/src/splitview/splitview.ts
View File

@ -101,7 +101,7 @@ export class Splitview {
private readonly viewContainer: HTMLElement;
private readonly sashContainer: HTMLElement;
private readonly viewItems: ViewItem[] = [];
private sashes: ISashItem[] = [];
private readonly sashes: ISashItem[] = [];
private _orientation: Orientation;
private _size = 0;
private _orthogonalSize = 0;

21
packages/dockview-core/src/theme.scss
View File

@ -1,5 +1,4 @@
@mixin dockview-theme-core-mixin {
--dv-background-color: black;
--dv-paneview-active-outline-color: dodgerblue;
--dv-tabs-and-actions-container-font-size: 13px;
--dv-tabs-and-actions-container-height: 35px;
@ -308,25 +307,9 @@
&:hover {
&::after {
content: '';
height: 40px;
width: 4px;
border-radius: 2px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: var(
--dv-separator-handle-background-color
--dv-separator-handle-hover-background-color
);
position: absolute;
}
&:hover {
&::after {
background-color: var(
--dv-separator-handle-hover-background-color
);
}
}
}
}
@ -355,8 +338,6 @@
--dv-separator-border: transparent;
--dv-paneview-header-border-color: rgb(51, 51, 51);
--dv-background-color: #ebeced;
/////
--dv-separator-handle-background-color: #cfd1d3;
--dv-separator-handle-hover-background-color: #babbbb;

11
packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx
View File

@ -103,7 +103,8 @@ export const GridActions = (props: {
if (state) {
try {
props.api?.fromJSON(JSON.parse(state));
} catch {
} catch (err) {
console.error('failed to load state', err);
localStorage.removeItem('dv-demo-state');
}
}
@ -121,8 +122,12 @@ export const GridActions = (props: {
const onReset = () => {
if (props.api) {
props.api.clear();
defaultConfig(props.api);
try {
props.api.clear();
defaultConfig(props.api);
} catch (err) {
localStorage.removeItem('dv-demo-state');
}
}
};

536
packages/docs/src/generated/api.output.json
View File

@ -3052,7 +3052,7 @@
},
{
"name": "addPopoutGroup",
"code": "(item: IDockviewPanel | DockviewGroupPanel, options?: { onDidOpen?: (event: { id: string, window: Window }): void, onWillClose?: (event: { id: string, window: Window }): void, popoutUrl?: string, position?: Box }): Promise<void>",
"code": "(item: IDockviewPanel | DockviewGroupPanel, options?: { onDidOpen?: (event: { id: string, window: Window }): void, onWillClose?: (event: { id: string, window: Window }): void, popoutUrl?: string, position?: Box }): Promise<boolean>",
"kind": "method",
"signature": [
{
@ -3267,11 +3267,11 @@
"typeArguments": [
{
"type": "intrinsic",
"value": "void"
"value": "boolean"
}
]
},
"code": "(item: IDockviewPanel | DockviewGroupPanel, options?: { onDidOpen?: (event: { id: string, window: Window }): void, onWillClose?: (event: { id: string, window: Window }): void, popoutUrl?: string, position?: Box }): Promise<void>",
"code": "(item: IDockviewPanel | DockviewGroupPanel, options?: { onDidOpen?: (event: { id: string, window: Window }): void, onWillClose?: (event: { id: string, window: Window }): void, popoutUrl?: string, position?: Box }): Promise<boolean>",
"kind": "callSignature"
}
],
@ -5155,7 +5155,7 @@
},
{
"name": "addPopoutGroup",
"code": "(itemToPopout: DockviewPanel | DockviewGroupPanel, options?: { onDidOpen?: (event: { id: string, window: Window }): void, onWillClose?: (event: { id: string, window: Window }): void, overridePopoutGroup?: DockviewGroupPanel, popoutUrl?: string, position?: Box, skipRemoveGroup?: boolean }): Promise<void>",
"code": "(itemToPopout: DockviewPanel | DockviewGroupPanel, options?: { onDidOpen?: (event: { id: string, window: Window }): void, onWillClose?: (event: { id: string, window: Window }): void, overridePopoutGroup?: DockviewGroupPanel, popoutUrl?: string, position?: Box, skipRemoveGroup?: boolean }): Promise<boolean>",
"kind": "method",
"signature": [
{
@ -5387,11 +5387,11 @@
"typeArguments": [
{
"type": "intrinsic",
"value": "void"
"value": "boolean"
}
]
},
"code": "(itemToPopout: DockviewPanel | DockviewGroupPanel, options?: { onDidOpen?: (event: { id: string, window: Window }): void, onWillClose?: (event: { id: string, window: Window }): void, overridePopoutGroup?: DockviewGroupPanel, popoutUrl?: string, position?: Box, skipRemoveGroup?: boolean }): Promise<void>",
"code": "(itemToPopout: DockviewPanel | DockviewGroupPanel, options?: { onDidOpen?: (event: { id: string, window: Window }): void, onWillClose?: (event: { id: string, window: Window }): void, overridePopoutGroup?: DockviewGroupPanel, popoutUrl?: string, position?: Box, skipRemoveGroup?: boolean }): Promise<boolean>",
"kind": "callSignature"
}
]
@ -14931,192 +14931,6 @@
"BasePanelView"
]
},
"LocalSelectionTransfer": {
"kind": "class",
"name": "LocalSelectionTransfer",
"children": [
{
"name": "clearData",
"code": "(proto: LocalSelectionTransfer.T): void",
"kind": "method",
"signature": [
{
"name": "clearData",
"typeParameters": [],
"parameters": [
{
"name": "proto",
"code": "proto: LocalSelectionTransfer.T",
"type": {
"type": "reference",
"value": "T",
"source": "dockview-core",
"refersToTypeParameter": true
},
"kind": "parameter"
}
],
"returnType": {
"type": "intrinsic",
"value": "void"
},
"code": "(proto: LocalSelectionTransfer.T): void",
"kind": "callSignature"
}
]
},
{
"name": "getData",
"code": "(proto: LocalSelectionTransfer.T): LocalSelectionTransfer.T[] | undefined",
"kind": "method",
"signature": [
{
"name": "getData",
"typeParameters": [],
"parameters": [
{
"name": "proto",
"code": "proto: LocalSelectionTransfer.T",
"type": {
"type": "reference",
"value": "T",
"source": "dockview-core",
"refersToTypeParameter": true
},
"kind": "parameter"
}
],
"returnType": {
"type": "or",
"values": [
{
"type": "array",
"value": {
"type": "reference",
"value": "T",
"source": "dockview-core",
"refersToTypeParameter": true
}
},
{
"type": "intrinsic",
"value": "undefined"
}
]
},
"code": "(proto: LocalSelectionTransfer.T): LocalSelectionTransfer.T[] | undefined",
"kind": "callSignature"
}
]
},
{
"name": "hasData",
"code": "(proto: LocalSelectionTransfer.T): boolean",
"kind": "method",
"signature": [
{
"name": "hasData",
"typeParameters": [],
"parameters": [
{
"name": "proto",
"code": "proto: LocalSelectionTransfer.T",
"type": {
"type": "reference",
"value": "T",
"source": "dockview-core",
"refersToTypeParameter": true
},
"kind": "parameter"
}
],
"returnType": {
"type": "intrinsic",
"value": "boolean"
},
"code": "(proto: LocalSelectionTransfer.T): boolean",
"kind": "callSignature"
}
]
},
{
"name": "setData",
"code": "(data: LocalSelectionTransfer.T[], proto: LocalSelectionTransfer.T): void",
"kind": "method",
"signature": [
{
"name": "setData",
"typeParameters": [],
"parameters": [
{
"name": "data",
"code": "data: LocalSelectionTransfer.T[]",
"type": {
"type": "array",
"value": {
"type": "reference",
"value": "T",
"source": "dockview-core",
"refersToTypeParameter": true
}
},
"kind": "parameter"
},
{
"name": "proto",
"code": "proto: LocalSelectionTransfer.T",
"type": {
"type": "reference",
"value": "T",
"source": "dockview-core",
"refersToTypeParameter": true
},
"kind": "parameter"
}
],
"returnType": {
"type": "intrinsic",
"value": "void"
},
"code": "(data: LocalSelectionTransfer.T[], proto: LocalSelectionTransfer.T): void",
"kind": "callSignature"
}
]
},
{
"name": "getInstance",
"code": "<T>(): LocalSelectionTransfer<T>",
"kind": "method",
"signature": [
{
"name": "getInstance",
"typeParameters": [
{
"name": "T"
}
],
"parameters": [],
"returnType": {
"type": "reference",
"value": "LocalSelectionTransfer",
"source": "dockview-core",
"typeArguments": [
{
"type": "reference",
"value": "T",
"source": "dockview-core",
"refersToTypeParameter": true
}
]
},
"code": "<T>(): LocalSelectionTransfer<T>",
"kind": "callSignature"
}
]
}
],
"extends": []
},
"PaneFramework": {
"kind": "class",
"name": "PaneFramework",
@ -24320,6 +24134,31 @@
],
"extends": []
},
"DockviewIDisposable": {
"kind": "interface",
"name": "DockviewIDisposable",
"children": [
{
"name": "dispose",
"code": "(): void",
"kind": "method",
"signature": [
{
"name": "dispose",
"typeParameters": [],
"parameters": [],
"returnType": {
"type": "intrinsic",
"value": "void"
},
"code": "(): void",
"kind": "callSignature"
}
]
}
],
"extends": []
},
"DockviewOptions": {
"kind": "interface",
"name": "DockviewOptions",
@ -25671,70 +25510,6 @@
],
"extends": []
},
"FrameworkFactory": {
"kind": "interface",
"name": "FrameworkFactory",
"children": [
{
"name": "createComponent",
"code": "(id: string, componentId: string, component: any): FrameworkFactory.T",
"kind": "property",
"type": {
"type": "reflection",
"value": {
"name": "__type",
"code": "(id: string, componentId: string, component: any): FrameworkFactory.T",
"kind": "typeLiteral",
"signatures": [
{
"name": "__type",
"typeParameters": [],
"parameters": [
{
"name": "id",
"code": "id: string",
"type": {
"type": "intrinsic",
"value": "string"
},
"kind": "parameter"
},
{
"name": "componentId",
"code": "componentId: string",
"type": {
"type": "intrinsic",
"value": "string"
},
"kind": "parameter"
},
{
"name": "component",
"code": "component: any",
"type": {
"type": "intrinsic",
"value": "any"
},
"kind": "parameter"
}
],
"returnType": {
"type": "reference",
"value": "T",
"source": "dockview-core",
"refersToTypeParameter": true
},
"code": "(id: string, componentId: string, component: any): FrameworkFactory.T",
"kind": "callSignature"
}
]
}
},
"flags": {}
}
],
"extends": []
},
"GridBranchNode": {
"kind": "interface",
"name": "GridBranchNode",
@ -29257,7 +29032,7 @@
},
{
"name": "addPopoutGroup",
"code": "(item: IDockviewPanel | DockviewGroupPanel, options?: { onDidOpen?: (event: { id: string, window: Window }): void, onWillClose?: (event: { id: string, window: Window }): void, popoutUrl?: string, position?: Box }): Promise<void>",
"code": "(item: IDockviewPanel | DockviewGroupPanel, options?: { onDidOpen?: (event: { id: string, window: Window }): void, onWillClose?: (event: { id: string, window: Window }): void, popoutUrl?: string, position?: Box }): Promise<boolean>",
"kind": "method",
"signature": [
{
@ -29464,11 +29239,11 @@
"typeArguments": [
{
"type": "intrinsic",
"value": "void"
"value": "boolean"
}
]
},
"code": "(item: IDockviewPanel | DockviewGroupPanel, options?: { onDidOpen?: (event: { id: string, window: Window }): void, onWillClose?: (event: { id: string, window: Window }): void, popoutUrl?: string, position?: Box }): Promise<void>",
"code": "(item: IDockviewPanel | DockviewGroupPanel, options?: { onDidOpen?: (event: { id: string, window: Window }): void, onWillClose?: (event: { id: string, window: Window }): void, popoutUrl?: string, position?: Box }): Promise<boolean>",
"kind": "callSignature"
}
]
@ -30065,31 +29840,6 @@
"IBaseGrid"
]
},
"IDockviewDisposable": {
"kind": "interface",
"name": "IDockviewDisposable",
"children": [
{
"name": "dispose",
"code": "(): void",
"kind": "method",
"signature": [
{
"name": "dispose",
"typeParameters": [],
"parameters": [],
"returnType": {
"type": "intrinsic",
"value": "void"
},
"code": "(): void",
"kind": "callSignature"
}
]
}
],
"extends": []
},
"IDockviewGroupPanel": {
"kind": "interface",
"name": "IDockviewGroupPanel",
@ -41546,27 +41296,6 @@
},
"kind": "typeAlias"
},
"ComponentConstructor": {
"name": "ComponentConstructor",
"code": "",
"typeParameters": [],
"type": {
"type": "reflection",
"value": {
"name": "__type",
"code": "",
"kind": "typeLiteral",
"signatures": [
{
"name": "new ComponentConstructor",
"code": "",
"kind": "constructorSignature"
}
]
}
},
"kind": "typeAlias"
},
"Direction": {
"name": "Direction",
"code": "'within' | 'below' | 'above' | 'right' | 'left'",
@ -42111,119 +41840,6 @@
"code": "",
"kind": "variable"
},
"createComponent": {
"name": "createComponent",
"code": "<T>(id: string, componentName?: string, components: , frameworkComponents: , createFrameworkComponent?: FrameworkFactory<T>, fallback?: (): T): T",
"signature": {
"name": "createComponent",
"typeParameters": [
{
"name": "T"
}
],
"parameters": [
{
"name": "id",
"code": "id: string",
"type": {
"type": "intrinsic",
"value": "string"
},
"kind": "parameter"
},
{
"name": "componentName",
"code": "componentName?: string",
"type": {
"type": "intrinsic",
"value": "string"
},
"kind": "parameter"
},
{
"name": "components",
"code": "components: ",
"type": {
"type": "reflection",
"value": {
"name": "__type",
"code": "",
"kind": "typeLiteral"
}
},
"kind": "parameter"
},
{
"name": "frameworkComponents",
"code": "frameworkComponents: ",
"type": {
"type": "reflection",
"value": {
"name": "__type",
"code": "",
"kind": "typeLiteral"
}
},
"kind": "parameter"
},
{
"name": "createFrameworkComponent",
"code": "createFrameworkComponent?: FrameworkFactory<T>",
"type": {
"type": "reference",
"value": "FrameworkFactory",
"source": "dockview-core",
"typeArguments": [
{
"type": "reference",
"value": "T",
"source": "dockview-core",
"refersToTypeParameter": true
}
]
},
"kind": "parameter"
},
{
"name": "fallback",
"code": "fallback?: (): T",
"type": {
"type": "reflection",
"value": {
"name": "__type",
"code": "(): T",
"kind": "typeLiteral",
"signatures": [
{
"name": "__type",
"typeParameters": [],
"parameters": [],
"returnType": {
"type": "reference",
"value": "T",
"source": "dockview-core",
"refersToTypeParameter": true
},
"code": "(): T",
"kind": "callSignature"
}
]
}
},
"kind": "parameter"
}
],
"returnType": {
"type": "reference",
"value": "T",
"source": "dockview-core",
"refersToTypeParameter": true
},
"code": "<T>(id: string, componentName?: string, components: , frameworkComponents: , createFrameworkComponent?: FrameworkFactory<T>, fallback?: (): T): T",
"kind": "callSignature"
},
"kind": "function"
},
"createDockview": {
"name": "createDockview",
"code": "(element: HTMLElement, options: DockviewComponentOptions): DockviewApi",
@ -43233,90 +42849,6 @@
"isOptional": true
}
},
{
"name": "showDndOverlay",
"code": "(event: DockviewDndOverlayEvent): boolean",
"kind": "property",
"type": {
"type": "reflection",
"value": {
"name": "__type",
"code": "(event: DockviewDndOverlayEvent): boolean",
"kind": "typeLiteral",
"signatures": [
{
"name": "__type",
"comment": {
"summary": [],
"blockTags": [
{
"tag": "@deprecated",
"content": [
{
"kind": "text",
"text": "use "
},
{
"kind": "code",
"text": "`api.onUnhandledDragOverEvent`"
},
{
"kind": "text",
"text": " instead. This will be removed in the next release."
}
]
}
]
},
"typeParameters": [],
"parameters": [
{
"name": "event",
"code": "event: DockviewDndOverlayEvent",
"type": {
"type": "reference",
"value": "DockviewDndOverlayEvent",
"source": "dockview-core"
},
"kind": "parameter"
}
],
"returnType": {
"type": "intrinsic",
"value": "boolean"
},
"code": "(event: DockviewDndOverlayEvent): boolean",
"kind": "callSignature"
}
]
}
},
"flags": {
"isOptional": true
},
"comment": {
"summary": [],
"blockTags": [
{
"tag": "@deprecated",
"content": [
{
"kind": "text",
"text": "use "
},
{
"kind": "code",
"text": "`api.onUnhandledDragOverEvent`"
},
{
"kind": "text",
"text": " instead. This will be removed in the next release."
}
]
}
]
}
},
{
"name": "tabComponents",
"code": "Record<string, React.FunctionComponent<IDockviewPanelHeaderProps>>",