Merge branch 'master' into box-model

ly525
2 parents bde7fe0e a59dbd3e
Showing 6 changed files with 41 additions and 11 deletions
front-end/h5/src/components/core/editor/canvas/edit.js
front-end/h5/src/components/core/editor/left-panel/shortcuts-panel/index.js
front-end/h5/src/components/core/models/element.js
front-end/h5/src/components/core/plugins/lbp-text.js
front-end/h5/src/components/core/store/modules/element.js
front-end/h5/src/utils/element.js
@@ -193,6 +193,7 @@ export default {
                   props: element.getProps()
                 })
               }
+              const isEditingElement = this.editingElement && this.editingElement.uuid === element.uuid
               const data = {
                 style: {
                   width: '100%',
@@ -203,7 +204,8 @@ export default {
                 class: 'element-on-edit-canvas',
                 props: {
                   ...element.getProps(), // #6 #3,
-                  editorMode: 'edit'
+                  editorMode: 'edit',
+                  isEditingElement
                 },
                 // nativeOn: {
                 //   contextmenu: e => {
@@ -26,15 +26,15 @@ export default {
      * #!en click the plugin shortcut, create new Element with the plugin's meta data
      * pluginInfo {Object}: 插件列表中的基础数据, {name}=pluginInfo
      *
-     * shortcutItem: PluginListItem = {
+     * elementShortcutConfig: PluginListItem = {
       name: String,
       shortcutProps: {}
      }
      */
-    clone (shortcutItem) {
+    clone (elementShortcutConfig) {
       this.elementManager({
         type: 'add',
-        value: shortcutItem
+        value: elementShortcutConfig
       })
     }
     /**
-import { parsePx } from '@/utils/element.js'
+import { parsePx, guid } from '@/utils/element.js'
  
 // #! 编辑状态，不可以点击的按钮，因为点击按钮会触发一些默认行为，比如表单提交等
 const disabledPluginsForEditMode = ['lbp-form-input', 'lbp-form-button', 'lbp-video']
@@ -81,7 +81,7 @@ const defaultStyle = {
 class Element {
   constructor (ele) {
     this.name = ele.name
-    this.uuid = ele.uuid || +new Date()
+    this.uuid = ele.uuid || guid()
     /**
      * #!zh:
      * 之前版本代码：https://github.com/ly525/luban-h5/blob/a7875cbc73c0d18bc2459985ca3ce1d4dc44f141/front-end/h5/src/components/core/models/element.js#L21
@@ -22,7 +22,7 @@ export default {
     clickOutside: vClickOutside.directive
   },
   render (h) {
-    const canEdit = this.canEdit && this.editorMode === 'edit'
+    const canEdit = this.canEdit && this.editorMode === 'edit' && this.isEditingElement
     const style = {
       position: 'relative',
       color: `${this.color} !important`,
@@ -109,6 +109,11 @@ export default {
       defaultValue: 'preview', // 可选值: preview/edit
       label: '模式',
       visible: false
+    }),
+    isEditingElement: PropTypes.boolean({
+      defaultValue: false, // 可选值: preview/edit
+      label: '是否当前元素',
+      visible: false
     })
   },
   editorConfig: {
@@ -32,7 +32,18 @@ export const mutations = {
       ...payload
     }
   },
+  /**
+   * 元素管理：增/删/复制/上移/下移
+   * @param {*} state
+   * @param {*} {
+   *  type:  add/copy/delete/move2Top/move2Bottom 增/删/复制/上移/下移
+   *  value(elementShortcutConfig) 左侧元素列表中元素对应的配置，主要包含：
+   *   - shortcutProps：默认Props，比如一个Chart是饼图、折线图、漏斗图，可以通过此指定
+   *   - dragStyle：用于拖拽结束，确定最终放置的位置, // {left: Number, top: Number}
+   * }
+   */
   elementManager (state, { type, value }) {
+    const elementShortcutConfig = value
     const { editingPage, editingElement } = state
     const elements = editingPage.elements
     const len = elements.length
@@ -40,10 +51,12 @@ export const mutations = {
     switch (type) {
       case 'add':
         const vm = getVM(value.name)
-        vm.$options.shortcutProps = value.shortcutProps
-        // 用于拖拽结束，确定最终放置的位置
-        vm.$options.dragStyle = value.dragStyle // {left: Number, top: Number}
-        const element = new Element(vm.$options)
+        const basicElement = vm.$options
+        const element = new Element({
+          ...basicElement,
+          ...elementShortcutConfig,
+          zindex: len + 1
+        })
         elements.push(element)
         break
       case 'copy':
@@ -71,3 +71,13 @@ export const genUUID = () =&gt; {
   // http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript
   return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
 }
+
+// Generate four random hex digits.
+function S4 () {
+  return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
+}
+
+// Generate a pseudo-GUID by concatenating random hexadecimal.
+export function guid () {
+  return (S4() + S4() + '-' + S4() + '-' + S4() + '-' + S4() + '-' + S4() + S4() + S4())
+}