automatic insert function

src/components/FlowChart.vue

@@ -7,7 +7,7 @@
           <li
             is="LeftToolBtn"
             v-for="btn in btns"
-            :key="btn.type"
+            :key="btn.value"
             :btn="btn"
             @selectedBtn="selectedBtn"
             @changeState="changeState"
@@ -16,6 +16,8 @@
       </div>
       <div class="graph-container">
         <Graph
+          :nodes="nodes"
+          :edges="edges"
           :isDragging="isDragging"
           :toLink="toLink"
           @activeSelectBtn="activeSelectBtn"
@@ -32,20 +34,32 @@ import LeftToolBtn from './LeftToolBtn'
 import Graph from './Graph'
 import GraphProp from './GraphProp'
 
+import UUID from '@/utils/createUniqueString'
+
+var testNodes = [
+  {id: 1, name: '普通活动', type: 'activity', x: 200, y: 200, selected: false, r: 34},
+  {id: 2, name: '普通活动', type: 'activity', x: 300, y: 300, selected: false, r: 34}
+]
+var testEdges = [
+  {id: 1, source: testNodes[0], target: testNodes[1], selected: false}
+]
+
 export default {
   data () {
     return {
       btns: [
-        {name: '选择', type: 'select', draggable: false, active: true},
-        {name: '自动插入', type: 'addStartEnd', draggable: false, active: false},
-        {name: '开始', type: 'start', draggable: true, active: false},
-        {name: '结束', type: 'end', draggable: true, active: false},
-        {name: '普通活动', type: 'ordinary', draggable: true, active: false},
-        {name: '块活动', type: 'block', draggable: true, active: false},
-        {name: '子活动', type: 'subFlow', draggable: true, active: false},
-        {name: '转移', type: 'line', draggable: false, active: false},
-        {name: '自转移', type: 'polyline', draggable: false, active: false}
+        {name: '选择', value: 'select', type: null, draggable: false, active: true},
+        {name: '自动插入', value: 'addStartEnd', type: null, draggable: false, active: false},
+        {name: '开始', value: 'start', type: 'start', draggable: true, active: false},
+        {name: '结束', value: 'end', type: 'end', draggable: true, active: false},
+        {name: '普通活动', value: 'ordinary', type: 'activity', draggable: true, active: false},
+        {name: '块活动', value: 'block', type: 'activity', draggable: true, active: false},
+        {name: '子活动', value: 'subFlow', type: 'activity', draggable: true, active: false},
+        {name: '转移', value: 'line', type: null, draggable: false, active: false},
+        {name: '自转移', value: 'polyline', type: null, draggable: false, active: false}
       ],
+      nodes: testNodes,
+      edges: testEdges,
       isDragging: false,
       toLink: false
     }
@@ -62,22 +76,85 @@ export default {
         item.active = false
       })
       btn.active = !btn.active
-      var linktypes = ['line', 'polyline']
       var state = {
         key: 'toLink',
         value: false
       }
-      if (linktypes.includes(btn.type)) {
-        state.value = true
+      switch (btn.value) {
+        case 'line':
+        case 'polyline':
+          state.value = true
+          break
+        case 'addStartEnd':
+          this.addStartAndEnd()
+          break
+        default:
+          break
       }
       this.changeState(state)
     },
+    addStartAndEnd: function () {
+      this.nodesNoOutput().forEach(node => {
+        var endNode = {
+          id: UUID(),
+          name: '结束',
+          type: 'end',
+          x: node.x + 150,
+          y: node.y,
+          selected: false,
+          r: 34
+        }
+        this.nodes.push(endNode)
+        this.edges.push({
+          id: UUID(),
+          source: node,
+          target: endNode,
+          selected: false})
+      })
+      this.nodesNoInput().forEach(node => {
+        var startNode = {
+          id: UUID(),
+          name: '开始',
+          type: 'start',
+          x: node.x - 150,
+          y: node.y,
+          selected: false,
+          r: 34
+        }
+        this.nodes.push(startNode)
+        this.edges.push({
+          id: UUID(),
+          source: startNode,
+          target: node,
+          selected: false
+        })
+      })
+    },
+    filterAcivities: function () {
+      return this.nodes.filter(node => node.type === 'activity')
+    },
+    nodesNoInput: function () {
+      var activties = this.filterAcivities()
+      return activties.filter(node => {
+        return this.edges.every(edge => {
+          return edge.target !== node
+        })
+      })
+    },
+    nodesNoOutput: function () {
+      var activties = this.filterAcivities()
+      return activties.filter(node => {
+        return this.edges.some(edge => {
+          return edge.source !== node
+        })
+      })
+    },
     changeState: function (state) {
       this[state.key] = state.value
     },
     activeSelectBtn: function () {
       this.btns.forEach(btn => {
-        if (btn.type === 'select') {
+        if (btn.value === 'select') {
           btn.active = true
         } else {
           btn.active = false

src/components/Graph.vue

@@ -52,20 +52,11 @@
 <script>
 var nodeId = 3
 var edgeId = 2
-var testNodes = [
-  {id: 1, name: '普通活动', x: 200, y: 200, selected: false, r: 34},
-  {id: 2, name: '普通活动', x: 300, y: 300, selected: false, r: 34}
-]
-var testEdges = [
-  {id: 1, source: testNodes[0], target: testNodes[1], selected: false}
-]
 const svgDx = 165
 const svgDy = 53
 export default {
   data () {
     return {
-      nodes: testNodes,
-      edges: testEdges,
       mousedownNode: null,
       mousedownEdge: null,
       selectedNode: null,
@@ -77,6 +68,14 @@ export default {
   },
   computed: {},
   props: {
+    nodes: {
+      type: Array,
+      require: true
+    },
+    edges: {
+      type: Array,
+      require: true
+    },
     isDragging: {
       type: Boolean,
       require: true
@@ -97,6 +96,7 @@ export default {
       this.nodes.push({
         id: nodeId++,
         name: jsonObj.name,
+        type: jsonObj.type,
         x: e.x - svgDx,
         y: e.y - svgDy,
         selected: false,
@@ -129,7 +129,7 @@ export default {
     nodeMouseup: function (node) {
       if (this.mousedownNode !== node) {
         var edge = {
-          id: edgeId,
+          id: edgeId++,
           source: this.mousedownNode,
           target: node,
           selected: false

src/components/LeftToolBtn.vue

@@ -5,7 +5,7 @@
       @dragend="dragend"
       :class="{active: btn.active}"
   >
-    <i :class="['tools', btn.type+'-icon']"></i>
+    <i :class="['tools', btn.value+'-icon']"></i>
     <span>{{btn.name}}</span>
   </li>
 </template>

src/utils/createUniqueString.js

@@ -0,0 +1,8 @@
+/**
+ * Created by jiachenpan on 17/3/8.
+ */
+export default function createUniqueString () {
+  const timestamp = +new Date() + ''
+  const randomNum = parseInt((1 + Math.random()) * 65536) + ''
+  return (+(randomNum + timestamp)).toString(32)
+}