diff --git a/packages/dockview-core/src/__tests__/api/dockviewPanelApi.spec.ts b/packages/dockview-core/src/__tests__/api/dockviewPanelApi.spec.ts index e766c9609..0bc24eaa5 100644 --- a/packages/dockview-core/src/__tests__/api/dockviewPanelApi.spec.ts +++ b/packages/dockview-core/src/__tests__/api/dockviewPanelApi.spec.ts @@ -9,7 +9,7 @@ describe('groupPanelApi', () => { const accessor = fromPartial({ onDidAddPanel: jest.fn(), onDidRemovePanel: jest.fn(), - options: { parentElement: document.createElement('div') }, + options: {}, }); const panelMock = jest.fn(() => { @@ -49,7 +49,7 @@ describe('groupPanelApi', () => { const accessor = fromPartial({ onDidAddPanel: jest.fn(), onDidRemovePanel: jest.fn(), - options: { parentElement: document.createElement('div') }, + options: {}, }); const groupViewPanel = new DockviewGroupPanel( @@ -81,7 +81,7 @@ describe('groupPanelApi', () => { const accessor = fromPartial({ onDidAddPanel: jest.fn(), onDidRemovePanel: jest.fn(), - options: { parentElement: document.createElement('div') }, + options: {}, }); const groupViewPanel = new DockviewGroupPanel( diff --git a/packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts b/packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts index 1ff33cb90..bdcc370ee 100644 --- a/packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts @@ -16,7 +16,7 @@ describe('tabsContainer', () => { const accessor = fromPartial({ onDidAddPanel: jest.fn(), onDidRemovePanel: jest.fn(), - options: { parentElement: document.createElement('div') }, + options: {}, }); const groupviewMock = jest.fn, []>( @@ -69,7 +69,7 @@ describe('tabsContainer', () => { id: 'testcomponentid', onDidAddPanel: jest.fn(), onDidRemovePanel: jest.fn(), - options: { parentElement: document.createElement('div') }, + options: {}, }); const groupviewMock = jest.fn, []>( @@ -135,7 +135,7 @@ describe('tabsContainer', () => { id: 'testcomponentid', onDidAddPanel: jest.fn(), onDidRemovePanel: jest.fn(), - options: { parentElement: document.createElement('div') }, + options: {}, }); const groupviewMock = jest.fn, []>( @@ -198,7 +198,7 @@ describe('tabsContainer', () => { id: 'testcomponentid', onDidAddPanel: jest.fn(), onDidRemovePanel: jest.fn(), - options: { parentElement: document.createElement('div') }, + options: {}, }); const groupviewMock = jest.fn, []>( @@ -261,7 +261,7 @@ describe('tabsContainer', () => { id: 'testcomponentid', onDidAddPanel: jest.fn(), onDidRemovePanel: jest.fn(), - options: { parentElement: document.createElement('div') }, + options: {}, }); const groupviewMock = jest.fn, []>( @@ -329,7 +329,7 @@ describe('tabsContainer', () => { id: 'testcomponentid', onDidAddPanel: jest.fn(), onDidRemovePanel: jest.fn(), - options: { parentElement: document.createElement('div') }, + options: {}, }); const groupPanelMock = jest.fn(() => { @@ -393,7 +393,7 @@ describe('tabsContainer', () => { id: 'testcomponentid', onDidAddPanel: jest.fn(), onDidRemovePanel: jest.fn(), - options: { parentElement: document.createElement('div') }, + options: {}, }); const groupPanelMock = jest.fn(() => { @@ -454,7 +454,7 @@ describe('tabsContainer', () => { test('that a tab will become floating when clicked if not floating and shift is selected', () => { const accessor = fromPartial({ - options: { parentElement: document.createElement('div') }, + options: {}, onDidAddPanel: jest.fn(), onDidRemovePanel: jest.fn(), element: document.createElement('div'), @@ -508,7 +508,7 @@ describe('tabsContainer', () => { test('that a tab that is already floating cannot be floated again', () => { const accessor = fromPartial({ - options: { parentElement: document.createElement('div') }, + options: {}, onDidAddPanel: jest.fn(), onDidRemovePanel: jest.fn(), 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', () => { const accessor = fromPartial({ - options: { parentElement: document.createElement('div') }, + options: {}, onDidAddPanel: jest.fn(), onDidRemovePanel: jest.fn(), element: document.createElement('div'), @@ -613,7 +613,7 @@ describe('tabsContainer', () => { test('pre header actions', () => { const accessor = fromPartial({ - options: { parentElement: document.createElement('div') }, + options: {}, onDidAddPanel: jest.fn(), onDidRemovePanel: jest.fn(), element: document.createElement('div'), @@ -680,7 +680,7 @@ describe('tabsContainer', () => { test('left header actions', () => { const accessor = fromPartial({ - options: { parentElement: document.createElement('div') }, + options: {}, onDidAddPanel: jest.fn(), onDidRemovePanel: jest.fn(), element: document.createElement('div'), @@ -747,7 +747,7 @@ describe('tabsContainer', () => { test('right header actions', () => { const accessor = fromPartial({ - options: { parentElement: document.createElement('div') }, + options: {}, onDidAddPanel: jest.fn(), onDidRemovePanel: jest.fn(), element: document.createElement('div'), diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts index c23b52c7f..9aed10312 100644 --- a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts @@ -101,8 +101,7 @@ describe('dockviewComponent', () => { beforeEach(() => { container = document.createElement('div'); - dockview = new DockviewComponent({ - parentElement: container, + dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -1238,8 +1237,7 @@ describe('dockviewComponent', () => { test('panel is disposed of when closed', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -1281,8 +1279,7 @@ describe('dockviewComponent', () => { test('can add panel of same id if already removed', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -1334,8 +1331,7 @@ describe('dockviewComponent', () => { test('panel is disposed of when removed', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -1377,8 +1373,7 @@ describe('dockviewComponent', () => { test('panel is not disposed of when moved to a new group', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -1433,8 +1428,7 @@ describe('dockviewComponent', () => { test('panel is not disposed of when moved within another group', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -1489,8 +1483,7 @@ describe('dockviewComponent', () => { test('panel is not disposed of when moved within another group', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -1543,8 +1536,7 @@ describe('dockviewComponent', () => { test('panel is disposed of when group is disposed', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -1594,8 +1586,7 @@ describe('dockviewComponent', () => { test('panel is disposed of when component is disposed', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -1645,8 +1636,7 @@ describe('dockviewComponent', () => { test('panel is disposed of when from JSON is called', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -1706,8 +1696,7 @@ describe('dockviewComponent', () => { test('move entire group into another group', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -1940,8 +1929,7 @@ describe('dockviewComponent', () => { test('load a layout with a non-existant tab id', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -2034,8 +2022,7 @@ describe('dockviewComponent', () => { test('load and persist layout with custom tab header', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -2157,8 +2144,7 @@ describe('dockviewComponent', () => { test('#2', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -2256,8 +2242,7 @@ describe('dockviewComponent', () => { test('orthogonal realigment #1', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -2367,9 +2352,7 @@ describe('dockviewComponent', () => { test('orthogonal realigment #2', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, - + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -2514,9 +2497,7 @@ describe('dockviewComponent', () => { test('orthogonal realigment #3', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, - + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -2648,9 +2629,7 @@ describe('dockviewComponent', () => { test('orthogonal realigment #4', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, - + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -2713,9 +2692,7 @@ describe('dockviewComponent', () => { test('that a empty component has no groups', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, - + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -2735,9 +2712,7 @@ describe('dockviewComponent', () => { test('that deserializing an empty layout has zero groups and a watermark', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, - + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -2780,8 +2755,7 @@ describe('dockviewComponent', () => { test('empty', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -2813,8 +2787,7 @@ describe('dockviewComponent', () => { test('that title and params.title do not conflict', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -2904,8 +2877,7 @@ describe('dockviewComponent', () => { test('check dockview component is rendering to the DOM as expected', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -2971,8 +2943,7 @@ describe('dockviewComponent', () => { test('that fromJSON layouts are resized to the current dimensions', async () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -3066,8 +3037,7 @@ describe('dockviewComponent', () => { test('that moving the last panel to be floating should leave an empty gridview', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -3102,8 +3072,7 @@ describe('dockviewComponent', () => { test('that api.setSize applies to the overlay for floating panels', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -3139,8 +3108,7 @@ describe('dockviewComponent', () => { test('that external dnd events do not trigger the top-level center dnd target unless empty', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -3293,8 +3261,7 @@ describe('dockviewComponent', () => { test('that dragging a tab triggers onWillDragPanel', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -3337,8 +3304,7 @@ describe('dockviewComponent', () => { test('that dragging a group triggers onWillDragGroup', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -3381,8 +3347,7 @@ describe('dockviewComponent', () => { test('corrupt layout: bad inline view', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'panelA': @@ -3473,8 +3438,7 @@ describe('dockviewComponent', () => { test('corrupt layout: bad floating view', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'panelA': @@ -3600,8 +3564,7 @@ describe('dockviewComponent', () => { test('that disableAutoResizing is false by default', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'panelA': @@ -3622,8 +3585,7 @@ describe('dockviewComponent', () => { test('that disableAutoResizing can be enabled', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'panelA': @@ -3646,8 +3608,7 @@ describe('dockviewComponent', () => { test('that a floating group can be removed', async () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -3678,8 +3639,7 @@ describe('dockviewComponent', () => { test('move a floating group of one tab to a new fixed group', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -3725,8 +3685,7 @@ describe('dockviewComponent', () => { test('move a floating group of one tab to an existing fixed group', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -3772,8 +3731,7 @@ describe('dockviewComponent', () => { test('move a floating group of one tab to an existing floating group', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -3827,8 +3785,7 @@ describe('dockviewComponent', () => { test('move a floating group of many tabs to a new fixed group', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -3882,8 +3839,7 @@ describe('dockviewComponent', () => { test('move a floating group of many tabs to an existing fixed group', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -3937,8 +3893,7 @@ describe('dockviewComponent', () => { test('move a floating group of many tabs to an existing floating group', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -4000,8 +3955,7 @@ describe('dockviewComponent', () => { test('move a floating tab of one tab to a new fixed group', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -4047,8 +4001,7 @@ describe('dockviewComponent', () => { test('move a floating tab of one tab to an existing fixed group', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -4094,8 +4047,7 @@ describe('dockviewComponent', () => { test('move a floating tab of one tab to an existing floating group', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -4149,8 +4101,7 @@ describe('dockviewComponent', () => { test('move a floating tab of many tabs to a new fixed group', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -4204,8 +4155,7 @@ describe('dockviewComponent', () => { test('move a floating tab of many tabs to an existing fixed group', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -4259,8 +4209,7 @@ describe('dockviewComponent', () => { test('move a floating tab of many tabs to an existing floating group', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -4322,8 +4271,7 @@ describe('dockviewComponent', () => { test('move a fixed tab of one tab to an existing floating group', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -4377,8 +4325,7 @@ describe('dockviewComponent', () => { test('move a fixed tab of many tabs to an existing floating group', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -4431,8 +4378,7 @@ describe('dockviewComponent', () => { test('move a fixed group of one tab to an existing floating group', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -4486,8 +4432,7 @@ describe('dockviewComponent', () => { test('move a fixed group of many tabs to an existing floating group', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -4540,8 +4485,7 @@ describe('dockviewComponent', () => { test('move a fixed tab of one tab to a new floating group', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -4584,8 +4528,7 @@ describe('dockviewComponent', () => { test('move a fixed tab of many tabs to a new floating group', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -4627,8 +4570,7 @@ describe('dockviewComponent', () => { test('move a fixed group of one tab to a new floating group', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -4671,8 +4613,7 @@ describe('dockviewComponent', () => { test('move a fixed group of many tabs to a new floating group', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -4736,8 +4677,7 @@ describe('dockviewComponent', () => { test('add a popout group', async () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -4779,8 +4719,7 @@ describe('dockviewComponent', () => { test('that can remove a popout group', async () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -4816,8 +4755,7 @@ describe('dockviewComponent', () => { test('move from fixed to popout group and back', async () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -4893,8 +4831,7 @@ describe('dockviewComponent', () => { test('that a maximzied group is set to active', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -4941,8 +4878,7 @@ describe('dockviewComponent', () => { beforeEach(() => { jest.useFakeTimers(); - dockview = new DockviewComponent({ - parentElement: container, + dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -5055,8 +4991,7 @@ describe('dockviewComponent', () => { test('that setVisible toggles visiblity', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -5168,8 +5103,7 @@ describe('dockviewComponent', () => { test('setVisible #1', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -5223,8 +5157,7 @@ describe('dockviewComponent', () => { test('that can add panel', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -5258,8 +5191,7 @@ describe('dockviewComponent', () => { test('that can add panel with absolute direction', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -5295,8 +5227,7 @@ describe('dockviewComponent', () => { test('that can add floating panel', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -5332,8 +5263,7 @@ describe('dockviewComponent', () => { test('that can add panel positional to another (within)', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -5368,8 +5298,7 @@ describe('dockviewComponent', () => { test('that can add panel positional to another (not within)', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -5406,8 +5335,7 @@ describe('dockviewComponent', () => { test('that floating a panel should not call an additional addPanel event', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -5459,8 +5387,7 @@ describe('dockviewComponent', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -5511,8 +5438,7 @@ describe('dockviewComponent', () => { test('addGroup with absolute position', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -5556,8 +5482,7 @@ describe('dockviewComponent', () => { jest.useFakeTimers(); const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': @@ -5609,8 +5534,7 @@ describe('dockviewComponent', () => { test('gap', () => { const container = document.createElement('div'); - const dockview = new DockviewComponent({ - parentElement: container, + const dockview = new DockviewComponent(container, { createComponent(options) { switch (options.name) { case 'default': diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewGroupPanelModel.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewGroupPanelModel.spec.ts index f67443350..59e76b1e4 100644 --- a/packages/dockview-core/src/__tests__/dockview/dockviewGroupPanelModel.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/dockviewGroupPanelModel.spec.ts @@ -276,7 +276,7 @@ describe('dockviewGroupPanelModel', () => { }); dockview = fromPartial({ - options: { parentElement: document.createElement('div') }, + options: {}, createWatermarkComponent: () => new Watermark(), doSetGroupActive: jest.fn(), id: 'dockview-1', @@ -527,8 +527,7 @@ describe('dockviewGroupPanelModel', () => { }); test('that group is set on panel during onDidAddPanel event', () => { - const cut = new DockviewComponent({ - parentElement: document.createElement('div'), + const cut = new DockviewComponent(document.createElement('div'), { createComponent(options) { switch (options.name) { case 'component': @@ -548,17 +547,19 @@ describe('dockviewGroupPanelModel', () => { }); test('toJSON() default', () => { - const dockviewComponent = new DockviewComponent({ - parentElement: document.createElement('div'), - createComponent(options) { - switch (options.name) { - case 'component': - return new TestContentPart(options.id); - default: - throw new Error(`unsupported`); - } - }, - }); + const dockviewComponent = new DockviewComponent( + document.createElement('div'), + { + createComponent(options) { + switch (options.name) { + case 'component': + return new TestContentPart(options.id); + default: + throw new Error(`unsupported`); + } + }, + } + ); const cut = new DockviewGroupPanelModel( document.createElement('div'), @@ -576,17 +577,19 @@ describe('dockviewGroupPanelModel', () => { }); test('toJSON() locked and hideHeader', () => { - const dockviewComponent = new DockviewComponent({ - parentElement: document.createElement('div'), - createComponent(options) { - switch (options.name) { - case 'component': - return new TestContentPart(options.id); - default: - throw new Error(`unsupported`); - } - }, - }); + const dockviewComponent = new DockviewComponent( + document.createElement('div'), + { + createComponent(options) { + switch (options.name) { + case 'component': + return new TestContentPart(options.id); + default: + throw new Error(`unsupported`); + } + }, + } + ); const cut = new DockviewGroupPanelModel( document.createElement('div'), @@ -609,17 +612,19 @@ describe('dockviewGroupPanelModel', () => { }); test("that openPanel with skipSetActive doesn't set panel to active", () => { - const dockviewComponent = new DockviewComponent({ - parentElement: document.createElement('div'), - createComponent(options) { - switch (options.name) { - case 'component': - return new TestContentPart(options.id); - default: - throw new Error(`unsupported`); - } - }, - }); + const dockviewComponent = new DockviewComponent( + document.createElement('div'), + { + createComponent(options) { + switch (options.name) { + case 'component': + return new TestContentPart(options.id); + default: + throw new Error(`unsupported`); + } + }, + } + ); const groupviewContainer = document.createElement('div'); const cut = new DockviewGroupPanelModel( @@ -659,9 +664,7 @@ describe('dockviewGroupPanelModel', () => { test('that should not show drop target is external event', () => { const accessor = fromPartial({ id: 'testcomponentid', - options: { - parentElement: document.createElement('div'), - }, + options: {}, getPanel: jest.fn(), onDidAddPanel: jest.fn(), onDidRemovePanel: jest.fn(), @@ -723,9 +726,7 @@ describe('dockviewGroupPanelModel', () => { test('that the .locked behaviour is as', () => { const accessor = fromPartial({ id: 'testcomponentid', - options: { - parentElement: document.createElement('div'), - }, + options: {}, getPanel: jest.fn(), onDidAddPanel: jest.fn(), onDidRemovePanel: jest.fn(), @@ -816,9 +817,7 @@ describe('dockviewGroupPanelModel', () => { test('that should not show drop target if dropping on self', () => { const accessor = fromPartial({ id: 'testcomponentid', - options: { - parentElement: document.createElement('div'), - }, + options: {}, getPanel: jest.fn(), doSetGroupActive: 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', () => { const accessor = fromPartial({ id: 'testcomponentid', - options: { - parentElement: document.createElement('div'), - }, + options: {}, getPanel: jest.fn(), doSetGroupActive: jest.fn(), onDidAddPanel: jest.fn(), @@ -963,9 +960,7 @@ describe('dockviewGroupPanelModel', () => { test('that should not allow drop when not dropping for different component id', () => { const accessor = fromPartial({ id: 'testcomponentid', - options: { - parentElement: document.createElement('div'), - }, + options: {}, getPanel: jest.fn(), doSetGroupActive: jest.fn(), onDidAddPanel: jest.fn(), diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewPanelModel.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewPanelModel.spec.ts index 5bab66039..ad40e18b1 100644 --- a/packages/dockview-core/src/__tests__/dockview/dockviewPanelModel.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/dockviewPanelModel.spec.ts @@ -30,7 +30,6 @@ describe('dockviewGroupPanel', () => { accessorMock = fromPartial({ options: { - parentElement: document.createElement('div'), createComponent(options) { switch (options.name) { case 'contentComponent': @@ -84,7 +83,6 @@ describe('dockviewGroupPanel', () => { test('that the default tab is created', () => { accessorMock = fromPartial({ options: { - parentElement: document.createElement('div'), createComponent(options) { switch (options.name) { case 'contentComponent': @@ -117,7 +115,6 @@ describe('dockviewGroupPanel', () => { test('that the provided default tab is chosen when no implementation is provided', () => { accessorMock = fromPartial({ options: { - parentElement: document.createElement('div'), defaultTabComponent: 'tabComponent', createComponent(options) { switch (options.name) { @@ -150,7 +147,6 @@ describe('dockviewGroupPanel', () => { test('that is library default tab instance is created when no alternative exists', () => { accessorMock = fromPartial({ options: { - parentElement: document.createElement('div'), createComponent(options) { switch (options.name) { case 'contentComponent': @@ -174,7 +170,6 @@ describe('dockviewGroupPanel', () => { test('that the default content is created', () => { accessorMock = fromPartial({ options: { - parentElement: document.createElement('div'), createComponent(options) { switch (options.name) { case 'contentComponent': diff --git a/packages/dockview-core/src/__tests__/gridview/gridviewComponent.spec.ts b/packages/dockview-core/src/__tests__/gridview/gridviewComponent.spec.ts index 0425c1e7c..7e5f4e03c 100644 --- a/packages/dockview-core/src/__tests__/gridview/gridviewComponent.spec.ts +++ b/packages/dockview-core/src/__tests__/gridview/gridviewComponent.spec.ts @@ -33,8 +33,7 @@ describe('gridview', () => { }); test('added views are visible by default', () => { - const gridview = new GridviewComponent({ - parentElement: container, + const gridview = new GridviewComponent(container, { proportionalLayout: false, orientation: Orientation.VERTICAL, components: { default: TestGridview }, @@ -53,8 +52,7 @@ describe('gridview', () => { }); test('remove panel', () => { - const gridview = new GridviewComponent({ - parentElement: container, + const gridview = new GridviewComponent(container, { proportionalLayout: false, orientation: Orientation.VERTICAL, components: { default: TestGridview }, @@ -84,8 +82,7 @@ describe('gridview', () => { }); test('active panel', () => { - const gridview = new GridviewComponent({ - parentElement: container, + const gridview = new GridviewComponent(container, { proportionalLayout: false, orientation: Orientation.VERTICAL, components: { default: TestGridview }, @@ -145,8 +142,7 @@ describe('gridview', () => { }); test('deserialize and serialize a layout', () => { - const gridview = new GridviewComponent({ - parentElement: container, + const gridview = new GridviewComponent(container, { proportionalLayout: false, orientation: Orientation.VERTICAL, components: { default: TestGridview }, @@ -273,8 +269,7 @@ describe('gridview', () => { }); test('toJSON shouldnt fire any layout events', () => { - const gridview = new GridviewComponent({ - parentElement: container, + const gridview = new GridviewComponent(container, { proportionalLayout: false, orientation: Orientation.VERTICAL, components: { default: TestGridview }, @@ -310,8 +305,7 @@ describe('gridview', () => { }); test('gridview events', () => { - const gridview = new GridviewComponent({ - parentElement: container, + const gridview = new GridviewComponent(container, { proportionalLayout: false, orientation: Orientation.VERTICAL, components: { default: TestGridview }, @@ -434,8 +428,7 @@ describe('gridview', () => { test('dispose of gridviewComponent', () => { expect(container.childNodes.length).toBe(0); - const gridview = new GridviewComponent({ - parentElement: container, + const gridview = new GridviewComponent(container, { proportionalLayout: false, orientation: Orientation.VERTICAL, components: { default: TestGridview }, @@ -464,8 +457,7 @@ describe('gridview', () => { }); test('#1/VERTICAL', () => { - const gridview = new GridviewComponent({ - parentElement: container, + const gridview = new GridviewComponent(container, { proportionalLayout: true, orientation: Orientation.VERTICAL, components: { default: TestGridview }, @@ -523,8 +515,7 @@ describe('gridview', () => { }); test('#2/HORIZONTAL', () => { - const gridview = new GridviewComponent({ - parentElement: container, + const gridview = new GridviewComponent(container, { proportionalLayout: true, orientation: Orientation.HORIZONTAL, components: { default: TestGridview }, @@ -582,8 +573,7 @@ describe('gridview', () => { }); test('#3/HORIZONTAL', () => { - const gridview = new GridviewComponent({ - parentElement: container, + const gridview = new GridviewComponent(container, { proportionalLayout: true, orientation: Orientation.HORIZONTAL, components: { default: TestGridview }, @@ -659,8 +649,7 @@ describe('gridview', () => { }); test('#4/HORIZONTAL', () => { - const gridview = new GridviewComponent({ - parentElement: container, + const gridview = new GridviewComponent(container, { proportionalLayout: true, orientation: Orientation.HORIZONTAL, components: { default: TestGridview }, @@ -754,8 +743,7 @@ describe('gridview', () => { }); test('#5/VERTICAL', () => { - const gridview = new GridviewComponent({ - parentElement: container, + const gridview = new GridviewComponent(container, { proportionalLayout: true, orientation: Orientation.VERTICAL, components: { default: TestGridview }, @@ -849,8 +837,7 @@ describe('gridview', () => { }); test('#5/VERTICAL/proportional/false', () => { - const gridview = new GridviewComponent({ - parentElement: container, + const gridview = new GridviewComponent(container, { proportionalLayout: false, orientation: Orientation.VERTICAL, components: { default: TestGridview }, @@ -944,8 +931,7 @@ describe('gridview', () => { }); test('#6/VERTICAL', () => { - const gridview = new GridviewComponent({ - parentElement: container, + const gridview = new GridviewComponent(container, { proportionalLayout: true, orientation: Orientation.VERTICAL, components: { default: TestGridview }, @@ -1069,8 +1055,7 @@ describe('gridview', () => { }); test('#7/VERTICAL layout first', () => { - const gridview = new GridviewComponent({ - parentElement: container, + const gridview = new GridviewComponent(container, { proportionalLayout: true, orientation: Orientation.VERTICAL, components: { default: TestGridview }, @@ -1194,8 +1179,7 @@ describe('gridview', () => { }); test('#8/VERTICAL layout after', () => { - const gridview = new GridviewComponent({ - parentElement: container, + const gridview = new GridviewComponent(container, { proportionalLayout: true, orientation: Orientation.VERTICAL, components: { default: TestGridview }, @@ -1321,8 +1305,7 @@ describe('gridview', () => { }); test('#9/HORIZONTAL', () => { - const gridview = new GridviewComponent({ - parentElement: container, + const gridview = new GridviewComponent(container, { proportionalLayout: true, orientation: Orientation.HORIZONTAL, components: { default: TestGridview }, @@ -1446,8 +1429,7 @@ describe('gridview', () => { }); test('#9/HORIZONTAL/proportional/false', () => { - const gridview = new GridviewComponent({ - parentElement: container, + const gridview = new GridviewComponent(container, { proportionalLayout: false, orientation: Orientation.HORIZONTAL, components: { default: TestGridview }, @@ -1571,8 +1553,7 @@ describe('gridview', () => { }); test('#10/HORIZONTAL scale x:1.5 y:2', () => { - const gridview = new GridviewComponent({ - parentElement: container, + const gridview = new GridviewComponent(container, { proportionalLayout: true, orientation: Orientation.HORIZONTAL, components: { default: TestGridview }, @@ -1699,8 +1680,7 @@ describe('gridview', () => { }); test('panel is disposed of when component is disposed', () => { - const gridview = new GridviewComponent({ - parentElement: container, + const gridview = new GridviewComponent(container, { proportionalLayout: false, orientation: Orientation.VERTICAL, components: { default: TestGridview }, @@ -1730,8 +1710,7 @@ describe('gridview', () => { }); test('panel is disposed of when removed', () => { - const gridview = new GridviewComponent({ - parentElement: container, + const gridview = new GridviewComponent(container, { proportionalLayout: false, orientation: Orientation.VERTICAL, components: { default: TestGridview }, @@ -1760,8 +1739,7 @@ describe('gridview', () => { }); test('panel is disposed of when fromJSON is called', () => { - const gridview = new GridviewComponent({ - parentElement: container, + const gridview = new GridviewComponent(container, { proportionalLayout: false, orientation: Orientation.VERTICAL, components: { default: TestGridview }, @@ -1799,8 +1777,7 @@ describe('gridview', () => { test('fromJSON events should still fire', () => { jest.useFakeTimers(); - const gridview = new GridviewComponent({ - parentElement: container, + const gridview = new GridviewComponent(container, { proportionalLayout: true, orientation: Orientation.HORIZONTAL, components: { default: TestGridview }, @@ -1922,8 +1899,7 @@ describe('gridview', () => { test('that fromJSON layouts are resized to the current dimensions', async () => { const container = document.createElement('div'); - const gridview = new GridviewComponent({ - parentElement: container, + const gridview = new GridviewComponent(container, { proportionalLayout: true, orientation: Orientation.VERTICAL, 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 () => { const container = document.createElement('div'); - const gridview = new GridviewComponent({ - parentElement: container, + const gridview = new GridviewComponent(container, { proportionalLayout: true, orientation: Orientation.VERTICAL, 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 () => { const container = document.createElement('div'); - const gridview = new GridviewComponent({ - parentElement: container, + const gridview = new GridviewComponent(container, { proportionalLayout: true, orientation: Orientation.VERTICAL, components: { default: TestGridview }, @@ -2599,8 +2573,7 @@ describe('gridview', () => { }); test('that loading a corrupt layout throws an error and leaves a clean gridview behind', () => { - const gridview = new GridviewComponent({ - parentElement: container, + const gridview = new GridviewComponent(container, { proportionalLayout: true, orientation: Orientation.HORIZONTAL, components: { default: TestGridview }, @@ -2679,8 +2652,7 @@ describe('gridview', () => { }); test('that disableAutoResizing is false by default', () => { - const gridview = new GridviewComponent({ - parentElement: container, + const gridview = new GridviewComponent(container, { proportionalLayout: true, orientation: Orientation.HORIZONTAL, components: { default: TestGridview }, @@ -2690,8 +2662,7 @@ describe('gridview', () => { }); test('that disableAutoResizing can be enabled', () => { - const gridview = new GridviewComponent({ - parentElement: container, + const gridview = new GridviewComponent(container, { proportionalLayout: true, orientation: Orientation.HORIZONTAL, components: { default: TestGridview }, @@ -2702,8 +2673,7 @@ describe('gridview', () => { }); test('that setVisible toggles visiblity', () => { - const gridview = new GridviewComponent({ - parentElement: container, + const gridview = new GridviewComponent(container, { proportionalLayout: true, orientation: Orientation.HORIZONTAL, components: { default: TestGridview }, diff --git a/packages/dockview-core/src/__tests__/paneview/paneviewComponent.spec.ts b/packages/dockview-core/src/__tests__/paneview/paneviewComponent.spec.ts index b7baea64a..246e30f8a 100644 --- a/packages/dockview-core/src/__tests__/paneview/paneviewComponent.spec.ts +++ b/packages/dockview-core/src/__tests__/paneview/paneviewComponent.spec.ts @@ -71,8 +71,7 @@ describe('componentPaneview', () => { test('vertical panels', () => { const disposables = new CompositeDisposable(); - const paneview = new PaneviewComponent({ - parentElement: container, + const paneview = new PaneviewComponent(container, { components: { testPanel: TestPanel, }, @@ -144,8 +143,7 @@ describe('componentPaneview', () => { }); test('serialization', () => { - const paneview = new PaneviewComponent({ - parentElement: container, + const paneview = new PaneviewComponent(container, { components: { testPanel: TestPanel, }, @@ -253,8 +251,7 @@ describe('componentPaneview', () => { }); test('toJSON shouldnt fire any layout events', () => { - const paneview = new PaneviewComponent({ - parentElement: container, + const paneview = new PaneviewComponent(container, { components: { testPanel: TestPanel, }, @@ -285,8 +282,7 @@ describe('componentPaneview', () => { test('dispose of paneviewComponent', () => { expect(container.childNodes.length).toBe(0); - const paneview = new PaneviewComponent({ - parentElement: container, + const paneview = new PaneviewComponent(container, { components: { testPanel: TestPanel, }, @@ -313,8 +309,7 @@ describe('componentPaneview', () => { }); test('panel is disposed of when component is disposed', () => { - const paneview = new PaneviewComponent({ - parentElement: container, + const paneview = new PaneviewComponent(container, { components: { testPanel: TestPanel, }, @@ -346,8 +341,7 @@ describe('componentPaneview', () => { }); test('panel is disposed of when removed', () => { - const paneview = new PaneviewComponent({ - parentElement: container, + const paneview = new PaneviewComponent(container, { components: { testPanel: TestPanel, }, @@ -379,8 +373,7 @@ describe('componentPaneview', () => { }); test('panel is disposed of when fromJSON is called', () => { - const paneview = new PaneviewComponent({ - parentElement: container, + const paneview = new PaneviewComponent(container, { components: { testPanel: TestPanel, }, @@ -412,8 +405,7 @@ describe('componentPaneview', () => { }); test('that fromJSON layouts are resized to the current dimensions', async () => { - const paneview = new PaneviewComponent({ - parentElement: container, + const paneview = new PaneviewComponent(container, { components: { testPanel: TestPanel, }, @@ -493,8 +485,7 @@ describe('componentPaneview', () => { }); test('that disableAutoResizing is false by default', () => { - const paneview = new PaneviewComponent({ - parentElement: container, + const paneview = new PaneviewComponent(container, { components: { testPanel: TestPanel, }, @@ -504,8 +495,7 @@ describe('componentPaneview', () => { }); test('that disableAutoResizing can be enabled', () => { - const paneview = new PaneviewComponent({ - parentElement: container, + const paneview = new PaneviewComponent(container, { components: { testPanel: TestPanel, }, @@ -516,8 +506,7 @@ describe('componentPaneview', () => { }); test('that setVisible toggles visiblity', () => { - const paneview = new PaneviewComponent({ - parentElement: container, + const paneview = new PaneviewComponent(container, { components: { default: TestPanel, }, diff --git a/packages/dockview-core/src/__tests__/splitview/splitviewComponent.spec.ts b/packages/dockview-core/src/__tests__/splitview/splitviewComponent.spec.ts index fa45b53c7..838f0c4cc 100644 --- a/packages/dockview-core/src/__tests__/splitview/splitviewComponent.spec.ts +++ b/packages/dockview-core/src/__tests__/splitview/splitviewComponent.spec.ts @@ -29,8 +29,7 @@ describe('componentSplitview', () => { test('event leakage', () => { Emitter.setLeakageMonitorEnabled(true); - const splitview = new SplitviewComponent({ - parentElement: container, + const splitview = new SplitviewComponent(container, { orientation: Orientation.VERTICAL, components: { testPanel: TestPanel, @@ -66,8 +65,7 @@ describe('componentSplitview', () => { }); test('remove panel', () => { - const splitview = new SplitviewComponent({ - parentElement: container, + const splitview = new SplitviewComponent(container, { orientation: Orientation.VERTICAL, components: { testPanel: TestPanel, @@ -102,8 +100,7 @@ describe('componentSplitview', () => { }); test('horizontal dimensions', () => { - const splitview = new SplitviewComponent({ - parentElement: container, + const splitview = new SplitviewComponent(container, { orientation: Orientation.HORIZONTAL, components: { testPanel: TestPanel, @@ -116,8 +113,7 @@ describe('componentSplitview', () => { }); test('vertical dimensions', () => { - const splitview = new SplitviewComponent({ - parentElement: container, + const splitview = new SplitviewComponent(container, { orientation: Orientation.VERTICAL, components: { testPanel: TestPanel, @@ -130,8 +126,7 @@ describe('componentSplitview', () => { }); test('api resize', () => { - const splitview = new SplitviewComponent({ - parentElement: container, + const splitview = new SplitviewComponent(container, { orientation: Orientation.VERTICAL, components: { testPanel: TestPanel, @@ -183,8 +178,7 @@ describe('componentSplitview', () => { }); test('api', () => { - const splitview = new SplitviewComponent({ - parentElement: container, + const splitview = new SplitviewComponent(container, { orientation: Orientation.HORIZONTAL, components: { testPanel: TestPanel, @@ -225,8 +219,7 @@ describe('componentSplitview', () => { test('vertical panels', () => { const disposables = new CompositeDisposable(); - const splitview = new SplitviewComponent({ - parentElement: container, + const splitview = new SplitviewComponent(container, { orientation: Orientation.VERTICAL, components: { testPanel: TestPanel, @@ -277,8 +270,7 @@ describe('componentSplitview', () => { test('horizontal panels', () => { const disposables = new CompositeDisposable(); - const splitview = new SplitviewComponent({ - parentElement: container, + const splitview = new SplitviewComponent(container, { orientation: Orientation.HORIZONTAL, components: { testPanel: TestPanel, @@ -327,8 +319,7 @@ describe('componentSplitview', () => { }); test('serialization', () => { - const splitview = new SplitviewComponent({ - parentElement: container, + const splitview = new SplitviewComponent(container, { orientation: Orientation.VERTICAL, components: { testPanel: TestPanel, @@ -382,8 +373,7 @@ describe('componentSplitview', () => { }); test('toJSON shouldnt fire any layout events', () => { - const splitview = new SplitviewComponent({ - parentElement: container, + const splitview = new SplitviewComponent(container, { orientation: Orientation.HORIZONTAL, components: { testPanel: TestPanel, @@ -414,8 +404,7 @@ describe('componentSplitview', () => { test('dispose of splitviewComponent', () => { expect(container.childNodes.length).toBe(0); - const splitview = new SplitviewComponent({ - parentElement: container, + const splitview = new SplitviewComponent(container, { orientation: Orientation.HORIZONTAL, components: { testPanel: TestPanel, @@ -441,8 +430,7 @@ describe('componentSplitview', () => { }); test('panel is disposed of when component is disposed', () => { - const splitview = new SplitviewComponent({ - parentElement: container, + const splitview = new SplitviewComponent(container, { orientation: Orientation.HORIZONTAL, components: { default: TestPanel, @@ -473,8 +461,7 @@ describe('componentSplitview', () => { }); test('panel is disposed of when removed', () => { - const splitview = new SplitviewComponent({ - parentElement: container, + const splitview = new SplitviewComponent(container, { orientation: Orientation.HORIZONTAL, components: { default: TestPanel, @@ -505,8 +492,7 @@ describe('componentSplitview', () => { }); test('panel is disposed of when fromJSON is called', () => { - const splitview = new SplitviewComponent({ - parentElement: container, + const splitview = new SplitviewComponent(container, { orientation: Orientation.HORIZONTAL, components: { default: TestPanel, @@ -541,8 +527,7 @@ describe('componentSplitview', () => { }); test('that fromJSON layouts are resized to the current dimensions', async () => { - const splitview = new SplitviewComponent({ - parentElement: container, + const splitview = new SplitviewComponent(container, { orientation: Orientation.VERTICAL, components: { testPanel: TestPanel, @@ -594,8 +579,7 @@ describe('componentSplitview', () => { }); test('that disableAutoResizing is false by default', () => { - const splitview = new SplitviewComponent({ - parentElement: container, + const splitview = new SplitviewComponent(container, { orientation: Orientation.VERTICAL, components: { testPanel: TestPanel, @@ -606,8 +590,7 @@ describe('componentSplitview', () => { }); test('that disableAutoResizing can be enabled', () => { - const splitview = new SplitviewComponent({ - parentElement: container, + const splitview = new SplitviewComponent(container, { orientation: Orientation.VERTICAL, components: { testPanel: TestPanel, @@ -619,8 +602,7 @@ describe('componentSplitview', () => { }); test('that setVisible toggles visiblity', () => { - const splitview = new SplitviewComponent({ - parentElement: container, + const splitview = new SplitviewComponent(container, { orientation: Orientation.HORIZONTAL, components: { default: TestPanel, diff --git a/packages/dockview-core/src/api/component.api.ts b/packages/dockview-core/src/api/component.api.ts index 53bf9092e..e6e003169 100644 --- a/packages/dockview-core/src/api/component.api.ts +++ b/packages/dockview-core/src/api/component.api.ts @@ -7,6 +7,7 @@ import { import { AddGroupOptions, AddPanelOptions, + DockviewComponentOptions, DockviewDndOverlayEvent, MovementOptions, } from '../dockview/options'; @@ -14,6 +15,7 @@ import { Parameters } from '../panel/types'; import { Direction } from '../gridview/baseComponentGridview'; import { AddComponentOptions, + GridviewComponentUpdateOptions, IGridviewComponent, SerializedGridviewComponent, } from '../gridview/gridviewComponent'; @@ -50,6 +52,7 @@ import { DockviewWillDropEvent, WillShowOverlayLocationEvent, } from '../dockview/dockviewGroupPanelModel'; +import { PaneviewComponentOptions } from '../paneview/options'; export interface CommonApi { readonly height: number; @@ -61,6 +64,7 @@ export interface CommonApi { fromJSON(data: T): void; toJSON(): T; clear(): void; + dispose(): void; } export class SplitviewApi implements CommonApi { @@ -143,13 +147,6 @@ export class SplitviewApi implements CommonApi { 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 * for the subsequent resize. @@ -213,6 +210,20 @@ export class SplitviewApi implements CommonApi { clear(): void { this.component.clear(); } + + /** + * Update configuratable options. + */ + updateOptions(options: Partial): 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 { @@ -363,6 +374,20 @@ export class PaneviewApi implements CommonApi { clear(): void { this.component.clear(); } + + /** + * Update configuratable options. + */ + updateOptions(options: Partial): 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 { @@ -530,6 +555,17 @@ export class GridviewApi implements CommonApi { clear(): void { this.component.clear(); } + + updateOptions(options: Partial) { + 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 { @@ -884,4 +920,15 @@ export class DockviewApi implements CommonApi { setGap(gap: number | undefined): void { this.component.updateOptions({ gap }); } + + updateOptions(options: Partial) { + this.component.updateOptions(options); + } + + /** + * Release resources and teardown component. Do not call when using framework versions of dockview. + */ + dispose(): void { + this.component.dispose(); + } } diff --git a/packages/dockview-core/src/api/entryPoints.ts b/packages/dockview-core/src/api/entryPoints.ts new file mode 100644 index 000000000..532567e40 --- /dev/null +++ b/packages/dockview-core/src/api/entryPoints.ts @@ -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); +} diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts index a9a285b9c..73b285375 100644 --- a/packages/dockview-core/src/dockview/dockviewComponent.ts +++ b/packages/dockview-core/src/dockview/dockviewComponent.ts @@ -357,17 +357,18 @@ export class DockviewComponent return this.gridview.margin; } - constructor(options: DockviewComponentOptions) { + constructor(parentElement: HTMLElement, options: DockviewComponentOptions) { super({ proportionalLayout: true, orientation: Orientation.HORIZONTAL, styles: options.hideBorders ? { separatorBorder: 'transparent' } : undefined, - parentElement: options.parentElement, + parentElement: parentElement, disableAutoResizing: options.disableAutoResizing, locked: options.locked, margin: options.gap, + className: options.className, }); const gready = document.createElement('div'); diff --git a/packages/dockview-core/src/dockview/options.ts b/packages/dockview-core/src/dockview/options.ts index 56458bb18..0e8565aa1 100644 --- a/packages/dockview-core/src/dockview/options.ts +++ b/packages/dockview-core/src/dockview/options.ts @@ -54,6 +54,7 @@ export interface DockviewOptions { rootOverlayModel?: DroptargetOverlayModel; locked?: boolean; disableDnd?: boolean; + className?: string; /** * Pixel gap between groups */ @@ -109,13 +110,13 @@ export const PROPERTY_KEYS: (keyof DockviewOptions)[] = (() => { locked: undefined, disableDnd: undefined, gap: undefined, + className: undefined, }; return Object.keys(properties) as (keyof DockviewOptions)[]; })(); export interface DockviewFrameworkOptions { - parentElement: HTMLElement; defaultTabComponent?: string; createRightHeaderActionComponent?: ( group: DockviewGroupPanel diff --git a/packages/dockview-core/src/gridview/baseComponentGridview.ts b/packages/dockview-core/src/gridview/baseComponentGridview.ts index e3f3b327f..8adbf3e28 100644 --- a/packages/dockview-core/src/gridview/baseComponentGridview.ts +++ b/packages/dockview-core/src/gridview/baseComponentGridview.ts @@ -1,7 +1,7 @@ import { Emitter, Event, AsapEvent } from '../events'; import { getGridLocation, Gridview, IGridView } from './gridview'; import { Position } from '../dnd/droptarget'; -import { Disposable, IValueDisposable } from '../lifecycle'; +import { Disposable, IDisposable, IValueDisposable } from '../lifecycle'; import { sequentialNumberGenerator } from '../math'; import { ISplitviewStyles, Orientation, Sizing } from '../splitview/splitview'; import { IPanel } from '../panel/types'; @@ -36,6 +36,7 @@ export interface BaseGridOptions { readonly disableAutoResizing?: boolean; readonly locked?: boolean; readonly margin?: number; + readonly className?: string; } export interface IGridPanelView extends IGridView, IPanel { @@ -43,7 +44,7 @@ export interface IGridPanelView extends IGridView, IPanel { readonly isActive: boolean; } -export interface IBaseGrid { +export interface IBaseGrid extends IDisposable { readonly element: HTMLElement; readonly id: string; readonly width: number; @@ -148,6 +149,10 @@ export abstract class BaseGrid this.element.style.height = '100%'; this.element.style.width = '100%'; + if (typeof options.className === 'string') { + this.element.classList.add(options.className); + } + options.parentElement.appendChild(this.element); this.gridview = new Gridview( diff --git a/packages/dockview-core/src/gridview/gridviewComponent.ts b/packages/dockview-core/src/gridview/gridviewComponent.ts index e01159821..f73e4f710 100644 --- a/packages/dockview-core/src/gridview/gridviewComponent.ts +++ b/packages/dockview-core/src/gridview/gridviewComponent.ts @@ -119,13 +119,14 @@ export class GridviewComponent this._deserializer = value; } - constructor(options: GridviewComponentOptions) { + constructor(parentElement: HTMLElement, options: GridviewComponentOptions) { super({ - parentElement: options.parentElement, + parentElement: parentElement, proportionalLayout: options.proportionalLayout, orientation: options.orientation, styles: options.styles, disableAutoResizing: options.disableAutoResizing, + className: options.className, }); this._options = options; diff --git a/packages/dockview-core/src/gridview/options.ts b/packages/dockview-core/src/gridview/options.ts index c40429358..8a5025846 100644 --- a/packages/dockview-core/src/gridview/options.ts +++ b/packages/dockview-core/src/gridview/options.ts @@ -17,5 +17,5 @@ export interface GridviewComponentOptions { }; frameworkComponentFactory?: FrameworkFactory; styles?: ISplitviewStyles; - parentElement: HTMLElement; + className?: string; } diff --git a/packages/dockview-core/src/index.ts b/packages/dockview-core/src/index.ts index 7c007deb6..57f9e3f00 100644 --- a/packages/dockview-core/src/index.ts +++ b/packages/dockview-core/src/index.ts @@ -73,6 +73,7 @@ export { MeasuredValue, DroptargetOverlayModel, } from './dnd/droptarget'; + export { FocusEvent, PanelDimensionChangeEvent, @@ -107,3 +108,9 @@ export { GridviewApi, DockviewApi, } from './api/component.api'; +export { + createDockview, + createGridview, + createPaneview, + createSplitview, +} from './api/entryPoints'; diff --git a/packages/dockview-core/src/paneview/options.ts b/packages/dockview-core/src/paneview/options.ts index 1d784e4f7..8aef3e649 100644 --- a/packages/dockview-core/src/paneview/options.ts +++ b/packages/dockview-core/src/paneview/options.ts @@ -25,5 +25,5 @@ export interface PaneviewComponentOptions { }; disableDnd?: boolean; showDndOverlay?: (event: PaneviewDndOverlayEvent) => boolean; - parentElement: HTMLElement; + className?: string; } diff --git a/packages/dockview-core/src/paneview/paneviewComponent.ts b/packages/dockview-core/src/paneview/paneviewComponent.ts index fe81e4c1b..46c2c25a5 100644 --- a/packages/dockview-core/src/paneview/paneviewComponent.ts +++ b/packages/dockview-core/src/paneview/paneviewComponent.ts @@ -199,8 +199,12 @@ export class PaneviewComponent extends Resizable implements IPaneviewComponent { return this._options; } - constructor(options: PaneviewComponentOptions) { - super(options.parentElement, options.disableAutoResizing); + constructor(parentElement: HTMLElement, options: PaneviewComponentOptions) { + super(parentElement, options.disableAutoResizing); + + if (typeof options.className === 'string') { + this.element.classList.add(options.className); + } this.addDisposables( this._onDidLayoutChange, diff --git a/packages/dockview-core/src/splitview/options.ts b/packages/dockview-core/src/splitview/options.ts index a81f47200..01c32a040 100644 --- a/packages/dockview-core/src/splitview/options.ts +++ b/packages/dockview-core/src/splitview/options.ts @@ -24,5 +24,5 @@ export interface SplitviewComponentOptions extends SplitViewOptions { [componentName: string]: any; }; frameworkWrapper?: FrameworkFactory; - parentElement: HTMLElement; + className?: string; } diff --git a/packages/dockview-core/src/splitview/splitviewComponent.ts b/packages/dockview-core/src/splitview/splitviewComponent.ts index afd3fd020..00a6c8e00 100644 --- a/packages/dockview-core/src/splitview/splitviewComponent.ts +++ b/packages/dockview-core/src/splitview/splitviewComponent.ts @@ -157,8 +157,15 @@ export class SplitviewComponent : this.splitview.orthogonalSize; } - constructor(options: SplitviewComponentOptions) { - super(options.parentElement, options.disableAutoResizing); + constructor( + parentElement: HTMLElement, + options: SplitviewComponentOptions + ) { + super(parentElement, options.disableAutoResizing); + + if (typeof options.className === 'string') { + this.element.classList.add(options.className); + } this._options = options; diff --git a/packages/dockview-vue/src/dockview/dockview.vue b/packages/dockview-vue/src/dockview/dockview.vue index 0290389ae..6442ad5eb 100644 --- a/packages/dockview-vue/src/dockview/dockview.vue +++ b/packages/dockview-vue/src/dockview/dockview.vue @@ -1,10 +1,10 @@