feat: add load methods

kmkzt · May 29, 2019 · fcb685b · fcb685b
1 parent 97ecd62
commit fcb685b
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 11 deletions.
diff --git a/src/SvgAnimation.ts b/src/SvgAnimation.ts
@@ -1,4 +1,5 @@
 import Two, { ConstructorParams } from 'two.js'
+import { svgFormatting } from './utils/svgFormatting'
 export interface AnimationOption extends ConstructorParams {
   el: SvgAnimation['el']
   shakingRange?: SvgAnimation['shakingRange']
@@ -16,6 +17,8 @@ export class SvgAnimation extends Two {
     this.shaking = this.shaking.bind(this)
     this.initSvgXml = this.initSvgXml.bind(this)
     this.strokeAnimation = this.strokeAnimation.bind(this)
+    this.loadScene = this.loadScene.bind(this)
+    this.loadSvgXml = this.loadSvgXml.bind(this)
     /**
      * Setup parameter
      */
@@ -70,6 +73,38 @@ export class SvgAnimation extends Two {
       sceneChildrenRestore()
     }
   }
+  /**
+   * Load SCENE
+   * @param {Two.Group} scene
+   */
+  public loadScene(scene: Two.Group) {
+    this.clear()
+    scene.children.map((twoObj: Two.Object) => {
+      this.scene.add(twoObj.clone())
+    })
+    this.update()
+  }
+  /**
+   * Load SVGXML
+   * @param {string | SVGSVGElement} svgXml
+   */
+  public loadSvgXml(svgXml: string | SVGSVGElement) {
+    const svgElement: SVGSVGElement | null = svgFormatting(svgXml)
+    if (!svgElement) return
+    const svgTwo: Two.Group = this.interpret(svgElement)
+    this.clear()
+    // get element width
+    // TODO: getelement Refactor
+    document.body.appendChild(svgElement)
+    const originWidth = svgElement.clientWidth
+    document.body.removeChild(svgElement)
+    this.scene.scale = this.width / originWidth
+    svgTwo.children.map((twoObj: Two.Object) => {
+      this.scene.add(twoObj.clone())
+    })
+    this.scene.center().translation.set(this.width / 2, this.height / 2)
+    this.update()
+  }
   /**
    * DrawingStart
    */

diff --git a/src/example/index.tsx b/src/example/index.tsx
@@ -103,14 +103,10 @@ const Example = () => {
   )
   const animationFrameUpdate = useCallback(() => {
     if (!svgAnimationRef.current || !svgDrawingRef.current) return
-    svgAnimationRef.current.clear()
-    // This is nesting <g> dom
-    // animation.current.makeGroup(svgDrawingRef.current.scene.clone())
-    svgDrawingRef.current.scene.children.map((twoObj: Two.Object) => {
-      if (!svgAnimationRef.current) return
-      svgAnimationRef.current.scene.add(twoObj.clone())
-    })
-    svgAnimationRef.current.update()
+    svgAnimationRef.current.loadScene(svgDrawingRef.current.scene)
+    // TODO: load svgXML example
+    // load SVGXML
+    // svgAnimationRef.current.loadSvgXml(svgDrawingRef.current.toSvgXml())
   }, [])
   const clickDownload = useCallback(
     (extention: keyof typeof mimeTypeMap) => (

diff --git a/src/utils/svgFormatting.ts b/src/utils/svgFormatting.ts
@@ -4,9 +4,13 @@
  * @param svgString
  * @returns {SVGSVGElement}
  */
-export const svgFormatting = (svgString: string): SVGSVGElement => {
-  const parser: DOMParser = new DOMParser()
-  const doc: Document = parser.parseFromString(svgString, 'image/svg+xml')
+export const svgFormatting = (
+  svgXML: string | SVGSVGElement
+): SVGSVGElement => {
+  const doc: Document | SVGSVGElement =
+    typeof svgXML === 'string'
+      ? new DOMParser().parseFromString(svgXML, 'image/svg+xml')
+      : svgXML
   const svgEle: SVGSVGElement = document.createElementNS(
     'http://www.w3.org/2000/svg',
     'svg'