dockview-core 1.11.0 → 1.13.0

package/dist/esm/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/esm/api/component.api.js

@@ -541,6 +541,9 @@ export class DockviewApi {
     get onWillDragPanel() {
         return this.component.onWillDragPanel;
     }
+    get onUnhandledDragOverEvent() {
+        return this.component.onUnhandledDragOverEvent;
+    }
     /**
      * All panel objects.
      */

package/dist/esm/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/esm/api/dockviewGroupPanelApi.js

@@ -1,5 +1,6 @@
 import { positionToDirection } from '../dnd/droptarget';
 import { Emitter } from '../events';
+import { MutableDisposable } from '../lifecycle';
 import { GridviewPanelApiImpl } from './gridviewPanelApi';
 // TODO find a better way to initialize and avoid needing null checks
 const NOT_INITIALIZED_MESSAGE = 'DockviewGroupPanelApiImpl not initialized';
@@ -13,9 +14,12 @@ export class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
     constructor(id, accessor) {
         super(id, '__dockviewgroup__');
         this.accessor = accessor;
+        this._mutableDisposable = new MutableDisposable();
         this._onDidLocationChange = new Emitter();
         this.onDidLocationChange = this._onDidLocationChange.event;
-        this.addDisposables(this._onDidLocationChange);
+        this._onDidActivePanelChange = new Emitter();
+        this.onDidActivePanelChange = this._onDidActivePanelChange.event;
+        this.addDisposables(this._onDidLocationChange, this._onDidActivePanelChange, this._mutableDisposable);
     }
     close() {
         if (!this._group) {
@@ -73,5 +77,18 @@ export class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
     }
     initialize(group) {
         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(() => {
+            this._mutableDisposable.value =
+                this._group.model.onDidActivePanelChange((event) => {
+                    this._onDidActivePanelChange.fire(event);
+                });
+        });
     }
 }

package/dist/esm/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/esm/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/esm/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/esm/dnd/droptarget.js

@@ -97,6 +97,10 @@ export class Droptarget extends CompositeDisposable {
                     this.removeDropTarget();
                     return;
                 }
+                if (!this.options.canDisplayOverlay(e, quadrant)) {
+                    this.removeDropTarget();
+                    return;
+                }
                 const willShowOverlayEvent = new WillShowOverlayEvent({
                     nativeEvent: e,
                     position: quadrant,
@@ -110,16 +114,6 @@ export class Droptarget extends CompositeDisposable {
                     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/esm/dockview/components/panel/content.js

@@ -72,7 +72,7 @@ export class ContentContainer extends CompositeDisposable {
         this.panel = panel;
         let container;
         switch (panel.api.renderer) {
-            case 'onlyWhenVisibile':
+            case 'onlyWhenVisible':
                 this.group.renderContainer.detatch(panel);
                 if (this.panel) {
                     if (doRender) {
@@ -92,17 +92,9 @@ export class ContentContainer extends CompositeDisposable {
                 break;
         }
         if (doRender) {
-            const _onDidFocus = panel.view.content.onDidFocus;
-            const _onDidBlur = panel.view.content.onDidBlur;
             const focusTracker = trackFocus(container);
             const disposable = new CompositeDisposable();
             disposable.addDisposables(focusTracker, focusTracker.onDidFocus(() => this._onDidFocus.fire()), focusTracker.onDidBlur(() => this._onDidBlur.fire()));
-            if (_onDidFocus) {
-                disposable.addDisposables(_onDidFocus(() => this._onDidFocus.fire()));
-            }
-            if (_onDidBlur) {
-                disposable.addDisposables(_onDidBlur(() => this._onDidBlur.fire()));
-            }
             this.disposable.value = disposable;
         }
     }
@@ -118,7 +110,7 @@ export class ContentContainer extends CompositeDisposable {
     closePanel() {
         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/esm/dockview/components/titlebar/tabsContainer.js

@@ -4,6 +4,7 @@ import { Tab } from '../tab/tab';
 import { VoidContainer } from './voidContainer';
 import { toggleClass } from '../../../dom';
 import { WillShowOverlayLocationEvent, } from '../../dockviewGroupPanelModel';
+import { getPanelData } from '../../../dnd/dataTransfer';
 export class TabsContainer extends CompositeDisposable {
     get panels() {
         return this.tabs.map((_) => _.value.panel.id);
@@ -128,6 +129,10 @@ export class TabsContainer extends CompositeDisposable {
         }), this.voidContainer.onWillShowOverlay((event) => {
             this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
                 kind: 'header_space',
+                panel: this.group.activePanel,
+                api: this.accessor.api,
+                group: this.group,
+                getData: getPanelData,
             }));
         }), addDisposableListener(this.voidContainer.element, 'mousedown', (event) => {
             const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
@@ -225,7 +230,13 @@ export class TabsContainer extends CompositeDisposable {
                 index: this.tabs.findIndex((x) => x.value === tab),
             });
         }), tab.onWillShowOverlay((event) => {
-            this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, { kind: 'tab' }));
+            this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
+                kind: 'tab',
+                panel: this.group.activePanel,
+                api: this.accessor.api,
+                group: this.group,
+                getData: getPanelData,
+            }));
         }));
         const value = { value: tab, disposable };
         this.addTab(value, index);

package/dist/esm/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/esm/dockview/dockviewComponent.js

@@ -7,8 +7,7 @@ import { Event, Emitter, addDisposableWindowListener } from '../events';
 import { Watermark } from './components/watermark/watermark';
 import { sequentialNumberGenerator } from '../math';
 import { DefaultDockviewDeserialzier } from './deserializer';
-import { createComponent } from '../panel/componentFactory';
-import { isGroupOptionsWithGroup, isGroupOptionsWithPanel, isPanelOptionsWithGroup, isPanelOptionsWithPanel, } from './options';
+import { DockviewUnhandledDragOverEvent, isGroupOptionsWithGroup, isGroupOptionsWithPanel, isPanelOptionsWithGroup, isPanelOptionsWithPanel, } from './options';
 import { BaseGrid, toTarget, } from '../gridview/baseComponentGridview';
 import { DockviewApi } from '../api/component.api';
 import { Orientation, Sizing } from '../splitview/splitview';
@@ -141,14 +140,19 @@ export class DockviewComponent extends BaseGrid {
     }
     get renderer() {
         var _a;
-        return (_a = this.options.defaultRenderer) !== null && _a !== void 0 ? _a : 'onlyWhenVisibile';
+        return (_a = this.options.defaultRenderer) !== null && _a !== void 0 ? _a : 'onlyWhenVisible';
+    }
+    get api() {
+        return this._api;
     }
     constructor(options) {
-        var _a, _b;
+        var _a;
         super({
             proportionalLayout: true,
-            orientation: (_a = options.orientation) !== null && _a !== void 0 ? _a : Orientation.HORIZONTAL,
-            styles: options.styles,
+            orientation: Orientation.HORIZONTAL,
+            styles: options.hideBorders
+                ? { separatorBorder: 'transparent' }
+                : undefined,
             parentElement: options.parentElement,
             disableAutoResizing: options.disableAutoResizing,
             locked: options.locked,
@@ -166,6 +170,8 @@ export class DockviewComponent extends BaseGrid {
         this.onWillDrop = this._onWillDrop.event;
         this._onWillShowOverlay = new Emitter();
         this.onWillShowOverlay = this._onWillShowOverlay.event;
+        this._onUnhandledDragOverEvent = new Emitter();
+        this.onUnhandledDragOverEvent = this._onUnhandledDragOverEvent.event;
         this._onDidRemovePanel = new Emitter();
         this.onDidRemovePanel = this._onDidRemovePanel.event;
         this._onDidAddPanel = new Emitter();
@@ -191,7 +197,7 @@ export class DockviewComponent extends BaseGrid {
         this.overlayRenderContainer = new OverlayRenderContainer(gready);
         toggleClass(this.gridview.element, 'dv-dockview', true);
         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((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((event) => {
             if (!this._moving) {
                 this._onDidAddGroup.fire(event);
             }
@@ -218,22 +224,6 @@ export class DockviewComponent extends BaseGrid {
             }
         }));
         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;
-        }
         this._rootDropTarget = new Droptarget(this.element, {
             canDisplayOverlay: (event, position) => {
                 const data = getPanelData();
@@ -248,26 +238,20 @@ export class DockviewComponent extends BaseGrid {
                     }
                     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: 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;
+                const firedEvent = new DockviewUnhandledDragOverEvent(event, 'edge', position, 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((event) => {
             if (this.gridview.length > 0 && event.position === 'center') {
@@ -276,6 +260,10 @@ export class DockviewComponent extends BaseGrid {
             }
             this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
                 kind: 'edge',
+                panel: undefined,
+                api: this._api,
+                group: undefined,
+                getData: getPanelData,
             }));
         }), this._rootDropTarget.onDrop((event) => {
             var _a;
@@ -487,7 +475,7 @@ export class DockviewComponent extends BaseGrid {
                 skipDispose: true,
                 skipSetActiveGroup: true,
             }));
-            group.model.openPanel(item, { skipSetGroupActive: true });
+            this.movingLock(() => group.model.openPanel(item, { skipSetGroupActive: true }));
         }
         else {
             group = item;
@@ -560,7 +548,7 @@ export class DockviewComponent extends BaseGrid {
             // 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(() => {
             this._bufferOnDidLayoutChange.fire();
         }), group.onDidChange((event) => {
@@ -617,16 +605,11 @@ export class DockviewComponent extends BaseGrid {
     }
     updateOptions(options) {
         var _a, _b;
-        const changed_orientation = typeof options.orientation === 'string' &&
-            this.gridview.orientation !== options.orientation;
-        const changed_floatingGroupBounds = options.floatingGroupBounds !== undefined &&
+        const changed_floatingGroupBounds = 'floatingGroupBounds' in options &&
             options.floatingGroupBounds !== this.options.floatingGroupBounds;
-        const changed_rootOverlayOptions = options.rootOverlayModel !== undefined &&
+        const changed_rootOverlayOptions = 'rootOverlayModel' in options &&
             options.rootOverlayModel !== this.options.rootOverlayModel;
         this._options = Object.assign(Object.assign({}, this.options), options);
-        if (changed_orientation) {
-            this.gridview.orientation = options.orientation;
-        }
         if (changed_floatingGroupBounds) {
             for (const group of this._floatingGroups) {
                 switch (this.options.floatingGroupBounds) {
@@ -914,7 +897,7 @@ export class DockviewComponent extends BaseGrid {
                     ? this.getGroupPanel(options.position.referencePanel)
                     : options.position.referencePanel;
                 if (!referencePanel) {
-                    throw new Error(`referencePanel ${options.position.referencePanel} does not exist`);
+                    throw new Error(`referencePanel '${options.position.referencePanel}' does not exist`);
                 }
                 referenceGroup = this.findGroup(referencePanel);
             }
@@ -924,14 +907,19 @@ export class DockviewComponent extends BaseGrid {
                         ? (_a = this._groups.get(options.position.referenceGroup)) === null || _a === void 0 ? void 0 : _a.value
                         : options.position.referenceGroup;
                 if (!referenceGroup) {
-                    throw new Error(`referencePanel ${options.position.referenceGroup} does not exist`);
+                    throw new Error(`referenceGroup '${options.position.referenceGroup}' does not exist`);
                 }
             }
             else {
                 const group = this.orthogonalize(directionToPosition(options.position.direction));
                 const panel = this.createPanel(options, group);
-                group.model.openPanel(panel);
-                this.doSetGroupAndPanelActive(group);
+                group.model.openPanel(panel, {
+                    skipSetActive: options.inactive,
+                    skipSetGroupActive: options.inactive,
+                });
+                if (!options.inactive) {
+                    this.doSetGroupAndPanelActive(group);
+                }
                 return panel;
             }
         }
@@ -954,43 +942,64 @@ export class DockviewComponent extends BaseGrid {
                     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 {
                 const location = getGridLocation(referenceGroup.element);
                 const relativeLocation = getRelativeLocation(this.gridview.orientation, location, target);
                 const group = this.createGroupAtLocation(relativeLocation);
                 panel = this.createPanel(options, group);
-                group.model.openPanel(panel);
-                this.doSetGroupAndPanelActive(group);
+                group.model.openPanel(panel, {
+                    skipSetActive: options.inactive,
+                    skipSetGroupActive: options.inactive,
+                });
+                if (!options.inactive) {
+                    this.doSetGroupAndPanelActive(group);
+                }
             }
         }
         else if (options.floating) {
             const group = this.createGroup();
             this._onDidAddGroup.fire(group);
-            const o = typeof options.floating === 'object' &&
+            const coordinates = typeof options.floating === 'object' &&
                 options.floating !== null
                 ? options.floating
                 : {};
-            this.addFloatingGroup(group, o, {
+            this.addFloatingGroup(group, coordinates, {
                 inDragMode: false,
                 skipRemoveGroup: true,
                 skipActiveGroup: true,
             });
             panel = this.createPanel(options, group);
-            group.model.openPanel(panel);
+            group.model.openPanel(panel, {
+                skipSetActive: options.inactive,
+                skipSetGroupActive: options.inactive,
+            });
         }
         else {
             const group = this.createGroupAtLocation();
             panel = this.createPanel(options, group);
-            group.model.openPanel(panel);
-            this.doSetGroupAndPanelActive(group);
+            group.model.openPanel(panel, {
+                skipSetActive: options.inactive,
+                skipSetGroupActive: options.inactive,
+            });
+            if (!options.inactive) {
+                this.doSetGroupAndPanelActive(group);
+            }
         }
         return panel;
     }
@@ -1014,12 +1023,10 @@ export class DockviewComponent extends BaseGrid {
         }
     }
     createWatermarkComponent() {
-        var _a;
-        return 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();
     }
     updateWatermark() {
         var _a, _b;
@@ -1400,6 +1407,8 @@ export class DockviewComponent extends BaseGrid {
                     return;
                 }
                 this._onWillShowOverlay.fire(event);
+            }), view.model.onUnhandledDragOverEvent((event) => {
+                this._onUnhandledDragOverEvent.fire(event);
             }), view.model.onDidAddPanel((event) => {
                 if (this._moving) {
                     return;

package/dist/esm/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;