dockview-core 1.13.0 → 1.14.0

package/dist/cjs/api/dockviewGroupPanelApi.js

@@ -20,8 +20,7 @@ var droptarget_1 = require("../dnd/droptarget");
 var events_1 = require("../events");
 var lifecycle_1 = require("../lifecycle");
 var gridviewPanelApi_1 = require("./gridviewPanelApi");
-// TODO find a better way to initialize and avoid needing null checks
-var NOT_INITIALIZED_MESSAGE = 'DockviewGroupPanelApiImpl not initialized';
+var NOT_INITIALIZED_MESSAGE = 'dockview: DockviewGroupPanelApiImpl not initialized';
 var DockviewGroupPanelApiImpl = /** @class */ (function (_super) {
     __extends(DockviewGroupPanelApiImpl, _super);
     function DockviewGroupPanelApiImpl(id, accessor) {
@@ -100,15 +99,15 @@ var DockviewGroupPanelApiImpl = /** @class */ (function (_super) {
         }
     };
     DockviewGroupPanelApiImpl.prototype.initialize = function (group) {
-        var _this = this;
-        this._group = group;
         /**
-         * TODO: Annoying initialization order caveat
+         * TODO: Annoying initialization order caveat, find a better way to initialize and avoid needing null checks
          *
          * Due to the order on initialization we know that the model isn't defined until later in the same stack-frame of setup.
          * By queuing a microtask we can ensure the setup is completed within the same stack-frame, but after everything else has
          * finished ensuring the `model` is defined.
          */
+        var _this = this;
+        this._group = group;
         queueMicrotask(function () {
             _this._mutableDisposable.value =
                 _this._group.model.onDidActivePanelChange(function (event) {

package/dist/cjs/api/dockviewPanelApi.js

@@ -133,12 +133,10 @@ var DockviewPanelApiImpl = /** @class */ (function (_super) {
         var _a;
         var _trackGroupActive = (_a = previousGroup === null || previousGroup === void 0 ? void 0 : previousGroup.isActive) !== null && _a !== void 0 ? _a : false; // prevent duplicate events with same state
         this.groupEventsDisposable.value = new lifecycle_1.CompositeDisposable(this.group.api.onDidVisibilityChange(function (event) {
-            if (!event.isVisible && _this.isVisible) {
-                _this._onDidVisibilityChange.fire(event);
-            }
-            else if (event.isVisible &&
-                !_this.isVisible &&
-                _this.group.model.isPanelActive(_this.panel)) {
+            var hasBecomeHidden = !event.isVisible && _this.isVisible;
+            var hasBecomeVisible = event.isVisible && !_this.isVisible;
+            var isActivePanel = _this.group.model.isPanelActive(_this.panel);
+            if (hasBecomeHidden || (hasBecomeVisible && isActivePanel)) {
                 _this._onDidVisibilityChange.fire(event);
             }
         }), this.group.api.onDidLocationChange(function (event) {

package/dist/cjs/dockview/dockviewComponent.js

@@ -447,7 +447,7 @@ var DockviewComponent = /** @class */ (function (_super) {
             return element.getBoundingClientRect();
         }
         var box = getBox();
-        var groupId = (_b = (_a = options === null || options === void 0 ? void 0 : options.overridePopoutGroup) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : this.getNextGroupId(); //item.id;
+        var groupId = (_b = (_a = options === null || options === void 0 ? void 0 : options.overridePopoutGroup) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : this.getNextGroupId();
         if (itemToPopout.api.location.type === 'grid') {
             itemToPopout.api.setVisible(false);
         }
@@ -567,24 +567,22 @@ var DockviewComponent = /** @class */ (function (_super) {
                         });
                     }
                 }
-                else {
-                    if (_this.getPanel(group.id)) {
-                        var removedGroup = _this.doRemoveGroup(group, {
-                            skipDispose: true,
-                            skipActive: true,
-                        });
-                        removedGroup.model.renderContainer =
-                            _this.overlayRenderContainer;
-                        removedGroup.model.location = { type: 'grid' };
-                        returnedGroup = removedGroup;
-                    }
+                else if (_this.getPanel(group.id)) {
+                    var removedGroup = _this.doRemoveGroup(group, {
+                        skipDispose: true,
+                        skipActive: true,
+                    });
+                    removedGroup.model.renderContainer =
+                        _this.overlayRenderContainer;
+                    removedGroup.model.location = { type: 'grid' };
+                    returnedGroup = removedGroup;
                 }
             }));
             _this._popoutGroups.push(value);
             _this.updateWatermark();
         })
             .catch(function (err) {
-            console.error(err);
+            console.error('dockview: failed to create popout window', err);
         });
     };
     DockviewComponent.prototype.addFloatingGroup = function (item, coord, options) {
@@ -634,7 +632,7 @@ var DockviewComponent = /** @class */ (function (_super) {
                     this.doRemoveGroup(item, {
                         skipDispose: true,
                         skipPopoutReturn: true,
-                        skipPopoutAssociated: !!popoutReferenceGroup_1,
+                        skipPopoutAssociated: false,
                     });
                 }
             }
@@ -1104,7 +1102,6 @@ var DockviewComponent = /** @class */ (function (_super) {
         var e_13, _a;
         var groups = Array.from(this._groups.values()).map(function (_) { return _.value; });
         var hasActiveGroup = !!this.activeGroup;
-        var hasActivePanel = !!this.activePanel;
         try {
             for (var groups_1 = __values(groups), groups_1_1 = groups_1.next(); !groups_1_1.done; groups_1_1 = groups_1.next()) {
                 var group = groups_1_1.value;
@@ -1310,7 +1307,6 @@ var DockviewComponent = /** @class */ (function (_super) {
     };
     DockviewComponent.prototype.addGroup = function (options) {
         var _a;
-        var group = this.createGroup(options);
         if (options) {
             var referenceGroup = void 0;
             if ((0, options_1.isGroupOptionsWithPanel)(options)) {
@@ -1344,6 +1340,7 @@ var DockviewComponent = /** @class */ (function (_super) {
             var target = (0, baseComponentGridview_1.toTarget)(options.direction || 'within');
             var location_2 = (0, gridview_1.getGridLocation)(referenceGroup.element);
             var relativeLocation = (0, gridview_1.getRelativeLocation)(this.gridview.orientation, location_2, target);
+            var group = this.createGroup(options);
             this.doAddGroup(group, relativeLocation);
             if (!options.skipSetActive) {
                 this.doSetGroupAndPanelActive(group);
@@ -1351,6 +1348,7 @@ var DockviewComponent = /** @class */ (function (_super) {
             return group;
         }
         else {
+            var group = this.createGroup(options);
             this.doAddGroup(group);
             this.doSetGroupAndPanelActive(group);
             return group;
@@ -1670,7 +1668,7 @@ var DockviewComponent = /** @class */ (function (_super) {
         }
         var id = options === null || options === void 0 ? void 0 : options.id;
         if (id && this._groups.has(options.id)) {
-            console.warn("Duplicate group id ".concat(options === null || options === void 0 ? void 0 : options.id, ". reassigning group id to avoid errors"));
+            console.warn("dockview: Duplicate group id ".concat(options === null || options === void 0 ? void 0 : options.id, ". reassigning group id to avoid errors"));
             id = undefined;
         }
         if (!id) {

package/dist/cjs/dockview/dockviewPanel.js

@@ -123,12 +123,6 @@ var DockviewPanel = /** @class */ (function (_super) {
         var didTitleChange = title !== this.title;
         if (didTitleChange) {
             this._title = title;
-            this.view.update({
-                params: {
-                    params: this._params,
-                    title: this.title,
-                },
-            });
             this.api._onDidTitleChange.fire({ title: title });
         }
     };
@@ -167,10 +161,7 @@ var DockviewPanel = /** @class */ (function (_super) {
         }
         // update the view with the updated props
         this.view.update({
-            params: {
-                params: this._params,
-                title: this.title,
-            },
+            params: this._params,
         });
     };
     DockviewPanel.prototype.updateParentGroup = function (group, options) {

package/dist/cjs/events.d.ts

@@ -47,9 +47,20 @@ export declare class Emitter<T> implements IDisposable {
 }
 export declare function addDisposableWindowListener<K extends keyof WindowEventMap>(element: Window, type: K, listener: (this: Window, ev: WindowEventMap[K]) => any, options?: boolean | AddEventListenerOptions): IDisposable;
 export declare function addDisposableListener<K extends keyof HTMLElementEventMap>(element: HTMLElement, type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): IDisposable;
-export declare class TickDelayedEvent implements IDisposable {
-    private timer;
+/**
+ *
+ * Event Emitter that fires events from a Microtask callback, only one event will fire per event-loop cycle.
+ *
+ * It's kind of like using an `asapScheduler` in RxJs with additional logic to only fire once per event-loop cycle.
+ * This implementation exists to avoid external dependencies.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/queueMicrotask
+ * @see https://rxjs.dev/api/index/const/asapScheduler
+ */
+export declare class AsapEvent implements IDisposable {
     private readonly _onFired;
+    private _currentFireCount;
+    private _queued;
     readonly onEvent: Event<void>;
     fire(): void;
     dispose(): void;

package/dist/cjs/events.js

@@ -11,7 +11,7 @@ var __values = (this && this.__values) || function(o) {
     throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TickDelayedEvent = exports.addDisposableListener = exports.addDisposableWindowListener = exports.Emitter = exports.DockviewEvent = exports.Event = void 0;
+exports.AsapEvent = exports.addDisposableListener = exports.addDisposableWindowListener = exports.Emitter = exports.DockviewEvent = exports.Event = void 0;
 var Event;
 (function (Event) {
     Event.any = function () {
@@ -79,7 +79,7 @@ var Stacktrace = /** @class */ (function () {
         return new Stacktrace((_a = new Error().stack) !== null && _a !== void 0 ? _a : '');
     };
     Stacktrace.prototype.print = function () {
-        console.warn(this.value);
+        console.warn('dockview: stacktrace', this.value);
     };
     return Stacktrace;
 }());
@@ -129,7 +129,7 @@ var Emitter = /** @class */ (function () {
                             }
                             else if (Emitter.ENABLE_TRACKING) {
                                 // console.warn(
-                                //     `Listener already disposed`,
+                                //     `dockview: listener already disposed`,
                                 //     Stacktrace.create().print()
                                 // );
                             }
@@ -175,7 +175,7 @@ var Emitter = /** @class */ (function () {
                             // don't check until stack of execution is completed to allow for out-of-order disposals within the same execution block
                             for (var _c = __values(_this._listeners), _d = _c.next(); !_d.done; _d = _c.next()) {
                                 var listener = _d.value;
-                                console.warn((_b = listener.stacktrace) === null || _b === void 0 ? void 0 : _b.print());
+                                console.warn('dockview: stacktrace', (_b = listener.stacktrace) === null || _b === void 0 ? void 0 : _b.print());
                             }
                         }
                         catch (e_2_1) { e_2 = { error: e_2_1 }; }
@@ -217,24 +217,56 @@ function addDisposableListener(element, type, listener, options) {
     };
 }
 exports.addDisposableListener = addDisposableListener;
-var TickDelayedEvent = /** @class */ (function () {
-    function TickDelayedEvent() {
+/**
+ *
+ * Event Emitter that fires events from a Microtask callback, only one event will fire per event-loop cycle.
+ *
+ * It's kind of like using an `asapScheduler` in RxJs with additional logic to only fire once per event-loop cycle.
+ * This implementation exists to avoid external dependencies.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/queueMicrotask
+ * @see https://rxjs.dev/api/index/const/asapScheduler
+ */
+var AsapEvent = /** @class */ (function () {
+    function AsapEvent() {
+        var _this = this;
         this._onFired = new Emitter();
-        this.onEvent = this._onFired.event;
+        this._currentFireCount = 0;
+        this._queued = false;
+        this.onEvent = function (e) {
+            /**
+             * when the event is first subscribed to take note of the current fire count
+             */
+            var fireCountAtTimeOfEventSubscription = _this._currentFireCount;
+            return _this._onFired.event(function () {
+                /**
+                 * if the current fire count is greater than the fire count at event subscription
+                 * then the event has been fired since we subscribed and it's ok to "on_next" the event.
+                 *
+                 * if the count is not greater then what we are recieving is an event from the microtask
+                 * queue that was triggered before we actually subscribed and therfore we should ignore it.
+                 */
+                if (_this._currentFireCount > fireCountAtTimeOfEventSubscription) {
+                    e();
+                }
+            });
+        };
     }
-    TickDelayedEvent.prototype.fire = function () {
+    AsapEvent.prototype.fire = function () {
         var _this = this;
-        if (this.timer) {
-            clearTimeout(this.timer);
+        this._currentFireCount++;
+        if (this._queued) {
+            return;
         }
-        this.timer = setTimeout(function () {
+        this._queued = true;
+        queueMicrotask(function () {
+            _this._queued = false;
             _this._onFired.fire();
-            clearTimeout(_this.timer);
         });
     };
-    TickDelayedEvent.prototype.dispose = function () {
+    AsapEvent.prototype.dispose = function () {
         this._onFired.dispose();
     };
-    return TickDelayedEvent;
+    return AsapEvent;
 }());
-exports.TickDelayedEvent = TickDelayedEvent;
+exports.AsapEvent = AsapEvent;

package/dist/cjs/gridview/baseComponentGridview.d.ts

@@ -1,4 +1,4 @@
-import { Event, TickDelayedEvent } from '../events';
+import { Event, AsapEvent } from '../events';
 import { Gridview, IGridView } from './gridview';
 import { Position } from '../dnd/droptarget';
 import { IValueDisposable } from '../lifecycle';
@@ -51,15 +51,14 @@ export declare abstract class BaseGrid<T extends IGridPanelView> extends Resizab
     protected readonly _groups: Map<string, IValueDisposable<T>>;
     protected readonly gridview: Gridview;
     protected _activeGroup: T | undefined;
-    private _onDidLayoutChange;
-    readonly onDidLayoutChange: Event<void>;
     private readonly _onDidRemove;
     readonly onDidRemove: Event<T>;
     private readonly _onDidAdd;
     readonly onDidAdd: Event<T>;
     private readonly _onDidActiveChange;
     readonly onDidActiveChange: Event<T | undefined>;
-    protected readonly _bufferOnDidLayoutChange: TickDelayedEvent;
+    protected readonly _bufferOnDidLayoutChange: AsapEvent;
+    readonly onDidLayoutChange: Event<void>;
     get id(): string;
     get size(): number;
     get groups(): T[];

package/dist/cjs/gridview/baseComponentGridview.js

@@ -56,15 +56,14 @@ var BaseGrid = /** @class */ (function (_super) {
         var _this = _super.call(this, document.createElement('div'), options.disableAutoResizing) || this;
         _this._id = nextLayoutId.next();
         _this._groups = new Map();
-        _this._onDidLayoutChange = new events_1.Emitter();
-        _this.onDidLayoutChange = _this._onDidLayoutChange.event;
         _this._onDidRemove = new events_1.Emitter();
         _this.onDidRemove = _this._onDidRemove.event;
         _this._onDidAdd = new events_1.Emitter();
         _this.onDidAdd = _this._onDidAdd.event;
         _this._onDidActiveChange = new events_1.Emitter();
         _this.onDidActiveChange = _this._onDidActiveChange.event;
-        _this._bufferOnDidLayoutChange = new events_1.TickDelayedEvent();
+        _this._bufferOnDidLayoutChange = new events_1.AsapEvent();
+        _this.onDidLayoutChange = _this._bufferOnDidLayoutChange.onEvent;
         _this.element.style.height = '100%';
         _this.element.style.width = '100%';
         options.parentElement.appendChild(_this.element);
@@ -79,8 +78,6 @@ var BaseGrid = /** @class */ (function (_super) {
             _this._bufferOnDidLayoutChange.fire();
         }), events_1.Event.any(_this.onDidAdd, _this.onDidRemove, _this.onDidActiveChange)(function () {
             _this._bufferOnDidLayoutChange.fire();
-        }), _this._bufferOnDidLayoutChange.onEvent(function () {
-            _this._onDidLayoutChange.fire();
         }), _this._bufferOnDidLayoutChange);
         return _this;
     }
@@ -166,7 +163,7 @@ var BaseGrid = /** @class */ (function (_super) {
     });
     BaseGrid.prototype.setVisible = function (panel, visible) {
         this.gridview.setViewVisible((0, gridview_1.getGridLocation)(panel.element), visible);
-        this._onDidLayoutChange.fire();
+        this._bufferOnDidLayoutChange.fire();
     };
     BaseGrid.prototype.isVisible = function (panel) {
         return this.gridview.isViewVisible((0, gridview_1.getGridLocation)(panel.element));
@@ -278,7 +275,6 @@ var BaseGrid = /** @class */ (function (_super) {
         this._onDidActiveChange.dispose();
         this._onDidAdd.dispose();
         this._onDidRemove.dispose();
-        this._onDidLayoutChange.dispose();
         try {
             for (var _b = __values(this.groups), _c = _b.next(); !_c.done; _c = _b.next()) {
                 var group = _c.value;

package/dist/dockview-core.amd.js

@@ -1,6 +1,6 @@
 /**
  * dockview-core
- * @version 1.13.0
+ * @version 1.14.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -155,7 +155,7 @@ define(['exports'], (function (exports) { 'use strict';
           this.value = value;
       }
       print() {
-          console.warn(this.value);
+          console.warn('dockview: stacktrace', this.value);
       }
   }
   class Listener {
@@ -220,7 +220,7 @@ define(['exports'], (function (exports) { 'use strict';
                           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());
+                              console.warn('dockview: stacktrace', (_a = listener.stacktrace) === null || _a === void 0 ? void 0 : _a.print());
                           }
                       });
                   }
@@ -250,18 +250,49 @@ define(['exports'], (function (exports) { 'use strict';
           },
       };
   }
-  class TickDelayedEvent {
+  /**
+   *
+   * Event Emitter that fires events from a Microtask callback, only one event will fire per event-loop cycle.
+   *
+   * It's kind of like using an `asapScheduler` in RxJs with additional logic to only fire once per event-loop cycle.
+   * This implementation exists to avoid external dependencies.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/queueMicrotask
+   * @see https://rxjs.dev/api/index/const/asapScheduler
+   */
+  class AsapEvent {
       constructor() {
           this._onFired = new Emitter();
-          this.onEvent = this._onFired.event;
+          this._currentFireCount = 0;
+          this._queued = false;
+          this.onEvent = (e) => {
+              /**
+               * when the event is first subscribed to take note of the current fire count
+               */
+              const fireCountAtTimeOfEventSubscription = this._currentFireCount;
+              return this._onFired.event(() => {
+                  /**
+                   * if the current fire count is greater than the fire count at event subscription
+                   * then the event has been fired since we subscribed and it's ok to "on_next" the event.
+                   *
+                   * if the count is not greater then what we are recieving is an event from the microtask
+                   * queue that was triggered before we actually subscribed and therfore we should ignore it.
+                   */
+                  if (this._currentFireCount > fireCountAtTimeOfEventSubscription) {
+                      e();
+                  }
+              });
+          };
       }
       fire() {
-          if (this.timer) {
-              clearTimeout(this.timer);
+          this._currentFireCount++;
+          if (this._queued) {
+              return;
           }
-          this.timer = setTimeout(() => {
+          this._queued = true;
+          queueMicrotask(() => {
+              this._queued = false;
               this._onFired.fire();
-              clearTimeout(this.timer);
           });
       }
       dispose() {
@@ -2579,15 +2610,14 @@ define(['exports'], (function (exports) { 'use strict';
           super(document.createElement('div'), options.disableAutoResizing);
           this._id = nextLayoutId$1.next();
           this._groups = new Map();
-          this._onDidLayoutChange = new Emitter();
-          this.onDidLayoutChange = this._onDidLayoutChange.event;
           this._onDidRemove = new Emitter();
           this.onDidRemove = this._onDidRemove.event;
           this._onDidAdd = new Emitter();
           this.onDidAdd = this._onDidAdd.event;
           this._onDidActiveChange = new Emitter();
           this.onDidActiveChange = this._onDidActiveChange.event;
-          this._bufferOnDidLayoutChange = new TickDelayedEvent();
+          this._bufferOnDidLayoutChange = new AsapEvent();
+          this.onDidLayoutChange = this._bufferOnDidLayoutChange.onEvent;
           this.element.style.height = '100%';
           this.element.style.width = '100%';
           options.parentElement.appendChild(this.element);
@@ -2602,13 +2632,11 @@ define(['exports'], (function (exports) { 'use strict';
               this._bufferOnDidLayoutChange.fire();
           }), exports.DockviewEvent.any(this.onDidAdd, this.onDidRemove, this.onDidActiveChange)(() => {
               this._bufferOnDidLayoutChange.fire();
-          }), this._bufferOnDidLayoutChange.onEvent(() => {
-              this._onDidLayoutChange.fire();
           }), this._bufferOnDidLayoutChange);
       }
       setVisible(panel, visible) {
           this.gridview.setViewVisible(getGridLocation(panel.element), visible);
-          this._onDidLayoutChange.fire();
+          this._bufferOnDidLayoutChange.fire();
       }
       isVisible(panel) {
           return this.gridview.isViewVisible(getGridLocation(panel.element));
@@ -2714,7 +2742,6 @@ define(['exports'], (function (exports) { 'use strict';
           this._onDidActiveChange.dispose();
           this._onDidAdd.dispose();
           this._onDidRemove.dispose();
-          this._onDidLayoutChange.dispose();
           for (const group of this.groups) {
               group.dispose();
           }
@@ -5743,8 +5770,7 @@ define(['exports'], (function (exports) { 'use strict';
       }
   }
 
-  // TODO find a better way to initialize and avoid needing null checks
-  const NOT_INITIALIZED_MESSAGE = 'DockviewGroupPanelApiImpl not initialized';
+  const NOT_INITIALIZED_MESSAGE = 'dockview: DockviewGroupPanelApiImpl not initialized';
   class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
       get location() {
           if (!this._group) {
@@ -5817,14 +5843,14 @@ define(['exports'], (function (exports) { 'use strict';
           }
       }
       initialize(group) {
-          this._group = group;
           /**
-           * TODO: Annoying initialization order caveat
+           * TODO: Annoying initialization order caveat, find a better way to initialize and avoid needing null checks
            *
            * Due to the order on initialization we know that the model isn't defined until later in the same stack-frame of setup.
            * By queuing a microtask we can ensure the setup is completed within the same stack-frame, but after everything else has
            * finished ensuring the `model` is defined.
            */
+          this._group = group;
           queueMicrotask(() => {
               this._mutableDisposable.value =
                   this._group.model.onDidActivePanelChange((event) => {
@@ -5978,12 +6004,10 @@ define(['exports'], (function (exports) { 'use strict';
           var _a;
           let _trackGroupActive = (_a = previousGroup === null || previousGroup === void 0 ? void 0 : previousGroup.isActive) !== null && _a !== void 0 ? _a : false; // prevent duplicate events with same state
           this.groupEventsDisposable.value = new CompositeDisposable(this.group.api.onDidVisibilityChange((event) => {
-              if (!event.isVisible && this.isVisible) {
-                  this._onDidVisibilityChange.fire(event);
-              }
-              else if (event.isVisible &&
-                  !this.isVisible &&
-                  this.group.model.isPanelActive(this.panel)) {
+              const hasBecomeHidden = !event.isVisible && this.isVisible;
+              const hasBecomeVisible = event.isVisible && !this.isVisible;
+              const isActivePanel = this.group.model.isPanelActive(this.panel);
+              if (hasBecomeHidden || (hasBecomeVisible && isActivePanel)) {
                   this._onDidVisibilityChange.fire(event);
               }
           }), this.group.api.onDidLocationChange((event) => {
@@ -6069,12 +6093,6 @@ define(['exports'], (function (exports) { 'use strict';
           const didTitleChange = title !== this.title;
           if (didTitleChange) {
               this._title = title;
-              this.view.update({
-                  params: {
-                      params: this._params,
-                      title: this.title,
-                  },
-              });
               this.api._onDidTitleChange.fire({ title });
           }
       }
@@ -6102,10 +6120,7 @@ define(['exports'], (function (exports) { 'use strict';
           }
           // update the view with the updated props
           this.view.update({
-              params: {
-                  params: this._params,
-                  title: this.title,
-              },
+              params: this._params,
           });
       }
       updateParentGroup(group, options) {
@@ -7243,7 +7258,7 @@ define(['exports'], (function (exports) { 'use strict';
               return element.getBoundingClientRect();
           }
           const box = getBox();
-          const groupId = (_b = (_a = options === null || options === void 0 ? void 0 : options.overridePopoutGroup) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : this.getNextGroupId(); //item.id;
+          const groupId = (_b = (_a = options === null || options === void 0 ? void 0 : options.overridePopoutGroup) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : this.getNextGroupId();
           if (itemToPopout.api.location.type === 'grid') {
               itemToPopout.api.setVisible(false);
           }
@@ -7359,24 +7374,22 @@ define(['exports'], (function (exports) { 'use strict';
                           });
                       }
                   }
-                  else {
-                      if (this.getPanel(group.id)) {
-                          const removedGroup = this.doRemoveGroup(group, {
-                              skipDispose: true,
-                              skipActive: true,
-                          });
-                          removedGroup.model.renderContainer =
-                              this.overlayRenderContainer;
-                          removedGroup.model.location = { type: 'grid' };
-                          returnedGroup = removedGroup;
-                      }
+                  else if (this.getPanel(group.id)) {
+                      const removedGroup = this.doRemoveGroup(group, {
+                          skipDispose: true,
+                          skipActive: true,
+                      });
+                      removedGroup.model.renderContainer =
+                          this.overlayRenderContainer;
+                      removedGroup.model.location = { type: 'grid' };
+                      returnedGroup = removedGroup;
                   }
               }));
               this._popoutGroups.push(value);
               this.updateWatermark();
           })
               .catch((err) => {
-              console.error(err);
+              console.error('dockview: failed to create popout window', err);
           });
       }
       addFloatingGroup(item, coord, options) {
@@ -7419,7 +7432,7 @@ define(['exports'], (function (exports) { 'use strict';
                       this.doRemoveGroup(item, {
                           skipDispose: true,
                           skipPopoutReturn: true,
-                          skipPopoutAssociated: !!popoutReferenceGroup,
+                          skipPopoutAssociated: false,
                       });
                   }
               }
@@ -7779,7 +7792,6 @@ define(['exports'], (function (exports) { 'use strict';
       clear() {
           const groups = Array.from(this._groups.values()).map((_) => _.value);
           const hasActiveGroup = !!this.activeGroup;
-          !!this.activePanel;
           for (const group of groups) {
               // remove the group will automatically remove the panels
               this.removeGroup(group, { skipActive: true });
@@ -7963,7 +7975,6 @@ define(['exports'], (function (exports) { 'use strict';
       }
       addGroup(options) {
           var _a;
-          const group = this.createGroup(options);
           if (options) {
               let referenceGroup;
               if (isGroupOptionsWithPanel(options)) {
@@ -7997,6 +8008,7 @@ define(['exports'], (function (exports) { 'use strict';
               const target = toTarget(options.direction || 'within');
               const location = getGridLocation(referenceGroup.element);
               const relativeLocation = getRelativeLocation(this.gridview.orientation, location, target);
+              const group = this.createGroup(options);
               this.doAddGroup(group, relativeLocation);
               if (!options.skipSetActive) {
                   this.doSetGroupAndPanelActive(group);
@@ -8004,6 +8016,7 @@ define(['exports'], (function (exports) { 'use strict';
               return group;
           }
           else {
+              const group = this.createGroup(options);
               this.doAddGroup(group);
               this.doSetGroupAndPanelActive(group);
               return group;
@@ -8284,7 +8297,7 @@ define(['exports'], (function (exports) { 'use strict';
           }
           let id = options === null || options === void 0 ? void 0 : options.id;
           if (id && this._groups.has(options.id)) {
-              console.warn(`Duplicate group id ${options === null || options === void 0 ? void 0 : options.id}. reassigning group id to avoid errors`);
+              console.warn(`dockview: Duplicate group id ${options === null || options === void 0 ? void 0 : options.id}. reassigning group id to avoid errors`);
               id = undefined;
           }
           if (!id) {