added remote update for wss plug. Fixed various bugs.

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() {

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 {

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",

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>,

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;
  }

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

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;
  },
  };