feat(editor): support move plugin on cawqnvas(zh: 画布上元素支持移动)

ly525
1 parent 25dbd43c
Showing 5 changed files with 233 additions and 16 deletions
front-end/h5/src/components/core/editor/canvas/edit.js
front-end/h5/src/components/core/editor/index.js
front-end/h5/src/components/core/models/element.js
front-end/h5/src/components/core/styles/index.scss
front-end/h5/src/components/core/support/shape.js
+import Shape from '../../support/shape'
 export default {
-  props: ['elements', 'handleElementClick'],
+  props: ['elements', 'editingElement', 'handleClickElementProp', 'handleClickCanvasProp'],
   methods: {
     /**
      * #!zh: renderCanvas 渲染中间画布
@@ -10,17 +11,38 @@ export default {
      */
     renderCanvas (h, elements) {
       return (
-        <div style={{ height: '100%' }}>
+        <div
+          style={{ height: '100%', position: 'relative' }}
+          class="canvas-editor-wrapper"
+          onClick={this.handleClickCanvasProp}
+        >
           {
             elements.map((element, index) => {
+              const style = element.getStyle()
               const data = {
-                style: element.getStyle(),
+                style,
+                class: 'element-on-edit-canvas', // TODO 添加为何添加 class 的原因：与 handleClickCanvas 配合
                 props: element.pluginProps, // #6 #3
                 nativeOn: {
-                  click: () => this.handleElementClick(element)
+                  // 高亮当前点击的元素
+                  // click: () => this.handleClickElementProp(element)
                 }
               }
-              return h(element.name, data)
+              return (
+                <Shape
+                  element={element}
+                  editingElement={this.editingElement}
+                  active={this.editingElement === element}
+                  handleMousedownProp={() => {
+                    // 在 shape 上面添加 mousedown，而非 plugin 本身添加 onClick 的原因：
+                    // 在 mousedown 的时候，即可激活 editingElement(当前选中元素)
+                    // 这样，就不用等到鼠标抬起的时候，也就是 plugin 的 onClick 生效的时候，才给选中的元素添加边框等选中效果
+                    this.handleClickElementProp(element)
+                  }}
+                >
+                  {h(element.name, data)}
+                </Shape>
+              )
             })
           }
         </div>
@@ -54,6 +54,11 @@ export default {
     },
     setCurrentEditingElement (element) {
       this.editingElement = element
+    },
+    handleClickCanvas (e) {
+      if (!e.target.classList.contains('element-on-edit-canvas')) {
+        this.editingElement = null
+      }
     }
   },
   render (h) {
@@ -104,7 +109,15 @@ export default {
               </div>
               <div class='canvas-wrapper'>
                 {/* { this.isPreviewMode ? this.renderPreview(h, this.elements) : this.renderCanvas(h, this.elements) } */}
-                { this.isPreviewMode ? <RenderPreviewCanvas elements={this.elements}/> : <RenderEditCanvas elements={this.elements} handleElementClick={this.setCurrentEditingElement} /> }
+                { this.isPreviewMode
+                  ? <RenderPreviewCanvas elements={this.elements}/>
+                  : <RenderEditCanvas
+                    elements={this.elements}
+                    handleClickElementProp={this.setCurrentEditingElement}
+                    handleClickCanvasProp={this.handleClickCanvas}
+                    editingElement={this.editingElement}
+                  />
+                }
               </div>
             </a-layout-content>
           </a-layout>
@@ -16,13 +16,15 @@ class Element {
     this.name = ele.name
     this.editorConfig = ele.editorConfig || {}
     this.pluginProps = {}
+    this.commonStyle = {}
     this.init()
   }
   init () {
+    const commonStyle = this.commonStyle
     // init common props
     Object.keys(defaultProps).forEach(key => {
-      this[key] = defaultProps[key]
+      commonStyle[key] = defaultProps[key]
     })
     // init prop of plugin
@@ -39,15 +41,16 @@ class Element {
   getStyle () {
     const pluginProps = this.pluginProps
+    const commonStyle = this.commonStyle
     let style = {
-      top: `${pluginProps.top || this.top}px`,
-      left: `${pluginProps.left || this.left}px`,
-      width: `${pluginProps.width || this.width}px`,
-      height: `${pluginProps.height || this.height}px`,
-      fontSize: `${pluginProps.fontSize || this.fontSize}px`,
-      color: pluginProps.color || this.color,
-      backgroundColor: pluginProps.backgroundColor || this.backgroundColor,
-      textAlign: pluginProps.textAlign || this.textAlign
+      top: `${pluginProps.top || commonStyle.top}px`,
+      left: `${pluginProps.left || commonStyle.left}px`,
+      width: `${pluginProps.width || commonStyle.width}px`,
+      height: `${pluginProps.height || commonStyle.height}px`,
+      fontSize: `${pluginProps.fontSize || commonStyle.fontSize}px`,
+      color: pluginProps.color || commonStyle.color,
+      backgroundColor: pluginProps.backgroundColor || commonStyle.backgroundColor,
+      textAlign: pluginProps.textAlign || commonStyle.textAlign
     }
     return style
   }
@@ -8,7 +8,7 @@
       // background: rgba(255,255,255,.2);
       margin: 16px 28px 16px 0;
       float: left;
-    
+
       line-height: 31px;
       text-align: center;
       color: white;
@@ -28,6 +28,22 @@
     }
   }
+  .canvas-editor-wrapper {
+    .element--editing {
+      outline: 1px dashed #70c0ff !important;
+    }
+
+    // !#zh 控制缩放大小的圆点
+    .shape__scale-point {
+      position: absolute;
+      background: #fff;
+      border: 1px solid rgb(89, 199, 249);
+      width: 6px;
+      height: 6px;
+      z-index: 1;
+      border-radius: 50%;
+    }
+  }
 }
+/**
+ * #!zh: 上下左右 对应的 东南西北
+ * #!en: top(north)、bottom(south)、left(west)、right(east)
+ */
+const directionKey = {
+  t: 'n',
+  b: 's',
+  l: 'w',
+  r: 'e'
+}
+
+// #!zh: 四个边角、两条中线上的点
+const points = ['lt', 'rt', 'lb', 'rb', 'l', 'r', 't', 'b']
+
+export default {
+  props: ['element', 'active', 'editingElement', 'handleMousedownProp'],
+  methods: {
+    /**
+     * 通过方位计算样式，主要是 top、left、鼠标样式
+     */
+    getPointStyle (point, isWrapElement = true) {
+      // const eleStyle = this.numbericElementStyle
+      const pos = this.element.commonStyle
+      const top = pos.top - 4 // !#zh 减4是为了让元素能够处于 border 的中间
+      const left = pos.left - 4
+      const height = pos.height
+      const width = pos.width
+      let hasT = /t/.test(point)
+      let hasB = /b/.test(point)
+      let hasL = /l/.test(point)
+      let hasR = /r/.test(point)
+      let newLeft = 0
+      let newTop = 0
+      if (point.length === 2) {
+        newLeft = hasL ? 0 : width
+        newTop = hasT ? 0 : height
+      } else {
+        // !#zh 上下点，宽度固定在中间
+        if (hasT || hasB) {
+          newLeft = width / 2
+          newTop = hasT ? 0 : height
+        }
+        // !#zh 左右点，高度固定在中间
+        if (hasL || hasR) {
+          newLeft = hasL ? 0 : width
+          newTop = height / 2
+        }
+      }
+      const style = {
+        left: `${newLeft + (isWrapElement ? 0 : left)}px`,
+        top: `${newTop + (isWrapElement ? 0 : top)}px`,
+        cursor: point.split('').reverse().map(m => directionKey[m]).join('') + '-resize'
+      }
+      return style
+    },
+    /**
+     * !#zh 主要目的是：阻止冒泡
+     */
+    handleWrapperClick (e) {
+      e.stopPropagation()
+      e.preventDefault()
+    },
+    mousedownForMark (point, downEvent) {
+      downEvent.stopPropagation()
+      downEvent.preventDefault() // Let's stop this event.
+      // let eleStyle = this.numbericElementStyle
+      const pos = this.element.commonStyle
+      let height = pos.height
+      let width = pos.width
+      let top = pos.top
+      let left = pos.left
+      let startX = downEvent.clientX
+      let startY = downEvent.clientY
+      let move = moveEvent => {
+        let currX = moveEvent.clientX
+        let currY = moveEvent.clientY
+        let disY = currY - startY
+        let disX = currX - startX
+        let hasT = /t/.test(point)
+        let hasB = /b/.test(point)
+        let hasL = /l/.test(point)
+        let hasR = /r/.test(point)
+        let newHeight = +height + (hasT ? -disY : hasB ? disY : 0)
+        let newWidth = +width + (hasL ? -disX : hasR ? disX : 0)
+        pos.height = newHeight > 0 ? newHeight : 0
+        pos.width = newWidth > 0 ? newWidth : 0
+        pos.left = +left + (hasL ? disX : 0)
+        pos.top = +top + (hasT ? disY : 0)
+      }
+      let up = () => {
+        document.removeEventListener('mousemove', move)
+        document.removeEventListener('mouseup', up)
+      }
+      document.addEventListener('mousemove', move)
+      document.addEventListener('mouseup', up)
+    },
+    /**
+     * !#zh 给 当前选中元素 添加鼠标移动相关事件
+     *
+     * @param {Object} element
+     * @param {mouseEvent} e
+     */
+    mousedownForElement (e, element) {
+      const pos = element.commonStyle
+      let startY = e.clientY
+      let startX = e.clientX
+      let startTop = pos.top
+      let startLeft = pos.left
+
+      let move = moveEvent => {
+        // !#zh 移动的时候，不需要向后代元素传递事件，只需要单纯的移动就OK
+        moveEvent.stopPropagation()
+        moveEvent.preventDefault()
+
+        let currX = moveEvent.clientX
+        let currY = moveEvent.clientY
+        pos.top = currY - startY + startTop
+        pos.left = currX - startX + startLeft
+      }
+
+      let up = moveEvent => {
+        document.removeEventListener('mousemove', move, true)
+        document.removeEventListener('mouseup', up, true)
+      }
+      document.addEventListener('mousemove', move, true)
+      document.addEventListener('mouseup', up, true)
+      // TODO add comment
+      return true
+    },
+    handleMousedown (e) {
+      if (this.handleMousedownProp) {
+        this.handleMousedownProp()
+        this.mousedownForElement(e, this.element)
+      }
+    }
+  },
+  render (h) {
+    return (
+      <div
+        onClick={this.handleWrapperClick}
+        onMousedown={this.handleMousedown}
+        style={{ ...this.element.getStyle(), position: 'absolute' }}
+      >
+        {
+          this.active &&
+          points.map(point => {
+            const pointStyle = this.getPointStyle(point)
+            return (
+              <div
+                key={point}
+                data-point={point}
+                style={pointStyle}
+                class="shape__scale-point"
+                onMousedown={this.mousedownForMark.bind(this, point)}
+              ></div>
+            )
+          })
+        }
+        {this.$slots.default}
+      </div>
+    )
+  }
+}