dockview-core 1.9.2 → 1.10.1

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

@@ -30,4 +30,3 @@ export interface ICompositeDragAndDropObserverCallbacks {
     onDragStart?: (e: IDraggedCompositeData) => void;
     onDragEnd?: (e: IDraggedCompositeData) => void;
 }
-//# sourceMappingURL=dnd.d.ts.map

package/dist/cjs/dnd/dnd.js

@@ -72,4 +72,3 @@ var DragAndDropObserver = /** @class */ (function (_super) {
     return DragAndDropObserver;
 }(lifecycle_1.CompositeDisposable));
 exports.DragAndDropObserver = DragAndDropObserver;
-//# sourceMappingURL=dnd.js.map

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

@@ -1,13 +1,22 @@
-import { Event } from '../events';
+import { DockviewEvent, Event } from '../events';
 import { CompositeDisposable } from '../lifecycle';
 import { DragAndDropObserver } from './dnd';
 import { Direction } from '../gridview/baseComponentGridview';
-export declare function directionToPosition(direction: Direction): Position;
-export declare function positionToDirection(position: Position): Direction;
 export interface DroptargetEvent {
     readonly position: Position;
     readonly nativeEvent: DragEvent;
 }
+export declare class WillShowOverlayEvent extends DockviewEvent implements DroptargetEvent {
+    private readonly options;
+    get nativeEvent(): DragEvent;
+    get position(): Position;
+    constructor(options: {
+        nativeEvent: DragEvent;
+        position: Position;
+    });
+}
+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 MeasuredValue = {
@@ -18,6 +27,11 @@ export type DroptargetOverlayModel = {
     size?: MeasuredValue;
     activationSize?: MeasuredValue;
 };
+export interface DroptargetOptions {
+    canDisplayOverlay: CanDisplayOverlay;
+    acceptedTargetZones: Position[];
+    overlayModel?: DroptargetOverlayModel;
+}
 export declare class Droptarget extends CompositeDisposable {
     private readonly element;
     private readonly options;
@@ -27,14 +41,12 @@ export declare class Droptarget extends CompositeDisposable {
     private _acceptedTargetZonesSet;
     private readonly _onDrop;
     readonly onDrop: Event<DroptargetEvent>;
+    private readonly _onWillShowOverlay;
+    readonly onWillShowOverlay: Event<WillShowOverlayEvent>;
     readonly dnd: DragAndDropObserver;
     private static USED_EVENT_ID;
     get state(): Position | undefined;
-    constructor(element: HTMLElement, options: {
-        canDisplayOverlay: CanDisplayOverlay;
-        acceptedTargetZones: Position[];
-        overlayModel?: DroptargetOverlayModel;
-    });
+    constructor(element: HTMLElement, options: DroptargetOptions);
     setTargetZones(acceptedTargetZones: Position[]): void;
     setOverlayModel(model: DroptargetOverlayModel): void;
     dispose(): void;
@@ -52,4 +64,3 @@ export declare class Droptarget extends CompositeDisposable {
 }
 export declare function calculateQuadrantAsPercentage(overlayType: Set<Position>, x: number, y: number, width: number, height: number, threshold: number): Position | null;
 export declare function calculateQuadrantAsPixels(overlayType: Set<Position>, x: number, y: number, width: number, height: number, threshold: number): Position | null;
-//# sourceMappingURL=droptarget.d.ts.map

package/dist/cjs/dnd/droptarget.js

@@ -15,12 +15,36 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.calculateQuadrantAsPixels = exports.calculateQuadrantAsPercentage = exports.Droptarget = exports.positionToDirection = exports.directionToPosition = void 0;
+exports.calculateQuadrantAsPixels = exports.calculateQuadrantAsPercentage = exports.Droptarget = exports.positionToDirection = exports.directionToPosition = exports.WillShowOverlayEvent = void 0;
 var dom_1 = require("../dom");
 var events_1 = require("../events");
 var lifecycle_1 = require("../lifecycle");
 var dnd_1 = require("./dnd");
 var math_1 = require("../math");
+var WillShowOverlayEvent = /** @class */ (function (_super) {
+    __extends(WillShowOverlayEvent, _super);
+    function WillShowOverlayEvent(options) {
+        var _this = _super.call(this) || this;
+        _this.options = options;
+        return _this;
+    }
+    Object.defineProperty(WillShowOverlayEvent.prototype, "nativeEvent", {
+        get: function () {
+            return this.options.nativeEvent;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(WillShowOverlayEvent.prototype, "position", {
+        get: function () {
+            return this.options.position;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return WillShowOverlayEvent;
+}(events_1.DockviewEvent));
+exports.WillShowOverlayEvent = WillShowOverlayEvent;
 function directionToPosition(direction) {
     switch (direction) {
         case 'above':
@@ -73,6 +97,8 @@ var Droptarget = /** @class */ (function (_super) {
         _this.options = options;
         _this._onDrop = new events_1.Emitter();
         _this.onDrop = _this._onDrop.event;
+        _this._onWillShowOverlay = new events_1.Emitter();
+        _this.onWillShowOverlay = _this._onWillShowOverlay.event;
         // use a set to take advantage of #<set>.has
         _this._acceptedTargetZonesSet = new Set(_this.options.acceptedTargetZones);
         _this.dnd = new dnd_1.DragAndDropObserver(_this.element, {
@@ -101,6 +127,19 @@ var Droptarget = /** @class */ (function (_super) {
                     _this.removeDropTarget();
                     return;
                 }
+                var willShowOverlayEvent = new WillShowOverlayEvent({
+                    nativeEvent: e,
+                    position: quadrant,
+                });
+                /**
+                 * Provide an opportunity to prevent the overlay appearing and in turn
+                 * any dnd behaviours
+                 */
+                _this._onWillShowOverlay.fire(willShowOverlayEvent);
+                if (willShowOverlayEvent.defaultPrevented) {
+                    _this.removeDropTarget();
+                    return;
+                }
                 if (typeof _this.options.canDisplayOverlay === 'boolean') {
                     if (!_this.options.canDisplayOverlay) {
                         _this.removeDropTarget();
@@ -143,7 +182,7 @@ var Droptarget = /** @class */ (function (_super) {
                 }
             },
         });
-        _this.addDisposables(_this._onDrop, _this.dnd);
+        _this.addDisposables(_this._onDrop, _this._onWillShowOverlay, _this.dnd);
         return _this;
     }
     Object.defineProperty(Droptarget.prototype, "state", {
@@ -204,25 +243,44 @@ var Droptarget = /** @class */ (function (_super) {
                 size = (0, math_1.clamp)(0, sizeOptions.value, height) / height;
             }
         }
-        var translate = (1 - size) / 2;
-        var scale = size;
-        var transform;
+        var box = { top: '0px', left: '0px', width: '100%', height: '100%' };
+        /**
+         * You can also achieve the overlay placement using the transform CSS property
+         * to translate and scale the element however this has the undesired effect of
+         * 'skewing' the element. Comment left here for anybody that ever revisits this.
+         *
+         * @see https://developer.mozilla.org/en-US/docs/Web/CSS/transform
+         *
+         * right
+         * translateX(${100 * (1 - size) / 2}%) scaleX(${scale})
+         *
+         * left
+         * translateX(-${100 * (1 - size) / 2}%) scaleX(${scale})
+         *
+         * top
+         * translateY(-${100 * (1 - size) / 2}%) scaleY(${scale})
+         *
+         * bottom
+         * translateY(${100 * (1 - size) / 2}%) scaleY(${scale})
+         */
         if (rightClass) {
-            transform = "translateX(".concat(100 * translate, "%) scaleX(").concat(scale, ")");
+            box.left = "".concat(100 * (1 - size), "%");
+            box.width = "".concat(100 * size, "%");
         }
         else if (leftClass) {
-            transform = "translateX(-".concat(100 * translate, "%) scaleX(").concat(scale, ")");
+            box.width = "".concat(100 * size, "%");
         }
         else if (topClass) {
-            transform = "translateY(-".concat(100 * translate, "%) scaleY(").concat(scale, ")");
+            box.height = "".concat(100 * size, "%");
         }
         else if (bottomClass) {
-            transform = "translateY(".concat(100 * translate, "%) scaleY(").concat(scale, ")");
-        }
-        else {
-            transform = '';
+            box.top = "".concat(100 * (1 - size), "%");
+            box.height = "".concat(100 * size, "%");
         }
-        this.overlayElement.style.transform = transform;
+        this.overlayElement.style.top = box.top;
+        this.overlayElement.style.left = box.left;
+        this.overlayElement.style.width = box.width;
+        this.overlayElement.style.height = box.height;
         (0, dom_1.toggleClass)(this.overlayElement, 'dv-drop-target-small-vertical', isSmallY);
         (0, dom_1.toggleClass)(this.overlayElement, 'dv-drop-target-small-horizontal', isSmallX);
         (0, dom_1.toggleClass)(this.overlayElement, 'dv-drop-target-left', isLeft);
@@ -293,4 +351,3 @@ function calculateQuadrantAsPixels(overlayType, x, y, width, height, threshold)
     return 'center';
 }
 exports.calculateQuadrantAsPixels = calculateQuadrantAsPixels;
-//# sourceMappingURL=droptarget.js.map

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

@@ -1,2 +1 @@
 export declare function addGhostImage(dataTransfer: DataTransfer, ghostElement: HTMLElement): void;
-//# sourceMappingURL=ghost.d.ts.map

package/dist/cjs/dnd/ghost.js

@@ -13,4 +13,3 @@ function addGhostImage(dataTransfer, ghostElement) {
     }, 0);
 }
 exports.addGhostImage = addGhostImage;
-//# sourceMappingURL=ghost.js.map

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

@@ -10,4 +10,3 @@ export declare class GroupDragHandler extends DragHandler {
     isCancelled(_event: DragEvent): boolean;
     getData(dragEvent: DragEvent): IDisposable;
 }
-//# sourceMappingURL=groupDragHandler.d.ts.map

package/dist/cjs/dnd/groupDragHandler.js

@@ -41,7 +41,7 @@ var GroupDragHandler = /** @class */ (function (_super) {
         return _this;
     }
     GroupDragHandler.prototype.isCancelled = function (_event) {
-        if (this.group.api.location === 'floating' && !_event.shiftKey) {
+        if (this.group.api.location.type === 'floating' && !_event.shiftKey) {
             return true;
         }
         return false;
@@ -75,4 +75,3 @@ var GroupDragHandler = /** @class */ (function (_super) {
     return GroupDragHandler;
 }(abstractDragHandler_1.DragHandler));
 exports.GroupDragHandler = GroupDragHandler;
-//# sourceMappingURL=groupDragHandler.js.map

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

@@ -28,4 +28,3 @@ export declare class Overlay extends CompositeDisposable {
     private getMinimumHeight;
     dispose(): void;
 }
-//# sourceMappingURL=overlay.d.ts.map

package/dist/cjs/dnd/overlay.js

@@ -410,4 +410,3 @@ var Overlay = /** @class */ (function (_super) {
     return Overlay;
 }(lifecycle_1.CompositeDisposable));
 exports.Overlay = Overlay;
-//# sourceMappingURL=overlay.js.map

package/dist/cjs/dockview/components/panel/content.d.ts

@@ -41,4 +41,3 @@ export declare class ContentContainer extends CompositeDisposable implements ICo
     closePanel(): void;
     dispose(): void;
 }
-//# sourceMappingURL=content.d.ts.map

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

@@ -21,7 +21,6 @@ var events_1 = require("../../../events");
 var dom_1 = require("../../../dom");
 var droptarget_1 = require("../../../dnd/droptarget");
 var dataTransfer_1 = require("../../../dnd/dataTransfer");
-var types_1 = require("../../types");
 var ContentContainer = /** @class */ (function (_super) {
     __extends(ContentContainer, _super);
     function ContentContainer(accessor, group) {
@@ -47,7 +46,7 @@ var ContentContainer = /** @class */ (function (_super) {
                 var data = (0, dataTransfer_1.getPanelData)();
                 if (!data &&
                     event.shiftKey &&
-                    _this.group.location !== 'floating') {
+                    _this.group.location.type !== 'floating') {
                     return false;
                 }
                 if (data && data.viewId === _this.accessor.id) {
@@ -65,7 +64,7 @@ var ContentContainer = /** @class */ (function (_super) {
                         data.groupId === _this.group.id;
                     return !groupHasOnePanelAndIsActiveDragElement;
                 }
-                return _this.group.canDisplayOverlay(event, position, types_1.DockviewDropTargets.Panel);
+                return _this.group.canDisplayOverlay(event, position, 'content');
             },
         });
         _this.addDisposables(_this.dropTarget);
@@ -100,7 +99,7 @@ var ContentContainer = /** @class */ (function (_super) {
         var container;
         switch (panel.api.renderer) {
             case 'onlyWhenVisibile':
-                this.accessor.overlayRenderContainer.detatch(panel);
+                this.group.renderContainer.detatch(panel);
                 if (this.panel) {
                     if (doRender) {
                         this._element.appendChild(this.panel.view.content.element);
@@ -112,7 +111,7 @@ var ContentContainer = /** @class */ (function (_super) {
                 if (panel.view.content.element.parentElement === this._element) {
                     this._element.removeChild(panel.view.content.element);
                 }
-                container = this.accessor.overlayRenderContainer.attach({
+                container = this.group.renderContainer.attach({
                     panel: panel,
                     referenceContainer: this,
                 });
@@ -143,9 +142,10 @@ var ContentContainer = /** @class */ (function (_super) {
         // noop
     };
     ContentContainer.prototype.closePanel = function () {
+        var _a;
         if (this.panel) {
             if (this.panel.api.renderer === 'onlyWhenVisibile') {
-                this._element.removeChild(this.panel.view.content.element);
+                (_a = this.panel.view.content.element.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this.panel.view.content.element);
             }
         }
         this.panel = undefined;
@@ -157,4 +157,3 @@ var ContentContainer = /** @class */ (function (_super) {
     return ContentContainer;
 }(lifecycle_1.CompositeDisposable));
 exports.ContentContainer = ContentContainer;
-//# sourceMappingURL=content.js.map

package/dist/cjs/dockview/components/tab/defaultTab.d.ts

@@ -19,4 +19,3 @@ export declare class DefaultTab extends CompositeDisposable implements ITabRende
     layout(_width: number, _height: number): void;
     private render;
 }
-//# sourceMappingURL=defaultTab.d.ts.map

package/dist/cjs/dockview/components/tab/defaultTab.js

@@ -103,4 +103,3 @@ var DefaultTab = /** @class */ (function (_super) {
     return DefaultTab;
 }(lifecycle_1.CompositeDisposable));
 exports.DefaultTab = DefaultTab;
-//# sourceMappingURL=defaultTab.js.map

package/dist/cjs/dockview/components/tab/tab.d.ts

@@ -1,24 +1,16 @@
 import { Event } from '../../../events';
-import { CompositeDisposable, IDisposable } from '../../../lifecycle';
+import { CompositeDisposable } from '../../../lifecycle';
 import { DockviewComponent } from '../../dockviewComponent';
 import { ITabRenderer } from '../../types';
 import { DockviewGroupPanel } from '../../dockviewGroupPanel';
-import { DroptargetEvent } from '../../../dnd/droptarget';
+import { DroptargetEvent, WillShowOverlayEvent } from '../../../dnd/droptarget';
 import { IDockviewPanel } from '../../dockviewPanel';
-export interface ITab extends IDisposable {
-    readonly panel: IDockviewPanel;
-    readonly element: HTMLElement;
-    setContent: (element: ITabRenderer) => void;
-    onChanged: Event<MouseEvent>;
-    onDrop: Event<DroptargetEvent>;
-    setActive(isActive: boolean): void;
-}
-export declare class Tab extends CompositeDisposable implements ITab {
+export declare class Tab extends CompositeDisposable {
     readonly panel: IDockviewPanel;
     private readonly accessor;
     private readonly group;
     private readonly _element;
-    private readonly droptarget;
+    private readonly dropTarget;
     private content;
     private readonly _onChanged;
     readonly onChanged: Event<MouseEvent>;
@@ -26,10 +18,10 @@ export declare class Tab extends CompositeDisposable implements ITab {
     readonly onDrop: Event<DroptargetEvent>;
     private readonly _onDragStart;
     readonly onDragStart: Event<DragEvent>;
+    readonly onWillShowOverlay: Event<WillShowOverlayEvent>;
     get element(): HTMLElement;
     constructor(panel: IDockviewPanel, accessor: DockviewComponent, group: DockviewGroupPanel);
     setActive(isActive: boolean): void;
     setContent(part: ITabRenderer): void;
     dispose(): void;
 }
-//# sourceMappingURL=tab.d.ts.map

package/dist/cjs/dockview/components/tab/tab.js

@@ -20,7 +20,6 @@ var events_1 = require("../../../events");
 var lifecycle_1 = require("../../../lifecycle");
 var dataTransfer_1 = require("../../../dnd/dataTransfer");
 var dom_1 = require("../../../dom");
-var types_1 = require("../../types");
 var droptarget_1 = require("../../../dnd/droptarget");
 var abstractDragHandler_1 = require("../../../dnd/abstractDragHandler");
 var TabDragHandler = /** @class */ (function (_super) {
@@ -64,7 +63,7 @@ var Tab = /** @class */ (function (_super) {
         _this._element.draggable = true;
         (0, dom_1.toggleClass)(_this.element, 'inactive-tab', true);
         var dragHandler = new TabDragHandler(_this._element, _this.accessor, _this.group, _this.panel);
-        _this.droptarget = new droptarget_1.Droptarget(_this._element, {
+        _this.dropTarget = new droptarget_1.Droptarget(_this._element, {
             acceptedTargetZones: ['center'],
             canDisplayOverlay: function (event, position) {
                 if (_this.group.locked) {
@@ -79,9 +78,10 @@ var Tab = /** @class */ (function (_super) {
                     }
                     return _this.panel.id !== data.panelId;
                 }
-                return _this.group.model.canDisplayOverlay(event, position, types_1.DockviewDropTargets.Tab);
+                return _this.group.model.canDisplayOverlay(event, position, 'tab');
             },
         });
+        _this.onWillShowOverlay = _this.dropTarget.onWillShowOverlay;
         _this.addDisposables(_this._onChanged, _this._onDropped, _this._onDragStart, dragHandler.onDragStart(function (event) {
             _this._onDragStart.fire(event);
         }), dragHandler, (0, events_1.addDisposableListener)(_this._element, 'mousedown', function (event) {
@@ -89,9 +89,9 @@ var Tab = /** @class */ (function (_super) {
                 return;
             }
             _this._onChanged.fire(event);
-        }), _this.droptarget.onDrop(function (event) {
+        }), _this.dropTarget.onDrop(function (event) {
             _this._onDropped.fire(event);
-        }), _this.droptarget);
+        }), _this.dropTarget);
         return _this;
     }
     Object.defineProperty(Tab.prototype, "element", {
@@ -118,4 +118,3 @@ var Tab = /** @class */ (function (_super) {
     return Tab;
 }(lifecycle_1.CompositeDisposable));
 exports.Tab = Tab;
-//# sourceMappingURL=tab.js.map

package/dist/cjs/dockview/components/titlebar/tabsContainer.d.ts

@@ -1,9 +1,10 @@
 import { IDisposable, CompositeDisposable } from '../../../lifecycle';
 import { Event } from '../../../events';
-import { ITab } from '../tab/tab';
-import { DockviewComponent } from '../../dockviewComponent';
+import { Tab } from '../tab/tab';
 import { DockviewGroupPanel } from '../../dockviewGroupPanel';
 import { IDockviewPanel } from '../../dockviewPanel';
+import { DockviewComponent } from '../../dockviewComponent';
+import { WillShowOverlayLocationEvent } from '../../dockviewGroupPanelModel';
 export interface TabDropIndexEvent {
     readonly event: DragEvent;
     readonly index: number;
@@ -20,17 +21,18 @@ export interface ITabsContainer extends IDisposable {
     readonly element: HTMLElement;
     readonly panels: string[];
     readonly size: number;
+    readonly onDrop: Event<TabDropIndexEvent>;
+    readonly onTabDragStart: Event<TabDragEvent>;
+    readonly onGroupDragStart: Event<GroupDragEvent>;
+    readonly onWillShowOverlay: Event<WillShowOverlayLocationEvent>;
     hidden: boolean;
-    delete: (id: string) => void;
-    indexOf: (id: string) => number;
-    onDrop: Event<TabDropIndexEvent>;
-    onTabDragStart: Event<TabDragEvent>;
-    onGroupDragStart: Event<GroupDragEvent>;
-    setActive: (isGroupActive: boolean) => void;
-    setActivePanel: (panel: IDockviewPanel) => void;
-    isActive: (tab: ITab) => boolean;
-    closePanel: (panel: IDockviewPanel) => void;
-    openPanel: (panel: IDockviewPanel, index?: number) => void;
+    delete(id: string): void;
+    indexOf(id: string): number;
+    setActive(isGroupActive: boolean): void;
+    setActivePanel(panel: IDockviewPanel): void;
+    isActive(tab: Tab): boolean;
+    closePanel(panel: IDockviewPanel): void;
+    openPanel(panel: IDockviewPanel, index?: number): void;
     setRightActionsElement(element: HTMLElement | undefined): void;
     setLeftActionsElement(element: HTMLElement | undefined): void;
     setPrefixActionsElement(element: HTMLElement | undefined): void;
@@ -58,6 +60,8 @@ export declare class TabsContainer extends CompositeDisposable implements ITabsC
     readonly onTabDragStart: Event<TabDragEvent>;
     private readonly _onGroupDragStart;
     readonly onGroupDragStart: Event<GroupDragEvent>;
+    private readonly _onWillShowOverlay;
+    readonly onWillShowOverlay: Event<WillShowOverlayLocationEvent>;
     get panels(): string[];
     get size(): number;
     get hidden(): boolean;
@@ -68,7 +72,7 @@ export declare class TabsContainer extends CompositeDisposable implements ITabsC
     setLeftActionsElement(element: HTMLElement | undefined): void;
     setPrefixActionsElement(element: HTMLElement | undefined): void;
     get element(): HTMLElement;
-    isActive(tab: ITab): boolean;
+    isActive(tab: Tab): boolean;
     indexOf(id: string): number;
     constructor(accessor: DockviewComponent, group: DockviewGroupPanel);
     setActive(_isGroupActive: boolean): void;
@@ -79,4 +83,3 @@ export declare class TabsContainer extends CompositeDisposable implements ITabsC
     closePanel(panel: IDockviewPanel): void;
     dispose(): void;
 }
-//# sourceMappingURL=tabsContainer.d.ts.map

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

@@ -57,6 +57,7 @@ var events_1 = require("../../../events");
 var tab_1 = require("../tab/tab");
 var voidContainer_1 = require("./voidContainer");
 var dom_1 = require("../../../dom");
+var dockviewGroupPanelModel_1 = require("../../dockviewGroupPanelModel");
 var TabsContainer = /** @class */ (function (_super) {
     __extends(TabsContainer, _super);
     function TabsContainer(accessor, group) {
@@ -72,19 +73,11 @@ var TabsContainer = /** @class */ (function (_super) {
         _this.onTabDragStart = _this._onTabDragStart.event;
         _this._onGroupDragStart = new events_1.Emitter();
         _this.onGroupDragStart = _this._onGroupDragStart.event;
-        _this.addDisposables(_this._onDrop, _this._onTabDragStart, _this._onGroupDragStart);
+        _this._onWillShowOverlay = new events_1.Emitter();
+        _this.onWillShowOverlay = _this._onWillShowOverlay.event;
         _this._element = document.createElement('div');
         _this._element.className = 'tabs-and-actions-container';
         (0, dom_1.toggleClass)(_this._element, 'dv-full-width-single-tab', _this.accessor.options.singleTabMode === 'fullwidth');
-        _this.addDisposables(_this.accessor.onDidAddPanel(function (e) {
-            if (e.api.group === _this.group) {
-                (0, dom_1.toggleClass)(_this._element, 'dv-single-tab', _this.size === 1);
-            }
-        }), _this.accessor.onDidRemovePanel(function (e) {
-            if (e.api.group === _this.group) {
-                (0, dom_1.toggleClass)(_this._element, 'dv-single-tab', _this.size === 1);
-            }
-        }));
         _this.rightActionsContainer = document.createElement('div');
         _this.rightActionsContainer.className = 'right-actions-container';
         _this.leftActionsContainer = document.createElement('div');
@@ -99,7 +92,15 @@ var TabsContainer = /** @class */ (function (_super) {
         _this._element.appendChild(_this.leftActionsContainer);
         _this._element.appendChild(_this.voidContainer.element);
         _this._element.appendChild(_this.rightActionsContainer);
-        _this.addDisposables(_this.voidContainer, _this.voidContainer.onDragStart(function (event) {
+        _this.addDisposables(_this.accessor.onDidAddPanel(function (e) {
+            if (e.api.group === _this.group) {
+                (0, dom_1.toggleClass)(_this._element, 'dv-single-tab', _this.size === 1);
+            }
+        }), _this.accessor.onDidRemovePanel(function (e) {
+            if (e.api.group === _this.group) {
+                (0, dom_1.toggleClass)(_this._element, 'dv-single-tab', _this.size === 1);
+            }
+        }), _this._onWillShowOverlay, _this._onDrop, _this._onTabDragStart, _this._onGroupDragStart, _this.voidContainer, _this.voidContainer.onDragStart(function (event) {
             _this._onGroupDragStart.fire({
                 nativeEvent: event,
                 group: _this.group,
@@ -109,11 +110,15 @@ var TabsContainer = /** @class */ (function (_super) {
                 event: event.nativeEvent,
                 index: _this.tabs.length,
             });
+        }), _this.voidContainer.onWillShowOverlay(function (event) {
+            _this._onWillShowOverlay.fire(new dockviewGroupPanelModel_1.WillShowOverlayLocationEvent(event, {
+                kind: 'header_space',
+            }));
         }), (0, events_1.addDisposableListener)(_this.voidContainer.element, 'mousedown', function (event) {
             var isFloatingGroupsEnabled = !_this.accessor.options.disableFloatingGroups;
             if (isFloatingGroupsEnabled &&
                 event.shiftKey &&
-                _this.group.api.location !== 'floating') {
+                _this.group.api.location.type !== 'floating') {
                 event.preventDefault();
                 var _a = _this.element.getBoundingClientRect(), top_1 = _a.top, left = _a.left;
                 var _b = _this.accessor.element.getBoundingClientRect(), rootTop = _b.top, rootLeft = _b.left;
@@ -264,36 +269,36 @@ var TabsContainer = /** @class */ (function (_super) {
         var disposable = new lifecycle_1.CompositeDisposable(tab.onDragStart(function (event) {
             _this._onTabDragStart.fire({ nativeEvent: event, panel: panel });
         }), tab.onChanged(function (event) {
-            var _a;
             var isFloatingGroupsEnabled = !_this.accessor.options.disableFloatingGroups;
-            var isFloatingWithOnePanel = _this.group.api.location === 'floating' && _this.size === 1;
+            var isFloatingWithOnePanel = _this.group.api.location.type === 'floating' &&
+                _this.size === 1;
             if (isFloatingGroupsEnabled &&
                 !isFloatingWithOnePanel &&
                 event.shiftKey) {
                 event.preventDefault();
                 var panel_1 = _this.accessor.getGroupPanel(tab.panel.id);
-                var _b = tab.element.getBoundingClientRect(), top_2 = _b.top, left = _b.left;
-                var _c = _this.accessor.element.getBoundingClientRect(), rootTop = _c.top, rootLeft = _c.left;
+                var _a = tab.element.getBoundingClientRect(), top_2 = _a.top, left = _a.left;
+                var _b = _this.accessor.element.getBoundingClientRect(), rootTop = _b.top, rootLeft = _b.left;
                 _this.accessor.addFloatingGroup(panel_1, {
                     x: left - rootLeft,
                     y: top_2 - rootTop,
                 }, { inDragMode: true });
                 return;
             }
-            var alreadyFocused = panel.id === ((_a = _this.group.model.activePanel) === null || _a === void 0 ? void 0 : _a.id) &&
-                _this.group.model.isContentFocused;
             var isLeftClick = event.button === 0;
             if (!isLeftClick || event.defaultPrevented) {
                 return;
             }
-            _this.group.model.openPanel(panel, {
-                skipFocus: alreadyFocused,
-            });
+            if (_this.group.activePanel !== panel) {
+                _this.group.model.openPanel(panel);
+            }
         }), tab.onDrop(function (event) {
             _this._onDrop.fire({
                 event: event.nativeEvent,
                 index: _this.tabs.findIndex(function (x) { return x.value === tab; }),
             });
+        }), tab.onWillShowOverlay(function (event) {
+            _this._onWillShowOverlay.fire(new dockviewGroupPanelModel_1.WillShowOverlayLocationEvent(event, { kind: 'tab' }));
         }));
         var value = { value: tab, disposable: disposable };
         this.addTab(value, index);
@@ -323,4 +328,3 @@ var TabsContainer = /** @class */ (function (_super) {
     return TabsContainer;
 }(lifecycle_1.CompositeDisposable));
 exports.TabsContainer = TabsContainer;
-//# sourceMappingURL=tabsContainer.js.map

package/dist/cjs/dockview/components/titlebar/voidContainer.d.ts

@@ -1,4 +1,4 @@
-import { DroptargetEvent } from '../../../dnd/droptarget';
+import { DroptargetEvent, WillShowOverlayEvent } from '../../../dnd/droptarget';
 import { DockviewComponent } from '../../dockviewComponent';
 import { Event } from '../../../events';
 import { CompositeDisposable } from '../../../lifecycle';
@@ -7,12 +7,12 @@ export declare class VoidContainer extends CompositeDisposable {
     private readonly accessor;
     private readonly group;
     private readonly _element;
-    private readonly voidDropTarget;
+    private readonly dropTraget;
     private readonly _onDrop;
     readonly onDrop: Event<DroptargetEvent>;
     private readonly _onDragStart;
     readonly onDragStart: Event<DragEvent>;
+    readonly onWillShowOverlay: Event<WillShowOverlayEvent>;
     get element(): HTMLElement;
     constructor(accessor: DockviewComponent, group: DockviewGroupPanel);
 }
-//# sourceMappingURL=voidContainer.d.ts.map