dockview-core 1.11.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/api/dockviewPanelApi.d.ts

@@ -19,6 +19,12 @@ export interface ActiveGroupEvent {
 export interface GroupChangedEvent {
 }
 export interface DockviewPanelApi extends Omit<GridviewPanelApi, 'setVisible' | 'onDidConstraintsChange' | 'setConstraints'> {
+    /**
+     * The id of the tab component renderer
+     *
+     * Undefined if no custom tab renderer is provided
+     */
+    readonly tabComponent: string | undefined;
     readonly group: DockviewGroupPanel;
     readonly isGroupActive: boolean;
     readonly renderer: DockviewPanelRenderer;

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

@@ -23,6 +23,10 @@ export interface PanelApi {
     setActive(): void;
     setVisible(isVisible: boolean): void;
     updateParameters(parameters: Parameters): void;
+    /**
+     * The id of the component renderer
+     */
+    readonly component: string;
     /**
      * The id of the panel that would have been assigned when the panel was created
      */

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

@@ -98,7 +98,7 @@ var ContentContainer = /** @class */ (function (_super) {
         this.panel = panel;
         var container;
         switch (panel.api.renderer) {
-            case 'onlyWhenVisibile':
+            case 'onlyWhenVisible':
                 this.group.renderContainer.detatch(panel);
                 if (this.panel) {
                     if (doRender) {
@@ -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;
         }
     };
@@ -144,7 +136,7 @@ var ContentContainer = /** @class */ (function (_super) {
     ContentContainer.prototype.closePanel = function () {
         var _a;
         if (this.panel) {
-            if (this.panel.api.renderer === 'onlyWhenVisibile') {
+            if (this.panel.api.renderer === 'onlyWhenVisible') {
                 (_a = this.panel.view.content.element.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this.panel.view.content.element);
             }
         }

package/dist/cjs/dockview/components/titlebar/tabsContainer.js

@@ -58,6 +58,7 @@ var tab_1 = require("../tab/tab");
 var voidContainer_1 = require("./voidContainer");
 var dom_1 = require("../../../dom");
 var dockviewGroupPanelModel_1 = require("../../dockviewGroupPanelModel");
+var dataTransfer_1 = require("../../../dnd/dataTransfer");
 var TabsContainer = /** @class */ (function (_super) {
     __extends(TabsContainer, _super);
     function TabsContainer(accessor, group) {
@@ -113,6 +114,10 @@ var TabsContainer = /** @class */ (function (_super) {
         }), _this.voidContainer.onWillShowOverlay(function (event) {
             _this._onWillShowOverlay.fire(new dockviewGroupPanelModel_1.WillShowOverlayLocationEvent(event, {
                 kind: 'header_space',
+                panel: _this.group.activePanel,
+                api: _this.accessor.api,
+                group: _this.group,
+                getData: dataTransfer_1.getPanelData,
             }));
         }), (0, events_1.addDisposableListener)(_this.voidContainer.element, 'mousedown', function (event) {
             var isFloatingGroupsEnabled = !_this.accessor.options.disableFloatingGroups;
@@ -298,7 +303,13 @@ var TabsContainer = /** @class */ (function (_super) {
                 index: _this.tabs.findIndex(function (x) { return x.value === tab; }),
             });
         }), tab.onWillShowOverlay(function (event) {
-            _this._onWillShowOverlay.fire(new dockviewGroupPanelModel_1.WillShowOverlayLocationEvent(event, { kind: 'tab' }));
+            _this._onWillShowOverlay.fire(new dockviewGroupPanelModel_1.WillShowOverlayLocationEvent(event, {
+                kind: 'tab',
+                panel: _this.group.activePanel,
+                api: _this.accessor.api,
+                group: _this.group,
+                getData: dataTransfer_1.getPanelData,
+            }));
         }));
         var value = { value: tab, disposable: disposable };
         this.addTab(value, index);

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

@@ -3,8 +3,9 @@ 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';
 import { GroupOptions, GroupPanelViewState, DockviewDidDropEvent, DockviewWillDropEvent, WillShowOverlayLocationEvent } from './dockviewGroupPanelModel';
 import { DockviewGroupPanel } from './dockviewGroupPanel';
@@ -41,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;
@@ -79,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;
@@ -131,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;
@@ -156,6 +159,7 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     get options(): DockviewComponentOptions;
     get activePanel(): IDockviewPanel | undefined;
     get renderer(): DockviewPanelRenderer;
+    get api(): DockviewApi;
     constructor(options: DockviewComponentOptions);
     addPopoutGroup(itemToPopout: DockviewPanel | DockviewGroupPanel, options?: {
         skipRemoveGroup?: boolean;
@@ -182,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') {
@@ -342,6 +323,10 @@ var DockviewComponent = /** @class */ (function (_super) {
             }
             _this._onWillShowOverlay.fire(new dockviewGroupPanelModel_1.WillShowOverlayLocationEvent(event, {
                 kind: 'edge',
+                panel: undefined,
+                api: _this._api,
+                group: undefined,
+                getData: dataTransfer_1.getPanelData,
             }));
         }), _this._rootDropTarget.onDrop(function (event) {
             var _a;
@@ -428,7 +413,14 @@ var DockviewComponent = /** @class */ (function (_super) {
     Object.defineProperty(DockviewComponent.prototype, "renderer", {
         get: function () {
             var _a;
-            return (_a = this.options.defaultRenderer) !== null && _a !== void 0 ? _a : 'onlyWhenVisibile';
+            return (_a = this.options.defaultRenderer) !== null && _a !== void 0 ? _a : 'onlyWhenVisible';
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(DockviewComponent.prototype, "api", {
+        get: function () {
+            return this._api;
         },
         enumerable: false,
         configurable: true
@@ -609,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;
@@ -684,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) {
@@ -742,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()) {
@@ -1167,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);
             }
@@ -1177,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;
             }
         }
@@ -1207,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;
     };
@@ -1268,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;
@@ -1693,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 {
@@ -118,14 +119,22 @@ export type DockviewGroupLocation = {
 };
 export declare class WillShowOverlayLocationEvent implements IDockviewEvent {
     private readonly event;
-    private _kind;
+    private readonly options;
     get kind(): DockviewGroupDropLocation;
     get nativeEvent(): DragEvent;
     get position(): Position;
     get defaultPrevented(): boolean;
+    get panel(): IDockviewPanel | undefined;
+    get api(): DockviewApi;
+    get group(): DockviewGroupPanel | undefined;
     preventDefault(): void;
+    getData(): PanelTransfer | undefined;
     constructor(event: WillShowOverlayEvent, options: {
         kind: DockviewGroupDropLocation;
+        panel: IDockviewPanel | undefined;
+        api: DockviewApi;
+        group: DockviewGroupPanel | undefined;
+        getData: () => PanelTransfer | undefined;
     });
 }
 export declare class DockviewGroupPanelModel extends CompositeDisposable implements IDockviewGroupPanelModel {
@@ -173,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;