fix: #132 #134

ly525
1 parent b2c9bc49
Showing 10 changed files with 155 additions and 150 deletions
front-end/h5/src/components/core/editor/edit-panel/background.js
front-end/h5/src/components/core/editor/edit-panel/props.js
front-end/h5/src/components/core/models/element.js
front-end/h5/src/components/plugins/lbp-form-button.js
front-end/h5/src/components/plugins/lbp-form-input.js
front-end/h5/src/components/plugins/lbp-slide.js
front-end/h5/src/components/plugins/lbp-video.js
front-end/h5/src/store/modules/editor.js
front-end/h5/src/store/modules/element.js
front-end/h5/src/utils/element.js
@@ -2,7 +2,7 @@
  * @Author: ly525
  * @Date: 2019-12-01 18:11:49
  * @LastEditors  : ly525
- * @LastEditTime : 2019-12-22 18:09:54
+ * @LastEditTime : 2020-01-15 01:03:31
  * @FilePath: /luban-h5/front-end/h5/src/components/core/editor/edit-panel/background.js
  * @Github: https://github.com/ly525/luban-h5
  * @Description: Do not edit
@@ -23,14 +23,11 @@ export default {
     ])
   },
   render () {
-    return <propsEditPanel layout="vertical" />
-  },
-  created () {
-    const bgElement = this.editingPage.elements.find(e => e.name === 'lbp-background')
-    this.setEditingElement(bgElement)
-  },
-  beforeDestroy () {
-    this.setEditingElement()
+    const bgEle = this.editingPage.elements.find(e => e.name === 'lbp-background')
+    return <propsEditPanel
+      layout="vertical"
+      realEditingElement={bgEle}
+    />
   }
 }
 import Vue from 'vue'
 import { mapState, mapActions } from 'vuex'
-import { getVM } from '../../../../utils/element'
+import { getVM, getComponentsForPropsEditor } from '../../../../utils/element'
 export default {
   data: () => ({
@@ -10,12 +10,22 @@ export default {
     layout: {
       type: String,
       default: 'horizontal'
+    },
+    // 优先级更高的当前编辑元素
+    realEditingElement: {
+      type: Object,
+      default: () => null
     }
   },
   computed: {
-    ...mapState('editor', ['editingElement', 'editingElementEditorConfig']),
+    ...mapState('editor', {
+      stateEditingElement: state => state.editingElement
+    }),
     customEditorName () {
       return `${this.editingElement.name}-custom-editor`
+    },
+    editingElement () {
+      return this.realEditingElement || this.stateEditingElement
     }
   },
   methods: {
@@ -42,11 +52,10 @@ export default {
      * 将插件属性的 自定义增强编辑器注入 属性编辑面板中
      */
     mixinEnhancedPropsEditor (editingElement) {
-      if (!this.editingElementEditorConfig || !this.editingElementEditorConfig.components) return
-      const { components } = this.editingElementEditorConfig
-      for (const key in components) {
+      if (!this.componentsForPropsEditor) return
+      for (const key in this.componentsForPropsEditor) {
         if (this.$options.components[key]) return
-        this.$options.components[key] = components[key]
+        this.$options.components[key] = this.componentsForPropsEditor[key]
       }
     },
     /**
@@ -81,7 +90,7 @@ export default {
         //   editingElement.pluginProps[propKey] = e.target ? e.target.value : e
         // }
           change (e) {
-          // TODO fixme: update plugin props in vuex with dispatch
+            // TODO fixme: update plugin props in vuex with dispatch
             editingElement.pluginProps[propKey] = e.target ? e.target.value : e
           }
         }
@@ -140,6 +149,9 @@ export default {
     return this.renderPropsEditorPanel(h, ele)
   },
   created () {
-    window.getEditorApp.$on('setEditingElement', this.loadCustomEditorForPlugin)
+    window.getEditorApp.$on('setEditingElement', (ele) => {
+      this.loadCustomEditorForPlugin()
+      this.componentsForPropsEditor = getComponentsForPropsEditor(ele.name)
+    })
   }
 }
@@ -31,42 +31,28 @@ class Element {
      * 3. 为何需要 clone，因为会有 element.clone() 以及 page.clone()，
      *    element.pluginProps 和 elementcommonStyle 是引用类型，如果不做 deep_clone 可能会出现意外错误
      */
-    this.pluginProps = (typeof ele.pluginProps === 'object' && cloneObj({ ...ele.pluginProps, uuid: this.uuid })) || this.getDefaultPluginProps(ele.editorConfig || {})
+    this.pluginProps = (typeof ele.pluginProps === 'object' && cloneObj({ ...ele.pluginProps, uuid: this.uuid })) || this.getDefaultPluginProps(ele.props || {})
     this.commonStyle = (typeof ele.commonStyle === 'object' && cloneObj(ele.commonStyle)) || { ...defaultStyle, zindex: ele.zindex }
     this.events = []
     this.animations = ele.animations || []
   }
   // init prop of plugin
-  getDefaultPluginProps (propsConfig) {
+  getDefaultPluginProps (props) {
     const pluginProps = {
       uuid: this.uuid
     }
-    Object.keys(propsConfig).forEach(key => {
+    Object.keys(props).forEach(key => {
       // #6
       if (key === 'name') {
         console.warn('Please do not use {name} as plugin prop')
         return
       }
-      const defaultValue = propsConfig[key].default
+      const defaultValue = props[key].default
       pluginProps[key] = typeof defaultValue === 'function' ? defaultValue() : defaultValue
     })
     return pluginProps
   }
-  // getDefaultPluginProps (editorConfig) {
-  //   // init prop of plugin
-  //   const propConf = editorConfig.propsConfig
-  //   const pluginProps = {}
-  //   Object.keys(propConf).forEach(key => {
-  //     // #6
-  //     if (key === 'name') {
-  //       console.warn('Please do not use {name} as plugin prop')
-  //       return
-  //     }
-  //     pluginProps[key] = propConf[key].defaultPropValue
-  //   })
-  //   return pluginProps
-  // }
   getStyle ({ position = 'static', isRem = false } = {}) {
     if (this.name === 'lbp-background') {
@@ -75,21 +75,20 @@ export default {
       req.send(formData)
     }
   },
-  editorConfig: {
-    components: {
-      'lbs-select-input-type': {
-        props: ['value'],
-        computed: {
-          value_: {
-            get () {
-              return this.value
-            },
-            set (val) {
-              this.$emit('input', val)
-            }
+  componentsForPropsEditor: {
+    'lbs-select-input-type': {
+      props: ['value'],
+      computed: {
+        value_: {
+          get () {
+            return this.value
+          },
+          set (val) {
+            this.$emit('input', val)
           }
-        },
-        template: `
+        }
+      },
+      template: `
           <a-select v-model="value_" placeholder="类型">
             <a-option
               v-for="item in options"
@@ -99,31 +98,30 @@ export default {
             </a-option>
           </a-select>
         `,
-        data: () => ({
-          options: [
-            {
-              label: '文字',
-              value: 'text'
-            },
-            {
-              label: '密码',
-              value: 'password'
-            },
-            {
-              label: '日期',
-              value: 'date'
-            },
-            {
-              label: '邮箱',
-              value: 'email'
-            },
-            {
-              label: '手机号',
-              value: 'tel'
-            }
-          ]
-        })
-      }
+      data: () => ({
+        options: [
+          {
+            label: '文字',
+            value: 'text'
+          },
+          {
+            label: '密码',
+            value: 'password'
+          },
+          {
+            label: '日期',
+            value: 'date'
+          },
+          {
+            label: '邮箱',
+            value: 'email'
+          },
+          {
+            label: '手机号',
+            value: 'tel'
+          }
+        ]
+      })
     }
   }
 }
@@ -54,66 +54,64 @@ export default {
     lineHeight: commonProps.lineHeight,
     textAlign: commonProps.textAlign({ defaultValue: 'left' })
   },
-  editorConfig: {
-    components: {
-      'lbs-select-input-type': {
-        props: ['value'],
-        computed: {
-          value_: {
-            get () {
-              return this.value
-            },
-            set (val) {
-              this.$emit('input', val)
-            }
+  componentsForPropsEditor: {
+    'lbs-select-input-type': {
+      props: ['value'],
+      computed: {
+        value_: {
+          get () {
+            return this.value
+          },
+          set (val) {
+            this.$emit('input', val)
           }
-        },
-        render (h) {
-          return (
-            <a-select
-              placeholder="类型"
-              value={this.value}
-              onChange={(value) => {
-                this.$emit('input', value)
-                this.$emit('change', value)
-              }}
-            >
-              {
-                this.options.map(option => (
-                  <a-select-option
-                    key={option.value}
-                    value={option.value}
-                  >{option.label}</a-select-option>
-                ))
-              }
-            </a-select>
-          )
-        },
-        data: () => ({
-          options: [
-            {
-              label: '文字',
-              value: 'text'
-            },
-            {
-              label: '密码',
-              value: 'password'
-            },
-            {
-              label: '日期',
-              value: 'date'
-            },
+        }
+      },
+      render (h) {
+        return (
+          <a-select
+            placeholder="类型"
+            value={this.value}
+            onChange={(value) => {
+              this.$emit('input', value)
+              this.$emit('change', value)
+            }}
+          >
             {
-              label: '邮箱',
-              value: 'email'
-            },
-            {
-              label: '手机号',
-              value: 'tel'
+              this.options.map(option => (
+                <a-select-option
+                  key={option.value}
+                  value={option.value}
+                >{option.label}</a-select-option>
+              ))
             }
-          ]
-        })
-      }
+          </a-select>
+        )
+      },
+      data: () => ({
+        options: [
+          {
+            label: '文字',
+            value: 'text'
+          },
+          {
+            label: '密码',
+            value: 'password'
+          },
+          {
+            label: '日期',
+            value: 'date'
+          },
+          {
+            label: '邮箱',
+            value: 'email'
+          },
+          {
+            label: '手机号',
+            value: 'tel'
+          }
+        ]
+      })
     }
   }
 }
@@ -57,9 +57,7 @@ export default {
       }
     }
   },
-  editorConfig: {
-    components: {
-    }
+  componentsForPropsEditor: {
   },
   mounted () {
   },
@@ -2,7 +2,7 @@
  * @Author: ly525
  * @Date: 2019-12-01 18:11:50
  * @LastEditors  : ly525
- * @LastEditTime : 2020-01-13 00:31:39
+ * @LastEditTime : 2020-01-15 00:53:48
  * @FilePath: /luban-h5/front-end/h5/src/components/plugins/lbp-video.js
  * @Github: https://github.com/ly525/luban-h5
  * @Description: Do not edit
@@ -96,8 +96,6 @@ export default {
       </div>
     )
   },
-  editorConfig: {
-    components: {
-    }
+  componentsForPropsEditor: {
   }
 }
@@ -9,7 +9,6 @@ const state = {
   work: new Work(),
   editingPage: { elements: [] },
   editingElement: null,
-  editingElementEditorConfig: null,
   formDetailOfWork: {
     uuidMap2Name: {},
     formRecords: []
 import Element from '../../components/core/models/element'
-import { getEditorConfigForEditingElement, swapZindex, getVM } from '../../utils/element'
+import { swapZindex, getVM } from '../../utils/element'
 // actions
 export const actions = {
   setEditingElement ({ commit }, payload) {
     commit('setEditingElement', payload)
-
-    const vm = (payload && payload.name) ? getEditorConfigForEditingElement(payload.name) : null
-    commit('setEditingElementEditorConfig', vm)
-
     payload && window.getEditorApp.$emit('setEditingElement', payload)
   },
   setElementPosition ({ commit }, payload) {
@@ -30,9 +26,6 @@ export const mutations = {
   setEditingElement (state, payload) {
     state.editingElement = payload
   },
-  setEditingElementEditorConfig (state, payload) {
-    state.editingElementEditorConfig = payload
-  },
   setElementCommonStyle (state, payload) {
     state.editingElement.commonStyle = {
       ...state.editingElement.commonStyle,
@@ -54,7 +47,7 @@ export const mutations = {
           ...value,
           zindex: len + 1
         }
-        const element = new Element({ name, editorConfig: props })
+        const element = new Element({ name, props })
         elements.push(element)
         break
       case 'copy':
@@ -3,10 +3,36 @@ import Vue from &#39;vue&#39;
 const DESIGN_DRAFT_WIDTH = 320
 const styleKey = 'commonStyle'
-export function getEditorConfigForEditingElement (elementName) {
+/**
+ *
+
+ * 获取组件中的 「componentsForPropsEditor」对象
+ * @param {String} elementName
+ *
+ * 可以查看下面的组件 Demo
+ {
+  name: 'lbp-button',
+  props: {
+    color: {
+      default: 'red',
+      editor: {
+        type: 'custom-color-editor'
+      }
+    }
+  },
+  componentsForPropsEditor: {
+    'custom-color-editor': {
+      render() {
+        return <input type="color" />
+      }
+    }
+  }
+ }
+ */
+export function getComponentsForPropsEditor (elementName) {
   const Ctor = Vue.component(elementName)
   // TODO 为何直接 return new Ctor() 并将其赋值给 vuex 的 state 会报错：Cannot convert a Symbol value to a string
-  return new Ctor().$options.editorConfig
+  return new Ctor().$options.componentsForPropsEditor
 }
 export function getVM (pluginName) {