update document (#199)

example/index.html

@@ -5,9 +5,10 @@
       <div id="anim" class="box"></div>
     </div>
     <button id="clear">Clear</button>
-    <button id="download">Download</button>
-    <button id="start">animation start</button>
-    <button id="stop">animation start</button>
+    <button id="download">Download svg</button>
+    <button id="start">Start animation</button>
+    <button id="stop">Stop animation</button>
+    <button id="downloadAnim">Donwload animation svg</button>
     <style>
       .drawarea {
         display: flex;
@@ -22,7 +23,7 @@
     </style>
     <div id="anim"></div>
     <!-- For legacy browser.
-      <script src="https://unpkg.com/svg-drawing@2.1.1/lib/index.min.js"></script>
+      <script src="https://unpkg.com/svg-drawing@3.0.0/lib/index.min.js"></script>
       <script>
       // var Mod = window['svg-drawing']
       // Var SvgDrawing = Mod.SvgDrawing
@@ -34,7 +35,7 @@
       import {
         SvgDrawing,
         SvgAnimation
-      } from 'https://unpkg.com/svg-drawing@2.1.1/lib/index.esm.js'
+      } from 'https://unpkg.com/svg-drawing@3.0.0/lib/index.esm.js'
 
       // Render Drawing area
       // Drawing area will be resized to fit the rendering area
@@ -50,49 +51,52 @@
       // Render Animation Area
       // It is resized to fit the rendering area as well as the SvgDrawing area.
       const animEl = document.getElementById('anim')
-      const anim = new SvgAnimation(animEl, {
-        ms: 20
-      })
-
-      // Example stroke animation.
-      // Callback function to set SvgAnimation
-      // Since the Path Object before animation is passed as an argument, it is converted and returned.
-      let cur = 0
-      const drawingAnimation = paths => {
-        const total = paths.reduce((l, p) => l + p.commands.length, 0)
-        if (cur > total) cur = 0
-        else cur += 1
-        const update = []
-        let count = cur
-        for (let i = 0; i < paths.length; i += 1) {
-          if (count < paths[i].commands.length) {
-            paths[i].commands = paths[i].commands.slice(0, count)
-            update.push(paths[i])
-            break
-          }
-          count -= paths[i].commands.length
-          update.push(paths[i])
-        }
-        return update
-      }
+      const anim = new SvgAnimation(animEl)
 
       const start = document.getElementById('start')
       start.onclick = () => {
         // Sets the animation callback function
-        anim.setAnimation(drawingAnimation)
+        anim.setAnimation(
+          // Example drawing animation.
+          // Since the Path Object before animation is passed as an argument, it is converted and returned.
+          (paths, fid) => {
+            let len = fid
+            const update = []
+            for (let i = 0; i < paths.length; i += 1) {
+              if (len < paths[i].commands.length) {
+                paths[i].commands = paths[i].commands.slice(0, len)
+                update.push(paths[i])
+                break
+              }
+              len -= paths[i].commands.length
+              update.push(paths[i])
+            }
+            return update
+          },
+          // setAnimation options. `repeatCount` is related to downloadAnimation methods.
+          {
+            repeatCount: 1,
+            ms: 20
+          }
+        )
         // Copy drawwing data
         anim.copy(draw)
-        // Start Animation
+        // Start animation
         anim.start()
       }
 
       const stop = document.getElementById('stop')
       stop.onclick = () => {
         // Stop Animation
         anim.stop()
-        // Put it back before animating
+        // Restore svg before animation.
         anim.restore()
       }
+      const da = document.getElementById('downloadAnim')
+      da.onclick = () => {
+        // Download svg with animate element.
+        anim.downloadAnimation()
+      }
     </script>
   </body>
 </html>

src/animation.ts

@@ -43,12 +43,14 @@ export class SvgAnimation extends Renderer {
     fn: FrameAnimation,
     {
       frames,
-      repeatCount
-    }: { frames?: number; repeatCount?: number | string } = {}
+      repeatCount,
+      ms
+    }: { frames?: number; repeatCount?: number | string; ms?: number } = {}
   ): void {
     this._anim = fn
     this._framesNumber = frames
     this._repeatCount = repeatCount ? `${repeatCount}` : 'indefinite'
+    if (ms) this.ms = ms
   }
 
   public stop(): boolean {
@@ -73,12 +75,14 @@ export class SvgAnimation extends Renderer {
   }
 
   public start(): void {
+    // If do not this first, this cannot get the number of frames well.
+    this.stop()
+    this._registerRestorePaths()
+
     let index = 0
     let start: number | undefined
     const ms = this.ms
     const loopCount: number = this._getFramesNumber()
-    this.stop()
-    this._registerPaths()
     const frame: FrameRequestCallback = timestamp => {
       if (ms !== this.ms) {
         this.restore()
@@ -104,7 +108,7 @@ export class SvgAnimation extends Renderer {
     // If the animation is stopped, read the currently displayed Svg data.
     // If stopped in the middle, SVG in that state is displayed
     if (!this._stop) {
-      this._registerPaths()
+      this._registerRestorePaths()
     }
 
     const loopNumber = this._getFramesNumber()
@@ -227,7 +231,7 @@ export class SvgAnimation extends Renderer {
       : this._restorePaths.reduce((l, p) => l + p.commands.length, 0)
   }
 
-  private _registerPaths() {
+  private _registerRestorePaths() {
     this._restorePaths = this.clonePaths().map((p, i) => {
       p.attrs.id = `t${i}`
       return p

src/example/app.tsx

@@ -10,9 +10,43 @@ import { render } from 'react-dom'
 import { SvgDrawing, SvgAnimation, FrameAnimation, Command, Point } from '../'
 // import Pressure from 'pressure'
 
+const size = 30
+const colorList = [
+  'none',
+  '#F44336',
+  '#E91E63',
+  '#9C27B0',
+  '#673AB7',
+  '#3F51B5',
+  '#2196F3',
+  '#00BCD4',
+  '#009688',
+  '#4CAF50',
+  '#8BC34A',
+  '#CDDC39',
+  '#FFEB3B',
+  '#FFC107',
+  '#FF9800',
+  '#FF5722',
+  '#795548',
+  '#ddd',
+  '#9E9E9E',
+  '#444',
+  'black'
+]
+
+const getRandomInt = (max: number): number =>
+  Math.floor(Math.random() * Math.floor(max))
+const getRandomColor = (): string =>
+  `#${Array.from({ length: 3 }, () =>
+    String(getRandomInt(255).toString(16)).padStart(2, '0')
+  ).join('')}`
+
+const CANVAS_SIZE = innerHeight > innerWidth ? '98vw' : '49vw'
+
 const shake: FrameAnimation = paths => {
-  const shaking = 5
-  const randomShaking = (): number => Math.random() * shaking - shaking / 2
+  const range = 5
+  const randomShaking = (): number => Math.random() * range - range / 2
   for (let i = 0; i < paths.length; i += 1) {
     paths[i].commands = paths[i].commands.map((c: Command) => {
       c.point = c.point?.add(new Point(randomShaking(), randomShaking()))
@@ -24,6 +58,32 @@ const shake: FrameAnimation = paths => {
   return paths
 }
 
+const colorfulList = [
+  '#F44336',
+  '#E91E63',
+  '#9C27B0',
+  '#673AB7',
+  '#3F51B5',
+  '#2196F3',
+  '#00BCD4',
+  '#009688',
+  '#4CAF50',
+  '#8BC34A',
+  '#CDDC39',
+  '#FFEB3B',
+  '#FFC107',
+  '#FF9800',
+  '#FF5722'
+]
+
+const colorfulAnimation: FrameAnimation = (paths, fid) => {
+  for (let i = 0; i < paths.length; i += 1) {
+    paths[i].stroke = colorfulList[fid % colorfulList.length]
+    paths[i].fill = colorfulList[(fid + 4) % colorfulList.length]
+  }
+  return paths
+}
+
 const drawingAnimation: FrameAnimation = (paths, count) => {
   const update = []
   for (let i = 0; i < paths.length; i += 1) {
@@ -38,55 +98,23 @@ const drawingAnimation: FrameAnimation = (paths, count) => {
   return update
 }
 
-const lattice = (size: number) => `
+const lattice = (s: number) => `
   repeating-linear-gradient(
     90deg,
     #ddd ,
     #ddd 1px,
     transparent 1px,
-    transparent ${String(size)}px
+    transparent ${String(s)}px
   ),
   repeating-linear-gradient(
     0deg,
     #ddd ,
     #ddd 1px,
     transparent 1px,
-    transparent ${String(size)}px
+    transparent ${String(s)}px
   )
 `
-const size = 30
-const colorList = [
-  'none',
-  '#F44336',
-  '#E91E63',
-  '#9C27B0',
-  '#673AB7',
-  '#3F51B5',
-  '#2196F3',
-  '#00BCD4',
-  '#009688',
-  '#4CAF50',
-  '#8BC34A',
-  '#CDDC39',
-  '#FFEB3B',
-  '#FFC107',
-  '#FF9800',
-  '#FF5722',
-  '#795548',
-  '#ddd',
-  '#9E9E9E',
-  '#444',
-  'black'
-]
 
-const getRandomInt = (max: number): number =>
-  Math.floor(Math.random() * Math.floor(max))
-const getRandomColor = (): string =>
-  `#${Array.from({ length: 3 }, () =>
-    String(getRandomInt(255).toString(16)).padStart(2, '0')
-  ).join('')}`
-
-const CANVAS_SIZE = innerHeight > innerWidth ? '98vw' : '49vw'
 const Example = () => {
   const divRef = useRef<HTMLDivElement | null>(null)
   const drawingRef = useRef<SvgDrawing | null>(null)
@@ -265,8 +293,7 @@ const Example = () => {
     if (!animationRef.current) return
     if (!drawingRef.current) return
     animationRef.current.setAnimation(shake, {
-      frames: 3,
-      repeatCount: 100
+      frames: 3
     })
     animationRef.current.copy(drawingRef.current)
     animationRef.current.start()
@@ -280,6 +307,15 @@ const Example = () => {
     animationRef.current.copy(drawingRef.current)
     animationRef.current.start()
   }, [])
+  const handleClickColorfulAnimation = useCallback(() => {
+    if (!animationRef.current) return
+    if (!drawingRef.current) return
+    animationRef.current.setAnimation(colorfulAnimation, {
+      frames: colorfulList.length
+    })
+    animationRef.current.copy(drawingRef.current)
+    animationRef.current.start()
+  }, [])
   const handleClickStop = useCallback(() => {
     if (!animationRef.current) return
     animationRef.current.stop()
@@ -475,6 +511,7 @@ const Example = () => {
             <h3>Animation methods</h3>
             <button onClick={handleClickShake}>Shaking</button>
             <button onClick={handleClickDrawingAnimation}>Drawing</button>
+            <button onClick={handleClickColorfulAnimation}>Colorful</button>
             <button onClick={handleClickStop}>Stop</button>
             <button onClick={handleClickRestore}>Restore</button>
             <button onClick={handleDownloadAnimation}>