refactor: remove style dom and fix animate, close #12

Author: QingWei-Li

Diff for: docs/home.vue

@@ -8,7 +8,6 @@
       :data="data"
       :gradient="gradient"
       auto-draw
-      :stroke-width="1.4"
       smooth>
     </trend>
 
@@ -19,24 +18,24 @@
 </template>
 
 <script>
-  import Trend from '../src/index.js'
-  import hanabi from 'hanabi'
-  import GithubBadge from 'vue-github-badge'
+import Trend from '../src/index.js';
+import hanabi from 'hanabi';
+import GithubBadge from 'vue-github-badge';
 
   export default {
     components: { Trend, GithubBadge },
 
-    created () {
-      this.data = [0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0]
-      this.gradient = ['#6fa8dc', '#42b983', '#2c3e50']
+  created() {
+    this.data = [0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0];
+    this.gradient = ['#6fa8dc', '#42b983', '#2c3e50'];
       this.code = hanabi(`<trend
   :data="[0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0]"
   :gradient="['#6fa8dc', '#42b983', '#2c3e50']"
   auto-draw
   smooth>
-</trend>`)
-    }
+</trend>`);
   }
+};
 </script>
 
 <style>

Diff for: src/components/gradient.js

@@ -3,24 +3,33 @@ export default {
 
   render (h) {
     const { gradient, id } = this
-    const len = gradient.length - 1
-    const stops = gradient.slice().reverse().map((color, index) =>
-      h('stop', {
-        attrs: {
-          offset: index / len,
-          'stop-color': color
-        }
-      })
-    )
+    const len = gradient.length - 1 || 1
+    const stops = gradient
+      .slice()
+      .reverse()
+      .map((color, index) =>
+        h('stop', {
+          attrs: {
+            offset: index / len,
+            'stop-color': color
+          }
+        })
+      )
 
     return h('defs', [
-      h('linearGradient', {
-        attrs: {
-          id,
-          x1: 0, y1: 0,
-          x2: 0, y2: 1
-        }
-      }, stops)
+      h(
+        'linearGradient',
+        {
+          attrs: {
+            id,
+            x1: 0,
+            y1: 0,
+            x2: 0,
+            y2: 1
+          }
+        },
+        stops
+      )
     ])
   }
 }

Diff for: src/components/path.js

@@ -1,11 +1,11 @@
-import { genPoints, linearPath, smoothPath } from '../helpers/path'
+import { genPoints, genPath } from '../helpers/path'
 
 export default {
   props: ['smooth', 'data', 'boundary', 'radius', 'id'],
 
   render (h) {
     const points = genPoints(this.data, this.boundary)
-    const d = (this.smooth ? smoothPath : linearPath)(points, this.radius)
+    const d = genPath(points, this.smooth ? this.radius : 0)
 
     return h('path', {
       attrs: { d, fill: 'none', stroke: `url(#${this.id})` }

Diff for: src/components/trend.js

@@ -1,6 +1,5 @@
 import Path from './path'
 import Gradient from './gradient'
-import { injectStyle } from '../helpers/dom'
 
 export default {
   name: 'Trend',
@@ -19,7 +18,10 @@ export default {
       type: String,
       default: 'ease'
     },
-    gradient: Array,
+    gradient: {
+      type: Array,
+      default: () => ['#000']
+    },
     height: Number,
     width: Number,
     padding: {
@@ -33,59 +35,30 @@ export default {
     smooth: Boolean
   },
 
-  destroyed () {
-    this.removeStyle()
-  },
-
-  methods: {
-    addStyle () {
-      this.removeStyle()
-      const len = this.$refs.path.$el.getTotalLength()
-      const { pathId, autoDrawDuration, autoDrawEasing, autoDraw } = this
-
-      if (!autoDraw) {
-        return
-      }
-
-      this.styleEl = injectStyle(`
-@keyframes ${pathId}-autodraw {
-  0% {
-  stroke-dashoffset: ${len};
-  stroke-dasharray: ${len};
-}
-100% {
-  stroke-dashoffset: 0;
-  stroke-dasharray: ${len};
-}
-100% {
-  stroke-dashoffset: '';
-  stroke-dasharray: '';
-}
-}
-@keyframes ${pathId}-autodraw-cleanup {
-to {
-  stroke-dashoffset: '';
-  stroke-dasharray: '';
-  }
-}
-#${pathId} {
-animation:
-  ${pathId}-autodraw ${autoDrawDuration}ms ${autoDrawEasing},
-  ${pathId}-autodraw-cleanup 1ms ${autoDrawDuration}ms;
-}`)
-    },
-
-    removeStyle () {
-      this.styleEl && this.styleEl.remove()
-    }
-  },
-
   watch: {
     data: {
       immediate: true,
       handler (val) {
-        if (!val || val.length < 2) return
-        this.$nextTick(this.addStyle)
+        this.$nextTick(() => {
+          if (!this.autoDraw) {
+            return
+          }
+
+          const path = this.$refs.path.$el
+          const length = path.getTotalLength()
+
+          path.style.transition = 'none'
+          path.style.strokeDasharray = length + ' ' + length
+          path.style.strokeDashoffset = Math.abs(
+            length - (this.lastLength || 0)
+          )
+          path.getBoundingClientRect()
+          path.style.transition = `stroke-dashoffset ${
+            this.autoDrawDuration
+          }ms ${this.autoDrawEasing}`
+          path.style.strokeDashoffset = 0
+          this.lastLength = length
+        })
       }
     }
   },
@@ -96,30 +69,31 @@ animation:
     const viewWidth = width || 300
     const viewHeight = height || 75
     const boundary = {
-      minX: padding, minY: padding,
-      maxX: viewWidth - padding, maxY: viewHeight - padding
+      minX: padding,
+      minY: padding,
+      maxX: viewWidth - padding,
+      maxY: viewHeight - padding
     }
     const props = this.$props
 
     props.boundary = boundary
     props.id = 'vue-trend-' + this._uid
-    this.pathId = props.id + '-path'
-
-    return h('svg', {
-      attrs: {
-        stroke: 'black',
-        'stroke-width': '1',
-        width: width || '100%',
-        height: height || '25%',
-        viewBox: `0 0 ${viewWidth} ${viewHeight}`
-      }
-    }, [
-      h(Gradient, { props }),
-      h(Path, {
-        props,
-        attrs: { id: this.pathId },
-        ref: 'path'
-      })
-    ])
+    return h(
+      'svg',
+      {
+        attrs: {
+          width: width || '100%',
+          height: height || '25%',
+          viewBox: `0 0 ${viewWidth} ${viewHeight}`
+        }
+      },
+      [
+        h(Gradient, { props }),
+        h(Path, {
+          props,
+          ref: 'path'
+        })
+      ]
+    )
   }
 }

Diff for: src/helpers/dom.js

@@ -8,18 +8,18 @@ function int (value) {
  * y=(y1+y2)/2
  */
 export function checkCollinear (p0, p1, p2) {
-  return int(p0.x + p2.x) === int(2 * p1.x) && int(p0.y + p2.y) === int(2 * p1.y)
+  return (
+    int(p0.x + p2.x) === int(2 * p1.x) && int(p0.y + p2.y) === int(2 * p1.y)
+  )
 }
 
 export function getDistance (p1, p2) {
-  return Math.sqrt(
-    Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2)
-  )
+  return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2))
 }
 
 export function moveTo (to, from, radius) {
   const vector = { x: to.x - from.x, y: to.y - from.y }
-  const length = Math.sqrt((vector.x * vector.x) + (vector.y * vector.y))
+  const length = Math.sqrt(vector.x * vector.x + vector.y * vector.y)
   const unitVector = { x: vector.x / length, y: vector.y / length }
 
   return {

Diff for: src/helpers/math.js

@@ -24,16 +24,10 @@ export function genPoints (arr, { minX, minY, maxX, maxY }) {
   })
 }
 
-export function linearPath (points) {
-  const { x, y } = points.shift()
-
-  return `M${x} ${y}` + points.map(({ x, y }) => `L${x} ${y}`).join('')
-}
-
 /**
  * From https://github.com/unsplash/react-trend/blob/master/src/helpers/DOM.helpers.js#L18
  */
-export function smoothPath (points, radius) {
+export function genPath (points, radius) {
   const start = points.shift()
 
   return (
@@ -58,7 +52,9 @@ export function smoothPath (points, radius) {
         const before = moveTo(prev, point, radiusForPoint)
         const after = moveTo(next, point, radiusForPoint)
 
-        return `L${before.x} ${before.y}S${point.x} ${point.y} ${after.x} ${after.y}`
+        return `L${before.x} ${before.y}S${point.x} ${point.y} ${after.x} ${
+          after.y
+        }`
       })
       .join('')
   )