From 204be98ba859913aae6eef19de6188477ce00a8c Mon Sep 17 00:00:00 2001
From: kmkzt <info.pscreator@gmail.com>
Date: Wed, 13 May 2020 23:26:02 +0900
Subject: [PATCH] feat: add restore methods of svg animation

---
 src/animation.ts    | 19 +++++++++----------
 src/example/app.tsx |  5 +++++
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/animation.ts b/src/animation.ts
index d8bbdafdc..ebbbbd94e 100644
--- a/src/animation.ts
+++ b/src/animation.ts
@@ -8,13 +8,13 @@ export class SvgAnimation extends Renderer {
   public ms: number
   private _stop: (() => void) | null
   private _anim: FrameAnimation | null
-  private _restore: Path[]
+  private _restorePath: Path[]
   constructor(el: HTMLElement, { background, ms }: AnimationOption) {
     super(el, { background })
     this.ms = ms ?? 60
     this._stop = null
     this._anim = null
-    this._restore = []
+    this._restorePath = []
   }
 
   public setAnimation(fn: FrameAnimation): void {
@@ -27,9 +27,14 @@ export class SvgAnimation extends Renderer {
     }
   }
 
+  public restore() {
+    this.replacePaths(this._restorePath)
+    this.update()
+  }
+
   public frame() {
     if (!this._anim) return
-    const updPaths = this._anim(this._restore.map(p => p.clone()))
+    const updPaths = this._anim(this._restorePath.map(p => p.clone()))
     this.replacePaths(updPaths)
     this.update()
   }
@@ -37,7 +42,7 @@ export class SvgAnimation extends Renderer {
   public play(): void {
     this.stop()
     const ms = this.ms
-    this._restore = this.clonePaths()
+    this._restorePath = this.clonePaths()
     const frame = () => {
       if (ms !== this.ms) {
         this.play()
@@ -45,15 +50,9 @@ export class SvgAnimation extends Renderer {
       }
       this.frame()
     }
-
-    const sceneChildrenRestore = () => {
-      this.replacePaths(this._restore)
-      this.update()
-    }
     const stopId = setInterval(frame, ms)
     this._stop = () => {
       clearInterval(stopId)
-      sceneChildrenRestore()
       this._stop = null
     }
   }
diff --git a/src/example/app.tsx b/src/example/app.tsx
index e1c099105..e25b74287 100644
--- a/src/example/app.tsx
+++ b/src/example/app.tsx
@@ -255,6 +255,10 @@ const Example = () => {
     if (!animationRef.current) return
     animationRef.current.stop()
   }, [])
+  const handleClickRestore = useCallback(() => {
+    if (!animationRef.current) return
+    animationRef.current.restore()
+  }, [])
   // TODO: fix
   // useEffect(() => {
   //   if (!divRef.current) return
@@ -394,6 +398,7 @@ const Example = () => {
         <button onClick={handleClickShake}>SHAKING ANIMATION</button>
         <button onClick={handleClickStrokeAnimation}>STROKE ANIMATION</button>
         <button onClick={handleClickStop}>STOP</button>
+        <button onClick={handleClickRestore}>RESTORE</button>
         <div>
           ANIMATION MS
           <input