fix(preview): preview elements in corrent position

ly525
1 parent 2e5cd151
Showing 4 changed files with 22 additions and 12 deletions
front-end/h5/src/components/core/editor/canvas/edit.js
front-end/h5/src/components/core/editor/canvas/preview.js
front-end/h5/src/components/core/models/element.js
front-end/h5/src/components/core/support/shape.js
@@ -89,7 +89,9 @@ export default {
               const style = element.getStyle()
               const data = {
                 style,
-                class: 'element-on-edit-canvas', // TODO 添加为何添加 class 的原因：与 handleClickCanvas 配合
+                // 添加 class 的原因：与 handleClickCanvasProp 配合,
+                // 当点击编辑画布上的其它区域（clickEvent.target.classList 不包含下面的 className）的时候，设置 editingElement=null
+                class: 'element-on-edit-canvas',
                 props: element.pluginProps, // #6 #3
                 on: {
                   // 高亮当前点击的元素
@@ -3,17 +3,23 @@ export default {
   methods: {
     renderPreview (h, elements) {
       return (
-        <div style={{ height: '100%' }}>
-          {elements.map((element, index) => {
-            return (() => {
+        <div style={{ height: '100%', position: 'relative' }}>
+          {
+            elements.map((element, index) => {
+              /**
+               * TODO 是否可以将 renderElement 进行抽象成 renderBaseElement？
+               * renderBaseElement
+               * -> renderBaseElementWithEvent()
+               * -> renderBaseElementWithCustomStyle()
+               */
+              const style = element.getStyle('absolute'/** position */)
               const data = {
-                style: element.getStyle(),
-                props: element.pluginProps, // #6 #3
-                nativeOn: {}
+                style,
+                props: element.pluginProps
               }
               return h(element.name, data)
-            })()
-          })}
+            })
+          }
         </div>
       )
     }
@@ -40,7 +40,7 @@ class Element {
     })
   }
  
-  getStyle () {
+  getStyle (position = 'static') {
     const pluginProps = this.pluginProps
     const commonStyle = this.commonStyle
     let style = {
@@ -51,7 +51,8 @@ class Element {
       fontSize: `${pluginProps.fontSize || commonStyle.fontSize}px`,
       color: pluginProps.color || commonStyle.color,
       // backgroundColor: pluginProps.backgroundColor || commonStyle.backgroundColor,
-      textAlign: pluginProps.textAlign || commonStyle.textAlign
+      textAlign: pluginProps.textAlign || commonStyle.textAlign,
+      position
     }
     return style
   }
@@ -136,11 +136,12 @@ export default {
     }
   },
   render (h) {
+    const style = this.element.getStyle('absolute'/** position */)
     return (
       <div
         onClick={this.handleWrapperClick}
         onMousedown={this.handleMousedown}
-        style={{ ...this.element.getStyle(), position: 'absolute' }}
+        style={style}
       >
         {
           this.active &&