From c0733356391d1d6176cdd6ff2b9b09ac6697ff3a Mon Sep 17 00:00:00 2001
From: Tony Germaneri <Tony.Germaneri@gmail.com>
Date: Sat, 27 Jan 2024 23:47:06 -0800
Subject: [PATCH] added remote update for wss plug.  Fixed various bugs.

---
 packages/CodeEditor/Editor.vue                |  4 +--
 packages/Graph/GraphCanvas.vue                |  4 ++-
 packages/Graph/mutation.ts                    | 23 +++++++++---
 packages/Graph/state.ts                       |  1 +
 packages/Input/store.ts                       |  6 ++++
 .../NodeEdgeConnector/NodeEdgeConnector.vue   |  2 +-
 packages/WssDocumentProvider/main.ts          | 36 +++++++++++++++++--
 7 files changed, 65 insertions(+), 11 deletions(-)

diff --git a/packages/CodeEditor/Editor.vue b/packages/CodeEditor/Editor.vue
index 8496f4a..a218ae5 100644
--- a/packages/CodeEditor/Editor.vue
+++ b/packages/CodeEditor/Editor.vue
@@ -127,7 +127,7 @@ export default {
       cursorLocation: null,
       updatingValue: false,
       editorHasFocus: false,
-      autosave: true,
+      autosave: false,
       messageIds: [],
       externalErrors: [],
       loaded: false,
@@ -449,7 +449,7 @@ export default {
         clearTimeout(this.saveDebounceTimer);
         this.saveDebounceTimer = setTimeout(() => {
           this.save();
-        }, 500);
+        }, 4000);
       }
     },
     revert() {
diff --git a/packages/Graph/GraphCanvas.vue b/packages/Graph/GraphCanvas.vue
index d607da8..ba96e0a 100644
--- a/packages/Graph/GraphCanvas.vue
+++ b/packages/Graph/GraphCanvas.vue
@@ -175,7 +175,9 @@ export default {
     graphCanvasStyle: function () {
         if (this.presentation) {
             return {
-                display: "flex"
+                overflow: "auto",
+                height: "100vh",
+                width: "100vw",
             };
         }
         return {
diff --git a/packages/Graph/mutation.ts b/packages/Graph/mutation.ts
index c3a09ce..588e753 100644
--- a/packages/Graph/mutation.ts
+++ b/packages/Graph/mutation.ts
@@ -428,9 +428,11 @@ export default {
         });
         this.historyPosition += 1;
         // make a copy of the change in the snapshot store for data providers
-        this.graphSnapshotStore.$patch({
-            graph: deref(this.graph),
+        this.updatingSnapshotLocally = true;
+        this.graphSnapshotStore.$patch((state: any) => {
+            state.graph = deref(this.graph);
         });
+        this.updatingSnapshotLocally = false;
     },
     async loadAllScripts(graphSnapshot: any) {
       // Extracting the root-level scripts
@@ -476,6 +478,18 @@ export default {
       await this.loadAllScripts(this.graphSnapshot);
       // don't allow an opening graph to count as a history change
       this.graph = deref(this.graphSnapshot);
+      this.graphSnapshotStore.$subscribe((mutation: any, state: any) => {
+        if (this.updatingSnapshotLocally) {
+          return;
+        }
+        const changes = diff(this.graph, state.graph);
+        if (changes) {
+            changes.forEach((change: any) => {
+                applyChange(this.graphSnapshot, true, change);
+            });
+            this.graph = deref(this.graphSnapshot);
+        }
+      });
       console.groupCollapsed('%cPlastic-IO: %cGraph',
         "color: blue",
         "color: lightblue");
@@ -641,19 +655,20 @@ export default {
       pos.x = Math.floor(pos.x / 10) * 10;
       pos.y = Math.floor(pos.y / 10) * 10;
       const id = newId();
+      const name = getName();
       const node = {
           id,
           edges: [],
           version: this.graphSnapshot!.version,
           graphId: this.graphSnapshot!.id,
           artifact: null,
-          url: getName().replace(/ /g, ''),
+          url: name.replace(/ /g, ''),
           data: null,
           properties: {
               inputs: [],
               outputs: [],
               groups: [],
-              name: "",
+              name,
               description: "",
               tags: [],
               icon: "mdi-node-rectangle",
diff --git a/packages/Graph/state.ts b/packages/Graph/state.ts
index 17fddd1..2b70062 100644
--- a/packages/Graph/state.ts
+++ b/packages/Graph/state.ts
@@ -33,6 +33,7 @@ export default () => {
         preferencesStore: usePreferencesStore(),
         graphSnapshotStore: useGraphSnapshotStore(),
         graphSnapshot: null as any,
+        updatingSnapshotLocally: false,
         rewindVersion: 0,
         keys: {} as Record<string, string>,
         artifacts: {} as Record<string, any>,
diff --git a/packages/Input/store.ts b/packages/Input/store.ts
index 2c25691..50c7b4b 100644
--- a/packages/Input/store.ts
+++ b/packages/Input/store.ts
@@ -40,6 +40,9 @@ export const useStore = defineStore('input', {
         this.mouseAction.mouse(mouse);
     },
     onwheel(e: WheelEvent) {
+        if (this.graphStore.presentation) {
+            return;
+        }
         if (!this.graphStore.isGraphTarget(e)) {
             return;
         }
@@ -52,6 +55,9 @@ export const useStore = defineStore('input', {
         e.preventDefault();
     },
     mousemove(e: MouseEvent) {
+        if (this.graphStore.presentation) {
+            return;
+        }
         if (this.orchistratorStore.showHelp || this.graphStore.inRewindMode) {
             return;
         }
diff --git a/packages/NodeEdgeConnector/NodeEdgeConnector.vue b/packages/NodeEdgeConnector/NodeEdgeConnector.vue
index f6532f9..caa47a4 100644
--- a/packages/NodeEdgeConnector/NodeEdgeConnector.vue
+++ b/packages/NodeEdgeConnector/NodeEdgeConnector.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div v-if="!presentation">
         <div :class="{'connector-info-value': true, 'connector-info-value-expanded': expand}"
             v-if="preferences.showConnectorActivity && activityValue"
             @mousemove.stop
diff --git a/packages/WssDocumentProvider/main.ts b/packages/WssDocumentProvider/main.ts
index 44edf46..2b594b5 100644
--- a/packages/WssDocumentProvider/main.ts
+++ b/packages/WssDocumentProvider/main.ts
@@ -13,7 +13,9 @@ export default class WssDocumentProvider extends EditorModule {
   constructor(config: Record<string, any>, app: App<Element>, hostRouter: Router) {
     super();
     const providerState = {
-      graph: {} as any,
+      graph: null as any,
+      localUpdate: false,
+      sentEventIds: [],
     };
     const orchistratorStore = useOrchistratorStore();
     const graphSnapshotStore = useGraphSnapshotStore();
@@ -30,7 +32,34 @@ export default class WssDocumentProvider extends EditorModule {
       () => {},
     );
     graphStore.$subscribe((mutation: any, state: any) => {
-        if (!state.graph) {
+        if (!state.graph || providerState.localUpdate) {
+            return;
+        }
+        if (!providerState.graph) {
+            // inital load
+            providerState.graph = JSON.parse(JSON.stringify(state.graph));
+            // messages from server
+            orchistratorStore.dataProviders.graph.subscribe('graph-event-' + providerState.graph.id, async (e: any) => {
+                // apply remote event
+                graphSnapshotStore.$patch((state) => {
+                    providerState.localUpdate = true;
+                    e.forEach((event) => {
+                        if (providerState.sentEventIds.includes(event.id)) {
+                            return;
+                        }
+                        // apply changes to the graphStore
+                        event.changes.forEach((change: any) => {
+                            applyChange(state.graph, true, change);
+                        });
+                        // clone graph store to keep provider state up to date
+                        providerState.graph = JSON.parse(JSON.stringify(state.graph));
+                        providerState.localUpdate = false;
+                    });
+                });
+            });
+            return;
+        }
+        if (mutation.type !== 'patch function') {
             return;
         }
         const changes = diff(providerState.graph || {}, JSON.parse(JSON.stringify(state.graph)));
@@ -42,9 +71,11 @@ export default class WssDocumentProvider extends EditorModule {
               description: '',
               graphId: state.graph!.id,
           };
+          providerState.sentEventIds.push(ev.id);
           wssDataProvider.set(state.graph!.url, ev as any);
         }
     }, { detached: true });
+
     (orchistratorStore.dataProviders.graph as any) = wssDataProvider;
     let writeDebounceTimer: any;
     (orchistratorStore.dataProviders as any).publish = wssDataProvider;
@@ -54,7 +85,6 @@ export default class WssDocumentProvider extends EditorModule {
         return await wssDataProvider.getToc();
       },
       updateToc(key: string, value: any) {
-        console.log('updateToc');
         orchistratorStore.toc[key] = value;
       },
     };