Added data edited event

src/simple-flowchart/components/FlowchartNode.vue

@@ -202,6 +202,7 @@ export default {
     saveEdit() {
       this.show.editor = false;
       this.$emit('update:data', this.editorData);
+      this.$emit("dataUpdated", this.data);
     }
   }
 }

src/simple-flowchart/components/SimpleFlowchart.vue

@@ -1,24 +1,27 @@
 <template>
-  <div class="flowchart-container" 
+  <div class="flowchart-container"
-    @mousemove="handleMove" 
+       @mousemove="handleMove"
-    @mouseup="handleUp"
+       @mouseup="handleUp"
-    @mousedown="handleDown">
+       @mousedown="handleDown">
 
     <svg width="100%" height="100%">
-      <flowchart-link v-bind.sync="link" 
+      <flowchart-link v-bind.sync="link"
-        v-for="(link, index) in lines" 
+                      v-for="(link, index) in lines"
-        :key="`link${index}`"
+                      :key="`link${index}`"
-        @deleteLink="linkDelete(link.id)">
+                      @deleteLink="linkDelete(link.id)">
       </flowchart-link>
     </svg>
 
-    <flowchart-node v-bind.sync="node" 
+    <flowchart-node v-bind.sync="node"
-      v-for="(node, index) in scene.nodes" 
+                    v-for="(node, index) in scene.nodes"
-      :key="`node${index}`"
+                    :key="`node${index}`"
-      :options="nodeOptions"
+                    :options="nodeOptions"
-      @linkingStart="linkingStart(node.id)"
+                    @linkingStart="linkingStart(node.id)"
-      @linkingStop="linkingStop(node.id)"
+                    @linkingStop="linkingStop(node.id)"
-      @nodeSelected="nodeSelected(node.id, $event)">
+                    @nodeSelected="nodeSelected(node.id, $event)"
+                    @dataUpdated="dataUpdated(node.id, $event)"
+    >
+
     </flowchart-node>
 
   </div>
@@ -27,7 +30,7 @@
 <script>
 import FlowchartLink from './FlowchartLink.vue';
 import FlowchartNode from './FlowchartNode.vue';
-import { getMousePosition } from '../assets/utilty/position';
+import {getMousePosition} from '../assets/utilty/position';
 
 export default {
   name: 'VueFlowchart',
@@ -92,8 +95,8 @@ export default {
         x = this.scene.centerX + toNode.x;
         y = this.scene.centerY + toNode.y;
         [ex, ey] = this.getPortPosition('top', x, y);
-        return { 
+        return {
-          start: [cx, cy], 
+          start: [cx, cy],
           end: [ex, ey],
           id: link.id,
         };
@@ -105,8 +108,8 @@ export default {
         y = this.scene.centerY + fromNode.y;
         [cx, cy] = this.getPortPosition('bottom', x, y);
         // push temp dragging link, mouse cursor postion = link end postion 
-        lines.push({ 
+        lines.push({
-          start: [cx, cy], 
+          start: [cx, cy],
           end: [this.draggingLink.mx, this.draggingLink.my],
         })
       }
@@ -120,15 +123,14 @@ export default {
   methods: {
     findNodeWithID(id) {
       return this.scene.nodes.find((item) => {
-          return id === item.id
+        return id === item.id
       })
     },
     getPortPosition(type, x, y) {
       // Line start and end points set here
       if (type === 'top') {
         return [x + 100, y];
-      }
+      } else if (type === 'bottom') {
-      else if (type === 'bottom') {
         return [x + 100, y + 150];
       }
     },
@@ -136,7 +138,7 @@ export default {
       this.action.linking = true;
       // Dirty fix, so that links won't glitch when being created
       const node = this.findNodeWithID(index);
-      const [x,y] = this.getPortPosition('bottom',node.x + this.scene.centerX,node.y + this.scene.centerY);
+      const [x, y] = this.getPortPosition('bottom', node.x + this.scene.centerX, node.y + this.scene.centerY);
       this.draggingLink = {
         from: index,
         mx: x, // Yes, those are magic numbers
@@ -167,11 +169,11 @@ export default {
     },
     linkDelete(id) {
       const deletedLink = this.scene.links.find((item) => {
-          return item.id === id;
+        return item.id === id;
       });
       if (deletedLink) {
         this.scene.links = this.scene.links.filter((item) => {
-            return item.id !== id;
+          return item.id !== id;
         });
         this.$emit('linkBreak', deletedLink);
       }
@@ -256,6 +258,9 @@ export default {
         return link.from !== id && link.to !== id
       })
       this.$emit('nodeDelete', id)
+    },
+    dataUpdated(id, newData) {
+      this.$emit('nodeDataEdited', id, newData);
     }
   },
 }
@@ -269,6 +274,7 @@ export default {
   position: relative;
   overflow: hidden;
   height: 100%;
+
   svg {
     cursor: grab;
   }

src/views/Dashboard.vue

@@ -40,36 +40,8 @@ export default {
       centerX: 0,
       centerY: 0,
       scale: 1,
-      nodes: [
+      nodes: [],
-        {
+      links: []
-          id: 2,
-          x: 100,
-          y: 110,
-          type: 'ingest',
-          data: {"url": "rtmp://videon.test.kmlabz.com/test:6554"},
-        },
-        {
-          id: 4,
-          x: 357,
-          y: 80,
-          type: 'restreamer',
-          data: {"url": "rtmp://youtube.com/live/stream/ysos:55223", "streamkey": "asdjnao9gj9833tjkq389fjae9jf"},
-        },
-        {
-          id: 6,
-          x: 557,
-          y: 80,
-          type: 'encoder',
-          data: {"bitrate": 8000, "width": 600, "height": 800}
-        }
-      ],
-      links: [
-        {
-          id: 1,
-          from: 2, // node id the link start
-          to: 4,  // node id the link end
-        }
-      ]
     }
   }),
   methods: {