From bc8fa595578098f0fea06d636ecad620bd30caa0 Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Wed, 17 Apr 2024 20:26:50 +0100 Subject: [PATCH 1/2] chore: fix jest debugging experience --- tsconfig.test.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/tsconfig.test.json b/tsconfig.test.json index dac31cbbd..2f4702739 100644 --- a/tsconfig.test.json +++ b/tsconfig.test.json @@ -1,7 +1,8 @@ { "extends": "./tsconfig.base.json", "compilerOptions": { - "jsx": "react-jsx" + "jsx": "react-jsx", + "sourceMap": true }, "include": ["**/*.spec.ts", "./jest-setup.ts"] } From 4a05fd0aede027414d85bf462b0be61017d34534 Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Wed, 17 Apr 2024 20:27:39 +0100 Subject: [PATCH 2/2] feat: provide 'inactive' property to `addPanel` --- .../dockview/dockviewComponent.spec.ts | 143 ++++++++++++++++++ .../src/dockview/dockviewComponent.ts | 55 +++++-- .../dockview-core/src/dockview/options.ts | 30 +++- 3 files changed, 215 insertions(+), 13 deletions(-) diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts index b99eb28fe..73315fd59 100644 --- a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts @@ -4764,4 +4764,147 @@ describe('dockviewComponent', () => { expect(panel3.api.isVisible).toBeFalsy(); expect(panel4.api.isVisible).toBeTruthy(); }); + + describe('addPanel', () => { + test('that can add panel', () => { + const container = document.createElement('div'); + + const dockview = new DockviewComponent({ + parentElement: container, + components: { + default: PanelContentPartTest, + }, + }); + const api = new DockviewApi(dockview); + + dockview.layout(1000, 1000); + + const panel1 = api.addPanel({ + id: 'panel_1', + component: 'default', + }); + expect(api.activePanel).toBe(panel1); + + api.addPanel({ + id: 'panel_2', + component: 'default', + inactive: true, + }); + expect(api.activePanel).toBe(panel1); + }); + + test('that can add panel with absolute direction', () => { + const container = document.createElement('div'); + + const dockview = new DockviewComponent({ + parentElement: container, + components: { + default: PanelContentPartTest, + }, + }); + const api = new DockviewApi(dockview); + + dockview.layout(1000, 1000); + + const panel1 = api.addPanel({ + id: 'panel_1', + component: 'default', + position: { direction: 'right' }, + }); + expect(api.activePanel).toBe(panel1); + + api.addPanel({ + id: 'panel_2', + component: 'default', + position: { direction: 'right' }, + inactive: true, + }); + expect(api.activePanel).toBe(panel1); + }); + + test('that can add floating panel', () => { + const container = document.createElement('div'); + + const dockview = new DockviewComponent({ + parentElement: container, + components: { + default: PanelContentPartTest, + }, + }); + const api = new DockviewApi(dockview); + + dockview.layout(1000, 1000); + + const panel1 = api.addPanel({ + id: 'panel_1', + component: 'default', + floating: true, + }); + expect(api.activePanel).toBe(panel1); + + api.addPanel({ + id: 'panel_2', + component: 'default', + floating: true, + inactive: true, + }); + expect(api.activePanel).toBe(panel1); + }); + + test('that can add panel positional to another (within)', () => { + const container = document.createElement('div'); + + const dockview = new DockviewComponent({ + parentElement: container, + components: { + default: PanelContentPartTest, + }, + }); + const api = new DockviewApi(dockview); + + dockview.layout(1000, 1000); + + const panel1 = api.addPanel({ + id: 'panel_1', + component: 'default', + }); + expect(api.activePanel).toBe(panel1); + + api.addPanel({ + id: 'panel_2', + component: 'default', + position: { direction: 'within', referencePanel: panel1 }, + inactive: true, + }); + expect(api.activePanel).toBe(panel1); + }); + + test('that can add panel positional to another (not within)', () => { + const container = document.createElement('div'); + + const dockview = new DockviewComponent({ + parentElement: container, + components: { + default: PanelContentPartTest, + }, + }); + const api = new DockviewApi(dockview); + + dockview.layout(1000, 1000); + + const panel1 = api.addPanel({ + id: 'panel_1', + component: 'default', + }); + expect(api.activePanel).toBe(panel1); + + api.addPanel({ + id: 'panel_2', + component: 'default', + position: { direction: 'right', referencePanel: panel1 }, + inactive: true, + }); + expect(api.activePanel).toBe(panel1); + }); + }); }); diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts index ce5238f44..6b9ad7256 100644 --- a/packages/dockview-core/src/dockview/dockviewComponent.ts +++ b/packages/dockview-core/src/dockview/dockviewComponent.ts @@ -1474,8 +1474,15 @@ export class DockviewComponent ); const panel = this.createPanel(options, group); - group.model.openPanel(panel); - this.doSetGroupAndPanelActive(group); + group.model.openPanel(panel, { + skipSetActive: options.inactive, + skipSetGroupActive: options.inactive, + }); + + if (!options.inactive) { + this.doSetGroupAndPanelActive(group); + } + return panel; } } else { @@ -1507,14 +1514,23 @@ export class DockviewComponent panel = this.createPanel(options, group); - group.model.openPanel(panel); + group.model.openPanel(panel, { + skipSetActive: options.inactive, + skipSetGroupActive: options.inactive, + }); } else if ( referenceGroup.api.location.type === 'floating' || target === 'center' ) { panel = this.createPanel(options, referenceGroup); - referenceGroup.model.openPanel(panel); - this.doSetGroupAndPanelActive(referenceGroup); + referenceGroup.model.openPanel(panel, { + skipSetActive: options.inactive, + skipSetGroupActive: options.inactive, + }); + + if (!options.inactive) { + this.doSetGroupAndPanelActive(referenceGroup); + } } else { const location = getGridLocation(referenceGroup.element); const relativeLocation = getRelativeLocation( @@ -1524,32 +1540,47 @@ export class DockviewComponent ); const group = this.createGroupAtLocation(relativeLocation); panel = this.createPanel(options, group); - group.model.openPanel(panel); - this.doSetGroupAndPanelActive(group); + group.model.openPanel(panel, { + skipSetActive: options.inactive, + skipSetGroupActive: options.inactive, + }); + + if (!options.inactive) { + this.doSetGroupAndPanelActive(group); + } } } else if (options.floating) { const group = this.createGroup(); this._onDidAddGroup.fire(group); - const o = + const coordinates = typeof options.floating === 'object' && options.floating !== null ? options.floating : {}; - this.addFloatingGroup(group, o, { + this.addFloatingGroup(group, coordinates, { inDragMode: false, skipRemoveGroup: true, skipActiveGroup: true, }); panel = this.createPanel(options, group); - group.model.openPanel(panel); + group.model.openPanel(panel, { + skipSetActive: options.inactive, + skipSetGroupActive: options.inactive, + }); } else { const group = this.createGroupAtLocation(); panel = this.createPanel(options, group); - group.model.openPanel(panel); - this.doSetGroupAndPanelActive(group); + group.model.openPanel(panel, { + skipSetActive: options.inactive, + skipSetGroupActive: options.inactive, + }); + + if (!options.inactive) { + this.doSetGroupAndPanelActive(group); + } } return panel; diff --git a/packages/dockview-core/src/dockview/options.ts b/packages/dockview-core/src/dockview/options.ts index 016eff890..c3d4bdf48 100644 --- a/packages/dockview-core/src/dockview/options.ts +++ b/packages/dockview-core/src/dockview/options.ts @@ -13,7 +13,10 @@ import { ISplitviewStyles, Orientation } from '../splitview/splitview'; import { PanelTransfer } from '../dnd/dataTransfer'; import { IDisposable } from '../lifecycle'; import { DroptargetOverlayModel, Position } from '../dnd/droptarget'; -import { DockviewGroupDropLocation, GroupOptions } from './dockviewGroupPanelModel'; +import { + DockviewGroupDropLocation, + GroupOptions, +} from './dockviewGroupPanelModel'; import { IDockviewPanel } from './dockviewPanel'; import { ComponentConstructor, @@ -171,11 +174,36 @@ type AddPanelOptionsUnion = AddPanelFloatingGroupUnion | AddPanelPositionUnion; export type AddPanelOptions

= { params?: P; + /** + * The unique id for the panel + */ id: string; + /** + * The title for the panel which can be accessed within both the tab and component. + * + * If using the default tab renderer this title will be displayed in the tab. + */ title?: string; + /** + * The id of the component renderer + */ component: string; + /** + * The id of the tab componnet renderer + */ tabComponent?: string; + /** + * The rendering mode of the panel. + * + * This dictates what happens to the HTML of the panel when it is hidden. + */ renderer?: DockviewPanelRenderer; + /** + * If true then add the panel without setting it as the active panel. + * + * Defaults to `false` which forces newly added panels to become active. + */ + inactive?: boolean; } & Partial; type AddGroupOptionsWithPanel = {