feat: Add "LayoutChanged" event to DockPanel

packages/phosphor/src/DockPanel.ts

@@ -1,4 +1,4 @@
-import { HTMLWidget, Widget } from "@hpcc-js/common";
+import { HTMLWidget, Widget, Utility } from "@hpcc-js/common";
 import { DockPanel as PhosphorDockPanel, IMessageHandler, IMessageHook, Message, MessageLoop, Widget as PWidget } from "@hpcc-js/phosphor-shim";
 import { select as d3Select } from "d3-selection";
 import { PDockPanel } from "./PDockPanel";
@@ -145,25 +145,36 @@ export class DockPanel extends HTMLWidget implements IMessageHandler, IMessageHo
         return true;
     }
 
+    private _lazyLayoutChanged = Utility.debounce(async () => {
+        this.layoutChanged();
+    }, 1000);
+
     _prevActive: Widget;
     processMessage(msg: Message): void {
         switch (msg.type) {
-            case "wa-activate-request":
+            case Msg.WAActivateRequest.type:
                 const wa = (msg as Msg.WAActivateRequest).wa;
                 const widget = wa.widget;
                 if (this._prevActive !== widget) {
                     this._prevActive = widget;
                     this.childActivation(widget, wa);
                 }
                 break;
+            case Msg.WALayoutChanged.type:
+                this._lazyLayoutChanged();
+                break;
         }
     }
 
+    active(): Widget {
+        return this._prevActive;
+    }
+
+    //  Events  ---
     childActivation(w: Widget, wa: WidgetAdapter) {
     }
 
-    active(): Widget {
-        return this._prevActive;
+    layoutChanged() {
     }
 }
 DockPanel.prototype._class += " phosphor_DockPanel";

packages/phosphor/src/WidgetAdapter.ts

@@ -6,22 +6,42 @@ import { select as d3Select } from "d3-selection";
 import "../src/WidgetAdapter.css";
 
 export namespace Msg {
-    export class WAActivateRequest extends ConflatableMessage {
+
+    export class WAConflatableMessage extends ConflatableMessage {
         private _wa: WidgetAdapter;
 
-        constructor(wa: WidgetAdapter) {
-            super("wa-activate-request");
+        constructor(wa: WidgetAdapter, msg: string) {
+            super(msg);
             this._wa = wa;
         }
+
         get wa(): WidgetAdapter {
             return this._wa;
         }
 
-        conflate(other: WAActivateRequest): boolean {
+        conflate(other: WAConflatableMessage): boolean {
             this._wa = other.wa;
             return true;
         }
     }
+
+    export class WAActivateRequest extends WAConflatableMessage {
+
+        static type = "wa-activate-request";
+
+        constructor(wa: WidgetAdapter) {
+            super(wa, WAActivateRequest.type);
+        }
+    }
+
+    export class WALayoutChanged extends WAConflatableMessage {
+
+        static type = "wa-layout-changed";
+
+        constructor(wa: WidgetAdapter) {
+            super(wa, WALayoutChanged.type);
+        }
+    }
 }
 
 export interface IClosable {
@@ -93,6 +113,9 @@ export class WidgetAdapter extends PWidget {
                 .resize({ width: this._width - this.padding * 2 - 2, height: this._height - this.padding * 2 - 2 })
                 .lazyRender()
                 ;
+            if (this._owner) {
+                MessageLoop.postMessage(this._owner, new Msg.WALayoutChanged(this));
+            }
         }
     }