Implemented editor

src/simple-flowchart/components/FlowchartNode.vue

@@ -1,36 +1,106 @@
 <template>
-  <div class="flowchart-node" :style="nodeStyle"
-       @mousedown.prevent="handleMousedown"
-       @mouseover.prevent="handleMouseOver"
-       @mouseleave.prevent="handleMouseLeave"
-       @dblclick.prevent="editProperties"
-       v-bind:class="{selected: options.selected === id}">
+  <div>
+
+    <md-dialog :md-active.sync="show.editor">
+      <md-dialog-title>{{ capitalizedType }} preferences</md-dialog-title>
+
+      <form class="editor-form">
+
+        <div v-if="type === 'ingest'">
+
+          <md-field>
+            <label>Url</label>
+            <md-input readonly="true" v-model="editorData.url"></md-input>
+          </md-field>
+
+        </div>
+        <div v-else-if="type === 'encoder'">
+
+          <md-field>
+            <label>Width</label>
+            <md-input type="number" v-model="editorData.width"></md-input>
+          </md-field>
+
+          <md-field>
+            <label>Height</label>
+            <md-input type="number" v-model="editorData.height"></md-input>
+          </md-field>
+
+          <md-field>
+            <label>Bitrate</label>
+            <md-input type="number" v-model="editorData.bitrate"></md-input>
+          </md-field>
+
+
+        </div>
+        <div v-else-if="type === 'restreamer'">
+
+          <md-field>
+            <label>Url</label>
+            <md-input v-model="editorData.url"></md-input>
+          </md-field>
+
+          <md-field>
+            <label>Stream Key</label>
+            <md-input type="password" v-model="editorData.streamkey"></md-input>
+          </md-field>
+
+
+        </div>
+
+      </form>
+
+
+      <md-dialog-actions>
+        <md-button @click="show.editor = false">Discard</md-button>
+        <md-button class="md-primary" @click="saveEdit">Save</md-button>
+      </md-dialog-actions>
+    </md-dialog>
+
+    <div class="flowchart-node" :style="nodeStyle"
+         @mousedown.prevent="handleMousedown"
+         @mouseover.prevent="handleMouseOver"
+         @mouseleave.prevent="handleMouseLeave"
+         @dblclick.prevent="editProperties"
+         v-bind:class="{selected: options.selected === id}">
+
+      <!--- Input port --->
+      <div class="node-port node-input"
+           v-if="haveInput"
+           @mousedown.prevent
+           @mouseup.prevent="inputMouseUp">
+      </div>
+
+      <!--- 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>
+      </div>
+
+      <!--- Output port --->
+      <div class="node-port node-output"
+           v-if="haveOutput"
+           @mousedown.prevent="outputMouseDown">
+      </div>
+
+      <div v-show="show.delete" class="node-delete">&times;</div>
 
-    <!--- Input port --->
-    <div class="node-port node-input"
-         v-if="haveInput"
-         @mousedown.prevent
-         @mouseup.prevent="inputMouseUp">
     </div>
-
-    <!--- The box itself --->
-    <div class="node-main">
-      <div v-text="type" class="node-type"></div>
-      <div class="node-label">Content</div>
-    </div>
-
-    <!--- Output port --->
-    <div class="node-port node-output"
-         v-if="haveOutput"
-         @mousedown.prevent="outputMouseDown">
-    </div>
-
-    <div v-show="show.delete" class="node-delete">&times;</div>
-
   </div>
 </template>
 
 <script>
+
+import {cloneDeep, capitalize} from 'lodash';
+
 export default {
   name: 'FlowchartNode',
   props: {
@@ -79,7 +149,9 @@ export default {
     return {
       show: {
         delete: false,
-      }
+        editor: false
+      },
+      editorData: {}
     }
   },
   mounted() {
@@ -97,6 +169,9 @@ export default {
     },
     haveOutput() {
       return this.type !== "restreamer"
+    },
+    capitalizedType() {
+      return capitalize(this.type);
     }
   },
   methods: {
@@ -121,7 +196,12 @@ export default {
       this.$emit('linkingStop')
     },
     editProperties() {
-      this.$emit('update:data', {"text": "asd"});
+      this.editorData = cloneDeep(this.data);
+      this.show.editor = true;
+    },
+    saveEdit() {
+      this.show.editor = false;
+      this.$emit('update:data', this.editorData);
     }
   }
 }
@@ -146,17 +226,24 @@ $portSize: 14;
   transform-origin: top left;
 
   .node-main {
-    text-align: center;
+
+    overflow: hidden;
 
     .node-type {
       background: $themeColor;
       color: white;
       font-size: 13px;
       padding: 6px;
+      text-align: center;
     }
 
-    .node-label {
+    .node-content {
       font-size: 13px;
+
+      th {
+        width: 50%;
+      }
+
     }
   }
 
@@ -206,6 +293,10 @@ $portSize: 14;
   }
 }
 
+.editor-form {
+  padding: 1.5em;
+}
+
 .selected {
   box-shadow: 0 0 0 2px $themeColor;
 }

src/simple-flowchart/components/SimpleFlowchart.vue

@@ -116,7 +116,6 @@ export default {
   mounted() {
     this.rootDivOffset.top = this.$el ? this.$el.offsetTop : 0;
     this.rootDivOffset.left = this.$el ? this.$el.offsetLeft : 0;
-    // console.log(22222, this.rootDivOffset);
   },
   methods: {
     findNodeWithID(id) {