stuffs

src/main.js

@@ -15,7 +15,8 @@ import {
     MdList,
     MdAvatar,
     MdRipple,
-    MdDialog
+    MdDialog,
+    MdSpeedDial,
 } from 'vue-material/dist/components'
 
 import 'vue-material/dist/vue-material.min.css'
@@ -36,6 +37,7 @@ Vue.use(MdList);
 Vue.use(MdAvatar);
 Vue.use(MdRipple);
 Vue.use(MdDialog);
+Vue.use(MdSpeedDial);
 
 
 new Vue({

src/simple-flowchart/components/FlowchartLink.vue

@@ -2,14 +2,16 @@
   <g @mouseover="handleMouseOver"
     @mouseleave="handleMouseLeave">
     <path :d="dAttr" :style="pathStyle"></path>
-    <a v-if="show.delete" @click="deleteLink">
+    <a v-if="show.delete" @click="deleteLink" class="link-delete">
       <text 
         text-anchor="middle"
+        alignment-baseline="middle"
         :transform="arrowTransform"
-        font-size="22">&times;</text>
+        >&times;</text>
     </a>
     <path v-else d="M -1 -1 L 0 1 L 1 -1 z"
       :style="arrowStyle"
+
       :transform="arrowTransform"></path>
   </g>
 </template>
@@ -99,4 +101,14 @@ export default {
 g {
   cursor: pointer;
 }
+
+.link-delete {
+  font-size: 3em;
+  text-decoration: none;
+  text-align: center;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
 </style>

src/simple-flowchart/components/FlowchartNode.vue

@@ -1,15 +1,16 @@
 <template>
   <div class="flowchart-node" :style="nodeStyle"
-       @mousedown="handleMousedown"
-       @mouseover="handleMouseOver"
-       @mouseleave="handleMouseLeave"
+       @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="inputMouseDown"
-         @mouseup="inputMouseUp">
+         @mousedown.prevent
+         @mouseup.prevent="inputMouseUp">
     </div>
 
     <!--- The box itself --->
@@ -21,7 +22,7 @@
     <!--- Output port --->
     <div class="node-port node-output"
          v-if="haveOutput"
-         @mousedown="outputMouseDown">
+         @mousedown.prevent="outputMouseDown">
     </div>
 
     <div v-show="show.delete" class="node-delete">&times;</div>
@@ -67,19 +68,11 @@ export default {
       type: Object,
       default() {
         return {
-          centerX: 1024,
+          centerX: 0,
           scale: 1,
-          centerY: 140,
+          centerY: 0,
         }
       }
-    },
-    haveInput: {
-      type: Boolean,
-      default: true
-    },
-    haveOutput: {
-      type: Boolean,
-      default: true
     }
   },
   data() {
@@ -98,6 +91,12 @@ export default {
         left: this.options.centerX + this.x * this.options.scale + 'px', // remove: this.options.offsetLeft + 
         transform: `scale(${this.options.scale})`,
       }
+    },
+    haveInput() {
+      return this.type !== "ingest"
+    },
+    haveOutput() {
+      return this.type !== "restreamer"
     }
   },
   methods: {
@@ -115,30 +114,28 @@ export default {
     handleMouseLeave() {
       this.show.delete = false;
     },
-    outputMouseDown(e) {
+    outputMouseDown() {
       this.$emit('linkingStart')
-      e.preventDefault();
     },
-    inputMouseDown(e) {
-      e.preventDefault();
-    },
-    inputMouseUp(e) {
+    inputMouseUp() {
       this.$emit('linkingStop')
-      e.preventDefault();
     },
+    editProperties() {
+      this.$emit('update:data', {"text": "asd"});
+    }
   }
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
-$themeColor: rgb(85, 108, 255);
-$portSize: 12;
+$themeColor: rgb(0, 0, 0);
+$portSize: 14;
 
 .flowchart-node {
   margin: 0;
-  width: 80px;
-  height: 80px;
+  width: 200px;
+  height: 150px;
   position: absolute;
   box-sizing: border-box;
   border: none;
@@ -189,17 +186,18 @@ $portSize: 12;
 
   .node-delete {
     position: absolute;
-    right: -6px;
-    top: -6px;
-    font-size: 12px;
-    width: 12px;
-    height: 12px;
+    right: -8px;
+    top: -8px;
+    font-size: 14px;
+    width: 16px;
+    height: 16px;
     color: $themeColor;
     cursor: pointer;
     background: white;
     border: 1px solid $themeColor;
     border-radius: 100px;
     text-align: center;
+    line-height: 16px;
 
     &:hover {
       background: $themeColor;

src/simple-flowchart/components/SimpleFlowchart.vue

@@ -36,9 +36,9 @@ export default {
       type: Object,
       default() {
         return {
-          centerX: 1024,
+          centerX: 0,
           scale: 1,
-          centerY: 140,
+          centerY: 0,
           nodes: [],
           links: [],
         }
@@ -125,19 +125,23 @@ export default {
       })
     },
     getPortPosition(type, x, y) {
+      // Line start and end points set here
       if (type === 'top') {
-        return [x + 40, y];
+        return [x + 100, y];
       }
       else if (type === 'bottom') {
-        return [x + 40, y + 80];
+        return [x + 100, y + 150];
       }
     },
     linkingStart(index) {
       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);
       this.draggingLink = {
         from: index,
-        mx: 0,
-        my: 0,
+        mx: x, // Yes, those are magic numbers
+        my: y,
       };
     },
     linkingStop(index) {

src/views/Dashboard.vue

@@ -3,9 +3,17 @@
 
     <md-dialog :md-active.sync="showNewElementChooser">
       <md-dialog-title>Select the type of the new element</md-dialog-title>
-      <md-button @click="newElement('ingest')">Ingest</md-button>
-      <md-button @click="newElement('encoder')">Encoder</md-button>
-      <md-button @click="newElement('restreamer')">Restreamer</md-button>
+
+
+      <md-button @click="newElement('ingest')"><md-icon>vertical_align_bottom</md-icon> Ingest</md-button>
+      <i></i> <!-- This is to prevent margin collapse -->
+
+      <md-button @click="newElement('encoder')"><md-icon>gradient</md-icon> Encoder</md-button>
+      <i></i>
+
+      <md-button @click="newElement('restreamer')"><md-icon>publish</md-icon> Restreamer</md-button>
+
+
 
     </md-dialog>
 
@@ -44,13 +52,28 @@
     </md-drawer>
 
     <md-content id="diagram-container">
-
       <simple-flowchart :scene.sync="diagram"></simple-flowchart>
-      <div id="fab-holder">
-        <md-button class="md-fab" @click="performAddElement">
+
+      <md-speed-dial class="md-bottom-right">
+        <md-speed-dial-target @click="performAddElement">
           <md-icon>add</md-icon>
-        </md-button>
-      </div>
+        </md-speed-dial-target>
+
+        <md-speed-dial-content>
+          <md-button @click="newElement('restreamer')" class="md-icon-button">
+            <md-icon>publish</md-icon>
+          </md-button>
+
+          <md-button @click="newElement('encoder')"  class="md-icon-button">
+            <md-icon>gradient</md-icon>
+          </md-button>
+
+          <md-button @click="newElement('ingest')"  class="md-icon-button">
+            <md-icon>vertical_align_bottom</md-icon>
+          </md-button>
+
+        </md-speed-dial-content>
+      </md-speed-dial>
 
     </md-content>
 
@@ -69,37 +92,35 @@ export default {
     showNavigation: false,
     showNewElementChooser: false,
     diagram: {
-      centerX: 1024,
-      centerY: 140,
+      centerX: 0,
+      centerY: 0,
       scale: 1,
       nodes: [
         {
           id: 2,
-          x: -700,
-          y: -69,
-          type: 'Action',
-          data: {"text" : "lofasz"},
-          haveInput: false,
+          x: 100,
+          y: 110,
+          type: 'ingest',
+          data: {"text": "as"},
         },
         {
           id: 4,
-          x: -357,
+          x: 357,
           y: 80,
-          type: 'Script',
-          label: 'test2',
-          haveOutput: false
+          type: 'restreamer',
+          data: {"text": "asd"},
         },
         {
           id: 6,
-          x: -557,
+          x: 557,
           y: 80,
-          type: 'Rule',
-          label: 'test3',
+          type: 'encoder',
+          data: {"text": "asdasd"}
         }
       ],
       links: [
         {
-          id: 3,
+          id: 1,
           from: 2, // node id the link start
           to: 4,  // node id the link end
         }