remove editorConfig prop for element model for saving to db

ly525
1 parent 9c783619
Showing 7 changed files with 27 additions and 20 deletions
front-end/h5/src/components/core/editor/canvas/preview.js
front-end/h5/src/components/core/editor/edit-panel/props.js
front-end/h5/src/components/core/editor/index.js
front-end/h5/src/components/core/models/element.js
front-end/h5/src/store/modules/editor.js
front-end/h5/src/store/modules/element.js
front-end/h5/src/utils/element.js
+/**
+ * TODO extract page preview card used for page list
+ */
 export default {
   props: ['elements'],
   methods: {
@@ -2,7 +2,7 @@ import { mapState, mapActions } from &#39;vuex&#39;
  
 export default {
   computed: {
-    ...mapState('editor', ['editingElement'])
+    ...mapState('editor', ['editingElement', 'editingElementEditorConfig'])
   },
   methods: {
     ...mapActions('editor', [
@@ -12,14 +12,14 @@ export default {
      * 将插件属性的 自定义增强编辑器注入 属性编辑面板中
      */
     mixinEnhancedPropsEditor (editingElement) {
-      const { components } = editingElement.editorConfig
+      const { components } = this.editingElementEditorConfig
       for (const key in components) {
         if (this.$options.components[key]) return
         this.$options.components[key] = components[key]
       }
     },
     renderPropsEditorPanel (h, editingElement) {
-      const propsConfig = editingElement.editorConfig.propsConfig
+      const propsConfig = this.editingElementEditorConfig.propsConfig
       return (
         <a-form
           ref="form"
-import Vue from 'vue'
 import { mapState, mapActions } from 'vuex'
-// import Element from '../models/element'
 import undoRedoHistory from '../../../store/plugins/undo-redo/History'
+import { getEditorConfigForEditingElement } from '../../../utils/element'
  
 import '../styles/index.scss'
  
@@ -51,12 +50,6 @@ export default {
       'saveWork',
       'createWork'
     ]),
-    getEditorConfig (pluginName) {
-      // const pluginCtor = Vue.options[pluginName]
-      // const pluginCtor = this.$options.components[pluginName]
-      const PluginCtor = Vue.component(pluginName)
-      return new PluginCtor().$options.editorConfig
-    },
     /**
      * !#zh 点击插件，copy 其基础数据到组件树（中间画布）
      * #!en click the plugin shortcut, create new Element with the plugin's meta data
@@ -64,9 +57,7 @@ export default {
      */
     clone ({ name }) {
       const zindex = this.elements.length + 1
-      // const defaultPropsValue = this.getPropsDefaultValue(name)
-      const editorConfig = this.getEditorConfig(name)
-      // this.elements.push(new Element({ name, zindex, editorConfig }))
+      const editorConfig = getEditorConfigForEditingElement(name)
       this.elementManager({
         type: 'add',
         value: { name, zindex, editorConfig }
@@ -15,7 +15,6 @@ class Element {
   constructor (ele) {
     this.name = ele.name
     this.uuid = +new Date()
-    this.editorConfig = ele.editorConfig || {}
     /**
      * 之前版本代码：https://github.com/ly525/luban-h5/blob/a7875cbc73c0d18bc2459985ca3ce1d4dc44f141/front-end/h5/src/components/core/models/element.js#L21
      * 1.之前的版本为：this.pluginProps = {}, 改为下面的版本
@@ -23,7 +22,7 @@ class Element {
      *
      * 2. 移除 this.init() 原因是：如果是 复制元素，则 init 会把 copy 的值重新覆盖为初始值，copy 无效
      */
-    this.pluginProps = ele.pluginProps || this.getDefaultPluginProps()
+    this.pluginProps = ele.pluginProps || this.getDefaultPluginProps(ele.editorConfig || {})
     this.commonStyle = ele.commonStyle || this.getDefaultCommonStyle()
     this.events = []
   }
@@ -32,9 +31,9 @@ class Element {
     return { ...defaultProps }
   }
  
-  getDefaultPluginProps () {
+  getDefaultPluginProps (editorConfig) {
     // init prop of plugin
-    const propConf = this.editorConfig.propsConfig
+    const propConf = editorConfig.propsConfig
     const pluginProps = {}
     Object.keys(propConf).forEach(key => {
       // #6
@@ -75,7 +74,6 @@ class Element {
   clone () {
     return new Element({
       name: this.name,
-      editorConfig: this.editorConfig,
       pluginProps: JSON.parse(JSON.stringify(this.pluginProps)),
       commonStyle: {
         ...this.commonStyle,
@@ -7,7 +7,8 @@ import { actions as workActions, mutations as workMutations } from &#39;./work&#39;
 const state = {
   work: new Work(),
   editingPage: { elements: [] },
-  editingElement: null
+  editingElement: null,
+  editingElementEditorConfig: null
 }
  
 // getters
 import Element from '../../components/core/models/element'
+import { getEditorConfigForEditingElement } 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)
   },
   setElementPosition ({ commit }, payload) {
     commit('setElementCommonStyle', payload)
@@ -24,6 +28,9 @@ export const mutations = {
   setEditingElement (state, payload) {
     state.editingElement = payload
   },
+  setEditingElementEditorConfig (state, payload) {
+    state.editingElementEditorConfig = payload
+  },
   setElementCommonStyle (state, payload) {
     state.editingElement.commonStyle = {
       ...state.editingElement.commonStyle,
+import Vue from 'vue'
+
+export function getEditorConfigForEditingElement (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
+}