refactor(vuex): add element module

ly525
1 parent a4b13f8d
Showing 7 changed files with 65 additions and 350 deletions
front-end/h5/src/components/core/editor.js
front-end/h5/src/components/core/editor/canvas/edit.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/support/shape.js
front-end/h5/src/store/index.js
front-end/h5/src/store/modules/element.js
-import Vue from 'vue'
-import Element from './models/element'
-import './styles/index.scss'
-
-export default {
-  name: 'Editor',
-  components: {
-    ShortcutButton: {
-      functional: true,
-      props: {
-        faIcon: {
-          required: true,
-          type: String
-        },
-        title: {
-          required: true,
-          type: String
-        },
-        clickFn: {
-          required: false,
-          type: Function
-        }
-      },
-      render: (h, { props, listeners, slots }) => {
-        const onClick = props.clickFn || function () {}
-        return (
-          <a-button
-            class="shortcut-button"
-            onClick={onClick}
-          >
-            <i
-              class={['shortcut-icon', 'fa', `fa-${props.faIcon}`]}
-              aria-hidden='true'
-            />
-            <span>{ props.title }</span>
-          </a-button>
-        )
-      }
-    }
-  },
-  data: () => ({
-    activeMenuKey: 'pluginList',
-    pages: [],
-    elements: [],
-    editingElement: null,
-    isPreviewMode: false
-  }),
-  methods: {
-    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
-     * pluginInfo {Object}: 插件列表中的基础数据, {name}=pluginInfo
-     */
-    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 }))
-    },
-    mixinPluginCustomComponents2Editor () {
-      const { components } = this.editingElement.editorConfig
-      for (const key in components) {
-        if (this.$options.components[key]) return
-        this.$options.components[key] = components[key]
-      }
-    },
-    setCurrentEditingElement (element) {
-      this.editingElement = element
-      this.mixinPluginCustomComponents2Editor()
-    },
-    /**
-     * #!zh: 在左侧或顶部导航上显示可用的组件快捷方式，用户点击之后，即可将其添加到中间画布上
-     * #!en: render shortcust at the sidebar or the header. if user click the shortcut, the related plugin will be added to the canvas
-     * @param {Object} group: {children, title, icon}
-     */
-    renderPluginShortcut (group) {
-      return group.children.length === 1
-        ? this.renderSinglePluginShortcut(group)
-        : this.renderMultiPluginShortcuts(group)
-    },
-    /**
-     * #!zh 渲染多个插件的快捷方式
-     * #!en render shortcuts for multi plugins
-     * @param {Object} group: {children, title, icon}
-     */
-    renderMultiPluginShortcuts (group) {
-      const plugins = group.children
-      return <a-popover
-        placement="bottom"
-        class="shortcust-button"
-        trigger="hover">
-        <a-row slot="content" gutter={20} style={{ width: '400px' }}>
-          {
-            plugins.sort().map(item => (
-              <a-col span={6}>
-                <ShortcutButton
-                  clickFn={this.clone.bind(this, item)}
-                  title={item.title}
-                  faIcon={item.icon}
-                />
-              </a-col>
-            ))
-          }
-        </a-row>
-        <ShortcutButton
-          title={group.title}
-          faIcon={group.icon}
-        />
-      </a-popover>
-    },
-    /**
-     * #!zh: 渲染单个插件的快捷方式
-     * #!en: render shortcut for single plugin
-     * @param {Object} group: {children, title, icon}
-     */
-    renderSinglePluginShortcut ({ children }) {
-      const [plugin] = children
-      return <ShortcutButton
-        clickFn={this.clone.bind(this, plugin)}
-        title={plugin.title}
-        faIcon={plugin.icon}
-      />
-    },
-    /**
-     * #!zh: renderCanvas 渲染中间画布
-     * elements
-     * @param {*} h
-     * @param {*} elements
-     * @returns
-     */
-    renderCanvas (h, elements) {
-      return (
-        <div style={{ height: '100%' }}>
-          {elements.map((element, index) => {
-            return (() => {
-              const data = {
-                style: element.getStyle(),
-                props: element.pluginProps, // #6 #3
-                nativeOn: {
-                  click: this.setCurrentEditingElement.bind(this, element)
-                },
-                on: {
-                  input ({ pluginName, value }) {
-                    if (pluginName === 'lbp-text') {
-                      element.pluginProps.text = value
-                    }
-                  }
-                }
-              }
-              return h(element.name, data)
-            })()
-          })}
-        </div>
-      )
-    },
-    renderPreview (h, elements) {
-      return (
-        <div style={{ height: '100%' }}>
-          {elements.map((element, index) => {
-            return (() => {
-              const data = {
-                style: element.getStyle(),
-                props: element.pluginProps, // #6 #3
-                nativeOn: {}
-              }
-              return h(element.name, data)
-            })()
-          })}
-        </div>
-      )
-    },
-    renderPluginListPanel () {
-      return (
-        <a-row gutter={20}>
-          {
-            this.groups.sort().map(group => (
-              <a-col span={12} style={{ marginTop: '10px' }}>
-                {this.renderPluginShortcut(group)}
-              </a-col>
-            ))
-          }
-        </a-row>
-      )
-    },
-    renderPropsEditorPanel (h) {
-      const formLayout = {
-        labelCol: { span: 5 },
-        wrapperCol: { span: 8 }
-      }
-      if (!this.editingElement) return (<span>请先选择一个元素</span>)
-      const editingElement = this.editingElement
-      const propsConfig = editingElement.editorConfig.propsConfig
-      return (
-        <a-form ref="form" layout="horizontal">
-          {
-            Object.keys(propsConfig).map(propKey => {
-              const item = propsConfig[propKey]
-              // https://vuejs.org/v2/guide/render-function.html
-              const data = {
-                props: {
-                  ...item.prop,
-                  // https://vuejs.org/v2/guide/render-function.html#v-model
-                  value: editingElement.pluginProps[propKey] || item.defaultPropValue
-                },
-                on: {
-                  // https://vuejs.org/v2/guide/render-function.html#v-model
-                  // input (e) {
-                  //   editingElement.pluginProps[propKey] = e.target ? e.target.value : e
-                  // }
-                  change (e) {
-                    editingElement.pluginProps[propKey] = e.target ? e.target.value : e
-                  }
-                }
-              }
-              return (
-                <a-form-item
-                  label={item.label}
-                  {...formLayout}
-                >
-                  { h(item.type, data) }
-                </a-form-item>
-              )
-            })
-          }
-        </a-form>
-      )
-    }
-  },
-  render (h) {
-    return (
-      <a-layout id="luban-layout" style={{ height: '100vh' }}>
-        <a-layout-header class="header">
-          <div class="logo">鲁班 H5</div>
-          {/* TODO we can show the plugins shortcuts here
-          <a-menu
-            theme="dark"
-            mode="horizontal"
-            defaultSelectedKeys={['2']}
-            style={{ lineHeight: '64px', float: 'left', marginLeft: '30%', background: 'transparent' }}
-          >
-            {
-              this.groups.sort().map((group, id) => (
-                <a-menu-item key={id} class="transparent-bg">
-                  {this.renderPluginShortcut(group)}
-                </a-menu-item>
-              ))
-            }
-          </a-menu> */}
-          <a-menu
-            theme="dark"
-            mode="horizontal"
-            defaultSelectedKeys={['2']}
-            style={{ lineHeight: '64px', float: 'right', background: 'transparent' }}
-          >
-            <a-menu-item key="1" class="transparent-bg"><a-button type="primary" size="small">预览</a-button></a-menu-item>
-            <a-menu-item key="2" class="transparent-bg"><a-button size="small">保存</a-button></a-menu-item>
-            <a-menu-item key="3" class="transparent-bg"><a-button size="small">发布</a-button></a-menu-item>
-          </a-menu>
-        </a-layout-header>
-        <a-layout>
-          <a-layout-sider width="160" style="background: #fff">
-            <a-menu onSelect={val => { this.activeMenuKey = val }} mode="inline" defaultSelectedKeys={['pluginList']} style={{ height: '100%', borderRight: 1 }}>
-              <a-menu-item key="pluginList">
-                <a-icon type="user" />
-                <span>组件列表</span>
-              </a-menu-item>
-              <a-menu-item key="2">
-                <a-icon type="video-camera" />
-                <span>页面管理</span>
-              </a-menu-item>
-              <a-menu-item key="3">
-                <a-icon type="upload" />
-                <span>更多模板</span>
-              </a-menu-item>
-            </a-menu>
-          </a-layout-sider>
-          <a-layout-sider width="240" theme='light' style={{ background: '#fff', padding: '0 12px' }}>
-            { this.renderPluginListPanel() }
-          </a-layout-sider>
-          <a-layout style="padding: 0 24px 24px">
-            <a-layout-content style={{ padding: '24px', margin: 0, minHeight: '280px' }}>
-              <div style="text-align: center;">
-                <a-radio-group
-                  value={this.isPreviewMode}
-                  onInput={value => {
-                    this.isPreviewMode = value
-                  }}
-                >
-                  <a-radio-button label={false} value={false}>Edit</a-radio-button>
-                  <a-radio-button label={true} value={true}>Preview</a-radio-button>
-                </a-radio-group>
-              </div>
-              <div class='canvas-wrapper'>
-                { this.isPreviewMode ? this.renderPreview(h, this.elements) : this.renderCanvas(h, this.elements) }
-              </div>
-            </a-layout-content>
-          </a-layout>
-          <a-layout-sider width="240" theme='light' style={{ background: '#fff', padding: '0 12px' }}>
-            <a-tabs type="card" style="height: 100%;">
-              {/*
-                #!zh tab 标题：
-                #!en tab title
-                  ElementUI：label
-                  Ant Design Vue：tab
-              */}
-              <a-tab-pane key="属性">
-                <span slot="tab">
-                  <a-icon type="apple" />
-                  属性
-                </span>
-                <div style={{ overflow: 'scroll', height: '100vh' }}>
-                  { this.renderPropsEditorPanel(h) }
-                </div>
-              </a-tab-pane>
-              <a-tab-pane label="动画" key='动画' tab='动画'>动画</a-tab-pane>
-              <a-tab-pane label="动作" key='动作' tab='动作'>动作</a-tab-pane>
-            </a-tabs>
-          </a-layout-sider>
-        </a-layout>
-      </a-layout>
-    )
-  }
-}
+import { mapState, mapActions } from 'vuex'
 import Shape from '../../support/shape'
+
 export default {
-  props: ['elements', 'editingElement', 'handleClickElementProp', 'handleClickCanvasProp'],
+  props: ['elements', 'handleClickElementProp', 'handleClickCanvasProp'],
   data: () => ({
     vLines: [],
     hLines: [],
     contextmenuPos: []
   }),
+  computed: {
+    ...mapState('element', {
+      editingElement: state => state.editingElement
+    })
+  },
   methods: {
+    ...mapActions('element', [
+      'setEditingElement' // -> this.foo()
+    ]),
     // TODO #!zh: 优化代码
     // generate vertical line
     drawVLine (newLeft) {
@@ -86,6 +96,11 @@ export default {
     hideContextMenu () {
       this.contextmenuPos = []
     },
+    handleClickCanvas (e) {
+      if (!e.target.classList.contains('element-on-edit-canvas')) {
+        this.setEditingElement()
+      }
+    },
     /**
      * #!zh: renderCanvas 渲染中间画布
      * elements
@@ -100,7 +115,7 @@ export default {
           class="canvas-editor-wrapper"
           onClick={(e) => {
             this.hideContextMenu()
-            this.handleClickCanvasProp(e)
+            this.handleClickCanvas(e)
           }}
           onContextmenu={e => {
             this.bindContextMenu(e)
@@ -117,7 +132,7 @@ export default {
                 props: element.pluginProps, // #6 #3
                 on: {
                   // 高亮当前点击的元素
-                  // click: () => this.handleClickElementProp(element)
+                  // click: () => this.setEditingElement(element)
                   input: ({ value, pluginName }) => {
                     if (pluginName === 'lbp-text') {
                       element.pluginProps.text = value
@@ -128,13 +143,12 @@ export default {
               return (
                 <Shape
                   element={element}
-                  editingElement={this.editingElement}
                   active={this.editingElement === element}
                   handleMousedownProp={() => {
                     // 在 shape 上面添加 mousedown，而非 plugin 本身添加 onClick 的原因：
                     // 在 mousedown 的时候，即可激活 editingElement(当前选中元素)
                     // 这样，就不用等到鼠标抬起的时候，也就是 plugin 的 onClick 生效的时候，才给选中的元素添加边框等选中效果
-                    this.handleClickElementProp(element)
+                    this.setEditingElement(element)
                   }}
                   handleElementMoveProp={this.handleElementMove}
                 >
+import { mapState, mapActions } from 'vuex'
+
 export default {
-  props: ['editingElement'],
+  computed: {
+    ...mapState('element', {
+      editingElement: state => state.editingElement
+    })
+  },
   methods: {
+    ...mapActions('element', [
+      'setEditingElement' // -> this.foo()
+    ]),
     /**
      * 将插件属性的 自定义增强编辑器注入 属性编辑面板中
      */
@@ -31,7 +31,6 @@ export default {
     activeMenuKey: 'pluginList',
     pages: [],
     elements: [],
-    editingElement: null,
     isPreviewMode: false
   }),
   methods: {
@@ -51,14 +50,6 @@ export default {
       // const defaultPropsValue = this.getPropsDefaultValue(name)
       const editorConfig = this.getEditorConfig(name)
       this.elements.push(new Element({ name, zindex, editorConfig }))
-    },
-    setCurrentEditingElement (element) {
-      this.editingElement = element
-    },
-    handleClickCanvas (e) {
-      if (!e.target.classList.contains('element-on-edit-canvas')) {
-        this.editingElement = null
-      }
     }
   },
   render (h) {
@@ -113,9 +104,6 @@ export default {
                   ? <RenderPreviewCanvas elements={this.elements}/>
                   : <RenderEditCanvas
                     elements={this.elements}
-                    handleClickElementProp={this.setCurrentEditingElement}
-                    handleClickCanvasProp={this.handleClickCanvas}
-                    editingElement={this.editingElement}
                   />
                 }
               </div>
@@ -135,7 +123,7 @@ export default {
                   属性
                 </span>
                 {/* { this.renderPropsEditorPanel(h) } */}
-                <RenderPropsEditor editingElement={this.editingElement} />
+                <RenderPropsEditor/>
               </a-tab-pane>
               <a-tab-pane label="动画" key='动画' tab='动画'>动画</a-tab-pane>
               <a-tab-pane label="动作" key='动作' tab='动作'>动作</a-tab-pane>
@@ -13,7 +13,7 @@ const directionKey = {
 const points = ['lt', 'rt', 'lb', 'rb', 'l', 'r', 't', 'b']
 export default {
-  props: ['element', 'active', 'editingElement', 'handleMousedownProp', 'handleElementMoveProp'],
+  props: ['element', 'active', 'handleMousedownProp', 'handleElementMoveProp'],
   methods: {
     /**
      * 通过方位计算样式，主要是 top、left、鼠标样式
@@ -4,6 +4,7 @@ import editor from &#39;./modules/editor&#39;
 import user from './modules/user'
 import visible from './modules/visible'
 import loading from './modules/loading'
+import element from './modules/element'
 Vue.use(Vuex)
@@ -21,6 +22,7 @@ export default new Vuex.Store({
     editor,
     user,
     visible,
-    loading
+    loading,
+    element
   }
 })
+// initial state
+const state = {
+  editingElement: null
+}
+
+// getters
+const getters = {
+
+}
+
+// actions
+const actions = {
+  setEditingElement ({ commit }, payload) {
+    commit('setEditingElement', payload)
+  }
+}
+
+// mutations
+const mutations = {
+  setEditingElement (state, payload) {
+    state.editingElement = payload
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations
+}