use vuex to manage the state of editor

ly525
1 parent b751aa6d
Showing 12 changed files with 125 additions and 109 deletions
front-end/h5/src/components/core/editor/canvas/edit.js
front-end/h5/src/components/core/editor/edit-panel/action.js
front-end/h5/src/components/core/editor/edit-panel/props.js
front-end/h5/src/components/core/editor/edit-panel/script.js
front-end/h5/src/components/core/editor/index.js
front-end/h5/src/components/core/models/work.js
front-end/h5/src/components/core/styles/index.scss
front-end/h5/src/store/index.js
front-end/h5/src/store/modules/editor.js
front-end/h5/src/store/modules/element.js
front-end/h5/src/store/modules/page.js
front-end/h5/src/store/modules/work.js
@@ -36,16 +36,14 @@ export default {
     contextmenuPos: []
   }),
   computed: {
-    ...mapState('element', {
-      editingElement: state => state.editingElement
-    })
+    ...mapState('editor', ['editingElement'])
   },
   methods: {
-    ...mapActions('element', [
-      'setEditingElement', // -> this.foo()
-      'setElementPosition', // -> this.foo()
-      'setElementShape', // -> this.foo()
-      'recordElementRect', // -> this.foo()
+    ...mapActions('editor', [
+      'setEditingElement',
+      'setElementPosition',
+      'setElementShape',
+      'recordElementRect',
       'elementManager'
     ]),
     // TODO #!zh: 优化代码
@@ -4,13 +4,13 @@ export default {
   data: () => ({
   }),
   computed: {
-    ...mapState('element', {
-      editingElement: state => state.editingElement
-    })
+    ...mapState('editor', [
+      'editingElement'
+    ])
   },
   methods: {
-    ...mapActions('element', [
-      'setEditingElement' // -> this.foo()
+    ...mapActions('editor', [
+      'setEditingElement'
     ])
   },
   created () {},
@@ -2,13 +2,11 @@ import { mapState, mapActions } from &#39;vuex&#39;
  
 export default {
   computed: {
-    ...mapState('element', {
-      editingElement: state => state.editingElement
-    })
+    ...mapState('editor', ['editingElement'])
   },
   methods: {
-    ...mapActions('element', [
-      'setEditingElement' // -> this.foo()
+    ...mapActions('editor', [
+      'setEditingElement'
     ]),
     /**
      * 将插件属性的 自定义增强编辑器注入 属性编辑面板中
@@ -32,13 +32,13 @@ export default {
     }`
   }),
   computed: {
-    ...mapState('element', {
-      editingElement: state => state.editingElement
-    })
+    ...mapState('editor', [
+      'editingElement'
+    ])
   },
   methods: {
-    ...mapActions('element', [
-      'setEditingElement' // -> this.foo()
+    ...mapActions('editor', [
+      'setEditingElement'
     ]),
     mixinScript () {
       // TODO mixin script
@@ -34,20 +34,21 @@ export default {
   components: {},
   data: () => ({
     activeMenuKey: 'pluginList',
-    pages: [],
-    // elements: [],
     isPreviewMode: false,
     activeTabKey: '属性'
   }),
   computed: {
-    ...mapState('element', {
+    ...mapState('editor', {
       editingElement: state => state.editingElement,
-      elements: state => state.elementsOfCurrentPage
+      elements: state => state.editingPage.elements,
+      pages: state => state.work.pages
     })
   },
   methods: {
-    ...mapActions('element', [
-      'elementManager'
+    ...mapActions('editor', [
+      'elementManager',
+      'saveWork',
+      'createWork'
     ]),
     getEditorConfig (pluginName) {
       // const pluginCtor = Vue.options[pluginName]
@@ -90,7 +91,7 @@ export default {
               </a-button-group>
             </a-menu-item>
             <a-menu-item key="1" class="transparent-bg"><a-button type="primary" size="small">预览</a-button></a-menu-item>
-            <a-menu-item key="2" class="transparent-bg"><a-button size="small">保存</a-button></a-menu-item>
+            <a-menu-item key="2" class="transparent-bg"><a-button size="small" onClick={() => this.saveWork()}>保存</a-button></a-menu-item>
             <a-menu-item key="3" class="transparent-bg"><a-button size="small">发布</a-button></a-menu-item>
           </a-menu>
         </a-layout-header>
@@ -167,5 +168,13 @@ export default {
         </a-layout>
       </a-layout>
     )
+  },
+  created () {
+    let workId = this.$route.query.workId
+    if (workId) {
+      // this.$store.dispatch('getWorkById', workId)
+    } else {
+      this.createWork()
+    }
   }
 }
+class Work {
+  constructor (work = {}) {
+    this.title = work.title || '标题'
+    this.description = work.description || '描述'
+    this.pages = work.pages || []
+    this.type = work.type || 'h5'
+
+    this.id = this.id
+    this.key = this.key
+    this.cover_image_url = ''
+    this.project_id = 1
+    this.is_publish = false
+    this.create_time = new Date()
+    this.update_time = new Date()
+  }
+}
+
+export default Work
@@ -67,6 +67,20 @@
       margin-bottom: 12px;
     }
   }
+
+  .page-manager-container {
+    margin-top: 16px;
+    .page-button {
+      padding: 18px 8px;
+      border-bottom: 1px solid #ebeef5;
+      box-sizing: border-box;
+      cursor: pointer;
+    }
+    .active-page {
+      color: #2981fa;
+    }
+
+  }
 }
  
  
@@ -5,7 +5,6 @@ import editor from &#39;./modules/editor&#39;
 import user from './modules/user'
 import visible from './modules/visible'
 import loading from './modules/loading'
-import element from './modules/element'
  
 Vue.use(Vuex)
  
@@ -23,8 +22,7 @@ export default new Vuex.Store({
     editor,
     user,
     visible,
-    loading,
-    element
+    loading
   },
   plugins: [undoRedoPlugin]
 })
 // initial state
-const state = {
+import Work from '../../components/core/models/work'
+import { actions as pageActions, mutations as pageMutations } from './page'
+import { actions as elementActions, mutations as elementMutations } from './element'
+import { actions as workActions, mutations as workMutations } from './work'
  
+const state = {
+  work: new Work(),
+  editingPage: { elements: [] },
+  editingElement: null
 }
  
 // getters
-const getters = {
-
-}
+const getters = {}
  
 // actions
 const actions = {
-
+  ...elementActions,
+  ...pageActions,
+  ...workActions,
+  createWork ({ commit }, payload) {
+    commit('createWork')
+    commit('pageManager', { type: 'add' })
+    commit('setEditingPage')
+  }
 }
  
 // mutations
 const mutations = {
-
+  ...elementMutations,
+  ...pageMutations,
+  ...workMutations
 }
  
 export default {
-// initial state
 import Element from '../../components/core/models/element'
  
-const state = {
-  editingElement: null,
-  elementsOfCurrentPage: []
-}
-
-// getters
-const getters = {
-
-}
-
 // actions
-const actions = {
+export const actions = {
   setEditingElement ({ commit }, payload) {
     commit('setEditingElement', payload)
   },
@@ -31,7 +20,7 @@ const actions = {
 }
  
 // mutations
-const mutations = {
+export const mutations = {
   setEditingElement (state, payload) {
     state.editingElement = payload
   },
@@ -45,18 +34,18 @@ const mutations = {
     switch (type) {
       case 'add':
         const element = new Element(value)
-        state.elementsOfCurrentPage.push(element)
+        state.editingPage.elements.push(element)
         break
       case 'copy':
-        state.elementsOfCurrentPage.push(state.editingElement.clone())
+        state.editingPage.elements.push(state.editingElement.clone())
         break
       case 'delete':
-        const { elementsOfCurrentPage, editingElement } = state
-        let index = elementsOfCurrentPage.findIndex(e => e.uuid === editingElement.uuid)
+        const { editingPage, editingElement } = state
+        let index = editingPage.elements.findIndex(e => e.uuid === editingElement.uuid)
         if (index !== -1) {
-          let newElements = elementsOfCurrentPage.slice()
+          let newElements = editingPage.elements.slice()
           newElements.splice(index, 1)
-          state.elementsOfCurrentPage = newElements
+          state.editingPage.elements = newElements
         }
         break
       default:
@@ -66,11 +55,3 @@ const mutations = {
  
   }
 }
-
-export default {
-  namespaced: true,
-  state,
-  getters,
-  actions,
-  mutations
-}
-// initial state
 import Page from '../../components/core/models/page'
  
-const state = {
-  editingPage: { pages: [] },
-  pagesOfCurrentWork: []
-}
-
-// getters
-const getters = {
-
-}
-
 // actions
-const actions = {
-  setEditing ({ commit }, payload) {
+export const actions = {
+  setEditingPage ({ commit }, payload) {
     commit('setEditing', payload)
   },
-  manager ({ commit }, payload) {
+  pageManager ({ commit }, payload) {
     commit('manager', payload)
   }
 }
  
 // mutations
-const mutations = {
-  setEditing (state, payload) {
-    state.editing = payload
+export const mutations = {
+  setEditingPage (state, payload) {
+    payload = payload || state.work.pages[0]
+    state.editingPage = payload
   },
-  manager (state, { type, value }) {
+  pageManager (state, { type, value }) {
     switch (type) {
       case 'add':
         const page = new Page(value)
-        state.pagesOfCurrentWork.push(page)
+        state.work.pages.push(page)
         break
       case 'copy':
-        state.pagesOfCurrentWork.push(state.editing.clone())
+        state.work.pages.push(state.editing.clone())
         break
       case 'delete':
         const { pagesOfCurrentWork, editing } = state
@@ -41,18 +31,10 @@ const mutations = {
         if (index !== -1) {
           let newPages = pagesOfCurrentWork.slice()
           newPages.splice(index, 1)
-          state.pagesOfCurrentWork = newPages
+          state.work.pages = newPages
         }
         break
       default:
     }
   }
 }
-
-export default {
-  namespaced: true,
-  state,
-  getters,
-  actions,
-  mutations
-}
-class Work {
-  constructor (work = {}) {
-    this.title = work.title || '标题'
-    this.description = work.description || '描述'
-    this.pages = work.pages || []
-    this.type = work.type || 'h5'
-    this.work = work
+import Work from '../../components/core/models/work'
  
-    this.id = this.id
-    this.coverImageUrl = ''
-    this.projectId = 1
-    this.isPublish = false
-    this.createTime = +new Date()
-    this.updateTime = +new Date()
+export const actions = {
+  previewWork ({ commit }, payload = {}) {
+    commit('previewWork', payload)
+  },
+  deployWork ({ commit }, payload = {}) {
+    commit('previewWork', payload)
+  },
+  saveWork ({ commit, state }, payload = {}) {
+    // save work with api
   }
 }
  
-export default Work
+// mutations
+export const mutations = {
+  createWork (state) {
+    state.work = new Work()
+  },
+  previewWork (state, { type, value }) {},
+  deployWork (state, { type, value }) {}
+}