Merge pull request #600 from mathuo/597-ondidlayoutchange-callback-catches-panels-init

597 ondidlayoutchange callback catches panels init

packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts

@@ -5332,6 +5332,60 @@ describe('dockviewComponent', () => {
         });
     });
 
+    test('that `onDidLayoutChange` only subscribes to events after initial subscription time', () => {
+        jest.useFakeTimers();
+
+        const container = document.createElement('div');
+
+        const dockview = new DockviewComponent({
+            parentElement: container,
+            createComponent(options) {
+                switch (options.name) {
+                    case 'default':
+                        return new PanelContentPartTest(
+                            options.id,
+                            options.name
+                        );
+                    default:
+                        throw new Error(`unsupported`);
+                }
+            },
+        });
+        const api = new DockviewApi(dockview);
+
+        dockview.layout(1000, 1000);
+
+        let a = 0;
+
+        api.onDidLayoutChange((e) => {
+            a++;
+        });
+
+        api.addPanel({
+            id: 'panel_1',
+            component: 'default',
+        });
+        api.addPanel({
+            id: 'panel_2',
+            component: 'default',
+        });
+        api.addPanel({
+            id: 'panel_3',
+            component: 'default',
+        });
+
+        let b = 0;
+
+        api.onDidLayoutChange((e) => {
+            b++;
+        });
+
+        jest.runAllTicks();
+
+        expect(a).toBe(1);
+        expect(b).toBe(0);
+    });
+
     test('addGroup with absolute position', () => {
         const container = document.createElement('div');
 
@@ -5370,7 +5424,7 @@ describe('dockviewComponent', () => {
         expect(api.panels.length).toBe(3);
         expect(api.groups.length).toBe(2);
 
-        api.addGroup({direction:'left'});
+        api.addGroup({ direction: 'left' });
 
         expect(api.panels.length).toBe(3);
         expect(api.groups.length).toBe(3);

packages/dockview-core/src/__tests__/events.spec.ts

@@ -1,4 +1,5 @@
 import {
+    AsapEvent,
     Emitter,
     Event,
     addDisposableListener,
@@ -82,6 +83,41 @@ describe('events', () => {
         });
     });
 
+    describe('asapEvent', () => {
+        test('that asapEvents fire once per event-loop-cycle', () => {
+            jest.useFakeTimers();
+
+            const event = new AsapEvent();
+
+            let preFireCount = 0;
+            let postFireCount = 0;
+
+            event.onEvent(() => {
+                preFireCount++;
+            });
+
+            for (let i = 0; i < 100; i++) {
+                event.fire();
+            }
+
+            /**
+             * check that subscribing after the events have fired but before the event-loop cycle completes
+             * results in no event fires.
+             */
+            event.onEvent((e) => {
+                postFireCount++;
+            });
+
+            expect(preFireCount).toBe(0);
+            expect(postFireCount).toBe(0);
+
+            jest.runAllTimers();
+
+            expect(preFireCount).toBe(1);
+            expect(postFireCount).toBe(0);
+        });
+    });
+
     it('should emit a value when any event fires', () => {
         const emitter1 = new Emitter<number>();
         const emitter2 = new Emitter<number>();

packages/dockview-core/src/events.ts

@@ -203,19 +203,53 @@ export function addDisposableListener<K extends keyof HTMLElementEventMap>(
     };
 }
 
-export class TickDelayedEvent implements IDisposable {
-    private timer: any;
-
+/**
+ *
+ * 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 implements IDisposable {
     private readonly _onFired = new Emitter<void>();
-    readonly onEvent = this._onFired.event;
+    private _currentFireCount = 0;
+    private _queued = false;
+
+    readonly onEvent: Event<void> = (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(): void {
-        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);
         });
     }
 

packages/dockview-core/src/gridview/baseComponentGridview.ts

@@ -1,4 +1,4 @@
-import { Emitter, Event, TickDelayedEvent } from '../events';
+import { Emitter, Event, AsapEvent } from '../events';
 import { getGridLocation, Gridview, IGridView } from './gridview';
 import { Position } from '../dnd/droptarget';
 import { Disposable, IValueDisposable } from '../lifecycle';
@@ -76,11 +76,8 @@ export abstract class BaseGrid<T extends IGridPanelView>
     private readonly _id = nextLayoutId.next();
     protected readonly _groups = new Map<string, IValueDisposable<T>>();
     protected readonly gridview: Gridview;
-    //
-    protected _activeGroup: T | undefined;
 
-    private _onDidLayoutChange = new Emitter<void>();
-    readonly onDidLayoutChange = this._onDidLayoutChange.event;
+    protected _activeGroup: T | undefined;
 
     private readonly _onDidRemove = new Emitter<T>();
     readonly onDidRemove: Event<T> = this._onDidRemove.event;
@@ -92,7 +89,9 @@ export abstract class BaseGrid<T extends IGridPanelView>
     readonly onDidActiveChange: Event<T | undefined> =
         this._onDidActiveChange.event;
 
-    protected readonly _bufferOnDidLayoutChange = new TickDelayedEvent();
+    protected readonly _bufferOnDidLayoutChange = new AsapEvent();
+    readonly onDidLayoutChange: Event<void> =
+        this._bufferOnDidLayoutChange.onEvent;
 
     get id(): string {
         return this._id;
@@ -172,9 +171,6 @@ export abstract class BaseGrid<T extends IGridPanelView>
             )(() => {
                 this._bufferOnDidLayoutChange.fire();
             }),
-            this._bufferOnDidLayoutChange.onEvent(() => {
-                this._onDidLayoutChange.fire();
-            }),
             this._bufferOnDidLayoutChange
         );
     }
@@ -187,7 +183,7 @@ export abstract class BaseGrid<T extends IGridPanelView>
 
     public setVisible(panel: T, visible: boolean): void {
         this.gridview.setViewVisible(getGridLocation(panel.element), visible);
-        this._onDidLayoutChange.fire();
+        this._bufferOnDidLayoutChange.fire();
     }
 
     public isVisible(panel: T): boolean {
@@ -330,7 +326,6 @@ export abstract class BaseGrid<T extends IGridPanelView>
         this._onDidActiveChange.dispose();
         this._onDidAdd.dispose();
         this._onDidRemove.dispose();
-        this._onDidLayoutChange.dispose();
 
         for (const group of this.groups) {
             group.dispose();