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

Merge pull request #573 from mathuo/572-opening-a-new-tab-without-activating-it

Browse Source 
572 opening a new tab without activating it
This commit is contained in:
mathuo 2024-04-25 20:00:31 +01:00 committed by GitHub
commit ffbd7bcf04
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 213 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4653,4 +4653,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);
});
});
});

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

@ -1460,8 +1460,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 {
@ -1493,14 +1500,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(
@ -1510,32 +1526,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;

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

@ -216,11 +216,36 @@ type AddPanelOptionsUnion = AddPanelFloatingGroupUnion | AddPanelPositionUnion;
export type AddPanelOptions<P extends object = Parameters> = {
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<AddPanelOptionsUnion>;
type AddGroupOptionsWithPanel = {

3
tsconfig.test.json
View File

@ -1,7 +1,8 @@
{
"extends": "./tsconfig.base.json",
"compilerOptions": {
"jsx": "react-jsx"
"jsx": "react-jsx",
"sourceMap": true
},
"include": ["**/*.spec.ts", "./jest-setup.ts"]
}