fix: change element zindex on edit canvas

Author: ly525

front-end/h5/src/components/core/editor/canvas/edit.js

@@ -12,11 +12,11 @@ const contextmenuOptions = [
   },
   {
     label: '置顶',
-    value: 'bring2Top'
+    value: 'move2Top'
   },
   {
     label: '置底',
-    value: 'bring2Bottom'
+    value: 'move2Bottom'
   },
   {
     label: '上移',
@@ -203,6 +203,7 @@ export default {
                   }}
                 >
                   {h(element.name, data)}
+                  {element.commonStyle.zindex}
                 </Shape>
               )
             })

front-end/h5/src/components/core/models/element.js

@@ -28,7 +28,12 @@ class Element {
      *    element.pluginProps 和 elementcommonStyle 是引用类型，如果不做 deep_clone 可能会出现意外错误
      */
     this.pluginProps = (typeof ele.pluginProps === 'object' && clone(ele.pluginProps)) || this.getDefaultPluginProps(ele.editorConfig || {})
-    this.commonStyle = (typeof ele.commonStyle === 'object' && clone(ele.commonStyle)) || this.getDefaultCommonStyle()
+    const commonStyle = (typeof ele.commonStyle === 'object' && clone(ele.commonStyle)) || this.getDefaultCommonStyle()
+    this.commonStyle = {
+      ...commonStyle,
+      zindex: ele.zindex
+    }
+
     this.events = []
   }
 
@@ -76,8 +81,9 @@ class Element {
 
   }
 
-  clone () {
+  clone ({ zindex }) {
     return new Element({
+      zindex,
       name: this.name,
       pluginProps: this.pluginProps,
       commonStyle: {

front-end/h5/src/store/modules/element.js

@@ -1,5 +1,5 @@
 import Element from '../../components/core/models/element'
-import { getEditorConfigForEditingElement } from '../../utils/element'
+import { getEditorConfigForEditingElement, swapZindex } from '../../utils/element'
 
 // actions
 export const actions = {
@@ -38,23 +38,54 @@ export const mutations = {
     }
   },
   elementManager (state, { type, value }) {
+    const { editingPage, editingElement } = state
+    const elements = editingPage.elements
+    const len = elements.length
+
     switch (type) {
       case 'add':
+        value = {
+          ...value,
+          zindex: len + 1
+        }
         const element = new Element(value)
-        state.editingPage.elements.push(element)
+        elements.push(element)
         break
       case 'copy':
-        state.editingPage.elements.push(state.editingElement.clone())
+        elements.push(state.editingElement.clone())
         break
       case 'delete':
-        const { editingPage, editingElement } = state
-        let index = editingPage.elements.findIndex(e => e.uuid === editingElement.uuid)
-        if (index !== -1) {
-          let newElements = editingPage.elements.slice()
-          newElements.splice(index, 1)
+        {
+          const index = elements.findIndex(e => e.uuid === editingElement.uuid)
+          if (index !== -1) {
+            let newElements = elements.slice()
+            newElements.splice(index, 1)
+            state.editingPage.elements = newElements
+          }
+        }
+        break
+      case 'move2Top':
+      case 'move2Bottom':
+        {
+          const index = elements.findIndex(e => e.uuid === editingElement.uuid)
+          elements.splice(index, 1)
+          const newElements = type === 'move2Top' ? [...elements, editingElement] : [editingElement, ...elements]
+          newElements.forEach((ele, i, arr) => {
+            ele.commonStyle.zindex = i + 1
+          })
           state.editingPage.elements = newElements
         }
         break
+      case 'addZindex':
+      case 'minusZindex':
+        const maxZindex = elements.length
+        const eleZindex = editingElement.commonStyle.zindex
+        if (eleZindex === maxZindex || eleZindex === 1) return
+
+        const flag = type === 'addZindex' ? 1 : -1
+        const swapElement = elements.find(ele => ele.commonStyle.zindex === eleZindex + flag * 1)
+        swapZindex(editingElement, swapElement)
+        break
       default:
     }
   },

front-end/h5/src/utils/element.js

@@ -5,3 +5,10 @@ export function getEditorConfigForEditingElement (elementName) {
   // TODO 为何直接 return new Ctor() 并将其赋值给 vuex 的 state 会报错：Cannot convert a Symbol value to a string
   return new Ctor().$options.editorConfig
 }
+
+const styleKey = 'commonStyle'
+export function swapZindex (x, y) {
+  const tmp = y[styleKey].zindex
+  y[styleKey].zindex = x[styleKey].zindex
+  x[styleKey].zindex = tmp
+}