Add posibility to configure ports

TonyMasse · Aug 18, 2020 · 3c15784 · 3c15784
1 parent 5751327
commit 3c15784
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/src/components/Diagram.vue b/src/components/Diagram.vue
@@ -84,6 +84,7 @@
             @onStartDragNewLink="startDragNewLink"
             @mouseUpPort="mouseUpPort"
             @delete="model.removePort(node, port)"
+            @configure="configurePort(node, port)"
           />
         </DiagramNode>
       </g>
@@ -354,6 +355,10 @@ export default {
 
     onDropNode(evt, node) {
       this.$emit("dropNode", evt, node);
+    },
+
+    configurePort(node, port) {
+      this.$emit("configurePort", node, port);
     }
   },
   computed: {

diff --git a/src/components/DiagramPort.vue b/src/components/DiagramPort.vue
@@ -9,7 +9,7 @@
         width="10" height="10"
         @mouseenter="enter" @mouseleave="leave" @mousedown="startDragNewLink" @mouseup="mouseup">
       </rect>
-      <text x="12" y="9" font-size="8pt" fill="#000000" @click="deletePort">{{name}}</text>
+      <text x="12" y="9" font-size="8pt" fill="#000000">{{name}}</text>
     </svg>
     <svg :y="y + 55" v-else>
       <rect
@@ -20,7 +20,9 @@
         width="10" height="10"
         @mouseenter="enter" @mouseleave="leave" @mousedown="startDragNewLink" @mouseup="mouseup">
       </rect>
-      <text :x="12" y="9" font-size="8pt" fill="#000000" @click="deletePort">{{name}}</text>
+      <text :x="12" y="9" font-size="8pt" fill="#000000">{{name}}</text>
+      <text :x="nodeWidth - 24" y="9" font-size="8pt" fill="#000000" @click="configurePort" style="cursor: pointer">o</text>
+      <text :x="nodeWidth - 12" y="9" font-size="8pt" fill="#000000" @click="deletePort" style="cursor: pointer">x</text>
     </svg>
   </g>
 </template>
@@ -50,6 +52,9 @@ export default {
     },
     deletePort: function() {
       this.$emit("delete");
+    },
+    configurePort: function() {
+      this.$emit("configure");
     }
   }
 };