Add perspective-plugin-update event for d3fc

examples/workspace/src/index.js

@@ -22,24 +22,33 @@ const datasource = async () => {
     return worker.table(buffer);
 };
 
+const DEFAULT_LAYOUT = {
+    master: {
+        widgets: ["Four", "Three"]
+    },
+    detail: {
+        main: {
+            currentIndex: 0,
+            type: "tab-area",
+            widgets: ["One", "Two"]
+        }
+    },
+    viewers: {
+        One: {table: "superstore", editable: true},
+        Three: {table: "superstore", name: "Test Widget III (modified)", "row-pivots": ["State"], columns: ["Sales", "Profit"]},
+        Four: {table: "superstore", name: "Test Widget IV (modified)", "row-pivots": ["Category", "Sub-Category"], columns: ["Sales", "Profit"]}
+    }
+};
+
 window.addEventListener("load", () => {
     window.workspace.tables.set("superstore", datasource());
 
-    window.workspace.restore({
-        master: {
-            widgets: ["Four", "Three"]
-        },
-        detail: {
-            main: {
-                currentIndex: 0,
-                type: "tab-area",
-                widgets: ["One", "Two"]
-            }
-        },
-        viewers: {
-            One: {table: "superstore", editable: true},
-            Three: {table: "superstore", name: "Test Widget III (modified)", "row-pivots": ["State"], columns: ["Sales", "Profit"]},
-            Four: {table: "superstore", name: "Test Widget IV (modified)", "row-pivots": ["Category", "Sub-Category"], columns: ["Sales", "Profit"]}
-        }
+    const savedLayout = localStorage.getItem("layout");
+
+    window.workspace.restore(savedLayout ? JSON.parse(savedLayout) : DEFAULT_LAYOUT);
+    // window.workspace.restore(DEFAULT_LAYOUT);
+
+    window.workspace.addEventListener("workspace-layout-update", () => {
+        localStorage.setItem("layout", JSON.stringify(window.workspace.save()));
     });
 });

packages/perspective-viewer-d3fc/src/js/plugin/template.js

@@ -16,6 +16,7 @@ import {initialiseStyles} from "../series/colorStyles";
 import {bindTemplate} from "@finos/perspective-viewer/dist/esm/utils";
 
 const styleWithD3FC = `${style}${getD3FCStyles()}`;
+const EXCLUDED_SETTINGS = ["crossValues", "mainValues", "splitValues", "filter", "data", "size", "colorStyles"];
 
 @bindTemplate(template, styleWithD3FC) // eslint-disable-next-line no-unused-vars
 class D3FCChartElement extends HTMLElement {
@@ -31,7 +32,18 @@ class D3FCChartElement extends HTMLElement {
 
     render(chart, settings) {
         this._chart = chart;
-        this._settings = this._configureSettings(this._settings, settings);
+
+        const handler = {
+            set: (obj, prop, value) => {
+                if (!EXCLUDED_SETTINGS.includes(prop)) {
+                    this._container && this._container.dispatchEvent(new Event("perspective-plugin-update", {bubbles: true, composed: true}));
+                }
+                obj[prop] = value;
+                return true;
+            }
+        };
+
+        this._settings = new Proxy(this._configureSettings(this._settings, settings), handler);
         initialiseStyles(this._container, this._settings);
 
         if ((this._settings.data && this._settings.data.length > 0) || chart.plugin.type !== this._chart.plugin.type) {
@@ -77,9 +89,8 @@ class D3FCChartElement extends HTMLElement {
     }
 
     getSettings() {
-        const excludeSettings = ["crossValues", "mainValues", "splitValues", "filter", "data", "size", "colorStyles"];
         const settings = {...this._settings};
-        excludeSettings.forEach(s => {
+        EXCLUDED_SETTINGS.forEach(s => {
             delete settings[s];
         });
         return settings;

packages/perspective-workspace/src/js/workspace/tabbar.js

@@ -149,6 +149,9 @@ export class PerspectiveTabBar extends TabBar {
     }
 
     _addEventListeners() {
+        this.tabActivateRequested.connect(() => {
+            this.currentTitle.owner.notifyResize();
+        });
         this.node.addEventListener("dblclick", this);
         this.node.addEventListener("contextmenu", this);
     }

packages/perspective-workspace/src/js/workspace/workspace.js

@@ -724,12 +724,14 @@ export class PerspectiveWorkspace extends DiscreteSplitPanel {
         widget.node.addEventListener("contextmenu", contextMenu);
         widget.viewer.addEventListener("perspective-toggle-settings", settings);
         widget.viewer.addEventListener("perspective-config-update", updated);
+        widget.viewer.addEventListener("perspective-plugin-update", this.workspaceUpdated);
         widget.title.changed.connect(updated);
 
         this.listeners.set(widget, () => {
             widget.node.removeEventListener("contextmenu", contextMenu);
             widget.viewer.removeEventListener("perspective-toggle-settings", settings);
             widget.viewer.removeEventListener("perspective-config-update", updated);
+            widget.viewer.removeEventListener("perspective-plugin-update", this.workspaceUpdated);
             widget.title.changed.disconnect(updated);
         });
     }
@@ -755,10 +757,10 @@ export class PerspectiveWorkspace extends DiscreteSplitPanel {
         }
     }
 
-    workspaceUpdated() {
+    workspaceUpdated = () => {
         if (!this._save) {
             this._save = debounce(() => this.dockpanel.mode !== "single-document" && this._fireUpdateEvent(), 500);
         }
         this._save();
-    }
+    };
 }