dockview-core 1.13.0 → 1.14.0

package/dist/esm/api/dockviewGroupPanelApi.js

@@ -2,8 +2,7 @@ import { positionToDirection } from '../dnd/droptarget';
 import { Emitter } from '../events';
 import { MutableDisposable } from '../lifecycle';
 import { GridviewPanelApiImpl } from './gridviewPanelApi';
-// 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';
 export class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
     get location() {
         if (!this._group) {
@@ -76,14 +75,14 @@ export class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
         }
     }
     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) => {

package/dist/esm/api/dockviewPanelApi.js

@@ -88,12 +88,10 @@ export class DockviewPanelApiImpl extends GridviewPanelApiImpl {
         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) => {

package/dist/esm/dockview/components/titlebar/tabsContainer.js

@@ -3,7 +3,7 @@ import { addDisposableListener, Emitter } from '../../../events';
 import { Tab } from '../tab/tab';
 import { VoidContainer } from './voidContainer';
 import { toggleClass } from '../../../dom';
-import { WillShowOverlayLocationEvent, } from '../../dockviewGroupPanelModel';
+import { WillShowOverlayLocationEvent } from '../../dockviewGroupPanelModel';
 import { getPanelData } from '../../../dnd/dataTransfer';
 export class TabsContainer extends CompositeDisposable {
     get panels() {

package/dist/esm/dockview/dockviewComponent.js

@@ -328,7 +328,7 @@ export class DockviewComponent extends BaseGrid {
             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);
         }
@@ -444,24 +444,22 @@ export class DockviewComponent extends BaseGrid {
                         });
                     }
                 }
-                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) {
@@ -504,7 +502,7 @@ export class DockviewComponent extends BaseGrid {
                     this.doRemoveGroup(item, {
                         skipDispose: true,
                         skipPopoutReturn: true,
-                        skipPopoutAssociated: !!popoutReferenceGroup,
+                        skipPopoutAssociated: false,
                     });
                 }
             }
@@ -866,7 +864,6 @@ export class DockviewComponent extends BaseGrid {
     clear() {
         const groups = Array.from(this._groups.values()).map((_) => _.value);
         const hasActiveGroup = !!this.activeGroup;
-        const hasActivePanel = !!this.activePanel;
         for (const group of groups) {
             // remove the group will automatically remove the panels
             this.removeGroup(group, { skipActive: true });
@@ -1050,7 +1047,6 @@ export class DockviewComponent extends BaseGrid {
     }
     addGroup(options) {
         var _a;
-        const group = this.createGroup(options);
         if (options) {
             let referenceGroup;
             if (isGroupOptionsWithPanel(options)) {
@@ -1084,6 +1080,7 @@ export class DockviewComponent extends BaseGrid {
             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);
@@ -1091,6 +1088,7 @@ export class DockviewComponent extends BaseGrid {
             return group;
         }
         else {
+            const group = this.createGroup(options);
             this.doAddGroup(group);
             this.doSetGroupAndPanelActive(group);
             return group;
@@ -1371,7 +1369,7 @@ export class DockviewComponent extends BaseGrid {
         }
         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) {

package/dist/esm/dockview/dockviewPanel.js

@@ -65,12 +65,6 @@ export class DockviewPanel extends CompositeDisposable {
         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 });
         }
     }
@@ -98,10 +92,7 @@ export class DockviewPanel extends CompositeDisposable {
         }
         // update the view with the updated props
         this.view.update({
-            params: {
-                params: this._params,
-                title: this.title,
-            },
+            params: this._params,
         });
     }
     updateParentGroup(group, options) {

package/dist/esm/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/esm/events.js

@@ -50,7 +50,7 @@ class Stacktrace {
         this.value = value;
     }
     print() {
-        console.warn(this.value);
+        console.warn('dockview: stacktrace', this.value);
     }
 }
 class Listener {
@@ -92,7 +92,7 @@ export class Emitter {
                         }
                         else if (Emitter.ENABLE_TRACKING) {
                             // console.warn(
-                            //     `Listener already disposed`,
+                            //     `dockview: listener already disposed`,
                             //     Stacktrace.create().print()
                             // );
                         }
@@ -120,7 +120,7 @@ export class Emitter {
                         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());
                         }
                     });
                 }
@@ -150,18 +150,49 @@ export function addDisposableListener(element, type, listener, options) {
         },
     };
 }
-export 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
+ */
+export 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() {

package/dist/esm/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/esm/gridview/baseComponentGridview.js

@@ -1,4 +1,4 @@
-import { Emitter, Event, TickDelayedEvent } from '../events';
+import { Emitter, Event, AsapEvent } from '../events';
 import { getGridLocation, Gridview } from './gridview';
 import { Disposable } from '../lifecycle';
 import { sequentialNumberGenerator } from '../math';
@@ -61,15 +61,14 @@ export class BaseGrid extends Resizable {
         super(document.createElement('div'), options.disableAutoResizing);
         this._id = nextLayoutId.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);
@@ -84,13 +83,11 @@ export class BaseGrid extends Resizable {
             this._bufferOnDidLayoutChange.fire();
         }), Event.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));
@@ -196,7 +193,6 @@ export class BaseGrid extends Resizable {
         this._onDidActiveChange.dispose();
         this._onDidAdd.dispose();
         this._onDidRemove.dispose();
-        this._onDidLayoutChange.dispose();
         for (const group of this.groups) {
             group.dispose();
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dockview-core",
-  "version": "1.13.0",
+  "version": "1.14.0",
   "description": "Zero dependency layout manager supporting tabs, grids and splitviews",
   "keywords": [
     "splitview",