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

572 opening a new tab without activating it

packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts

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

packages/dockview-core/src/dockview/dockviewComponent.ts

@@ -1460,8 +1460,15 @@ export class DockviewComponent
                 );
 
                 const panel = this.createPanel(options, group);
-                group.model.openPanel(panel);
+                group.model.openPanel(panel, {
-                this.doSetGroupAndPanelActive(group);
+                    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);
+                referenceGroup.model.openPanel(panel, {
-                this.doSetGroupAndPanelActive(referenceGroup);
+                    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);
+                group.model.openPanel(panel, {
-                this.doSetGroupAndPanelActive(group);
+                    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);
+            group.model.openPanel(panel, {
-            this.doSetGroupAndPanelActive(group);
+                skipSetActive: options.inactive,
+                skipSetGroupActive: options.inactive,
+            });
+
+            if (!options.inactive) {
+                this.doSetGroupAndPanelActive(group);
+            }
         }
 
         return panel;

packages/dockview-core/src/dockview/options.ts

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

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"]
 }