refactor(shape)

ly525
1 parent cce6ac60
Showing 3 changed files with 26 additions and 13 deletions
front-end/h5/src/components/core/editor/canvas/edit.js
front-end/h5/src/components/core/support/shape.js
front-end/h5/src/store/modules/element.js
@@ -81,7 +81,12 @@ export default {
     /**
      * #!zh: 在元素移动过程中，计算和生成辅助线
      */
-    handleElementMove ({ top, left }) {
+    handleElementMove (pos) {
+      this.setElementPosition(pos)
+      this.calcX(pos.left)
+      this.calcY(pos.top)
+    },
+    handlePointMove ({ top, left }) {
       this.calcX(left)
       this.calcY(top)
     },
@@ -146,6 +151,7 @@ export default {
               }
               return (
                 <Shape
+                  defaultPosition={element.commonStyle}
                   element={element}
                   active={this.editingElement === element}
                   handleMousedownProp={() => {
@@ -154,6 +160,10 @@ export default {
                     // 这样，就不用等到鼠标抬起的时候，也就是 plugin 的 onClick 生效的时候，才给选中的元素添加边框等选中效果
                     this.setEditingElement(element)
                   }}
+                  // TODO 矩形四周的点叫什么？暂时叫 Point 吧
+                  handlePointMoveProp={pos => {
+                    this.setElementPosition(pos)
+                  }}
                   handleElementMoveProp={this.handleElementMove}
                 >
                   {h(element.name, data)}
@@ -13,14 +13,18 @@ const directionKey = {
 const points = ['lt', 'rt', 'lb', 'rb', 'l', 'r', 't', 'b']
  
 export default {
-  props: ['element', 'active', 'handleMousedownProp', 'handleElementMoveProp'],
+  props: ['defaultPosition', 'active', 'handleMousedownProp', 'handleElementMoveProp', 'handlePointMoveProp'],
+  computed: {
+    position () {
+      return { ...this.defaultPosition }
+    }
+  },
   methods: {
     /**
      * 通过方位计算样式，主要是 top、left、鼠标样式
      */
     getPointStyle (point, isWrapElement = true) {
-      // const eleStyle = this.numbericElementStyle
-      const pos = this.element.commonStyle
+      const pos = this.position
       const top = pos.top - 4 // !#zh 减4是为了让元素能够处于 border 的中间
       const left = pos.left - 4
       const height = pos.height
@@ -63,8 +67,7 @@ export default {
     mousedownForMark (point, downEvent) {
       downEvent.stopPropagation()
       downEvent.preventDefault() // Let's stop this event.
-      // let eleStyle = this.numbericElementStyle
-      const pos = this.element.commonStyle
+      const pos = { ...this.position }
       let height = pos.height
       let width = pos.width
       let top = pos.top
@@ -86,6 +89,7 @@ export default {
         pos.width = newWidth > 0 ? newWidth : 0
         pos.left = +left + (hasL ? disX : 0)
         pos.top = +top + (hasT ? disY : 0)
+        this.handlePointMoveProp(pos)
       }
       let up = () => {
         document.removeEventListener('mousemove', move)
@@ -97,11 +101,10 @@ export default {
     /**
      * !#zh 给 当前选中元素 添加鼠标移动相关事件
      *
-     * @param {Object} element
      * @param {mouseEvent} e
      */
-    mousedownForElement (e, element) {
-      const pos = element.commonStyle
+    mousedownForElement (e) {
+      const pos = { ...this.position }
       let startY = e.clientY
       let startX = e.clientX
       let startTop = pos.top
@@ -14,10 +14,10 @@ const actions = {
     commit('setEditingElement', payload)
   },
   setElementPosition ({ commit }, payload) {
-    commit('setElementPosition', payload)
+    commit('setElementCommonStyle', payload)
   },
   setElementShape ({ commit }, payload) {
-    commit('setElementShape', payload)
+    commit('setElementCommonStyle', payload)
   }
 }
  
@@ -26,10 +26,10 @@ const mutations = {
   setEditingElement (state, payload) {
     state.editingElement = payload
   },
-  setElementCommonStyle (state, commonStyle) {
+  setElementCommonStyle (state, payload) {
     state.editingElement.commonStyle = {
       ...state.editingElement.commonStyle,
-      ...commonStyle
+      ...payload
     }
   }
 }