feat(guideline) en: support guideline, zh: 支持辅助线和吸附效果

ly525
1 parent fabad377
Showing 3 changed files with 96 additions and 1 deletions
front-end/h5/src/components/core/editor/canvas/edit.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', 'editingElement', 'handleClickElementProp', 'handleClickCanvasProp'],
+  data: () => ({
+    vLines: [],
+    hLines: []
+  }),
   methods: {
+    // TODO #!zh: 优化代码
+    // generate vertical line
+    drawVLine (newLeft) {
+      this.editingElement.commonStyle.left = newLeft
+      this.vLines = [{ left: newLeft }]
+    },
+    // generate horizontal line
+    drawHLine (newTop) {
+      this.editingElement.commonStyle.top = newTop
+      this.hLines = [{ top: newTop }]
+    },
+    calcX (newLeft) {
+      const uuid = this.editingElement.uuid
+      let xCoords = []
+      this.elements.filter(e => e.uuid !== uuid).forEach(e => {
+        const width = e.commonStyle.width
+        const left = e.commonStyle.left
+        xCoords = [
+          ...xCoords,
+          left,
+          left + (width / 2),
+          left + width
+        ]
+      })
+
+      xCoords.some(x => {
+        if (Math.abs(newLeft - x) <= 5) {
+          this.drawVLine(x)
+          return true
+        } else {
+          this.vLines = []
+        }
+      })
+    },
+    calcY (newTop) {
+      const uuid = this.editingElement.uuid
+      let yCoords = []
+      this.elements.filter(e => e.uuid !== uuid).forEach(e => {
+        const height = e.commonStyle.height
+        const top = e.commonStyle.top
+        yCoords = [
+          ...yCoords,
+          top,
+          top + (height / 2),
+          top + height
+        ]
+      })
+
+      yCoords.some(y => {
+        if (Math.abs(newTop - y) <= 5) {
+          this.drawHLine(y)
+          return true
+        } else {
+          this.hLines = []
+        }
+      })
+    },
+    /**
+     * #!zh: 在元素移动过程中，计算和生成辅助线
+     */
+    handleElementMove ({ top, left }) {
+      this.calcX(left)
+      this.calcY(top)
+    },
     /**
      * #!zh: renderCanvas 渲染中间画布
      * elements
@@ -39,12 +107,23 @@ export default {
                     // 这样，就不用等到鼠标抬起的时候，也就是 plugin 的 onClick 生效的时候，才给选中的元素添加边框等选中效果
                     this.handleClickElementProp(element)
                   }}
+                  handleElementMoveProp={this.handleElementMove}
                 >
                   {h(element.name, data)}
                 </Shape>
               )
             })
           }
+          {
+            this.vLines.map(line => (
+              <div class="v-line" style={{ left: `${line.left}px` }}></div>
+            ))
+          }
+          {
+            this.hLines.map(line => (
+              <div class="h-line" style={{ top: `${line.top}px` }}></div>
+            ))
+          }
         </div>
       )
     }
@@ -43,6 +43,21 @@
       z-index: 1;
       border-radius: 50%;
     }
+    // TODO #!zh: 写一个辅助线基类： base-line
+    .v-line {
+      position: absolute;
+      height: 100vh;
+      width: 1px;
+      top: 0;
+      background-color: #94f5ff;
+    }
+    .h-line {
+      position: absolute;
+      height: 1px;
+      width: 100vh;
+      left: 0;
+      background-color: #94f5ff;
+    }
   }
 }
  
@@ -13,7 +13,7 @@ const directionKey = {
 const points = ['lt', 'rt', 'lb', 'rb', 'l', 'r', 't', 'b']
  
 export default {
-  props: ['element', 'active', 'editingElement', 'handleMousedownProp'],
+  props: ['element', 'active', 'editingElement', 'handleMousedownProp', 'handleElementMoveProp'],
   methods: {
     /**
      * 通过方位计算样式，主要是 top、left、鼠标样式
@@ -116,6 +116,7 @@ export default {
         let currY = moveEvent.clientY
         pos.top = currY - startY + startTop
         pos.left = currX - startX + startLeft
+        this.handleElementMoveProp(pos)
       }
  
       let up = moveEvent => {