dockview-core 3.1.1 → 4.0.0

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

@@ -25,53 +25,28 @@ var __values = (this && this.__values) || function(o) {
     };
     throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
 };
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabsContainer = void 0;
 var lifecycle_1 = require("../../../lifecycle");
 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 dataTransfer_1 = require("../../../dnd/dataTransfer");
+var tabs_1 = require("./tabs");
+var tabOverflowControl_1 = require("./tabOverflowControl");
 var TabsContainer = /** @class */ (function (_super) {
     __extends(TabsContainer, _super);
     function TabsContainer(accessor, group) {
         var _this = _super.call(this) || this;
         _this.accessor = accessor;
         _this.group = group;
-        _this.tabs = [];
-        _this.selectedIndex = -1;
         _this._hidden = false;
+        _this.dropdownPart = null;
+        _this._overflowTabs = [];
+        _this._dropdownDisposable = new lifecycle_1.MutableDisposable();
         _this._onDrop = new events_1.Emitter();
         _this.onDrop = _this._onDrop.event;
-        _this._onTabDragStart = new events_1.Emitter();
-        _this.onTabDragStart = _this._onTabDragStart.event;
         _this._onGroupDragStart = new events_1.Emitter();
         _this.onGroupDragStart = _this._onGroupDragStart.event;
         _this._onWillShowOverlay = new events_1.Emitter();
@@ -85,15 +60,21 @@ var TabsContainer = /** @class */ (function (_super) {
         _this.leftActionsContainer.className = 'dv-left-actions-container';
         _this.preActionsContainer = document.createElement('div');
         _this.preActionsContainer.className = 'dv-pre-actions-container';
-        _this.tabContainer = document.createElement('div');
-        _this.tabContainer.className = 'dv-tabs-container';
+        _this.tabs = new tabs_1.Tabs(group, accessor, {
+            showTabsOverflowControl: !accessor.options.disableTabsOverflowList,
+        });
         _this.voidContainer = new voidContainer_1.VoidContainer(_this.accessor, _this.group);
         _this._element.appendChild(_this.preActionsContainer);
-        _this._element.appendChild(_this.tabContainer);
+        _this._element.appendChild(_this.tabs.element);
         _this._element.appendChild(_this.leftActionsContainer);
         _this._element.appendChild(_this.voidContainer.element);
         _this._element.appendChild(_this.rightActionsContainer);
-        _this.addDisposables(_this._onWillShowOverlay, _this._onDrop, _this._onTabDragStart, _this._onGroupDragStart, _this.voidContainer, _this.voidContainer.onDragStart(function (event) {
+        _this.addDisposables(accessor.onDidOptionsChange(function () {
+            _this.tabs.showTabsOverflowControl =
+                !accessor.options.disableTabsOverflowList;
+        }), _this.tabs.onOverflowTabsChange(function (event) {
+            _this.toggleDropdown(event);
+        }), _this.tabs, _this._onWillShowOverlay, _this._onDrop, _this._onGroupDragStart, _this.voidContainer, _this.voidContainer.onDragStart(function (event) {
             _this._onGroupDragStart.fire({
                 nativeEvent: event,
                 group: _this.group,
@@ -101,7 +82,7 @@ var TabsContainer = /** @class */ (function (_super) {
         }), _this.voidContainer.onDrop(function (event) {
             _this._onDrop.fire({
                 event: event.nativeEvent,
-                index: _this.tabs.length,
+                index: _this.tabs.size,
             });
         }), _this.voidContainer.onWillShowOverlay(function (event) {
             _this._onWillShowOverlay.fire(new dockviewGroupPanelModel_1.WillShowOverlayLocationEvent(event, {
@@ -112,6 +93,9 @@ var TabsContainer = /** @class */ (function (_super) {
                 getData: dataTransfer_1.getPanelData,
             }));
         }), (0, events_1.addDisposableListener)(_this.voidContainer.element, 'pointerdown', function (event) {
+            if (event.defaultPrevented) {
+                return;
+            }
             var isFloatingGroupsEnabled = !_this.accessor.options.disableFloatingGroups;
             if (isFloatingGroupsEnabled &&
                 event.shiftKey &&
@@ -125,27 +109,26 @@ var TabsContainer = /** @class */ (function (_super) {
                     inDragMode: true,
                 });
             }
-        }), (0, events_1.addDisposableListener)(_this.tabContainer, 'pointerdown', function (event) {
-            if (event.defaultPrevented) {
-                return;
-            }
-            var isLeftClick = event.button === 0;
-            if (isLeftClick) {
-                _this.accessor.doSetGroupActive(_this.group);
-            }
         }));
         return _this;
     }
+    Object.defineProperty(TabsContainer.prototype, "onTabDragStart", {
+        get: function () {
+            return this.tabs.onTabDragStart;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(TabsContainer.prototype, "panels", {
         get: function () {
-            return this.tabs.map(function (_) { return _.value.panel.id; });
+            return this.tabs.panels;
         },
         enumerable: false,
         configurable: true
     });
     Object.defineProperty(TabsContainer.prototype, "size", {
         get: function () {
-            return this.tabs.length;
+            return this.tabs.size;
         },
         enumerable: false,
         configurable: true
@@ -161,6 +144,13 @@ var TabsContainer = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(TabsContainer.prototype, "element", {
+        get: function () {
+            return this._element;
+        },
+        enumerable: false,
+        configurable: true
+    });
     TabsContainer.prototype.show = function () {
         if (!this.hidden) {
             this.element.style.display = '';
@@ -208,134 +198,100 @@ var TabsContainer = /** @class */ (function (_super) {
             this.preActions = element;
         }
     };
-    Object.defineProperty(TabsContainer.prototype, "element", {
-        get: function () {
-            return this._element;
-        },
-        enumerable: false,
-        configurable: true
-    });
     TabsContainer.prototype.isActive = function (tab) {
-        return (this.selectedIndex > -1 &&
-            this.tabs[this.selectedIndex].value === tab);
+        return this.tabs.isActive(tab);
     };
     TabsContainer.prototype.indexOf = function (id) {
-        return this.tabs.findIndex(function (tab) { return tab.value.panel.id === id; });
+        return this.tabs.indexOf(id);
     };
     TabsContainer.prototype.setActive = function (_isGroupActive) {
         // noop
     };
     TabsContainer.prototype.delete = function (id) {
-        var index = this.tabs.findIndex(function (tab) { return tab.value.panel.id === id; });
-        var tabToRemove = this.tabs.splice(index, 1)[0];
-        if (!tabToRemove) {
-            throw new Error("dockview: Tab not found");
-        }
-        var value = tabToRemove.value, disposable = tabToRemove.disposable;
-        disposable.dispose();
-        value.dispose();
-        value.element.remove();
+        this.tabs.delete(id);
         this.updateClassnames();
     };
     TabsContainer.prototype.setActivePanel = function (panel) {
-        this.tabs.forEach(function (tab) {
-            var isActivePanel = panel.id === tab.value.panel.id;
-            tab.value.setActive(isActivePanel);
-        });
+        this.tabs.setActivePanel(panel);
     };
     TabsContainer.prototype.openPanel = function (panel, index) {
+        if (index === void 0) { index = this.tabs.size; }
+        this.tabs.openPanel(panel, index);
+        this.updateClassnames();
+    };
+    TabsContainer.prototype.closePanel = function (panel) {
+        this.delete(panel.id);
+    };
+    TabsContainer.prototype.updateClassnames = function () {
+        (0, dom_1.toggleClass)(this._element, 'dv-single-tab', this.size === 1);
+    };
+    TabsContainer.prototype.toggleDropdown = function (options) {
         var _this = this;
-        if (index === void 0) { index = this.tabs.length; }
-        if (this.tabs.find(function (tab) { return tab.value.panel.id === panel.id; })) {
+        var tabs = options.reset ? [] : options.tabs;
+        this._overflowTabs = tabs;
+        if (this._overflowTabs.length > 0 && this.dropdownPart) {
+            this.dropdownPart.update({ tabs: tabs.length });
             return;
         }
-        var tab = new tab_1.Tab(panel, this.accessor, this.group);
-        tab.setContent(panel.view.tab);
-        var disposable = new lifecycle_1.CompositeDisposable(tab.onDragStart(function (event) {
-            _this._onTabDragStart.fire({ nativeEvent: event, panel: panel });
-        }), tab.onPointerDown(function (event) {
-            if (event.defaultPrevented) {
-                return;
-            }
-            var isFloatingGroupsEnabled = !_this.accessor.options.disableFloatingGroups;
-            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 _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,
+        if (this._overflowTabs.length === 0) {
+            this._dropdownDisposable.dispose();
+            return;
+        }
+        var root = document.createElement('div');
+        root.className = 'dv-tabs-overflow-dropdown-root';
+        var part = (0, tabOverflowControl_1.createDropdownElementHandle)();
+        part.update({ tabs: tabs.length });
+        this.dropdownPart = part;
+        root.appendChild(part.element);
+        this.rightActionsContainer.prepend(root);
+        this._dropdownDisposable.value = new lifecycle_1.CompositeDisposable(lifecycle_1.Disposable.from(function () {
+            var _a, _b;
+            root.remove();
+            (_b = (_a = _this.dropdownPart) === null || _a === void 0 ? void 0 : _a.dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
+            _this.dropdownPart = null;
+        }), (0, events_1.addDisposableListener)(root, 'pointerdown', function (event) {
+            event.preventDefault();
+        }, { capture: true }), (0, events_1.addDisposableListener)(root, 'click', function (event) {
+            var e_1, _a;
+            var el = document.createElement('div');
+            el.style.overflow = 'auto';
+            el.className = 'dv-tabs-overflow-container';
+            var _loop_1 = function (tab) {
+                var panelObject = _this.group.panels.find(function (panel) { return panel === tab.panel; });
+                var tabComponent = panelObject.view.createTabRenderer('headerOverflow');
+                var child = tabComponent.element;
+                var wrapper = document.createElement('div');
+                (0, dom_1.toggleClass)(wrapper, 'dv-tab', true);
+                (0, dom_1.toggleClass)(wrapper, 'dv-active-tab', panelObject.api.isActive);
+                (0, dom_1.toggleClass)(wrapper, 'dv-inactive-tab', !panelObject.api.isActive);
+                wrapper.addEventListener('mousedown', function () {
+                    _this.accessor.popupService.close();
+                    tab.element.scrollIntoView();
+                    tab.panel.api.setActive();
                 });
-                return;
+                wrapper.appendChild(child);
+                el.appendChild(wrapper);
+            };
+            try {
+                for (var _b = __values(_this.tabs.tabs.filter(function (tab) {
+                    return _this._overflowTabs.includes(tab.panel.id);
+                })), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var tab = _c.value;
+                    _loop_1(tab);
+                }
             }
-            switch (event.button) {
-                case 0: // left click or touch
-                    if (_this.group.activePanel !== panel) {
-                        _this.group.model.openPanel(panel);
-                    }
-                    break;
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_1) throw e_1.error; }
             }
-        }), tab.onDrop(function (event) {
-            _this._onDrop.fire({
-                event: event.nativeEvent,
-                index: _this.tabs.findIndex(function (x) { return x.value === tab; }),
+            _this.accessor.popupService.openPopover(el, {
+                x: event.clientX,
+                y: event.clientY,
             });
-        }), tab.onWillShowOverlay(function (event) {
-            _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);
-    };
-    TabsContainer.prototype.closePanel = function (panel) {
-        this.delete(panel.id);
-    };
-    TabsContainer.prototype.dispose = function () {
-        var e_1, _a;
-        _super.prototype.dispose.call(this);
-        try {
-            for (var _b = __values(this.tabs), _c = _b.next(); !_c.done; _c = _b.next()) {
-                var _d = _c.value, value = _d.value, disposable = _d.disposable;
-                disposable.dispose();
-                value.dispose();
-            }
-        }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
-        finally {
-            try {
-                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-            }
-            finally { if (e_1) throw e_1.error; }
-        }
-        this.tabs = [];
-    };
-    TabsContainer.prototype.addTab = function (tab, index) {
-        if (index === void 0) { index = this.tabs.length; }
-        if (index < 0 || index > this.tabs.length) {
-            throw new Error('invalid location');
-        }
-        this.tabContainer.insertBefore(tab.value.element, this.tabContainer.children[index]);
-        this.tabs = __spreadArray(__spreadArray(__spreadArray([], __read(this.tabs.slice(0, index)), false), [
-            tab
-        ], false), __read(this.tabs.slice(index)), false);
-        if (this.selectedIndex < 0) {
-            this.selectedIndex = index;
-        }
-        this.updateClassnames();
-    };
-    TabsContainer.prototype.updateClassnames = function () {
-        (0, dom_1.toggleClass)(this._element, 'dv-single-tab', this.size === 1);
     };
     return TabsContainer;
 }(lifecycle_1.CompositeDisposable));

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

@@ -16,7 +16,6 @@ var __extends = (this && this.__extends) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VoidContainer = void 0;
-var array_1 = require("../../../array");
 var dataTransfer_1 = require("../../../dnd/dataTransfer");
 var droptarget_1 = require("../../../dnd/droptarget");
 var groupDragHandler_1 = require("../../../dnd/groupDragHandler");
@@ -42,19 +41,13 @@ var VoidContainer = /** @class */ (function (_super) {
         _this.dropTraget = new droptarget_1.Droptarget(_this._element, {
             acceptedTargetZones: ['center'],
             canDisplayOverlay: function (event, position) {
-                var _a;
                 var data = (0, dataTransfer_1.getPanelData)();
                 if (data && _this.accessor.id === data.viewId) {
-                    if (data.panelId === null &&
-                        data.groupId === _this.group.id) {
-                        // don't allow group move to drop on self
-                        return false;
-                    }
-                    // don't show the overlay if the tab being dragged is the last panel of this group
-                    return ((_a = (0, array_1.last)(_this.group.panels)) === null || _a === void 0 ? void 0 : _a.id) !== data.panelId;
+                    return true;
                 }
                 return group.model.canDisplayOverlay(event, position, 'header_space');
             },
+            getOverrideTarget: function () { var _a; return (_a = group.model.dropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
         });
         _this.onWillShowOverlay = _this.dropTraget.onWillShowOverlay;
         _this.addDisposables(handler, handler.onDragStart(function (event) {

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

@@ -14,6 +14,8 @@ import { DockviewFloatingGroupPanel } from './dockviewFloatingGroupPanel';
 import { GroupDragEvent, TabDragEvent } from './components/titlebar/tabsContainer';
 import { AnchoredBox, AnchorPosition, Box } from '../types';
 import { DockviewPanelRenderer, OverlayRenderContainer } from '../overlay/overlayRenderContainer';
+import { PopupService } from './components/popupService';
+import { DropTargetAnchorContainer } from '../dnd/dropTargetAnchorContainer';
 export interface DockviewPopoutGroupOptions {
     /**
      * The position of the popout group
@@ -110,7 +112,6 @@ export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
     readonly totalPanels: number;
     readonly panels: IDockviewPanel[];
     readonly orientation: Orientation;
-    readonly gap: number;
     readonly onDidDrop: Event<DockviewDidDropEvent>;
     readonly onWillDrop: Event<DockviewWillDropEvent>;
     readonly onWillShowOverlay: Event<WillShowOverlayLocationEvent>;
@@ -163,8 +164,11 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     private readonly _deserializer;
     private readonly _api;
     private _options;
-    private watermark;
+    private _watermark;
+    private readonly _themeClassnames;
     readonly overlayRenderContainer: OverlayRenderContainer;
+    readonly popupService: PopupService;
+    readonly rootDropTargetContainer: DropTargetAnchorContainer;
     private readonly _onWillDragPanel;
     readonly onWillDragPanel: Event<TabDragEvent>;
     private readonly _onWillDragGroup;
@@ -196,6 +200,8 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     readonly onDidRemoveGroup: Event<DockviewGroupPanel>;
     protected readonly _onDidAddGroup: Emitter<DockviewGroupPanel>;
     readonly onDidAddGroup: Event<DockviewGroupPanel>;
+    private readonly _onDidOptionsChange;
+    readonly onDidOptionsChange: Event<void>;
     private readonly _onDidActiveGroupChange;
     readonly onDidActiveGroupChange: Event<DockviewGroupPanel | undefined>;
     get orientation(): Orientation;
@@ -205,7 +211,6 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     get activePanel(): IDockviewPanel | undefined;
     get renderer(): DockviewPanelRenderer;
     get api(): DockviewApi;
-    get gap(): number;
     get floatingGroups(): DockviewFloatingGroupPanel[];
     constructor(container: HTMLElement, options: DockviewComponentOptions);
     setVisible(panel: DockviewGroupPanel, visible: boolean): void;
@@ -262,5 +267,7 @@ export declare class DockviewComponent extends BaseGrid<DockviewGroupPanel> impl
     private createGroupAtLocation;
     private findGroup;
     private orientationAtLocation;
+    private updateDropTargetModel;
+    private updateTheme;
 }
 export {};

package/dist/cjs/dockview/dockviewComponent.js

@@ -87,6 +87,9 @@ var constants_1 = require("../constants");
 var overlayRenderContainer_1 = require("../overlay/overlayRenderContainer");
 var popoutWindow_1 = require("../popoutWindow");
 var strictEventsSequencing_1 = require("./strictEventsSequencing");
+var popupService_1 = require("./components/popupService");
+var dropTargetAnchorContainer_1 = require("../dnd/dropTargetAnchorContainer");
+var theme_1 = require("./theme");
 var DEFAULT_ROOT_OVERLAY_MODEL = {
     activationSize: { type: 'pixels', value: 10 },
     size: { type: 'pixels', value: 20 },
@@ -108,7 +111,7 @@ function moveGroupWithoutDestroying(options) {
 var DockviewComponent = /** @class */ (function (_super) {
     __extends(DockviewComponent, _super);
     function DockviewComponent(container, options) {
-        var _a;
+        var _a, _b, _c;
         var _this = _super.call(this, container, {
             proportionalLayout: true,
             orientation: splitview_1.Orientation.HORIZONTAL,
@@ -117,12 +120,12 @@ var DockviewComponent = /** @class */ (function (_super) {
                 : undefined,
             disableAutoResizing: options.disableAutoResizing,
             locked: options.locked,
-            margin: options.gap,
+            margin: (_b = (_a = options.theme) === null || _a === void 0 ? void 0 : _a.gap) !== null && _b !== void 0 ? _b : 0,
             className: options.className,
         }) || this;
         _this.nextGroupId = (0, math_1.sequentialNumberGenerator)();
         _this._deserializer = new deserializer_1.DefaultDockviewDeserialzier(_this);
-        _this.watermark = null;
+        _this._watermark = null;
         _this._onWillDragPanel = new events_1.Emitter();
         _this.onWillDragPanel = _this._onWillDragPanel.event;
         _this._onWillDragGroup = new events_1.Emitter();
@@ -153,16 +156,22 @@ var DockviewComponent = /** @class */ (function (_super) {
         _this.onDidRemoveGroup = _this._onDidRemoveGroup.event;
         _this._onDidAddGroup = new events_1.Emitter();
         _this.onDidAddGroup = _this._onDidAddGroup.event;
+        _this._onDidOptionsChange = new events_1.Emitter();
+        _this.onDidOptionsChange = _this._onDidOptionsChange.event;
         _this._onDidActiveGroupChange = new events_1.Emitter();
         _this.onDidActiveGroupChange = _this._onDidActiveGroupChange.event;
         _this._moving = false;
+        _this.popupService = new popupService_1.PopupService(_this.element);
+        _this.updateDropTargetModel(options);
+        _this._themeClassnames = new dom_1.Classnames(_this.element);
+        _this.rootDropTargetContainer = new dropTargetAnchorContainer_1.DropTargetAnchorContainer(_this.element, { disabled: true });
         _this.overlayRenderContainer = new overlayRenderContainer_1.OverlayRenderContainer(_this.gridview.element, _this);
         (0, dom_1.toggleClass)(_this.gridview.element, 'dv-dockview', true);
         (0, dom_1.toggleClass)(_this.element, 'dv-debug', !!options.debug);
         if (options.debug) {
             _this.addDisposables(new strictEventsSequencing_1.StrictEventsSequencing(_this));
         }
-        _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._onDidMaximizedGroupChange, _this.onDidViewVisibilityChangeMicroTaskQueue(function () {
+        _this.addDisposables(_this.rootDropTargetContainer, _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._onDidMaximizedGroupChange, _this._onDidOptionsChange, _this.onDidViewVisibilityChangeMicroTaskQueue(function () {
             _this.updateWatermark();
         }), _this.onDidAdd(function (event) {
             if (!_this._moving) {
@@ -217,7 +226,9 @@ var DockviewComponent = /** @class */ (function (_super) {
             }
         }));
         _this._options = options;
+        _this.updateTheme();
         _this._rootDropTarget = new droptarget_1.Droptarget(_this.element, {
+            className: 'dv-drop-target-edge',
             canDisplayOverlay: function (event, position) {
                 var data = (0, dataTransfer_1.getPanelData)();
                 if (data) {
@@ -244,7 +255,8 @@ var DockviewComponent = /** @class */ (function (_super) {
                 return firedEvent.isAccepted;
             },
             acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
-            overlayModel: (_a = _this.options.rootOverlayModel) !== null && _a !== void 0 ? _a : DEFAULT_ROOT_OVERLAY_MODEL,
+            overlayModel: (_c = _this.options.rootOverlayModel) !== null && _c !== void 0 ? _c : DEFAULT_ROOT_OVERLAY_MODEL,
+            getOverrideTarget: function () { var _a; return (_a = _this.rootDropTargetContainer) === null || _a === void 0 ? void 0 : _a.model; },
         });
         _this.addDisposables(_this._rootDropTarget, _this._rootDropTarget.onWillShowOverlay(function (event) {
             if (_this.gridview.length > 0 && event.position === 'center') {
@@ -355,13 +367,6 @@ var DockviewComponent = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(DockviewComponent.prototype, "gap", {
-        get: function () {
-            return this.gridview.margin;
-        },
-        enumerable: false,
-        configurable: true
-    });
     Object.defineProperty(DockviewComponent.prototype, "floatingGroups", {
         get: function () {
             return this._floatingGroups;
@@ -496,6 +501,10 @@ var DockviewComponent = /** @class */ (function (_super) {
             popoutContainer.style.overflow = 'hidden';
             popoutContainer.appendChild(gready);
             popoutContainer.appendChild(group.element);
+            var anchor = document.createElement('div');
+            var dropTargetContainer = new dropTargetAnchorContainer_1.DropTargetAnchorContainer(anchor, { disabled: _this.rootDropTargetContainer.disabled });
+            popoutContainer.appendChild(anchor);
+            group.model.dropTargetContainer = dropTargetContainer;
             group.model.location = {
                 type: 'popout',
                 getWindow: function () { return _window.window; },
@@ -564,6 +573,8 @@ var DockviewComponent = /** @class */ (function (_super) {
                 else if (_this.getPanel(group.id)) {
                     group.model.renderContainer =
                         _this.overlayRenderContainer;
+                    group.model.dropTargetContainer =
+                        _this.rootDropTargetContainer;
                     returnedGroup = group;
                     var alreadyRemoved = !_this._popoutGroups.find(function (p) { return p.popoutGroup === group; });
                     if (alreadyRemoved) {
@@ -794,12 +805,12 @@ var DockviewComponent = /** @class */ (function (_super) {
     };
     DockviewComponent.prototype.updateOptions = function (options) {
         var e_3, _a;
-        var _b, _c, _d, _e;
+        var _b, _c;
         _super.prototype.updateOptions.call(this, options);
         if ('floatingGroupBounds' in options) {
             try {
-                for (var _f = __values(this._floatingGroups), _g = _f.next(); !_g.done; _g = _f.next()) {
-                    var group = _g.value;
+                for (var _d = __values(this._floatingGroups), _e = _d.next(); !_e.done; _e = _d.next()) {
+                    var group = _e.value;
                     switch (options.floatingGroupBounds) {
                         case 'boundedWithinViewport':
                             group.overlay.minimumInViewportHeight = undefined;
@@ -823,18 +834,16 @@ var DockviewComponent = /** @class */ (function (_super) {
             catch (e_3_1) { e_3 = { error: e_3_1 }; }
             finally {
                 try {
-                    if (_g && !_g.done && (_a = _f.return)) _a.call(_f);
+                    if (_e && !_e.done && (_a = _d.return)) _a.call(_d);
                 }
                 finally { if (e_3) throw e_3.error; }
             }
         }
-        if ('rootOverlayModel' in options) {
-            this._rootDropTarget.setOverlayModel((_d = options.rootOverlayModel) !== null && _d !== void 0 ? _d : DEFAULT_ROOT_OVERLAY_MODEL);
-        }
-        if ('gap' in options) {
-            this.gridview.margin = (_e = options.gap) !== null && _e !== void 0 ? _e : 0;
-        }
+        this.updateDropTargetModel(options);
         this._options = __assign(__assign({}, this.options), options);
+        if ('theme' in options) {
+            this.updateTheme();
+        }
         this.layout(this.gridview.width, this.gridview.height, true);
     };
     DockviewComponent.prototype.layout = function (width, height, forceResize) {
@@ -1371,22 +1380,22 @@ var DockviewComponent = /** @class */ (function (_super) {
     DockviewComponent.prototype.updateWatermark = function () {
         var _a, _b;
         if (this.groups.filter(function (x) { return x.api.location.type === 'grid' && x.api.isVisible; }).length === 0) {
-            if (!this.watermark) {
-                this.watermark = this.createWatermarkComponent();
-                this.watermark.init({
+            if (!this._watermark) {
+                this._watermark = this.createWatermarkComponent();
+                this._watermark.init({
                     containerApi: new component_api_1.DockviewApi(this),
                 });
                 var watermarkContainer = document.createElement('div');
                 watermarkContainer.className = 'dv-watermark-container';
                 (0, dom_1.addTestId)(watermarkContainer, 'watermark-component');
-                watermarkContainer.appendChild(this.watermark.element);
+                watermarkContainer.appendChild(this._watermark.element);
                 this.gridview.element.appendChild(watermarkContainer);
             }
         }
-        else if (this.watermark) {
-            this.watermark.element.parentElement.remove();
-            (_b = (_a = this.watermark).dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
-            this.watermark = null;
+        else if (this._watermark) {
+            this._watermark.element.parentElement.remove();
+            (_b = (_a = this._watermark).dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
+            this._watermark = null;
         }
     };
     DockviewComponent.prototype.addGroup = function (options) {
@@ -1917,6 +1926,38 @@ var DockviewComponent = /** @class */ (function (_super) {
             ? rootOrientation
             : (0, gridview_1.orthogonal)(rootOrientation);
     };
+    DockviewComponent.prototype.updateDropTargetModel = function (options) {
+        if ('dndEdges' in options) {
+            this._rootDropTarget.disabled =
+                typeof options.dndEdges === 'boolean' &&
+                    options.dndEdges === false;
+            if (typeof options.dndEdges === 'object' &&
+                options.dndEdges !== null) {
+                this._rootDropTarget.setOverlayModel(options.dndEdges);
+            }
+            else {
+                this._rootDropTarget.setOverlayModel(DEFAULT_ROOT_OVERLAY_MODEL);
+            }
+        }
+        if ('rootOverlayModel' in options) {
+            this.updateDropTargetModel({ dndEdges: options.dndEdges });
+        }
+    };
+    DockviewComponent.prototype.updateTheme = function () {
+        var _a, _b;
+        var theme = (_a = this._options.theme) !== null && _a !== void 0 ? _a : theme_1.themeAbyss;
+        this._themeClassnames.setClassNames(theme.className);
+        this.gridview.margin = (_b = theme.gap) !== null && _b !== void 0 ? _b : 0;
+        switch (theme.dndOverlayMounting) {
+            case 'absolute':
+                this.rootDropTargetContainer.disabled = false;
+                break;
+            case 'relative':
+            default:
+                this.rootDropTargetContainer.disabled = true;
+                break;
+        }
+    };
     return DockviewComponent;
 }(baseComponentGridview_1.BaseGrid));
 exports.DockviewComponent = DockviewComponent;