dockview-core 1.8.2 → 1.8.4

package/dist/dockview-core.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview-core
- * @version 1.8.2
+ * @version 1.8.4
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -244,9 +244,6 @@
         get isDisposed() {
             return this._isDisposed;
         }
-        static from(...args) {
-            return new CompositeDisposable(...args);
-        }
         constructor(...args) {
             this._isDisposed = false;
             this._disposables = args;
@@ -875,7 +872,17 @@
             size = typeof size === 'number' ? size : item.size;
             size = clamp(size, item.minimumSize, item.maximumSize);
             item.size = size;
-            this.relayout([index]);
+            const indexes = range(this.viewItems.length).filter((i) => i !== index);
+            const lowPriorityIndexes = [
+                ...indexes.filter((i) => this.viewItems[i].priority === exports.LayoutPriority.Low),
+                index,
+            ];
+            const highPriorityIndexes = indexes.filter((i) => this.viewItems[i].priority === exports.LayoutPriority.High);
+            /**
+             * add this view we are changing to the low-index list since we have determined the size
+             * here and don't want it changed
+             */
+            this.relayout([...lowPriorityIndexes, index], highPriorityIndexes);
         }
         addView(view, size = { type: 'distribute' }, index = this.viewItems.length, skipLayout) {
             const container = document.createElement('div');
@@ -1632,6 +1639,7 @@
                     orientation: this.orientation,
                     descriptor,
                     proportionalLayout,
+                    styles,
                 });
             }
             this.addDisposables(this._onDidChange, this.splitview.onDidSashEnd(() => {
@@ -2143,6 +2151,14 @@
                     const child = sibling.children[i];
                     grandParent.addChild(child, child.size, parentIndex + i);
                 }
+                /**
+                 * clean down the branch node since we need to dipose of it and
+                 * when .dispose() it called on a branch it will dispose of any
+                 * views it is holding onto.
+                 */
+                while (sibling.children.length > 0) {
+                    sibling.removeChild(0);
+                }
             }
             else {
                 // otherwise create a new leaf node and add that to the grandparent
@@ -2450,6 +2466,12 @@
         get onDidDrop() {
             return this.component.onDidDrop;
         }
+        get onWillDragGroup() {
+            return this.component.onWillDragGroup;
+        }
+        get onWillDragPanel() {
+            return this.component.onWillDragPanel;
+        }
         get panels() {
             return this.component.panels;
         }
@@ -2912,7 +2934,7 @@
         }
         configure() {
             this.addDisposables(this._onDragStart, addDisposableListener(this.el, 'dragstart', (event) => {
-                if (this.isCancelled(event)) {
+                if (event.defaultPrevented || this.isCancelled(event)) {
                     event.preventDefault();
                     return;
                 }
@@ -2932,19 +2954,23 @@
                 }
                 this.el.classList.add('dv-dragged');
                 setTimeout(() => this.el.classList.remove('dv-dragged'), 0);
-                this.dataDisposable.value = this.getData(event.dataTransfer);
+                this.dataDisposable.value = this.getData(event);
+                this._onDragStart.fire(event);
                 if (event.dataTransfer) {
                     event.dataTransfer.effectAllowed = 'move';
-                    /**
-                     * Although this is not used by dockview many third party dnd libraries will check
-                     * dataTransfer.types to determine valid drag events.
-                     *
-                     * For example: in react-dnd if dataTransfer.types is not set then the dragStart event will be cancelled
-                     * through .preventDefault(). Since this is applied globally to all drag events this would break dockviews
-                     * dnd logic. You can see the code at
-                     * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
-                     */
-                    event.dataTransfer.setData('text/plain', '__dockview_internal_drag_event__');
+                    const hasData = event.dataTransfer.items.length > 0;
+                    if (!hasData) {
+                        /**
+                         * Although this is not used by dockview many third party dnd libraries will check
+                         * dataTransfer.types to determine valid drag events.
+                         *
+                         * For example: in react-dnd if dataTransfer.types is not set then the dragStart event will be cancelled
+                         * through .preventDefault(). Since this is applied globally to all drag events this would break dockviews
+                         * dnd logic. You can see the code at
+                         * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
+                         */
+                        event.dataTransfer.setData('text/plain', '__dockview_internal_drag_event__');
+                    }
                 }
             }), addDisposableListener(this.el, 'dragend', () => {
                 this.pointerEventsDisposable.dispose();
@@ -2953,44 +2979,45 @@
         }
     }
 
+    class TabDragHandler extends DragHandler {
+        constructor(element, accessor, group, panel) {
+            super(element);
+            this.accessor = accessor;
+            this.group = group;
+            this.panel = panel;
+            this.panelTransfer = LocalSelectionTransfer.getInstance();
+        }
+        getData(event) {
+            this.panelTransfer.setData([new PanelTransfer(this.accessor.id, this.group.id, this.panel.id)], PanelTransfer.prototype);
+            return {
+                dispose: () => {
+                    this.panelTransfer.clearData(PanelTransfer.prototype);
+                },
+            };
+        }
+    }
     class Tab extends CompositeDisposable {
         get element() {
             return this._element;
         }
-        constructor(panelId, accessor, group) {
+        constructor(panel, accessor, group) {
             super();
-            this.panelId = panelId;
+            this.panel = panel;
             this.accessor = accessor;
             this.group = group;
+            this.content = undefined;
             this._onChanged = new Emitter();
             this.onChanged = this._onChanged.event;
             this._onDropped = new Emitter();
             this.onDrop = this._onDropped.event;
+            this._onDragStart = new Emitter();
+            this.onDragStart = this._onDragStart.event;
             this._element = document.createElement('div');
             this._element.className = 'tab';
             this._element.tabIndex = 0;
             this._element.draggable = true;
             toggleClass(this.element, 'inactive-tab', true);
-            this.addDisposables(this._onChanged, this._onDropped, new (class Handler extends DragHandler {
-                constructor() {
-                    super(...arguments);
-                    this.panelTransfer = LocalSelectionTransfer.getInstance();
-                }
-                getData() {
-                    this.panelTransfer.setData([new PanelTransfer(accessor.id, group.id, panelId)], PanelTransfer.prototype);
-                    return {
-                        dispose: () => {
-                            this.panelTransfer.clearData(PanelTransfer.prototype);
-                        },
-                    };
-                }
-            })(this._element));
-            this.addDisposables(addDisposableListener(this._element, 'mousedown', (event) => {
-                if (event.defaultPrevented) {
-                    return;
-                }
-                this._onChanged.fire(event);
-            }));
+            const dragHandler = new TabDragHandler(this._element, this.accessor, this.group, this.panel);
             this.droptarget = new Droptarget(this._element, {
                 acceptedTargetZones: ['center'],
                 canDisplayOverlay: (event, position) => {
@@ -3004,12 +3031,19 @@
                             // don't allow group move to drop on self
                             return false;
                         }
-                        return this.panelId !== data.panelId;
+                        return this.panel.id !== data.panelId;
                     }
                     return this.group.model.canDisplayOverlay(event, position, exports.DockviewDropTargets.Tab);
                 },
             });
-            this.addDisposables(this.droptarget.onDrop((event) => {
+            this.addDisposables(this._onChanged, this._onDropped, this._onDragStart, dragHandler.onDragStart((event) => {
+                this._onDragStart.fire(event);
+            }), dragHandler, addDisposableListener(this._element, 'mousedown', (event) => {
+                if (event.defaultPrevented) {
+                    return;
+                }
+                this._onChanged.fire(event);
+            }), this.droptarget.onDrop((event) => {
                 this._onDropped.fire(event);
             }), this.droptarget);
         }
@@ -3041,9 +3075,9 @@
     }
 
     class GroupDragHandler extends DragHandler {
-        constructor(element, accessorId, group) {
+        constructor(element, accessor, group) {
             super(element);
-            this.accessorId = accessorId;
+            this.accessor = accessor;
             this.group = group;
             this.panelTransfer = LocalSelectionTransfer.getInstance();
             this.addDisposables(addDisposableListener(element, 'mousedown', (e) => {
@@ -3063,8 +3097,9 @@
             }
             return false;
         }
-        getData(dataTransfer) {
-            this.panelTransfer.setData([new PanelTransfer(this.accessorId, this.group.id, null)], PanelTransfer.prototype);
+        getData(dragEvent) {
+            const dataTransfer = dragEvent.dataTransfer;
+            this.panelTransfer.setData([new PanelTransfer(this.accessor.id, this.group.id, null)], PanelTransfer.prototype);
             const style = window.getComputedStyle(this.el);
             const bgColor = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-background-color');
             const color = style.getPropertyValue('--dv-activegroup-visiblepanel-tab-color');
@@ -3099,14 +3134,16 @@
             this.group = group;
             this._onDrop = new Emitter();
             this.onDrop = this._onDrop.event;
+            this._onDragStart = new Emitter();
+            this.onDragStart = this._onDragStart.event;
             this._element = document.createElement('div');
             this._element.className = 'void-container';
             this._element.tabIndex = 0;
             this._element.draggable = true;
-            this.addDisposables(this._onDrop, addDisposableListener(this._element, 'click', () => {
+            this.addDisposables(this._onDrop, this._onDragStart, addDisposableListener(this._element, 'click', () => {
                 this.accessor.doSetGroupActive(this.group);
             }));
-            const handler = new GroupDragHandler(this._element, accessor.id, group);
+            const handler = new GroupDragHandler(this._element, accessor, group);
             this.voidDropTarget = new Droptarget(this._element, {
                 acceptedTargetZones: ['center'],
                 canDisplayOverlay: (event, position) => {
@@ -3124,7 +3161,9 @@
                     return group.model.canDisplayOverlay(event, position, exports.DockviewDropTargets.Panel);
                 },
             });
-            this.addDisposables(handler, this.voidDropTarget.onDrop((event) => {
+            this.addDisposables(handler, handler.onDragStart((event) => {
+                this._onDragStart.fire(event);
+            }), this.voidDropTarget.onDrop((event) => {
                 this._onDrop.fire(event);
             }), this.voidDropTarget);
         }
@@ -3132,7 +3171,7 @@
 
     class TabsContainer extends CompositeDisposable {
         get panels() {
-            return this.tabs.map((_) => _.value.panelId);
+            return this.tabs.map((_) => _.value.panel.id);
         }
         get size() {
             return this.tabs.length;
@@ -3178,6 +3217,19 @@
                 this.leftActions = element;
             }
         }
+        setPrefixActionsElement(element) {
+            if (this.preActions === element) {
+                return;
+            }
+            if (this.preActions) {
+                this.preActions.remove();
+                this.preActions = undefined;
+            }
+            if (element) {
+                this.preActionsContainer.appendChild(element);
+                this.preActions = element;
+            }
+        }
         get element() {
             return this._element;
         }
@@ -3186,7 +3238,7 @@
                 this.tabs[this.selectedIndex].value === tab);
         }
         indexOf(id) {
-            return this.tabs.findIndex((tab) => tab.value.panelId === id);
+            return this.tabs.findIndex((tab) => tab.value.panel.id === id);
         }
         constructor(accessor, group) {
             super();
@@ -3197,7 +3249,11 @@
             this._hidden = false;
             this._onDrop = new Emitter();
             this.onDrop = this._onDrop.event;
-            this.addDisposables(this._onDrop);
+            this._onTabDragStart = new Emitter();
+            this.onTabDragStart = this._onTabDragStart.event;
+            this._onGroupDragStart = new Emitter();
+            this.onGroupDragStart = this._onGroupDragStart.event;
+            this.addDisposables(this._onDrop, this._onTabDragStart, this._onGroupDragStart);
             this._element = document.createElement('div');
             this._element.className = 'tabs-and-actions-container';
             toggleClass(this._element, 'dv-full-width-single-tab', this.accessor.options.singleTabMode === 'fullwidth');
@@ -3214,14 +3270,22 @@
             this.rightActionsContainer.className = 'right-actions-container';
             this.leftActionsContainer = document.createElement('div');
             this.leftActionsContainer.className = 'left-actions-container';
+            this.preActionsContainer = document.createElement('div');
+            this.preActionsContainer.className = 'pre-actions-container';
             this.tabContainer = document.createElement('div');
             this.tabContainer.className = 'tabs-container';
             this.voidContainer = new VoidContainer(this.accessor, this.group);
+            this._element.appendChild(this.preActionsContainer);
             this._element.appendChild(this.tabContainer);
             this._element.appendChild(this.leftActionsContainer);
             this._element.appendChild(this.voidContainer.element);
             this._element.appendChild(this.rightActionsContainer);
-            this.addDisposables(this.voidContainer, this.voidContainer.onDrop((event) => {
+            this.addDisposables(this.voidContainer, this.voidContainer.onDragStart((event) => {
+                this._onGroupDragStart.fire({
+                    nativeEvent: event,
+                    group: this.group,
+                });
+            }), this.voidContainer.onDrop((event) => {
                 this._onDrop.fire({
                     event: event.nativeEvent,
                     index: this.tabs.length,
@@ -3267,7 +3331,7 @@
             }
         }
         delete(id) {
-            const index = this.tabs.findIndex((tab) => tab.value.panelId === id);
+            const index = this.tabs.findIndex((tab) => tab.value.panel.id === id);
             const tabToRemove = this.tabs.splice(index, 1)[0];
             const { value, disposable } = tabToRemove;
             disposable.dispose();
@@ -3276,21 +3340,23 @@
         }
         setActivePanel(panel) {
             this.tabs.forEach((tab) => {
-                const isActivePanel = panel.id === tab.value.panelId;
+                const isActivePanel = panel.id === tab.value.panel.id;
                 tab.value.setActive(isActivePanel);
             });
         }
         openPanel(panel, index = this.tabs.length) {
             var _a;
-            if (this.tabs.find((tab) => tab.value.panelId === panel.id)) {
+            if (this.tabs.find((tab) => tab.value.panel.id === panel.id)) {
                 return;
             }
-            const tabToAdd = new Tab(panel.id, this.accessor, this.group);
+            const tab = new Tab(panel, this.accessor, this.group);
             if (!((_a = panel.view) === null || _a === void 0 ? void 0 : _a.tab)) {
                 throw new Error('invalid header component');
             }
-            tabToAdd.setContent(panel.view.tab);
-            const disposable = CompositeDisposable.from(tabToAdd.onChanged((event) => {
+            tab.setContent(panel.view.tab);
+            const disposable = new CompositeDisposable(tab.onDragStart((event) => {
+                this._onTabDragStart.fire({ nativeEvent: event, panel });
+            }), tab.onChanged((event) => {
                 var _a;
                 const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
                 const isFloatingWithOnePanel = this.group.api.isFloating && this.size === 1;
@@ -3298,8 +3364,8 @@
                     !isFloatingWithOnePanel &&
                     event.shiftKey) {
                     event.preventDefault();
-                    const panel = this.accessor.getGroupPanel(tabToAdd.panelId);
-                    const { top, left } = tabToAdd.element.getBoundingClientRect();
+                    const panel = this.accessor.getGroupPanel(tab.panel.id);
+                    const { top, left } = tab.element.getBoundingClientRect();
                     const { top: rootTop, left: rootLeft } = this.accessor.element.getBoundingClientRect();
                     this.accessor.addFloatingGroup(panel, {
                         x: left - rootLeft,
@@ -3316,13 +3382,13 @@
                 this.group.model.openPanel(panel, {
                     skipFocus: alreadyFocused,
                 });
-            }), tabToAdd.onDrop((event) => {
+            }), tab.onDrop((event) => {
                 this._onDrop.fire({
                     event: event.nativeEvent,
-                    index: this.tabs.findIndex((x) => x.value === tabToAdd),
+                    index: this.tabs.findIndex((x) => x.value === tab),
                 });
             }));
-            const value = { value: tabToAdd, disposable };
+            const value = { value: tab, disposable };
             this.addTab(value, index);
         }
         closePanel(panel) {
@@ -3350,7 +3416,7 @@
         }
         set locked(value) {
             this._locked = value;
-            toggleClass(this.container, 'locked-groupview', value);
+            toggleClass(this.container, 'locked-groupview', value === 'no-drop-target' || value);
         }
         get isActive() {
             return this._isGroupActive;
@@ -3407,6 +3473,10 @@
             this.onMove = this._onMove.event;
             this._onDidDrop = new Emitter();
             this.onDidDrop = this._onDidDrop.event;
+            this._onTabDragStart = new Emitter();
+            this.onTabDragStart = this._onTabDragStart.event;
+            this._onGroupDragStart = new Emitter();
+            this.onGroupDragStart = this._onGroupDragStart.event;
             this._onDidAddPanel = new Emitter();
             this.onDidAddPanel = this._onDidAddPanel.event;
             this._onDidRemovePanel = new Emitter();
@@ -3419,7 +3489,8 @@
             this.dropTarget = new Droptarget(this.contentContainer.element, {
                 acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
                 canDisplayOverlay: (event, position) => {
-                    if (this.locked && position === 'center') {
+                    if (this.locked === 'no-drop-target' ||
+                        (this.locked && position === 'center')) {
                         return false;
                     }
                     const data = getPanelData();
@@ -3445,8 +3516,12 @@
             });
             container.append(this.tabsContainer.element, this.contentContainer.element);
             this.header.hidden = !!options.hideHeader;
-            this.locked = !!options.locked;
-            this.addDisposables(this.tabsContainer.onDrop((event) => {
+            this.locked = options.locked || false;
+            this.addDisposables(this._onTabDragStart, this._onGroupDragStart, this.tabsContainer.onTabDragStart((event) => {
+                this._onTabDragStart.fire(event);
+            }), this.tabsContainer.onGroupDragStart((event) => {
+                this._onGroupDragStart.fire(event);
+            }), this.tabsContainer.onDrop((event) => {
                 this.handleDropEvent(event.event, 'center', event.index);
             }), this.contentContainer.onDidFocus(() => {
                 this.accessor.doSetGroupActive(this.groupPanel, true);
@@ -3490,6 +3565,16 @@
                 });
                 this.tabsContainer.setLeftActionsElement(this._leftHeaderActions.element);
             }
+            if (this.accessor.options.createPrefixHeaderActionsElement) {
+                this._prefixHeaderActions =
+                    this.accessor.options.createPrefixHeaderActionsElement(this.groupPanel);
+                this.addDisposables(this._prefixHeaderActions);
+                this._prefixHeaderActions.init({
+                    containerApi: new DockviewApi(this.accessor),
+                    api: this.groupPanel.api,
+                });
+                this.tabsContainer.setPrefixActionsElement(this._prefixHeaderActions.element);
+            }
         }
         indexOf(panel) {
             return this.tabsContainer.indexOf(panel.id);
@@ -3501,8 +3586,8 @@
                 activeView: (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.id,
                 id: this.id,
             };
-            if (this.locked) {
-                result.locked = true;
+            if (this.locked !== false) {
+                result.locked = this.locked;
             }
             if (this.header.hidden) {
                 result.hideHeader = true;
@@ -3752,6 +3837,9 @@
             return false;
         }
         handleDropEvent(event, position, index) {
+            if (this.locked === 'no-drop-target') {
+                return;
+            }
             const data = getPanelData();
             if (data && data.viewId === this.accessor.id) {
                 if (data.panelId === null) {
@@ -3829,6 +3917,14 @@
                      */
                     return;
                 }
+                if (!document.body.contains(this._element)) {
+                    /**
+                     * since the event is dispatched through requestAnimationFrame there is a small chance
+                     * the component is no longer attached to the DOM, if that is the case the dimensions
+                     * are mostly likely all zero and meaningless. we should skip this case.
+                     */
+                    return;
+                }
                 const { width, height } = entry.contentRect;
                 this.layout(width, height);
             }));
@@ -5209,6 +5305,12 @@
         return pushToTop;
     })();
     class Overlay extends CompositeDisposable {
+        set minimumInViewportWidth(value) {
+            this.options.minimumInViewportWidth = value;
+        }
+        set minimumInViewportHeight(value) {
+            this.options.minimumInViewportHeight = value;
+        }
         constructor(options) {
             super();
             this.options = options;
@@ -5254,9 +5356,11 @@
             const overlayRect = this._element.getBoundingClientRect();
             // region: ensure bounds within allowable limits
             // a minimum width of minimumViewportWidth must be inside the viewport
-            const xOffset = Math.max(0, overlayRect.width - this.options.minimumInViewportWidth);
+            const xOffset = Math.max(0, this.getMinimumWidth(overlayRect.width));
             // a minimum height of minimumViewportHeight must be inside the viewport
-            const yOffset = Math.max(0, overlayRect.height - this.options.minimumInViewportHeight);
+            const yOffset = typeof this.options.minimumInViewportHeight === 'number'
+                ? Math.max(0, this.getMinimumHeight(overlayRect.height))
+                : 0;
             const left = clamp(overlayRect.left - containerRect.left, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
             const top = clamp(overlayRect.top - containerRect.top, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
             this._element.style.left = `${left}px`;
@@ -5302,9 +5406,10 @@
                             y: e.clientY - overlayRect.top,
                         };
                     }
-                    const xOffset = Math.max(0, overlayRect.width - this.options.minimumInViewportWidth);
-                    const yOffset = Math.max(0, overlayRect.height -
-                        this.options.minimumInViewportHeight);
+                    const xOffset = Math.max(0, this.getMinimumWidth(overlayRect.width));
+                    const yOffset = Math.max(0, this.options.minimumInViewportHeight
+                        ? this.getMinimumHeight(overlayRect.height)
+                        : 0);
                     const left = clamp(x - offset.x, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
                     const top = clamp(y - offset.y, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
                     this.setBounds({ top, left });
@@ -5378,14 +5483,11 @@
                     let height = undefined;
                     let left = undefined;
                     let width = undefined;
-                    const minimumInViewportHeight = this.options.minimumInViewportHeight;
-                    const minimumInViewportWidth = this.options.minimumInViewportWidth;
-                    function moveTop() {
+                    const moveTop = () => {
                         top = clamp(y, -Number.MAX_VALUE, startPosition.originalY +
                             startPosition.originalHeight >
                             containerRect.height
-                            ? containerRect.height -
-                                minimumInViewportHeight
+                            ? this.getMinimumHeight(containerRect.height)
                             : Math.max(0, startPosition.originalY +
                                 startPosition.originalHeight -
                                 Overlay.MINIMUM_HEIGHT));
@@ -5393,21 +5495,23 @@
                             startPosition.originalY +
                                 startPosition.originalHeight -
                                 top;
-                    }
-                    function moveBottom() {
+                    };
+                    const moveBottom = () => {
                         top =
                             startPosition.originalY -
                                 startPosition.originalHeight;
-                        height = clamp(y - top, top < 0
-                            ? -top + minimumInViewportHeight
+                        height = clamp(y - top, top < 0 &&
+                            typeof this.options
+                                .minimumInViewportHeight === 'number'
+                            ? -top +
+                                this.options.minimumInViewportHeight
                             : Overlay.MINIMUM_HEIGHT, Number.MAX_VALUE);
-                    }
-                    function moveLeft() {
+                    };
+                    const moveLeft = () => {
                         left = clamp(x, -Number.MAX_VALUE, startPosition.originalX +
                             startPosition.originalWidth >
                             containerRect.width
-                            ? containerRect.width -
-                                minimumInViewportWidth
+                            ? this.getMinimumWidth(containerRect.width)
                             : Math.max(0, startPosition.originalX +
                                 startPosition.originalWidth -
                                 Overlay.MINIMUM_WIDTH));
@@ -5415,15 +5519,18 @@
                             startPosition.originalX +
                                 startPosition.originalWidth -
                                 left;
-                    }
-                    function moveRight() {
+                    };
+                    const moveRight = () => {
                         left =
                             startPosition.originalX -
                                 startPosition.originalWidth;
-                        width = clamp(x - left, left < 0
-                            ? -left + minimumInViewportWidth
+                        width = clamp(x - left, left < 0 &&
+                            typeof this.options
+                                .minimumInViewportWidth === 'number'
+                            ? -left +
+                                this.options.minimumInViewportWidth
                             : Overlay.MINIMUM_WIDTH, Number.MAX_VALUE);
-                    }
+                    };
                     switch (direction) {
                         case 'top':
                             moveTop();
@@ -5467,6 +5574,18 @@
                 }));
             }));
         }
+        getMinimumWidth(width) {
+            if (typeof this.options.minimumInViewportWidth === 'number') {
+                return width - this.options.minimumInViewportWidth;
+            }
+            return 0;
+        }
+        getMinimumHeight(height) {
+            if (typeof this.options.minimumInViewportHeight === 'number') {
+                return height - this.options.minimumInViewportHeight;
+            }
+            return height;
+        }
         dispose() {
             this._element.remove();
             super.dispose();
@@ -5487,6 +5606,7 @@
         }
     }
 
+    const DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE = 100;
     class DockviewComponent extends BaseGrid {
         get orientation() {
             return this.gridview.orientation;
@@ -5517,6 +5637,10 @@
             this.nextGroupId = sequentialNumberGenerator();
             this._deserializer = new DefaultDockviewDeserialzier(this);
             this.watermark = null;
+            this._onWillDragPanel = new Emitter();
+            this.onWillDragPanel = this._onWillDragPanel.event;
+            this._onWillDragGroup = new Emitter();
+            this.onWillDragGroup = this._onWillDragGroup.event;
             this._onDidDrop = new Emitter();
             this.onDidDrop = this._onDidDrop.event;
             this._onDidRemovePanel = new Emitter();
@@ -5529,7 +5653,7 @@
             this.onDidActivePanelChange = this._onDidActivePanelChange.event;
             this.floatingGroups = [];
             toggleClass(this.gridview.element, 'dv-dockview', true);
-            this.addDisposables(this._onDidDrop, exports.DockviewEvent.any(this.onDidAddGroup, this.onDidRemoveGroup)(() => {
+            this.addDisposables(this._onWillDragPanel, this._onWillDragGroup, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, exports.DockviewEvent.any(this.onDidAddGroup, this.onDidRemoveGroup)(() => {
                 this.updateWatermark();
             }), exports.DockviewEvent.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
                 this._bufferOnDidLayoutChange.fire();
@@ -5602,7 +5726,7 @@
             this.updateWatermark();
         }
         addFloatingGroup(item, coord, options) {
-            var _a, _b;
+            var _a, _b, _c, _d, _e, _f;
             let group;
             if (item instanceof DockviewPanel) {
                 group = this.createGroup();
@@ -5630,8 +5754,12 @@
                 width: (_b = coord === null || coord === void 0 ? void 0 : coord.width) !== null && _b !== void 0 ? _b : 300,
                 left: overlayLeft,
                 top: overlayTop,
-                minimumInViewportWidth: 100,
-                minimumInViewportHeight: 100,
+                minimumInViewportWidth: this.options.floatingGroupBounds === 'boundedWithinViewport'
+                    ? undefined
+                    : (_d = (_c = this.options.floatingGroupBounds) === null || _c === void 0 ? void 0 : _c.minimumWidthWithinViewport) !== null && _d !== void 0 ? _d : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
+                minimumInViewportHeight: this.options.floatingGroupBounds === 'boundedWithinViewport'
+                    ? undefined
+                    : (_f = (_e = this.options.floatingGroupBounds) === null || _e === void 0 ? void 0 : _e.minimumHeightWithinViewport) !== null && _f !== void 0 ? _f : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
             });
             const el = group.element.querySelector('.void-container');
             if (!el) {
@@ -5702,12 +5830,37 @@
             }
         }
         updateOptions(options) {
+            var _a, _b;
             const hasOrientationChanged = typeof options.orientation === 'string' &&
                 this.gridview.orientation !== options.orientation;
+            const hasFloatingGroupOptionsChanged = options.floatingGroupBounds !== undefined &&
+                options.floatingGroupBounds !== this.options.floatingGroupBounds;
             this._options = Object.assign(Object.assign({}, this.options), options);
             if (hasOrientationChanged) {
                 this.gridview.orientation = options.orientation;
             }
+            if (hasFloatingGroupOptionsChanged) {
+                for (const group of this.floatingGroups) {
+                    switch (this.options.floatingGroupBounds) {
+                        case 'boundedWithinViewport':
+                            group.overlay.minimumInViewportHeight = undefined;
+                            group.overlay.minimumInViewportWidth = undefined;
+                            break;
+                        case undefined:
+                            group.overlay.minimumInViewportHeight =
+                                DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE;
+                            group.overlay.minimumInViewportWidth =
+                                DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE;
+                            break;
+                        default:
+                            group.overlay.minimumInViewportHeight =
+                                (_a = this.options.floatingGroupBounds) === null || _a === void 0 ? void 0 : _a.minimumHeightWithinViewport;
+                            group.overlay.minimumInViewportWidth =
+                                (_b = this.options.floatingGroupBounds) === null || _b === void 0 ? void 0 : _b.minimumWidthWithinViewport;
+                    }
+                    group.overlay.setBounds({});
+                }
+            }
             this.layout(this.gridview.width, this.gridview.height, true);
         }
         layout(width, height, forceResize) {
@@ -5800,61 +5953,114 @@
         fromJSON(data) {
             var _a;
             this.clear();
+            if (typeof data !== 'object' || data === null) {
+                throw new Error('serialized layout must be a non-null object');
+            }
             const { grid, panels, activeGroup } = data;
             if (grid.root.type !== 'branch' || !Array.isArray(grid.root.data)) {
                 throw new Error('root must be of type branch');
             }
-            // take note of the existing dimensions
-            const width = this.width;
-            const height = this.height;
-            const createGroupFromSerializedState = (data) => {
-                const { id, locked, hideHeader, views, activeView } = data;
-                const group = this.createGroup({
-                    id,
-                    locked: !!locked,
-                    hideHeader: !!hideHeader,
-                });
-                this._onDidAddGroup.fire(group);
-                for (const child of views) {
-                    const panel = this._deserializer.fromJSON(panels[child], group);
-                    const isActive = typeof activeView === 'string' && activeView === panel.id;
-                    group.model.openPanel(panel, {
-                        skipSetPanelActive: !isActive,
-                        skipSetGroupActive: true,
+            try {
+                // take note of the existing dimensions
+                const width = this.width;
+                const height = this.height;
+                const createGroupFromSerializedState = (data) => {
+                    const { id, locked, hideHeader, views, activeView } = data;
+                    if (typeof id !== 'string') {
+                        throw new Error('group id must be of type string');
+                    }
+                    const group = this.createGroup({
+                        id,
+                        locked: !!locked,
+                        hideHeader: !!hideHeader,
                     });
+                    const createdPanels = [];
+                    for (const child of views) {
+                        /**
+                         * Run the deserializer step seperately since this may fail to due corrupted external state.
+                         * In running this section first we avoid firing lots of 'add' events in the event of a failure
+                         * due to a corruption of input data.
+                         */
+                        const panel = this._deserializer.fromJSON(panels[child], group);
+                        createdPanels.push(panel);
+                    }
+                    this._onDidAddGroup.fire(group);
+                    for (let i = 0; i < views.length; i++) {
+                        const panel = createdPanels[i];
+                        const isActive = typeof activeView === 'string' &&
+                            activeView === panel.id;
+                        group.model.openPanel(panel, {
+                            skipSetPanelActive: !isActive,
+                            skipSetGroupActive: true,
+                        });
+                    }
+                    if (!group.activePanel && group.panels.length > 0) {
+                        group.model.openPanel(group.panels[group.panels.length - 1], {
+                            skipSetGroupActive: true,
+                        });
+                    }
+                    return group;
+                };
+                this.gridview.deserialize(grid, {
+                    fromJSON: (node) => {
+                        return createGroupFromSerializedState(node.data);
+                    },
+                });
+                this.layout(width, height, true);
+                const serializedFloatingGroups = (_a = data.floatingGroups) !== null && _a !== void 0 ? _a : [];
+                for (const serializedFloatingGroup of serializedFloatingGroups) {
+                    const { data, position } = serializedFloatingGroup;
+                    const group = createGroupFromSerializedState(data);
+                    this.addFloatingGroup(group, {
+                        x: position.left,
+                        y: position.top,
+                        height: position.height,
+                        width: position.width,
+                    }, { skipRemoveGroup: true, inDragMode: false });
+                }
+                for (const floatingGroup of this.floatingGroups) {
+                    floatingGroup.overlay.setBounds();
+                }
+                if (typeof activeGroup === 'string') {
+                    const panel = this.getPanel(activeGroup);
+                    if (panel) {
+                        this.doSetGroupActive(panel);
+                    }
                 }
-                if (!group.activePanel && group.panels.length > 0) {
-                    group.model.openPanel(group.panels[group.panels.length - 1], {
-                        skipSetGroupActive: true,
-                    });
+            }
+            catch (err) {
+                /**
+                 * Takes all the successfully created groups and remove all of their panels.
+                 */
+                for (const group of this.groups) {
+                    for (const panel of group.panels) {
+                        this.removePanel(panel, {
+                            removeEmptyGroup: false,
+                            skipDispose: false,
+                        });
+                    }
                 }
-                return group;
-            };
-            this.gridview.deserialize(grid, {
-                fromJSON: (node) => {
-                    return createGroupFromSerializedState(node.data);
-                },
-            });
-            this.layout(width, height, true);
-            const serializedFloatingGroups = (_a = data.floatingGroups) !== null && _a !== void 0 ? _a : [];
-            for (const serializedFloatingGroup of serializedFloatingGroups) {
-                const { data, position } = serializedFloatingGroup;
-                const group = createGroupFromSerializedState(data);
-                this.addFloatingGroup(group, {
-                    x: position.left,
-                    y: position.top,
-                    height: position.height,
-                    width: position.width,
-                }, { skipRemoveGroup: true, inDragMode: false });
-            }
-            for (const floatingGroup of this.floatingGroups) {
-                floatingGroup.overlay.setBounds();
-            }
-            if (typeof activeGroup === 'string') {
-                const panel = this.getPanel(activeGroup);
-                if (panel) {
-                    this.doSetGroupActive(panel);
+                /**
+                 * To remove a group we cannot call this.removeGroup(...) since this makes assumptions about
+                 * the underlying HTMLElement existing in the Gridview.
+                 */
+                for (const group of this.groups) {
+                    group.dispose();
+                    this._groups.delete(group.id);
+                    this._onDidRemoveGroup.fire(group);
                 }
+                // iterate over a reassigned array since original array will be modified
+                for (const floatingGroup of [...this.floatingGroups]) {
+                    floatingGroup.dispose();
+                }
+                // fires clean-up events and clears the underlying HTML gridview.
+                this.clear();
+                /**
+                 * even though we have cleaned-up we still want to inform the caller of their error
+                 * and we'll do this through re-throwing the original error since afterall you would
+                 * expect trying to load a corrupted layout to result in an error and not silently fail...
+                 */
+                throw err;
             }
             this._onDidLayoutFromJSON.fire();
         }
@@ -6068,6 +6274,7 @@
                 if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
                     floatingGroup.group.dispose();
                     this._groups.delete(group.id);
+                    // TODO: fire group removed event?
                 }
                 floatingGroup.dispose();
                 return floatingGroup.group;
@@ -6190,7 +6397,11 @@
             const view = new DockviewGroupPanel(this, id, options);
             view.init({ params: {}, accessor: null }); // required to initialized .part and allow for correct disposal of group
             if (!this._groups.has(view.id)) {
-                const disposable = new CompositeDisposable(view.model.onMove((event) => {
+                const disposable = new CompositeDisposable(view.model.onTabDragStart((event) => {
+                    this._onWillDragPanel.fire(event);
+                }), view.model.onGroupDragStart((event) => {
+                    this._onWillDragGroup.fire(event);
+                }), view.model.onMove((event) => {
                     const { groupId, itemId, target, index } = event;
                     this.moveGroupOrPanel(view, groupId, itemId, target, index);
                 }), view.model.onDidDrop((event) => {
@@ -6229,13 +6440,6 @@
             var _a;
             return (_a = Array.from(this._groups.values()).find((group) => group.value.model.containsPanel(panel))) === null || _a === void 0 ? void 0 : _a.value;
         }
-        dispose() {
-            this._onDidActivePanelChange.dispose();
-            this._onDidAddPanel.dispose();
-            this._onDidRemovePanel.dispose();
-            this._onDidLayoutFromJSON.dispose();
-            super.dispose();
-        }
     }
 
     class GridviewComponent extends BaseGrid {
@@ -6311,43 +6515,64 @@
         fromJSON(serializedGridview) {
             this.clear();
             const { grid, activePanel } = serializedGridview;
-            const queue = [];
-            // take note of the existing dimensions
-            const width = this.width;
-            const height = this.height;
-            this.gridview.deserialize(grid, {
-                fromJSON: (node) => {
-                    const { data } = node;
-                    const view = createComponent(data.id, data.component, this.options.components || {}, this.options.frameworkComponents || {}, this.options.frameworkComponentFactory
-                        ? {
-                            createComponent: this.options.frameworkComponentFactory
-                                .createComponent,
-                        }
-                        : undefined);
-                    queue.push(() => view.init({
-                        params: data.params,
-                        minimumWidth: data.minimumWidth,
-                        maximumWidth: data.maximumWidth,
-                        minimumHeight: data.minimumHeight,
-                        maximumHeight: data.maximumHeight,
-                        priority: data.priority,
-                        snap: !!data.snap,
-                        accessor: this,
-                        isVisible: node.visible,
-                    }));
-                    this._onDidAddGroup.fire(view);
-                    this.registerPanel(view);
-                    return view;
-                },
-            });
-            this.layout(width, height, true);
-            queue.forEach((f) => f());
-            if (typeof activePanel === 'string') {
-                const panel = this.getPanel(activePanel);
-                if (panel) {
-                    this.doSetGroupActive(panel);
+            try {
+                const queue = [];
+                // take note of the existing dimensions
+                const width = this.width;
+                const height = this.height;
+                this.gridview.deserialize(grid, {
+                    fromJSON: (node) => {
+                        const { data } = node;
+                        const view = createComponent(data.id, data.component, this.options.components || {}, this.options.frameworkComponents || {}, this.options.frameworkComponentFactory
+                            ? {
+                                createComponent: this.options.frameworkComponentFactory
+                                    .createComponent,
+                            }
+                            : undefined);
+                        queue.push(() => view.init({
+                            params: data.params,
+                            minimumWidth: data.minimumWidth,
+                            maximumWidth: data.maximumWidth,
+                            minimumHeight: data.minimumHeight,
+                            maximumHeight: data.maximumHeight,
+                            priority: data.priority,
+                            snap: !!data.snap,
+                            accessor: this,
+                            isVisible: node.visible,
+                        }));
+                        this._onDidAddGroup.fire(view);
+                        this.registerPanel(view);
+                        return view;
+                    },
+                });
+                this.layout(width, height, true);
+                queue.forEach((f) => f());
+                if (typeof activePanel === 'string') {
+                    const panel = this.getPanel(activePanel);
+                    if (panel) {
+                        this.doSetGroupActive(panel);
+                    }
                 }
             }
+            catch (err) {
+                /**
+                 * To remove a group we cannot call this.removeGroup(...) since this makes assumptions about
+                 * the underlying HTMLElement existing in the Gridview.
+                 */
+                for (const group of this.groups) {
+                    group.dispose();
+                    this._groups.delete(group.id);
+                    this._onDidRemoveGroup.fire(group);
+                }
+                // fires clean-up events and clears the underlying HTML gridview.
+                this.clear();
+                /**
+                 * even though we have cleaned-up we still want to inform the caller of their error
+                 * and we'll do this through re-throwing the original error since afterall you would
+                 * expect trying to load a corrupted layout to result in an error and not silently fail...
+                 */
+                throw err;
+            }
             this._onDidLayoutfromJSON.fire();
         }
         clear() {