feat(animation): run animations in preview mode

ly525
1 parent e7b6ed06
Showing 3 changed files with 23 additions and 7 deletions
front-end/h5/src/components/core/editor/canvas/preview.js
front-end/h5/src/components/core/models/element.js
front-end/h5/src/mixins/animation.js
+import animationMixin from '@/mixins/animation.js'
 /**
  * TODO extract page preview card used for page list
  */
 export default {
   props: ['elements'],
+  components: {
+    nodeWrapper: {
+      mixins: [animationMixin],
+      props: ['element'],
+      mounted () {
+        this.runAnimations()
+      },
+      render (h) {
+        return (
+          <div style={this.element.getStyle({ position: 'absolute' })}>{this.$slots.default}</div>
+        )
+      }
+    }
+  },
   methods: {
     renderPreview (h, elements) {
       return (
         <div style={{ height: '100%', position: 'relative' }}>
           {
             elements.map((element, index) => {
+              console.log(element.getStyle())
               /**
                * TODO 是否可以将 renderElement 进行抽象成 renderBaseElement？
                * renderBaseElement
                * -> renderBaseElementWithEvent()
                * -> renderBaseElementWithCustomStyle()
                */
-
-              return h(element.name, element.getPreviewData())
+              return <node-wrapper element={element}>{h(element.name, element.getPreviewData({ position: 'static' }))}</node-wrapper>
             })
           }
         </div>
@@ -91,8 +91,8 @@ class Element {
     }
   }
  
-  getPreviewData () {
-    const style = this.getStyle({ position: 'absolute' })
+  getPreviewData ({ position = 'static', isRem = false } = {}) {
+    const style = this.getStyle({ position })
     const data = {
       style,
       props: this.getProps({ mode: 'preview' }),
@@ -46,9 +46,10 @@ export default {
   created () {
     const that = this
     window.getEditorApp.$on('RUN_ANIMATIONS', () => {
-      if (that.active) {
-        that.runAnimations()
-      }
+      that.runAnimations()
+      // if (that.active) {
+      //   that.runAnimations()
+      // }
     })
   }