From cb5569c044ae14238afd62813f3fe9aadd723277 Mon Sep 17 00:00:00 2001
From: ly525 <lantern.done@gmail.com>
Date: Sun, 30 Aug 2020 14:55:06 +0800
Subject: [PATCH] =?UTF-8?q?feat(canvas):=20Place=20the=20element=20where?=
 =?UTF-8?q?=20the=20mouse=20is=20released;=20!#zh:=20=E5=B0=86=E5=85=83?=
 =?UTF-8?q?=E7=B4=A0=E6=94=BE=E5=9C=A8=E9=BC=A0=E6=A0=87=E6=9D=BE=E5=BC=80?=
 =?UTF-8?q?=E7=9A=84=E4=BD=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front-end/h5/src/components/core/editor/drag-mixin.js | 4 ++--
 front-end/h5/src/components/core/models/element.js    | 9 ++++++---
 front-end/h5/src/store/modules/element.js             | 2 ++
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/front-end/h5/src/components/core/editor/drag-mixin.js b/front-end/h5/src/components/core/editor/drag-mixin.js
index cddb9a7e..7b3170b1 100644
--- a/front-end/h5/src/components/core/editor/drag-mixin.js
+++ b/front-end/h5/src/components/core/editor/drag-mixin.js
@@ -70,7 +70,7 @@ export default {
   methods: {
     /**
      *
-     * @param {*} element
+     * @param {*} element shortcutItem
      * @param {*} e
      */
     handleDragStartFromMixin (element, e) {
@@ -129,7 +129,7 @@ export default {
       const position = canvasWrapper.getBoundingClientRect()
       this.dragElement && this.clone({
         ...this.dragElement,
-        customStyle: {
+        dragStyle: {
           left: e.clientX - layerX - position.left,
           top: e.clientY - layerY - position.top
         }
diff --git a/front-end/h5/src/components/core/models/element.js b/front-end/h5/src/components/core/models/element.js
index 157174c2..cd1cf2e1 100644
--- a/front-end/h5/src/components/core/models/element.js
+++ b/front-end/h5/src/components/core/models/element.js
@@ -44,7 +44,8 @@ class Element {
     return {
       ...defaultStyle,
       zindex: ele.zindex,
-      ...(ele.extra && ele.extra.defaultStyle)
+      ...(ele.extra && ele.extra.defaultStyle),
+      ...ele.dragStyle // 拖拽结束落点的top、left
     }
   }
 
@@ -52,11 +53,13 @@ class Element {
     if (typeof ele.pluginProps === 'object') {
       return cloneObj({ ...ele.pluginProps, uuid: this.uuid })
     }
-    return this.getDefaultPluginProps(ele.props, ele.shortcutProps)
+    return this.getDefaultPluginProps(ele)
   }
 
   // init prop of plugin
-  getDefaultPluginProps (props = {}, shortcutProps) {
+  getDefaultPluginProps (ele) {
+    const { props = {}, shortcutProps = {} } = ele
+
     let pluginProps = {
       uuid: this.uuid
     }
diff --git a/front-end/h5/src/store/modules/element.js b/front-end/h5/src/store/modules/element.js
index 89bcbaa4..7d5da131 100644
--- a/front-end/h5/src/store/modules/element.js
+++ b/front-end/h5/src/store/modules/element.js
@@ -41,6 +41,8 @@ export const mutations = {
       case 'add':
         const vm = getVM(value.name)
         vm.$options.shortcutProps = value.shortcutProps
+        // 用于拖拽结束，确定最终放置的位置
+        vm.$options.dragStyle = value.dragStyle // {left: Number, top: Number}
         const element = new Element(vm.$options)
         elements.push(element)
         break