dockview 1.7.3 → 1.7.5

package/dist/dockview.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.7.3
+ * @version 1.7.5
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -145,9 +145,49 @@
           };
       };
   })(exports.DockviewEvent || (exports.DockviewEvent = {}));
-  // dumb event emitter with better typings than nodes event emitter
-  // https://github.com/microsoft/vscode/blob/master/src/vs/base/common/event.ts
+  class LeakageMonitor {
+      constructor() {
+          this.events = new Map();
+      }
+      get size() {
+          return this.events.size;
+      }
+      add(event, stacktrace) {
+          this.events.set(event, stacktrace);
+      }
+      delete(event) {
+          this.events.delete(event);
+      }
+      clear() {
+          this.events.clear();
+      }
+  }
+  class Stacktrace {
+      static create() {
+          var _a;
+          return new Stacktrace((_a = new Error().stack) !== null && _a !== void 0 ? _a : '');
+      }
+      constructor(value) {
+          this.value = value;
+      }
+      print() {
+          console.warn(this.value);
+      }
+  }
+  class Listener {
+      constructor(callback, stacktrace) {
+          this.callback = callback;
+          this.stacktrace = stacktrace;
+      }
+  }
+  // relatively simple event emitter taken from https://github.com/microsoft/vscode/blob/master/src/vs/base/common/event.ts
   class Emitter {
+      static setLeakageMonitorEnabled(isEnabled) {
+          if (isEnabled !== Emitter.ENABLE_TRACKING) {
+              Emitter.MEMORY_LEAK_WATCHER.clear();
+          }
+          Emitter.ENABLE_TRACKING = isEnabled;
+      }
       constructor(options) {
           this.options = options;
           this._listeners = [];
@@ -155,11 +195,12 @@
       }
       get event() {
           if (!this._event) {
-              this._event = (listener) => {
+              this._event = (callback) => {
                   var _a;
                   if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.replay) && this._last !== undefined) {
-                      listener(this._last);
+                      callback(this._last);
                   }
+                  const listener = new Listener(callback, Emitter.ENABLE_TRACKING ? Stacktrace.create() : undefined);
                   this._listeners.push(listener);
                   return {
                       dispose: () => {
@@ -167,28 +208,50 @@
                           if (index > -1) {
                               this._listeners.splice(index, 1);
                           }
+                          else if (Emitter.ENABLE_TRACKING) ;
                       },
                   };
               };
+              if (Emitter.ENABLE_TRACKING) {
+                  Emitter.MEMORY_LEAK_WATCHER.add(this._event, Stacktrace.create());
+              }
           }
           return this._event;
       }
       fire(e) {
           this._last = e;
           for (const listener of this._listeners) {
-              listener(e);
+              listener.callback(e);
           }
       }
       dispose() {
-          this._listeners = [];
-          this._disposed = true;
+          if (!this._disposed) {
+              this._disposed = true;
+              if (this._listeners.length > 0) {
+                  if (Emitter.ENABLE_TRACKING) {
+                      queueMicrotask(() => {
+                          var _a;
+                          // don't check until stack of execution is completed to allow for out-of-order disposals within the same execution block
+                          for (const listener of this._listeners) {
+                              console.warn((_a = listener.stacktrace) === null || _a === void 0 ? void 0 : _a.print());
+                          }
+                      });
+                  }
+                  this._listeners = [];
+              }
+              if (Emitter.ENABLE_TRACKING && this._event) {
+                  Emitter.MEMORY_LEAK_WATCHER.delete(this._event);
+              }
+          }
       }
   }
+  Emitter.ENABLE_TRACKING = false;
+  Emitter.MEMORY_LEAK_WATCHER = new LeakageMonitor();
   function addDisposableWindowListener(element, type, listener, options) {
       element.addEventListener(type, listener, options);
       return {
           dispose: () => {
-              element.removeEventListener(type, listener);
+              element.removeEventListener(type, listener, options);
           },
       };
   }
@@ -196,7 +259,7 @@
       element.addEventListener(type, listener, options);
       return {
           dispose: () => {
-              element.removeEventListener(type, listener);
+              element.removeEventListener(type, listener, options);
           },
       };
   }
@@ -236,13 +299,13 @@
       }
       constructor(...args) {
           this._isDisposed = false;
-          this.disposables = args;
+          this._disposables = args;
       }
       addDisposables(...args) {
-          args.forEach((arg) => this.disposables.push(arg));
+          args.forEach((arg) => this._disposables.push(arg));
       }
       dispose() {
-          this.disposables.forEach((arg) => arg.dispose());
+          this._disposables.forEach((arg) => arg.dispose());
           this._isDisposed = true;
       }
   }
@@ -332,6 +395,7 @@
           this.onDidFocus = this._onDidFocus.event;
           this._onDidBlur = new Emitter();
           this.onDidBlur = this._onDidBlur.event;
+          this.addDisposables(this._onDidFocus, this._onDidBlur);
           let hasFocus = isAncestor(document.activeElement, element);
           let loosingFocus = false;
           const onFocus = () => {
@@ -376,11 +440,6 @@
       refreshState() {
           this._refreshStateHandler();
       }
-      dispose() {
-          super.dispose();
-          this._onDidBlur.dispose();
-          this._onDidFocus.dispose();
-      }
   }
 
   function createComponent(id, componentName, components = {}, frameworkComponents = {}, createFrameworkComponent, fallback) {
@@ -609,7 +668,7 @@
           this._orthogonalSize = value;
       }
       get length() {
-          return this.views.length;
+          return this.viewItems.length;
       }
       get proportions() {
           return this._proportions ? [...this._proportions] : undefined;
@@ -628,12 +687,12 @@
               : 'vertical');
       }
       get minimumSize() {
-          return this.views.reduce((r, item) => r + item.minimumSize, 0);
+          return this.viewItems.reduce((r, item) => r + item.minimumSize, 0);
       }
       get maximumSize() {
           return this.length === 0
               ? Number.POSITIVE_INFINITY
-              : this.views.reduce((r, item) => r + item.maximumSize, 0);
+              : this.viewItems.reduce((r, item) => r + item.maximumSize, 0);
       }
       get startSnappingEnabled() {
           return this._startSnappingEnabled;
@@ -657,7 +716,7 @@
       }
       constructor(container, options) {
           this.container = container;
-          this.views = [];
+          this.viewItems = [];
           this.sashes = [];
           this._size = 0;
           this._orthogonalSize = 0;
@@ -671,12 +730,12 @@
           this.onDidAddView = this._onDidAddView.event;
           this._onDidRemoveView = new Emitter();
           this.onDidRemoveView = this._onDidRemoveView.event;
-          this.resize = (index, delta, sizes = this.views.map((x) => x.size), lowPriorityIndexes, highPriorityIndexes, overloadMinDelta = Number.NEGATIVE_INFINITY, overloadMaxDelta = Number.POSITIVE_INFINITY, snapBefore, snapAfter) => {
-              if (index < 0 || index > this.views.length) {
+          this.resize = (index, delta, sizes = this.viewItems.map((x) => x.size), lowPriorityIndexes, highPriorityIndexes, overloadMinDelta = Number.NEGATIVE_INFINITY, overloadMaxDelta = Number.POSITIVE_INFINITY, snapBefore, snapAfter) => {
+              if (index < 0 || index > this.viewItems.length) {
                   return 0;
               }
               const upIndexes = range(index, -1);
-              const downIndexes = range(index + 1, this.views.length);
+              const downIndexes = range(index + 1, this.viewItems.length);
               //
               if (highPriorityIndexes) {
                   for (const i of highPriorityIndexes) {
@@ -691,34 +750,34 @@
                   }
               }
               //
-              const upItems = upIndexes.map((i) => this.views[i]);
+              const upItems = upIndexes.map((i) => this.viewItems[i]);
               const upSizes = upIndexes.map((i) => sizes[i]);
               //
-              const downItems = downIndexes.map((i) => this.views[i]);
+              const downItems = downIndexes.map((i) => this.viewItems[i]);
               const downSizes = downIndexes.map((i) => sizes[i]);
               //
-              const minDeltaUp = upIndexes.reduce((_, i) => _ + this.views[i].minimumSize - sizes[i], 0);
-              const maxDeltaUp = upIndexes.reduce((_, i) => _ + this.views[i].maximumSize - sizes[i], 0);
+              const minDeltaUp = upIndexes.reduce((_, i) => _ + this.viewItems[i].minimumSize - sizes[i], 0);
+              const maxDeltaUp = upIndexes.reduce((_, i) => _ + this.viewItems[i].maximumSize - sizes[i], 0);
               //
               const maxDeltaDown = downIndexes.length === 0
                   ? Number.POSITIVE_INFINITY
-                  : downIndexes.reduce((_, i) => _ + sizes[i] - this.views[i].minimumSize, 0);
+                  : downIndexes.reduce((_, i) => _ + sizes[i] - this.viewItems[i].minimumSize, 0);
               const minDeltaDown = downIndexes.length === 0
                   ? Number.NEGATIVE_INFINITY
-                  : downIndexes.reduce((_, i) => _ + sizes[i] - this.views[i].maximumSize, 0);
+                  : downIndexes.reduce((_, i) => _ + sizes[i] - this.viewItems[i].maximumSize, 0);
               //
               const minDelta = Math.max(minDeltaUp, minDeltaDown);
               const maxDelta = Math.min(maxDeltaDown, maxDeltaUp);
               //
               let snapped = false;
               if (snapBefore) {
-                  const snapView = this.views[snapBefore.index];
+                  const snapView = this.viewItems[snapBefore.index];
                   const visible = delta >= snapBefore.limitDelta;
                   snapped = visible !== snapView.visible;
                   snapView.setVisible(visible, snapBefore.size);
               }
               if (!snapped && snapAfter) {
-                  const snapView = this.views[snapAfter.index];
+                  const snapView = this.viewItems[snapAfter.index];
                   const visible = delta < snapAfter.limitDelta;
                   snapped = visible !== snapView.visible;
                   snapView.setVisible(visible, snapAfter.size);
@@ -780,7 +839,7 @@
                   );
               });
               // Initialize content size and proportions for first layout
-              this.contentSize = this.views.reduce((r, i) => r + i.size, 0);
+              this.contentSize = this.viewItems.reduce((r, i) => r + i.size, 0);
               this.saveProportions();
           }
       }
@@ -797,18 +856,18 @@
           }
       }
       isViewVisible(index) {
-          if (index < 0 || index >= this.views.length) {
+          if (index < 0 || index >= this.viewItems.length) {
               throw new Error('Index out of bounds');
           }
-          const viewItem = this.views[index];
+          const viewItem = this.viewItems[index];
           return viewItem.visible;
       }
       setViewVisible(index, visible) {
-          if (index < 0 || index >= this.views.length) {
+          if (index < 0 || index >= this.viewItems.length) {
               throw new Error('Index out of bounds');
           }
           toggleClass(this.container, 'visible', visible);
-          const viewItem = this.views[index];
+          const viewItem = this.viewItems[index];
           toggleClass(this.container, 'visible', visible);
           viewItem.setVisible(visible, viewItem.size);
           this.distributeEmptySpace(index);
@@ -816,33 +875,33 @@
           this.saveProportions();
       }
       getViewSize(index) {
-          if (index < 0 || index >= this.views.length) {
+          if (index < 0 || index >= this.viewItems.length) {
               return -1;
           }
-          return this.views[index].size;
+          return this.viewItems[index].size;
       }
       resizeView(index, size) {
-          if (index < 0 || index >= this.views.length) {
+          if (index < 0 || index >= this.viewItems.length) {
               return;
           }
-          const indexes = range(this.views.length).filter((i) => i !== index);
+          const indexes = range(this.viewItems.length).filter((i) => i !== index);
           const lowPriorityIndexes = [
-              ...indexes.filter((i) => this.views[i].priority === exports.LayoutPriority.Low),
+              ...indexes.filter((i) => this.viewItems[i].priority === exports.LayoutPriority.Low),
               index,
           ];
-          const highPriorityIndexes = indexes.filter((i) => this.views[i].priority === exports.LayoutPriority.High);
-          const item = this.views[index];
+          const highPriorityIndexes = indexes.filter((i) => this.viewItems[i].priority === exports.LayoutPriority.High);
+          const item = this.viewItems[index];
           size = Math.round(size);
           size = clamp(size, item.minimumSize, Math.min(item.maximumSize, this._size));
           item.size = size;
           this.relayout(lowPriorityIndexes, highPriorityIndexes);
       }
       getViews() {
-          return this.views.map((x) => x.view);
+          return this.viewItems.map((x) => x.view);
       }
       onDidChange(item, size) {
-          const index = this.views.indexOf(item);
-          if (index < 0 || index >= this.views.length) {
+          const index = this.viewItems.indexOf(item);
+          if (index < 0 || index >= this.viewItems.length) {
               return;
           }
           size = typeof size === 'number' ? size : item.size;
@@ -850,7 +909,7 @@
           item.size = size;
           this.relayout([index]);
       }
-      addView(view, size = { type: 'distribute' }, index = this.views.length, skipLayout) {
+      addView(view, size = { type: 'distribute' }, index = this.viewItems.length, skipLayout) {
           const container = document.createElement('div');
           container.className = 'view';
           container.appendChild(view.element);
@@ -868,24 +927,25 @@
               viewSize = view.minimumSize;
           }
           const disposable = view.onDidChange((newSize) => this.onDidChange(viewItem, newSize.size));
-          const dispose = () => {
-              disposable === null || disposable === void 0 ? void 0 : disposable.dispose();
-              this.viewContainer.removeChild(container);
-          };
-          const viewItem = new ViewItem(container, view, viewSize, { dispose });
-          if (index === this.views.length) {
+          const viewItem = new ViewItem(container, view, viewSize, {
+              dispose: () => {
+                  disposable.dispose();
+                  this.viewContainer.removeChild(container);
+              },
+          });
+          if (index === this.viewItems.length) {
               this.viewContainer.appendChild(container);
           }
           else {
               this.viewContainer.insertBefore(container, this.viewContainer.children.item(index));
           }
-          this.views.splice(index, 0, viewItem);
-          if (this.views.length > 1) {
+          this.viewItems.splice(index, 0, viewItem);
+          if (this.viewItems.length > 1) {
               //add sash
               const sash = document.createElement('div');
               sash.className = 'sash';
               const onStart = (event) => {
-                  for (const item of this.views) {
+                  for (const item of this.viewItems) {
                       item.enabled = false;
                   }
                   const iframes = [
@@ -900,27 +960,29 @@
                       : event.clientY;
                   const sashIndex = firstIndex(this.sashes, (s) => s.container === sash);
                   //
-                  const sizes = this.views.map((x) => x.size);
+                  const sizes = this.viewItems.map((x) => x.size);
                   //
                   let snapBefore;
                   let snapAfter;
                   const upIndexes = range(sashIndex, -1);
-                  const downIndexes = range(sashIndex + 1, this.views.length);
-                  const minDeltaUp = upIndexes.reduce((r, i) => r + (this.views[i].minimumSize - sizes[i]), 0);
-                  const maxDeltaUp = upIndexes.reduce((r, i) => r + (this.views[i].viewMaximumSize - sizes[i]), 0);
+                  const downIndexes = range(sashIndex + 1, this.viewItems.length);
+                  const minDeltaUp = upIndexes.reduce((r, i) => r + (this.viewItems[i].minimumSize - sizes[i]), 0);
+                  const maxDeltaUp = upIndexes.reduce((r, i) => r + (this.viewItems[i].viewMaximumSize - sizes[i]), 0);
                   const maxDeltaDown = downIndexes.length === 0
                       ? Number.POSITIVE_INFINITY
-                      : downIndexes.reduce((r, i) => r + (sizes[i] - this.views[i].minimumSize), 0);
+                      : downIndexes.reduce((r, i) => r +
+                          (sizes[i] - this.viewItems[i].minimumSize), 0);
                   const minDeltaDown = downIndexes.length === 0
                       ? Number.NEGATIVE_INFINITY
                       : downIndexes.reduce((r, i) => r +
-                          (sizes[i] - this.views[i].viewMaximumSize), 0);
+                          (sizes[i] -
+                              this.viewItems[i].viewMaximumSize), 0);
                   const minDelta = Math.max(minDeltaUp, minDeltaDown);
                   const maxDelta = Math.min(maxDeltaDown, maxDeltaUp);
                   const snapBeforeIndex = this.findFirstSnapIndex(upIndexes);
                   const snapAfterIndex = this.findFirstSnapIndex(downIndexes);
                   if (typeof snapBeforeIndex === 'number') {
-                      const snappedViewItem = this.views[snapBeforeIndex];
+                      const snappedViewItem = this.viewItems[snapBeforeIndex];
                       const halfSize = Math.floor(snappedViewItem.viewMinimumSize / 2);
                       snapBefore = {
                           index: snapBeforeIndex,
@@ -931,7 +993,7 @@
                       };
                   }
                   if (typeof snapAfterIndex === 'number') {
-                      const snappedViewItem = this.views[snapAfterIndex];
+                      const snappedViewItem = this.viewItems[snapAfterIndex];
                       const halfSize = Math.floor(snappedViewItem.viewMinimumSize / 2);
                       snapAfter = {
                           index: snapAfterIndex,
@@ -952,7 +1014,7 @@
                       this.layoutViews();
                   };
                   const end = () => {
-                      for (const item of this.views) {
+                      for (const item of this.viewItems) {
                           item.enabled = true;
                       }
                       for (const iframe of iframes) {
@@ -961,12 +1023,10 @@
                       this.saveProportions();
                       document.removeEventListener('mousemove', mousemove);
                       document.removeEventListener('mouseup', end);
-                      document.removeEventListener('mouseend', end);
                       this._onDidSashEnd.fire(undefined);
                   };
                   document.addEventListener('mousemove', mousemove);
                   document.addEventListener('mouseup', end);
-                  document.addEventListener('mouseend', end);
               };
               sash.addEventListener('mousedown', onStart);
               const sashItem = {
@@ -992,7 +1052,7 @@
       distributeViewSizes() {
           const flexibleViewItems = [];
           let flexibleSize = 0;
-          for (const item of this.views) {
+          for (const item of this.viewItems) {
               if (item.maximumSize - item.minimumSize > 0) {
                   flexibleViewItems.push(item);
                   flexibleSize += item.size;
@@ -1002,17 +1062,17 @@
           for (const item of flexibleViewItems) {
               item.size = clamp(size, item.minimumSize, item.maximumSize);
           }
-          const indexes = range(this.views.length);
-          const lowPriorityIndexes = indexes.filter((i) => this.views[i].priority === exports.LayoutPriority.Low);
-          const highPriorityIndexes = indexes.filter((i) => this.views[i].priority === exports.LayoutPriority.High);
+          const indexes = range(this.viewItems.length);
+          const lowPriorityIndexes = indexes.filter((i) => this.viewItems[i].priority === exports.LayoutPriority.Low);
+          const highPriorityIndexes = indexes.filter((i) => this.viewItems[i].priority === exports.LayoutPriority.High);
           this.relayout(lowPriorityIndexes, highPriorityIndexes);
       }
       removeView(index, sizing, skipLayout = false) {
           // Remove view
-          const viewItem = this.views.splice(index, 1)[0];
+          const viewItem = this.viewItems.splice(index, 1)[0];
           viewItem.dispose();
           // Remove sash
-          if (this.views.length >= 1) {
+          if (this.viewItems.length >= 1) {
               const sashIndex = Math.max(index - 1, 0);
               const sashItem = this.sashes.splice(sashIndex, 1)[0];
               sashItem.disposable();
@@ -1027,10 +1087,10 @@
           return viewItem.view;
       }
       getViewCachedVisibleSize(index) {
-          if (index < 0 || index >= this.views.length) {
+          if (index < 0 || index >= this.viewItems.length) {
               throw new Error('Index out of bounds');
           }
-          const viewItem = this.views[index];
+          const viewItem = this.viewItems[index];
           return viewItem.cachedVisibleSize;
       }
       moveView(from, to) {
@@ -1046,14 +1106,14 @@
           this.size = size;
           this.orthogonalSize = orthogonalSize;
           if (!this.proportions) {
-              const indexes = range(this.views.length);
-              const lowPriorityIndexes = indexes.filter((i) => this.views[i].priority === exports.LayoutPriority.Low);
-              const highPriorityIndexes = indexes.filter((i) => this.views[i].priority === exports.LayoutPriority.High);
-              this.resize(this.views.length - 1, size - previousSize, undefined, lowPriorityIndexes, highPriorityIndexes);
+              const indexes = range(this.viewItems.length);
+              const lowPriorityIndexes = indexes.filter((i) => this.viewItems[i].priority === exports.LayoutPriority.Low);
+              const highPriorityIndexes = indexes.filter((i) => this.viewItems[i].priority === exports.LayoutPriority.High);
+              this.resize(this.viewItems.length - 1, size - previousSize, undefined, lowPriorityIndexes, highPriorityIndexes);
           }
           else {
-              for (let i = 0; i < this.views.length; i++) {
-                  const item = this.views[i];
+              for (let i = 0; i < this.viewItems.length; i++) {
+                  const item = this.viewItems[i];
                   item.size = clamp(Math.round(this.proportions[i] * size), item.minimumSize, item.maximumSize);
               }
           }
@@ -1061,18 +1121,18 @@
           this.layoutViews();
       }
       relayout(lowPriorityIndexes, highPriorityIndexes) {
-          const contentSize = this.views.reduce((r, i) => r + i.size, 0);
-          this.resize(this.views.length - 1, this._size - contentSize, undefined, lowPriorityIndexes, highPriorityIndexes);
+          const contentSize = this.viewItems.reduce((r, i) => r + i.size, 0);
+          this.resize(this.viewItems.length - 1, this._size - contentSize, undefined, lowPriorityIndexes, highPriorityIndexes);
           this.distributeEmptySpace();
           this.layoutViews();
           this.saveProportions();
       }
       distributeEmptySpace(lowPriorityIndex) {
-          const contentSize = this.views.reduce((r, i) => r + i.size, 0);
+          const contentSize = this.viewItems.reduce((r, i) => r + i.size, 0);
           let emptyDelta = this.size - contentSize;
-          const indexes = range(this.views.length - 1, -1);
-          const lowPriorityIndexes = indexes.filter((i) => this.views[i].priority === exports.LayoutPriority.Low);
-          const highPriorityIndexes = indexes.filter((i) => this.views[i].priority === exports.LayoutPriority.High);
+          const indexes = range(this.viewItems.length - 1, -1);
+          const lowPriorityIndexes = indexes.filter((i) => this.viewItems[i].priority === exports.LayoutPriority.Low);
+          const highPriorityIndexes = indexes.filter((i) => this.viewItems[i].priority === exports.LayoutPriority.High);
           for (const index of highPriorityIndexes) {
               pushToStart(indexes, index);
           }
@@ -1083,7 +1143,7 @@
               pushToEnd(indexes, lowPriorityIndex);
           }
           for (let i = 0; emptyDelta !== 0 && i < indexes.length; i++) {
-              const item = this.views[indexes[i]];
+              const item = this.viewItems[indexes[i]];
               const size = clamp(item.size + emptyDelta, item.minimumSize, item.maximumSize);
               const viewDelta = size - item.size;
               emptyDelta -= viewDelta;
@@ -1092,16 +1152,16 @@
       }
       saveProportions() {
           if (this.proportionalLayout && this.contentSize > 0) {
-              this._proportions = this.views.map((i) => i.size / this.contentSize);
+              this._proportions = this.viewItems.map((i) => i.size / this.contentSize);
           }
       }
       layoutViews() {
-          this.contentSize = this.views.reduce((r, i) => r + i.size, 0);
+          this.contentSize = this.viewItems.reduce((r, i) => r + i.size, 0);
           let sum = 0;
           const x = [];
           this.updateSashEnablement();
-          for (let i = 0; i < this.views.length - 1; i++) {
-              sum += this.views[i].size;
+          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);
               if (this._orientation === exports.Orientation.HORIZONTAL) {
@@ -1113,7 +1173,7 @@
                   this.sashes[i].container.style.top = `${offset}px`;
               }
           }
-          this.views.forEach((view, i) => {
+          this.viewItems.forEach((view, i) => {
               if (this._orientation === exports.Orientation.HORIZONTAL) {
                   view.container.style.width = `${view.size}px`;
                   view.container.style.left = i == 0 ? '0px' : `${x[i - 1]}px`;
@@ -1132,7 +1192,7 @@
       findFirstSnapIndex(indexes) {
           // visible views first
           for (const index of indexes) {
-              const viewItem = this.views[index];
+              const viewItem = this.viewItems[index];
               if (!viewItem.visible) {
                   continue;
               }
@@ -1142,7 +1202,7 @@
           }
           // then, hidden views
           for (const index of indexes) {
-              const viewItem = this.views[index];
+              const viewItem = this.viewItems[index];
               if (viewItem.visible &&
                   viewItem.maximumSize - viewItem.minimumSize > 0) {
                   return undefined;
@@ -1155,10 +1215,10 @@
       }
       updateSashEnablement() {
           let previous = false;
-          const collapsesDown = this.views.map((i) => (previous = i.size - i.minimumSize > 0 || previous));
+          const collapsesDown = this.viewItems.map((i) => (previous = i.size - i.minimumSize > 0 || previous));
           previous = false;
-          const expandsDown = this.views.map((i) => (previous = i.maximumSize - i.size > 0 || previous));
-          const reverseViews = [...this.views].reverse();
+          const expandsDown = this.viewItems.map((i) => (previous = i.maximumSize - i.size > 0 || previous));
+          const reverseViews = [...this.viewItems].reverse();
           previous = false;
           const collapsesUp = reverseViews
               .map((i) => (previous = i.size - i.minimumSize > 0 || previous))
@@ -1170,19 +1230,19 @@
           let position = 0;
           for (let index = 0; index < this.sashes.length; index++) {
               const sash = this.sashes[index];
-              const viewItem = this.views[index];
+              const viewItem = this.viewItems[index];
               position += viewItem.size;
               const min = !(collapsesDown[index] && expandsUp[index + 1]);
               const max = !(expandsDown[index] && collapsesUp[index + 1]);
               if (min && max) {
                   const upIndexes = range(index, -1);
-                  const downIndexes = range(index + 1, this.views.length);
+                  const downIndexes = range(index + 1, this.viewItems.length);
                   const snapBeforeIndex = this.findFirstSnapIndex(upIndexes);
                   const snapAfterIndex = this.findFirstSnapIndex(downIndexes);
                   const snappedBefore = typeof snapBeforeIndex === 'number' &&
-                      !this.views[snapBeforeIndex].visible;
+                      !this.viewItems[snapBeforeIndex].visible;
                   const snappedAfter = typeof snapAfterIndex === 'number' &&
-                      !this.views[snapAfterIndex].visible;
+                      !this.viewItems[snapAfterIndex].visible;
                   if (snappedBefore &&
                       collapsesUp[index] &&
                       (position > 0 || this.startSnappingEnabled)) {
@@ -1242,6 +1302,9 @@
                   break;
               }
           }
+          for (const viewItem of this.viewItems) {
+              viewItem.dispose();
+          }
           this.element.remove();
       }
   }
@@ -1676,7 +1739,7 @@
               throw new Error('Invalid index');
           }
           this.splitview.removeView(index, sizing);
-          this._removeChild(index);
+          return this._removeChild(index);
       }
       _addChild(node, index) {
           this.children.splice(index, 0, node);
@@ -1698,10 +1761,10 @@
           });
       }
       dispose() {
-          super.dispose();
           this._childrenDisposable.dispose();
-          this.children.forEach((child) => child.dispose());
           this.splitview.dispose();
+          this.children.forEach((child) => child.dispose());
+          super.dispose();
       }
   }
 
@@ -1931,7 +1994,8 @@
           if (oldRoot.children.length === 1) {
               // can remove one level of redundant branching if there is only a single child
               const childReference = oldRoot.children[0];
-              oldRoot.removeChild(0); // remove to prevent disposal when disposing of unwanted root
+              const child = oldRoot.removeChild(0); // remove to prevent disposal when disposing of unwanted root
+              child.dispose();
               oldRoot.dispose();
               this._root.addChild(
               /**
@@ -2038,7 +2102,8 @@
               if (typeof newSiblingCachedVisibleSize === 'number') {
                   newSiblingSize = exports.Sizing.Invisible(newSiblingCachedVisibleSize);
               }
-              grandParent.removeChild(parentIndex);
+              const child = grandParent.removeChild(parentIndex);
+              child.dispose();
               const newParent = new BranchNode(parent.orientation, this.proportionalLayout, this.styles, parent.size, parent.orthogonalSize);
               grandParent.addChild(newParent, parent.size, parentIndex);
               const newSibling = new LeafNode(parent.view, grandParent.orientation, parent.size);
@@ -2600,6 +2665,7 @@
       }
       dispose() {
           this.removeDropTarget();
+          super.dispose();
       }
       toggleClasses(quadrant, width, height) {
           var _a, _b, _c, _d;
@@ -2777,8 +2843,8 @@
           if (this.panel.view) {
               const _onDidFocus = this.panel.view.content.onDidFocus;
               const _onDidBlur = this.panel.view.content.onDidBlur;
-              const { onDidFocus, onDidBlur } = trackFocus(this._element);
-              disposable.addDisposables(onDidFocus(() => this._onDidFocus.fire()), onDidBlur(() => this._onDidBlur.fire()));
+              const focusTracker = trackFocus(this._element);
+              disposable.addDisposables(focusTracker, focusTracker.onDidFocus(() => this._onDidFocus.fire()), focusTracker.onDidBlur(() => this._onDidBlur.fire()));
               if (_onDidFocus) {
                   disposable.addDisposables(_onDidFocus(() => this._onDidFocus.fire()));
               }
@@ -2817,24 +2883,32 @@
       constructor(el) {
           super();
           this.el = el;
-          this.disposable = new MutableDisposable();
+          this.dataDisposable = new MutableDisposable();
+          this.pointerEventsDisposable = new MutableDisposable();
           this._onDragStart = new Emitter();
           this.onDragStart = this._onDragStart.event;
-          this.iframes = [];
+          this.addDisposables(this._onDragStart, this.dataDisposable, this.pointerEventsDisposable);
           this.configure();
       }
       configure() {
           this.addDisposables(this._onDragStart, addDisposableListener(this.el, 'dragstart', (event) => {
-              this.iframes = [
+              const iframes = [
                   ...getElementsByTagName('iframe'),
                   ...getElementsByTagName('webview'),
               ];
-              for (const iframe of this.iframes) {
+              this.pointerEventsDisposable.value = {
+                  dispose: () => {
+                      for (const iframe of iframes) {
+                          iframe.style.pointerEvents = 'auto';
+                      }
+                  },
+              };
+              for (const iframe of iframes) {
                   iframe.style.pointerEvents = 'none';
               }
               this.el.classList.add('dv-dragged');
               setTimeout(() => this.el.classList.remove('dv-dragged'), 0);
-              this.disposable.value = this.getData(event.dataTransfer);
+              this.dataDisposable.value = this.getData(event.dataTransfer);
               if (event.dataTransfer) {
                   event.dataTransfer.effectAllowed = 'move';
                   /**
@@ -2849,11 +2923,8 @@
                   event.dataTransfer.setData('text/plain', '__dockview_internal_drag_event__');
               }
           }), addDisposableListener(this.el, 'dragend', () => {
-              for (const iframe of this.iframes) {
-                  iframe.style.pointerEvents = 'auto';
-              }
-              this.iframes = [];
-              this.disposable.dispose();
+              this.pointerEventsDisposable.dispose();
+              this.dataDisposable.dispose();
           }));
       }
   }
@@ -2871,13 +2942,12 @@
           this.onChanged = this._onChanged.event;
           this._onDropped = new Emitter();
           this.onDrop = this._onDropped.event;
-          this.addDisposables(this._onChanged, this._onDropped);
           this._element = document.createElement('div');
           this._element.className = 'tab';
           this._element.tabIndex = 0;
           this._element.draggable = true;
           toggleClass(this.element, 'inactive-tab', true);
-          this.addDisposables(new (class Handler extends DragHandler {
+          this.addDisposables(this._onChanged, this._onDropped, new (class Handler extends DragHandler {
               constructor() {
                   super(...arguments);
                   this.panelTransfer = LocalSelectionTransfer.getInstance();
@@ -2890,9 +2960,6 @@
                       },
                   };
               }
-              dispose() {
-                  //
-              }
           })(this._element));
           this.addDisposables(addDisposableListener(this._element, 'mousedown', (event) => {
               if (event.defaultPrevented) {
@@ -2927,7 +2994,7 @@
           });
           this.addDisposables(this.droptarget.onDrop((event) => {
               this._onDropped.fire(event);
-          }));
+          }), this.droptarget);
       }
       setActive(isActive) {
           toggleClass(this.element, 'active-tab', isActive);
@@ -2942,7 +3009,6 @@
       }
       dispose() {
           super.dispose();
-          this.droptarget.dispose();
       }
   }
 
@@ -2988,9 +3054,6 @@
               },
           };
       }
-      dispose() {
-          //
-      }
   }
 
   class VoidContainer extends CompositeDisposable {
@@ -3146,6 +3209,7 @@
           const tabToRemove = this.tabs.splice(index, 1)[0];
           const { value, disposable } = tabToRemove;
           disposable.dispose();
+          value.dispose();
           value.element.remove();
       }
       setActivePanel(panel) {
@@ -3189,9 +3253,10 @@
       }
       dispose() {
           super.dispose();
-          this.tabs.forEach((tab) => {
-              tab.disposable.dispose();
-          });
+          for (const { value, disposable } of this.tabs) {
+              disposable.dispose();
+              value.dispose();
+          }
           this.tabs = [];
       }
   }
@@ -3289,7 +3354,7 @@
           container.append(this.tabsContainer.element, this.contentContainer.element);
           this.header.hidden = !!options.hideHeader;
           this.locked = !!options.locked;
-          this.addDisposables(this._onMove, this._onDidChange, this._onDidDrop, this._onDidAddPanel, this._onDidRemovePanel, this._onDidActivePanelChange, this.tabsContainer.onDrop((event) => {
+          this.addDisposables(this.tabsContainer.onDrop((event) => {
               this.handleDropEvent(event.event, 'center', event.index);
           }), this.contentContainer.onDidFocus(() => {
               this.accessor.doSetGroupActive(this.groupPanel, true);
@@ -3297,7 +3362,7 @@
               // noop
           }), this.dropTarget.onDrop((event) => {
               this.handleDropEvent(event.nativeEvent, event.position);
-          }));
+          }), this._onMove, this._onDidChange, this._onDidDrop, this._onDidAddPanel, this._onDidRemovePanel, this._onDidActivePanelChange);
       }
       initialize() {
           var _a, _b;
@@ -3731,8 +3796,7 @@
           this.layout(0, 0, true); // set some elements height/widths
           this.addDisposables(this.gridview.onDidChange(() => {
               this._bufferOnDidLayoutChange.fire();
-          }));
-          this.addDisposables(exports.DockviewEvent.any(this.onDidAddGroup, this.onDidRemoveGroup, this.onDidActiveGroupChange)(() => {
+          }), exports.DockviewEvent.any(this.onDidAddGroup, this.onDidRemoveGroup, this.onDidActiveGroupChange)(() => {
               this._bufferOnDidLayoutChange.fire();
           }), this._bufferOnDidLayoutChange.onEvent(() => {
               this._onDidLayoutChange.fire();
@@ -3835,7 +3899,6 @@
           this.gridview.layout(width, height);
       }
       dispose() {
-          super.dispose();
           this._onDidActiveGroupChange.dispose();
           this._onDidAddGroup.dispose();
           this._onDidRemoveGroup.dispose();
@@ -3844,6 +3907,7 @@
               group.dispose();
           }
           this.gridview.dispose();
+          super.dispose();
       }
   }
 
@@ -3907,7 +3971,7 @@
           //
           this._onUpdateParameters = new Emitter();
           this.onUpdateParameters = this._onUpdateParameters.event;
-          this.addDisposables(this.panelUpdatesDisposable, this._onDidDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onFocusEvent, this._onActiveChange, this._onVisibilityChange, this._onUpdateParameters, this.onDidFocusChange((event) => {
+          this.addDisposables(this.onDidFocusChange((event) => {
               this._isFocused = event.isFocused;
           }), this.onDidActiveChange((event) => {
               this._isActive = event.isActive;
@@ -3916,14 +3980,12 @@
           }), this.onDidDimensionsChange((event) => {
               this._width = event.width;
               this._height = event.height;
-          }));
+          }), this.panelUpdatesDisposable, this._onDidDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onFocusEvent, this._onActiveChange, this._onVisibilityChange, this._onUpdateParameters);
       }
       initialize(panel) {
           this.panelUpdatesDisposable.value = this._onUpdateParameters.event((parameters) => {
               panel.update({
-                  params: {
-                      params: parameters,
-                  },
+                  params: parameters,
               });
           });
       }
@@ -4018,12 +4080,12 @@
           this._element.style.height = '100%';
           this._element.style.width = '100%';
           this._element.style.overflow = 'hidden';
-          const { onDidFocus, onDidBlur } = trackFocus(this._element);
-          this.addDisposables(this.api, onDidFocus(() => {
+          const focusTracker = trackFocus(this._element);
+          this.addDisposables(this.api, focusTracker.onDidFocus(() => {
               this.api._onDidChangeFocus.fire({ isFocused: true });
-          }), onDidBlur(() => {
+          }), focusTracker.onDidBlur(() => {
               this.api._onDidChangeFocus.fire({ isFocused: false });
-          }));
+          }), focusTracker);
       }
       focus() {
           this.api._onFocusEvent.fire();
@@ -4044,7 +4106,18 @@
       }
       update(event) {
           var _a, _b;
+          // merge the new parameters with the existing parameters
           this._params = Object.assign(Object.assign({}, this._params), { params: Object.assign(Object.assign({}, (_a = this._params) === null || _a === void 0 ? void 0 : _a.params), event.params) });
+          /**
+           * delete new keys that have a value of undefined,
+           * allow values of null
+           */
+          for (const key of Object.keys(event.params)) {
+              if (event.params[key] === undefined) {
+                  delete this._params.params[key];
+              }
+          }
+          // update the view with the updated props
           (_b = this.part) === null || _b === void 0 ? void 0 : _b.update({ params: this._params.params });
       }
       toJSON() {
@@ -4058,9 +4131,9 @@
       }
       dispose() {
           var _a;
-          super.dispose();
           this.api.dispose();
           (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
+          super.dispose();
       }
   }
 
@@ -4439,7 +4512,7 @@
               this._maximumHeight = options.maximumHeight;
           }
           this.api.initialize(this); // TODO: required to by-pass 'super before this' requirement
-          this.addDisposables(this._onDidChange, this.api.onVisibilityChange((event) => {
+          this.addDisposables(this.api.onVisibilityChange((event) => {
               const { isVisible } = event;
               const { accessor } = this._params;
               accessor.setVisible(this, isVisible);
@@ -4468,7 +4541,7 @@
                   height: event.height,
                   width: event.width,
               });
-          }));
+          }), this._onDidChange);
       }
       setVisible(isVisible) {
           this.api._onDidVisibilityChange.fire({ isVisible });
@@ -4625,7 +4698,7 @@
           this.addDisposables(this.disposable, this._onDidTitleChange, this._onDidGroupChange, this._onDidActiveGroupChange);
       }
       setTitle(title) {
-          this.panel.update({ params: { title } });
+          this.panel.setTitle(title);
       }
       close() {
           this.group.model.closePanel(this.panel);
@@ -4690,12 +4763,18 @@
           }
       }
       update(event) {
-          const params = event.params;
-          this._params = Object.assign(Object.assign({}, (this._params || {})), event.params.params);
-          if (params.title !== this.title) {
-              this._title = params.title;
-              this.api._onDidTitleChange.fire({ title: params.title });
+          // merge the new parameters with the existing parameters
+          this._params = Object.assign(Object.assign({}, (this._params || {})), event.params);
+          /**
+           * delete new keys that have a value of undefined,
+           * allow values of null
+           */
+          for (const key of Object.keys(event.params)) {
+              if (event.params[key] === undefined) {
+                  delete this._params[key];
+              }
           }
+          // update the view with the updated props
           this.view.update({
               params: {
                   params: this._params,
@@ -5071,7 +5150,7 @@
                   size: { type: 'pixels', value: 20 },
               },
           });
-          this.addDisposables(dropTarget, dropTarget.onDrop((event) => {
+          this.addDisposables(dropTarget.onDrop((event) => {
               const data = getPanelData();
               if (data) {
                   this.moveGroupOrPanel(this.orthogonalize(event.position), data.groupId, data.panelId || undefined, 'center');
@@ -5079,7 +5158,7 @@
               else {
                   this._onDidDrop.fire(Object.assign(Object.assign({}, event), { api: this._api, group: null, getData: getPanelData }));
               }
-          }));
+          }), dropTarget);
           this._api = new DockviewApi(this);
           this.updateWatermark();
       }
@@ -5403,31 +5482,33 @@
           }
           super.doRemoveGroup(group, { skipActive });
       }
-      moveGroupOrPanel(referenceGroup, groupId, itemId, target, index) {
+      moveGroupOrPanel(destinationGroup, sourceGroupId, sourceItemId, destinationTarget, destinationIndex) {
           var _a;
-          const sourceGroup = groupId
-              ? (_a = this._groups.get(groupId)) === null || _a === void 0 ? void 0 : _a.value
+          const sourceGroup = sourceGroupId
+              ? (_a = this._groups.get(sourceGroupId)) === null || _a === void 0 ? void 0 : _a.value
               : undefined;
-          if (itemId === undefined) {
+          if (sourceItemId === undefined) {
               if (sourceGroup) {
-                  this.moveGroup(sourceGroup, referenceGroup, target);
+                  this.moveGroup(sourceGroup, destinationGroup, destinationTarget);
               }
               return;
           }
-          if (!target || target === 'center') {
-              const groupItem = (sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(itemId)) ||
-                  this.panels.find((panel) => panel.id === itemId);
+          if (!destinationTarget || destinationTarget === 'center') {
+              const groupItem = (sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(sourceItemId)) ||
+                  this.panels.find((panel) => panel.id === sourceItemId);
               if (!groupItem) {
-                  throw new Error(`No panel with id ${itemId}`);
+                  throw new Error(`No panel with id ${sourceItemId}`);
               }
               if ((sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.size) === 0) {
                   this.doRemoveGroup(sourceGroup);
               }
-              referenceGroup.model.openPanel(groupItem, { index });
+              destinationGroup.model.openPanel(groupItem, {
+                  index: destinationIndex,
+              });
           }
           else {
-              const referenceLocation = getGridLocation(referenceGroup.element);
-              const targetLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
+              const referenceLocation = getGridLocation(destinationGroup.element);
+              const targetLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, destinationTarget);
               if (sourceGroup && sourceGroup.size < 2) {
                   const [targetParentLocation, to] = tail(targetLocation);
                   const sourceLocation = getGridLocation(sourceGroup.element);
@@ -5445,18 +5526,18 @@
                           skipDispose: true,
                       });
                       // after deleting the group we need to re-evaulate the ref location
-                      const updatedReferenceLocation = getGridLocation(referenceGroup.element);
-                      const location = getRelativeLocation(this.gridview.orientation, updatedReferenceLocation, target);
+                      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(itemId)) ||
-                      this.panels.find((panel) => panel.id === itemId);
+                  const groupItem = (sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(sourceItemId)) ||
+                      this.panels.find((panel) => panel.id === sourceItemId);
                   if (!groupItem) {
-                      throw new Error(`No panel with id ${itemId}`);
+                      throw new Error(`No panel with id ${sourceItemId}`);
                   }
-                  const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
+                  const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, destinationTarget);
                   const group = this.createGroupAtLocation(dropLocation);
                   group.model.openPanel(groupItem);
               }
@@ -5550,11 +5631,11 @@
           return (_a = Array.from(this._groups.values()).find((group) => group.value.model.containsPanel(panel))) === null || _a === void 0 ? void 0 : _a.value;
       }
       dispose() {
-          super.dispose();
           this._onDidActivePanelChange.dispose();
           this._onDidAddPanel.dispose();
           this._onDidRemovePanel.dispose();
           this._onDidLayoutFromJSON.dispose();
+          super.dispose();
       }
   }
 
@@ -5812,7 +5893,7 @@
       }
       set splitview(value) {
           this._splitview = value;
-          this._disposable.value = new CompositeDisposable(this._splitview.onDidSashEnd(() => {
+          this._splitviewChangeDisposable.value = new CompositeDisposable(this._splitview.onDidSashEnd(() => {
               this._onDidLayoutChange.fire(undefined);
           }), this._splitview.onDidAddView((e) => this._onDidAddView.fire(e)), this._splitview.onDidRemoveView((e) => this._onDidRemoveView.fire(e)));
       }
@@ -5834,7 +5915,7 @@
       }
       constructor(options) {
           super(options.parentElement);
-          this._disposable = new MutableDisposable();
+          this._splitviewChangeDisposable = new MutableDisposable();
           this._panels = new Map();
           this._onDidLayoutfromJSON = new Emitter();
           this.onDidLayoutFromJSON = this._onDidLayoutfromJSON.event;
@@ -5852,7 +5933,7 @@
               options.frameworkComponents = {};
           }
           this.splitview = new Splitview(this.element, options);
-          this.addDisposables(this._disposable, this._onDidAddView, this._onDidLayoutfromJSON, this._onDidRemoveView, this._onDidLayoutChange);
+          this.addDisposables(this._onDidAddView, this._onDidLayoutfromJSON, this._onDidRemoveView, this._onDidLayoutChange);
       }
       updateOptions(options) {
           const hasOrientationChanged = typeof options.orientation === 'string' &&
@@ -5890,15 +5971,15 @@
           }
       }
       removePanel(panel, sizing) {
-          const disposable = this._panels.get(panel.id);
-          if (!disposable) {
+          const item = this._panels.get(panel.id);
+          if (!item) {
               throw new Error(`unknown splitview panel ${panel.id}`);
           }
-          disposable.disposable.dispose();
-          disposable.value.dispose();
+          item.dispose();
           this._panels.delete(panel.id);
           const index = this.panels.findIndex((_) => _ === panel);
-          this.splitview.removeView(index, sizing);
+          const removedView = this.splitview.removeView(index, sizing);
+          removedView.dispose();
           const panels = this.panels;
           if (panels.length > 0) {
               this.setActive(panels[panels.length - 1]);
@@ -5945,7 +6026,7 @@
               }
               this.setActive(view, true);
           });
-          this._panels.set(view.id, { disposable, value: view });
+          this._panels.set(view.id, disposable);
       }
       toJSON() {
           var _a;
@@ -6018,20 +6099,26 @@
           this._onDidLayoutfromJSON.fire();
       }
       clear() {
-          for (const [_, value] of this._panels.entries()) {
-              value.disposable.dispose();
-              value.value.dispose();
+          for (const disposable of this._panels.values()) {
+              disposable.dispose();
           }
           this._panels.clear();
-          this.splitview.dispose();
+          while (this.splitview.length > 0) {
+              const view = this.splitview.removeView(0, exports.Sizing.Distribute, true);
+              view.dispose();
+          }
       }
       dispose() {
-          for (const [_, value] of this._panels.entries()) {
-              value.disposable.dispose();
-              value.value.dispose();
+          for (const disposable of this._panels.values()) {
+              disposable.dispose();
           }
           this._panels.clear();
+          const views = this.splitview.getViews();
+          this._splitviewChangeDisposable.dispose();
           this.splitview.dispose();
+          for (const view of views) {
+              view.dispose();
+          }
           super.dispose();
       }
   }