dockview-core 1.10.0 → 1.10.2

package/dist/esm/api/component.api.d.ts

@@ -374,15 +374,23 @@ export declare class DockviewApi implements CommonApi<SerializedDockview> {
      */
     get onWillDrop(): Event<DockviewWillDropEvent>;
     /**
+     * Invoked before an overlay is shown indicating a drop target.
      *
+     * Calling `event.preventDefault()` will prevent the overlay being shown and prevent
+     * the any subsequent drop event.
      */
     get onWillShowOverlay(): Event<WillShowOverlayLocationEvent>;
     /**
-     * Invoked before a group is dragged. Exposed for custom Drag'n'Drop functionality.
+     * Invoked before a group is dragged.
+     *
+     * Calling `event.nativeEvent.preventDefault()` will prevent the group drag starting.
+     *
      */
     get onWillDragGroup(): Event<GroupDragEvent>;
     /**
-     * Invoked before a panel is dragged. Exposed for custom Drag'n'Drop functionality.
+     * Invoked before a panel is dragged.
+     *
+     * Calling `event.nativeEvent.preventDefault()` will prevent the panel drag starting.
      */
     get onWillDragPanel(): Event<TabDragEvent>;
     /**

package/dist/esm/api/component.api.js

@@ -516,19 +516,27 @@ export class DockviewApi {
         return this.component.onWillDrop;
     }
     /**
+     * Invoked before an overlay is shown indicating a drop target.
      *
+     * Calling `event.preventDefault()` will prevent the overlay being shown and prevent
+     * the any subsequent drop event.
      */
     get onWillShowOverlay() {
         return this.component.onWillShowOverlay;
     }
     /**
-     * Invoked before a group is dragged. Exposed for custom Drag'n'Drop functionality.
+     * Invoked before a group is dragged.
+     *
+     * Calling `event.nativeEvent.preventDefault()` will prevent the group drag starting.
+     *
      */
     get onWillDragGroup() {
         return this.component.onWillDragGroup;
     }
     /**
-     * Invoked before a panel is dragged. Exposed for custom Drag'n'Drop functionality.
+     * Invoked before a panel is dragged.
+     *
+     * Calling `event.nativeEvent.preventDefault()` will prevent the panel drag starting.
      */
     get onWillDragPanel() {
         return this.component.onWillDragPanel;

package/dist/esm/api/dockviewGroupPanelApi.js

@@ -11,7 +11,7 @@ export class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
         return this._group.model.location;
     }
     constructor(id, accessor) {
-        super(id);
+        super(id, '__dockviewgroup__');
         this.accessor = accessor;
         this._onDidLocationChange = new Emitter();
         this.onDidLocationChange = this._onDidLocationChange.event;

package/dist/esm/api/dockviewPanelApi.d.ts

@@ -25,6 +25,7 @@ export interface DockviewPanelApi extends Omit<GridviewPanelApi, 'setVisible' |
     readonly title: string | undefined;
     readonly onDidActiveGroupChange: Event<ActiveGroupEvent>;
     readonly onDidGroupChange: Event<GroupChangedEvent>;
+    readonly onDidTitleChange: Event<TitleEvent>;
     readonly onDidRendererChange: Event<RendererChangedEvent>;
     readonly location: DockviewGroupLocation;
     readonly onDidLocationChange: Event<DockviewGroupPanelFloatingChangeEvent>;
@@ -48,6 +49,7 @@ export declare class DockviewPanelApiImpl extends GridviewPanelApiImpl implement
     private panel;
     private readonly accessor;
     private _group;
+    private _tabComponent;
     readonly _onDidTitleChange: Emitter<TitleEvent>;
     readonly onDidTitleChange: Event<TitleEvent>;
     private readonly _onDidActiveGroupChange;
@@ -65,7 +67,8 @@ export declare class DockviewPanelApiImpl extends GridviewPanelApiImpl implement
     get renderer(): DockviewPanelRenderer;
     set group(value: DockviewGroupPanel);
     get group(): DockviewGroupPanel;
-    constructor(panel: DockviewPanel, group: DockviewGroupPanel, accessor: DockviewComponent);
+    get tabComponent(): string | undefined;
+    constructor(panel: DockviewPanel, group: DockviewGroupPanel, accessor: DockviewComponent, component: string, tabComponent?: string);
     getWindow(): Window;
     moveTo(options: {
         group: DockviewGroupPanel;
@@ -78,4 +81,5 @@ export declare class DockviewPanelApiImpl extends GridviewPanelApiImpl implement
     maximize(): void;
     isMaximized(): boolean;
     exitMaximized(): void;
+    private setupGroupEventListeners;
 }

package/dist/esm/api/dockviewPanelApi.js

@@ -15,32 +15,11 @@ export class DockviewPanelApiImpl extends GridviewPanelApiImpl {
         return this.panel.renderer;
     }
     set group(value) {
-        const isOldGroupActive = this.isGroupActive;
+        const oldGroup = this._group;
         if (this._group !== value) {
             this._group = value;
             this._onDidGroupChange.fire({});
-            let _trackGroupActive = isOldGroupActive; // prevent duplicate events with same state
-            this.groupEventsDisposable.value = new CompositeDisposable(this.group.api.onDidLocationChange((event) => {
-                if (this.group !== this.panel.group) {
-                    return;
-                }
-                this._onDidLocationChange.fire(event);
-            }), this.group.api.onDidActiveChange(() => {
-                if (this.group !== this.panel.group) {
-                    return;
-                }
-                if (_trackGroupActive !== this.isGroupActive) {
-                    _trackGroupActive = this.isGroupActive;
-                    this._onDidActiveGroupChange.fire({
-                        isActive: this.isGroupActive,
-                    });
-                }
-            }));
-            // if (this.isGroupActive !== isOldGroupActive) {
-            //     this._onDidActiveGroupChange.fire({
-            //         isActive: this.isGroupActive,
-            //     });
-            // }
+            this.setupGroupEventListeners(oldGroup);
             this._onDidLocationChange.fire({
                 location: this.group.api.location,
             });
@@ -49,8 +28,11 @@ export class DockviewPanelApiImpl extends GridviewPanelApiImpl {
     get group() {
         return this._group;
     }
-    constructor(panel, group, accessor) {
-        super(panel.id);
+    get tabComponent() {
+        return this._tabComponent;
+    }
+    constructor(panel, group, accessor, component, tabComponent) {
+        super(panel.id, component);
         this.panel = panel;
         this.accessor = accessor;
         this._onDidTitleChange = new Emitter();
@@ -64,8 +46,10 @@ export class DockviewPanelApiImpl extends GridviewPanelApiImpl {
         this._onDidLocationChange = new Emitter();
         this.onDidLocationChange = this._onDidLocationChange.event;
         this.groupEventsDisposable = new MutableDisposable();
+        this._tabComponent = tabComponent;
         this.initialize(panel);
         this._group = group;
+        this.setupGroupEventListeners();
         this.addDisposables(this.groupEventsDisposable, this._onDidRendererChange, this._onDidTitleChange, this._onDidGroupChange, this._onDidActiveGroupChange, this._onDidLocationChange);
     }
     getWindow() {
@@ -100,4 +84,33 @@ export class DockviewPanelApiImpl extends GridviewPanelApiImpl {
     exitMaximized() {
         this.group.api.exitMaximized();
     }
+    setupGroupEventListeners(previousGroup) {
+        var _a;
+        let _trackGroupActive = (_a = previousGroup === null || previousGroup === void 0 ? void 0 : previousGroup.isActive) !== null && _a !== void 0 ? _a : false; // prevent duplicate events with same state
+        this.groupEventsDisposable.value = new CompositeDisposable(this.group.api.onDidVisibilityChange((event) => {
+            if (!event.isVisible && this.isVisible) {
+                this._onDidVisibilityChange.fire(event);
+            }
+            else if (event.isVisible &&
+                !this.isVisible &&
+                this.group.model.isPanelActive(this.panel)) {
+                this._onDidVisibilityChange.fire(event);
+            }
+        }), this.group.api.onDidLocationChange((event) => {
+            if (this.group !== this.panel.group) {
+                return;
+            }
+            this._onDidLocationChange.fire(event);
+        }), this.group.api.onDidActiveChange(() => {
+            if (this.group !== this.panel.group) {
+                return;
+            }
+            if (_trackGroupActive !== this.isGroupActive) {
+                _trackGroupActive = this.isGroupActive;
+                this._onDidActiveGroupChange.fire({
+                    isActive: this.isGroupActive,
+                });
+            }
+        }));
+    }
 }

package/dist/esm/api/gridviewPanelApi.d.ts

@@ -30,7 +30,7 @@ export declare class GridviewPanelApiImpl extends PanelApiImpl implements Gridvi
     readonly onDidConstraintsChange: Event<GridConstraintChangeEvent>;
     private readonly _onDidSizeChange;
     readonly onDidSizeChange: Event<SizeEvent>;
-    constructor(id: string, panel?: IPanel);
+    constructor(id: string, component: string, panel?: IPanel);
     setConstraints(value: GridConstraintChangeEvent): void;
     setSize(event: SizeEvent): void;
 }

package/dist/esm/api/gridviewPanelApi.js

@@ -1,8 +1,8 @@
 import { Emitter } from '../events';
 import { PanelApiImpl } from './panelApi';
 export class GridviewPanelApiImpl extends PanelApiImpl {
-    constructor(id, panel) {
-        super(id);
+    constructor(id, component, panel) {
+        super(id, component);
         this._onDidConstraintsChangeInternal = new Emitter();
         this.onDidConstraintsChangeInternal = this._onDidConstraintsChangeInternal.event;
         this._onDidConstraintsChange = new Emitter();

package/dist/esm/api/panelApi.d.ts

@@ -11,9 +11,6 @@ export interface PanelDimensionChangeEvent {
 export interface VisibilityEvent {
     readonly isVisible: boolean;
 }
-export interface HiddenEvent {
-    readonly isHidden: boolean;
-}
 export interface ActiveEvent {
     readonly isActive: boolean;
 }
@@ -22,8 +19,9 @@ export interface PanelApi {
     readonly onDidFocusChange: Event<FocusEvent>;
     readonly onDidVisibilityChange: Event<VisibilityEvent>;
     readonly onDidActiveChange: Event<ActiveEvent>;
-    readonly onDidHiddenChange: Event<HiddenEvent>;
+    readonly onDidParametersChange: Event<Parameters>;
     setActive(): void;
+    setVisible(isVisible: boolean): void;
     updateParameters(parameters: Parameters): void;
     /**
      * The id of the panel that would have been assigned when the panel was created
@@ -41,10 +39,6 @@ export interface PanelApi {
      * Whether the panel is visible
      */
     readonly isVisible: boolean;
-    /**
-     * Whether the panel is hidden
-     */
-    readonly isHidden: boolean;
     /**
      * The panel width in pixels
      */
@@ -54,6 +48,7 @@ export interface PanelApi {
      */
     readonly height: number;
     readonly onWillFocus: Event<WillFocusEvent>;
+    getParameters<T extends Parameters = Parameters>(): T;
 }
 export declare class WillFocusEvent extends DockviewEvent {
     constructor();
@@ -63,12 +58,13 @@ export declare class WillFocusEvent extends DockviewEvent {
  */
 export declare class PanelApiImpl extends CompositeDisposable implements PanelApi {
     readonly id: string;
+    readonly component: string;
     private _isFocused;
     private _isActive;
     private _isVisible;
-    private _isHidden;
     private _width;
     private _height;
+    private _parameters;
     private readonly panelUpdatesDisposable;
     readonly _onDidDimensionChange: Emitter<PanelDimensionChangeEvent>;
     readonly onDidDimensionsChange: Event<PanelDimensionChangeEvent>;
@@ -78,23 +74,23 @@ export declare class PanelApiImpl extends CompositeDisposable implements PanelAp
     readonly onWillFocus: Event<WillFocusEvent>;
     readonly _onDidVisibilityChange: Emitter<VisibilityEvent>;
     readonly onDidVisibilityChange: Event<VisibilityEvent>;
-    readonly _onDidHiddenChange: Emitter<HiddenEvent>;
-    readonly onDidHiddenChange: Event<HiddenEvent>;
+    readonly _onWillVisibilityChange: Emitter<VisibilityEvent>;
+    readonly onWillVisibilityChange: Event<VisibilityEvent>;
     readonly _onDidActiveChange: Emitter<ActiveEvent>;
     readonly onDidActiveChange: Event<ActiveEvent>;
     readonly _onActiveChange: Emitter<void>;
     readonly onActiveChange: Event<void>;
-    readonly _onUpdateParameters: Emitter<Parameters>;
-    readonly onUpdateParameters: Event<Parameters>;
+    readonly _onDidParametersChange: Emitter<Parameters>;
+    readonly onDidParametersChange: Event<Parameters>;
     get isFocused(): boolean;
     get isActive(): boolean;
     get isVisible(): boolean;
-    get isHidden(): boolean;
     get width(): number;
     get height(): number;
-    constructor(id: string);
+    constructor(id: string, component: string);
+    getParameters<T extends Parameters = Parameters>(): T;
     initialize(panel: IPanel): void;
-    setHidden(isHidden: boolean): void;
+    setVisible(isVisible: boolean): void;
     setActive(): void;
     updateParameters(parameters: Parameters): void;
 }

package/dist/esm/api/panelApi.js

@@ -18,24 +18,22 @@ export class PanelApiImpl extends CompositeDisposable {
     get isVisible() {
         return this._isVisible;
     }
-    get isHidden() {
-        return this._isHidden;
-    }
     get width() {
         return this._width;
     }
     get height() {
         return this._height;
     }
-    constructor(id) {
+    constructor(id, component) {
         super();
         this.id = id;
+        this.component = component;
         this._isFocused = false;
         this._isActive = false;
         this._isVisible = true;
-        this._isHidden = false;
         this._width = 0;
         this._height = 0;
+        this._parameters = {};
         this.panelUpdatesDisposable = new MutableDisposable();
         this._onDidDimensionChange = new Emitter();
         this.onDidDimensionsChange = this._onDidDimensionChange.event;
@@ -47,41 +45,43 @@ export class PanelApiImpl extends CompositeDisposable {
         //
         this._onDidVisibilityChange = new Emitter();
         this.onDidVisibilityChange = this._onDidVisibilityChange.event;
-        this._onDidHiddenChange = new Emitter();
-        this.onDidHiddenChange = this._onDidHiddenChange.event;
+        this._onWillVisibilityChange = new Emitter();
+        this.onWillVisibilityChange = this._onWillVisibilityChange.event;
         this._onDidActiveChange = new Emitter();
         this.onDidActiveChange = this._onDidActiveChange.event;
         this._onActiveChange = new Emitter();
         this.onActiveChange = this._onActiveChange.event;
-        this._onUpdateParameters = new Emitter();
-        this.onUpdateParameters = this._onUpdateParameters.event;
+        this._onDidParametersChange = new Emitter();
+        this.onDidParametersChange = this._onDidParametersChange.event;
         this.addDisposables(this.onDidFocusChange((event) => {
             this._isFocused = event.isFocused;
         }), this.onDidActiveChange((event) => {
             this._isActive = event.isActive;
         }), this.onDidVisibilityChange((event) => {
             this._isVisible = event.isVisible;
-        }), this.onDidHiddenChange((event) => {
-            this._isHidden = event.isHidden;
         }), this.onDidDimensionsChange((event) => {
             this._width = event.width;
             this._height = event.height;
-        }), this.panelUpdatesDisposable, this._onDidDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onWillFocus, this._onActiveChange, this._onUpdateParameters, this._onWillFocus, this._onDidHiddenChange, this._onUpdateParameters);
+        }), this.panelUpdatesDisposable, this._onDidDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onWillFocus, this._onActiveChange, this._onWillFocus, this._onWillVisibilityChange, this._onDidParametersChange);
+    }
+    getParameters() {
+        return this._parameters;
     }
     initialize(panel) {
-        this.panelUpdatesDisposable.value = this._onUpdateParameters.event((parameters) => {
+        this.panelUpdatesDisposable.value = this._onDidParametersChange.event((parameters) => {
+            this._parameters = parameters;
             panel.update({
                 params: parameters,
             });
         });
     }
-    setHidden(isHidden) {
-        this._onDidHiddenChange.fire({ isHidden });
+    setVisible(isVisible) {
+        this._onWillVisibilityChange.fire({ isVisible });
     }
     setActive() {
         this._onActiveChange.fire();
     }
     updateParameters(parameters) {
-        this._onUpdateParameters.fire(parameters);
+        this._onDidParametersChange.fire(parameters);
     }
 }

package/dist/esm/api/paneviewPanelApi.d.ts

@@ -20,7 +20,7 @@ export declare class PaneviewPanelApiImpl extends SplitviewPanelApiImpl implemen
     readonly onMouseLeave: Event<MouseEvent>;
     private _pane;
     set pane(pane: PaneviewPanel);
-    constructor(id: string);
+    constructor(id: string, component: string);
     setExpanded(isExpanded: boolean): void;
     get isExpanded(): boolean;
 }

package/dist/esm/api/paneviewPanelApi.js

@@ -4,8 +4,8 @@ export class PaneviewPanelApiImpl extends SplitviewPanelApiImpl {
     set pane(pane) {
         this._pane = pane;
     }
-    constructor(id) {
-        super(id);
+    constructor(id, component) {
+        super(id, component);
         this._onDidExpansionChange = new Emitter({
             replay: true,
         });

package/dist/esm/api/splitviewPanelApi.d.ts

@@ -25,7 +25,7 @@ export declare class SplitviewPanelApiImpl extends PanelApiImpl implements Split
     readonly onDidConstraintsChange: Event<PanelConstraintChangeEvent>;
     readonly _onDidSizeChange: Emitter<PanelSizeEvent>;
     readonly onDidSizeChange: Event<PanelSizeEvent>;
-    constructor(id: string);
+    constructor(id: string, component: string);
     setConstraints(value: PanelConstraintChangeEvent2): void;
     setSize(event: PanelSizeEvent): void;
 }

package/dist/esm/api/splitviewPanelApi.js

@@ -2,8 +2,8 @@ import { Emitter } from '../events';
 import { PanelApiImpl } from './panelApi';
 export class SplitviewPanelApiImpl extends PanelApiImpl {
     //
-    constructor(id) {
-        super(id);
+    constructor(id, component) {
+        super(id, component);
         this._onDidConstraintsChangeInternal = new Emitter();
         this.onDidConstraintsChangeInternal = this._onDidConstraintsChangeInternal.event;
         //

package/dist/esm/dockview/components/panel/content.js

@@ -48,7 +48,7 @@ export class ContentContainer extends CompositeDisposable {
                         data.groupId === this.group.id;
                     return !groupHasOnePanelAndIsActiveDragElement;
                 }
-                return this.group.canDisplayOverlay(event, position, 'panel');
+                return this.group.canDisplayOverlay(event, position, 'content');
             },
         });
         this.addDisposables(this.dropTarget);

package/dist/esm/dockview/components/titlebar/voidContainer.js

@@ -38,7 +38,7 @@ export class VoidContainer extends CompositeDisposable {
                     // don't show the overlay if the tab being dragged is the last panel of this group
                     return ((_a = last(this.group.panels)) === null || _a === void 0 ? void 0 : _a.id) !== data.panelId;
                 }
-                return group.model.canDisplayOverlay(event, position, 'panel');
+                return group.model.canDisplayOverlay(event, position, 'header_space');
             },
         });
         this.onWillShowOverlay = this.dropTraget.onWillShowOverlay;

package/dist/esm/dockview/deserializer.js

@@ -18,7 +18,7 @@ export class DefaultDockviewDeserialzier {
             ? (_b = viewData.tab) === null || _b === void 0 ? void 0 : _b.id
             : panelData.tabComponent;
         const view = new DockviewPanelModel(this.accessor, panelId, contentComponent, tabComponent);
-        const panel = new DockviewPanel(panelId, this.accessor, new DockviewApi(this.accessor), group, view, {
+        const panel = new DockviewPanel(panelId, contentComponent, tabComponent, this.accessor, new DockviewApi(this.accessor), group, view, {
             renderer: panelData.renderer,
         });
         panel.init({

package/dist/esm/dockview/dockviewComponent.js

@@ -12,7 +12,7 @@ import { isGroupOptionsWithGroup, isGroupOptionsWithPanel, isPanelOptionsWithGro
 import { BaseGrid, toTarget, } from '../gridview/baseComponentGridview';
 import { DockviewApi } from '../api/component.api';
 import { Orientation, Sizing } from '../splitview/splitview';
-import { DockviewDidDropEvent, DockviewWillDropEvent, } from './dockviewGroupPanelModel';
+import { DockviewDidDropEvent, DockviewWillDropEvent, WillShowOverlayLocationEvent, } from './dockviewGroupPanelModel';
 import { DockviewGroupPanel } from './dockviewGroupPanel';
 import { DockviewPanelModel } from './dockviewPanelModel';
 import { getPanelData } from '../dnd/dataTransfer';
@@ -269,7 +269,15 @@ export class DockviewComponent extends BaseGrid {
             acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
             overlayModel: (_b = this.options.rootOverlayModel) !== null && _b !== void 0 ? _b : DEFAULT_ROOT_OVERLAY_MODEL,
         });
-        this.addDisposables(this._rootDropTarget.onDrop((event) => {
+        this.addDisposables(this._rootDropTarget, this._rootDropTarget.onWillShowOverlay((event) => {
+            if (this.gridview.length > 0 && event.position === 'center') {
+                // option only available when no panels in primary grid
+                return;
+            }
+            this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
+                kind: 'edge',
+            }));
+        }), this._rootDropTarget.onDrop((event) => {
             var _a;
             const willDropEvent = new DockviewWillDropEvent({
                 nativeEvent: event.nativeEvent,
@@ -278,7 +286,7 @@ export class DockviewComponent extends BaseGrid {
                 api: this._api,
                 group: undefined,
                 getData: getPanelData,
-                kind: 'content',
+                kind: 'edge',
             });
             this._onWillDrop.fire(willDropEvent);
             if (willDropEvent.defaultPrevented) {
@@ -334,7 +342,7 @@ export class DockviewComponent extends BaseGrid {
         const box = getBox();
         const groupId = (_b = (_a = options === null || options === void 0 ? void 0 : options.overridePopoutGroup) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : this.getNextGroupId(); //item.id;
         if (itemToPopout.api.location.type === 'grid') {
-            itemToPopout.api.setHidden(true);
+            itemToPopout.api.setVisible(false);
         }
         const _window = new PopoutWindow(`${this.id}-${groupId}`, // unique id
         theme !== null && theme !== void 0 ? theme : '', {
@@ -385,7 +393,7 @@ export class DockviewComponent extends BaseGrid {
                 }));
                 switch (referenceLocation) {
                     case 'grid':
-                        referenceGroup.api.setHidden(true);
+                        referenceGroup.api.setVisible(false);
                         break;
                     case 'floating':
                     case 'popout':
@@ -439,8 +447,8 @@ export class DockviewComponent extends BaseGrid {
                         from: group,
                         to: referenceGroup,
                     }));
-                    if (referenceGroup.api.isHidden) {
-                        referenceGroup.api.setHidden(false);
+                    if (!referenceGroup.api.isVisible) {
+                        referenceGroup.api.setVisible(true);
                     }
                     if (this.getPanel(group.id)) {
                         this.doRemoveGroup(group, {
@@ -1015,7 +1023,7 @@ export class DockviewComponent extends BaseGrid {
     }
     updateWatermark() {
         var _a, _b;
-        if (this.groups.filter((x) => x.api.location.type === 'grid' && !x.api.isHidden).length === 0) {
+        if (this.groups.filter((x) => x.api.location.type === 'grid' && x.api.isVisible).length === 0) {
             if (!this.watermark) {
                 this.watermark = this.createWatermarkComponent();
                 this.watermark.init({
@@ -1412,6 +1420,8 @@ export class DockviewComponent extends BaseGrid {
                 if (this._onDidActivePanelChange.value !== event.panel) {
                     this._onDidActivePanelChange.fire(event.panel);
                 }
+            }), Event.any(view.model.onDidPanelTitleChange, view.model.onDidPanelParametersChange)(() => {
+                this._bufferOnDidLayoutChange.fire();
             }));
             this._groups.set(view.id, { value: view, disposable });
         }
@@ -1424,7 +1434,7 @@ export class DockviewComponent extends BaseGrid {
         const contentComponent = options.component;
         const tabComponent = (_a = options.tabComponent) !== null && _a !== void 0 ? _a : this.options.defaultTabComponent;
         const view = new DockviewPanelModel(this, options.id, contentComponent, tabComponent);
-        const panel = new DockviewPanel(options.id, this, this._api, group, view, { renderer: options.renderer });
+        const panel = new DockviewPanel(options.id, contentComponent, tabComponent, this, this._api, group, view, { renderer: options.renderer });
         panel.init({
             title: (_b = options.title) !== null && _b !== void 0 ? _b : options.id,
             params: (_c = options === null || options === void 0 ? void 0 : options.params) !== null && _c !== void 0 ? _c : {},

package/dist/esm/dockview/dockviewGroupPanelModel.d.ts

@@ -5,12 +5,12 @@ import { DockviewComponent } from './dockviewComponent';
 import { DockviewEvent, Event, IDockviewEvent } from '../events';
 import { IViewSize } from '../gridview/gridview';
 import { CompositeDisposable } from '../lifecycle';
-import { IPanel, PanelInitParameters, PanelUpdateEvent } from '../panel/types';
+import { IPanel, PanelInitParameters, PanelUpdateEvent, Parameters } from '../panel/types';
 import { GroupDragEvent, TabDragEvent } from './components/titlebar/tabsContainer';
-import { DockviewDropTargets } from './types';
 import { DockviewGroupPanel } from './dockviewGroupPanel';
 import { IDockviewPanel } from './dockviewPanel';
 import { OverlayRenderContainer } from '../overlayRenderContainer';
+import { TitleEvent } from '../api/dockviewPanelApi';
 interface GroupMoveEvent {
     groupId: string;
     itemId?: string;
@@ -69,7 +69,7 @@ export interface IHeader {
     hidden: boolean;
 }
 export type DockviewGroupPanelLocked = boolean | 'no-drop-target';
-export type DockviewGroupDropLocation = 'tab' | 'header_space' | 'content';
+export type DockviewGroupDropLocation = 'tab' | 'header_space' | 'content' | 'edge';
 export interface IDockviewGroupPanelModel extends IPanel {
     readonly isActive: boolean;
     readonly size: number;
@@ -106,7 +106,7 @@ export interface IDockviewGroupPanelModel extends IPanel {
         panel?: IDockviewPanel;
         suppressRoll?: boolean;
     }): void;
-    canDisplayOverlay(event: DragEvent, position: Position, target: DockviewDropTargets): boolean;
+    canDisplayOverlay(event: DragEvent, position: Position, target: DockviewGroupDropLocation): boolean;
 }
 export type DockviewGroupLocation = {
     type: 'grid';
@@ -150,6 +150,7 @@ export declare class DockviewGroupPanelModel extends CompositeDisposable impleme
     private _width;
     private _height;
     private _panels;
+    private readonly _panelDisposables;
     private readonly _onMove;
     readonly onMove: Event<GroupMoveEvent>;
     private readonly _onDidDrop;
@@ -164,6 +165,10 @@ export declare class DockviewGroupPanelModel extends CompositeDisposable impleme
     readonly onGroupDragStart: Event<GroupDragEvent>;
     private readonly _onDidAddPanel;
     readonly onDidAddPanel: Event<DockviewGroupChangeEvent>;
+    private readonly _onDidPanelTitleChange;
+    readonly onDidPanelTitleChange: Event<TitleEvent>;
+    private readonly _onDidPanelParametersChange;
+    readonly onDidPanelParametersChange: Event<Parameters>;
     private readonly _onDidRemovePanel;
     readonly onDidRemovePanel: Event<DockviewGroupChangeEvent>;
     private readonly _onDidActivePanelChange;
@@ -225,7 +230,7 @@ export declare class DockviewGroupPanelModel extends CompositeDisposable impleme
     private doSetActivePanel;
     private updateMru;
     private updateContainer;
-    canDisplayOverlay(event: DragEvent, position: Position, target: DockviewDropTargets): boolean;
+    canDisplayOverlay(event: DragEvent, position: Position, target: DockviewGroupDropLocation): boolean;
     private handleDropEvent;
     dispose(): void;
 }

package/dist/esm/dockview/dockviewGroupPanelModel.js

@@ -147,6 +147,7 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         this._width = 0;
         this._height = 0;
         this._panels = [];
+        this._panelDisposables = new Map();
         this._onMove = new Emitter();
         this.onMove = this._onMove.event;
         this._onDidDrop = new Emitter();
@@ -161,6 +162,10 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         this.onGroupDragStart = this._onGroupDragStart.event;
         this._onDidAddPanel = new Emitter();
         this.onDidAddPanel = this._onDidAddPanel.event;
+        this._onDidPanelTitleChange = new Emitter();
+        this.onDidPanelTitleChange = this._onDidPanelTitleChange.event;
+        this._onDidPanelParametersChange = new Emitter();
+        this.onDidPanelParametersChange = this._onDidPanelParametersChange.event;
         this._onDidRemovePanel = new Emitter();
         this.onDidRemovePanel = this._onDidRemovePanel.event;
         this._onDidActivePanelChange = new Emitter();
@@ -449,6 +454,11 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         if (this.mostRecentlyUsed.includes(panel)) {
             this.mostRecentlyUsed.splice(this.mostRecentlyUsed.indexOf(panel), 1);
         }
+        const disposable = this._panelDisposables.get(panel.id);
+        if (disposable) {
+            disposable.dispose();
+            this._panelDisposables.delete(panel.id);
+        }
         this._onDidRemovePanel.fire({ panel });
     }
     doAddPanel(panel, index = this.panels.length, options = { skipSetActive: false }) {
@@ -466,6 +476,7 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         }
         this.updateMru(panel);
         this.panels.splice(index, 0, panel);
+        this._panelDisposables.set(panel.id, new CompositeDisposable(panel.api.onDidTitleChange((event) => this._onDidPanelTitleChange.fire(event)), panel.api.onDidParametersChange((event) => this._onDidPanelParametersChange.fire(event))));
         this._onDidAddPanel.fire({ panel });
     }
     doSetActivePanel(panel) {

package/dist/esm/dockview/dockviewPanel.d.ts

@@ -36,7 +36,7 @@ export declare class DockviewPanel extends CompositeDisposable implements IDockv
     get title(): string | undefined;
     get group(): DockviewGroupPanel;
     get renderer(): DockviewPanelRenderer;
-    constructor(id: string, accessor: DockviewComponent, containerApi: DockviewApi, group: DockviewGroupPanel, view: IDockviewPanelModel, options: {
+    constructor(id: string, component: string, tabComponent: string | undefined, accessor: DockviewComponent, containerApi: DockviewApi, group: DockviewGroupPanel, view: IDockviewPanelModel, options: {
         renderer?: DockviewPanelRenderer;
     });
     init(params: IGroupPanelInitParameters): void;