dockview-core 1.12.0 → 1.13.0

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

@@ -1,5 +1,5 @@
 import { IDockviewComponent, SerializedDockview } from '../dockview/dockviewComponent';
-import { AddGroupOptions, AddPanelOptions, MovementOptions } from '../dockview/options';
+import { AddGroupOptions, AddPanelOptions, DockviewDndOverlayEvent, MovementOptions } from '../dockview/options';
 import { Parameters } from '../panel/types';
 import { Direction } from '../gridview/baseComponentGridview';
 import { AddComponentOptions, IGridviewComponent, SerializedGridviewComponent } from '../gridview/gridviewComponent';
@@ -393,6 +393,7 @@ export declare class DockviewApi implements CommonApi<SerializedDockview> {
      * Calling `event.nativeEvent.preventDefault()` will prevent the panel drag starting.
      */
     get onWillDragPanel(): Event<TabDragEvent>;
+    get onUnhandledDragOverEvent(): Event<DockviewDndOverlayEvent>;
     /**
      * All panel objects.
      */

package/dist/cjs/api/component.api.js

@@ -790,6 +790,13 @@ var DockviewApi = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(DockviewApi.prototype, "onUnhandledDragOverEvent", {
+        get: function () {
+            return this.component.onUnhandledDragOverEvent;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(DockviewApi.prototype, "panels", {
         /**
          * All panel objects.

package/dist/cjs/api/dockviewGroupPanelApi.d.ts

@@ -1,11 +1,12 @@
 import { Position } from '../dnd/droptarget';
 import { DockviewComponent } from '../dockview/dockviewComponent';
 import { DockviewGroupPanel } from '../dockview/dockviewGroupPanel';
-import { DockviewGroupLocation } from '../dockview/dockviewGroupPanelModel';
+import { DockviewGroupChangeEvent, DockviewGroupLocation } from '../dockview/dockviewGroupPanelModel';
 import { Emitter, Event } from '../events';
 import { GridviewPanelApi, GridviewPanelApiImpl } from './gridviewPanelApi';
 export interface DockviewGroupPanelApi extends GridviewPanelApi {
     readonly onDidLocationChange: Event<DockviewGroupPanelFloatingChangeEvent>;
+    readonly onDidActivePanelChange: Event<DockviewGroupChangeEvent>;
     readonly location: DockviewGroupLocation;
     /**
      * If you require the Window object
@@ -25,9 +26,12 @@ export interface DockviewGroupPanelFloatingChangeEvent {
 }
 export declare class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
     private readonly accessor;
+    private readonly _mutableDisposable;
     private _group;
     readonly _onDidLocationChange: Emitter<DockviewGroupPanelFloatingChangeEvent>;
     readonly onDidLocationChange: Event<DockviewGroupPanelFloatingChangeEvent>;
+    private readonly _onDidActivePanelChange;
+    readonly onDidActivePanelChange: Event<DockviewGroupChangeEvent>;
     get location(): DockviewGroupLocation;
     constructor(id: string, accessor: DockviewComponent);
     close(): void;

package/dist/cjs/api/dockviewGroupPanelApi.js

@@ -18,6 +18,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DockviewGroupPanelApiImpl = void 0;
 var droptarget_1 = require("../dnd/droptarget");
 var events_1 = require("../events");
+var lifecycle_1 = require("../lifecycle");
 var gridviewPanelApi_1 = require("./gridviewPanelApi");
 // TODO find a better way to initialize and avoid needing null checks
 var NOT_INITIALIZED_MESSAGE = 'DockviewGroupPanelApiImpl not initialized';
@@ -26,9 +27,12 @@ var DockviewGroupPanelApiImpl = /** @class */ (function (_super) {
     function DockviewGroupPanelApiImpl(id, accessor) {
         var _this = _super.call(this, id, '__dockviewgroup__') || this;
         _this.accessor = accessor;
+        _this._mutableDisposable = new lifecycle_1.MutableDisposable();
         _this._onDidLocationChange = new events_1.Emitter();
         _this.onDidLocationChange = _this._onDidLocationChange.event;
-        _this.addDisposables(_this._onDidLocationChange);
+        _this._onDidActivePanelChange = new events_1.Emitter();
+        _this.onDidActivePanelChange = _this._onDidActivePanelChange.event;
+        _this.addDisposables(_this._onDidLocationChange, _this._onDidActivePanelChange, _this._mutableDisposable);
         return _this;
     }
     Object.defineProperty(DockviewGroupPanelApiImpl.prototype, "location", {
@@ -96,7 +100,21 @@ var DockviewGroupPanelApiImpl = /** @class */ (function (_super) {
         }
     };
     DockviewGroupPanelApiImpl.prototype.initialize = function (group) {
+        var _this = this;
         this._group = group;
+        /**
+         * TODO: Annoying initialization order caveat
+         *
+         * Due to the order on initialization we know that the model isn't defined until later in the same stack-frame of setup.
+         * By queuing a microtask we can ensure the setup is completed within the same stack-frame, but after everything else has
+         * finished ensuring the `model` is defined.
+         */
+        queueMicrotask(function () {
+            _this._mutableDisposable.value =
+                _this._group.model.onDidActivePanelChange(function (event) {
+                    _this._onDidActivePanelChange.fire(event);
+                });
+        });
     };
     return DockviewGroupPanelApiImpl;
 }(gridviewPanelApi_1.GridviewPanelApiImpl));

package/dist/cjs/dnd/droptarget.d.ts

@@ -18,7 +18,7 @@ export declare class WillShowOverlayEvent extends DockviewEvent implements Dropt
 export declare function directionToPosition(direction: Direction): Position;
 export declare function positionToDirection(position: Position): Direction;
 export type Position = 'top' | 'bottom' | 'left' | 'right' | 'center';
-export type CanDisplayOverlay = boolean | ((dragEvent: DragEvent, state: Position) => boolean);
+export type CanDisplayOverlay = (dragEvent: DragEvent, state: Position) => boolean;
 export type MeasuredValue = {
     value: number;
     type: 'pixels' | 'percentage';

package/dist/cjs/dnd/droptarget.js

@@ -127,6 +127,10 @@ var Droptarget = /** @class */ (function (_super) {
                     _this.removeDropTarget();
                     return;
                 }
+                if (!_this.options.canDisplayOverlay(e, quadrant)) {
+                    _this.removeDropTarget();
+                    return;
+                }
                 var willShowOverlayEvent = new WillShowOverlayEvent({
                     nativeEvent: e,
                     position: quadrant,
@@ -140,16 +144,6 @@ var Droptarget = /** @class */ (function (_super) {
                     _this.removeDropTarget();
                     return;
                 }
-                if (typeof _this.options.canDisplayOverlay === 'boolean') {
-                    if (!_this.options.canDisplayOverlay) {
-                        _this.removeDropTarget();
-                        return;
-                    }
-                }
-                else if (!_this.options.canDisplayOverlay(e, quadrant)) {
-                    _this.removeDropTarget();
-                    return;
-                }
                 _this.markAsUsed(e);
                 if (!_this.targetElement) {
                     _this.targetElement = document.createElement('div');

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

@@ -118,17 +118,9 @@ var ContentContainer = /** @class */ (function (_super) {
                 break;
         }
         if (doRender) {
-            var _onDidFocus = panel.view.content.onDidFocus;
-            var _onDidBlur = panel.view.content.onDidBlur;
             var focusTracker = (0, dom_1.trackFocus)(container);
             var disposable = new lifecycle_1.CompositeDisposable();
             disposable.addDisposables(focusTracker, focusTracker.onDidFocus(function () { return _this._onDidFocus.fire(); }), focusTracker.onDidBlur(function () { return _this._onDidBlur.fire(); }));
-            if (_onDidFocus) {
-                disposable.addDisposables(_onDidFocus(function () { return _this._onDidFocus.fire(); }));
-            }
-            if (_onDidBlur) {
-                disposable.addDisposables(_onDidBlur(function () { return _this._onDidBlur.fire(); }));
-            }
             this.disposable.value = disposable;
         }
     };

package/dist/cjs/dockview/dockviewComponent.d.ts

@@ -3,7 +3,7 @@ import { Position } from '../dnd/droptarget';
 import { DockviewPanel, IDockviewPanel } from './dockviewPanel';
 import { Event, Emitter } from '../events';
 import { IWatermarkRenderer, GroupviewPanelState } from './types';
-import { AddGroupOptions, AddPanelOptions, DockviewComponentOptions, MovementOptions } from './options';
+import { AddGroupOptions, AddPanelOptions, DockviewComponentOptions, DockviewDndOverlayEvent, DockviewOptions, MovementOptions } from './options';
 import { BaseGrid, IBaseGrid } from '../gridview/baseComponentGridview';
 import { DockviewApi } from '../api/component.api';
 import { Orientation } from '../splitview/splitview';
@@ -42,7 +42,6 @@ export interface SerializedDockview {
     floatingGroups?: SerializedFloatingGroup[];
     popoutGroups?: SerializedPopoutGroup[];
 }
-export type DockviewComponentUpdateOptions = Pick<DockviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents' | 'tabComponents' | 'frameworkTabComponents' | 'showDndOverlay' | 'watermarkFrameworkComponent' | 'defaultTabComponent' | 'createLeftHeaderActionsElement' | 'createRightHeaderActionsElement' | 'createPrefixHeaderActionsElement' | 'disableFloatingGroups' | 'floatingGroupBounds' | 'rootOverlayModel' | 'disableDnd'>;
 type MoveGroupOptions = {
     from: {
         group: DockviewGroupPanel;
@@ -80,8 +79,9 @@ export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
     readonly onDidRemoveGroup: Event<DockviewGroupPanel>;
     readonly onDidAddGroup: Event<DockviewGroupPanel>;
     readonly onDidActiveGroupChange: Event<DockviewGroupPanel | undefined>;
+    readonly onUnhandledDragOverEvent: Event<DockviewDndOverlayEvent>;
     readonly options: DockviewComponentOptions;
-    updateOptions(options: DockviewComponentUpdateOptions): void;
+    updateOptions(options: DockviewOptions): void;
     moveGroupOrPanel(options: MoveGroupOrPanelOptions): void;
     moveGroup(options: MoveGroupOptions): void;
     doSetGroupActive: (group: DockviewGroupPanel, skipFocus?: boolean) => void;
@@ -132,6 +132,8 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     readonly onWillDrop: Event<DockviewWillDropEvent>;
     private readonly _onWillShowOverlay;
     readonly onWillShowOverlay: Event<WillShowOverlayLocationEvent>;
+    private readonly _onUnhandledDragOverEvent;
+    readonly onUnhandledDragOverEvent: Event<DockviewDndOverlayEvent>;
     private readonly _onDidRemovePanel;
     readonly onDidRemovePanel: Event<IDockviewPanel>;
     private readonly _onDidAddPanel;
@@ -184,7 +186,7 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
         skipActiveGroup?: boolean;
     }): void;
     private orthogonalize;
-    updateOptions(options: DockviewComponentUpdateOptions): void;
+    updateOptions(options: Partial<DockviewComponentOptions>): void;
     layout(width: number, height: number, forceResize?: boolean | undefined): void;
     focus(): void;
     getGroupPanel(id: string): IDockviewPanel | undefined;

package/dist/cjs/dockview/dockviewComponent.js

@@ -72,7 +72,6 @@ var events_1 = require("../events");
 var watermark_1 = require("./components/watermark/watermark");
 var math_1 = require("../math");
 var deserializer_1 = require("./deserializer");
-var componentFactory_1 = require("../panel/componentFactory");
 var options_1 = require("./options");
 var baseComponentGridview_1 = require("../gridview/baseComponentGridview");
 var component_api_1 = require("../api/component.api");
@@ -189,11 +188,13 @@ function typeValidate(data) {
 var DockviewComponent = /** @class */ (function (_super) {
     __extends(DockviewComponent, _super);
     function DockviewComponent(options) {
-        var _a, _b;
+        var _a;
         var _this = _super.call(this, {
             proportionalLayout: true,
-            orientation: (_a = options.orientation) !== null && _a !== void 0 ? _a : splitview_1.Orientation.HORIZONTAL,
-            styles: options.styles,
+            orientation: splitview_1.Orientation.HORIZONTAL,
+            styles: options.hideBorders
+                ? { separatorBorder: 'transparent' }
+                : undefined,
             parentElement: options.parentElement,
             disableAutoResizing: options.disableAutoResizing,
             locked: options.locked,
@@ -211,6 +212,8 @@ var DockviewComponent = /** @class */ (function (_super) {
         _this.onWillDrop = _this._onWillDrop.event;
         _this._onWillShowOverlay = new events_1.Emitter();
         _this.onWillShowOverlay = _this._onWillShowOverlay.event;
+        _this._onUnhandledDragOverEvent = new events_1.Emitter();
+        _this.onUnhandledDragOverEvent = _this._onUnhandledDragOverEvent.event;
         _this._onDidRemovePanel = new events_1.Emitter();
         _this.onDidRemovePanel = _this._onDidRemovePanel.event;
         _this._onDidAddPanel = new events_1.Emitter();
@@ -236,7 +239,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         _this.overlayRenderContainer = new overlayRenderContainer_1.OverlayRenderContainer(gready);
         (0, dom_1.toggleClass)(_this.gridview.element, 'dv-dockview', true);
         (0, dom_1.toggleClass)(_this.element, 'dv-debug', !!options.debug);
-        _this.addDisposables(_this.overlayRenderContainer, _this._onWillDragPanel, _this._onWillDragGroup, _this._onWillShowOverlay, _this._onDidActivePanelChange, _this._onDidAddPanel, _this._onDidRemovePanel, _this._onDidLayoutFromJSON, _this._onDidDrop, _this._onWillDrop, _this._onDidMovePanel, _this._onDidAddGroup, _this._onDidRemoveGroup, _this._onDidActiveGroupChange, _this.onDidAdd(function (event) {
+        _this.addDisposables(_this.overlayRenderContainer, _this._onWillDragPanel, _this._onWillDragGroup, _this._onWillShowOverlay, _this._onDidActivePanelChange, _this._onDidAddPanel, _this._onDidRemovePanel, _this._onDidLayoutFromJSON, _this._onDidDrop, _this._onWillDrop, _this._onDidMovePanel, _this._onDidAddGroup, _this._onDidRemoveGroup, _this._onDidActiveGroupChange, _this._onUnhandledDragOverEvent, _this.onDidAdd(function (event) {
             if (!_this._moving) {
                 _this._onDidAddGroup.fire(event);
             }
@@ -284,22 +287,6 @@ var DockviewComponent = /** @class */ (function (_super) {
             }
         }));
         _this._options = options;
-        if (!_this.options.components) {
-            _this.options.components = {};
-        }
-        if (!_this.options.frameworkComponents) {
-            _this.options.frameworkComponents = {};
-        }
-        if (!_this.options.frameworkTabComponents) {
-            _this.options.frameworkTabComponents = {};
-        }
-        if (!_this.options.tabComponents) {
-            _this.options.tabComponents = {};
-        }
-        if (!_this.options.watermarkComponent &&
-            !_this.options.watermarkFrameworkComponent) {
-            _this.options.watermarkComponent = watermark_1.Watermark;
-        }
         _this._rootDropTarget = new droptarget_1.Droptarget(_this.element, {
             canDisplayOverlay: function (event, position) {
                 var data = (0, dataTransfer_1.getPanelData)();
@@ -314,26 +301,20 @@ var DockviewComponent = /** @class */ (function (_super) {
                     }
                     return true;
                 }
-                if (_this.options.showDndOverlay) {
-                    if (position === 'center' && _this.gridview.length !== 0) {
-                        /**
-                         * for external events only show the four-corner drag overlays, disable
-                         * the center position so that external drag events can fall through to the group
-                         * and panel drop target handlers
-                         */
-                        return false;
-                    }
-                    return _this.options.showDndOverlay({
-                        nativeEvent: event,
-                        position: position,
-                        target: 'edge',
-                        getData: dataTransfer_1.getPanelData,
-                    });
+                if (position === 'center' && _this.gridview.length !== 0) {
+                    /**
+                     * for external events only show the four-corner drag overlays, disable
+                     * the center position so that external drag events can fall through to the group
+                     * and panel drop target handlers
+                     */
+                    return false;
                 }
-                return false;
+                var firedEvent = new options_1.DockviewUnhandledDragOverEvent(event, 'edge', position, dataTransfer_1.getPanelData);
+                _this._onUnhandledDragOverEvent.fire(firedEvent);
+                return firedEvent.isAccepted;
             },
             acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
-            overlayModel: (_b = _this.options.rootOverlayModel) !== null && _b !== void 0 ? _b : DEFAULT_ROOT_OVERLAY_MODEL,
+            overlayModel: (_a = _this.options.rootOverlayModel) !== null && _a !== void 0 ? _a : DEFAULT_ROOT_OVERLAY_MODEL,
         });
         _this.addDisposables(_this._rootDropTarget, _this._rootDropTarget.onWillShowOverlay(function (event) {
             if (_this.gridview.length > 0 && event.position === 'center') {
@@ -620,7 +601,9 @@ var DockviewComponent = /** @class */ (function (_super) {
                     skipSetActiveGroup: true,
                 });
             });
-            group.model.openPanel(item, { skipSetGroupActive: true });
+            this.movingLock(function () {
+                return group.model.openPanel(item, { skipSetGroupActive: true });
+            });
         }
         else {
             group = item;
@@ -695,7 +678,7 @@ var DockviewComponent = /** @class */ (function (_super) {
             // this is either a resize or a move
             // to inform the panels .layout(...) the group with it's current size
             // don't care about resize since the above watcher handles that
-            group.layout(group.height, group.width);
+            group.layout(group.width, group.height);
         }), overlay.onDidChangeEnd(function () {
             _this._bufferOnDidLayoutChange.fire();
         }), group.onDidChange(function (event) {
@@ -753,16 +736,11 @@ var DockviewComponent = /** @class */ (function (_super) {
     DockviewComponent.prototype.updateOptions = function (options) {
         var e_3, _a;
         var _b, _c;
-        var changed_orientation = typeof options.orientation === 'string' &&
-            this.gridview.orientation !== options.orientation;
-        var changed_floatingGroupBounds = options.floatingGroupBounds !== undefined &&
+        var changed_floatingGroupBounds = 'floatingGroupBounds' in options &&
             options.floatingGroupBounds !== this.options.floatingGroupBounds;
-        var changed_rootOverlayOptions = options.rootOverlayModel !== undefined &&
+        var changed_rootOverlayOptions = 'rootOverlayModel' in options &&
             options.rootOverlayModel !== this.options.rootOverlayModel;
         this._options = __assign(__assign({}, this.options), options);
-        if (changed_orientation) {
-            this.gridview.orientation = options.orientation;
-        }
         if (changed_floatingGroupBounds) {
             try {
                 for (var _d = __values(this._floatingGroups), _e = _d.next(); !_e.done; _e = _d.next()) {
@@ -1178,7 +1156,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                     ? this.getGroupPanel(options.position.referencePanel)
                     : options.position.referencePanel;
                 if (!referencePanel) {
-                    throw new Error("referencePanel ".concat(options.position.referencePanel, " does not exist"));
+                    throw new Error("referencePanel '".concat(options.position.referencePanel, "' does not exist"));
                 }
                 referenceGroup = this.findGroup(referencePanel);
             }
@@ -1188,14 +1166,19 @@ var DockviewComponent = /** @class */ (function (_super) {
                         ? (_a = this._groups.get(options.position.referenceGroup)) === null || _a === void 0 ? void 0 : _a.value
                         : options.position.referenceGroup;
                 if (!referenceGroup) {
-                    throw new Error("referencePanel ".concat(options.position.referenceGroup, " does not exist"));
+                    throw new Error("referenceGroup '".concat(options.position.referenceGroup, "' does not exist"));
                 }
             }
             else {
                 var group = this.orthogonalize((0, droptarget_1.directionToPosition)(options.position.direction));
                 var panel_1 = this.createPanel(options, group);
-                group.model.openPanel(panel_1);
-                this.doSetGroupAndPanelActive(group);
+                group.model.openPanel(panel_1, {
+                    skipSetActive: options.inactive,
+                    skipSetGroupActive: options.inactive,
+                });
+                if (!options.inactive) {
+                    this.doSetGroupAndPanelActive(group);
+                }
                 return panel_1;
             }
         }
@@ -1218,43 +1201,64 @@ var DockviewComponent = /** @class */ (function (_super) {
                     skipActiveGroup: true,
                 });
                 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 {
                 var location_1 = (0, gridview_1.getGridLocation)(referenceGroup.element);
                 var relativeLocation = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, location_1, target);
                 var 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) {
             var group = this.createGroup();
             this._onDidAddGroup.fire(group);
-            var o = typeof options.floating === 'object' &&
+            var 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 {
             var 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;
     };
@@ -1279,12 +1283,10 @@ var DockviewComponent = /** @class */ (function (_super) {
         }
     };
     DockviewComponent.prototype.createWatermarkComponent = function () {
-        var _a;
-        return (0, componentFactory_1.createComponent)('watermark-id', 'watermark-name', this.options.watermarkComponent
-            ? { 'watermark-name': this.options.watermarkComponent }
-            : {}, this.options.watermarkFrameworkComponent
-            ? { 'watermark-name': this.options.watermarkFrameworkComponent }
-            : {}, (_a = this.options.frameworkComponentFactory) === null || _a === void 0 ? void 0 : _a.watermark);
+        if (this.options.createWatermarkComponent) {
+            return this.options.createWatermarkComponent();
+        }
+        return new watermark_1.Watermark();
     };
     DockviewComponent.prototype.updateWatermark = function () {
         var _a, _b;
@@ -1704,6 +1706,8 @@ var DockviewComponent = /** @class */ (function (_super) {
                     return;
                 }
                 _this._onWillShowOverlay.fire(event);
+            }), view.model.onUnhandledDragOverEvent(function (event) {
+                _this._onUnhandledDragOverEvent.fire(event);
             }), view.model.onDidAddPanel(function (event) {
                 if (_this._moving) {
                     return;

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

@@ -9,6 +9,7 @@ import { IPanel, PanelInitParameters, PanelUpdateEvent, Parameters } from '../pa
 import { GroupDragEvent, TabDragEvent } from './components/titlebar/tabsContainer';
 import { DockviewGroupPanel } from './dockviewGroupPanel';
 import { IDockviewPanel } from './dockviewPanel';
+import { DockviewDndOverlayEvent } from './options';
 import { OverlayRenderContainer } from '../overlayRenderContainer';
 import { TitleEvent } from '../api/dockviewPanelApi';
 interface GroupMoveEvent {
@@ -181,6 +182,8 @@ export declare class DockviewGroupPanelModel extends CompositeDisposable impleme
     readonly onDidRemovePanel: Event<DockviewGroupChangeEvent>;
     private readonly _onDidActivePanelChange;
     readonly onDidActivePanelChange: Event<DockviewGroupChangeEvent>;
+    private readonly _onUnhandledDragOverEvent;
+    readonly onUnhandledDragOverEvent: Event<DockviewDndOverlayEvent>;
     private readonly _api;
     get element(): HTMLElement;
     get activePanel(): IDockviewPanel | undefined;

package/dist/cjs/dockview/dockviewGroupPanelModel.js

@@ -59,6 +59,7 @@ var events_1 = require("../events");
 var lifecycle_1 = require("../lifecycle");
 var content_1 = require("./components/panel/content");
 var tabsContainer_1 = require("./components/titlebar/tabsContainer");
+var options_1 = require("./options");
 var DockviewDidDropEvent = /** @class */ (function (_super) {
     __extends(DockviewDidDropEvent, _super);
     function DockviewDidDropEvent(options) {
@@ -229,6 +230,8 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         _this.onDidRemovePanel = _this._onDidRemovePanel.event;
         _this._onDidActivePanelChange = new events_1.Emitter();
         _this.onDidActivePanelChange = _this._onDidActivePanelChange.event;
+        _this._onUnhandledDragOverEvent = new events_1.Emitter();
+        _this.onUnhandledDragOverEvent = _this._onUnhandledDragOverEvent.event;
         _this._overwriteRenderContainer = null;
         (0, dom_1.toggleClass)(_this.container, 'groupview', true);
         _this._api = new component_api_1.DockviewApi(_this.accessor);
@@ -259,7 +262,7 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
                 group: _this.groupPanel,
                 getData: dataTransfer_1.getPanelData,
             }));
-        }), _this._onMove, _this._onDidChange, _this._onDidDrop, _this._onWillDrop, _this._onDidAddPanel, _this._onDidRemovePanel, _this._onDidActivePanelChange);
+        }), _this._onMove, _this._onDidChange, _this._onDidDrop, _this._onWillDrop, _this._onDidAddPanel, _this._onDidRemovePanel, _this._onDidActivePanelChange, _this._onUnhandledDragOverEvent);
         return _this;
     }
     Object.defineProperty(DockviewGroupPanelModel.prototype, "element", {
@@ -411,33 +414,36 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         // correctly initialized
         this.setActive(this.isActive, true);
         this.updateContainer();
-        if (this.accessor.options.createRightHeaderActionsElement) {
+        if (this.accessor.options.createRightHeaderActionComponent) {
             this._rightHeaderActions =
-                this.accessor.options.createRightHeaderActionsElement(this.groupPanel);
+                this.accessor.options.createRightHeaderActionComponent(this.groupPanel);
             this.addDisposables(this._rightHeaderActions);
             this._rightHeaderActions.init({
                 containerApi: this._api,
                 api: this.groupPanel.api,
+                group: this.groupPanel,
             });
             this.tabsContainer.setRightActionsElement(this._rightHeaderActions.element);
         }
-        if (this.accessor.options.createLeftHeaderActionsElement) {
+        if (this.accessor.options.createLeftHeaderActionComponent) {
             this._leftHeaderActions =
-                this.accessor.options.createLeftHeaderActionsElement(this.groupPanel);
+                this.accessor.options.createLeftHeaderActionComponent(this.groupPanel);
             this.addDisposables(this._leftHeaderActions);
             this._leftHeaderActions.init({
                 containerApi: this._api,
                 api: this.groupPanel.api,
+                group: this.groupPanel,
             });
             this.tabsContainer.setLeftActionsElement(this._leftHeaderActions.element);
         }
-        if (this.accessor.options.createPrefixHeaderActionsElement) {
+        if (this.accessor.options.createPrefixHeaderActionComponent) {
             this._prefixHeaderActions =
-                this.accessor.options.createPrefixHeaderActionsElement(this.groupPanel);
+                this.accessor.options.createPrefixHeaderActionComponent(this.groupPanel);
             this.addDisposables(this._prefixHeaderActions);
             this._prefixHeaderActions.init({
                 containerApi: this._api,
                 api: this.groupPanel.api,
+                group: this.groupPanel,
             });
             this.tabsContainer.setPrefixActionsElement(this._prefixHeaderActions.element);
         }
@@ -650,7 +656,8 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         this.tabsContainer.delete(panel.id);
         this._panels.splice(index, 1);
         if (this.mostRecentlyUsed.includes(panel)) {
-            this.mostRecentlyUsed.splice(this.mostRecentlyUsed.indexOf(panel), 1);
+            var index_1 = this.mostRecentlyUsed.indexOf(panel);
+            this.mostRecentlyUsed.splice(index_1, 1);
         }
         var disposable = this._panelDisposables.get(panel.id);
         if (disposable) {
@@ -733,17 +740,9 @@ var DockviewGroupPanelModel = /** @class */ (function (_super) {
         }
     };
     DockviewGroupPanelModel.prototype.canDisplayOverlay = function (event, position, target) {
-        // custom overlay handler
-        if (this.accessor.options.showDndOverlay) {
-            return this.accessor.options.showDndOverlay({
-                nativeEvent: event,
-                target: target,
-                group: this.accessor.getPanel(this.id),
-                position: position,
-                getData: dataTransfer_1.getPanelData,
-            });
-        }
-        return false;
+        var firedEvent = new options_1.DockviewUnhandledDragOverEvent(event, target, position, dataTransfer_1.getPanelData, this.accessor.getPanel(this.id));
+        this._onUnhandledDragOverEvent.fire(firedEvent);
+        return firedEvent.isAccepted;
     };
     DockviewGroupPanelModel.prototype.handleDropEvent = function (type, event, position, index) {
         if (this.locked === 'no-drop-target') {