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

feat: offical support for vanilla typescript

Browse Source
This commit is contained in:
mathuo 2024-07-16 21:25:18 +01:00
parent 374bd2adff
commit e86155adf4
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
26 changed files with 371 additions and 412 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/dockview-core/src/__tests__/api/dockviewPanelApi.spec.ts
View File

@ -9,7 +9,7 @@ describe('groupPanelApi', () => {
const accessor = fromPartial<DockviewComponent>({ const accessor = fromPartial<DockviewComponent>({
onDidAddPanel: jest.fn(), onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(), onDidRemovePanel: jest.fn(),
options: { parentElement: document.createElement('div') }, options: {},
}); });
const panelMock = jest.fn<DockviewPanel, []>(() => { const panelMock = jest.fn<DockviewPanel, []>(() => {
@ -49,7 +49,7 @@ describe('groupPanelApi', () => {
const accessor = fromPartial<DockviewComponent>({ const accessor = fromPartial<DockviewComponent>({
onDidAddPanel: jest.fn(), onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(), onDidRemovePanel: jest.fn(),
options: { parentElement: document.createElement('div') }, options: {},
}); });
const groupViewPanel = new DockviewGroupPanel( const groupViewPanel = new DockviewGroupPanel(
@ -81,7 +81,7 @@ describe('groupPanelApi', () => {
const accessor = fromPartial<DockviewComponent>({ const accessor = fromPartial<DockviewComponent>({
onDidAddPanel: jest.fn(), onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(), onDidRemovePanel: jest.fn(),
options: { parentElement: document.createElement('div') }, options: {},
}); });
const groupViewPanel = new DockviewGroupPanel( const groupViewPanel = new DockviewGroupPanel(

26
packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts
View File

@ -16,7 +16,7 @@ describe('tabsContainer', () => {
const accessor = fromPartial<DockviewComponent>({ const accessor = fromPartial<DockviewComponent>({
onDidAddPanel: jest.fn(), onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(), onDidRemovePanel: jest.fn(),
options: { parentElement: document.createElement('div') }, options: {},
}); });
const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>( const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
@ -69,7 +69,7 @@ describe('tabsContainer', () => {
id: 'testcomponentid', id: 'testcomponentid',
onDidAddPanel: jest.fn(), onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(), onDidRemovePanel: jest.fn(),
options: { parentElement: document.createElement('div') }, options: {},
}); });
const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>( const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
@ -135,7 +135,7 @@ describe('tabsContainer', () => {
id: 'testcomponentid', id: 'testcomponentid',
onDidAddPanel: jest.fn(), onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(), onDidRemovePanel: jest.fn(),
options: { parentElement: document.createElement('div') }, options: {},
}); });
const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>( const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
@ -198,7 +198,7 @@ describe('tabsContainer', () => {
id: 'testcomponentid', id: 'testcomponentid',
onDidAddPanel: jest.fn(), onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(), onDidRemovePanel: jest.fn(),
options: { parentElement: document.createElement('div') }, options: {},
}); });
const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>( const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
@ -261,7 +261,7 @@ describe('tabsContainer', () => {
id: 'testcomponentid', id: 'testcomponentid',
onDidAddPanel: jest.fn(), onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(), onDidRemovePanel: jest.fn(),
options: { parentElement: document.createElement('div') }, options: {},
}); });
const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>( const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
@ -329,7 +329,7 @@ describe('tabsContainer', () => {
id: 'testcomponentid', id: 'testcomponentid',
onDidAddPanel: jest.fn(), onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(), onDidRemovePanel: jest.fn(),
options: { parentElement: document.createElement('div') }, options: {},
}); });
const groupPanelMock = jest.fn<DockviewGroupPanel, []>(() => { const groupPanelMock = jest.fn<DockviewGroupPanel, []>(() => {
@ -393,7 +393,7 @@ describe('tabsContainer', () => {
id: 'testcomponentid', id: 'testcomponentid',
onDidAddPanel: jest.fn(), onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(), onDidRemovePanel: jest.fn(),
options: { parentElement: document.createElement('div') }, options: {},
}); });
const groupPanelMock = jest.fn<DockviewGroupPanel, []>(() => { const groupPanelMock = jest.fn<DockviewGroupPanel, []>(() => {
@ -454,7 +454,7 @@ describe('tabsContainer', () => {
test('that a tab will become floating when clicked if not floating and shift is selected', () => { test('that a tab will become floating when clicked if not floating and shift is selected', () => {
const accessor = fromPartial<DockviewComponent>({ const accessor = fromPartial<DockviewComponent>({
options: { parentElement: document.createElement('div') }, options: {},
onDidAddPanel: jest.fn(), onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(), onDidRemovePanel: jest.fn(),
element: document.createElement('div'), element: document.createElement('div'),
@ -508,7 +508,7 @@ describe('tabsContainer', () => {
test('that a tab that is already floating cannot be floated again', () => { test('that a tab that is already floating cannot be floated again', () => {
const accessor = fromPartial<DockviewComponent>({ const accessor = fromPartial<DockviewComponent>({
options: { parentElement: document.createElement('div') }, options: {},
onDidAddPanel: jest.fn(), onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(), onDidRemovePanel: jest.fn(),
element: document.createElement('div'), element: document.createElement('div'),
@ -557,7 +557,7 @@ describe('tabsContainer', () => {
test('that selecting a tab with shift down will move that tab into a new floating group', () => { test('that selecting a tab with shift down will move that tab into a new floating group', () => {
const accessor = fromPartial<DockviewComponent>({ const accessor = fromPartial<DockviewComponent>({
options: { parentElement: document.createElement('div') }, options: {},
onDidAddPanel: jest.fn(), onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(), onDidRemovePanel: jest.fn(),
element: document.createElement('div'), element: document.createElement('div'),
@ -613,7 +613,7 @@ describe('tabsContainer', () => {
test('pre header actions', () => { test('pre header actions', () => {
const accessor = fromPartial<DockviewComponent>({ const accessor = fromPartial<DockviewComponent>({
options: { parentElement: document.createElement('div') }, options: {},
onDidAddPanel: jest.fn(), onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(), onDidRemovePanel: jest.fn(),
element: document.createElement('div'), element: document.createElement('div'),
@ -680,7 +680,7 @@ describe('tabsContainer', () => {
test('left header actions', () => { test('left header actions', () => {
const accessor = fromPartial<DockviewComponent>({ const accessor = fromPartial<DockviewComponent>({
options: { parentElement: document.createElement('div') }, options: {},
onDidAddPanel: jest.fn(), onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(), onDidRemovePanel: jest.fn(),
element: document.createElement('div'), element: document.createElement('div'),
@ -747,7 +747,7 @@ describe('tabsContainer', () => {
test('right header actions', () => { test('right header actions', () => {
const accessor = fromPartial<DockviewComponent>({ const accessor = fromPartial<DockviewComponent>({
options: { parentElement: document.createElement('div') }, options: {},
onDidAddPanel: jest.fn(), onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(), onDidRemovePanel: jest.fn(),
element: document.createElement('div'), element: document.createElement('div'),

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

@ -101,8 +101,7 @@ describe('dockviewComponent', () => {
beforeEach(() => { beforeEach(() => {
container = document.createElement('div'); container = document.createElement('div');
dockview = new DockviewComponent({ dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -1238,8 +1237,7 @@ describe('dockviewComponent', () => {
test('panel is disposed of when closed', () => { test('panel is disposed of when closed', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -1281,8 +1279,7 @@ describe('dockviewComponent', () => {
test('can add panel of same id if already removed', () => { test('can add panel of same id if already removed', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -1334,8 +1331,7 @@ describe('dockviewComponent', () => {
test('panel is disposed of when removed', () => { test('panel is disposed of when removed', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -1377,8 +1373,7 @@ describe('dockviewComponent', () => {
test('panel is not disposed of when moved to a new group', () => { test('panel is not disposed of when moved to a new group', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -1433,8 +1428,7 @@ describe('dockviewComponent', () => {
test('panel is not disposed of when moved within another group', () => { test('panel is not disposed of when moved within another group', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -1489,8 +1483,7 @@ describe('dockviewComponent', () => {
test('panel is not disposed of when moved within another group', () => { test('panel is not disposed of when moved within another group', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -1543,8 +1536,7 @@ describe('dockviewComponent', () => {
test('panel is disposed of when group is disposed', () => { test('panel is disposed of when group is disposed', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -1594,8 +1586,7 @@ describe('dockviewComponent', () => {
test('panel is disposed of when component is disposed', () => { test('panel is disposed of when component is disposed', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -1645,8 +1636,7 @@ describe('dockviewComponent', () => {
test('panel is disposed of when from JSON is called', () => { test('panel is disposed of when from JSON is called', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -1706,8 +1696,7 @@ describe('dockviewComponent', () => {
test('move entire group into another group', () => { test('move entire group into another group', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -1940,8 +1929,7 @@ describe('dockviewComponent', () => {
test('load a layout with a non-existant tab id', () => { test('load a layout with a non-existant tab id', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -2034,8 +2022,7 @@ describe('dockviewComponent', () => {
test('load and persist layout with custom tab header', () => { test('load and persist layout with custom tab header', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -2157,8 +2144,7 @@ describe('dockviewComponent', () => {
test('#2', () => { test('#2', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -2256,8 +2242,7 @@ describe('dockviewComponent', () => {
test('orthogonal realigment #1', () => { test('orthogonal realigment #1', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -2367,9 +2352,7 @@ describe('dockviewComponent', () => {
test('orthogonal realigment #2', () => { test('orthogonal realigment #2', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -2514,9 +2497,7 @@ describe('dockviewComponent', () => {
test('orthogonal realigment #3', () => { test('orthogonal realigment #3', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -2648,9 +2629,7 @@ describe('dockviewComponent', () => {
test('orthogonal realigment #4', () => { test('orthogonal realigment #4', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -2713,9 +2692,7 @@ describe('dockviewComponent', () => {
test('that a empty component has no groups', () => { test('that a empty component has no groups', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -2735,9 +2712,7 @@ describe('dockviewComponent', () => {
test('that deserializing an empty layout has zero groups and a watermark', () => { test('that deserializing an empty layout has zero groups and a watermark', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -2780,8 +2755,7 @@ describe('dockviewComponent', () => {
test('empty', () => { test('empty', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -2813,8 +2787,7 @@ describe('dockviewComponent', () => {
test('that title and params.title do not conflict', () => { test('that title and params.title do not conflict', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -2904,8 +2877,7 @@ describe('dockviewComponent', () => {
test('check dockview component is rendering to the DOM as expected', () => { test('check dockview component is rendering to the DOM as expected', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -2971,8 +2943,7 @@ describe('dockviewComponent', () => {
test('that fromJSON layouts are resized to the current dimensions', async () => { test('that fromJSON layouts are resized to the current dimensions', async () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -3066,8 +3037,7 @@ describe('dockviewComponent', () => {
test('that moving the last panel to be floating should leave an empty gridview', () => { test('that moving the last panel to be floating should leave an empty gridview', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -3102,8 +3072,7 @@ describe('dockviewComponent', () => {
test('that api.setSize applies to the overlay for floating panels', () => { test('that api.setSize applies to the overlay for floating panels', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -3139,8 +3108,7 @@ describe('dockviewComponent', () => {
test('that external dnd events do not trigger the top-level center dnd target unless empty', () => { test('that external dnd events do not trigger the top-level center dnd target unless empty', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -3293,8 +3261,7 @@ describe('dockviewComponent', () => {
test('that dragging a tab triggers onWillDragPanel', () => { test('that dragging a tab triggers onWillDragPanel', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -3337,8 +3304,7 @@ describe('dockviewComponent', () => {
test('that dragging a group triggers onWillDragGroup', () => { test('that dragging a group triggers onWillDragGroup', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -3381,8 +3347,7 @@ describe('dockviewComponent', () => {
test('corrupt layout: bad inline view', () => { test('corrupt layout: bad inline view', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'panelA': case 'panelA':
@ -3473,8 +3438,7 @@ describe('dockviewComponent', () => {
test('corrupt layout: bad floating view', () => { test('corrupt layout: bad floating view', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'panelA': case 'panelA':
@ -3600,8 +3564,7 @@ describe('dockviewComponent', () => {
test('that disableAutoResizing is false by default', () => { test('that disableAutoResizing is false by default', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'panelA': case 'panelA':
@ -3622,8 +3585,7 @@ describe('dockviewComponent', () => {
test('that disableAutoResizing can be enabled', () => { test('that disableAutoResizing can be enabled', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'panelA': case 'panelA':
@ -3646,8 +3608,7 @@ describe('dockviewComponent', () => {
test('that a floating group can be removed', async () => { test('that a floating group can be removed', async () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -3678,8 +3639,7 @@ describe('dockviewComponent', () => {
test('move a floating group of one tab to a new fixed group', () => { test('move a floating group of one tab to a new fixed group', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -3725,8 +3685,7 @@ describe('dockviewComponent', () => {
test('move a floating group of one tab to an existing fixed group', () => { test('move a floating group of one tab to an existing fixed group', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -3772,8 +3731,7 @@ describe('dockviewComponent', () => {
test('move a floating group of one tab to an existing floating group', () => { test('move a floating group of one tab to an existing floating group', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -3827,8 +3785,7 @@ describe('dockviewComponent', () => {
test('move a floating group of many tabs to a new fixed group', () => { test('move a floating group of many tabs to a new fixed group', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -3882,8 +3839,7 @@ describe('dockviewComponent', () => {
test('move a floating group of many tabs to an existing fixed group', () => { test('move a floating group of many tabs to an existing fixed group', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -3937,8 +3893,7 @@ describe('dockviewComponent', () => {
test('move a floating group of many tabs to an existing floating group', () => { test('move a floating group of many tabs to an existing floating group', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -4000,8 +3955,7 @@ describe('dockviewComponent', () => {
test('move a floating tab of one tab to a new fixed group', () => { test('move a floating tab of one tab to a new fixed group', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -4047,8 +4001,7 @@ describe('dockviewComponent', () => {
test('move a floating tab of one tab to an existing fixed group', () => { test('move a floating tab of one tab to an existing fixed group', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -4094,8 +4047,7 @@ describe('dockviewComponent', () => {
test('move a floating tab of one tab to an existing floating group', () => { test('move a floating tab of one tab to an existing floating group', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -4149,8 +4101,7 @@ describe('dockviewComponent', () => {
test('move a floating tab of many tabs to a new fixed group', () => { test('move a floating tab of many tabs to a new fixed group', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -4204,8 +4155,7 @@ describe('dockviewComponent', () => {
test('move a floating tab of many tabs to an existing fixed group', () => { test('move a floating tab of many tabs to an existing fixed group', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -4259,8 +4209,7 @@ describe('dockviewComponent', () => {
test('move a floating tab of many tabs to an existing floating group', () => { test('move a floating tab of many tabs to an existing floating group', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -4322,8 +4271,7 @@ describe('dockviewComponent', () => {
test('move a fixed tab of one tab to an existing floating group', () => { test('move a fixed tab of one tab to an existing floating group', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -4377,8 +4325,7 @@ describe('dockviewComponent', () => {
test('move a fixed tab of many tabs to an existing floating group', () => { test('move a fixed tab of many tabs to an existing floating group', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -4431,8 +4378,7 @@ describe('dockviewComponent', () => {
test('move a fixed group of one tab to an existing floating group', () => { test('move a fixed group of one tab to an existing floating group', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -4486,8 +4432,7 @@ describe('dockviewComponent', () => {
test('move a fixed group of many tabs to an existing floating group', () => { test('move a fixed group of many tabs to an existing floating group', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -4540,8 +4485,7 @@ describe('dockviewComponent', () => {
test('move a fixed tab of one tab to a new floating group', () => { test('move a fixed tab of one tab to a new floating group', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -4584,8 +4528,7 @@ describe('dockviewComponent', () => {
test('move a fixed tab of many tabs to a new floating group', () => { test('move a fixed tab of many tabs to a new floating group', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -4627,8 +4570,7 @@ describe('dockviewComponent', () => {
test('move a fixed group of one tab to a new floating group', () => { test('move a fixed group of one tab to a new floating group', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -4671,8 +4613,7 @@ describe('dockviewComponent', () => {
test('move a fixed group of many tabs to a new floating group', () => { test('move a fixed group of many tabs to a new floating group', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -4736,8 +4677,7 @@ describe('dockviewComponent', () => {
test('add a popout group', async () => { test('add a popout group', async () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -4779,8 +4719,7 @@ describe('dockviewComponent', () => {
test('that can remove a popout group', async () => { test('that can remove a popout group', async () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -4816,8 +4755,7 @@ describe('dockviewComponent', () => {
test('move from fixed to popout group and back', async () => { test('move from fixed to popout group and back', async () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -4893,8 +4831,7 @@ describe('dockviewComponent', () => {
test('that a maximzied group is set to active', () => { test('that a maximzied group is set to active', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -4941,8 +4878,7 @@ describe('dockviewComponent', () => {
beforeEach(() => { beforeEach(() => {
jest.useFakeTimers(); jest.useFakeTimers();
dockview = new DockviewComponent({ dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -5055,8 +4991,7 @@ describe('dockviewComponent', () => {
test('that setVisible toggles visiblity', () => { test('that setVisible toggles visiblity', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -5168,8 +5103,7 @@ describe('dockviewComponent', () => {
test('setVisible #1', () => { test('setVisible #1', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -5223,8 +5157,7 @@ describe('dockviewComponent', () => {
test('that can add panel', () => { test('that can add panel', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -5258,8 +5191,7 @@ describe('dockviewComponent', () => {
test('that can add panel with absolute direction', () => { test('that can add panel with absolute direction', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -5295,8 +5227,7 @@ describe('dockviewComponent', () => {
test('that can add floating panel', () => { test('that can add floating panel', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -5332,8 +5263,7 @@ describe('dockviewComponent', () => {
test('that can add panel positional to another (within)', () => { test('that can add panel positional to another (within)', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -5368,8 +5298,7 @@ describe('dockviewComponent', () => {
test('that can add panel positional to another (not within)', () => { test('that can add panel positional to another (not within)', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -5406,8 +5335,7 @@ describe('dockviewComponent', () => {
test('that floating a panel should not call an additional addPanel event', () => { test('that floating a panel should not call an additional addPanel event', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -5459,8 +5387,7 @@ describe('dockviewComponent', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -5511,8 +5438,7 @@ describe('dockviewComponent', () => {
test('addGroup with absolute position', () => { test('addGroup with absolute position', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -5556,8 +5482,7 @@ describe('dockviewComponent', () => {
jest.useFakeTimers(); jest.useFakeTimers();
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -5609,8 +5534,7 @@ describe('dockviewComponent', () => {
test('gap', () => { test('gap', () => {
const container = document.createElement('div'); const container = document.createElement('div');
const dockview = new DockviewComponent({ const dockview = new DockviewComponent(container, {
parentElement: container,
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'default': case 'default':

49
packages/dockview-core/src/__tests__/dockview/dockviewGroupPanelModel.spec.ts
View File

@ -276,7 +276,7 @@ describe('dockviewGroupPanelModel', () => {
}); });
dockview = fromPartial<DockviewComponent>({ dockview = fromPartial<DockviewComponent>({
options: { parentElement: document.createElement('div') }, options: {},
createWatermarkComponent: () => new Watermark(), createWatermarkComponent: () => new Watermark(),
doSetGroupActive: jest.fn(), doSetGroupActive: jest.fn(),
id: 'dockview-1', id: 'dockview-1',
@ -527,8 +527,7 @@ describe('dockviewGroupPanelModel', () => {
}); });
test('that group is set on panel during onDidAddPanel event', () => { test('that group is set on panel during onDidAddPanel event', () => {
const cut = new DockviewComponent({ const cut = new DockviewComponent(document.createElement('div'), {
parentElement: document.createElement('div'),
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'component': case 'component':
@ -548,8 +547,9 @@ describe('dockviewGroupPanelModel', () => {
}); });
test('toJSON() default', () => { test('toJSON() default', () => {
const dockviewComponent = new DockviewComponent({ const dockviewComponent = new DockviewComponent(
parentElement: document.createElement('div'), document.createElement('div'),
{
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'component': case 'component':
@ -558,7 +558,8 @@ describe('dockviewGroupPanelModel', () => {
throw new Error(`unsupported`); throw new Error(`unsupported`);
} }
}, },
}); }
);
const cut = new DockviewGroupPanelModel( const cut = new DockviewGroupPanelModel(
document.createElement('div'), document.createElement('div'),
@ -576,8 +577,9 @@ describe('dockviewGroupPanelModel', () => {
}); });
test('toJSON() locked and hideHeader', () => { test('toJSON() locked and hideHeader', () => {
const dockviewComponent = new DockviewComponent({ const dockviewComponent = new DockviewComponent(
parentElement: document.createElement('div'), document.createElement('div'),
{
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'component': case 'component':
@ -586,7 +588,8 @@ describe('dockviewGroupPanelModel', () => {
throw new Error(`unsupported`); throw new Error(`unsupported`);
} }
}, },
}); }
);
const cut = new DockviewGroupPanelModel( const cut = new DockviewGroupPanelModel(
document.createElement('div'), document.createElement('div'),
@ -609,8 +612,9 @@ describe('dockviewGroupPanelModel', () => {
}); });
test("that openPanel with skipSetActive doesn't set panel to active", () => { test("that openPanel with skipSetActive doesn't set panel to active", () => {
const dockviewComponent = new DockviewComponent({ const dockviewComponent = new DockviewComponent(
parentElement: document.createElement('div'), document.createElement('div'),
{
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'component': case 'component':
@ -619,7 +623,8 @@ describe('dockviewGroupPanelModel', () => {
throw new Error(`unsupported`); throw new Error(`unsupported`);
} }
}, },
}); }
);
const groupviewContainer = document.createElement('div'); const groupviewContainer = document.createElement('div');
const cut = new DockviewGroupPanelModel( const cut = new DockviewGroupPanelModel(
@ -659,9 +664,7 @@ describe('dockviewGroupPanelModel', () => {
test('that should not show drop target is external event', () => { test('that should not show drop target is external event', () => {
const accessor = fromPartial<DockviewComponent>({ const accessor = fromPartial<DockviewComponent>({
id: 'testcomponentid', id: 'testcomponentid',
options: { options: {},
parentElement: document.createElement('div'),
},
getPanel: jest.fn(), getPanel: jest.fn(),
onDidAddPanel: jest.fn(), onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(), onDidRemovePanel: jest.fn(),
@ -723,9 +726,7 @@ describe('dockviewGroupPanelModel', () => {
test('that the .locked behaviour is as', () => { test('that the .locked behaviour is as', () => {
const accessor = fromPartial<DockviewComponent>({ const accessor = fromPartial<DockviewComponent>({
id: 'testcomponentid', id: 'testcomponentid',
options: { options: {},
parentElement: document.createElement('div'),
},
getPanel: jest.fn(), getPanel: jest.fn(),
onDidAddPanel: jest.fn(), onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(), onDidRemovePanel: jest.fn(),
@ -816,9 +817,7 @@ describe('dockviewGroupPanelModel', () => {
test('that should not show drop target if dropping on self', () => { test('that should not show drop target if dropping on self', () => {
const accessor = fromPartial<DockviewComponent>({ const accessor = fromPartial<DockviewComponent>({
id: 'testcomponentid', id: 'testcomponentid',
options: { options: {},
parentElement: document.createElement('div'),
},
getPanel: jest.fn(), getPanel: jest.fn(),
doSetGroupActive: jest.fn(), doSetGroupActive: jest.fn(),
onDidAddPanel: jest.fn(), onDidAddPanel: jest.fn(),
@ -889,9 +888,7 @@ describe('dockviewGroupPanelModel', () => {
test('that should not allow drop when dropping on self for same component id', () => { test('that should not allow drop when dropping on self for same component id', () => {
const accessor = fromPartial<DockviewComponent>({ const accessor = fromPartial<DockviewComponent>({
id: 'testcomponentid', id: 'testcomponentid',
options: { options: {},
parentElement: document.createElement('div'),
},
getPanel: jest.fn(), getPanel: jest.fn(),
doSetGroupActive: jest.fn(), doSetGroupActive: jest.fn(),
onDidAddPanel: jest.fn(), onDidAddPanel: jest.fn(),
@ -963,9 +960,7 @@ describe('dockviewGroupPanelModel', () => {
test('that should not allow drop when not dropping for different component id', () => { test('that should not allow drop when not dropping for different component id', () => {
const accessor = fromPartial<DockviewComponent>({ const accessor = fromPartial<DockviewComponent>({
id: 'testcomponentid', id: 'testcomponentid',
options: { options: {},
parentElement: document.createElement('div'),
},
getPanel: jest.fn(), getPanel: jest.fn(),
doSetGroupActive: jest.fn(), doSetGroupActive: jest.fn(),
onDidAddPanel: jest.fn(), onDidAddPanel: jest.fn(),

5
packages/dockview-core/src/__tests__/dockview/dockviewPanelModel.spec.ts
View File

@ -30,7 +30,6 @@ describe('dockviewGroupPanel', () => {
accessorMock = fromPartial<DockviewComponent>({ accessorMock = fromPartial<DockviewComponent>({
options: { options: {
parentElement: document.createElement('div'),
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'contentComponent': case 'contentComponent':
@ -84,7 +83,6 @@ describe('dockviewGroupPanel', () => {
test('that the default tab is created', () => { test('that the default tab is created', () => {
accessorMock = fromPartial<DockviewComponent>({ accessorMock = fromPartial<DockviewComponent>({
options: { options: {
parentElement: document.createElement('div'),
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'contentComponent': case 'contentComponent':
@ -117,7 +115,6 @@ describe('dockviewGroupPanel', () => {
test('that the provided default tab is chosen when no implementation is provided', () => { test('that the provided default tab is chosen when no implementation is provided', () => {
accessorMock = fromPartial<DockviewComponent>({ accessorMock = fromPartial<DockviewComponent>({
options: { options: {
parentElement: document.createElement('div'),
defaultTabComponent: 'tabComponent', defaultTabComponent: 'tabComponent',
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
@ -150,7 +147,6 @@ describe('dockviewGroupPanel', () => {
test('that is library default tab instance is created when no alternative exists', () => { test('that is library default tab instance is created when no alternative exists', () => {
accessorMock = fromPartial<DockviewComponent>({ accessorMock = fromPartial<DockviewComponent>({
options: { options: {
parentElement: document.createElement('div'),
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'contentComponent': case 'contentComponent':
@ -174,7 +170,6 @@ describe('dockviewGroupPanel', () => {
test('that the default content is created', () => { test('that the default content is created', () => {
accessorMock = fromPartial<DockviewComponent>({ accessorMock = fromPartial<DockviewComponent>({
options: { options: {
parentElement: document.createElement('div'),
createComponent(options) { createComponent(options) {
switch (options.name) { switch (options.name) {
case 'contentComponent': case 'contentComponent':

90
packages/dockview-core/src/__tests__/gridview/gridviewComponent.spec.ts
View File

@ -33,8 +33,7 @@ describe('gridview', () => {
}); });
test('added views are visible by default', () => { test('added views are visible by default', () => {
const gridview = new GridviewComponent({ const gridview = new GridviewComponent(container, {
parentElement: container,
proportionalLayout: false, proportionalLayout: false,
orientation: Orientation.VERTICAL, orientation: Orientation.VERTICAL,
components: { default: TestGridview }, components: { default: TestGridview },
@ -53,8 +52,7 @@ describe('gridview', () => {
}); });
test('remove panel', () => { test('remove panel', () => {
const gridview = new GridviewComponent({ const gridview = new GridviewComponent(container, {
parentElement: container,
proportionalLayout: false, proportionalLayout: false,
orientation: Orientation.VERTICAL, orientation: Orientation.VERTICAL,
components: { default: TestGridview }, components: { default: TestGridview },
@ -84,8 +82,7 @@ describe('gridview', () => {
}); });
test('active panel', () => { test('active panel', () => {
const gridview = new GridviewComponent({ const gridview = new GridviewComponent(container, {
parentElement: container,
proportionalLayout: false, proportionalLayout: false,
orientation: Orientation.VERTICAL, orientation: Orientation.VERTICAL,
components: { default: TestGridview }, components: { default: TestGridview },
@ -145,8 +142,7 @@ describe('gridview', () => {
}); });
test('deserialize and serialize a layout', () => { test('deserialize and serialize a layout', () => {
const gridview = new GridviewComponent({ const gridview = new GridviewComponent(container, {
parentElement: container,
proportionalLayout: false, proportionalLayout: false,
orientation: Orientation.VERTICAL, orientation: Orientation.VERTICAL,
components: { default: TestGridview }, components: { default: TestGridview },
@ -273,8 +269,7 @@ describe('gridview', () => {
}); });
test('toJSON shouldnt fire any layout events', () => { test('toJSON shouldnt fire any layout events', () => {
const gridview = new GridviewComponent({ const gridview = new GridviewComponent(container, {
parentElement: container,
proportionalLayout: false, proportionalLayout: false,
orientation: Orientation.VERTICAL, orientation: Orientation.VERTICAL,
components: { default: TestGridview }, components: { default: TestGridview },
@ -310,8 +305,7 @@ describe('gridview', () => {
}); });
test('gridview events', () => { test('gridview events', () => {
const gridview = new GridviewComponent({ const gridview = new GridviewComponent(container, {
parentElement: container,
proportionalLayout: false, proportionalLayout: false,
orientation: Orientation.VERTICAL, orientation: Orientation.VERTICAL,
components: { default: TestGridview }, components: { default: TestGridview },
@ -434,8 +428,7 @@ describe('gridview', () => {
test('dispose of gridviewComponent', () => { test('dispose of gridviewComponent', () => {
expect(container.childNodes.length).toBe(0); expect(container.childNodes.length).toBe(0);
const gridview = new GridviewComponent({ const gridview = new GridviewComponent(container, {
parentElement: container,
proportionalLayout: false, proportionalLayout: false,
orientation: Orientation.VERTICAL, orientation: Orientation.VERTICAL,
components: { default: TestGridview }, components: { default: TestGridview },
@ -464,8 +457,7 @@ describe('gridview', () => {
}); });
test('#1/VERTICAL', () => { test('#1/VERTICAL', () => {
const gridview = new GridviewComponent({ const gridview = new GridviewComponent(container, {
parentElement: container,
proportionalLayout: true, proportionalLayout: true,
orientation: Orientation.VERTICAL, orientation: Orientation.VERTICAL,
components: { default: TestGridview }, components: { default: TestGridview },
@ -523,8 +515,7 @@ describe('gridview', () => {
}); });
test('#2/HORIZONTAL', () => { test('#2/HORIZONTAL', () => {
const gridview = new GridviewComponent({ const gridview = new GridviewComponent(container, {
parentElement: container,
proportionalLayout: true, proportionalLayout: true,
orientation: Orientation.HORIZONTAL, orientation: Orientation.HORIZONTAL,
components: { default: TestGridview }, components: { default: TestGridview },
@ -582,8 +573,7 @@ describe('gridview', () => {
}); });
test('#3/HORIZONTAL', () => { test('#3/HORIZONTAL', () => {
const gridview = new GridviewComponent({ const gridview = new GridviewComponent(container, {
parentElement: container,
proportionalLayout: true, proportionalLayout: true,
orientation: Orientation.HORIZONTAL, orientation: Orientation.HORIZONTAL,
components: { default: TestGridview }, components: { default: TestGridview },
@ -659,8 +649,7 @@ describe('gridview', () => {
}); });
test('#4/HORIZONTAL', () => { test('#4/HORIZONTAL', () => {
const gridview = new GridviewComponent({ const gridview = new GridviewComponent(container, {
parentElement: container,
proportionalLayout: true, proportionalLayout: true,
orientation: Orientation.HORIZONTAL, orientation: Orientation.HORIZONTAL,
components: { default: TestGridview }, components: { default: TestGridview },
@ -754,8 +743,7 @@ describe('gridview', () => {
}); });
test('#5/VERTICAL', () => { test('#5/VERTICAL', () => {
const gridview = new GridviewComponent({ const gridview = new GridviewComponent(container, {
parentElement: container,
proportionalLayout: true, proportionalLayout: true,
orientation: Orientation.VERTICAL, orientation: Orientation.VERTICAL,
components: { default: TestGridview }, components: { default: TestGridview },
@ -849,8 +837,7 @@ describe('gridview', () => {
}); });
test('#5/VERTICAL/proportional/false', () => { test('#5/VERTICAL/proportional/false', () => {
const gridview = new GridviewComponent({ const gridview = new GridviewComponent(container, {
parentElement: container,
proportionalLayout: false, proportionalLayout: false,
orientation: Orientation.VERTICAL, orientation: Orientation.VERTICAL,
components: { default: TestGridview }, components: { default: TestGridview },
@ -944,8 +931,7 @@ describe('gridview', () => {
}); });
test('#6/VERTICAL', () => { test('#6/VERTICAL', () => {
const gridview = new GridviewComponent({ const gridview = new GridviewComponent(container, {
parentElement: container,
proportionalLayout: true, proportionalLayout: true,
orientation: Orientation.VERTICAL, orientation: Orientation.VERTICAL,
components: { default: TestGridview }, components: { default: TestGridview },
@ -1069,8 +1055,7 @@ describe('gridview', () => {
}); });
test('#7/VERTICAL layout first', () => { test('#7/VERTICAL layout first', () => {
const gridview = new GridviewComponent({ const gridview = new GridviewComponent(container, {
parentElement: container,
proportionalLayout: true, proportionalLayout: true,
orientation: Orientation.VERTICAL, orientation: Orientation.VERTICAL,
components: { default: TestGridview }, components: { default: TestGridview },
@ -1194,8 +1179,7 @@ describe('gridview', () => {
}); });
test('#8/VERTICAL layout after', () => { test('#8/VERTICAL layout after', () => {
const gridview = new GridviewComponent({ const gridview = new GridviewComponent(container, {
parentElement: container,
proportionalLayout: true, proportionalLayout: true,
orientation: Orientation.VERTICAL, orientation: Orientation.VERTICAL,
components: { default: TestGridview }, components: { default: TestGridview },
@ -1321,8 +1305,7 @@ describe('gridview', () => {
}); });
test('#9/HORIZONTAL', () => { test('#9/HORIZONTAL', () => {
const gridview = new GridviewComponent({ const gridview = new GridviewComponent(container, {
parentElement: container,
proportionalLayout: true, proportionalLayout: true,
orientation: Orientation.HORIZONTAL, orientation: Orientation.HORIZONTAL,
components: { default: TestGridview }, components: { default: TestGridview },
@ -1446,8 +1429,7 @@ describe('gridview', () => {
}); });
test('#9/HORIZONTAL/proportional/false', () => { test('#9/HORIZONTAL/proportional/false', () => {
const gridview = new GridviewComponent({ const gridview = new GridviewComponent(container, {
parentElement: container,
proportionalLayout: false, proportionalLayout: false,
orientation: Orientation.HORIZONTAL, orientation: Orientation.HORIZONTAL,
components: { default: TestGridview }, components: { default: TestGridview },
@ -1571,8 +1553,7 @@ describe('gridview', () => {
}); });
test('#10/HORIZONTAL scale x:1.5 y:2', () => { test('#10/HORIZONTAL scale x:1.5 y:2', () => {
const gridview = new GridviewComponent({ const gridview = new GridviewComponent(container, {
parentElement: container,
proportionalLayout: true, proportionalLayout: true,
orientation: Orientation.HORIZONTAL, orientation: Orientation.HORIZONTAL,
components: { default: TestGridview }, components: { default: TestGridview },
@ -1699,8 +1680,7 @@ describe('gridview', () => {
}); });
test('panel is disposed of when component is disposed', () => { test('panel is disposed of when component is disposed', () => {
const gridview = new GridviewComponent({ const gridview = new GridviewComponent(container, {
parentElement: container,
proportionalLayout: false, proportionalLayout: false,
orientation: Orientation.VERTICAL, orientation: Orientation.VERTICAL,
components: { default: TestGridview }, components: { default: TestGridview },
@ -1730,8 +1710,7 @@ describe('gridview', () => {
}); });
test('panel is disposed of when removed', () => { test('panel is disposed of when removed', () => {
const gridview = new GridviewComponent({ const gridview = new GridviewComponent(container, {
parentElement: container,
proportionalLayout: false, proportionalLayout: false,
orientation: Orientation.VERTICAL, orientation: Orientation.VERTICAL,
components: { default: TestGridview }, components: { default: TestGridview },
@ -1760,8 +1739,7 @@ describe('gridview', () => {
}); });
test('panel is disposed of when fromJSON is called', () => { test('panel is disposed of when fromJSON is called', () => {
const gridview = new GridviewComponent({ const gridview = new GridviewComponent(container, {
parentElement: container,
proportionalLayout: false, proportionalLayout: false,
orientation: Orientation.VERTICAL, orientation: Orientation.VERTICAL,
components: { default: TestGridview }, components: { default: TestGridview },
@ -1799,8 +1777,7 @@ describe('gridview', () => {
test('fromJSON events should still fire', () => { test('fromJSON events should still fire', () => {
jest.useFakeTimers(); jest.useFakeTimers();
const gridview = new GridviewComponent({ const gridview = new GridviewComponent(container, {
parentElement: container,
proportionalLayout: true, proportionalLayout: true,
orientation: Orientation.HORIZONTAL, orientation: Orientation.HORIZONTAL,
components: { default: TestGridview }, components: { default: TestGridview },
@ -1922,8 +1899,7 @@ describe('gridview', () => {
test('that fromJSON layouts are resized to the current dimensions', async () => { test('that fromJSON layouts are resized to the current dimensions', async () => {
const container = document.createElement('div'); const container = document.createElement('div');
const gridview = new GridviewComponent({ const gridview = new GridviewComponent(container, {
parentElement: container,
proportionalLayout: true, proportionalLayout: true,
orientation: Orientation.VERTICAL, orientation: Orientation.VERTICAL,
components: { default: TestGridview }, components: { default: TestGridview },
@ -2049,8 +2025,7 @@ describe('gridview', () => {
test('that a deep HORIZONTAL layout with fromJSON dimensions identical to the current dimensions loads', async () => { test('that a deep HORIZONTAL layout with fromJSON dimensions identical to the current dimensions loads', async () => {
const container = document.createElement('div'); const container = document.createElement('div');
const gridview = new GridviewComponent({ const gridview = new GridviewComponent(container, {
parentElement: container,
proportionalLayout: true, proportionalLayout: true,
orientation: Orientation.VERTICAL, orientation: Orientation.VERTICAL,
components: { default: TestGridview }, components: { default: TestGridview },
@ -2325,8 +2300,7 @@ describe('gridview', () => {
test('that a deep VERTICAL layout with fromJSON dimensions identical to the current dimensions loads', async () => { test('that a deep VERTICAL layout with fromJSON dimensions identical to the current dimensions loads', async () => {
const container = document.createElement('div'); const container = document.createElement('div');
const gridview = new GridviewComponent({ const gridview = new GridviewComponent(container, {
parentElement: container,
proportionalLayout: true, proportionalLayout: true,
orientation: Orientation.VERTICAL, orientation: Orientation.VERTICAL,
components: { default: TestGridview }, components: { default: TestGridview },
@ -2599,8 +2573,7 @@ describe('gridview', () => {
}); });
test('that loading a corrupt layout throws an error and leaves a clean gridview behind', () => { test('that loading a corrupt layout throws an error and leaves a clean gridview behind', () => {
const gridview = new GridviewComponent({ const gridview = new GridviewComponent(container, {
parentElement: container,
proportionalLayout: true, proportionalLayout: true,
orientation: Orientation.HORIZONTAL, orientation: Orientation.HORIZONTAL,
components: { default: TestGridview }, components: { default: TestGridview },
@ -2679,8 +2652,7 @@ describe('gridview', () => {
}); });
test('that disableAutoResizing is false by default', () => { test('that disableAutoResizing is false by default', () => {
const gridview = new GridviewComponent({ const gridview = new GridviewComponent(container, {
parentElement: container,
proportionalLayout: true, proportionalLayout: true,
orientation: Orientation.HORIZONTAL, orientation: Orientation.HORIZONTAL,
components: { default: TestGridview }, components: { default: TestGridview },
@ -2690,8 +2662,7 @@ describe('gridview', () => {
}); });
test('that disableAutoResizing can be enabled', () => { test('that disableAutoResizing can be enabled', () => {
const gridview = new GridviewComponent({ const gridview = new GridviewComponent(container, {
parentElement: container,
proportionalLayout: true, proportionalLayout: true,
orientation: Orientation.HORIZONTAL, orientation: Orientation.HORIZONTAL,
components: { default: TestGridview }, components: { default: TestGridview },
@ -2702,8 +2673,7 @@ describe('gridview', () => {
}); });
test('that setVisible toggles visiblity', () => { test('that setVisible toggles visiblity', () => {
const gridview = new GridviewComponent({ const gridview = new GridviewComponent(container, {
parentElement: container,
proportionalLayout: true, proportionalLayout: true,
orientation: Orientation.HORIZONTAL, orientation: Orientation.HORIZONTAL,
components: { default: TestGridview }, components: { default: TestGridview },

33
packages/dockview-core/src/__tests__/paneview/paneviewComponent.spec.ts
View File

@ -71,8 +71,7 @@ describe('componentPaneview', () => {
test('vertical panels', () => { test('vertical panels', () => {
const disposables = new CompositeDisposable(); const disposables = new CompositeDisposable();
const paneview = new PaneviewComponent({ const paneview = new PaneviewComponent(container, {
parentElement: container,
components: { components: {
testPanel: TestPanel, testPanel: TestPanel,
}, },
@ -144,8 +143,7 @@ describe('componentPaneview', () => {
}); });
test('serialization', () => { test('serialization', () => {
const paneview = new PaneviewComponent({ const paneview = new PaneviewComponent(container, {
parentElement: container,
components: { components: {
testPanel: TestPanel, testPanel: TestPanel,
}, },
@ -253,8 +251,7 @@ describe('componentPaneview', () => {
}); });
test('toJSON shouldnt fire any layout events', () => { test('toJSON shouldnt fire any layout events', () => {
const paneview = new PaneviewComponent({ const paneview = new PaneviewComponent(container, {
parentElement: container,
components: { components: {
testPanel: TestPanel, testPanel: TestPanel,
}, },
@ -285,8 +282,7 @@ describe('componentPaneview', () => {
test('dispose of paneviewComponent', () => { test('dispose of paneviewComponent', () => {
expect(container.childNodes.length).toBe(0); expect(container.childNodes.length).toBe(0);
const paneview = new PaneviewComponent({ const paneview = new PaneviewComponent(container, {
parentElement: container,
components: { components: {
testPanel: TestPanel, testPanel: TestPanel,
}, },
@ -313,8 +309,7 @@ describe('componentPaneview', () => {
}); });
test('panel is disposed of when component is disposed', () => { test('panel is disposed of when component is disposed', () => {
const paneview = new PaneviewComponent({ const paneview = new PaneviewComponent(container, {
parentElement: container,
components: { components: {
testPanel: TestPanel, testPanel: TestPanel,
}, },
@ -346,8 +341,7 @@ describe('componentPaneview', () => {
}); });
test('panel is disposed of when removed', () => { test('panel is disposed of when removed', () => {
const paneview = new PaneviewComponent({ const paneview = new PaneviewComponent(container, {
parentElement: container,
components: { components: {
testPanel: TestPanel, testPanel: TestPanel,
}, },
@ -379,8 +373,7 @@ describe('componentPaneview', () => {
}); });
test('panel is disposed of when fromJSON is called', () => { test('panel is disposed of when fromJSON is called', () => {
const paneview = new PaneviewComponent({ const paneview = new PaneviewComponent(container, {
parentElement: container,
components: { components: {
testPanel: TestPanel, testPanel: TestPanel,
}, },
@ -412,8 +405,7 @@ describe('componentPaneview', () => {
}); });
test('that fromJSON layouts are resized to the current dimensions', async () => { test('that fromJSON layouts are resized to the current dimensions', async () => {
const paneview = new PaneviewComponent({ const paneview = new PaneviewComponent(container, {
parentElement: container,
components: { components: {
testPanel: TestPanel, testPanel: TestPanel,
}, },
@ -493,8 +485,7 @@ describe('componentPaneview', () => {
}); });
test('that disableAutoResizing is false by default', () => { test('that disableAutoResizing is false by default', () => {
const paneview = new PaneviewComponent({ const paneview = new PaneviewComponent(container, {
parentElement: container,
components: { components: {
testPanel: TestPanel, testPanel: TestPanel,
}, },
@ -504,8 +495,7 @@ describe('componentPaneview', () => {
}); });
test('that disableAutoResizing can be enabled', () => { test('that disableAutoResizing can be enabled', () => {
const paneview = new PaneviewComponent({ const paneview = new PaneviewComponent(container, {
parentElement: container,
components: { components: {
testPanel: TestPanel, testPanel: TestPanel,
}, },
@ -516,8 +506,7 @@ describe('componentPaneview', () => {
}); });
test('that setVisible toggles visiblity', () => { test('that setVisible toggles visiblity', () => {
const paneview = new PaneviewComponent({ const paneview = new PaneviewComponent(container, {
parentElement: container,
components: { components: {
default: TestPanel, default: TestPanel,
}, },

54
packages/dockview-core/src/__tests__/splitview/splitviewComponent.spec.ts
View File

@ -29,8 +29,7 @@ describe('componentSplitview', () => {
test('event leakage', () => { test('event leakage', () => {
Emitter.setLeakageMonitorEnabled(true); Emitter.setLeakageMonitorEnabled(true);
const splitview = new SplitviewComponent({ const splitview = new SplitviewComponent(container, {
parentElement: container,
orientation: Orientation.VERTICAL, orientation: Orientation.VERTICAL,
components: { components: {
testPanel: TestPanel, testPanel: TestPanel,
@ -66,8 +65,7 @@ describe('componentSplitview', () => {
}); });
test('remove panel', () => { test('remove panel', () => {
const splitview = new SplitviewComponent({ const splitview = new SplitviewComponent(container, {
parentElement: container,
orientation: Orientation.VERTICAL, orientation: Orientation.VERTICAL,
components: { components: {
testPanel: TestPanel, testPanel: TestPanel,
@ -102,8 +100,7 @@ describe('componentSplitview', () => {
}); });
test('horizontal dimensions', () => { test('horizontal dimensions', () => {
const splitview = new SplitviewComponent({ const splitview = new SplitviewComponent(container, {
parentElement: container,
orientation: Orientation.HORIZONTAL, orientation: Orientation.HORIZONTAL,
components: { components: {
testPanel: TestPanel, testPanel: TestPanel,
@ -116,8 +113,7 @@ describe('componentSplitview', () => {
}); });
test('vertical dimensions', () => { test('vertical dimensions', () => {
const splitview = new SplitviewComponent({ const splitview = new SplitviewComponent(container, {
parentElement: container,
orientation: Orientation.VERTICAL, orientation: Orientation.VERTICAL,
components: { components: {
testPanel: TestPanel, testPanel: TestPanel,
@ -130,8 +126,7 @@ describe('componentSplitview', () => {
}); });
test('api resize', () => { test('api resize', () => {
const splitview = new SplitviewComponent({ const splitview = new SplitviewComponent(container, {
parentElement: container,
orientation: Orientation.VERTICAL, orientation: Orientation.VERTICAL,
components: { components: {
testPanel: TestPanel, testPanel: TestPanel,
@ -183,8 +178,7 @@ describe('componentSplitview', () => {
}); });
test('api', () => { test('api', () => {
const splitview = new SplitviewComponent({ const splitview = new SplitviewComponent(container, {
parentElement: container,
orientation: Orientation.HORIZONTAL, orientation: Orientation.HORIZONTAL,
components: { components: {
testPanel: TestPanel, testPanel: TestPanel,
@ -225,8 +219,7 @@ describe('componentSplitview', () => {
test('vertical panels', () => { test('vertical panels', () => {
const disposables = new CompositeDisposable(); const disposables = new CompositeDisposable();
const splitview = new SplitviewComponent({ const splitview = new SplitviewComponent(container, {
parentElement: container,
orientation: Orientation.VERTICAL, orientation: Orientation.VERTICAL,
components: { components: {
testPanel: TestPanel, testPanel: TestPanel,
@ -277,8 +270,7 @@ describe('componentSplitview', () => {
test('horizontal panels', () => { test('horizontal panels', () => {
const disposables = new CompositeDisposable(); const disposables = new CompositeDisposable();
const splitview = new SplitviewComponent({ const splitview = new SplitviewComponent(container, {
parentElement: container,
orientation: Orientation.HORIZONTAL, orientation: Orientation.HORIZONTAL,
components: { components: {
testPanel: TestPanel, testPanel: TestPanel,
@ -327,8 +319,7 @@ describe('componentSplitview', () => {
}); });
test('serialization', () => { test('serialization', () => {
const splitview = new SplitviewComponent({ const splitview = new SplitviewComponent(container, {
parentElement: container,
orientation: Orientation.VERTICAL, orientation: Orientation.VERTICAL,
components: { components: {
testPanel: TestPanel, testPanel: TestPanel,
@ -382,8 +373,7 @@ describe('componentSplitview', () => {
}); });
test('toJSON shouldnt fire any layout events', () => { test('toJSON shouldnt fire any layout events', () => {
const splitview = new SplitviewComponent({ const splitview = new SplitviewComponent(container, {
parentElement: container,
orientation: Orientation.HORIZONTAL, orientation: Orientation.HORIZONTAL,
components: { components: {
testPanel: TestPanel, testPanel: TestPanel,
@ -414,8 +404,7 @@ describe('componentSplitview', () => {
test('dispose of splitviewComponent', () => { test('dispose of splitviewComponent', () => {
expect(container.childNodes.length).toBe(0); expect(container.childNodes.length).toBe(0);
const splitview = new SplitviewComponent({ const splitview = new SplitviewComponent(container, {
parentElement: container,
orientation: Orientation.HORIZONTAL, orientation: Orientation.HORIZONTAL,
components: { components: {
testPanel: TestPanel, testPanel: TestPanel,
@ -441,8 +430,7 @@ describe('componentSplitview', () => {
}); });
test('panel is disposed of when component is disposed', () => { test('panel is disposed of when component is disposed', () => {
const splitview = new SplitviewComponent({ const splitview = new SplitviewComponent(container, {
parentElement: container,
orientation: Orientation.HORIZONTAL, orientation: Orientation.HORIZONTAL,
components: { components: {
default: TestPanel, default: TestPanel,
@ -473,8 +461,7 @@ describe('componentSplitview', () => {
}); });
test('panel is disposed of when removed', () => { test('panel is disposed of when removed', () => {
const splitview = new SplitviewComponent({ const splitview = new SplitviewComponent(container, {
parentElement: container,
orientation: Orientation.HORIZONTAL, orientation: Orientation.HORIZONTAL,
components: { components: {
default: TestPanel, default: TestPanel,
@ -505,8 +492,7 @@ describe('componentSplitview', () => {
}); });
test('panel is disposed of when fromJSON is called', () => { test('panel is disposed of when fromJSON is called', () => {
const splitview = new SplitviewComponent({ const splitview = new SplitviewComponent(container, {
parentElement: container,
orientation: Orientation.HORIZONTAL, orientation: Orientation.HORIZONTAL,
components: { components: {
default: TestPanel, default: TestPanel,
@ -541,8 +527,7 @@ describe('componentSplitview', () => {
}); });
test('that fromJSON layouts are resized to the current dimensions', async () => { test('that fromJSON layouts are resized to the current dimensions', async () => {
const splitview = new SplitviewComponent({ const splitview = new SplitviewComponent(container, {
parentElement: container,
orientation: Orientation.VERTICAL, orientation: Orientation.VERTICAL,
components: { components: {
testPanel: TestPanel, testPanel: TestPanel,
@ -594,8 +579,7 @@ describe('componentSplitview', () => {
}); });
test('that disableAutoResizing is false by default', () => { test('that disableAutoResizing is false by default', () => {
const splitview = new SplitviewComponent({ const splitview = new SplitviewComponent(container, {
parentElement: container,
orientation: Orientation.VERTICAL, orientation: Orientation.VERTICAL,
components: { components: {
testPanel: TestPanel, testPanel: TestPanel,
@ -606,8 +590,7 @@ describe('componentSplitview', () => {
}); });
test('that disableAutoResizing can be enabled', () => { test('that disableAutoResizing can be enabled', () => {
const splitview = new SplitviewComponent({ const splitview = new SplitviewComponent(container, {
parentElement: container,
orientation: Orientation.VERTICAL, orientation: Orientation.VERTICAL,
components: { components: {
testPanel: TestPanel, testPanel: TestPanel,
@ -619,8 +602,7 @@ describe('componentSplitview', () => {
}); });
test('that setVisible toggles visiblity', () => { test('that setVisible toggles visiblity', () => {
const splitview = new SplitviewComponent({ const splitview = new SplitviewComponent(container, {
parentElement: container,
orientation: Orientation.HORIZONTAL, orientation: Orientation.HORIZONTAL,
components: { components: {
default: TestPanel, default: TestPanel,

61
packages/dockview-core/src/api/component.api.ts
View File

@ -7,6 +7,7 @@ import {
import { import {
AddGroupOptions, AddGroupOptions,
AddPanelOptions, AddPanelOptions,
DockviewComponentOptions,
DockviewDndOverlayEvent, DockviewDndOverlayEvent,
MovementOptions, MovementOptions,
} from '../dockview/options'; } from '../dockview/options';
@ -14,6 +15,7 @@ import { Parameters } from '../panel/types';
import { Direction } from '../gridview/baseComponentGridview'; import { Direction } from '../gridview/baseComponentGridview';
import { import {
AddComponentOptions, AddComponentOptions,
GridviewComponentUpdateOptions,
IGridviewComponent, IGridviewComponent,
SerializedGridviewComponent, SerializedGridviewComponent,
} from '../gridview/gridviewComponent'; } from '../gridview/gridviewComponent';
@ -50,6 +52,7 @@ import {
DockviewWillDropEvent, DockviewWillDropEvent,
WillShowOverlayLocationEvent, WillShowOverlayLocationEvent,
} from '../dockview/dockviewGroupPanelModel'; } from '../dockview/dockviewGroupPanelModel';
import { PaneviewComponentOptions } from '../paneview/options';
export interface CommonApi<T = any> { export interface CommonApi<T = any> {
readonly height: number; readonly height: number;
@ -61,6 +64,7 @@ export interface CommonApi<T = any> {
fromJSON(data: T): void; fromJSON(data: T): void;
toJSON(): T; toJSON(): T;
clear(): void; clear(): void;
dispose(): void;
} }
export class SplitviewApi implements CommonApi<SerializedSplitview> { export class SplitviewApi implements CommonApi<SerializedSplitview> {
@ -143,13 +147,6 @@ export class SplitviewApi implements CommonApi<SerializedSplitview> {
constructor(private readonly component: ISplitviewComponent) {} constructor(private readonly component: ISplitviewComponent) {}
/**
* Update configuratable options.
*/
updateOptions(options: SplitviewComponentUpdateOptions): void {
this.component.updateOptions(options);
}
/** /**
* Removes an existing panel and optionally provide a `Sizing` method * Removes an existing panel and optionally provide a `Sizing` method
* for the subsequent resize. * for the subsequent resize.
@ -213,6 +210,20 @@ export class SplitviewApi implements CommonApi<SerializedSplitview> {
clear(): void { clear(): void {
this.component.clear(); this.component.clear();
} }
/**
* Update configuratable options.
*/
updateOptions(options: Partial<SplitviewComponentUpdateOptions>): void {
this.component.updateOptions(options);
}
/**
* Release resources and teardown component. Do not call when using framework versions of dockview.
*/
dispose(): void {
this.component.dispose();
}
} }
export class PaneviewApi implements CommonApi<SerializedPaneview> { export class PaneviewApi implements CommonApi<SerializedPaneview> {
@ -363,6 +374,20 @@ export class PaneviewApi implements CommonApi<SerializedPaneview> {
clear(): void { clear(): void {
this.component.clear(); this.component.clear();
} }
/**
* Update configuratable options.
*/
updateOptions(options: Partial<PaneviewComponentOptions>): void {
this.component.updateOptions(options);
}
/**
* Release resources and teardown component. Do not call when using framework versions of dockview.
*/
dispose(): void {
this.component.dispose();
}
} }
export class GridviewApi implements CommonApi<SerializedGridviewComponent> { export class GridviewApi implements CommonApi<SerializedGridviewComponent> {
@ -530,6 +555,17 @@ export class GridviewApi implements CommonApi<SerializedGridviewComponent> {
clear(): void { clear(): void {
this.component.clear(); this.component.clear();
} }
updateOptions(options: Partial<GridviewComponentUpdateOptions>) {
this.component.updateOptions(options);
}
/**
* Release resources and teardown component. Do not call when using framework versions of dockview.
*/
dispose(): void {
this.component.dispose();
}
} }
export class DockviewApi implements CommonApi<SerializedDockview> { export class DockviewApi implements CommonApi<SerializedDockview> {
@ -884,4 +920,15 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
setGap(gap: number | undefined): void { setGap(gap: number | undefined): void {
this.component.updateOptions({ gap }); this.component.updateOptions({ gap });
} }
updateOptions(options: Partial<DockviewComponentOptions>) {
this.component.updateOptions(options);
}
/**
* Release resources and teardown component. Do not call when using framework versions of dockview.
*/
dispose(): void {
this.component.dispose();
}
} }

46
packages/dockview-core/src/api/entryPoints.ts Normal file
View File

@ -0,0 +1,46 @@
import {
DockviewApi,
GridviewApi,
PaneviewApi,
SplitviewApi,
} from '../api/component.api';
import { DockviewComponent } from '../dockview/dockviewComponent';
import { DockviewComponentOptions } from '../dockview/options';
import { GridviewComponent } from '../gridview/gridviewComponent';
import { GridviewComponentOptions } from '../gridview/options';
import { PaneviewComponentOptions } from '../paneview/options';
import { PaneviewComponent } from '../paneview/paneviewComponent';
import { SplitviewComponentOptions } from '../splitview/options';
import { SplitviewComponent } from '../splitview/splitviewComponent';
export function createDockview(
element: HTMLElement,
options: DockviewComponentOptions
): DockviewApi {
const component = new DockviewComponent(element, options);
return component.api;
}
export function createSplitview(
element: HTMLElement,
options: SplitviewComponentOptions
): SplitviewApi {
const component = new SplitviewComponent(element, options);
return new SplitviewApi(component);
}
export function createGridview(
element: HTMLElement,
options: GridviewComponentOptions
): GridviewApi {
const component = new GridviewComponent(element, options);
return new GridviewApi(component);
}
export function createPaneview(
element: HTMLElement,
options: PaneviewComponentOptions
): PaneviewApi {
const component = new PaneviewComponent(element, options);
return new PaneviewApi(component);
}

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

@ -357,17 +357,18 @@ export class DockviewComponent
return this.gridview.margin; return this.gridview.margin;
} }
constructor(options: DockviewComponentOptions) { constructor(parentElement: HTMLElement, options: DockviewComponentOptions) {
super({ super({
proportionalLayout: true, proportionalLayout: true,
orientation: Orientation.HORIZONTAL, orientation: Orientation.HORIZONTAL,
styles: options.hideBorders styles: options.hideBorders
? { separatorBorder: 'transparent' } ? { separatorBorder: 'transparent' }
: undefined, : undefined,
parentElement: options.parentElement, parentElement: parentElement,
disableAutoResizing: options.disableAutoResizing, disableAutoResizing: options.disableAutoResizing,
locked: options.locked, locked: options.locked,
margin: options.gap, margin: options.gap,
className: options.className,
}); });
const gready = document.createElement('div'); const gready = document.createElement('div');

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

@ -54,6 +54,7 @@ export interface DockviewOptions {
rootOverlayModel?: DroptargetOverlayModel; rootOverlayModel?: DroptargetOverlayModel;
locked?: boolean; locked?: boolean;
disableDnd?: boolean; disableDnd?: boolean;
className?: string;
/** /**
* Pixel gap between groups * Pixel gap between groups
*/ */
@ -109,13 +110,13 @@ export const PROPERTY_KEYS: (keyof DockviewOptions)[] = (() => {
locked: undefined, locked: undefined,
disableDnd: undefined, disableDnd: undefined,
gap: undefined, gap: undefined,
className: undefined,
}; };
return Object.keys(properties) as (keyof DockviewOptions)[]; return Object.keys(properties) as (keyof DockviewOptions)[];
})(); })();
export interface DockviewFrameworkOptions { export interface DockviewFrameworkOptions {
parentElement: HTMLElement;
defaultTabComponent?: string; defaultTabComponent?: string;
createRightHeaderActionComponent?: ( createRightHeaderActionComponent?: (
group: DockviewGroupPanel group: DockviewGroupPanel

9
packages/dockview-core/src/gridview/baseComponentGridview.ts
View File

@ -1,7 +1,7 @@
import { Emitter, Event, AsapEvent } from '../events'; import { Emitter, Event, AsapEvent } from '../events';
import { getGridLocation, Gridview, IGridView } from './gridview'; import { getGridLocation, Gridview, IGridView } from './gridview';
import { Position } from '../dnd/droptarget'; import { Position } from '../dnd/droptarget';
import { Disposable, IValueDisposable } from '../lifecycle'; import { Disposable, IDisposable, IValueDisposable } from '../lifecycle';
import { sequentialNumberGenerator } from '../math'; import { sequentialNumberGenerator } from '../math';
import { ISplitviewStyles, Orientation, Sizing } from '../splitview/splitview'; import { ISplitviewStyles, Orientation, Sizing } from '../splitview/splitview';
import { IPanel } from '../panel/types'; import { IPanel } from '../panel/types';
@ -36,6 +36,7 @@ export interface BaseGridOptions {
readonly disableAutoResizing?: boolean; readonly disableAutoResizing?: boolean;
readonly locked?: boolean; readonly locked?: boolean;
readonly margin?: number; readonly margin?: number;
readonly className?: string;
} }
export interface IGridPanelView extends IGridView, IPanel { export interface IGridPanelView extends IGridView, IPanel {
@ -43,7 +44,7 @@ export interface IGridPanelView extends IGridView, IPanel {
readonly isActive: boolean; readonly isActive: boolean;
} }
export interface IBaseGrid<T extends IGridPanelView> { export interface IBaseGrid<T extends IGridPanelView> extends IDisposable {
readonly element: HTMLElement; readonly element: HTMLElement;
readonly id: string; readonly id: string;
readonly width: number; readonly width: number;
@ -148,6 +149,10 @@ export abstract class BaseGrid<T extends IGridPanelView>
this.element.style.height = '100%'; this.element.style.height = '100%';
this.element.style.width = '100%'; this.element.style.width = '100%';
if (typeof options.className === 'string') {
this.element.classList.add(options.className);
}
options.parentElement.appendChild(this.element); options.parentElement.appendChild(this.element);
this.gridview = new Gridview( this.gridview = new Gridview(

5
packages/dockview-core/src/gridview/gridviewComponent.ts
View File

@ -119,13 +119,14 @@ export class GridviewComponent
this._deserializer = value; this._deserializer = value;
} }
constructor(options: GridviewComponentOptions) { constructor(parentElement: HTMLElement, options: GridviewComponentOptions) {
super({ super({
parentElement: options.parentElement, parentElement: parentElement,
proportionalLayout: options.proportionalLayout, proportionalLayout: options.proportionalLayout,
orientation: options.orientation, orientation: options.orientation,
styles: options.styles, styles: options.styles,
disableAutoResizing: options.disableAutoResizing, disableAutoResizing: options.disableAutoResizing,
className: options.className,
}); });
this._options = options; this._options = options;

2
packages/dockview-core/src/gridview/options.ts
View File

@ -17,5 +17,5 @@ export interface GridviewComponentOptions {
}; };
frameworkComponentFactory?: FrameworkFactory<GridviewPanel>; frameworkComponentFactory?: FrameworkFactory<GridviewPanel>;
styles?: ISplitviewStyles; styles?: ISplitviewStyles;
parentElement: HTMLElement; className?: string;
} }

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

@ -73,6 +73,7 @@ export {
MeasuredValue, MeasuredValue,
DroptargetOverlayModel, DroptargetOverlayModel,
} from './dnd/droptarget'; } from './dnd/droptarget';
export { export {
FocusEvent, FocusEvent,
PanelDimensionChangeEvent, PanelDimensionChangeEvent,
@ -107,3 +108,9 @@ export {
GridviewApi, GridviewApi,
DockviewApi, DockviewApi,
} from './api/component.api'; } from './api/component.api';
export {
createDockview,
createGridview,
createPaneview,
createSplitview,
} from './api/entryPoints';

2
packages/dockview-core/src/paneview/options.ts
View File

@ -25,5 +25,5 @@ export interface PaneviewComponentOptions {
}; };
disableDnd?: boolean; disableDnd?: boolean;
showDndOverlay?: (event: PaneviewDndOverlayEvent) => boolean; showDndOverlay?: (event: PaneviewDndOverlayEvent) => boolean;
parentElement: HTMLElement; className?: string;
} }

8
packages/dockview-core/src/paneview/paneviewComponent.ts
View File

@ -199,8 +199,12 @@ export class PaneviewComponent extends Resizable implements IPaneviewComponent {
return this._options; return this._options;
} }
constructor(options: PaneviewComponentOptions) { constructor(parentElement: HTMLElement, options: PaneviewComponentOptions) {
super(options.parentElement, options.disableAutoResizing); super(parentElement, options.disableAutoResizing);
if (typeof options.className === 'string') {
this.element.classList.add(options.className);
}
this.addDisposables( this.addDisposables(
this._onDidLayoutChange, this._onDidLayoutChange,

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

@ -24,5 +24,5 @@ export interface SplitviewComponentOptions extends SplitViewOptions {
[componentName: string]: any; [componentName: string]: any;
}; };
frameworkWrapper?: FrameworkFactory<SplitviewPanel>; frameworkWrapper?: FrameworkFactory<SplitviewPanel>;
parentElement: HTMLElement; className?: string;
} }

11
packages/dockview-core/src/splitview/splitviewComponent.ts
View File

@ -157,8 +157,15 @@ export class SplitviewComponent
: this.splitview.orthogonalSize; : this.splitview.orthogonalSize;
} }
constructor(options: SplitviewComponentOptions) { constructor(
super(options.parentElement, options.disableAutoResizing); parentElement: HTMLElement,
options: SplitviewComponentOptions
) {
super(parentElement, options.disableAutoResizing);
if (typeof options.className === 'string') {
this.element.classList.add(options.className);
}
this._options = options; this._options = options;

13
packages/dockview-vue/src/dockview/dockview.vue
View File

@ -1,10 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { import {
DockviewApi, DockviewApi,
DockviewComponent,
type DockviewOptions, type DockviewOptions,
PROPERTY_KEYS, PROPERTY_KEYS,
type DockviewFrameworkOptions, type DockviewFrameworkOptions,
createDockview,
} from 'dockview-core'; } from 'dockview-core';
import { import {
ref, ref,
@ -41,7 +41,7 @@ const emit = defineEmits<VueEvents>();
const props = defineProps<IDockviewVueProps>(); const props = defineProps<IDockviewVueProps>();
const el = ref<HTMLElement | null>(null); const el = ref<HTMLElement | null>(null);
const instance = ref<DockviewComponent | null>(null); const instance = ref<DockviewApi | null>(null);
PROPERTY_KEYS.forEach((coreOptionKey) => { PROPERTY_KEYS.forEach((coreOptionKey) => {
watch( watch(
@ -66,7 +66,6 @@ onMounted(() => {
} }
const frameworkOptions: DockviewFrameworkOptions = { const frameworkOptions: DockviewFrameworkOptions = {
parentElement: el.value,
createComponent(options) { createComponent(options) {
const component = findComponent( const component = findComponent(
inst, inst,
@ -143,13 +142,13 @@ onMounted(() => {
: undefined, : undefined,
}; };
const dockview = new DockviewComponent({ const api = createDockview(el.value, {
...extractCoreOptions(props), ...extractCoreOptions(props),
...frameworkOptions, ...frameworkOptions,
}); });
const { clientWidth, clientHeight } = el.value; const { clientWidth, clientHeight } = el.value;
dockview.layout(clientWidth, clientHeight); api.layout(clientWidth, clientHeight);
/** /**
* !!! THIS IS VERY IMPORTANT * !!! THIS IS VERY IMPORTANT
@ -164,9 +163,9 @@ onMounted(() => {
* @see https://vuejs.org/guide/extras/reactivity-in-depth.html * @see https://vuejs.org/guide/extras/reactivity-in-depth.html
* @see https://vuejs.org/api/reactivity-advanced.html#markraw * @see https://vuejs.org/api/reactivity-advanced.html#markraw
*/ */
instance.value = markRaw(dockview); instance.value = markRaw(api);
emit('ready', { api: new DockviewApi(dockview) }); emit('ready', { api});
}); });
onBeforeUnmount(() => { onBeforeUnmount(() => {

15
packages/dockview/src/dockview/dockview.tsx
View File

@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
import { import {
DockviewComponent,
DockviewWillDropEvent, DockviewWillDropEvent,
DockviewApi, DockviewApi,
DockviewGroupPanel, DockviewGroupPanel,
@ -16,6 +15,7 @@ import {
DockviewFrameworkOptions, DockviewFrameworkOptions,
DockviewDndOverlayEvent, DockviewDndOverlayEvent,
DockviewReadyEvent, DockviewReadyEvent,
createDockview,
} from 'dockview-core'; } from 'dockview-core';
import { ReactPanelContentPart } from './reactContentPart'; import { ReactPanelContentPart } from './reactContentPart';
import { ReactPanelHeaderPart } from './reactHeaderPart'; import { ReactPanelHeaderPart } from './reactHeaderPart';
@ -76,7 +76,7 @@ function extractCoreOptions(props: IDockviewReactProps): DockviewOptions {
export const DockviewReact = React.forwardRef( export const DockviewReact = React.forwardRef(
(props: IDockviewReactProps, ref: React.ForwardedRef<HTMLDivElement>) => { (props: IDockviewReactProps, ref: React.ForwardedRef<HTMLDivElement>) => {
const domRef = React.useRef<HTMLDivElement>(null); const domRef = React.useRef<HTMLDivElement>(null);
const dockviewRef = React.useRef<DockviewComponent>(); const dockviewRef = React.useRef<DockviewApi>();
const [portals, addPortal] = usePortalsLifecycle(); const [portals, addPortal] = usePortalsLifecycle();
React.useImperativeHandle(ref, () => domRef.current!, []); React.useImperativeHandle(ref, () => domRef.current!, []);
@ -161,28 +161,27 @@ export const DockviewReact = React.forwardRef(
); );
} }
: undefined, : undefined,
parentElement: domRef.current,
defaultTabComponent: props.defaultTabComponent defaultTabComponent: props.defaultTabComponent
? DEFAULT_REACT_TAB ? DEFAULT_REACT_TAB
: undefined, : undefined,
}; };
const dockview = new DockviewComponent({ const api = createDockview(domRef.current, {
...extractCoreOptions(props), ...extractCoreOptions(props),
...frameworkOptions, ...frameworkOptions,
}); });
const { clientWidth, clientHeight } = domRef.current; const { clientWidth, clientHeight } = domRef.current;
dockview.layout(clientWidth, clientHeight); api.layout(clientWidth, clientHeight);
if (props.onReady) { if (props.onReady) {
props.onReady({ api: new DockviewApi(dockview) }); props.onReady({ api });
} }
dockviewRef.current = dockview; dockviewRef.current = api;
return () => { return () => {
dockview.dispose(); api.dispose();
}; };
}, []); }, []);

16
packages/dockview/src/gridview/gridview.tsx
View File

@ -1,10 +1,9 @@
import React from 'react'; import React from 'react';
import { import {
GridviewComponent,
IGridviewComponent,
GridviewPanelApi, GridviewPanelApi,
Orientation, Orientation,
GridviewApi, GridviewApi,
createGridview,
} from 'dockview-core'; } from 'dockview-core';
import { ReactGridPanelView } from './view'; import { ReactGridPanelView } from './view';
import { usePortalsLifecycle } from '../react'; import { usePortalsLifecycle } from '../react';
@ -32,7 +31,7 @@ export interface IGridviewReactProps {
export const GridviewReact = React.forwardRef( export const GridviewReact = React.forwardRef(
(props: IGridviewReactProps, ref: React.ForwardedRef<HTMLDivElement>) => { (props: IGridviewReactProps, ref: React.ForwardedRef<HTMLDivElement>) => {
const domRef = React.useRef<HTMLDivElement>(null); const domRef = React.useRef<HTMLDivElement>(null);
const gridviewRef = React.useRef<IGridviewComponent>(); const gridviewRef = React.useRef<GridviewApi>();
const [portals, addPortal] = usePortalsLifecycle(); const [portals, addPortal] = usePortalsLifecycle();
React.useImperativeHandle(ref, () => domRef.current!, []); React.useImperativeHandle(ref, () => domRef.current!, []);
@ -44,8 +43,7 @@ export const GridviewReact = React.forwardRef(
}; };
} }
const gridview = new GridviewComponent({ const api = createGridview(domRef.current, {
parentElement: domRef.current,
disableAutoResizing: props.disableAutoResizing, disableAutoResizing: props.disableAutoResizing,
proportionalLayout: proportionalLayout:
typeof props.proportionalLayout === 'boolean' typeof props.proportionalLayout === 'boolean'
@ -71,16 +69,16 @@ export const GridviewReact = React.forwardRef(
}); });
const { clientWidth, clientHeight } = domRef.current; const { clientWidth, clientHeight } = domRef.current;
gridview.layout(clientWidth, clientHeight); api.layout(clientWidth, clientHeight);
if (props.onReady) { if (props.onReady) {
props.onReady({ api: new GridviewApi(gridview) }); props.onReady({ api });
} }
gridviewRef.current = gridview; gridviewRef.current = api;
return () => { return () => {
gridview.dispose(); api.dispose();
}; };
}, []); }, []);

22
packages/dockview/src/paneview/paneview.tsx
View File

@ -1,11 +1,10 @@
import React from 'react'; import React from 'react';
import { import {
PaneviewPanelApi, PaneviewPanelApi,
PaneviewComponent,
IPaneviewComponent,
PaneviewDndOverlayEvent, PaneviewDndOverlayEvent,
PaneviewApi, PaneviewApi,
PaneviewDropEvent, PaneviewDropEvent,
createPaneview,
} from 'dockview-core'; } from 'dockview-core';
import { usePortalsLifecycle } from '../react'; import { usePortalsLifecycle } from '../react';
import { PanePanelSection } from './view'; import { PanePanelSection } from './view';
@ -39,7 +38,7 @@ export interface IPaneviewReactProps {
export const PaneviewReact = React.forwardRef( export const PaneviewReact = React.forwardRef(
(props: IPaneviewReactProps, ref: React.ForwardedRef<HTMLDivElement>) => { (props: IPaneviewReactProps, ref: React.ForwardedRef<HTMLDivElement>) => {
const domRef = React.useRef<HTMLDivElement>(null); const domRef = React.useRef<HTMLDivElement>(null);
const paneviewRef = React.useRef<IPaneviewComponent>(); const paneviewRef = React.useRef<PaneviewApi>();
const [portals, addPortal] = usePortalsLifecycle(); const [portals, addPortal] = usePortalsLifecycle();
React.useImperativeHandle(ref, () => domRef.current!, []); React.useImperativeHandle(ref, () => domRef.current!, []);
@ -54,8 +53,7 @@ export const PaneviewReact = React.forwardRef(
addPortal, addPortal,
}); });
const paneview = new PaneviewComponent({ const api = createPaneview(domRef.current!, {
parentElement: domRef.current!,
disableAutoResizing: props.disableAutoResizing, disableAutoResizing: props.disableAutoResizing,
frameworkComponents: props.components, frameworkComponents: props.components,
components: {}, components: {},
@ -73,19 +71,17 @@ export const PaneviewReact = React.forwardRef(
showDndOverlay: props.showDndOverlay, showDndOverlay: props.showDndOverlay,
}); });
const api = new PaneviewApi(paneview);
const { clientWidth, clientHeight } = domRef.current!; const { clientWidth, clientHeight } = domRef.current!;
paneview.layout(clientWidth, clientHeight); api.layout(clientWidth, clientHeight);
if (props.onReady) { if (props.onReady) {
props.onReady({ api }); props.onReady({ api });
} }
paneviewRef.current = paneview; paneviewRef.current = api;
return () => { return () => {
paneview.dispose(); api.dispose();
}; };
}, []); }, []);
@ -114,13 +110,13 @@ export const PaneviewReact = React.forwardRef(
}; };
} }
const paneview = paneviewRef.current; const api = paneviewRef.current;
const disposable = paneview.onDidDrop((event) => { const disposable = api.onDidDrop((event) => {
if (props.onDidDrop) { if (props.onDidDrop) {
props.onDidDrop({ props.onDidDrop({
...event, ...event,
api: new PaneviewApi(paneview), api,
}); });
} }
}); });

16
packages/dockview/src/splitview/splitview.tsx
View File

@ -2,9 +2,8 @@ import React from 'react';
import { import {
SplitviewApi, SplitviewApi,
SplitviewPanelApi, SplitviewPanelApi,
ISplitviewComponent,
SplitviewComponent,
Orientation, Orientation,
createSplitview,
} from 'dockview-core'; } from 'dockview-core';
import { usePortalsLifecycle } from '../react'; import { usePortalsLifecycle } from '../react';
import { PanelParameters } from '../types'; import { PanelParameters } from '../types';
@ -33,14 +32,13 @@ export interface ISplitviewReactProps {
export const SplitviewReact = React.forwardRef( export const SplitviewReact = React.forwardRef(
(props: ISplitviewReactProps, ref: React.ForwardedRef<HTMLDivElement>) => { (props: ISplitviewReactProps, ref: React.ForwardedRef<HTMLDivElement>) => {
const domRef = React.useRef<HTMLDivElement>(null); const domRef = React.useRef<HTMLDivElement>(null);
const splitviewRef = React.useRef<ISplitviewComponent>(); const splitviewRef = React.useRef<SplitviewApi>();
const [portals, addPortal] = usePortalsLifecycle(); const [portals, addPortal] = usePortalsLifecycle();
React.useImperativeHandle(ref, () => domRef.current!, []); React.useImperativeHandle(ref, () => domRef.current!, []);
React.useEffect(() => { React.useEffect(() => {
const splitview = new SplitviewComponent({ const api = createSplitview(domRef.current!, {
parentElement: domRef.current!,
disableAutoResizing: props.disableAutoResizing, disableAutoResizing: props.disableAutoResizing,
orientation: props.orientation ?? Orientation.HORIZONTAL, orientation: props.orientation ?? Orientation.HORIZONTAL,
frameworkComponents: props.components, frameworkComponents: props.components,
@ -65,16 +63,16 @@ export const SplitviewReact = React.forwardRef(
}); });
const { clientWidth, clientHeight } = domRef.current!; const { clientWidth, clientHeight } = domRef.current!;
splitview.layout(clientWidth, clientHeight); api.layout(clientWidth, clientHeight);
if (props.onReady) { if (props.onReady) {
props.onReady({ api: new SplitviewApi(splitview) }); props.onReady({ api });
} }
splitviewRef.current = splitview; splitviewRef.current = api;
return () => { return () => {
splitview.dispose(); api.dispose();
}; };
}, []); }, []);

11
packages/docs/templates/dockview/basic/typescript/src/index.ts vendored
View File

@ -1,7 +1,6 @@
import 'dockview-core/dist/styles/dockview.css'; import 'dockview-core/dist/styles/dockview.css';
import { import {
DockviewApi, createDockview,
DockviewComponent,
GroupPanelPartInitParameters, GroupPanelPartInitParameters,
IContentRenderer, IContentRenderer,
} from 'dockview-core'; } from 'dockview-core';
@ -23,10 +22,8 @@ class Panel implements IContentRenderer {
} }
} }
document.getElementById('app').className = 'dockview-theme-abyss'; const api = createDockview(document.getElementById('app'), {
className: 'dockview-theme-abyss',
const dockview = new DockviewComponent({
parentElement: document.getElementById('app'),
createComponent: (options) => { createComponent: (options) => {
switch (options.name) { switch (options.name) {
case 'default': case 'default':
@ -35,8 +32,6 @@ const dockview = new DockviewComponent({
}, },
}); });
const api = new DockviewApi(dockview);
api.addPanel({ api.addPanel({
id: 'panel_1', id: 'panel_1',
component: 'default', component: 'default',