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

@@ -18,7 +18,10 @@
                     :options="nodeOptions"
                     @linkingStart="linkingStart(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',
@@ -127,8 +130,7 @@ export default {
       // 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
@@ -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: [
-        {
-          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
-        }
-      ]
+      nodes: [],
+      links: []
     }
   }),
   methods: {