add vue-router and vuex

package-lock.json

@@ -11893,6 +11893,11 @@
       "integrity": "sha512-x3LV3wdmmERhVCYy3quqA57NJW7F3i6faas++pJQWtknWT+n7k30F4TVdHvCLn48peTJFRvCpxs3UuFPqgeELg==",
       "dev": true
     },
+    "vuex": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.0.1.tgz",
+      "integrity": "sha512-wLoqz0B7DSZtgbWL1ShIBBCjv22GV5U+vcBFox658g6V0s4wZV9P4YjCNyoHSyIBpj1f29JBoNQIqD82cR4O3w=="
+    },
     "watchpack": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",

package.json

@@ -17,7 +17,8 @@
     "normalize.css": "^8.0.0",
     "sass-loader": "^7.1.0",
     "vue": "^2.5.2",
-    "vue-router": "^3.0.1"
+    "vue-router": "^3.0.1",
+    "vuex": "^3.0.1"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",

src/App.vue

@@ -1,20 +1,11 @@
 <template>
   <div id="app">
-    <FlowChart></FlowChart>
+    <router-view/>
   </div>
 </template>
 
 <script>
-import FlowChart from './components/FlowChart'
-
-export default {
-  name: 'App',
-  components: {
-    FlowChart
-  }
+export default{
+  name: 'App'
 }
 </script>
-
-<style>
-
-</style>

src/components/Graph.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <div :class="['graph', {active: state.isDragging}]"
+    <div :class="['graph', {active: graphState.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: state.toLink}]"
+               :class="['conceptG', {selected: node.selected, toLink: graphState.toLink}]"
                :transform="'translate('+node.x+','+node.y+')'"
                @mousedown="nodeMousedown(node)"
                @mouseup="nodeMouseup(node)"
@@ -51,6 +51,7 @@
 </template>
 
 <script>
+import {mapGetters, mapActions} from 'vuex'
 import RightMenu from './RightMenu'
 
 var nodeId = 3
@@ -67,7 +68,11 @@ export default {
       dragData: ''
     }
   },
-  computed: {},
+  computed: {
+    ...mapGetters([
+      'graphState'
+    ])
+  },
   props: {
     nodes: {
       type: Array,
@@ -76,16 +81,17 @@ export default {
     edges: {
       type: Array,
       require: true
-    },
-    state: {
-      type: Object,
-      require: true
     }
   },
   components: {
     RightMenu
   },
   methods: {
+    ...mapActions([
+      'toggle_toLink',
+      'changSelectedNode',
+      'changSelectedEdge'
+    ]),
     edgeData: function (edge) {
       return 'M' + edge.source.x + ',' + edge.source.y +
              ' L' + edge.target.x + ',' + edge.target.y
@@ -107,25 +113,23 @@ 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 = true
-      state.selectedNode = node
+      // this.changSelectedNode(node)
+      this.$store.dispatch('changSelectedNode', node)
       this.mousedownNode = node
-      if (state.toLink) {
+      if (this.graphState.toLink) {
         this.isLinking = true
         this.justDrag = false
       }
@@ -183,7 +187,8 @@ export default {
     clickEdge: function (edge) {
       this.unSelectedAll()
       edge.selected = true
-      this.state.selectedEdge = edge
+      // this.changSelectedEdge(edge)
+      this.$store.dispatch('changSelectedEdge', edge)
     }
   }
 }

src/components/GraphProp.vue

@@ -13,13 +13,8 @@
 </template>
 
 <script>
+import {mapGetters} from 'vuex'
 export default {
-  props: {
-    state: {
-      type: Object,
-      require: true
-    }
-  },
   data () {
     return {
       showProp: {
@@ -28,6 +23,11 @@ export default {
       }
     }
   },
+  computed: {
+    ...mapGetters([
+      'graphState'
+    ])
+  },
   methods: {
     showSelectedProp: function (type, data) {
       var prop = {}
@@ -40,13 +40,13 @@ export default {
     }
   },
   watch: {
-    'state.selectedNode': function (curr, old) {
+    'graphState.selectedNode': function (curr, old) {
       if (!curr) {
         return false
       }
       this.showSelectedProp('node', curr)
     },
-    'state.selectedEdge': function (curr, old) {
+    'graphState.selectedEdge': function (curr, old) {
       if (!curr) {
         return false
       }

src/components/HelloWorld.vue

@@ -1,113 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <h2>Essential Links</h2>
-    <ul>
-      <li>
-        <a
-          href="https://vuejs.org"
-          target="_blank"
-        >
-          Core Docs
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://forum.vuejs.org"
-          target="_blank"
-        >
-          Forum
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://chat.vuejs.org"
-          target="_blank"
-        >
-          Community Chat
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://twitter.com/vuejs"
-          target="_blank"
-        >
-          Twitter
-        </a>
-      </li>
-      <br>
-      <li>
-        <a
-          href="http://vuejs-templates.github.io/webpack/"
-          target="_blank"
-        >
-          Docs for This Template
-        </a>
-      </li>
-    </ul>
-    <h2>Ecosystem</h2>
-    <ul>
-      <li>
-        <a
-          href="http://router.vuejs.org/"
-          target="_blank"
-        >
-          vue-router
-        </a>
-      </li>
-      <li>
-        <a
-          href="http://vuex.vuejs.org/"
-          target="_blank"
-        >
-          vuex
-        </a>
-      </li>
-      <li>
-        <a
-          href="http://vue-loader.vuejs.org/"
-          target="_blank"
-        >
-          vue-loader
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/awesome-vue"
-          target="_blank"
-        >
-          awesome-vue
-        </a>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  data () {
-    return {
-      msg: 'Welcome to Your Vue.js App'
-    }
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h1, h2 {
-  font-weight: normal;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/LeftToolBtn.vue

@@ -11,6 +11,7 @@
 </template>
 
 <script>
+import {mapActions} from 'vuex'
 export default {
   props: {
     btn: {
@@ -19,24 +20,20 @@ export default {
     }
   },
   methods: {
+    ...mapActions([
+      'toggle_isDragging'
+    ]),
     clickBtn: function (type) {
       this.$emit('selectedBtn', type)
     },
     dragstart: function (event, item) {
       this.clickBtn(item)
-      var state = {
-        key: 'isDragging',
-        value: true
-      }
-      this.$emit('changeState', state)
+      this.toggle_isDragging(true)
       event.dataTransfer.setData('item', JSON.stringify(item))
     },
     dragend: function (event) {
-      var state = {
-        key: 'isDragging',
-        value: false
-      }
-      this.$emit('changeState', state)
+      // this.toggle_isDragging(false)
+      this.$store.dispatch('toggle_isDragging', false)
       event.dataTransfer.clearData()
     }
   }

src/data/btns.json

@@ -0,0 +1,11 @@
+[
+  {"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}
+]

src/main.js

@@ -13,6 +13,7 @@ import '@/styles/index.scss' // global css
 
 import App from './App'
 import router from './router'
+import store from './store'
 
 Vue.config.productionTip = false
 Vue.use(ElementUI)
@@ -21,6 +22,7 @@ Vue.use(ElementUI)
 new Vue({
   el: '#app',
   router,
+  store,
   components: { App },
   template: '<App/>'
 })

src/router/index.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import HelloWorld from '@/components/HelloWorld'
+import FlowChart from '@/views/FlowChart'
 
 Vue.use(Router)
 
@@ -8,8 +8,8 @@ export default new Router({
   routes: [
     {
       path: '/',
-      name: 'HelloWorld',
-      component: HelloWorld
+      name: 'FlowChart',
+      component: FlowChart
     }
   ]
 })

src/store/getters.js

@@ -0,0 +1,4 @@
+const getters = {
+  graphState: state => state.graph.graphState
+}
+export default getters

src/store/index.js

@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import graph from './modules/graph'
+import getters from './getters'
+
+Vue.use(Vuex)
+
+const store = new Vuex.Store({
+  modules: {
+    graph
+  },
+  getters
+})
+
+export default store

src/store/modules/graph.js

@@ -0,0 +1,42 @@
+const graph = {
+  state: {
+    graphState: {
+      selectedNode: null,
+      selectedEdge: null,
+      isDragging: false,
+      toLink: false
+    }
+  },
+  mutations: {
+    CHANGE_SELECTEDNODE: (state, node) => {
+      state.graphState.selectedNode = node
+    },
+    CHANGE_SELECTEDEDGE: (state, edge) => {
+      state.graphState.selectedEdge = edge
+    },
+    TOGGLE_ISDRAGGING: (state, isDragging) => {
+      state.graphState.isDragging = isDragging
+    },
+    TOGGLE_TOLINK: (state, toLink) => {
+      state.graphState.toLink = toLink
+    }
+  },
+  actions: {
+    changSelectedNode ({commit}, node) {
+      commit('CHANGE_SELECTEDNODE', node)
+      commit('CHANGE_SELECTEDEDGE', null)
+    },
+    changSelectedEdge ({commit}, edge) {
+      commit('CHANGE_SELECTEDEDGE', edge)
+      commit('CHANGE_SELECTEDNODE', null)
+    },
+    toggle_isDragging ({commit}, isDragging) {
+      commit('TOGGLE_ISDRAGGING', isDragging)
+    },
+    toggle_toLink ({commit}, toLink) {
+      commit('TOGGLE_TOLINK', toLink)
+    }
+  }
+}
+
+export default graph

src/components/FlowChart.vue → src/views/FlowChart.vue

@@ -10,7 +10,6 @@
             :key="btn.value"
             :btn="btn"
             @selectedBtn="selectedBtn"
-            @changeState="changeState"
           ></li>
         </ul>
       </div>
@@ -18,23 +17,26 @@
         <Graph
           :nodes="nodes"
           :edges="edges"
-          :state="state"
           @activeSelectBtn="activeSelectBtn"
         ></Graph>
-        <GraphProp :state="state"></GraphProp>
+        <GraphProp></GraphProp>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import Tools from './Tools'
-import LeftToolBtn from './LeftToolBtn'
-import Graph from './Graph'
-import GraphProp from './GraphProp'
+import {mapGetters, mapActions} from 'vuex'
+
+import Tools from '@/components/Tools'
+import LeftToolBtn from '@/components/LeftToolBtn'
+import Graph from '@/components/Graph'
+import GraphProp from '@/components/GraphProp'
 
 import UUID from '@/utils/createUniqueString'
 
+import btnsData from '@/data/btns.json'
+
 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}
@@ -46,25 +48,9 @@ var testEdges = [
 export default {
   data () {
     return {
-      btns: [
-        {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}
-      ],
+      btns: btnsData,
       nodes: testNodes,
-      edges: testEdges,
-      state: {
-        selectedNode: null,
-        selectedEdge: null,
-        isDragging: false,
-        toLink: false
-      }
+      edges: testEdges
     }
   },
   components: {
@@ -73,20 +59,25 @@ export default {
     Graph,
     GraphProp
   },
+  computed: {
+    ...mapGetters([
+      'graphState'
+    ])
+  },
   methods: {
+    ...mapActions([
+      'toggle_toLink'
+    ]),
     selectedBtn: function (btn) {
       this.btns.map(item => {
         item.active = false
       })
       btn.active = !btn.active
-      var state = {
-        key: 'toLink',
-        value: false
-      }
+      var toLink = false
       switch (btn.value) {
         case 'line':
         case 'polyline':
-          state.value = true
+          toLink = true
           break
         case 'addStartEnd':
           this.addStartAndEnd()
@@ -94,7 +85,8 @@ export default {
         default:
           break
       }
-      this.changeState(state)
+      // this.graphState.toLink = toLink
+      this.$store.dispatch('toggle_toLink', toLink)
     },
     addStartAndEnd: function () {
       this.nodesNoOutput().forEach(node => {
@@ -152,9 +144,6 @@ export default {
         })
       })
     },
-    changeState: function (state) {
-      this.state[state.key] = state.value
-    },
     activeSelectBtn: function () {
       this.btns.forEach(btn => {
         if (btn.value === 'select') {
@@ -163,7 +152,8 @@ export default {
           btn.active = false
         }
       })
-      this.state.toLink = false
+      // this.state.toLink = false
+      this.$store.dispatch('toggle_toLink', false)
     }
   }
 }