feat: support copy plugin on canvas

Author: ly525

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

@@ -1,6 +1,33 @@
 import { mapState, mapActions } from 'vuex'
 import Shape from '../../support/shape'
 
+const contextmenuOptions = [
+  {
+    label: '复制',
+    value: 'copy'
+  },
+  {
+    label: '删除',
+    value: 'delete'
+  },
+  {
+    label: '置顶',
+    value: 'bring2Top'
+  },
+  {
+    label: '置底',
+    value: 'bring2Bottom'
+  },
+  {
+    label: '上移',
+    value: 'addZindex'
+  },
+  {
+    label: '下移',
+    value: 'minusZindex'
+  }
+]
+
 export default {
   props: ['elements', 'handleClickElementProp', 'handleClickCanvasProp'],
   data: () => ({
@@ -17,7 +44,8 @@ export default {
     ...mapActions('element', [
       'setEditingElement', // -> this.foo()
       'setElementPosition', // -> this.foo()
-      'setElementShape' // -> this.foo()
+      'setElementShape', // -> this.foo()
+      'elementManager'
     ]),
     // TODO #!zh: 优化代码
     // generate vertical line
@@ -187,6 +215,9 @@ export default {
           {
             this.contextmenuPos.length
               ? <a-menu
+                onSelect={({ item, key, selectedKeys }) => {
+                  this.elementManager({ type: key })
+                }}
                 style={{
                   left: this.contextmenuPos[0] + 'px',
                   top: this.contextmenuPos[1] + 'px',
@@ -195,12 +226,7 @@ export default {
                   zIndex: 999
                 }}
               >
-                <a-menu-item data-command='copyEditingElement'>复制</a-menu-item>
-                <a-menu-item data-command="deleteEditingElement">删除</a-menu-item>
-                <a-menu-item data-command="bringLayer2Front">置顶</a-menu-item>
-                <a-menu-item data-command="bringLayer2End">置底</a-menu-item>
-                <a-menu-item data-command="addLayerZindex">上移</a-menu-item>
-                <a-menu-item data-command="subtractLayerZindex">下移</a-menu-item>
+                { contextmenuOptions.map(option => <a-menu-item key={option.value} data-command={option.value}>{option.label}</a-menu-item>) }
               </a-menu>
               : null
           }

front-end/h5/src/components/core/editor/index.js

@@ -1,5 +1,7 @@
 import Vue from 'vue'
-import Element from '../models/element'
+import { mapState, mapActions } from 'vuex'
+// import Element from '../models/element'
+
 import '../styles/index.scss'
 
 import RenderEditCanvas from './canvas/edit'
@@ -30,10 +32,19 @@ export default {
   data: () => ({
     activeMenuKey: 'pluginList',
     pages: [],
-    elements: [],
+    // elements: [],
     isPreviewMode: false
   }),
+  computed: {
+    ...mapState('element', {
+      editingElement: state => state.editingElement,
+      elements: state => state.elementsOfCurrentPage
+    })
+  },
   methods: {
+    ...mapActions('element', [
+      'elementManager'
+    ]),
     getEditorConfig (pluginName) {
       // const pluginCtor = Vue.options[pluginName]
       // const pluginCtor = this.$options.components[pluginName]
@@ -49,7 +60,11 @@ export default {
       const zindex = this.elements.length + 1
       // const defaultPropsValue = this.getPropsDefaultValue(name)
       const editorConfig = this.getEditorConfig(name)
-      this.elements.push(new Element({ name, zindex, editorConfig }))
+      // this.elements.push(new Element({ name, zindex, editorConfig }))
+      this.elementManager({
+        type: 'add',
+        value: { name, zindex, editorConfig }
+      })
     }
   },
   render (h) {

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

@@ -16,28 +16,34 @@ class Element {
     this.name = ele.name
     this.uuid = +new Date()
     this.editorConfig = ele.editorConfig || {}
-    this.pluginProps = {}
-    this.commonStyle = {}
-    this.init()
+    /**
+     * 之前版本代码：https://github.com/ly525/luban-h5/blob/a7875cbc73c0d18bc2459985ca3ce1d4dc44f141/front-end/h5/src/components/core/models/element.js#L21
+     * 1.之前的版本为：this.pluginProps = {}, 改为下面的版本
+     * 是因为要支持[复制画布上的元素]，所以需要先使用 ele.pluginProps 进行初始化（也就是拷贝之前的元素的值）
+     *
+     * 2. 移除 this.init() 原因是：如果是 复制元素，则 init 会把 copy 的值重新覆盖为初始值，copy 无效
+     */
+    this.pluginProps = ele.pluginProps || this.getDefaultPluginProps()
+    this.commonStyle = ele.commonStyle || this.getDefaultCommonStyle()
   }
 
-  init () {
-    const commonStyle = this.commonStyle
-    // init common props
-    Object.keys(defaultProps).forEach(key => {
-      commonStyle[key] = defaultProps[key]
-    })
+  getDefaultCommonStyle () {
+    return { ...defaultProps }
+  }
 
+  getDefaultPluginProps () {
     // init prop of plugin
     const propConf = this.editorConfig.propsConfig
+    const pluginProps = {}
     Object.keys(propConf).forEach(key => {
       // #6
       if (key === 'name') {
         console.warn('Please do not use {name} as plugin prop')
         return
       }
-      this.pluginProps[key] = propConf[key].defaultPropValue
+      pluginProps[key] = propConf[key].defaultPropValue
     })
+    return pluginProps
   }
 
   getStyle (position = 'static') {
@@ -64,6 +70,19 @@ class Element {
   getData () {
 
   }
+
+  clone () {
+    return new Element({
+      name: this.name,
+      editorConfig: this.editorConfig,
+      pluginProps: JSON.parse(JSON.stringify(this.pluginProps)),
+      commonStyle: {
+        ...this.commonStyle,
+        top: this.commonStyle.top + 20,
+        left: this.commonStyle.left + 20
+      }
+    })
+  }
 }
 
 export default Element

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

@@ -1,6 +1,9 @@
 // initial state
+import Element from '../../components/core/models/element'
+
 const state = {
-  editingElement: null
+  editingElement: null,
+  elementsOfCurrentPage: []
 }
 
 // getters
@@ -18,6 +21,9 @@ const actions = {
   },
   setElementShape ({ commit }, payload) {
     commit('setElementCommonStyle', payload)
+  },
+  elementManager ({ commit }, payload) {
+    commit('elementManager', payload)
   }
 }
 
@@ -31,6 +37,18 @@ const mutations = {
       ...state.editingElement.commonStyle,
       ...payload
     }
+  },
+  elementManager (state, { type, value }) {
+    switch (type) {
+      case 'add':
+        const element = new Element(value)
+        state.elementsOfCurrentPage.push(element)
+        break
+      case 'copy':
+        state.elementsOfCurrentPage.push(state.editingElement.clone())
+        break
+      default:
+    }
   }
 }