feat(editor): support undo-redo && first version

ly525
1 parent ffebb06b
Showing 7 changed files with 94 additions and 2 deletions
front-end/h5/src/components/core/editor/canvas/edit.js
front-end/h5/src/components/core/editor/index.js
front-end/h5/src/components/core/support/shape.js
front-end/h5/src/store/index.js
front-end/h5/src/store/modules/element.js
front-end/h5/src/store/plugins/undo-redo/History.js
front-end/h5/src/store/plugins/undo-redo/index.js
@@ -45,6 +45,7 @@ export default {
       'setEditingElement', // -> this.foo()
       'setElementPosition', // -> this.foo()
       'setElementShape', // -> this.foo()
+      'recordElementRect', // -> this.foo()
       'elementManager'
     ]),
     // TODO #!zh: 优化代码
@@ -196,6 +197,12 @@ export default {
                     this.setElementPosition(pos)
                   }}
                   handleElementMoveProp={this.handleElementMove}
+                  handleElementMouseUpProp={() => {
+                    this.recordElementRect()
+                  }}
+                  handlePointMouseUpProp={() => {
+                    this.recordElementRect()
+                  }}
                 >
                   {h(element.name, data)}
                 </Shape>
 import Vue from 'vue'
 import { mapState, mapActions } from 'vuex'
 // import Element from '../models/element'
+import undoRedoHistory from '../../../store/plugins/undo-redo/History'
  
 import '../styles/index.scss'
  
@@ -79,6 +80,12 @@ export default {
             defaultSelectedKeys={['2']}
             style={{ lineHeight: '64px', float: 'right', background: 'transparent' }}
           >
+            <a-menu-item key="4" class="transparent-bg">
+              <a-button-group>
+                <a-button class="transparent-bg" style={{ color: 'white' }} type="dashed" size="small" onClick={() => undoRedoHistory.undo()}><i class={['shortcut-icon', 'fa', `fa-mail-reply`]} aria-hidden='true'/> 撤销</a-button>
+                <a-button class="transparent-bg" style={{ color: 'white' }} type="dashed" size="small" onClick={() => undoRedoHistory.redo()}><i class={['shortcut-icon', 'fa', `fa-mail-forward`]} aria-hidden='true'/> 重做</a-button>
+              </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="3" class="transparent-bg"><a-button size="small">发布</a-button></a-menu-item>
@@ -13,7 +13,7 @@ const directionKey = {
 const points = ['lt', 'rt', 'lb', 'rb', 'l', 'r', 't', 'b']
  
 export default {
-  props: ['defaultPosition', 'active', 'handleMousedownProp', 'handleElementMoveProp', 'handlePointMoveProp'],
+  props: ['defaultPosition', 'active', 'handleMousedownProp', 'handleElementMoveProp', 'handlePointMoveProp', 'handleElementMouseUpProp', 'handlePointMouseUpProp'],
   computed: {
     position () {
       return { ...this.defaultPosition }
 import Vue from 'vue'
 import Vuex from 'vuex'
+import undoRedoPlugin from './plugins/undo-redo/index'
 import editor from './modules/editor'
 import user from './modules/user'
 import visible from './modules/visible'
@@ -24,5 +25,6 @@ export default new Vuex.Store({
     visible,
     loading,
     element
-  }
+  },
+  plugins: [undoRedoPlugin]
 })
@@ -22,6 +22,9 @@ const actions = {
   setElementShape ({ commit }, payload) {
     commit('setElementCommonStyle', payload)
   },
+  recordElementRect ({ commit }, payload = {}) {
+    commit('recordRect', payload)
+  },
   elementManager ({ commit }, payload) {
     commit('elementManager', payload)
   }
@@ -58,6 +61,9 @@ const mutations = {
         break
       default:
     }
+  },
+  recordRect (state, { type, value }) {
+
   }
 }
  
+import { cloneDeep } from 'lodash'
+
+class UndoRedoHistory {
+    store;
+    history = [];
+    currentIndex = -1;
+
+    get canUndo () {
+      return this.currentIndex > 0
+    }
+
+    get canRedo () {
+      return this.history.length > this.currentIndex + 1
+    }
+
+    init (store) {
+      this.store = store
+    }
+
+    addState (state) {
+      // may be we have to remove redo steps
+      if (this.currentIndex + 1 < this.history.length) {
+        this.history.splice(this.currentIndex + 1)
+      }
+      this.history.push(state)
+      this.currentIndex++
+    }
+
+    undo () {
+      if (!this.canUndo) return
+      const prevState = this.history[this.currentIndex - 1]
+      // take a copy of the history state
+      // because it would be changed during store mutations
+      // what would corrupt the undo-redo-history
+      // (same on redo)
+      this.store.replaceState(cloneDeep(prevState))
+      this.currentIndex--
+    }
+
+    redo () {
+      if (!this.canRedo) return
+      const nextState = this.history[this.currentIndex + 1]
+      this.store.replaceState(cloneDeep(nextState))
+      this.currentIndex++
+    }
+}
+
+const undoRedoHistory = new UndoRedoHistory()
+
+export default undoRedoHistory
+
+import { cloneDeep } from 'lodash'
+import undoRedoHistory from './History'
+const unRecordHistoryMutationTypes = ['element/setElementCommonStyle']
+
+const undoRedoPlugin = (store) => {
+  // initialize and save the starting stage
+  undoRedoHistory.init(store)
+  let firstState = cloneDeep(store.state)
+  undoRedoHistory.addState(firstState)
+
+  store.subscribe((mutation, state) => {
+    const { type } = mutation
+    if (unRecordHistoryMutationTypes.includes(type)) return
+    // is called AFTER every mutation
+    undoRedoHistory.addState(cloneDeep(state))
+  })
+}
+
+export default undoRedoPlugin