stuffs

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;