showProp

src/components/FlowChart.vue

@@ -18,11 +18,10 @@
         <Graph
           :nodes="nodes"
           :edges="edges"
-          :isDragging="isDragging"
-          :toLink="toLink"
+          :state="state"
           @activeSelectBtn="activeSelectBtn"
         ></Graph>
-        <GraphProp></GraphProp>
+        <GraphProp :state="state"></GraphProp>
       </div>
     </div>
   </div>
@@ -60,8 +59,12 @@ export default {
       ],
       nodes: testNodes,
       edges: testEdges,
-      isDragging: false,
-      toLink: false
+      state: {
+        selectedNode: null,
+        selectedEdge: null,
+        isDragging: false,
+        toLink: false
+      }
     }
   },
   components: {
@@ -150,7 +153,7 @@ export default {
       })
     },
     changeState: function (state) {
-      this[state.key] = state.value
+      this.state[state.key] = state.value
     },
     activeSelectBtn: function () {
       this.btns.forEach(btn => {
@@ -160,7 +163,7 @@ export default {
           btn.active = false
         }
       })
-      this.toLink = false
+      this.state.toLink = false
     }
   }
 }

src/components/Graph.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <div :class="['graph', {active: isDragging}]"
+    <div :class="['graph', {active: state.isDragging}]"
       @drop="addNode"
       @dragover.prevent
     >
@@ -32,7 +32,7 @@
           <g>
             <g v-for="node in nodes"
                :key="node.id"
-               :class="['conceptG', {selected: node.selected, toLink: toLink}]"
+               :class="['conceptG', {selected: node.selected, toLink: state.toLink}]"
                :transform="'translate('+node.x+','+node.y+')'"
                @mousedown="nodeMousedown(node)"
                @mouseup="nodeMouseup(node)"
@@ -59,8 +59,6 @@ export default {
     return {
       mousedownNode: null,
       mousedownEdge: null,
-      selectedNode: null,
-      selectedEdge: null,
       justDrag: true,
       isLinking: false,
       dragData: ''
@@ -76,12 +74,8 @@ export default {
       type: Array,
       require: true
     },
-    isDragging: {
-      type: Boolean,
-      require: true
-    },
-    toLink: {
-      type: Boolean,
+    state: {
+      type: Object,
       require: true
     }
   },
@@ -107,21 +101,25 @@ export default {
       this.nodes.map(function (node) {
         node.selected = false
       })
+      this.state.selectedNode = null
     },
     unSelectedEdges: function () {
       this.edges.map(function (edge) {
         edge.selected = false
       })
+      this.state.selectedEdge = null
     },
     unSelectedAll: function () {
       this.unSelectedNodes()
       this.unSelectedEdges()
     },
     nodeMousedown: function (node) {
+      var state = this.state
       this.unSelectedAll()
-      node.selected = !node.selected
+      node.selected = true
+      state.selectedNode = node
       this.mousedownNode = node
-      if (this.toLink) {
+      if (state.toLink) {
         this.isLinking = true
         this.justDrag = false
       }
@@ -178,10 +176,8 @@ export default {
     },
     clickEdge: function (edge) {
       this.unSelectedAll()
-      edge.selected = !edge.selected
-    },
-    dragstart: function (node) {
-      console.log(node)
+      edge.selected = true
+      this.state.selectedEdge = edge
     }
   }
 }

src/components/GraphProp.vue

@@ -3,10 +3,10 @@
     <div class="prop-title">节点属性：</div>
     <ul>
       <Li>
-        <span>ID:</span><span>test1</span>
+        <span>ID:</span><span>{{showProp.id}}</span>
       </Li>
       <Li>
-        <span>名称:</span><span>test2</span>
+        <span>描述:</span><span>{{showProp.description}}</span>
       </Li>
     </ul>
   </div>
@@ -14,7 +14,45 @@
 
 <script>
 export default {
-
+  props: {
+    state: {
+      type: Object,
+      require: true
+    }
+  },
+  data () {
+    return {
+      showProp: {
+        id: '',
+        description: ''
+      }
+    }
+  },
+  methods: {
+    showSelectedProp: function (type, data) {
+      var prop = {}
+      if (type === 'node') {
+        prop.description = data.name
+      } else {
+        prop.description = '由 ' + data.source.name + ' 指向 ' + data.target.name
+      }
+      this.showProp = Object.assign(prop, data)
+    }
+  },
+  watch: {
+    'state.selectedNode': function (curr, old) {
+      if (!curr) {
+        return false
+      }
+      this.showSelectedProp('node', curr)
+    },
+    'state.selectedEdge': function (curr, old) {
+      if (!curr) {
+        return false
+      }
+      this.showSelectedProp('edge', curr)
+    }
+  }
 }
 </script>
 
@@ -37,7 +75,7 @@ ul li {
 
 ul li span {
   display: inline-block;
-  width: 25%;
+  width: 40%;
   color: gray;
 }