diff --git a/packages/dockview-core/src/__tests__/__mocks__/mockDockviewPanelMode.ts b/packages/dockview-core/src/__tests__/__mocks__/mockDockviewPanelModel.ts similarity index 92% rename from packages/dockview-core/src/__tests__/__mocks__/mockDockviewPanelMode.ts rename to packages/dockview-core/src/__tests__/__mocks__/mockDockviewPanelModel.ts index a1e3397dd..79e21b88a 100644 --- a/packages/dockview-core/src/__tests__/__mocks__/mockDockviewPanelMode.ts +++ b/packages/dockview-core/src/__tests__/__mocks__/mockDockviewPanelModel.ts @@ -11,12 +11,13 @@ export class DockviewPanelModelMock implements IDockviewPanelModel { constructor( readonly contentComponent: string, readonly content: IContentRenderer, - readonly tabComponent?: string, - readonly tab?: ITabRenderer + readonly tabComponent: string, + readonly tab: ITabRenderer ) { // } + init(params: GroupPanelPartInitParameters): void { // } diff --git a/packages/dockview-core/src/__tests__/__mocks__/mockWindow.ts b/packages/dockview-core/src/__tests__/__mocks__/mockWindow.ts index cc5f5ed0d..39e5b3594 100644 --- a/packages/dockview-core/src/__tests__/__mocks__/mockWindow.ts +++ b/packages/dockview-core/src/__tests__/__mocks__/mockWindow.ts @@ -1,4 +1,4 @@ -import { fromPartial } from "@total-typescript/shoehorn"; +import { fromPartial } from '@total-typescript/shoehorn'; export function setupMockWindow() { const listeners: Record void)[]> = {}; @@ -16,6 +16,14 @@ export function setupMockWindow() { listener(); } }, + removeEventListener: (type: string, listener: () => void) => { + if (listeners[type]) { + const index = listeners[type].indexOf(listener); + if (index > -1) { + listeners[type].splice(index, 1); + } + } + }, dispatchEvent: (event: Event) => { const items = listeners[event.type]; if (!items) { @@ -24,7 +32,9 @@ export function setupMockWindow() { items.forEach((item) => item()); }, document: document, - close: jest.fn(), + close: () => { + listeners['beforeunload']?.forEach((f) => f()); + }, get innerWidth() { return width++; }, diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts index d544001fa..72faaebe6 100644 --- a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts @@ -8,7 +8,7 @@ import { PanelUpdateEvent } from '../../panel/types'; import { Orientation } from '../../splitview/splitview'; import { CompositeDisposable } from '../../lifecycle'; import { Emitter } from '../../events'; -import { IDockviewPanel } from '../../dockview/dockviewPanel'; +import { DockviewPanel, IDockviewPanel } from '../../dockview/dockviewPanel'; import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel'; import { fireEvent, queryByTestId } from '@testing-library/dom'; import { getPanelData } from '../../dnd/dataTransfer'; @@ -116,8 +116,6 @@ describe('dockviewComponent', () => { } }, }); - - window.open = jest.fn(); }); test('update className', () => { @@ -4886,6 +4884,150 @@ describe('dockviewComponent', () => { ]); }); + test('popout / floating layouts', async () => { + jest.useRealTimers(); + const container = document.createElement('div'); + + window.open = () => setupMockWindow(); + + const dockview = new DockviewComponent(container, { + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } + }, + }); + + dockview.layout(1000, 500); + + let panel1 = dockview.addPanel({ + id: 'panel_1', + component: 'default', + }); + + let panel2 = dockview.addPanel({ + id: 'panel_2', + component: 'default', + }); + + let panel3 = dockview.addPanel({ + id: 'panel_3', + component: 'default', + }); + + let panel4 = dockview.addPanel({ + id: 'panel_4', + component: 'default', + }); + + expect(panel1.api.location.type).toBe('grid'); + expect(panel2.api.location.type).toBe('grid'); + expect(panel3.api.location.type).toBe('grid'); + expect(panel4.api.location.type).toBe('grid'); + + dockview.addFloatingGroup(panel2); + dockview.addFloatingGroup(panel3); + + expect(panel1.api.location.type).toBe('grid'); + expect(panel2.api.location.type).toBe('floating'); + expect(panel3.api.location.type).toBe('floating'); + expect(panel4.api.location.type).toBe('grid'); + + await dockview.addPopoutGroup(panel2); + await dockview.addPopoutGroup(panel4); + + expect(panel1.api.location.type).toBe('grid'); + expect(panel2.api.location.type).toBe('popout'); + expect(panel3.api.location.type).toBe('floating'); + expect(panel4.api.location.type).toBe('popout'); + + const state = dockview.toJSON(); + dockview.fromJSON(state); + + /** + * exhaust task queue since popout group completion is async but not awaited in `fromJSON(...)` + */ + await new Promise((resolve) => setTimeout(resolve, 0)); + + expect(dockview.panels.length).toBe(4); + + panel1 = dockview.api.getPanel('panel_1') as DockviewPanel; + panel2 = dockview.api.getPanel('panel_2') as DockviewPanel; + panel3 = dockview.api.getPanel('panel_3') as DockviewPanel; + panel4 = dockview.api.getPanel('panel_4') as DockviewPanel; + + expect(panel1.api.location.type).toBe('grid'); + expect(panel2.api.location.type).toBe('popout'); + expect(panel3.api.location.type).toBe('floating'); + expect(panel4.api.location.type).toBe('popout'); + + dockview.clear(); + expect(dockview.groups.length).toBe(0); + expect(dockview.panels.length).toBe(0); + }); + + test('close popout window object', async () => { + const container = document.createElement('div'); + + const mockWindow = setupMockWindow(); + window.open = () => mockWindow; + + const dockview = new DockviewComponent(container, { + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } + }, + }); + + dockview.layout(1000, 500); + + let panel1 = dockview.addPanel({ + id: 'panel_1', + component: 'default', + }); + + let panel2 = dockview.addPanel({ + id: 'panel_2', + component: 'default', + position: { referencePanel: panel1, direction: 'within' }, + }); + + let panel3 = dockview.addPanel({ + id: 'panel_3', + component: 'default', + }); + + dockview.addFloatingGroup(panel2); + await dockview.addPopoutGroup(panel2); + + expect(panel1.group.api.location.type).toBe('grid'); + expect(panel2.group.api.location.type).toBe('popout'); + expect(panel3.group.api.location.type).toBe('grid'); + + mockWindow.close(); + + expect(panel1.group.api.location.type).toBe('grid'); + expect(panel2.group.api.location.type).toBe('grid'); + expect(panel3.group.api.location.type).toBe('grid'); + + dockview.clear(); + expect(dockview.groups.length).toBe(0); + expect(dockview.panels.length).toBe(0); + }); + test('remove all panels from popout group', async () => { const container = document.createElement('div'); @@ -5378,6 +5520,101 @@ describe('dockviewComponent', () => { }); describe('addPanel', () => { + test('that can add panel to index with referencePanel', () => { + const container = document.createElement('div'); + + const dockview = new DockviewComponent(container, { + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } + }, + }); + const api = new DockviewApi(dockview); + + dockview.layout(1000, 1000); + + const panel1 = api.addPanel({ + id: 'panel_1', + component: 'default', + }); + + const panel2 = api.addPanel({ + id: 'panel_2', + component: 'default', + position: { + referencePanel: panel1, + }, + }); + + const panel3 = api.addPanel({ + id: 'panel_3', + component: 'default', + position: { + referencePanel: panel1, + index: 1, + }, + }); + + expect(panel1.api.group.panels).toEqual([panel1, panel3, panel2]); + }); + + test('that can add panel to index with referenceGroup', () => { + const container = document.createElement('div'); + + const dockview = new DockviewComponent(container, { + createComponent(options) { + switch (options.name) { + case 'default': + return new PanelContentPartTest( + options.id, + options.name + ); + default: + throw new Error(`unsupported`); + } + }, + }); + const api = new DockviewApi(dockview); + + dockview.layout(1000, 1000); + + const panel1 = api.addPanel({ + id: 'panel_1', + component: 'default', + }); + + const panel2 = api.addPanel({ + id: 'panel_2', + component: 'default', + position: { + referencePanel: panel1, + index: 1, + }, + }); + + const panel3 = api.addPanel({ + id: 'panel_3', + component: 'default', + position: { + referenceGroup: panel1.api.group, + index: 1, + }, + }); + + expect(panel1.api.group.panels).toEqual([panel1, panel3, panel2]); + + panel1.api.moveTo({ index: 1 }); + + expect(panel1.api.group.panels).toEqual([panel3, panel1, panel2]); + }); + test('that can add panel', () => { const container = document.createElement('div'); diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewGroupPanel.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewGroupPanel.spec.ts new file mode 100644 index 000000000..bbebcfb89 --- /dev/null +++ b/packages/dockview-core/src/__tests__/dockview/dockviewGroupPanel.spec.ts @@ -0,0 +1,141 @@ +import { DockviewComponent } from '../../dockview/dockviewComponent'; +import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel'; +import { fromPartial } from '@total-typescript/shoehorn'; +import { GroupOptions } from '../../dockview/dockviewGroupPanelModel'; +import { DockviewPanel } from '../../dockview/dockviewPanel'; +import { DockviewPanelModelMock } from '../__mocks__/mockDockviewPanelModel'; +import { IContentRenderer, ITabRenderer } from '../../dockview/types'; +import { OverlayRenderContainer } from '../../overlay/overlayRenderContainer'; + +describe('dockviewGroupPanel', () => { + test('default minimum/maximium width/height', () => { + const accessor = fromPartial({ + onDidActivePanelChange: jest.fn(), + onDidAddPanel: jest.fn(), + onDidRemovePanel: jest.fn(), + options: {}, + }); + const options = fromPartial({}); + const cut = new DockviewGroupPanel(accessor, 'test_id', options); + + expect(cut.minimumWidth).toBe(100); + expect(cut.minimumHeight).toBe(100); + expect(cut.maximumHeight).toBe(Number.MAX_SAFE_INTEGER); + expect(cut.maximumWidth).toBe(Number.MAX_SAFE_INTEGER); + }); + + test('group constraints', () => { + const accessor = fromPartial({ + onDidActivePanelChange: jest.fn(), + onDidAddPanel: jest.fn(), + onDidRemovePanel: jest.fn(), + doSetGroupActive: jest.fn(), + overlayRenderContainer: fromPartial({ + attach: jest.fn(), + detatch: jest.fn(), + }), + options: {}, + }); + const options = fromPartial({}); + const cut = new DockviewGroupPanel(accessor, 'test_id', options); + + cut.api.setConstraints({ + minimumHeight: 10, + maximumHeight: 100, + minimumWidth: 20, + maximumWidth: 200, + }); + + // initial constraints + + expect(cut.minimumWidth).toBe(20); + expect(cut.minimumHeight).toBe(10); + expect(cut.maximumHeight).toBe(100); + expect(cut.maximumWidth).toBe(200); + + const panelModel = new DockviewPanelModelMock( + 'content_component', + fromPartial({ + element: document.createElement('div'), + }), + 'tab_component', + fromPartial({ + element: document.createElement('div'), + }) + ); + + const panel = new DockviewPanel( + 'panel_id', + 'component_id', + undefined, + accessor, + accessor.api, + cut, + panelModel, + { + renderer: 'onlyWhenVisible', + minimumWidth: 21, + minimumHeight: 11, + maximumHeight: 101, + maximumWidth: 201, + } + ); + + cut.model.openPanel(panel); + + // active panel constraints + + expect(cut.minimumWidth).toBe(21); + expect(cut.minimumHeight).toBe(11); + expect(cut.maximumHeight).toBe(101); + expect(cut.maximumWidth).toBe(201); + + const panel2 = new DockviewPanel( + 'panel_id', + 'component_id', + undefined, + accessor, + accessor.api, + cut, + panelModel, + { + renderer: 'onlyWhenVisible', + minimumWidth: 22, + minimumHeight: 12, + maximumHeight: 102, + maximumWidth: 202, + } + ); + + cut.model.openPanel(panel2); + + // active panel constraints + + expect(cut.minimumWidth).toBe(22); + expect(cut.minimumHeight).toBe(12); + expect(cut.maximumHeight).toBe(102); + expect(cut.maximumWidth).toBe(202); + + const panel3 = new DockviewPanel( + 'panel_id', + 'component_id', + undefined, + accessor, + accessor.api, + cut, + panelModel, + { + renderer: 'onlyWhenVisible', + } + ); + + cut.model.openPanel(panel3); + + // active panel without specified constraints so falls back to group constraints + + expect(cut.minimumWidth).toBe(20); + expect(cut.minimumHeight).toBe(10); + expect(cut.maximumHeight).toBe(100); + expect(cut.maximumWidth).toBe(200); + }); +}); diff --git a/packages/dockview-core/src/api/dockviewGroupPanelApi.ts b/packages/dockview-core/src/api/dockviewGroupPanelApi.ts index b13bd8fd9..12424debb 100644 --- a/packages/dockview-core/src/api/dockviewGroupPanelApi.ts +++ b/packages/dockview-core/src/api/dockviewGroupPanelApi.ts @@ -9,6 +9,15 @@ import { Emitter, Event } from '../events'; import { MutableDisposable } from '../lifecycle'; import { GridviewPanelApi, GridviewPanelApiImpl } from './gridviewPanelApi'; +export interface DockviewGroupMoveParams { + group?: DockviewGroupPanel; + position?: Position; + /** + * The index to place the panel within a group, only applicable if the placement is within an existing group + */ + index?: number; +} + export interface DockviewGroupPanelApi extends GridviewPanelApi { readonly onDidLocationChange: Event; readonly onDidActivePanelChange: Event; @@ -17,7 +26,7 @@ export interface DockviewGroupPanelApi extends GridviewPanelApi { * If you require the Window object */ getWindow(): Window; - moveTo(options: { group?: DockviewGroupPanel; position?: Position }): void; + moveTo(options: DockviewGroupMoveParams): void; maximize(): void; isMaximized(): boolean; exitMaximized(): void; @@ -28,7 +37,8 @@ export interface DockviewGroupPanelFloatingChangeEvent { readonly location: DockviewGroupLocation; } -const NOT_INITIALIZED_MESSAGE = 'dockview: DockviewGroupPanelApiImpl not initialized'; +const NOT_INITIALIZED_MESSAGE = + 'dockview: DockviewGroupPanelApiImpl not initialized'; export class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl { private readonly _mutableDisposable = new MutableDisposable(); @@ -74,7 +84,7 @@ export class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl { : window; } - moveTo(options: { group?: DockviewGroupPanel; position?: Position }): void { + moveTo(options: DockviewGroupMoveParams): void { if (!this._group) { throw new Error(NOT_INITIALIZED_MESSAGE); } @@ -93,6 +103,7 @@ export class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl { position: options.group ? options.position ?? 'center' : 'center', + index: options.index, }, }); } diff --git a/packages/dockview-core/src/api/dockviewPanelApi.ts b/packages/dockview-core/src/api/dockviewPanelApi.ts index 20646b16d..4b33f5eae 100644 --- a/packages/dockview-core/src/api/dockviewPanelApi.ts +++ b/packages/dockview-core/src/api/dockviewPanelApi.ts @@ -4,9 +4,11 @@ import { DockviewGroupPanel } from '../dockview/dockviewGroupPanel'; import { CompositeDisposable, MutableDisposable } from '../lifecycle'; import { DockviewPanel } from '../dockview/dockviewPanel'; import { DockviewComponent } from '../dockview/dockviewComponent'; -import { Position } from '../dnd/droptarget'; import { DockviewPanelRenderer } from '../overlay/overlayRenderContainer'; -import { DockviewGroupPanelFloatingChangeEvent } from './dockviewGroupPanelApi'; +import { + DockviewGroupMoveParams, + DockviewGroupPanelFloatingChangeEvent, +} from './dockviewGroupPanelApi'; import { DockviewGroupLocation } from '../dockview/dockviewGroupPanelModel'; export interface TitleEvent { @@ -25,6 +27,8 @@ export interface GroupChangedEvent { // empty } +export type DockviewPanelMoveParams = DockviewGroupMoveParams; + export interface DockviewPanelApi extends Omit< GridviewPanelApi, @@ -50,11 +54,7 @@ export interface DockviewPanelApi close(): void; setTitle(title: string): void; setRenderer(renderer: DockviewPanelRenderer): void; - moveTo(options: { - group: DockviewGroupPanel; - position?: Position; - index?: number; - }): void; + moveTo(options: DockviewPanelMoveParams): void; maximize(): void; isMaximized(): boolean; exitMaximized(): void; @@ -160,16 +160,14 @@ export class DockviewPanelApiImpl return this.group.api.getWindow(); } - moveTo(options: { - group: DockviewGroupPanel; - position?: Position; - index?: number; - }): void { + moveTo(options: DockviewPanelMoveParams): void { this.accessor.moveGroupOrPanel({ from: { groupId: this._group.id, panelId: this.panel.id }, to: { - group: options.group, - position: options.position ?? 'center', + group: options.group ?? this._group, + position: options.group + ? options.position ?? 'center' + : 'center', index: options.index, }, }); diff --git a/packages/dockview-core/src/dockview/components/panel/content.ts b/packages/dockview-core/src/dockview/components/panel/content.ts index 533b5de88..4f66b03d3 100644 --- a/packages/dockview-core/src/dockview/components/panel/content.ts +++ b/packages/dockview-core/src/dockview/components/panel/content.ts @@ -154,6 +154,10 @@ export class ContentContainer referenceContainer: this, }); break; + default: + throw new Error( + `dockview: invalid renderer type '${panel.api.renderer}'` + ); } if (doRender) { diff --git a/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts b/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts index 9972bab90..c30d1175e 100644 --- a/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts +++ b/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts @@ -347,9 +347,6 @@ export class TabsContainer return; } const tab = new Tab(panel, this.accessor, this.group); - if (!panel.view?.tab) { - throw new Error('invalid header component'); - } tab.setContent(panel.view.tab); const disposable = new CompositeDisposable( diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts index a7b71827d..27e95fc52 100644 --- a/packages/dockview-core/src/dockview/dockviewComponent.ts +++ b/packages/dockview-core/src/dockview/dockviewComponent.ts @@ -541,7 +541,6 @@ export class DockviewComponent addPopoutGroup( itemToPopout: DockviewPanel | DockviewGroupPanel, options?: { - skipRemoveGroup?: boolean; position?: Box; popoutUrl?: string; onDidOpen?: (event: { id: string; window: Window }) => void; @@ -627,41 +626,51 @@ export class DockviewComponent const referenceLocation = itemToPopout.api.location.type; - const group = - options?.overridePopoutGroup ?? - this.createGroup({ id: groupId }); + /** + * The group that is being added doesn't already exist within the DOM, the most likely occurance + * of this case is when being called from the `fromJSON(...)` method + */ + const isGroupAddedToDom = + referenceGroup.element.parentElement !== null; + + const group = !isGroupAddedToDom + ? referenceGroup + : options?.overridePopoutGroup ?? + this.createGroup({ id: groupId }); group.model.renderContainer = overlayRenderContainer; group.layout( _window.window!.innerWidth, _window.window!.innerHeight ); - if (!options?.overridePopoutGroup) { + if (!this._groups.has(group.api.id)) { this._onDidAddGroup.fire(group); } - if (itemToPopout instanceof DockviewPanel) { - this.movingLock(() => { - const panel = - referenceGroup.model.removePanel(itemToPopout); - group.model.openPanel(panel); - }); - } else { - this.movingLock(() => - moveGroupWithoutDestroying({ - from: referenceGroup, - to: group, - }) - ); + if (!options?.overridePopoutGroup && isGroupAddedToDom) { + if (itemToPopout instanceof DockviewPanel) { + this.movingLock(() => { + const panel = + referenceGroup.model.removePanel(itemToPopout); + group.model.openPanel(panel); + }); + } else { + this.movingLock(() => + moveGroupWithoutDestroying({ + from: referenceGroup, + to: group, + }) + ); - switch (referenceLocation) { - case 'grid': - referenceGroup.api.setVisible(false); - break; - case 'floating': - case 'popout': - this.removeGroup(referenceGroup); - break; + switch (referenceLocation) { + case 'grid': + referenceGroup.api.setVisible(false); + break; + case 'floating': + case 'popout': + this.removeGroup(referenceGroup); + break; + } } } @@ -676,7 +685,10 @@ export class DockviewComponent getWindow: () => _window.window!, }; - if (itemToPopout.api.location.type === 'grid') { + if ( + isGroupAddedToDom && + itemToPopout.api.location.type === 'grid' + ) { itemToPopout.api.setVisible(false); } @@ -698,8 +710,12 @@ export class DockviewComponent const value = { window: _window, popoutGroup: group, - referenceGroup: this.getPanel(referenceGroup.id) - ? referenceGroup.id + referenceGroup: !isGroupAddedToDom + ? undefined + : referenceGroup + ? this.getPanel(referenceGroup.id) + ? referenceGroup.id + : undefined : undefined, disposable: { dispose: () => { @@ -727,7 +743,10 @@ export class DockviewComponent ), overlayRenderContainer, Disposable.from(() => { - if (this.getPanel(referenceGroup.id)) { + if ( + isGroupAddedToDom && + this.getPanel(referenceGroup.id) + ) { this.movingLock(() => moveGroupWithoutDestroying({ from: group, @@ -745,14 +764,21 @@ export class DockviewComponent }); } } else if (this.getPanel(group.id)) { - const removedGroup = this.doRemoveGroup(group, { + this.doRemoveGroup(group, { skipDispose: true, skipActive: true, + skipPopoutReturn: true, }); + + const removedGroup = group; + removedGroup.model.renderContainer = this.overlayRenderContainer; removedGroup.model.location = { type: 'grid' }; returnedGroup = removedGroup; + + this.doAddGroup(removedGroup, [0]); + this.doSetGroupAndPanelActive(removedGroup); } }) ); @@ -1279,7 +1305,6 @@ export class DockviewComponent ? this.getPanel(gridReferenceGroup) : undefined) ?? group, { - skipRemoveGroup: true, position: position ?? undefined, overridePopoutGroup: gridReferenceGroup ? group @@ -1299,6 +1324,10 @@ export class DockviewComponent } } } catch (err) { + console.error( + 'dockview: failed to deserialize layout. Reverting changes', + err + ); /** * Takes all the successfully created groups and remove all of their panels. */ @@ -1387,12 +1416,15 @@ export class DockviewComponent height: options.initialHeight, }; + let index: number | undefined; + if (options.position) { if (isPanelOptionsWithPanel(options.position)) { const referencePanel = typeof options.position.referencePanel === 'string' ? this.getGroupPanel(options.position.referencePanel) : options.position.referencePanel; + index = options.position.index; if (!referencePanel) { throw new Error( @@ -1407,6 +1439,7 @@ export class DockviewComponent ? this._groups.get(options.position.referenceGroup) ?.value : options.position.referenceGroup; + index = options.position.index; if (!referenceGroup) { throw new Error( @@ -1422,6 +1455,7 @@ export class DockviewComponent group.model.openPanel(panel, { skipSetActive: options.inactive, skipSetGroupActive: options.inactive, + index, }); if (!options.inactive) { @@ -1468,6 +1502,7 @@ export class DockviewComponent group.model.openPanel(panel, { skipSetActive: options.inactive, skipSetGroupActive: options.inactive, + index, }); } else if ( referenceGroup.api.location.type === 'floating' || @@ -1477,6 +1512,7 @@ export class DockviewComponent referenceGroup.model.openPanel(panel, { skipSetActive: options.inactive, skipSetGroupActive: options.inactive, + index, }); referenceGroup.api.setSize({ @@ -1505,6 +1541,7 @@ export class DockviewComponent group.model.openPanel(panel, { skipSetActive: options.inactive, skipSetGroupActive: options.inactive, + index, }); if (!options.inactive) { @@ -1532,6 +1569,7 @@ export class DockviewComponent group.model.openPanel(panel, { skipSetActive: options.inactive, skipSetGroupActive: options.inactive, + index, }); } else { const group = this.createGroupAtLocation( @@ -1544,6 +1582,7 @@ export class DockviewComponent group.model.openPanel(panel, { skipSetActive: options.inactive, skipSetGroupActive: options.inactive, + index, }); if (!options.inactive) { diff --git a/packages/dockview-core/src/dockview/dockviewGroupPanel.ts b/packages/dockview-core/src/dockview/dockviewGroupPanel.ts index 4efee9cd6..a3e714829 100644 --- a/packages/dockview-core/src/dockview/dockviewGroupPanel.ts +++ b/packages/dockview-core/src/dockview/dockviewGroupPanel.ts @@ -34,32 +34,36 @@ export class DockviewGroupPanel { private readonly _model: DockviewGroupPanelModel; - get minimumWidth(): number { + override get minimumWidth(): number { const activePanelMinimumWidth = this.activePanel?.minimumWidth; - return typeof activePanelMinimumWidth === 'number' - ? activePanelMinimumWidth - : MINIMUM_DOCKVIEW_GROUP_PANEL_WIDTH; + if (typeof activePanelMinimumWidth === 'number') { + return activePanelMinimumWidth; + } + return super.__minimumWidth(); } - get minimumHeight(): number { + override get minimumHeight(): number { const activePanelMinimumHeight = this.activePanel?.minimumHeight; - return typeof activePanelMinimumHeight === 'number' - ? activePanelMinimumHeight - : MINIMUM_DOCKVIEW_GROUP_PANEL_HEIGHT; + if (typeof activePanelMinimumHeight === 'number') { + return activePanelMinimumHeight; + } + return super.__minimumHeight(); } - get maximumWidth(): number { + override get maximumWidth(): number { const activePanelMaximumWidth = this.activePanel?.maximumWidth; - return typeof activePanelMaximumWidth === 'number' - ? activePanelMaximumWidth - : Number.MAX_SAFE_INTEGER; + if (typeof activePanelMaximumWidth === 'number') { + return activePanelMaximumWidth; + } + return super.__maximumWidth(); } - get maximumHeight(): number { + override get maximumHeight(): number { const activePanelMaximumHeight = this.activePanel?.maximumHeight; - return typeof activePanelMaximumHeight === 'number' - ? activePanelMaximumHeight - : Number.MAX_SAFE_INTEGER; + if (typeof activePanelMaximumHeight === 'number') { + return activePanelMaximumHeight; + } + return super.__maximumHeight(); } get panels(): IDockviewPanel[] { diff --git a/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts b/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts index fb27c42fd..a377ed9ec 100644 --- a/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts +++ b/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts @@ -264,6 +264,7 @@ export class DockviewGroupPanelModel private _location: DockviewGroupLocation = { type: 'grid' }; private mostRecentlyUsed: IDockviewPanel[] = []; + private _overwriteRenderContainer: OverlayRenderContainer | null = null; private readonly _onDidChange = new Emitter(); readonly onDidChange: Event = @@ -326,7 +327,7 @@ export class DockviewGroupPanelModel private readonly _api: DockviewApi; get element(): HTMLElement { - throw new Error('not supported'); + throw new Error('dockview: not supported'); } get activePanel(): IDockviewPanel | undefined { @@ -513,8 +514,6 @@ export class DockviewGroupPanelModel this.contentContainer.element.focus(); } - private _overwriteRenderContainer: OverlayRenderContainer | null = null; - set renderContainer(value: OverlayRenderContainer | null) { this.panels.forEach((panel) => { this.renderContainer.detatch(panel); diff --git a/packages/dockview-core/src/dockview/dockviewPanelModel.ts b/packages/dockview-core/src/dockview/dockviewPanelModel.ts index fb5528c10..950b4d577 100644 --- a/packages/dockview-core/src/dockview/dockviewPanelModel.ts +++ b/packages/dockview-core/src/dockview/dockviewPanelModel.ts @@ -13,7 +13,7 @@ export interface IDockviewPanelModel extends IDisposable { readonly contentComponent: string; readonly tabComponent?: string; readonly content: IContentRenderer; - readonly tab?: ITabRenderer; + readonly tab: ITabRenderer; update(event: PanelUpdateEvent): void; layout(width: number, height: number): void; init(params: GroupPanelPartInitParameters): void; diff --git a/packages/dockview-core/src/dockview/options.ts b/packages/dockview-core/src/dockview/options.ts index 9f21344e1..c1a429a08 100644 --- a/packages/dockview-core/src/dockview/options.ts +++ b/packages/dockview-core/src/dockview/options.ts @@ -159,11 +159,19 @@ export interface PanelOptions

{ type RelativePanel = { direction?: Direction; referencePanel: string | IDockviewPanel; + /** + * The index to place the panel within a group, only applicable if the placement is within an existing group + */ + index?: number; }; type RelativeGroup = { direction?: Direction; referenceGroup: string | DockviewGroupPanel; + /** + * The index to place the panel within a group, only applicable if the placement is within an existing group + */ + index?: number; }; type AbsolutePosition = { diff --git a/packages/dockview-core/src/dockview/types.ts b/packages/dockview-core/src/dockview/types.ts index aa5cae998..3b2c8f112 100644 --- a/packages/dockview-core/src/dockview/types.ts +++ b/packages/dockview-core/src/dockview/types.ts @@ -2,7 +2,7 @@ import { DockviewPanelApi } from '../api/dockviewPanelApi'; import { PanelInitParameters, IPanel } from '../panel/types'; import { DockviewApi } from '../api/component.api'; import { Optional } from '../types'; -import { DockviewGroupPanel, IDockviewGroupPanel } from './dockviewGroupPanel'; +import { IDockviewGroupPanel } from './dockviewGroupPanel'; import { DockviewPanelRenderer } from '../overlay/overlayRenderContainer'; export interface HeaderPartInitParameters { diff --git a/packages/dockview-core/src/gridview/gridviewPanel.ts b/packages/dockview-core/src/gridview/gridviewPanel.ts index 956d9baf8..c821e34a4 100644 --- a/packages/dockview-core/src/gridview/gridviewPanel.ts +++ b/packages/dockview-core/src/gridview/gridviewPanel.ts @@ -74,6 +74,38 @@ export abstract class GridviewPanel< } get minimumWidth(): number { + /** + * defer to protected function to allow subclasses to override easily. + * see https://github.com/microsoft/TypeScript/issues/338 + */ + return this.__minimumWidth(); + } + + get minimumHeight(): number { + /** + * defer to protected function to allow subclasses to override easily. + * see https://github.com/microsoft/TypeScript/issues/338 + */ + return this.__minimumHeight(); + } + + get maximumHeight(): number { + /** + * defer to protected function to allow subclasses to override easily. + * see https://github.com/microsoft/TypeScript/issues/338 + */ + return this.__maximumHeight(); + } + + get maximumWidth(): number { + /** + * defer to protected function to allow subclasses to override easily. + * see https://github.com/microsoft/TypeScript/issues/338 + */ + return this.__maximumWidth(); + } + + protected __minimumWidth(): number { const width = typeof this._minimumWidth === 'function' ? this._minimumWidth() @@ -87,7 +119,21 @@ export abstract class GridviewPanel< return width; } - get minimumHeight(): number { + protected __maximumWidth(): number { + const width = + typeof this._maximumWidth === 'function' + ? this._maximumWidth() + : this._maximumWidth; + + if (width !== this._evaluatedMaximumWidth) { + this._evaluatedMaximumWidth = width; + this.updateConstraints(); + } + + return width; + } + + protected __minimumHeight(): number { const height = typeof this._minimumHeight === 'function' ? this._minimumHeight() @@ -101,7 +147,7 @@ export abstract class GridviewPanel< return height; } - get maximumHeight(): number { + protected __maximumHeight(): number { const height = typeof this._maximumHeight === 'function' ? this._maximumHeight() @@ -115,20 +161,6 @@ export abstract class GridviewPanel< return height; } - get maximumWidth(): number { - const width = - typeof this._maximumWidth === 'function' - ? this._maximumWidth() - : this._maximumWidth; - - if (width !== this._evaluatedMaximumWidth) { - this._evaluatedMaximumWidth = width; - this.updateConstraints(); - } - - return width; - } - get isActive(): boolean { return this.api.isActive; } diff --git a/packages/dockview-core/src/index.ts b/packages/dockview-core/src/index.ts index 02171ae7d..59d4a19e6 100644 --- a/packages/dockview-core/src/index.ts +++ b/packages/dockview-core/src/index.ts @@ -100,6 +100,7 @@ export { TitleEvent, RendererChangedEvent, DockviewPanelApi, + DockviewPanelMoveParams, } from './api/dockviewPanelApi'; export { PanelSizeEvent, @@ -110,6 +111,7 @@ export { ExpansionEvent, PaneviewPanelApi } from './api/paneviewPanelApi'; export { DockviewGroupPanelApi, DockviewGroupPanelFloatingChangeEvent, + DockviewGroupMoveParams, } from './api/dockviewGroupPanelApi'; export { CommonApi, diff --git a/packages/dockview-core/src/popoutWindow.ts b/packages/dockview-core/src/popoutWindow.ts index 9e4926f09..fd52afbec 100644 --- a/packages/dockview-core/src/popoutWindow.ts +++ b/packages/dockview-core/src/popoutWindow.ts @@ -59,7 +59,6 @@ export class PopoutWindow extends CompositeDisposable { }); this._window.disposable.dispose(); - this._window.value.close(); this._window = null; this._onDidClose.fire(); diff --git a/packages/dockview-core/src/splitview/splitview.scss b/packages/dockview-core/src/splitview/splitview.scss index b44cc84f8..adf09b368 100644 --- a/packages/dockview-core/src/splitview/splitview.scss +++ b/packages/dockview-core/src/splitview/splitview.scss @@ -134,7 +134,6 @@ position: relative; height: 100%; width: 100%; - background-color: var(--dv-background-color); .dv-view { height: 100%; diff --git a/packages/dockview-core/src/splitview/splitview.ts b/packages/dockview-core/src/splitview/splitview.ts index 2d774c6ad..c4ceeb3d0 100644 --- a/packages/dockview-core/src/splitview/splitview.ts +++ b/packages/dockview-core/src/splitview/splitview.ts @@ -101,7 +101,7 @@ export class Splitview { private readonly viewContainer: HTMLElement; private readonly sashContainer: HTMLElement; private readonly viewItems: ViewItem[] = []; - private sashes: ISashItem[] = []; + private readonly sashes: ISashItem[] = []; private _orientation: Orientation; private _size = 0; private _orthogonalSize = 0; diff --git a/packages/dockview-core/src/theme.scss b/packages/dockview-core/src/theme.scss index b0b6e8e61..85aa66280 100644 --- a/packages/dockview-core/src/theme.scss +++ b/packages/dockview-core/src/theme.scss @@ -1,5 +1,4 @@ @mixin dockview-theme-core-mixin { - --dv-background-color: black; --dv-paneview-active-outline-color: dodgerblue; --dv-tabs-and-actions-container-font-size: 13px; --dv-tabs-and-actions-container-height: 35px; @@ -308,25 +307,9 @@ &:hover { &::after { - content: ''; - height: 40px; - width: 4px; - border-radius: 2px; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); background-color: var( - --dv-separator-handle-background-color + --dv-separator-handle-hover-background-color ); - position: absolute; - } - - &:hover { - &::after { - background-color: var( - --dv-separator-handle-hover-background-color - ); - } } } } @@ -355,8 +338,6 @@ --dv-separator-border: transparent; --dv-paneview-header-border-color: rgb(51, 51, 51); - --dv-background-color: #ebeced; - ///// --dv-separator-handle-background-color: #cfd1d3; --dv-separator-handle-hover-background-color: #babbbb; diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx b/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx index 14e0b9aec..8feed27c9 100644 --- a/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx +++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx @@ -103,7 +103,8 @@ export const GridActions = (props: { if (state) { try { props.api?.fromJSON(JSON.parse(state)); - } catch { + } catch (err) { + console.error('failed to load state', err); localStorage.removeItem('dv-demo-state'); } } @@ -121,8 +122,12 @@ export const GridActions = (props: { const onReset = () => { if (props.api) { - props.api.clear(); - defaultConfig(props.api); + try { + props.api.clear(); + defaultConfig(props.api); + } catch (err) { + localStorage.removeItem('dv-demo-state'); + } } }; diff --git a/packages/docs/src/generated/api.output.json b/packages/docs/src/generated/api.output.json index 7ddc5d38b..4f2f51762 100644 --- a/packages/docs/src/generated/api.output.json +++ b/packages/docs/src/generated/api.output.json @@ -3052,7 +3052,7 @@ }, { "name": "addPopoutGroup", - "code": "(item: IDockviewPanel | DockviewGroupPanel, options?: { onDidOpen?: (event: { id: string, window: Window }): void, onWillClose?: (event: { id: string, window: Window }): void, popoutUrl?: string, position?: Box }): Promise", + "code": "(item: IDockviewPanel | DockviewGroupPanel, options?: { onDidOpen?: (event: { id: string, window: Window }): void, onWillClose?: (event: { id: string, window: Window }): void, popoutUrl?: string, position?: Box }): Promise", "kind": "method", "signature": [ { @@ -3267,11 +3267,11 @@ "typeArguments": [ { "type": "intrinsic", - "value": "void" + "value": "boolean" } ] }, - "code": "(item: IDockviewPanel | DockviewGroupPanel, options?: { onDidOpen?: (event: { id: string, window: Window }): void, onWillClose?: (event: { id: string, window: Window }): void, popoutUrl?: string, position?: Box }): Promise", + "code": "(item: IDockviewPanel | DockviewGroupPanel, options?: { onDidOpen?: (event: { id: string, window: Window }): void, onWillClose?: (event: { id: string, window: Window }): void, popoutUrl?: string, position?: Box }): Promise", "kind": "callSignature" } ], @@ -5155,7 +5155,7 @@ }, { "name": "addPopoutGroup", - "code": "(itemToPopout: DockviewPanel | DockviewGroupPanel, options?: { onDidOpen?: (event: { id: string, window: Window }): void, onWillClose?: (event: { id: string, window: Window }): void, overridePopoutGroup?: DockviewGroupPanel, popoutUrl?: string, position?: Box, skipRemoveGroup?: boolean }): Promise", + "code": "(itemToPopout: DockviewPanel | DockviewGroupPanel, options?: { onDidOpen?: (event: { id: string, window: Window }): void, onWillClose?: (event: { id: string, window: Window }): void, overridePopoutGroup?: DockviewGroupPanel, popoutUrl?: string, position?: Box, skipRemoveGroup?: boolean }): Promise", "kind": "method", "signature": [ { @@ -5387,11 +5387,11 @@ "typeArguments": [ { "type": "intrinsic", - "value": "void" + "value": "boolean" } ] }, - "code": "(itemToPopout: DockviewPanel | DockviewGroupPanel, options?: { onDidOpen?: (event: { id: string, window: Window }): void, onWillClose?: (event: { id: string, window: Window }): void, overridePopoutGroup?: DockviewGroupPanel, popoutUrl?: string, position?: Box, skipRemoveGroup?: boolean }): Promise", + "code": "(itemToPopout: DockviewPanel | DockviewGroupPanel, options?: { onDidOpen?: (event: { id: string, window: Window }): void, onWillClose?: (event: { id: string, window: Window }): void, overridePopoutGroup?: DockviewGroupPanel, popoutUrl?: string, position?: Box, skipRemoveGroup?: boolean }): Promise", "kind": "callSignature" } ] @@ -14931,192 +14931,6 @@ "BasePanelView" ] }, - "LocalSelectionTransfer": { - "kind": "class", - "name": "LocalSelectionTransfer", - "children": [ - { - "name": "clearData", - "code": "(proto: LocalSelectionTransfer.T): void", - "kind": "method", - "signature": [ - { - "name": "clearData", - "typeParameters": [], - "parameters": [ - { - "name": "proto", - "code": "proto: LocalSelectionTransfer.T", - "type": { - "type": "reference", - "value": "T", - "source": "dockview-core", - "refersToTypeParameter": true - }, - "kind": "parameter" - } - ], - "returnType": { - "type": "intrinsic", - "value": "void" - }, - "code": "(proto: LocalSelectionTransfer.T): void", - "kind": "callSignature" - } - ] - }, - { - "name": "getData", - "code": "(proto: LocalSelectionTransfer.T): LocalSelectionTransfer.T[] | undefined", - "kind": "method", - "signature": [ - { - "name": "getData", - "typeParameters": [], - "parameters": [ - { - "name": "proto", - "code": "proto: LocalSelectionTransfer.T", - "type": { - "type": "reference", - "value": "T", - "source": "dockview-core", - "refersToTypeParameter": true - }, - "kind": "parameter" - } - ], - "returnType": { - "type": "or", - "values": [ - { - "type": "array", - "value": { - "type": "reference", - "value": "T", - "source": "dockview-core", - "refersToTypeParameter": true - } - }, - { - "type": "intrinsic", - "value": "undefined" - } - ] - }, - "code": "(proto: LocalSelectionTransfer.T): LocalSelectionTransfer.T[] | undefined", - "kind": "callSignature" - } - ] - }, - { - "name": "hasData", - "code": "(proto: LocalSelectionTransfer.T): boolean", - "kind": "method", - "signature": [ - { - "name": "hasData", - "typeParameters": [], - "parameters": [ - { - "name": "proto", - "code": "proto: LocalSelectionTransfer.T", - "type": { - "type": "reference", - "value": "T", - "source": "dockview-core", - "refersToTypeParameter": true - }, - "kind": "parameter" - } - ], - "returnType": { - "type": "intrinsic", - "value": "boolean" - }, - "code": "(proto: LocalSelectionTransfer.T): boolean", - "kind": "callSignature" - } - ] - }, - { - "name": "setData", - "code": "(data: LocalSelectionTransfer.T[], proto: LocalSelectionTransfer.T): void", - "kind": "method", - "signature": [ - { - "name": "setData", - "typeParameters": [], - "parameters": [ - { - "name": "data", - "code": "data: LocalSelectionTransfer.T[]", - "type": { - "type": "array", - "value": { - "type": "reference", - "value": "T", - "source": "dockview-core", - "refersToTypeParameter": true - } - }, - "kind": "parameter" - }, - { - "name": "proto", - "code": "proto: LocalSelectionTransfer.T", - "type": { - "type": "reference", - "value": "T", - "source": "dockview-core", - "refersToTypeParameter": true - }, - "kind": "parameter" - } - ], - "returnType": { - "type": "intrinsic", - "value": "void" - }, - "code": "(data: LocalSelectionTransfer.T[], proto: LocalSelectionTransfer.T): void", - "kind": "callSignature" - } - ] - }, - { - "name": "getInstance", - "code": "(): LocalSelectionTransfer", - "kind": "method", - "signature": [ - { - "name": "getInstance", - "typeParameters": [ - { - "name": "T" - } - ], - "parameters": [], - "returnType": { - "type": "reference", - "value": "LocalSelectionTransfer", - "source": "dockview-core", - "typeArguments": [ - { - "type": "reference", - "value": "T", - "source": "dockview-core", - "refersToTypeParameter": true - } - ] - }, - "code": "(): LocalSelectionTransfer", - "kind": "callSignature" - } - ] - } - ], - "extends": [] - }, "PaneFramework": { "kind": "class", "name": "PaneFramework", @@ -24320,6 +24134,31 @@ ], "extends": [] }, + "DockviewIDisposable": { + "kind": "interface", + "name": "DockviewIDisposable", + "children": [ + { + "name": "dispose", + "code": "(): void", + "kind": "method", + "signature": [ + { + "name": "dispose", + "typeParameters": [], + "parameters": [], + "returnType": { + "type": "intrinsic", + "value": "void" + }, + "code": "(): void", + "kind": "callSignature" + } + ] + } + ], + "extends": [] + }, "DockviewOptions": { "kind": "interface", "name": "DockviewOptions", @@ -25671,70 +25510,6 @@ ], "extends": [] }, - "FrameworkFactory": { - "kind": "interface", - "name": "FrameworkFactory", - "children": [ - { - "name": "createComponent", - "code": "(id: string, componentId: string, component: any): FrameworkFactory.T", - "kind": "property", - "type": { - "type": "reflection", - "value": { - "name": "__type", - "code": "(id: string, componentId: string, component: any): FrameworkFactory.T", - "kind": "typeLiteral", - "signatures": [ - { - "name": "__type", - "typeParameters": [], - "parameters": [ - { - "name": "id", - "code": "id: string", - "type": { - "type": "intrinsic", - "value": "string" - }, - "kind": "parameter" - }, - { - "name": "componentId", - "code": "componentId: string", - "type": { - "type": "intrinsic", - "value": "string" - }, - "kind": "parameter" - }, - { - "name": "component", - "code": "component: any", - "type": { - "type": "intrinsic", - "value": "any" - }, - "kind": "parameter" - } - ], - "returnType": { - "type": "reference", - "value": "T", - "source": "dockview-core", - "refersToTypeParameter": true - }, - "code": "(id: string, componentId: string, component: any): FrameworkFactory.T", - "kind": "callSignature" - } - ] - } - }, - "flags": {} - } - ], - "extends": [] - }, "GridBranchNode": { "kind": "interface", "name": "GridBranchNode", @@ -29257,7 +29032,7 @@ }, { "name": "addPopoutGroup", - "code": "(item: IDockviewPanel | DockviewGroupPanel, options?: { onDidOpen?: (event: { id: string, window: Window }): void, onWillClose?: (event: { id: string, window: Window }): void, popoutUrl?: string, position?: Box }): Promise", + "code": "(item: IDockviewPanel | DockviewGroupPanel, options?: { onDidOpen?: (event: { id: string, window: Window }): void, onWillClose?: (event: { id: string, window: Window }): void, popoutUrl?: string, position?: Box }): Promise", "kind": "method", "signature": [ { @@ -29464,11 +29239,11 @@ "typeArguments": [ { "type": "intrinsic", - "value": "void" + "value": "boolean" } ] }, - "code": "(item: IDockviewPanel | DockviewGroupPanel, options?: { onDidOpen?: (event: { id: string, window: Window }): void, onWillClose?: (event: { id: string, window: Window }): void, popoutUrl?: string, position?: Box }): Promise", + "code": "(item: IDockviewPanel | DockviewGroupPanel, options?: { onDidOpen?: (event: { id: string, window: Window }): void, onWillClose?: (event: { id: string, window: Window }): void, popoutUrl?: string, position?: Box }): Promise", "kind": "callSignature" } ] @@ -30065,31 +29840,6 @@ "IBaseGrid" ] }, - "IDockviewDisposable": { - "kind": "interface", - "name": "IDockviewDisposable", - "children": [ - { - "name": "dispose", - "code": "(): void", - "kind": "method", - "signature": [ - { - "name": "dispose", - "typeParameters": [], - "parameters": [], - "returnType": { - "type": "intrinsic", - "value": "void" - }, - "code": "(): void", - "kind": "callSignature" - } - ] - } - ], - "extends": [] - }, "IDockviewGroupPanel": { "kind": "interface", "name": "IDockviewGroupPanel", @@ -41546,27 +41296,6 @@ }, "kind": "typeAlias" }, - "ComponentConstructor": { - "name": "ComponentConstructor", - "code": "", - "typeParameters": [], - "type": { - "type": "reflection", - "value": { - "name": "__type", - "code": "", - "kind": "typeLiteral", - "signatures": [ - { - "name": "new ComponentConstructor", - "code": "", - "kind": "constructorSignature" - } - ] - } - }, - "kind": "typeAlias" - }, "Direction": { "name": "Direction", "code": "'within' | 'below' | 'above' | 'right' | 'left'", @@ -42111,119 +41840,6 @@ "code": "", "kind": "variable" }, - "createComponent": { - "name": "createComponent", - "code": "(id: string, componentName?: string, components: , frameworkComponents: , createFrameworkComponent?: FrameworkFactory, fallback?: (): T): T", - "signature": { - "name": "createComponent", - "typeParameters": [ - { - "name": "T" - } - ], - "parameters": [ - { - "name": "id", - "code": "id: string", - "type": { - "type": "intrinsic", - "value": "string" - }, - "kind": "parameter" - }, - { - "name": "componentName", - "code": "componentName?: string", - "type": { - "type": "intrinsic", - "value": "string" - }, - "kind": "parameter" - }, - { - "name": "components", - "code": "components: ", - "type": { - "type": "reflection", - "value": { - "name": "__type", - "code": "", - "kind": "typeLiteral" - } - }, - "kind": "parameter" - }, - { - "name": "frameworkComponents", - "code": "frameworkComponents: ", - "type": { - "type": "reflection", - "value": { - "name": "__type", - "code": "", - "kind": "typeLiteral" - } - }, - "kind": "parameter" - }, - { - "name": "createFrameworkComponent", - "code": "createFrameworkComponent?: FrameworkFactory", - "type": { - "type": "reference", - "value": "FrameworkFactory", - "source": "dockview-core", - "typeArguments": [ - { - "type": "reference", - "value": "T", - "source": "dockview-core", - "refersToTypeParameter": true - } - ] - }, - "kind": "parameter" - }, - { - "name": "fallback", - "code": "fallback?: (): T", - "type": { - "type": "reflection", - "value": { - "name": "__type", - "code": "(): T", - "kind": "typeLiteral", - "signatures": [ - { - "name": "__type", - "typeParameters": [], - "parameters": [], - "returnType": { - "type": "reference", - "value": "T", - "source": "dockview-core", - "refersToTypeParameter": true - }, - "code": "(): T", - "kind": "callSignature" - } - ] - } - }, - "kind": "parameter" - } - ], - "returnType": { - "type": "reference", - "value": "T", - "source": "dockview-core", - "refersToTypeParameter": true - }, - "code": "(id: string, componentName?: string, components: , frameworkComponents: , createFrameworkComponent?: FrameworkFactory, fallback?: (): T): T", - "kind": "callSignature" - }, - "kind": "function" - }, "createDockview": { "name": "createDockview", "code": "(element: HTMLElement, options: DockviewComponentOptions): DockviewApi", @@ -43233,90 +42849,6 @@ "isOptional": true } }, - { - "name": "showDndOverlay", - "code": "(event: DockviewDndOverlayEvent): boolean", - "kind": "property", - "type": { - "type": "reflection", - "value": { - "name": "__type", - "code": "(event: DockviewDndOverlayEvent): boolean", - "kind": "typeLiteral", - "signatures": [ - { - "name": "__type", - "comment": { - "summary": [], - "blockTags": [ - { - "tag": "@deprecated", - "content": [ - { - "kind": "text", - "text": "use " - }, - { - "kind": "code", - "text": "`api.onUnhandledDragOverEvent`" - }, - { - "kind": "text", - "text": " instead. This will be removed in the next release." - } - ] - } - ] - }, - "typeParameters": [], - "parameters": [ - { - "name": "event", - "code": "event: DockviewDndOverlayEvent", - "type": { - "type": "reference", - "value": "DockviewDndOverlayEvent", - "source": "dockview-core" - }, - "kind": "parameter" - } - ], - "returnType": { - "type": "intrinsic", - "value": "boolean" - }, - "code": "(event: DockviewDndOverlayEvent): boolean", - "kind": "callSignature" - } - ] - } - }, - "flags": { - "isOptional": true - }, - "comment": { - "summary": [], - "blockTags": [ - { - "tag": "@deprecated", - "content": [ - { - "kind": "text", - "text": "use " - }, - { - "kind": "code", - "text": "`api.onUnhandledDragOverEvent`" - }, - { - "kind": "text", - "text": " instead. This will be removed in the next release." - } - ] - } - ] - } - }, { "name": "tabComponents", "code": "Record>",