rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-05-01 17:18:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: provide 'inactive' property to addPanel

Browse Source
This commit is contained in:
mathuo 2024-04-17 20:27:39 +01:00
parent bc8fa59557
commit 4a05fd0aed
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
3 changed files with 215 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

@ -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);
});
});
});

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

@ -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;

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

@ -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<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 = {