dockview 1.13.0 → 1.14.0

package/dist/dockview.amd.noStyle.js

@@ -1,6 +1,6 @@
 /**
  * dockview
- * @version 1.13.0
+ * @version 1.14.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -125,7 +125,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this.value = value;
         }
         print() {
-            console.warn(this.value);
+            console.warn('dockview: stacktrace', this.value);
         }
     }
     class Listener {
@@ -190,7 +190,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                             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());
                             }
                         });
                     }
@@ -220,18 +220,49 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             },
         };
     }
-    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() {
@@ -2549,15 +2580,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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);
@@ -2572,13 +2602,11 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 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));
@@ -2684,7 +2712,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             this._onDidActiveChange.dispose();
             this._onDidAdd.dispose();
             this._onDidRemove.dispose();
-            this._onDidLayoutChange.dispose();
             for (const group of this.groups) {
                 group.dispose();
             }
@@ -5713,8 +5740,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
     }
 
-    // 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) {
@@ -5787,14 +5813,14 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
         }
         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) => {
@@ -5948,12 +5974,10 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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) => {
@@ -6039,12 +6063,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             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 });
             }
         }
@@ -6072,10 +6090,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             // update the view with the updated props
             this.view.update({
-                params: {
-                    params: this._params,
-                    title: this.title,
-                },
+                params: this._params,
             });
         }
         updateParentGroup(group, options) {
@@ -7190,7 +7205,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 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);
             }
@@ -7306,24 +7321,22 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                             });
                         }
                     }
-                    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) {
@@ -7366,7 +7379,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                         this.doRemoveGroup(item, {
                             skipDispose: true,
                             skipPopoutReturn: true,
-                            skipPopoutAssociated: !!popoutReferenceGroup,
+                            skipPopoutAssociated: false,
                         });
                     }
                 }
@@ -7726,7 +7739,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         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 });
@@ -7910,7 +7922,6 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         addGroup(options) {
             var _a;
-            const group = this.createGroup(options);
             if (options) {
                 let referenceGroup;
                 if (isGroupOptionsWithPanel(options)) {
@@ -7944,6 +7955,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 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);
@@ -7951,6 +7963,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
                 return group;
             }
             else {
+                const group = this.createGroup(options);
                 this.doAddGroup(group);
                 this.doSetGroupAndPanelActive(group);
                 return group;
@@ -8231,7 +8244,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
             }
             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) {
@@ -9448,7 +9461,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         update(event) {
             var _a;
-            (_a = this.part) === null || _a === void 0 ? void 0 : _a.update(event.params);
+            (_a = this.part) === null || _a === void 0 ? void 0 : _a.update({ params: event.params });
         }
         layout(_width, _height) {
             // noop
@@ -9486,7 +9499,7 @@ define(['exports', 'react', 'react-dom'], (function (exports, React, ReactDOM) {
         }
         update(event) {
             var _a;
-            (_a = this.part) === null || _a === void 0 ? void 0 : _a.update(event.params);
+            (_a = this.part) === null || _a === void 0 ? void 0 : _a.update({ params: event.params });
         }
         layout(_width, _height) {
             // noop - retrieval from api