dockview-react 1.14.1 → 1.15.0

package/dist/dockview-react.amd.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview-react
- * @version 1.14.1
+ * @version 1.15.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -528,6 +528,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         return false;
     }
+    function addTestId(element, id) {
+        element.setAttribute('data-testid', id);
+    }
 
     function tail(arr) {
         if (arr.length === 0) {
@@ -589,7 +592,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
 
     const clamp = (value, min, max) => {
         if (min > max) {
-            throw new Error(`${min} > ${max} is an invalid condition`);
+            /**
+             * caveat: an error should be thrown here if this was a proper `clamp` function but we need to handle
+             * cases where `min` > `max` and in those cases return `min`.
+             */
+            return min;
         }
         return Math.min(max, Math.max(value, min));
     };
@@ -794,7 +801,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._disabled = value;
             toggleClass(this.element, 'dv-splitview-disabled', value);
         }
+        get margin() {
+            return this._margin;
+        }
+        set margin(value) {
+            this._margin = value;
+        }
         constructor(container, options) {
+            var _a;
             this.container = container;
             this.viewItems = [];
             this.sashes = [];
@@ -805,6 +819,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._startSnappingEnabled = true;
             this._endSnappingEnabled = true;
             this._disabled = false;
+            this._margin = 0;
             this._onDidSashEnd = new Emitter();
             this.onDidSashEnd = this._onDidSashEnd.event;
             this._onDidAddView = new Emitter();
@@ -893,6 +908,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             };
             this._orientation = options.orientation;
             this.element = this.createContainer();
+            this.margin = (_a = options.margin) !== null && _a !== void 0 ? _a : 0;
             this.proportionalLayout =
                 options.proportionalLayout === undefined
                     ? true
@@ -947,9 +963,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             if (index < 0 || index >= this.viewItems.length) {
                 throw new Error('Index out of bounds');
             }
-            toggleClass(this.container, 'visible', visible);
             const viewItem = this.viewItems[index];
-            toggleClass(this.container, 'visible', visible);
             viewItem.setVisible(visible, viewItem.size);
             this.distributeEmptySpace(index);
             this.layoutViews();
@@ -1261,15 +1275,29 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 this._proportions = this.viewItems.map((i) => i.visible ? i.size / this._contentSize : undefined);
             }
         }
+        /**
+         * Margin explain:
+         *
+         * For `n` views in a splitview there will be `n-1` margins `m`.
+         *
+         * To fit the margins each view must reduce in size by `(m * (n - 1)) / n`.
+         *
+         * For each view `i` the offet must be adjusted by `m * i/(n - 1)`.
+         */
         layoutViews() {
             this._contentSize = this.viewItems.reduce((r, i) => r + i.size, 0);
-            let sum = 0;
-            const x = [];
             this.updateSashEnablement();
+            if (this.viewItems.length === 0) {
+                return;
+            }
+            const sashCount = this.viewItems.length - 1;
+            const marginReducedSize = (this.margin * sashCount) / this.viewItems.length;
+            let totalLeftOffset = 0;
+            const viewLeftOffsets = [];
             for (let i = 0; i < this.viewItems.length - 1; i++) {
-                sum += this.viewItems[i].size;
-                x.push(sum);
-                const offset = Math.min(Math.max(0, sum - 2), this.size - 4);
+                totalLeftOffset += this.viewItems[i].size;
+                viewLeftOffsets.push(totalLeftOffset);
+                const offset = Math.min(Math.max(0, totalLeftOffset - 2), this.size - this.margin);
                 if (this._orientation === exports.Orientation.HORIZONTAL) {
                     this.sashes[i].container.style.left = `${offset}px`;
                     this.sashes[i].container.style.top = `0px`;
@@ -1280,19 +1308,24 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 }
             }
             this.viewItems.forEach((view, i) => {
+                const size = view.size - marginReducedSize;
+                const offset = i === 0
+                    ? 0
+                    : viewLeftOffsets[i - 1] +
+                        (i / sashCount) * marginReducedSize;
                 if (this._orientation === exports.Orientation.HORIZONTAL) {
-                    view.container.style.width = `${view.size}px`;
-                    view.container.style.left = i == 0 ? '0px' : `${x[i - 1]}px`;
+                    view.container.style.width = `${size}px`;
+                    view.container.style.left = `${offset}px`;
                     view.container.style.top = '';
                     view.container.style.height = '';
                 }
                 if (this._orientation === exports.Orientation.VERTICAL) {
-                    view.container.style.height = `${view.size}px`;
-                    view.container.style.top = i == 0 ? '0px' : `${x[i - 1]}px`;
+                    view.container.style.height = `${size}px`;
+                    view.container.style.top = `${offset}px`;
                     view.container.style.width = '';
                     view.container.style.left = '';
                 }
-                view.view.layout(view.size, this._orthogonalSize);
+                view.view.layout(view.size - marginReducedSize, this._orthogonalSize);
             });
         }
         findFirstSnapIndex(indexes) {
@@ -1741,7 +1774,18 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         set disabled(value) {
             this.splitview.disabled = value;
         }
-        constructor(orientation, proportionalLayout, styles, size, orthogonalSize, disabled, childDescriptors) {
+        get margin() {
+            return this.splitview.margin;
+        }
+        set margin(value) {
+            this.splitview.margin = value;
+            this.children.forEach((child) => {
+                if (child instanceof BranchNode) {
+                    child.margin = value;
+                }
+            });
+        }
+        constructor(orientation, proportionalLayout, styles, size, orthogonalSize, disabled, margin, childDescriptors) {
             super();
             this.orientation = orientation;
             this.proportionalLayout = proportionalLayout;
@@ -1761,6 +1805,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     orientation: this.orientation,
                     proportionalLayout,
                     styles,
+                    margin,
                 });
                 this.splitview.layout(this.size, this.orthogonalSize);
             }
@@ -1784,6 +1829,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     descriptor,
                     proportionalLayout,
                     styles,
+                    margin,
                 });
             }
             this.disabled = disabled;
@@ -1792,10 +1838,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }));
             this.setupChildrenEvents();
         }
-        setVisible(visible) {
-            for (const child of this.children) {
-                child.setVisible(visible);
-            }
+        setVisible(_visible) {
+            // noop
         }
         isChildVisible(index) {
             if (index < 0 || index >= this.children.length) {
@@ -1812,12 +1856,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             const wereAllChildrenHidden = this.splitview.contentSize === 0;
             this.splitview.setViewVisible(index, visible);
+            // }
             const areAllChildrenHidden = this.splitview.contentSize === 0;
             // If all children are hidden then the parent should hide the entire splitview
             // If the entire splitview is hidden then the parent should show the splitview when a child is shown
             if ((visible && wereAllChildrenHidden) ||
                 (!visible && areAllChildrenHidden)) {
-                this._onDidVisibilityChange.fire(visible);
+                this._onDidVisibilityChange.fire({ visible });
             }
         }
         moveChild(from, to) {
@@ -1890,7 +1935,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 this._onDidChange.fire({ size: e.orthogonalSize });
             }), ...this.children.map((c, i) => {
                 if (c instanceof BranchNode) {
-                    return c.onDidVisibilityChange((visible) => {
+                    return c.onDidVisibilityChange(({ visible }) => {
                         this.setChildVisible(i, visible);
                     });
                 }
@@ -1920,7 +1965,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     }
     function flipNode(node, size, orthogonalSize) {
         if (node instanceof BranchNode) {
-            const result = new BranchNode(orthogonal(node.orientation), node.proportionalLayout, node.styles, size, orthogonalSize, node.disabled);
+            const result = new BranchNode(orthogonal(node.orientation), node.proportionalLayout, node.styles, size, orthogonalSize, node.disabled, node.margin);
             let totalSize = 0;
             for (let i = node.children.length - 1; i >= 0; i--) {
                 const child = node.children[i];
@@ -2075,6 +2120,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 }
             }
         }
+        get margin() {
+            return this._margin;
+        }
+        set margin(value) {
+            this._margin = value;
+            this.root.margin = value;
+        }
         maximizedView() {
             var _a;
             return (_a = this._maximizedNode) === null || _a === void 0 ? void 0 : _a.leaf.view;
@@ -2160,13 +2212,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.disposable.dispose();
             this._onDidChange.dispose();
             this._onDidMaximizedNodeChange.dispose();
+            this._onDidViewVisibilityChange.dispose();
             this.root.dispose();
             this._maximizedNode = undefined;
             this.element.remove();
         }
         clear() {
             const orientation = this.root.orientation;
-            this.root = new BranchNode(orientation, this.proportionalLayout, this.styles, this.root.size, this.root.orthogonalSize, this._locked);
+            this.root = new BranchNode(orientation, this.proportionalLayout, this.styles, this.root.size, this.root.orthogonalSize, this.locked, this.margin);
         }
         deserialize(json, deserializer) {
             const orientation = json.orientation;
@@ -2177,6 +2230,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.root = this._deserializeNode(root, orientation, deserializer, orthogonalSize);
         }
         _deserializeNode(node, orientation, deserializer, orthogonalSize) {
+            var _a;
             let result;
             if (node.type === 'branch') {
                 const serializedChildren = node.data;
@@ -2188,10 +2242,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 });
                 result = new BranchNode(orientation, this.proportionalLayout, this.styles, node.size, // <- orthogonal size - flips at each depth
                 orthogonalSize, // <- size - flips at each depth,
-                this._locked, children);
+                this.locked, this.margin, children);
             }
             else {
-                result = new LeafNode(deserializer.fromJSON(node), orientation, orthogonalSize, node.size);
+                const view = deserializer.fromJSON(node);
+                if (typeof node.visible === 'boolean') {
+                    (_a = view.setVisible) === null || _a === void 0 ? void 0 : _a.call(view, node.visible);
+                }
+                result = new LeafNode(view, orientation, orthogonalSize, node.size);
             }
             return result;
         }
@@ -2221,7 +2279,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             const oldRoot = this.root;
             oldRoot.element.remove();
-            this._root = new BranchNode(orthogonal(oldRoot.orientation), this.proportionalLayout, this.styles, this.root.orthogonalSize, this.root.size, this._locked);
+            this._root = new BranchNode(orthogonal(oldRoot.orientation), this.proportionalLayout, this.styles, this.root.orthogonalSize, this.root.size, this.locked, this.margin);
             if (oldRoot.children.length === 0) ;
             else if (oldRoot.children.length === 1) {
                 // can remove one level of redundant branching if there is only a single child
@@ -2286,19 +2344,24 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             return findLeaf(this.root, reverse);
         }
-        constructor(proportionalLayout, styles, orientation) {
+        constructor(proportionalLayout, styles, orientation, locked, margin) {
             this.proportionalLayout = proportionalLayout;
             this.styles = styles;
             this._locked = false;
+            this._margin = 0;
             this._maximizedNode = undefined;
             this.disposable = new MutableDisposable();
             this._onDidChange = new Emitter();
             this.onDidChange = this._onDidChange.event;
+            this._onDidViewVisibilityChange = new Emitter();
+            this.onDidViewVisibilityChange = this._onDidViewVisibilityChange.event;
             this._onDidMaximizedNodeChange = new Emitter();
             this.onDidMaximizedNodeChange = this._onDidMaximizedNodeChange.event;
             this.element = document.createElement('div');
             this.element.className = 'grid-view';
-            this.root = new BranchNode(orientation, proportionalLayout, styles, 0, 0, this._locked);
+            this._locked = locked !== null && locked !== void 0 ? locked : false;
+            this._margin = margin !== null && margin !== void 0 ? margin : 0;
+            this.root = new BranchNode(orientation, proportionalLayout, styles, 0, 0, this.locked, this.margin);
         }
         isViewVisible(location) {
             const [rest, index] = tail(location);
@@ -2317,6 +2380,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             if (!(parent instanceof BranchNode)) {
                 throw new Error('Invalid from location');
             }
+            this._onDidViewVisibilityChange.fire();
             parent.setChildVisible(index, visible);
         }
         moveView(parentLocation, from, to) {
@@ -2349,7 +2413,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 }
                 const child = grandParent.removeChild(parentIndex);
                 child.dispose();
-                const newParent = new BranchNode(parent.orientation, this.proportionalLayout, this.styles, parent.size, parent.orthogonalSize, this._locked);
+                const newParent = new BranchNode(parent.orientation, this.proportionalLayout, this.styles, parent.size, parent.orthogonalSize, this.locked, this.margin);
                 grandParent.addChild(newParent, parent.size, parentIndex);
                 const newSibling = new LeafNode(parent.view, grandParent.orientation, parent.size);
                 newParent.addChild(newSibling, newSiblingSize, 0);
@@ -2588,14 +2652,18 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.onDidActiveChange = this._onDidActiveChange.event;
             this._bufferOnDidLayoutChange = new AsapEvent();
             this.onDidLayoutChange = this._bufferOnDidLayoutChange.onEvent;
+            this._onDidViewVisibilityChangeMicroTaskQueue = new AsapEvent();
+            this.onDidViewVisibilityChangeMicroTaskQueue = this._onDidViewVisibilityChangeMicroTaskQueue.onEvent;
             this.element.style.height = '100%';
             this.element.style.width = '100%';
             options.parentElement.appendChild(this.element);
-            this.gridview = new Gridview(!!options.proportionalLayout, options.styles, options.orientation);
+            this.gridview = new Gridview(!!options.proportionalLayout, options.styles, options.orientation, options.locked, options.margin);
             this.gridview.locked = !!options.locked;
             this.element.appendChild(this.gridview.element);
             this.layout(0, 0, true); // set some elements height/widths
-            this.addDisposables(exports.DockviewDisposable.from(() => {
+            this.addDisposables(this.gridview.onDidViewVisibilityChange(() => this._onDidViewVisibilityChangeMicroTaskQueue.fire()), this.onDidViewVisibilityChangeMicroTaskQueue(() => {
+                this.layout(this.width, this.height, true);
+            }), exports.DockviewDisposable.from(() => {
                 var _a;
                 (_a = this.element.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this.element);
             }), this.gridview.onDidChange(() => {
@@ -3209,6 +3277,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         get onDidRemovePanel() {
             return this.component.onDidRemovePanel;
         }
+        get onDidMovePanel() {
+            return this.component.onDidMovePanel;
+        }
         /**
          * Invoked after a layout is deserialzied using the `fromJSON` method.
          */
@@ -3349,8 +3420,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         /**
          * Add a floating group
          */
-        addFloatingGroup(item, coord) {
-            return this.component.addFloatingGroup(item, coord);
+        addFloatingGroup(item, options) {
+            return this.component.addFloatingGroup(item, options);
         }
         /**
          * Create a component from a serialized object.
@@ -3400,6 +3471,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         addPopoutGroup(item, options) {
             return this.component.addPopoutGroup(item, options);
         }
+        setGap(gap) {
+            this.component.updateOptions({ gap });
+        }
     }
 
     class DragHandler extends CompositeDisposable {
@@ -4769,7 +4843,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     this.accessor.addFloatingGroup(this.group, {
                         x: left - rootLeft + 20,
                         y: top - rootTop + 20,
-                    }, { inDragMode: true });
+                        inDragMode: true,
+                    });
                 }
             }), addDisposableListener(this.tabContainer, 'mousedown', (event) => {
                 if (event.defaultPrevented) {
@@ -4838,7 +4913,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     this.accessor.addFloatingGroup(panel, {
                         x: left - rootLeft,
                         y: top - rootTop,
-                    }, { inDragMode: true });
+                        inDragMode: true,
+                    });
                     return;
                 }
                 const isLeftClick = event.button === 0;
@@ -4911,6 +4987,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             rootOverlayModel: undefined,
             locked: undefined,
             disableDnd: undefined,
+            gap: undefined,
         };
         return Object.keys(properties);
     })();
@@ -5641,6 +5718,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         get isActive() {
             return this.api.isActive;
         }
+        get isVisible() {
+            return this.api.isVisible;
+        }
         constructor(id, component, options, api) {
             super(id, component, api !== null && api !== void 0 ? api : new GridviewPanelApiImpl(id, component));
             this._evaluatedMinimumWidth = 0;
@@ -6177,52 +6257,40 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         constructor() {
             super();
-            //
-            this.params = {};
             this._element = document.createElement('div');
             this._element.className = 'dv-default-tab';
-            //
             this._content = document.createElement('div');
             this._content.className = 'dv-default-tab-content';
             this.action = document.createElement('div');
             this.action.className = 'dv-default-tab-action';
             this.action.appendChild(createCloseButton());
-            //
             this._element.appendChild(this._content);
             this._element.appendChild(this.action);
-            //
             this.addDisposables(addDisposableListener(this.action, 'mousedown', (ev) => {
                 ev.preventDefault();
             }));
             this.render();
         }
-        update(event) {
-            this.params = Object.assign(Object.assign({}, this.params), event.params);
-            this.render();
-        }
-        focus() {
-            //noop
-        }
         init(params) {
-            this.params = params;
-            this._content.textContent = params.title;
-            addDisposableListener(this.action, 'click', (ev) => {
-                ev.preventDefault(); //
-                this.params.api.close();
-            });
-        }
-        onGroupChange(_group) {
-            this.render();
-        }
-        onPanelVisibleChange(_isPanelVisible) {
+            this._title = params.title;
+            this.addDisposables(params.api.onDidTitleChange((event) => {
+                this._title = event.title;
+                this.render();
+            }), addDisposableListener(this.action, 'mousedown', (ev) => {
+                ev.preventDefault();
+            }), addDisposableListener(this.action, 'click', (ev) => {
+                if (ev.defaultPrevented) {
+                    return;
+                }
+                ev.preventDefault();
+                params.api.close();
+            }));
             this.render();
         }
-        layout(_width, _height) {
-            // noop
-        }
         render() {
-            if (this._content.textContent !== this.params.title) {
-                this._content.textContent = this.params.title;
+            var _a;
+            if (this._content.textContent !== this._title) {
+                this._content.textContent = (_a = this._title) !== null && _a !== void 0 ? _a : '';
             }
         }
     }
@@ -6415,12 +6483,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._element.appendChild(this.options.content);
             this.options.container.appendChild(this._element);
             // if input bad resize within acceptable boundaries
-            this.setBounds({
-                height: this.options.height,
-                width: this.options.width,
-                top: this.options.top,
-                left: this.options.left,
-            });
+            this.setBounds(Object.assign(Object.assign(Object.assign(Object.assign({ height: this.options.height, width: this.options.width }, ('top' in this.options && { top: this.options.top })), ('bottom' in this.options && { bottom: this.options.bottom })), ('left' in this.options && { left: this.options.left })), ('right' in this.options && { right: this.options.right })));
         }
         setBounds(bounds = {}) {
             if (typeof bounds.height === 'number') {
@@ -6429,11 +6492,25 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             if (typeof bounds.width === 'number') {
                 this._element.style.width = `${bounds.width}px`;
             }
-            if (typeof bounds.top === 'number') {
+            if ('top' in bounds && typeof bounds.top === 'number') {
                 this._element.style.top = `${bounds.top}px`;
+                this._element.style.bottom = 'auto';
+                this.verticalAlignment = 'top';
+            }
+            if ('bottom' in bounds && typeof bounds.bottom === 'number') {
+                this._element.style.bottom = `${bounds.bottom}px`;
+                this._element.style.top = 'auto';
+                this.verticalAlignment = 'bottom';
             }
-            if (typeof bounds.left === 'number') {
+            if ('left' in bounds && typeof bounds.left === 'number') {
                 this._element.style.left = `${bounds.left}px`;
+                this._element.style.right = 'auto';
+                this.horiziontalAlignment = 'left';
+            }
+            if ('right' in bounds && typeof bounds.right === 'number') {
+                this._element.style.right = `${bounds.right}px`;
+                this._element.style.left = 'auto';
+                this.horiziontalAlignment = 'right';
             }
             const containerRect = this.options.container.getBoundingClientRect();
             const overlayRect = this._element.getBoundingClientRect();
@@ -6441,24 +6518,54 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             // a minimum width of minimumViewportWidth must be inside the viewport
             const xOffset = Math.max(0, this.getMinimumWidth(overlayRect.width));
             // a minimum height of minimumViewportHeight must be inside the viewport
-            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`;
-            this._element.style.top = `${top}px`;
+            const yOffset = Math.max(0, this.getMinimumHeight(overlayRect.height));
+            if (this.verticalAlignment === 'top') {
+                const top = clamp(overlayRect.top - containerRect.top, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
+                this._element.style.top = `${top}px`;
+                this._element.style.bottom = 'auto';
+            }
+            if (this.verticalAlignment === 'bottom') {
+                const bottom = clamp(containerRect.bottom - overlayRect.bottom, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
+                this._element.style.bottom = `${bottom}px`;
+                this._element.style.top = 'auto';
+            }
+            if (this.horiziontalAlignment === 'left') {
+                const left = clamp(overlayRect.left - containerRect.left, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
+                this._element.style.left = `${left}px`;
+                this._element.style.right = 'auto';
+            }
+            if (this.horiziontalAlignment === 'right') {
+                const right = clamp(containerRect.right - overlayRect.right, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
+                this._element.style.right = `${right}px`;
+                this._element.style.left = 'auto';
+            }
             this._onDidChange.fire();
         }
         toJSON() {
             const container = this.options.container.getBoundingClientRect();
             const element = this._element.getBoundingClientRect();
-            return {
-                top: element.top - container.top,
-                left: element.left - container.left,
-                width: element.width,
-                height: element.height,
-            };
+            const result = {};
+            if (this.verticalAlignment === 'top') {
+                result.top = parseFloat(this._element.style.top);
+            }
+            else if (this.verticalAlignment === 'bottom') {
+                result.bottom = parseFloat(this._element.style.bottom);
+            }
+            else {
+                result.top = element.top - container.top;
+            }
+            if (this.horiziontalAlignment === 'left') {
+                result.left = parseFloat(this._element.style.left);
+            }
+            else if (this.horiziontalAlignment === 'right') {
+                result.right = parseFloat(this._element.style.right);
+            }
+            else {
+                result.left = element.left - container.left;
+            }
+            result.width = element.width;
+            result.height = element.height;
+            return result;
         }
         setupDrag(dragTarget, options = { inDragMode: false }) {
             const move = new MutableDisposable();
@@ -6490,12 +6597,30 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         };
                     }
                     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 yOffset = Math.max(0, this.getMinimumHeight(overlayRect.height));
                     const top = clamp(y - offset.y, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
-                    this.setBounds({ top, left });
+                    const bottom = clamp(offset.y -
+                        y +
+                        containerRect.height -
+                        overlayRect.height, -yOffset, Math.max(0, containerRect.height - overlayRect.height + yOffset));
+                    const left = clamp(x - offset.x, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
+                    const right = clamp(offset.x - x + containerRect.width - overlayRect.width, -xOffset, Math.max(0, containerRect.width - overlayRect.width + xOffset));
+                    const bounds = {};
+                    // Anchor to top or to bottom depending on which one is closer
+                    if (top <= bottom) {
+                        bounds.top = top;
+                    }
+                    else {
+                        bounds.bottom = bottom;
+                    }
+                    // Anchor to left or to right depending on which one is closer
+                    if (left <= right) {
+                        bounds.left = left;
+                    }
+                    else {
+                        bounds.right = right;
+                    }
+                    this.setBounds(bounds);
                 }), addDisposableWindowListener(window, 'mouseup', () => {
                     toggleClass(this._element, 'dv-resize-container-dragging', false);
                     move.dispose();
@@ -6563,8 +6688,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         };
                     }
                     let top = undefined;
+                    let bottom = undefined;
                     let height = undefined;
                     let left = undefined;
+                    let right = undefined;
                     let width = undefined;
                     const moveTop = () => {
                         top = clamp(y, -Number.MAX_VALUE, startPosition.originalY +
@@ -6578,6 +6705,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                             startPosition.originalY +
                                 startPosition.originalHeight -
                                 top;
+                        bottom = containerRect.height - top - height;
                     };
                     const moveBottom = () => {
                         top =
@@ -6589,6 +6717,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                             ? -top +
                                 this.options.minimumInViewportHeight
                             : Overlay.MINIMUM_HEIGHT, Number.MAX_VALUE);
+                        bottom = containerRect.height - top - height;
                     };
                     const moveLeft = () => {
                         left = clamp(x, -Number.MAX_VALUE, startPosition.originalX +
@@ -6602,6 +6731,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                             startPosition.originalX +
                                 startPosition.originalWidth -
                                 left;
+                        right = containerRect.width - left - width;
                     };
                     const moveRight = () => {
                         left =
@@ -6613,6 +6743,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                             ? -left +
                                 this.options.minimumInViewportWidth
                             : Overlay.MINIMUM_WIDTH, Number.MAX_VALUE);
+                        right = containerRect.width - left - width;
                     };
                     switch (direction) {
                         case 'top':
@@ -6644,7 +6775,24 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                             moveRight();
                             break;
                     }
-                    this.setBounds({ height, width, top, left });
+                    const bounds = {};
+                    // Anchor to top or to bottom depending on which one is closer
+                    if (top <= bottom) {
+                        bounds.top = top;
+                    }
+                    else {
+                        bounds.bottom = bottom;
+                    }
+                    // Anchor to left or to right depending on which one is closer
+                    if (left <= right) {
+                        bounds.left = left;
+                    }
+                    else {
+                        bounds.right = right;
+                    }
+                    bounds.height = height;
+                    bounds.width = width;
+                    this.setBounds(bounds);
                 }), {
                     dispose: () => {
                         for (const iframe of iframes) {
@@ -6667,7 +6815,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             if (typeof this.options.minimumInViewportHeight === 'number') {
                 return height - this.options.minimumInViewportHeight;
             }
-            return height;
+            return 0;
         }
         dispose() {
             this._element.remove();
@@ -6690,7 +6838,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
     }
 
     const DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE = 100;
-    const DEFAULT_FLOATING_GROUP_POSITION = { left: 100, top: 100 };
+    const DEFAULT_FLOATING_GROUP_POSITION = { left: 100, top: 100, width: 300, height: 300 };
 
     function createFocusableElement() {
         const element = document.createElement('div');
@@ -7033,6 +7181,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 parentElement: options.parentElement,
                 disableAutoResizing: options.disableAutoResizing,
                 locked: options.locked,
+                margin: options.gap,
             });
             this.nextGroupId = sequentialNumberGenerator();
             this._deserializer = new DefaultDockviewDeserialzier(this);
@@ -7058,9 +7207,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._onDidActivePanelChange = new Emitter();
             this.onDidActivePanelChange = this._onDidActivePanelChange.event;
             this._onDidMovePanel = new Emitter();
+            this.onDidMovePanel = this._onDidMovePanel.event;
             this._floatingGroups = [];
             this._popoutGroups = [];
-            this._ignoreEvents = 0;
             this._onDidRemoveGroup = new Emitter();
             this.onDidRemoveGroup = this._onDidRemoveGroup.event;
             this._onDidAddGroup = new Emitter();
@@ -7074,7 +7223,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.overlayRenderContainer = new OverlayRenderContainer(gready);
             toggleClass(this.gridview.element, 'dv-dockview', true);
             toggleClass(this.element, 'dv-debug', !!options.debug);
-            this.addDisposables(this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onWillShowOverlay, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, this._onWillDrop, this._onDidMovePanel, this._onDidAddGroup, this._onDidRemoveGroup, this._onDidActiveGroupChange, this._onUnhandledDragOverEvent, this.onDidAdd((event) => {
+            this.addDisposables(this.overlayRenderContainer, this._onWillDragPanel, this._onWillDragGroup, this._onWillShowOverlay, this._onDidActivePanelChange, this._onDidAddPanel, this._onDidRemovePanel, this._onDidLayoutFromJSON, this._onDidDrop, this._onWillDrop, this._onDidMovePanel, this._onDidAddGroup, this._onDidRemoveGroup, this._onDidActiveGroupChange, this._onUnhandledDragOverEvent, this.onDidViewVisibilityChangeMicroTaskQueue(() => {
+                this.updateWatermark();
+            }), this.onDidAdd((event) => {
                 if (!this._moving) {
                     this._onDidAddGroup.fire(event);
                 }
@@ -7088,7 +7239,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 }
             }), exports.DockviewEvent.any(this.onDidAdd, this.onDidRemove)(() => {
                 this.updateWatermark();
-            }), exports.DockviewEvent.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
+            }), exports.DockviewEvent.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidAddGroup, this.onDidRemove, this.onDidMovePanel, this.onDidActivePanelChange)(() => {
                 this._bufferOnDidLayoutChange.fire();
             }), exports.DockviewDisposable.from(() => {
                 // iterate over a copy of the array since .dispose() mutates the original array
@@ -7339,8 +7490,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 console.error('dockview: failed to create popout window', err);
             });
         }
-        addFloatingGroup(item, coord, options) {
-            var _a, _b, _c, _d, _e, _f, _g;
+        addFloatingGroup(item, options) {
+            var _a, _b, _c, _d, _e;
             let group;
             if (item instanceof DockviewPanel) {
                 group = this.createGroup();
@@ -7385,26 +7536,62 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 }
             }
             group.model.location = { type: 'floating' };
-            const overlayLeft = typeof (coord === null || coord === void 0 ? void 0 : coord.x) === 'number'
-                ? Math.max(coord.x, 0)
-                : DEFAULT_FLOATING_GROUP_POSITION.left;
-            const overlayTop = typeof (coord === null || coord === void 0 ? void 0 : coord.y) === 'number'
-                ? Math.max(coord.y, 0)
-                : DEFAULT_FLOATING_GROUP_POSITION.top;
-            const overlay = new Overlay({
-                container: this.gridview.element,
-                content: group.element,
-                height: (_b = coord === null || coord === void 0 ? void 0 : coord.height) !== null && _b !== void 0 ? _b : 300,
-                width: (_c = coord === null || coord === void 0 ? void 0 : coord.width) !== null && _c !== void 0 ? _c : 300,
-                left: overlayLeft,
-                top: overlayTop,
-                minimumInViewportWidth: this.options.floatingGroupBounds === 'boundedWithinViewport'
+            function getAnchoredBox() {
+                if (options === null || options === void 0 ? void 0 : options.position) {
+                    const result = {};
+                    if ('left' in options.position) {
+                        result.left = Math.max(options.position.left, 0);
+                    }
+                    else if ('right' in options.position) {
+                        result.right = Math.max(options.position.right, 0);
+                    }
+                    else {
+                        result.left = DEFAULT_FLOATING_GROUP_POSITION.left;
+                    }
+                    if ('top' in options.position) {
+                        result.top = Math.max(options.position.top, 0);
+                    }
+                    else if ('bottom' in options.position) {
+                        result.bottom = Math.max(options.position.bottom, 0);
+                    }
+                    else {
+                        result.top = DEFAULT_FLOATING_GROUP_POSITION.top;
+                    }
+                    if ('width' in options.position) {
+                        result.width = Math.max(options.position.width, 0);
+                    }
+                    else {
+                        result.width = DEFAULT_FLOATING_GROUP_POSITION.width;
+                    }
+                    if ('height' in options.position) {
+                        result.height = Math.max(options.position.height, 0);
+                    }
+                    else {
+                        result.height = DEFAULT_FLOATING_GROUP_POSITION.height;
+                    }
+                    return result;
+                }
+                return {
+                    left: typeof (options === null || options === void 0 ? void 0 : options.x) === 'number'
+                        ? Math.max(options.x, 0)
+                        : DEFAULT_FLOATING_GROUP_POSITION.left,
+                    top: typeof (options === null || options === void 0 ? void 0 : options.y) === 'number'
+                        ? Math.max(options.y, 0)
+                        : DEFAULT_FLOATING_GROUP_POSITION.top,
+                    width: typeof (options === null || options === void 0 ? void 0 : options.width) === 'number'
+                        ? Math.max(options.width, 0)
+                        : DEFAULT_FLOATING_GROUP_POSITION.width,
+                    height: typeof (options === null || options === void 0 ? void 0 : options.height) === 'number'
+                        ? Math.max(options.height, 0)
+                        : DEFAULT_FLOATING_GROUP_POSITION.height,
+                };
+            }
+            const anchoredBox = getAnchoredBox();
+            const overlay = new Overlay(Object.assign(Object.assign({ container: this.gridview.element, content: group.element }, anchoredBox), { minimumInViewportWidth: this.options.floatingGroupBounds === 'boundedWithinViewport'
                     ? undefined
-                    : (_e = (_d = this.options.floatingGroupBounds) === null || _d === void 0 ? void 0 : _d.minimumWidthWithinViewport) !== null && _e !== void 0 ? _e : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
-                minimumInViewportHeight: this.options.floatingGroupBounds === 'boundedWithinViewport'
+                    : (_c = (_b = this.options.floatingGroupBounds) === null || _b === void 0 ? void 0 : _b.minimumWidthWithinViewport) !== null && _c !== void 0 ? _c : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE, minimumInViewportHeight: this.options.floatingGroupBounds === 'boundedWithinViewport'
                     ? undefined
-                    : (_g = (_f = this.options.floatingGroupBounds) === null || _f === void 0 ? void 0 : _f.minimumHeightWithinViewport) !== null && _g !== void 0 ? _g : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE,
-            });
+                    : (_e = (_d = this.options.floatingGroupBounds) === null || _d === void 0 ? void 0 : _d.minimumHeightWithinViewport) !== null && _e !== void 0 ? _e : DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE }));
             const el = group.element.querySelector('.void-container');
             if (!el) {
                 throw new Error('failed to find drag handle');
@@ -7502,12 +7689,18 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                             group.overlay.minimumInViewportWidth =
                                 (_b = this.options.floatingGroupBounds) === null || _b === void 0 ? void 0 : _b.minimumWidthWithinViewport;
                     }
-                    group.overlay.setBounds({});
+                    group.overlay.setBounds();
                 }
             }
             if (changed_rootOverlayOptions) {
                 this._rootDropTarget.setOverlayModel(options.rootOverlayModel);
             }
+            if (this.gridview.margin !== 0 && options.gap === undefined) {
+                this.gridview.margin = 0;
+            }
+            if (typeof options.gap === 'number') {
+                this.gridview.margin = options.gap;
+            }
             this.layout(this.gridview.width, this.gridview.height, true);
         }
         layout(width, height, forceResize) {
@@ -7669,11 +7862,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     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 });
+                        position: position,
+                        skipRemoveGroup: true,
+                        inDragMode: false,
+                    });
                 }
                 const serializedPopoutGroups = (_b = data.popoutGroups) !== null && _b !== void 0 ? _b : [];
                 for (const serializedPopoutGroup of serializedPopoutGroups) {
@@ -7808,11 +8000,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         options.floating !== null
                         ? options.floating
                         : {};
-                    this.addFloatingGroup(group, o, {
-                        inDragMode: false,
-                        skipRemoveGroup: true,
-                        skipActiveGroup: true,
-                    });
+                    this.addFloatingGroup(group, Object.assign(Object.assign({}, o), { inDragMode: false, skipRemoveGroup: true, skipActiveGroup: true }));
                     panel = this.createPanel(options, group);
                     group.model.openPanel(panel, {
                         skipSetActive: options.inactive,
@@ -7851,11 +8039,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     options.floating !== null
                     ? options.floating
                     : {};
-                this.addFloatingGroup(group, coordinates, {
-                    inDragMode: false,
-                    skipRemoveGroup: true,
-                    skipActiveGroup: true,
-                });
+                this.addFloatingGroup(group, Object.assign(Object.assign({}, coordinates), { inDragMode: false, skipRemoveGroup: true, skipActiveGroup: true }));
                 panel = this.createPanel(options, group);
                 group.model.openPanel(panel, {
                     skipSetActive: options.inactive,
@@ -7910,6 +8094,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     });
                     const watermarkContainer = document.createElement('div');
                     watermarkContainer.className = 'dv-watermark-container';
+                    addTestId(watermarkContainer, 'watermark-component');
                     watermarkContainer.appendChild(this.watermark.element);
                     this.gridview.element.appendChild(watermarkContainer);
                 }
@@ -8098,6 +8283,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 this.doSetGroupAndPanelActive(destinationGroup);
                 this._onDidMovePanel.fire({
                     panel: removedPanel,
+                    from: sourceGroup,
                 });
             }
             else {
@@ -8121,6 +8307,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                             // if a group has one tab - we are essentially moving the 'group'
                             // which is equivalent to swapping two views in this case
                             this.gridview.moveView(sourceParentLocation, from, to);
+                            this._onDidMovePanel.fire({
+                                panel: this.getGroupPanel(sourceItemId),
+                                from: sourceGroup,
+                            });
                             return;
                         }
                     }
@@ -8134,6 +8324,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     const location = getRelativeLocation(this.gridview.orientation, updatedReferenceLocation, destinationTarget);
                     this.movingLock(() => this.doAddGroup(targetGroup, location));
                     this.doSetGroupAndPanelActive(targetGroup);
+                    this._onDidMovePanel.fire({
+                        panel: this.getGroupPanel(sourceItemId),
+                        from: sourceGroup,
+                    });
                 }
                 else {
                     /**
@@ -8153,6 +8347,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         skipSetGroupActive: true,
                     }));
                     this.doSetGroupAndPanelActive(group);
+                    this._onDidMovePanel.fire({
+                        panel: removedPanel,
+                        from: sourceGroup,
+                    });
                 }
             }
         }
@@ -8177,9 +8375,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                     }
                 });
                 this.doSetGroupAndPanelActive(to);
-                panels.forEach((panel) => {
-                    this._onDidMovePanel.fire({ panel });
-                });
             }
             else {
                 switch (from.api.location.type) {
@@ -8205,10 +8400,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 const referenceLocation = getGridLocation(to.element);
                 const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
                 this.gridview.addView(from, exports.Sizing.Distribute, dropLocation);
-                from.panels.forEach((panel) => {
-                    this._onDidMovePanel.fire({ panel });
-                });
             }
+            from.panels.forEach((panel) => {
+                this._onDidMovePanel.fire({ panel, from });
+            });
         }
         doSetGroupActive(group) {
             super.doSetGroupActive(group);
@@ -9832,8 +10027,21 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
         return t;
     };
+    function useTitle(api) {
+        const [title, setTitle] = React.useState(api.title);
+        React.useEffect(() => {
+            const disposable = api.onDidTitleChange((event) => {
+                setTitle(event.title);
+            });
+            return () => {
+                disposable.dispose();
+            };
+        }, [api]);
+        return title;
+    }
     const DockviewDefaultTab = (_a) => {
         var { api, containerApi: _containerApi, params: _params, hideClose, closeActionOverride } = _a, rest = __rest(_a, ["api", "containerApi", "params", "hideClose", "closeActionOverride"]);
+        const title = useTitle(api);
         const onClose = React.useCallback((event) => {
             event.preventDefault();
             if (closeActionOverride) {
@@ -9856,7 +10064,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
         }, [api, rest.onClick]);
         return (React.createElement("div", Object.assign({ "data-testid": "dockview-dv-default-tab" }, rest, { onClick: onClick, className: "dv-default-tab" }),
-            React.createElement("span", { className: "dv-default-tab-content" }, api.title),
+            React.createElement("span", { className: "dv-default-tab-content" }, title),
             !hideClose && (React.createElement("div", { className: "dv-default-tab-action", onMouseDown: onMouseDown, onClick: onClose },
                 React.createElement(CloseButton, null)))));
     };