dockview 1.7.5 → 1.8.0

package/dist/dockview.amd.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.7.5
+ * @version 1.8.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -323,6 +323,31 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
   }
 
+  function createComponent(id, componentName, components = {}, frameworkComponents = {}, createFrameworkComponent, fallback) {
+      const Component = typeof componentName === 'string'
+          ? components[componentName]
+          : undefined;
+      const FrameworkComponent = typeof componentName === 'string'
+          ? frameworkComponents[componentName]
+          : undefined;
+      if (Component && FrameworkComponent) {
+          throw new Error(`Cannot create '${id}'. component '${componentName}' registered as both a component and frameworkComponent`);
+      }
+      if (FrameworkComponent) {
+          if (!createFrameworkComponent) {
+              throw new Error(`Cannot create '${id}' for framework component '${componentName}'. you must register a frameworkPanelWrapper to use framework components`);
+          }
+          return createFrameworkComponent.createComponent(id, componentName, FrameworkComponent);
+      }
+      if (!Component) {
+          if (fallback) {
+              return fallback();
+          }
+          throw new Error(`Cannot create '${id}', no component '${componentName}' provided`);
+      }
+      return new Component(id, componentName);
+  }
+
   function watchElementResize(element, cb) {
       const observer = new ResizeObserver((entires) => {
           /**
@@ -436,31 +461,16 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       refreshState() {
           this._refreshStateHandler();
       }
-  }
-
-  function createComponent(id, componentName, components = {}, frameworkComponents = {}, createFrameworkComponent, fallback) {
-      const Component = typeof componentName === 'string'
-          ? components[componentName]
-          : undefined;
-      const FrameworkComponent = typeof componentName === 'string'
-          ? frameworkComponents[componentName]
-          : undefined;
-      if (Component && FrameworkComponent) {
-          throw new Error(`Cannot create '${id}'. component '${componentName}' registered as both a component and frameworkComponent`);
-      }
-      if (FrameworkComponent) {
-          if (!createFrameworkComponent) {
-              throw new Error(`Cannot create '${id}' for framework component '${componentName}'. you must register a frameworkPanelWrapper to use framework components`);
-          }
-          return createFrameworkComponent.createComponent(id, componentName, FrameworkComponent);
-      }
-      if (!Component) {
-          if (fallback) {
-              return fallback();
-          }
-          throw new Error(`Cannot create '${id}', no component '${componentName}' provided`);
-      }
-      return new Component(id, componentName);
+  }
+  // quasi: apparently, but not really; seemingly
+  const QUASI_PREVENT_DEFAULT_KEY = 'dv-quasiPreventDefault';
+  // mark an event directly for other listeners to check
+  function quasiPreventDefault(event) {
+      event[QUASI_PREVENT_DEFAULT_KEY] = true;
+  }
+  // check if this event has been marked
+  function quasiDefaultPrevented(event) {
+      return event[QUASI_PREVENT_DEFAULT_KEY];
   }
 
   function tail(arr) {
@@ -511,6 +521,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           }
       }
       return -1;
+  }
+  function remove(array, value) {
+      const index = array.findIndex((t) => t === value);
+      if (index > -1) {
+          array.splice(index, 1);
+          return true;
+      }
+      return false;
   }
 
   const clamp = (value, min, max) => {
@@ -940,7 +958,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               //add sash
               const sash = document.createElement('div');
               sash.className = 'sash';
-              const onStart = (event) => {
+              const onPointerStart = (event) => {
                   for (const item of this.viewItems) {
                       item.enabled = false;
                   }
@@ -999,11 +1017,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                           size: snappedViewItem.size,
                       };
                   }
-                  //
-                  const mousemove = (mousemoveEvent) => {
+                  const onPointerMove = (event) => {
                       const current = this._orientation === exports.Orientation.HORIZONTAL
-                          ? mousemoveEvent.clientX
-                          : mousemoveEvent.clientY;
+                          ? event.clientX
+                          : event.clientY;
                       const delta = current - start;
                       this.resize(sashIndex, delta, sizes, undefined, undefined, minDelta, maxDelta, snapBefore, snapAfter);
                       this.distributeEmptySpace();
@@ -1017,18 +1034,20 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                           iframe.style.pointerEvents = 'auto';
                       }
                       this.saveProportions();
-                      document.removeEventListener('mousemove', mousemove);
-                      document.removeEventListener('mouseup', end);
+                      document.removeEventListener('pointermove', onPointerMove);
+                      document.removeEventListener('pointerup', end);
+                      document.removeEventListener('pointercancel', end);
                       this._onDidSashEnd.fire(undefined);
                   };
-                  document.addEventListener('mousemove', mousemove);
-                  document.addEventListener('mouseup', end);
+                  document.addEventListener('pointermove', onPointerMove);
+                  document.addEventListener('pointerup', end);
+                  document.addEventListener('pointercancel', end);
               };
-              sash.addEventListener('mousedown', onStart);
+              sash.addEventListener('pointerdown', onPointerStart);
               const sashItem = {
                   container: sash,
                   disposable: () => {
-                      sash.removeEventListener('mousedown', onStart);
+                      sash.removeEventListener('pointerdown', onPointerStart);
                       this.sashContainer.removeChild(sash);
                   },
               };
@@ -1652,7 +1671,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                               : true,
                       };
                   }),
-                  size: this.size,
+                  size: this.orthogonalSize,
               };
               this.children = childDescriptors.map((c) => c.node);
               this.splitview = new Splitview(this.element, {
@@ -1715,7 +1734,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       layout(size, orthogonalSize) {
           this._size = orthogonalSize;
           this._orthogonalSize = size;
-          this.splitview.layout(this.size, this.orthogonalSize);
+          this.splitview.layout(orthogonalSize, size);
       }
       addChild(node, size, index, skipLayout) {
           if (index < 0 || index > this.children.length) {
@@ -1940,9 +1959,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this._deserialize(json.root, orientation, deserializer, height);
       }
       _deserialize(root, orientation, deserializer, orthogonalSize) {
-          this.root = this._deserializeNode(root, orientation, deserializer, orthogonalSize, true);
+          this.root = this._deserializeNode(root, orientation, deserializer, orthogonalSize);
       }
-      _deserializeNode(node, orientation, deserializer, orthogonalSize, isRoot = false) {
+      _deserializeNode(node, orientation, deserializer, orthogonalSize) {
           let result;
           if (node.type === 'branch') {
               const serializedChildren = node.data;
@@ -1952,9 +1971,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                       visible: serializedChild.visible,
                   };
               });
-              // HORIZONTAL => height=orthogonalsize width=size
-              // VERTICAL => height=size width=orthogonalsize
-              result = new BranchNode(orientation, this.proportionalLayout, this.styles, isRoot ? orthogonalSize : node.size, isRoot ? node.size : orthogonalSize, children);
+              result = new BranchNode(orientation, this.proportionalLayout, this.styles, node.size, // <- orthogonal size - flips at each depth
+              orthogonalSize, // <- size - flips at each depth
+              children);
           }
           else {
               result = new LeafNode(deserializer.fromJSON(node), orientation, orthogonalSize, node.size);
@@ -1987,7 +2006,8 @@ 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);
-          if (oldRoot.children.length === 1) {
+          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
               const childReference = oldRoot.children[0];
               const child = oldRoot.removeChild(0); // remove to prevent disposal when disposing of unwanted root
@@ -2121,52 +2141,70 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           if (!(parent instanceof BranchNode)) {
               throw new Error('Invalid location');
           }
-          const node = parent.children[index];
-          if (!(node instanceof LeafNode)) {
+          const nodeToRemove = parent.children[index];
+          if (!(nodeToRemove instanceof LeafNode)) {
               throw new Error('Invalid location');
           }
           parent.removeChild(index, sizing);
-          if (parent.children.length === 0) {
-              return node.view;
-          }
-          if (parent.children.length > 1) {
-              return node.view;
-          }
+          nodeToRemove.dispose();
+          if (parent.children.length !== 1) {
+              return nodeToRemove.view;
+          }
+          // if the parent has only one child and we know the parent is a BranchNode we can make the tree
+          // more efficiently spaced by replacing the parent BranchNode with the child.
+          // if that child is a LeafNode then we simply replace the BranchNode with the child otherwise if the child
+          // is a BranchNode too we should spread it's children into the grandparent.
+          // refer to the remaining child as the sibling
           const sibling = parent.children[0];
           if (pathToParent.length === 0) {
-              // parent is root
+              // if the parent is root
               if (sibling instanceof LeafNode) {
-                  return node.view;
+                  // if the sibling is a leaf node no action is required
+                  return nodeToRemove.view;
               }
-              // we must promote sibling to be the new root
+              // otherwise the sibling is a branch node. since the parent is the root and the root has only one child
+              // which is a branch node we can just set this branch node to be the new root node
+              // for good housekeeping we'll removing the sibling from it's existing tree
               parent.removeChild(0, sizing);
+              // and set that sibling node to be root
               this.root = sibling;
-              return node.view;
+              return nodeToRemove.view;
           }
+          // otherwise the parent is apart of a large sub-tree
           const [grandParent, ..._] = [...pathToParent].reverse();
           const [parentIndex, ...__] = [...rest].reverse();
           const isSiblingVisible = parent.isChildVisible(0);
+          // either way we need to remove the sibling from it's existing tree
           parent.removeChild(0, sizing);
+          // note the sizes of all of the grandparents children
           const sizes = grandParent.children.map((_size, i) => grandParent.getChildSize(i));
-          grandParent.removeChild(parentIndex, sizing);
+          // remove the parent from the grandparent since we are moving the sibling to take the parents place
+          // this parent is no longer used and can be disposed of
+          grandParent.removeChild(parentIndex, sizing).dispose();
           if (sibling instanceof BranchNode) {
+              // replace the parent with the siblings children
               sizes.splice(parentIndex, 1, ...sibling.children.map((c) => c.size));
+              // and add those siblings to the grandparent
               for (let i = 0; i < sibling.children.length; i++) {
                   const child = sibling.children[i];
                   grandParent.addChild(child, child.size, parentIndex + i);
               }
           }
           else {
+              // otherwise create a new leaf node and add that to the grandparent
               const newSibling = new LeafNode(sibling.view, orthogonal(sibling.orientation), sibling.size);
               const siblingSizing = isSiblingVisible
                   ? sibling.orthogonalSize
                   : exports.Sizing.Invisible(sibling.orthogonalSize);
               grandParent.addChild(newSibling, siblingSizing, parentIndex);
           }
+          // the containing node of the sibling is no longer required and can be disposed of
+          sibling.dispose();
+          // resize everything
           for (let i = 0; i < sizes.length; i++) {
               grandParent.resizeChild(i, sizes[i]);
           }
-          return node.view;
+          return nodeToRemove.view;
       }
       layout(width, height) {
           const [size, orthogonalSize] = this.root.orientation === exports.Orientation.HORIZONTAL
@@ -2485,6 +2523,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       addPanel(options) {
           return this.component.addPanel(options);
       }
+      removePanel(panel) {
+          this.component.removePanel(panel);
+      }
       addGroup(options) {
           return this.component.addGroup(options);
       }
@@ -2503,6 +2544,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       getGroup(id) {
           return this.component.getPanel(id);
       }
+      addFloatingGroup(item, coord) {
+          return this.component.addFloatingGroup(item, coord);
+      }
       fromJSON(data) {
           this.component.fromJSON(data);
       }
@@ -2595,10 +2639,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this._onDrop = new Emitter();
           this.onDrop = this._onDrop.event;
           // use a set to take advantage of #<set>.has
-          const acceptedTargetZonesSet = new Set(this.options.acceptedTargetZones);
+          this._acceptedTargetZonesSet = new Set(this.options.acceptedTargetZones);
           this.addDisposables(this._onDrop, new DragAndDropObserver(this.element, {
               onDragEnter: () => undefined,
               onDragOver: (e) => {
+                  if (this._acceptedTargetZonesSet.size === 0) {
+                      this.removeDropTarget();
+                      return;
+                  }
                   const width = this.element.clientWidth;
                   const height = this.element.clientHeight;
                   if (width === 0 || height === 0) {
@@ -2607,20 +2655,28 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   const rect = e.currentTarget.getBoundingClientRect();
                   const x = e.clientX - rect.left;
                   const y = e.clientY - rect.top;
-                  const quadrant = this.calculateQuadrant(acceptedTargetZonesSet, x, y, width, height);
-                  if (quadrant === null) {
+                  const quadrant = this.calculateQuadrant(this._acceptedTargetZonesSet, x, y, width, height);
+                  /**
+                   * If the event has already been used by another DropTarget instance
+                   * then don't show a second drop target, only one target should be
+                   * active at any one time
+                   */
+                  if (this.isAlreadyUsed(e) || quadrant === null) {
                       // no drop target should be displayed
                       this.removeDropTarget();
                       return;
                   }
                   if (typeof this.options.canDisplayOverlay === 'boolean') {
                       if (!this.options.canDisplayOverlay) {
+                          this.removeDropTarget();
                           return;
                       }
                   }
                   else if (!this.options.canDisplayOverlay(e, quadrant)) {
+                      this.removeDropTarget();
                       return;
                   }
+                  this.markAsUsed(e);
                   if (!this.targetElement) {
                       this.targetElement = document.createElement('div');
                       this.targetElement.className = 'drop-target-dropzone';
@@ -2631,12 +2687,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                       this.element.classList.add('drop-target');
                       this.element.append(this.targetElement);
                   }
-                  if (this.options.acceptedTargetZones.length === 0) {
-                      return;
-                  }
-                  if (!this.targetElement || !this.overlayElement) {
-                      return;
-                  }
                   this.toggleClasses(quadrant, width, height);
                   this.setState(quadrant);
               },
@@ -2659,10 +2709,26 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               },
           }));
       }
+      setTargetZones(acceptedTargetZones) {
+          this._acceptedTargetZonesSet = new Set(acceptedTargetZones);
+      }
       dispose() {
           this.removeDropTarget();
           super.dispose();
       }
+      /**
+       * Add a property to the event object for other potential listeners to check
+       */
+      markAsUsed(event) {
+          event[Droptarget.USED_EVENT_ID] = true;
+      }
+      /**
+       * Check is the event has already been used by another instance od DropTarget
+       */
+      isAlreadyUsed(event) {
+          const value = event[Droptarget.USED_EVENT_ID];
+          return typeof value === 'boolean' && value;
+      }
       toggleClasses(quadrant, width, height) {
           var _a, _b, _c, _d;
           if (!this.overlayElement) {
@@ -2757,6 +2823,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           }
       }
   }
+  Droptarget.USED_EVENT_ID = '__dockview_droptarget_event_is_used__';
   function calculateQuadrantAsPercentage(overlayType, x, y, width, height, threshold) {
       const xp = (100 * x) / width;
       const yp = (100 * y) / height;
@@ -2886,8 +2953,15 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this.addDisposables(this._onDragStart, this.dataDisposable, this.pointerEventsDisposable);
           this.configure();
       }
+      isCancelled(_event) {
+          return false;
+      }
       configure() {
           this.addDisposables(this._onDragStart, addDisposableListener(this.el, 'dragstart', (event) => {
+              if (this.isCancelled(event)) {
+                  event.preventDefault();
+                  return;
+              }
               const iframes = [
                   ...getElementsByTagName('iframe'),
                   ...getElementsByTagName('webview'),
@@ -2961,13 +3035,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               if (event.defaultPrevented) {
                   return;
               }
-              /**
-               * TODO: alternative to stopPropagation
-               *
-               * I need to stop the event propagation here since otherwise it'll be intercepted by event handlers
-               * on the tabs-container. I cannot use event.preventDefault() since I need the on DragStart event to occur
-               */
-              event.stopPropagation();
               this._onChanged.fire(event);
           }));
           this.droptarget = new Droptarget(this._element, {
@@ -3025,6 +3092,22 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this.accessorId = accessorId;
           this.group = group;
           this.panelTransfer = LocalSelectionTransfer.getInstance();
+          this.addDisposables(addDisposableListener(element, 'mousedown', (e) => {
+              if (e.shiftKey) {
+                  /**
+                   * You cannot call e.preventDefault() because that will prevent drag events from firing
+                   * but we also need to stop any group overlay drag events from occuring
+                   * Use a custom event marker that can be checked by the overlay drag events
+                   */
+                  quasiPreventDefault(e);
+              }
+          }, true));
+      }
+      isCancelled(_event) {
+          if (this.group.api.isFloating && !_event.shiftKey) {
+              return true;
+          }
+          return false;
       }
       getData(dataTransfer) {
           this.panelTransfer.setData([new PanelTransfer(this.accessorId, this.group.id, null)], PanelTransfer.prototype);
@@ -3115,17 +3198,30 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       hide() {
           this._element.style.display = 'none';
       }
-      setActionElement(element) {
-          if (this.actions === element) {
+      setRightActionsElement(element) {
+          if (this.rightActions === element) {
+              return;
+          }
+          if (this.rightActions) {
+              this.rightActions.remove();
+              this.rightActions = undefined;
+          }
+          if (element) {
+              this.rightActionsContainer.appendChild(element);
+              this.rightActions = element;
+          }
+      }
+      setLeftActionsElement(element) {
+          if (this.leftActions === element) {
               return;
           }
-          if (this.actions) {
-              this.actions.remove();
-              this.actions = undefined;
+          if (this.leftActions) {
+              this.leftActions.remove();
+              this.leftActions = undefined;
           }
           if (element) {
-              this.actionContainer.appendChild(element);
-              this.actions = element;
+              this.leftActionsContainer.appendChild(element);
+              this.leftActions = element;
           }
       }
       get element() {
@@ -3160,19 +3256,35 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   toggleClass(this._element, 'dv-single-tab', this.size === 1);
               }
           }));
-          this.actionContainer = document.createElement('div');
-          this.actionContainer.className = 'action-container';
+          this.rightActionsContainer = document.createElement('div');
+          this.rightActionsContainer.className = 'right-actions-container';
+          this.leftActionsContainer = document.createElement('div');
+          this.leftActionsContainer.className = 'left-actions-container';
           this.tabContainer = document.createElement('div');
           this.tabContainer.className = 'tabs-container';
           this.voidContainer = new VoidContainer(this.accessor, this.group);
           this._element.appendChild(this.tabContainer);
+          this._element.appendChild(this.leftActionsContainer);
           this._element.appendChild(this.voidContainer.element);
-          this._element.appendChild(this.actionContainer);
+          this._element.appendChild(this.rightActionsContainer);
           this.addDisposables(this.voidContainer, this.voidContainer.onDrop((event) => {
               this._onDrop.fire({
                   event: event.nativeEvent,
                   index: this.tabs.length,
               });
+          }), addDisposableListener(this.voidContainer.element, 'mousedown', (event) => {
+              const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
+              if (isFloatingGroupsEnabled &&
+                  event.shiftKey &&
+                  !this.group.api.isFloating) {
+                  event.preventDefault();
+                  const { top, left } = this.element.getBoundingClientRect();
+                  const { top: rootTop, left: rootLeft } = this.accessor.element.getBoundingClientRect();
+                  this.accessor.addFloatingGroup(this.group, {
+                      x: left - rootLeft + 20,
+                      y: top - rootTop + 20,
+                  }, { inDragMode: true });
+              }
           }), addDisposableListener(this.tabContainer, 'mousedown', (event) => {
               if (event.defaultPrevented) {
                   return;
@@ -3226,6 +3338,21 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           tabToAdd.setContent(panel.view.tab);
           const disposable = CompositeDisposable.from(tabToAdd.onChanged((event) => {
               var _a;
+              const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups;
+              const isFloatingWithOnePanel = this.group.api.isFloating && this.size === 1;
+              if (isFloatingGroupsEnabled &&
+                  !isFloatingWithOnePanel &&
+                  event.shiftKey) {
+                  event.preventDefault();
+                  const panel = this.accessor.getGroupPanel(tabToAdd.panelId);
+                  const { top, left } = tabToAdd.element.getBoundingClientRect();
+                  const { top: rootTop, left: rootLeft } = this.accessor.element.getBoundingClientRect();
+                  this.accessor.addFloatingGroup(panel, {
+                      x: left - rootLeft,
+                      y: top - rootTop,
+                  }, { inDragMode: true });
+                  return;
+              }
               const alreadyFocused = panel.id === ((_a = this.group.model.activePanel) === null || _a === void 0 ? void 0 : _a.id) &&
                   this.group.model.isContentFocused;
               const isLeftClick = event.button === 0;
@@ -3295,6 +3422,17 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           }
           return isAncestor(document.activeElement, this.contentContainer.element);
       }
+      get isFloating() {
+          return this._isFloating;
+      }
+      set isFloating(value) {
+          this._isFloating = value;
+          this.dropTarget.setTargetZones(value ? ['center'] : ['top', 'bottom', 'left', 'right', 'center']);
+          toggleClass(this.container, 'dv-groupview-floating', value);
+          this.groupPanel.api._onDidFloatingStateChange.fire({
+              isFloating: this.isFloating,
+          });
+      }
       constructor(container, accessor, id, options, groupPanel) {
           super();
           this.container = container;
@@ -3304,6 +3442,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this.groupPanel = groupPanel;
           this._isGroupActive = false;
           this._locked = false;
+          this._isFloating = false;
           this.mostRecentlyUsed = [];
           this._onDidChange = new Emitter();
           this.onDidChange = this._onDidChange.event;
@@ -3320,7 +3459,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this.onDidRemovePanel = this._onDidRemovePanel.event;
           this._onDidActivePanelChange = new Emitter();
           this.onDidActivePanelChange = this._onDidActivePanelChange.event;
-          this.container.classList.add('groupview');
+          toggleClass(this.container, 'groupview', true);
           this.tabsContainer = new TabsContainer(this.accessor, this.groupPanel);
           this.contentContainer = new ContentContainer();
           this.dropTarget = new Droptarget(this.contentContainer.element, {
@@ -3330,6 +3469,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                       return false;
                   }
                   const data = getPanelData();
+                  if (!data && event.shiftKey && !this.isFloating) {
+                      return false;
+                  }
                   if (data && data.viewId === this.accessor.id) {
                       if (data.groupId === this.id) {
                           if (position === 'center') {
@@ -3374,14 +3516,25 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           // correctly initialized
           this.setActive(this.isActive, true, true);
           this.updateContainer();
-          if (this.accessor.options.createGroupControlElement) {
-              this._control = this.accessor.options.createGroupControlElement(this.groupPanel);
-              this.addDisposables(this._control);
-              this._control.init({
+          if (this.accessor.options.createRightHeaderActionsElement) {
+              this._rightHeaderActions =
+                  this.accessor.options.createRightHeaderActionsElement(this.groupPanel);
+              this.addDisposables(this._rightHeaderActions);
+              this._rightHeaderActions.init({
+                  containerApi: new DockviewApi(this.accessor),
+                  api: this.groupPanel.api,
+              });
+              this.tabsContainer.setRightActionsElement(this._rightHeaderActions.element);
+          }
+          if (this.accessor.options.createLeftHeaderActionsElement) {
+              this._leftHeaderActions =
+                  this.accessor.options.createLeftHeaderActionsElement(this.groupPanel);
+              this.addDisposables(this._leftHeaderActions);
+              this._leftHeaderActions.init({
                   containerApi: new DockviewApi(this.accessor),
                   api: this.groupPanel.api,
               });
-              this.tabsContainer.setActionElement(this._control.element);
+              this.tabsContainer.setLeftActionsElement(this._leftHeaderActions.element);
           }
       }
       indexOf(panel) {
@@ -3514,7 +3667,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           return this._activePanel === panel;
       }
       updateActions(element) {
-          this.tabsContainer.setActionElement(element);
+          this.tabsContainer.setRightActionsElement(element);
       }
       setActive(isGroupActive, skipFocus = false, force = false) {
           var _a, _b, _c, _d;
@@ -3686,9 +3839,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           }
       }
       dispose() {
-          var _a, _b;
+          var _a, _b, _c;
           super.dispose();
-          (_b = (_a = this.watermark) === null || _a === void 0 ? void 0 : _a.dispose) === null || _b === void 0 ? void 0 : _b.call(_a);
+          (_a = this.watermark) === null || _a === void 0 ? void 0 : _a.element.remove();
+          (_c = (_b = this.watermark) === null || _b === void 0 ? void 0 : _b.dispose) === null || _c === void 0 ? void 0 : _c.call(_b);
           for (const panel of this.panels) {
               panel.dispose();
           }
@@ -4482,8 +4636,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       get isActive() {
           return this.api.isActive;
       }
-      constructor(id, component, options) {
-          super(id, component, new GridviewPanelApiImpl(id));
+      constructor(id, component, options, api) {
+          super(id, component, api !== null && api !== void 0 ? api : new GridviewPanelApiImpl(id));
           this._evaluatedMinimumWidth = 0;
           this._evaluatedMaximumWidth = Number.MAX_SAFE_INTEGER;
           this._evaluatedMinimumHeight = 0;
@@ -4581,6 +4735,32 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
   }
 
+  class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
+      get isFloating() {
+          if (!this._group) {
+              throw new Error(`DockviewGroupPanelApiImpl not initialized`);
+          }
+          return this._group.model.isFloating;
+      }
+      constructor(id, accessor) {
+          super(id);
+          this.accessor = accessor;
+          this._onDidFloatingStateChange = new Emitter();
+          this.onDidFloatingStateChange = this._onDidFloatingStateChange.event;
+          this.addDisposables(this._onDidFloatingStateChange);
+      }
+      moveTo(options) {
+          var _a;
+          if (!this._group) {
+              throw new Error(`DockviewGroupPanelApiImpl not initialized`);
+          }
+          this.accessor.moveGroupOrPanel(options.group, this._group.id, undefined, (_a = options.position) !== null && _a !== void 0 ? _a : 'center');
+      }
+      initialize(group) {
+          this._group = group;
+      }
+  }
+
   class DockviewGroupPanel extends GridviewPanel {
       get panels() {
           return this._model.panels;
@@ -4607,7 +4787,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           super(id, 'groupview_default', {
               minimumHeight: 100,
               minimumWidth: 100,
-          });
+          }, new DockviewGroupPanelApiImpl(id, accessor));
+          this.api.initialize(this); // cannot use 'this' after after 'super' call
           this._model = new DockviewGroupPanelModel(this.element, accessor, id, options, this);
       }
       initialize() {
@@ -4625,7 +4806,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           return this._model;
       }
       toJSON() {
-          // TODO fix typing
           return this.model.toJSON();
       }
   }
@@ -4679,9 +4859,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       get group() {
           return this._group;
       }
-      constructor(panel, group) {
+      constructor(panel, group, accessor) {
           super(panel.id);
           this.panel = panel;
+          this.accessor = accessor;
           this._onDidTitleChange = new Emitter();
           this.onDidTitleChange = this._onDidTitleChange.event;
           this._onDidActiveGroupChange = new Emitter();
@@ -4693,6 +4874,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this._group = group;
           this.addDisposables(this.disposable, this._onDidTitleChange, this._onDidGroupChange, this._onDidActiveGroupChange);
       }
+      moveTo(options) {
+          var _a;
+          this.accessor.moveGroupOrPanel(options.group, this._group.id, this.panel.id, (_a = options.position) !== null && _a !== void 0 ? _a : 'center', options.index);
+      }
       setTitle(title) {
           this.panel.setTitle(title);
       }
@@ -4717,7 +4902,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this.containerApi = containerApi;
           this.view = view;
           this._group = group;
-          this.api = new DockviewPanelApiImpl(this, this._group);
+          this.api = new DockviewPanelApiImpl(this, this._group, accessor);
           this.addDisposables(this.api.onActiveChange(() => {
               accessor.setActivePanel(this);
           }), this.api.onDidSizeChange((event) => {
@@ -5058,6 +5243,296 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
   }
 
+  const bringElementToFront = (() => {
+      let previous = null;
+      function pushToTop(element) {
+          if (previous !== element && previous !== null) {
+              toggleClass(previous, 'dv-bring-to-front', false);
+          }
+          toggleClass(element, 'dv-bring-to-front', true);
+          previous = element;
+      }
+      return pushToTop;
+  })();
+  class Overlay extends CompositeDisposable {
+      constructor(options) {
+          super();
+          this.options = options;
+          this._element = document.createElement('div');
+          this._onDidChange = new Emitter();
+          this.onDidChange = this._onDidChange.event;
+          this._onDidChangeEnd = new Emitter();
+          this.onDidChangeEnd = this._onDidChangeEnd.event;
+          this.addDisposables(this._onDidChange, this._onDidChangeEnd);
+          this._element.className = 'dv-resize-container';
+          this.setupResize('top');
+          this.setupResize('bottom');
+          this.setupResize('left');
+          this.setupResize('right');
+          this.setupResize('topleft');
+          this.setupResize('topright');
+          this.setupResize('bottomleft');
+          this.setupResize('bottomright');
+          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,
+          });
+      }
+      setBounds(bounds = {}) {
+          if (typeof bounds.height === 'number') {
+              this._element.style.height = `${bounds.height}px`;
+          }
+          if (typeof bounds.width === 'number') {
+              this._element.style.width = `${bounds.width}px`;
+          }
+          if (typeof bounds.top === 'number') {
+              this._element.style.top = `${bounds.top}px`;
+          }
+          if (typeof bounds.left === 'number') {
+              this._element.style.left = `${bounds.left}px`;
+          }
+          const containerRect = this.options.container.getBoundingClientRect();
+          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);
+          // a minimum height of minimumViewportHeight must be inside the viewport
+          const yOffset = Math.max(0, overlayRect.height - this.options.minimumInViewportHeight);
+          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`;
+          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,
+          };
+      }
+      setupDrag(dragTarget, options = { inDragMode: false }) {
+          const move = new MutableDisposable();
+          const track = () => {
+              let offset = null;
+              const iframes = [
+                  ...getElementsByTagName('iframe'),
+                  ...getElementsByTagName('webview'),
+              ];
+              for (const iframe of iframes) {
+                  iframe.style.pointerEvents = 'none';
+              }
+              move.value = new CompositeDisposable({
+                  dispose: () => {
+                      for (const iframe of iframes) {
+                          iframe.style.pointerEvents = 'auto';
+                      }
+                  },
+              }, addDisposableWindowListener(window, 'mousemove', (e) => {
+                  const containerRect = this.options.container.getBoundingClientRect();
+                  const x = e.clientX - containerRect.left;
+                  const y = e.clientY - containerRect.top;
+                  toggleClass(this._element, 'dv-resize-container-dragging', true);
+                  const overlayRect = this._element.getBoundingClientRect();
+                  if (offset === null) {
+                      offset = {
+                          x: e.clientX - overlayRect.left,
+                          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 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 });
+              }), addDisposableWindowListener(window, 'mouseup', () => {
+                  toggleClass(this._element, 'dv-resize-container-dragging', false);
+                  move.dispose();
+                  this._onDidChangeEnd.fire();
+              }));
+          };
+          this.addDisposables(move, addDisposableListener(dragTarget, 'mousedown', (event) => {
+              if (event.defaultPrevented) {
+                  event.preventDefault();
+                  return;
+              }
+              // if somebody has marked this event then treat as a defaultPrevented
+              // without actually calling event.preventDefault()
+              if (quasiDefaultPrevented(event)) {
+                  return;
+              }
+              track();
+          }), addDisposableListener(this.options.content, 'mousedown', (event) => {
+              if (event.defaultPrevented) {
+                  return;
+              }
+              // if somebody has marked this event then treat as a defaultPrevented
+              // without actually calling event.preventDefault()
+              if (quasiDefaultPrevented(event)) {
+                  return;
+              }
+              if (event.shiftKey) {
+                  track();
+              }
+          }), addDisposableListener(this.options.content, 'mousedown', () => {
+              bringElementToFront(this._element);
+          }, true));
+          bringElementToFront(this._element);
+          if (options.inDragMode) {
+              track();
+          }
+      }
+      setupResize(direction) {
+          const resizeHandleElement = document.createElement('div');
+          resizeHandleElement.className = `dv-resize-handle-${direction}`;
+          this._element.appendChild(resizeHandleElement);
+          const move = new MutableDisposable();
+          this.addDisposables(move, addDisposableListener(resizeHandleElement, 'mousedown', (e) => {
+              e.preventDefault();
+              let startPosition = null;
+              const iframes = [
+                  ...getElementsByTagName('iframe'),
+                  ...getElementsByTagName('webview'),
+              ];
+              for (const iframe of iframes) {
+                  iframe.style.pointerEvents = 'none';
+              }
+              move.value = new CompositeDisposable(addDisposableWindowListener(window, 'mousemove', (e) => {
+                  const containerRect = this.options.container.getBoundingClientRect();
+                  const overlayRect = this._element.getBoundingClientRect();
+                  const y = e.clientY - containerRect.top;
+                  const x = e.clientX - containerRect.left;
+                  if (startPosition === null) {
+                      // record the initial dimensions since as all subsequence moves are relative to this
+                      startPosition = {
+                          originalY: y,
+                          originalHeight: overlayRect.height,
+                          originalX: x,
+                          originalWidth: overlayRect.width,
+                      };
+                  }
+                  let top = undefined;
+                  let height = undefined;
+                  let left = undefined;
+                  let width = undefined;
+                  const minimumInViewportHeight = this.options.minimumInViewportHeight;
+                  const minimumInViewportWidth = this.options.minimumInViewportWidth;
+                  function moveTop() {
+                      top = clamp(y, -Number.MAX_VALUE, startPosition.originalY +
+                          startPosition.originalHeight >
+                          containerRect.height
+                          ? containerRect.height -
+                              minimumInViewportHeight
+                          : Math.max(0, startPosition.originalY +
+                              startPosition.originalHeight -
+                              Overlay.MINIMUM_HEIGHT));
+                      height =
+                          startPosition.originalY +
+                              startPosition.originalHeight -
+                              top;
+                  }
+                  function moveBottom() {
+                      top =
+                          startPosition.originalY -
+                              startPosition.originalHeight;
+                      height = clamp(y - top, top < 0
+                          ? -top + minimumInViewportHeight
+                          : Overlay.MINIMUM_HEIGHT, Number.MAX_VALUE);
+                  }
+                  function moveLeft() {
+                      left = clamp(x, -Number.MAX_VALUE, startPosition.originalX +
+                          startPosition.originalWidth >
+                          containerRect.width
+                          ? containerRect.width -
+                              minimumInViewportWidth
+                          : Math.max(0, startPosition.originalX +
+                              startPosition.originalWidth -
+                              Overlay.MINIMUM_WIDTH));
+                      width =
+                          startPosition.originalX +
+                              startPosition.originalWidth -
+                              left;
+                  }
+                  function moveRight() {
+                      left =
+                          startPosition.originalX -
+                              startPosition.originalWidth;
+                      width = clamp(x - left, left < 0
+                          ? -left + minimumInViewportWidth
+                          : Overlay.MINIMUM_WIDTH, Number.MAX_VALUE);
+                  }
+                  switch (direction) {
+                      case 'top':
+                          moveTop();
+                          break;
+                      case 'bottom':
+                          moveBottom();
+                          break;
+                      case 'left':
+                          moveLeft();
+                          break;
+                      case 'right':
+                          moveRight();
+                          break;
+                      case 'topleft':
+                          moveTop();
+                          moveLeft();
+                          break;
+                      case 'topright':
+                          moveTop();
+                          moveRight();
+                          break;
+                      case 'bottomleft':
+                          moveBottom();
+                          moveLeft();
+                          break;
+                      case 'bottomright':
+                          moveBottom();
+                          moveRight();
+                          break;
+                  }
+                  this.setBounds({ height, width, top, left });
+              }), {
+                  dispose: () => {
+                      for (const iframe of iframes) {
+                          iframe.style.pointerEvents = 'auto';
+                      }
+                  },
+              }, addDisposableWindowListener(window, 'mouseup', () => {
+                  move.dispose();
+                  this._onDidChangeEnd.fire();
+              }));
+          }));
+      }
+      dispose() {
+          this._element.remove();
+          super.dispose();
+      }
+  }
+  Overlay.MINIMUM_HEIGHT = 20;
+  Overlay.MINIMUM_WIDTH = 20;
+
+  class DockviewFloatingGroupPanel extends CompositeDisposable {
+      constructor(group, overlay) {
+          super();
+          this.group = group;
+          this.overlay = overlay;
+          this.addDisposables(overlay);
+      }
+      position(bounds) {
+          this.overlay.setBounds(bounds);
+      }
+  }
+
   class DockviewComponent extends BaseGrid {
       get orientation() {
           return this.gridview.orientation;
@@ -5098,7 +5573,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this.onDidLayoutFromJSON = this._onDidLayoutFromJSON.event;
           this._onDidActivePanelChange = new Emitter();
           this.onDidActivePanelChange = this._onDidActivePanelChange.event;
-          this.element.classList.add('dv-dockview');
+          this.floatingGroups = [];
+          toggleClass(this.gridview.element, 'dv-dockview', true);
           this.addDisposables(this._onDidDrop, exports.DockviewEvent.any(this.onDidAddGroup, this.onDidRemoveGroup)(() => {
               this.updateWatermark();
           }), exports.DockviewEvent.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
@@ -5128,6 +5604,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                       if (data.viewId !== this.id) {
                           return false;
                       }
+                      if (position === 'center') {
+                          // center drop target is only allowed if there are no panels in the grid
+                          // floating panels are allowed
+                          return this.gridview.length === 0;
+                      }
                       return true;
                   }
                   if (this.options.showDndOverlay) {
@@ -5140,7 +5621,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   }
                   return false;
               },
-              acceptedTargetZones: ['top', 'bottom', 'left', 'right'],
+              acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
               overlayModel: {
                   activationSize: { type: 'pixels', value: 10 },
                   size: { type: 'pixels', value: 20 },
@@ -5158,6 +5639,75 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this._api = new DockviewApi(this);
           this.updateWatermark();
       }
+      addFloatingGroup(item, coord, options) {
+          var _a, _b;
+          let group;
+          if (item instanceof DockviewPanel) {
+              group = this.createGroup();
+              this.removePanel(item, {
+                  removeEmptyGroup: true,
+                  skipDispose: true,
+              });
+              group.model.openPanel(item);
+          }
+          else {
+              group = item;
+              const skip = typeof (options === null || options === void 0 ? void 0 : options.skipRemoveGroup) === 'boolean' &&
+                  options.skipRemoveGroup;
+              if (!skip) {
+                  this.doRemoveGroup(item, { skipDispose: true });
+              }
+          }
+          group.model.isFloating = true;
+          const overlayLeft = typeof (coord === null || coord === void 0 ? void 0 : coord.x) === 'number' ? Math.max(coord.x, 0) : 100;
+          const overlayTop = typeof (coord === null || coord === void 0 ? void 0 : coord.y) === 'number' ? Math.max(coord.y, 0) : 100;
+          const overlay = new Overlay({
+              container: this.gridview.element,
+              content: group.element,
+              height: (_a = coord === null || coord === void 0 ? void 0 : coord.height) !== null && _a !== void 0 ? _a : 300,
+              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,
+          });
+          const el = group.element.querySelector('.void-container');
+          if (!el) {
+              throw new Error('failed to find drag handle');
+          }
+          overlay.setupDrag(el, {
+              inDragMode: typeof (options === null || options === void 0 ? void 0 : options.inDragMode) === 'boolean'
+                  ? options.inDragMode
+                  : false,
+          });
+          const floatingGroupPanel = new DockviewFloatingGroupPanel(group, overlay);
+          const disposable = watchElementResize(group.element, (entry) => {
+              const { width, height } = entry.contentRect;
+              group.layout(width, height); // let the group know it's size is changing so it can fire events to the panel
+          });
+          floatingGroupPanel.addDisposables(overlay.onDidChange(() => {
+              // this is either a resize or a move
+              // to inform the panels .layout(...) the group with it's current size
+              // don't care about resize since the above watcher handles that
+              group.layout(group.height, group.width);
+          }), overlay.onDidChangeEnd(() => {
+              this._bufferOnDidLayoutChange.fire();
+          }), group.onDidChange((event) => {
+              overlay.setBounds({
+                  height: event === null || event === void 0 ? void 0 : event.height,
+                  width: event === null || event === void 0 ? void 0 : event.width,
+              });
+          }), {
+              dispose: () => {
+                  disposable.dispose();
+                  group.model.isFloating = false;
+                  remove(this.floatingGroups, floatingGroupPanel);
+                  this.updateWatermark();
+              },
+          });
+          this.floatingGroups.push(floatingGroupPanel);
+          this.updateWatermark();
+      }
       orthogonalize(position) {
           switch (position) {
               case 'top':
@@ -5180,6 +5730,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           switch (position) {
               case 'top':
               case 'left':
+              case 'center':
                   return this.createGroupAtLocation([0]); // insert into first position
               case 'bottom':
               case 'right':
@@ -5197,6 +5748,15 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           }
           this.layout(this.gridview.width, this.gridview.height, true);
       }
+      layout(width, height, forceResize) {
+          super.layout(width, height, forceResize);
+          if (this.floatingGroups) {
+              for (const floating of this.floatingGroups) {
+                  // ensure floting groups stay within visible boundaries
+                  floating.overlay.setBounds();
+              }
+          }
+      }
       focus() {
           var _a;
           (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.focus();
@@ -5259,51 +5819,81 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               collection[panel.id] = panel.toJSON();
               return collection;
           }, {});
-          return {
+          const floats = this.floatingGroups.map((floatingGroup) => {
+              return {
+                  data: floatingGroup.group.toJSON(),
+                  position: floatingGroup.overlay.toJSON(),
+              };
+          });
+          const result = {
               grid: data,
               panels,
               activeGroup: (_a = this.activeGroup) === null || _a === void 0 ? void 0 : _a.id,
           };
+          if (floats.length > 0) {
+              result.floatingGroups = floats;
+          }
+          return result;
       }
       fromJSON(data) {
+          var _a;
           this.clear();
           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,
+                  });
+              }
+              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) => {
-                  const { id, locked, hideHeader, views, activeView } = node.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,
-                      });
-                  }
-                  if (!group.activePanel && group.panels.length > 0) {
-                      group.model.openPanel(group.panels[group.panels.length - 1], {
-                          skipSetGroupActive: true,
-                      });
-                  }
-                  return group;
+                  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);
               }
           }
-          this.gridview.layout(this.width, this.height);
           this._onDidLayoutFromJSON.fire();
       }
       clear() {
@@ -5312,7 +5902,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           const hasActivePanel = !!this.activePanel;
           for (const group of groups) {
               // remove the group will automatically remove the panels
-              this.removeGroup(group, true);
+              this.removeGroup(group, { skipActive: true });
           }
           if (hasActiveGroup) {
               this.doSetGroupActive(undefined);
@@ -5334,6 +5924,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               throw new Error(`panel with id ${options.id} already exists`);
           }
           let referenceGroup;
+          if (options.position && options.floating) {
+              throw new Error('you can only provide one of: position, floating as arguments to .addPanel(...)');
+          }
           if (options.position) {
               if (isPanelOptionsWithPanel(options.position)) {
                   const referencePanel = typeof options.position.referencePanel === 'string'
@@ -5366,7 +5959,20 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           let panel;
           if (referenceGroup) {
               const target = toTarget(((_b = options.position) === null || _b === void 0 ? void 0 : _b.direction) || 'within');
-              if (target === 'center') {
+              if (options.floating) {
+                  const group = this.createGroup();
+                  panel = this.createPanel(options, group);
+                  group.model.openPanel(panel);
+                  const o = typeof options.floating === 'object' &&
+                      options.floating !== null
+                      ? options.floating
+                      : {};
+                  this.addFloatingGroup(group, o, {
+                      inDragMode: false,
+                      skipRemoveGroup: true,
+                  });
+              }
+              else if (referenceGroup.api.isFloating || target === 'center') {
                   panel = this.createPanel(options, referenceGroup);
                   referenceGroup.model.openPanel(panel);
               }
@@ -5378,6 +5984,19 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   group.model.openPanel(panel);
               }
           }
+          else if (options.floating) {
+              const group = this.createGroup();
+              panel = this.createPanel(options, group);
+              group.model.openPanel(panel);
+              const o = typeof options.floating === 'object' &&
+                  options.floating !== null
+                  ? options.floating
+                  : {};
+              this.addFloatingGroup(group, o, {
+                  inDragMode: false,
+                  skipRemoveGroup: true,
+              });
+          }
           else {
               const group = this.createGroupAtLocation();
               panel = this.createPanel(options, group);
@@ -5394,7 +6013,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               throw new Error(`cannot remove panel ${panel.id}. it's missing a group.`);
           }
           group.model.removePanel(panel);
-          panel.dispose();
+          if (!options.skipDispose) {
+              panel.dispose();
+          }
           if (group.size === 0 && options.removeEmptyGroup) {
               this.removeGroup(group);
           }
@@ -5409,7 +6030,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
       updateWatermark() {
           var _a, _b;
-          if (this.groups.length === 0) {
+          if (this.groups.filter((x) => !x.api.isFloating).length === 0) {
               if (!this.watermark) {
                   this.watermark = this.createWatermarkComponent();
                   this.watermark.init({
@@ -5418,7 +6039,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   const watermarkContainer = document.createElement('div');
                   watermarkContainer.className = 'dv-watermark-container';
                   watermarkContainer.appendChild(this.watermark.element);
-                  this.element.appendChild(watermarkContainer);
+                  this.gridview.element.appendChild(watermarkContainer);
               }
           }
           else if (this.watermark) {
@@ -5468,15 +6089,28 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               return group;
           }
       }
-      removeGroup(group, skipActive = false) {
+      removeGroup(group, options) {
+          var _a;
           const panels = [...group.panels]; // reassign since group panels will mutate
           for (const panel of panels) {
               this.removePanel(panel, {
                   removeEmptyGroup: false,
-                  skipDispose: false,
+                  skipDispose: (_a = options === null || options === void 0 ? void 0 : options.skipDispose) !== null && _a !== void 0 ? _a : false,
               });
           }
-          super.doRemoveGroup(group, { skipActive });
+          this.doRemoveGroup(group, options);
+      }
+      doRemoveGroup(group, options) {
+          const floatingGroup = this.floatingGroups.find((_) => _.group === group);
+          if (floatingGroup) {
+              if (!(options === null || options === void 0 ? void 0 : options.skipDispose)) {
+                  floatingGroup.group.dispose();
+                  this._groups.delete(group.id);
+              }
+              floatingGroup.dispose();
+              return floatingGroup.group;
+          }
+          return super.doRemoveGroup(group, options);
       }
       moveGroupOrPanel(destinationGroup, sourceGroupId, sourceItemId, destinationTarget, destinationIndex) {
           var _a;
@@ -5507,25 +6141,26 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               const targetLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, destinationTarget);
               if (sourceGroup && sourceGroup.size < 2) {
                   const [targetParentLocation, to] = tail(targetLocation);
-                  const sourceLocation = getGridLocation(sourceGroup.element);
-                  const [sourceParentLocation, from] = tail(sourceLocation);
-                  if (sequenceEquals(sourceParentLocation, targetParentLocation)) {
-                      // special case when 'swapping' two views within same grid location
-                      // 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);
-                  }
-                  else {
-                      // source group will become empty so delete the group
-                      const targetGroup = this.doRemoveGroup(sourceGroup, {
-                          skipActive: true,
-                          skipDispose: true,
-                      });
-                      // after deleting the group we need to re-evaulate the ref location
-                      const updatedReferenceLocation = getGridLocation(destinationGroup.element);
-                      const location = getRelativeLocation(this.gridview.orientation, updatedReferenceLocation, destinationTarget);
-                      this.doAddGroup(targetGroup, location);
+                  const isFloating = this.floatingGroups.find((x) => x.group === sourceGroup);
+                  if (!isFloating) {
+                      const sourceLocation = getGridLocation(sourceGroup.element);
+                      const [sourceParentLocation, from] = tail(sourceLocation);
+                      if (sequenceEquals(sourceParentLocation, targetParentLocation)) {
+                          // special case when 'swapping' two views within same grid location
+                          // 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);
+                      }
                   }
+                  // source group will become empty so delete the group
+                  const targetGroup = this.doRemoveGroup(sourceGroup, {
+                      skipActive: true,
+                      skipDispose: true,
+                  });
+                  // after deleting the group we need to re-evaulate the ref location
+                  const updatedReferenceLocation = getGridLocation(destinationGroup.element);
+                  const location = getRelativeLocation(this.gridview.orientation, updatedReferenceLocation, destinationTarget);
+                  this.doAddGroup(targetGroup, location);
               }
               else {
                   const groupItem = (sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(sourceItemId)) ||
@@ -5554,7 +6189,13 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   }
               }
               else {
-                  this.gridview.removeView(getGridLocation(sourceGroup.element));
+                  const floatingGroup = this.floatingGroups.find((x) => x.group === sourceGroup);
+                  if (floatingGroup) {
+                      floatingGroup.dispose();
+                  }
+                  else {
+                      this.gridview.removeView(getGridLocation(sourceGroup.element));
+                  }
                   const referenceLocation = getGridLocation(referenceGroup.element);
                   const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
                   this.gridview.addView(sourceGroup, exports.Sizing.Distribute, dropLocation);
@@ -5709,6 +6350,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           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;
@@ -5734,7 +6378,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   return view;
               },
           });
-          this.layout(this.width, this.height, true);
+          this.layout(width, height, true);
           queue.forEach((f) => f());
           if (typeof activePanel === 'string') {
               const panel = this.getPanel(activePanel);
@@ -6048,6 +6692,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this.clear();
           const { views, orientation, size, activeView } = serializedSplitview;
           const queue = [];
+          // take note of the existing dimensions
+          const width = this.width;
+          const height = this.height;
           this.splitview = new Splitview(this.element, {
               orientation,
               proportionalLayout: this.options.proportionalLayout,
@@ -6084,7 +6731,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   }),
               },
           });
-          this.layout(this.width, this.height);
+          this.layout(width, height);
           queue.forEach((f) => f());
           if (typeof activeView === 'string') {
               const panel = this.getPanel(activeView);
@@ -6351,6 +6998,9 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
           this.clear();
           const { views, size } = serializedPaneview;
           const queue = [];
+          // take note of the existing dimensions
+          const width = this.width;
+          const height = this.height;
           this.paneview = new Paneview(this.element, {
               orientation: exports.Orientation.VERTICAL,
               descriptor: {
@@ -6406,7 +7056,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   }),
               },
           });
-          this.layout(this.width, this.height);
+          this.layout(width, height);
           queue.forEach((f) => f());
           this._onDidLayoutfromJSON.fire();
       }
@@ -6789,7 +7439,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
       }
   }
 
-  class ReactGroupControlsRendererPart {
+  class ReactHeaderActionsRendererPart {
       get element() {
           return this._element;
       }
@@ -6826,6 +7476,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               panels: this._group.model.panels,
               activePanel: this._group.model.activePanel,
               isGroupActive: this._group.api.isActive,
+              group: this._group,
           });
       }
       update(event) {
@@ -6859,7 +7510,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
   function createGroupControlElement(component, store) {
       return component
           ? (groupPanel) => {
-              return new ReactGroupControlsRendererPart(component, store, groupPanel);
+              return new ReactHeaderActionsRendererPart(component, store, groupPanel);
           }
           : undefined;
   }
@@ -6916,8 +7567,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   ? { separatorBorder: 'transparent' }
                   : undefined,
               showDndOverlay: props.showDndOverlay,
-              createGroupControlElement: createGroupControlElement(props.groupControlComponent, { addPortal }),
+              createLeftHeaderActionsElement: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal }),
+              createRightHeaderActionsElement: createGroupControlElement(props.rightHeaderActionsComponent, { addPortal }),
               singleTabMode: props.singleTabMode,
+              disableFloatingGroups: props.disableFloatingGroups,
           });
           const { clientWidth, clientHeight } = domRef.current;
           dockview.layout(clientWidth, clientHeight);
@@ -6976,6 +7629,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               frameworkTabComponents: props.tabComponents,
           });
       }, [props.tabComponents]);
+      React__namespace.useEffect(() => {
+          if (!dockviewRef.current) {
+              return;
+          }
+          dockviewRef.current.updateOptions({
+              disableFloatingGroups: props.disableFloatingGroups,
+          });
+      }, [props.disableFloatingGroups]);
       React__namespace.useEffect(() => {
           if (!dockviewRef.current) {
               return;
@@ -6997,9 +7658,17 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
               return;
           }
           dockviewRef.current.updateOptions({
-              createGroupControlElement: createGroupControlElement(props.groupControlComponent, { addPortal }),
+              createRightHeaderActionsElement: createGroupControlElement(props.rightHeaderActionsComponent, { addPortal }),
+          });
+      }, [props.rightHeaderActionsComponent]);
+      React__namespace.useEffect(() => {
+          if (!dockviewRef.current) {
+              return;
+          }
+          dockviewRef.current.updateOptions({
+              createLeftHeaderActionsElement: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal }),
           });
-      }, [props.groupControlComponent]);
+      }, [props.leftHeaderActionsComponent]);
       return (React__namespace.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
   });
   DockviewReact.displayName = 'DockviewComponent';
@@ -7018,6 +7687,8 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
   OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
   PERFORMANCE OF THIS SOFTWARE.
   ***************************************************************************** */
+  /* global Reflect, Promise, SuppressedError, Symbol */
+
 
   function __rest(s, e) {
       var t = {};
@@ -7029,7 +7700,12 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                   t[p[i]] = s[p[i]];
           }
       return t;
-  }
+  }
+
+  typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+      var e = new Error(message);
+      return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+  };
 
   const CloseButton = () => (React__namespace.createElement("svg", { height: "11", width: "11", viewBox: "0 0 28 28", "aria-hidden": 'false', focusable: false, className: "dockview-svg" },
       React__namespace.createElement("path", { d: "M2.1 27.3L0 25.2L11.55 13.65L0 2.1L2.1 0L13.65 11.55L25.2 0L27.3 2.1L15.75 13.65L27.3 25.2L25.2 27.3L13.65 15.75L2.1 27.3Z" })));
@@ -7357,6 +8033,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
   exports.positionToDirection = positionToDirection;
   exports.toTarget = toTarget;
   exports.usePortalsLifecycle = usePortalsLifecycle;
-  exports.watchElementResize = watchElementResize;
 
 }));
+//# sourceMappingURL=dockview.amd.js.map