Destilled node operations to an operation queue

src/views/Dashboard.vue

@@ -2,7 +2,8 @@
   <div class="page-container md-layout-column" id="dashboard-container">
 
     <!-- toolbar -->
-    <toolbar @showDrawerClicked="showDrawer = true" :processing="true" :model-changed="true"/>
+    <toolbar @showDrawerClicked="showDrawer = true" @applyClicked="performApply" :processing="false"
+             :model-changed="modelChanged"/>
 
     <!-- drawer -->
     <md-drawer :md-active.sync="showDrawer" md-swipeable>
@@ -11,7 +12,14 @@
 
     <!-- workspace -->
     <md-content id="diagram-container">
-      <simple-flowchart :scene.sync="diagram"></simple-flowchart>
+      <simple-flowchart
+          :scene.sync="model"
+          @nodeDelete="enqueuePendingNodeDeletion"
+          @nodeDataEdited="enqueuePendingNodeUpdate"
+          @linkBreak="handleLinkBreak"
+          @linkAdded="handleLinkAdd"
+          @nodeMoved="handleNodeMove"
+      />
       <element-adder @addElement="newElement"/>
     </md-content>
 
@@ -24,7 +32,8 @@ import SimpleFlowchart from '@/simple-flowchart';
 import ElementAdder from "@/components/ElementAdder";
 import WorkspaceDrawerContent from "@/components/WorkspaceDrawerContent";
 import Toolbar from "@/components/Toolbar";
-import {maxBy} from 'lodash';
+
+import {some} from 'lodash';
 
 export default {
   name: 'Dashboard',
@@ -36,7 +45,13 @@ export default {
   },
   data: () => ({
     showDrawer: false,
-    diagram: {
+    idGenerator: 1,
+    pendingChanges: {
+      created: [],
+      updated: [],
+      deleted: []
+    },
+    model: {
       centerX: 0,
       centerY: 0,
       scale: 1,
@@ -51,40 +66,95 @@ export default {
       let newNode = {
         x: 10,
         y: 10,
-        type
+        type,
+        apiId: null
       }
 
       switch (type) {
         case "ingest":
           newNode.data = {
-            "url": "https://videon.test.kmlabz.com/live"
+            url: "",
+            streamkey: "demokey"
           }
           break;
         case "encoder":
           newNode.data = {
-            "bitrate": 8000,
-            "width": 600,
-            "height": 800
+            bitrate: 0,
+            width: 0,
+            height: 0
           }
           break;
         case "restreamer":
           newNode.data = {
-            "url": "https://youtube.com/live",
-            "streamkey": "testkey"
+            url: "",
+            streamkey: ""
           }
           break;
       }
 
-      if (this.diagram.nodes.length > 0) {
-        const max_id = maxBy(this.diagram.nodes, 'id').id
+      newNode.id = this.idGenerator;
+      this.idGenerator++;
 
-        newNode.id = max_id + 1;
+      this.model.nodes.push(newNode);
+      //this.pendingChanges.created.add(newNode.id);
+      this.enqueuePendingNodeCreation(newNode.id);
+
+    },
+    // Vuejs can not track changes of a set, so we do this magic hack to fix it
+    enqueuePendingNodeDeletion(id) {
+      let pending_deletes = new Set(this.pendingChanges.deleted);
+      let pending_updates = new Set(this.pendingChanges.updated);
+      let pending_creations = new Set(this.pendingChanges.created);
+
+      // This stuff is here to prevent the creation and deletion of an object in the same transaction
+      if (pending_creations.has(id)) {
+        pending_creations.delete(id);
       } else {
-        newNode.id = 1;
+        pending_deletes.add(id);
       }
 
-      this.diagram.nodes.push(newNode)
+      pending_updates.delete(id);
 
+      this.pendingChanges.deleted = Array.from(pending_deletes);
+      this.pendingChanges.updated = Array.from(pending_updates);
+      this.pendingChanges.created = Array.from(pending_creations);
+    },
+    enqueuePendingNodeUpdate(id) {
+      let pending_updates = new Set(this.pendingChanges.updated);
+      pending_updates.add(id);
+      this.pendingChanges.updated = Array.from(pending_updates);
+    },
+    enqueuePendingNodeCreation(id) {
+      let pending_creations = new Set(this.pendingChanges.created);
+      pending_creations.add(id);
+      this.pendingChanges.created = Array.from(pending_creations);
+    },
+    // --- end of magic hack
+    handleNodeMove() {
+      // TODO
+    },
+    handleLinkBreak({from,to}) {
+      this.enqueuePendingNodeUpdate(from);
+      this.enqueuePendingNodeUpdate(to);
+    },
+    handleLinkAdd({from, to}) {
+      this.enqueuePendingNodeUpdate(from);
+      this.enqueuePendingNodeUpdate(to);
+    },
+    performApply() {
+      this.pendingChanges.created.forEach((id) => {
+        this.model.nodes.find((n) => n.id === id).apiId = 'a';
+      });
+      this.pendingChanges = {
+        deleted: [],
+        created: [],
+        updated: []
+      }
+    }
+  },
+  computed: {
+    modelChanged() {
+      return some(this.pendingChanges, (o) => o.length > 0);
     }
   }