feat: text plugin

ly525
1 parent 6afa3da0
Showing 5 changed files with 660 additions and 2 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/models/element.js
front-end/h5/src/components/plugins/lbp-text.js
front-end/h5/src/views/Editor.vue
+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>
+    )
+  }
+}
@@ -91,9 +91,15 @@ export default {
                 style,
                 class: 'element-on-edit-canvas', // TODO 添加为何添加 class 的原因：与 handleClickCanvas 配合
                 props: element.pluginProps, // #6 #3
-                nativeOn: {
+                on: {
                   // 高亮当前点击的元素
                   // click: () => this.handleClickElementProp(element)
+                  input: ({ value, pluginName }) => {
+                    if (pluginName === 'lbp-text') {
+                      debugger
+                      element.pluginProps.text = value
+                    }
+                  }
                 }
               }
               return (
@@ -50,7 +50,7 @@ class Element {
       height: `${pluginProps.height || commonStyle.height}px`,
       fontSize: `${pluginProps.fontSize || commonStyle.fontSize}px`,
       color: pluginProps.color || commonStyle.color,
-      backgroundColor: pluginProps.backgroundColor || commonStyle.backgroundColor,
+      // backgroundColor: pluginProps.backgroundColor || commonStyle.backgroundColor,
       textAlign: pluginProps.textAlign || commonStyle.textAlign
     }
     return style
+export default {
+  render (h) {
+    const self = this
+    const {
+      color,
+      textAlign,
+      fontSize,
+      lineHeight,
+      borderColor
+    } = this
+
+    const style = {
+      color,
+      textAlign,
+      backgroundColor: 'transparent',
+      fontSize: fontSize,
+      lineHeight: lineHeight + 'em',
+      borderColor,
+      textDecoration: 'none'
+    }
+    return h('div', {
+      style,
+      on: {
+        dblclick () {
+          self.canEdit = true
+        }
+      }
+    }, [
+      h('div', {
+        ref: 'editableText',
+        style: {
+          height: '100%'
+        },
+        domProps: {
+          innerHTML: self.innerText,
+          contentEditable: self.canEdit
+        },
+        on: {
+          blur () {
+            self.canEdit = false
+          },
+          input () {
+            self.$emit('input', {
+              value: self.$refs.editableText.innerHTML,
+              pluginName: 'lbp-text'
+            })
+          }
+        }
+      })
+
+    ])
+  },
+  name: 'lbp-text',
+  data () {
+    return {
+      canEdit: false,
+      innerText: this.text || '双击修改文字'
+    }
+  },
+  props: {
+    text: {
+      type: String,
+      default: '双击修改文字'
+    },
+    type: {
+      type: String,
+      default: 'text'
+    },
+    placeholder: {
+      type: String,
+      default: '请填写提示文字'
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    },
+    color: {
+      type: String,
+      default: 'black'
+    },
+    fontSize: {
+      type: Number,
+      default: 14
+    },
+    lineHeight: {
+      type: Number,
+      default: 1
+    },
+    borderWidth: {
+      type: Number,
+      default: 1
+    },
+    borderRadius: {
+      type: Number,
+      default: 0
+    },
+    borderColor: {
+      type: String,
+      default: '#ced4da'
+    },
+    borderStyle: {
+      type: String,
+      default: 'solid'
+    },
+    textAlign: {
+      type: String,
+      default: 'center'
+    }
+  },
+  editorConfig: {
+    propsConfig: {
+      // text: {
+      //   type: 'a-input',
+      //   label: '按钮文字',
+      //   require: true,
+      //   defaultPropValue: '双击修改文字'
+      // },
+      fontSize: {
+        type: 'a-input-number',
+        label: '字号(px)',
+        require: true,
+        prop: {
+          step: 1,
+          min: 12,
+          max: 144
+        },
+        defaultPropValue: 14
+      },
+      color: {
+        type: 'a-input',
+        label: '文字颜色',
+        // !#zh 为编辑组件指定 prop
+        prop: {
+          type: 'color'
+        },
+        require: true,
+        defaultPropValue: 'black'
+      },
+      backgroundColor: {
+        type: 'a-input', // lbs-color-picker
+        label: '背景颜色',
+        prop: {
+          type: 'color'
+        },
+        require: true,
+        defaultPropValue: '#ffffff' // TODO why logogram for color does't work?
+      },
+      borderColor: {
+        type: 'a-input', // lbs-color-picker
+        label: '边框颜色',
+        prop: {
+          type: 'color'
+        },
+        require: true,
+        defaultPropValue: '#333333'
+      },
+      borderWidth: {
+        type: 'a-input-number',
+        label: '边框宽度(px)',
+        require: true,
+        prop: {
+          step: 1,
+          min: 1,
+          max: 10
+        },
+        defaultPropValue: 1
+      },
+      borderRadius: {
+        type: 'a-input-number',
+        label: '圆角(px)',
+        require: true,
+        prop: {
+          step: 0.1,
+          min: 0,
+          max: 10
+        },
+        defaultPropValue: 0
+      },
+      borderStyle: {
+        type: 'a-input',
+        label: '边框形式',
+        require: true,
+        defaultPropValue: 'solid'
+      },
+      lineHeight: {
+        type: 'a-input-number',
+        label: '行高',
+        require: true,
+        prop: {
+          step: 0.1,
+          min: 0.1,
+          max: 10
+        },
+        defaultPropValue: 1
+      },
+      textAlign: {
+        type: 'lbs-text-align',
+        label: '文字对齐',
+        require: true,
+        defaultPropValue: 'center'
+      }
+    },
+    components: {
+      'lbs-text-align': {
+        template: `
+          <div class="wrap">
+            <a-radio-group v-model="value_" size="small">
+              <a-tooltip effect="dark" :content="item.label" placement="top" :key="index" v-for="(item, index) in textAlignTabs">
+                <a-radio-button :label="item.value">
+                  <!-- issue #8 -->
+                  <i :class="['fa', 'fa-align-'+item.value]" aria-hidden="true"></i>
+                </a-radio-button>
+              </a-tooltip>
+            </a-radio-group>
+          </div>`,
+        props: {
+          value: {
+            type: [String, Number]
+          }
+        },
+        data: () => ({
+          textAlignTabs: [{
+            label: '左对齐',
+            value: 'left'
+          },
+          {
+            label: '居中对齐',
+            value: 'center'
+          },
+          {
+            label: '右对齐',
+            value: 'right'
+          }]
+        }),
+        computed: {
+          value_: {
+            // TODO 关于箭头函数中的this：这里不能写成箭头函数，否则 this 为 undefined，为何？
+            // http://davidshariff.com/blog/what-is-the-execution-context-in-javascript/
+            // https://tangxiaolang101.github.io/2016/08/01/%E6%B7%B1%E5%85%A5%E6%8E%A2%E8%AE%A8JavaScript%E7%9A%84%E6%89%A7%E8%A1%8C%E7%8E%AF%E5%A2%83%E5%92%8C%E6%A0%88%EF%BC%88What%20is%20the%20Execution%20Context%20&%20Stack%20in%20JavaScript%EF%BC%89/
+            get () {
+              return this.value
+            },
+            set (val) {
+              this.$emit('input', val)
+            }
+          }
+        }
+      },
+      'lbs-select-input-type': {
+        props: ['value'],
+        computed: {
+          value_: {
+            get () {
+              return this.value
+            },
+            set (val) {
+              this.$emit('input', val)
+            }
+          }
+        },
+        template: `
+          <a-select v-model="value_" placeholder="类型">
+            <a-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </a-option>
+          </a-select>
+        `,
+        data: () => ({
+          options: [
+            {
+              label: '文字',
+              value: 'text'
+            },
+            {
+              label: '密码',
+              value: 'password'
+            },
+            {
+              label: '日期',
+              value: 'date'
+            },
+            {
+              label: '邮箱',
+              value: 'email'
+            },
+            {
+              label: '手机号',
+              value: 'tel'
+            }
+          ]
+        })
+      }
+    }
+  }
+}
@@ -4,9 +4,26 @@ import CoreEditor from &#39;../components/core/editor/index.js&#39;
  
 import LbpButton from '../components/plugins/lbp-button'
 import LbpPicture from '../components/plugins/lbp-picture'
+import LbpText from '../components/plugins/lbp-text'
  
 const PluginList = [
   {
+    title: '文字',
+    icon: 'hand-pointer-o',
+    component: LbpText,
+    visible: true,
+    name: 'lbp-text',
+    children: [
+      {
+        title: '文字',
+        icon: 'hand-pointer-o',
+        component: LbpText,
+        visible: true,
+        name: 'lbp-text'
+      }
+    ]
+  },
+  {
     title: '按钮',
     icon: 'hand-pointer-o',
     component: LbpButton,