stuffs

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" 
+        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) {