resolve conflict

package-lock.json

@@ -11930,9 +11930,15 @@
       "dev": true
     },
     "vuex": {
+<<<<<<< HEAD
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.1.tgz",
       "integrity": "sha512-ER5moSbLZuNSMBFnEBVGhQ1uCBNJslH9W/Dw2W7GZN23UQA69uapP5GTT9Vm8Trc0PzBSVt6LzF3hGjmv41xcg=="
+=======
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.0.1.tgz",
+      "integrity": "sha512-wLoqz0B7DSZtgbWL1ShIBBCjv22GV5U+vcBFox658g6V0s4wZV9P4YjCNyoHSyIBpj1f29JBoNQIqD82cR4O3w=="
+>>>>>>> cfc8453d6b8faae303df5e1177a090a5810f3eee
     },
     "watchpack": {
       "version": "1.6.0",

package.json

@@ -20,7 +20,11 @@
     "sass-loader": "^7.1.0",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1",
+<<<<<<< HEAD
     "vuex": "^3.1.1"
+=======
+    "vuex": "^3.0.1"
+>>>>>>> cfc8453d6b8faae303df5e1177a090a5810f3eee
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",

src/App.vue

@@ -1,13 +1,19 @@
 <template>
   <div id="app">
+<<<<<<< HEAD
     <router-view></router-view>
+=======
+    <router-view/>
+>>>>>>> cfc8453d6b8faae303df5e1177a090a5810f3eee
   </div>
 </template>
 
 <script>
+<<<<<<< HEAD
 
+=======
+export default{
+  name: 'App'
+}
+>>>>>>> cfc8453d6b8faae303df5e1177a090a5810f3eee
 </script>
-
-<style>
-
-</style>

src/components/Graph.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="container">
+<<<<<<< HEAD
     <div
+=======
+    <div :class="['graph', {active: graphState.isDragging}]"
+>>>>>>> cfc8453d6b8faae303df5e1177a090a5810f3eee
       @drop="addNode"
       @dragover.prevent
       :class="['graph', {active: state.isDragging}]"
@@ -34,6 +38,7 @@
             ></path>
           </g>
           <g>
+<<<<<<< HEAD
             <g
               v-for="node in nodes"
               :key="node.id"
@@ -41,6 +46,14 @@
               :transform="'translate('+node.x+','+node.y+')'"
               @mousedown="nodeMousedown(node)"
               @mouseup="nodeMouseup(node)"
+=======
+            <g v-for="node in nodes"
+               :key="node.id"
+               :class="['conceptG', {selected: node.selected, toLink: graphState.toLink}]"
+               :transform="'translate('+node.x+','+node.y+')'"
+               @mousedown="nodeMousedown(node)"
+               @mouseup="nodeMouseup(node)"
+>>>>>>> cfc8453d6b8faae303df5e1177a090a5810f3eee
             >
               <circle :r="node.r"></circle>
               <text text-anchor="middle">
@@ -56,8 +69,12 @@
 </template>
 
 <script>
+<<<<<<< HEAD
 import { mapState } from 'vuex'
 
+=======
+import {mapGetters, mapActions} from 'vuex'
+>>>>>>> cfc8453d6b8faae303df5e1177a090a5810f3eee
 import RightMenu from './RightMenu'
 
 var nodeId = 3
@@ -75,6 +92,7 @@ export default {
     }
   },
   computed: {
+<<<<<<< HEAD
     ...mapState({
       nodes: state => state.flowchart.nodes,
       edges: state => state.flowchart.edges
@@ -83,6 +101,19 @@ export default {
   props: {
     state: {
       type: Object,
+=======
+    ...mapGetters([
+      'graphState'
+    ])
+  },
+  props: {
+    nodes: {
+      type: Array,
+      require: true
+    },
+    edges: {
+      type: Array,
+>>>>>>> cfc8453d6b8faae303df5e1177a090a5810f3eee
       require: true
     }
   },
@@ -90,6 +121,10 @@ export default {
     RightMenu
   },
   methods: {
+    ...mapActions([
+      'changSelectedNode',
+      'changSelectedEdge'
+    ]),
     edgeData: function (edge) {
       const source = edge.source
       const target = edge.target
@@ -112,25 +147,35 @@ export default {
       this.nodes.forEach(node => {
         node.selected = false
       })
+<<<<<<< HEAD
       this.$store.commit('SET_SELECTED_NODE', null)
+=======
+>>>>>>> cfc8453d6b8faae303df5e1177a090a5810f3eee
     },
     unSelectedEdges: function () {
       this.edges.forEach(edge => {
         edge.selected = false
       })
+<<<<<<< HEAD
       this.$store.commit('SET_SELECTED_EDGE', null)
+=======
+>>>>>>> cfc8453d6b8faae303df5e1177a090a5810f3eee
     },
     unSelectedAll: function () {
       this.unSelectedNodes()
       this.unSelectedEdges()
     },
     nodeMousedown: function (node) {
-      var state = this.state
       this.unSelectedAll()
       node.selected = true
+<<<<<<< HEAD
       this.$store.commit('SET_SELECTED_NODE', node)
+=======
+      this.changSelectedNode(node)
+      // this.$store.dispatch('changSelectedNode', node)
+>>>>>>> cfc8453d6b8faae303df5e1177a090a5810f3eee
       this.mousedownNode = node
-      if (state.toLink) {
+      if (this.graphState.toLink) {
         this.isLinking = true
         this.justDrag = false
       }
@@ -188,7 +233,12 @@ export default {
     clickEdge: function (edge) {
       this.unSelectedAll()
       edge.selected = true
+<<<<<<< HEAD
       this.$store.commit('SET_SELECTED_EDGE', edge)
+=======
+      this.changSelectedEdge(edge)
+      // this.$store.dispatch('changSelectedEdge', edge)
+>>>>>>> cfc8453d6b8faae303df5e1177a090a5810f3eee
     }
   }
 }

src/components/GraphProp.vue

@@ -13,15 +13,13 @@
 </template>
 
 <script>
+<<<<<<< HEAD
 import { mapState } from 'vuex'
 
+=======
+import {mapGetters} from 'vuex'
+>>>>>>> cfc8453d6b8faae303df5e1177a090a5810f3eee
 export default {
-  props: {
-    state: {
-      type: Object,
-      require: true
-    }
-  },
   data () {
     return {
       showProp: {
@@ -31,10 +29,16 @@ export default {
     }
   },
   computed: {
+<<<<<<< HEAD
     ...mapState({
       selectedNode: state => state.flowchart.selectedNode,
       selectedEdge: state => state.flowchart.selectedEdge
     })
+=======
+    ...mapGetters([
+      'graphState'
+    ])
+>>>>>>> cfc8453d6b8faae303df5e1177a090a5810f3eee
   },
   methods: {
     showSelectedProp: function (type, data) {
@@ -48,13 +52,21 @@ export default {
     }
   },
   watch: {
+<<<<<<< HEAD
     'selectedNode': function (curr, old) {
+=======
+    'graphState.selectedNode': function (curr, old) {
+>>>>>>> cfc8453d6b8faae303df5e1177a090a5810f3eee
       if (!curr) {
         return false
       }
       this.showSelectedProp('node', curr)
     },
+<<<<<<< HEAD
     'selectedEdge': function (curr, old) {
+=======
+    'graphState.selectedEdge': function (curr, old) {
+>>>>>>> cfc8453d6b8faae303df5e1177a090a5810f3eee
       if (!curr) {
         return false
       }

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/router/index.js

@@ -1,5 +1,9 @@
 import Vue from 'vue'
 import Router from 'vue-router'
+<<<<<<< HEAD
+=======
+import FlowChart from '@/views/FlowChart'
+>>>>>>> cfc8453d6b8faae303df5e1177a090a5810f3eee
 
 Vue.use(Router)
 
@@ -7,9 +11,14 @@ export default new Router({
   routes: [
     {
       path: '/',
+<<<<<<< HEAD
       name: 'home',
       component: () => import('@/views/home'),
       meta: { title: '流程图demo' }
+=======
+      name: 'FlowChart',
+      component: FlowChart
+>>>>>>> cfc8453d6b8faae303df5e1177a090a5810f3eee
     }
   ]
 })

src/store/getters.js

@@ -1,4 +1,8 @@
 const getters = {
+<<<<<<< HEAD
   // token: state => state.user.token
+=======
+  graphState: state => state.graph.graphState
+>>>>>>> cfc8453d6b8faae303df5e1177a090a5810f3eee
 }
 export default getters

src/store/index.js

@@ -1,13 +1,22 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
+<<<<<<< HEAD
 import getters from './getters'
 import flowchart from './modules/flowchart'
+=======
+import graph from './modules/graph'
+import getters from './getters'
+>>>>>>> cfc8453d6b8faae303df5e1177a090a5810f3eee
 
 Vue.use(Vuex)
 
 const store = new Vuex.Store({
   modules: {
+<<<<<<< HEAD
     flowchart
+=======
+    graph
+>>>>>>> cfc8453d6b8faae303df5e1177a090a5810f3eee
   },
   getters
 })

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,22 +10,27 @@
             :key="btn.value"
             :btn="btn"
             @selectedBtn="selectedBtn"
-            @changeState="changeState"
           ></li>
         </ul>
       </div>
       <div class="graph-container">
         <Graph
+<<<<<<< HEAD:src/components/FlowChart.vue
           :state="state"
+=======
+          :nodes="nodes"
+          :edges="edges"
+>>>>>>> cfc8453d6b8faae303df5e1177a090a5810f3eee:src/views/FlowChart.vue
           @activeSelectBtn="activeSelectBtn"
         ></Graph>
-        <GraphProp :state="state"></GraphProp>
+        <GraphProp></GraphProp>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+<<<<<<< HEAD:src/components/FlowChart.vue
 import { mapState } from 'vuex'
 
 import Tools from './Tools'
@@ -42,6 +47,33 @@ export default {
         isDragging: false,
         toLink: false
       }
+=======
+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}
+]
+var testEdges = [
+  {id: 1, source: testNodes[0], target: testNodes[1], selected: false}
+]
+
+export default {
+  data () {
+    return {
+      btns: btnsData,
+      nodes: testNodes,
+      edges: testEdges
+>>>>>>> cfc8453d6b8faae303df5e1177a090a5810f3eee:src/views/FlowChart.vue
     }
   },
   computed: {
@@ -57,20 +89,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()
@@ -78,7 +115,8 @@ export default {
         default:
           break
       }
-      this.changeState(state)
+      // this.graphState.toLink = toLink
+      this.$store.dispatch('toggle_toLink', toLink)
     },
     addStartAndEnd: function () {
       this.nodesNoOutput().forEach(node => {
@@ -137,9 +175,6 @@ export default {
         })
       })
     },
-    changeState: function (state) {
-      this.state[state.key] = state.value
-    },
     activeSelectBtn: function () {
       this.btns.forEach(btn => {
         if (btn.value === 'select') {
@@ -148,7 +183,8 @@ export default {
           btn.active = false
         }
       })
-      this.state.toLink = false
+      // this.state.toLink = false
+      this.$store.dispatch('toggle_toLink', false)
     }
   }
 }