Destilled node operations to an operation queue

src/simple-flowchart/components/FlowchartNode.vue

@@ -6,13 +6,24 @@
 
       <form class="editor-form">
 
-        <div v-if="type === 'ingest'">
+        <div v-if="type === 'ingest' && apiId !== null">
 
           <md-field>
-            <label>Url</label>
+            <label>URL</label>
             <md-input readonly="true" v-model="editorData.url"></md-input>
           </md-field>
 
+          <md-field>
+            <label>Stream Key</label>
+            <md-input readonly="true" type="password" v-model="editorData.streamkey"></md-input>
+          </md-field>
+
+
+        </div>
+        <div v-if="type === 'ingest' && apiId === null">
+
+          <b>Press APPLY first, to generate your connection details!</b>
+
         </div>
         <div v-else-if="type === 'encoder'">
 
@@ -36,7 +47,7 @@
         <div v-else-if="type === 'restreamer'">
 
           <md-field>
-            <label>Url</label>
+            <label>URL</label>
             <md-input v-model="editorData.url"></md-input>
           </md-field>
 
@@ -52,8 +63,8 @@
 
 
       <md-dialog-actions>
-        <md-button @click="show.editor = false">Discard</md-button>
-        <md-button class="md-primary" @click="saveEdit">Save</md-button>
+        <md-button @click="show.editor = false">{{ discardButtonLabel }}</md-button>
+        <md-button class="md-primary" @click="saveEdit" v-if="type !== 'ingest'">Save</md-button>
       </md-dialog-actions>
     </md-dialog>
 
@@ -73,18 +84,39 @@
 
       <!--- The box itself --->
       <div class="node-main">
-        <div v-text="capitalizedType" class="node-type"></div>
-        <div class="node-content">
-          <table>
-            <tr :key="k" v-for="(v, k) in data">
-              <th>{{ k }}</th>
-              <td>{{ v }}</td>
-            </tr>
-          </table>
+        <div class="node-type">{{ capitalizedType }}<span v-if="apiId === null">*</span></div>
+        <div class="node-content node-content-long" v-if="type === 'ingest'">
+
+          <span v-if="this.apiId === null">Apply first!</span>
+          <span v-else><b>URL:</b> {{this.url}}</span>
 
         </div>
+        <div class="node-content" v-else-if="type === 'encoder'">
+          <table>
+            <tr>
+              <th>width</th>
+              <td>{{ this.data.width }}</td>
+              <td>px</td>
+            </tr>
+            <tr>
+              <th>height</th>
+              <td>{{ this.data.height }}</td>
+              <td>px</td>
+            </tr>
+            <tr>
+              <th>bitrate</th>
+              <td>{{ this.data.bitrate }}</td>
+              <td>kbps</td>
+            </tr>
+          </table>
+        </div>
+        <div class="node-content node-content-long" v-else-if="type === 'restreamer'">
+          <b>Target: </b> {{ this.data.url }}
+        </div>
+
       </div>
 
+
       <!--- Output port --->
       <div class="node-port node-output"
            v-if="haveOutput"
@@ -134,6 +166,10 @@ export default {
       default: () => {
       }
     },
+    apiId: {
+      type: String,
+      default: null
+    },
     options: {
       type: Object,
       default() {
@@ -155,6 +191,9 @@ export default {
     }
   },
   mounted() {
+    if (this.apiId === null && this.type !== 'ingest') {
+      this.$nextTick(() => this.show.editor = true);
+    }
   },
   computed: {
     nodeStyle() {
@@ -172,8 +211,16 @@ export default {
     },
     capitalizedType() {
       return capitalize(this.type);
+    },
+    discardButtonLabel() {
+      if (this.type === 'ingest') {
+        return "CLOSE";
+      } else {
+        return "DISCARD";
+      }
     }
   },
+
   methods: {
     handleMousedown(e) {
       const target = e.target || e.srcElement;
@@ -240,12 +287,18 @@ $portSize: 14;
 
     .node-content {
       font-size: 13px;
+      padding: 0.5em;
 
       th {
         width: 50%;
       }
 
     }
+
+    .node-content-long {
+      word-break: break-all;
+    }
+
   }
 
   .node-port {

src/simple-flowchart/components/SimpleFlowchart.vue

@@ -152,7 +152,11 @@ export default {
         const existed = this.scene.links.find((link) => {
           return link.from === this.draggingLink.from && link.to === index;
         })
-        if (!existed) {
+        // check for conflicting
+        const conflicting = this.scene.links.find((link) => { // This makes sure that only one link can go towards a node
+          return link.to === index;
+        })
+        if (!existed && !conflicting) {
           let maxID = Math.max(0, ...this.scene.links.map((link) => {
             return link.id
           }))
@@ -223,10 +227,16 @@ export default {
         if (typeof target.className === 'string' && target.className.indexOf('node-delete') > -1) {
           // console.log('delete2', this.action.dragging);
           this.nodeDelete(this.action.dragging);
+          this.action.dragging = null;
         }
       }
+
+      if (this.action.dragging) {
+        this.$emit("nodeMoved", this.action.dragging);
+        this.action.dragging = null;
+      }
+
       this.action.linking = false;
-      this.action.dragging = null;
       this.action.scrolling = false;
     },
     handleDown(e) {