feat: update svg-drawing

.size-snapshot.json

@@ -1,25 +1,25 @@
 {
   "lib/index.min.js": {
-    "bundled": 143133,
-    "minified": 141985,
-    "gzipped": 36279
+    "bundled": 11721,
+    "minified": 11712,
+    "gzipped": 3739
   },
   "lib/index.cjs.js": {
-    "bundled": 360238,
-    "minified": 142287,
-    "gzipped": 36334
+    "bundled": 20486,
+    "minified": 12455,
+    "gzipped": 3808
   },
   "lib/index.esm.js": {
-    "bundled": 359695,
-    "minified": 141968,
-    "gzipped": 36255,
+    "bundled": 19981,
+    "minified": 12114,
+    "gzipped": 3712,
     "treeshaked": {
       "rollup": {
-        "code": 136505,
+        "code": 104,
         "import_statements": 14
       },
       "webpack": {
-        "code": 137780
+        "code": 1088
       }
     }
   }

package.json

@@ -41,8 +41,7 @@
     "release": "release-it"
   },
   "dependencies": {
-    "svg-drawing": "1.8.6",
-    "two.js": "0.7.0-beta.3"
+    "svg-drawing": "2.0.0-alpha.2"
   },
   "peerDependencies": {
     "react": ">=16.8.0"
@@ -72,7 +71,6 @@
     "@types/react": "16.9.2",
     "@types/react-dom": "16.9.0",
     "@types/rimraf": "2.0.2",
-    "@types/two.js": "0.7.2",
     "@types/uglifyjs-webpack-plugin": "1.1.0",
     "@types/webpack": "4.39.1",
     "@types/webpack-dev-server": "3.1.7",

src/example/app.tsx

@@ -32,9 +32,7 @@ const Example = () => {
     }
   ] = useSvgDrawing({
     penWidth: 3,
-    penColor: '#000',
-    width: 500,
-    height: 500
+    penColor: '#000'
   })
   const [randomPen, switchRandom] = useState<boolean>(false)
   const [xml, setXml] = useState('')
@@ -159,6 +157,8 @@ const Example = () => {
           <div
             ref={divRef}
             style={{
+              width: 500,
+              height: 500,
               border: '1px solid #eee',
               margin: 'auto'
             }}

src/useDrawing.ts

@@ -1,7 +1,5 @@
 import React, { useRef, useEffect, useCallback, MutableRefObject } from 'react'
-import Two from 'two.js'
 import { SvgDrawing, DrawingOption } from 'svg-drawing'
-import { downloadBlob } from './utils/downloadBlob'
 
 interface UseSvgDrawing {
   two: SvgDrawing | null
@@ -10,7 +8,7 @@ interface UseSvgDrawing {
   changePenColor: (penColor: DrawingOption['penColor']) => void
   changePenWidth: (penwidth: DrawingOption['penWidth']) => void
   getSvgXML: () => string | null
-  download: () => void
+  download: (ext: 'svg' | 'png' | 'jpg') => void
 }
 export const useSvgDrawing = (
   option?: Partial<DrawingOption>
@@ -19,17 +17,11 @@ export const useSvgDrawing = (
   const drawingRef = useRef<SvgDrawing | null>(null)
   const getSvgXML = useCallback(() => {
     if (!drawingRef.current) return null
-    return drawingRef.current.toSvgXml()
+    return drawingRef.current.toElement().outerHTML
   }, [])
-  const download = useCallback(() => {
+  const download = useCallback((ext: 'svg' | 'png' | 'jpg' = 'svg') => {
     if (!drawingRef.current) return
-    const base64 = drawingRef.current.toSvgBase64()
-    if (!base64) return
-    downloadBlob({
-      base64,
-      filename: `${new Date().toISOString()}.svg`,
-      mimeType: 'image/svg+xml'
-    })
+    drawingRef.current.download(ext)
   }, [])
   const changePenColor = useCallback((penColor: DrawingOption['penColor']) => {
     if (!drawingRef.current || !penColor) return
@@ -45,17 +37,13 @@ export const useSvgDrawing = (
   }, [])
   const undo = useCallback(() => {
     if (!drawingRef.current) return
-    const drawingChildren: Two.Object[] = drawingRef.current.scene.children
-    if (drawingChildren.length === 0) return
-    drawingRef.current.remove(drawingChildren[drawingChildren.length - 1])
+    drawingRef.current.undo()
   }, [])
   useEffect(() => {
     if (drawingRef.current) return
     if (!renderRef.current) return
-    drawingRef.current = new SvgDrawing({
-      ...option,
-      el: renderRef.current,
-      autostart: true
+    drawingRef.current = new SvgDrawing(renderRef.current, {
+      ...option
     })
   })
 

yarn.lock

@@ -1653,11 +1653,6 @@
   resolved "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.5.tgz#9adbc12950582aa65ead76bffdf39fe0c27a3c02"
   integrity sha512-/gG2M/Imw7cQFp8PGvz/SwocNrmKFjFsm5Pb8HdbHkZ1K8pmuPzOX4VeVoiEecFCVf4CsN1r3/BRvx+6sNqwtQ==
 
-"@types/two.js@0.7.2":
-  version "0.7.2"
-  resolved "https://registry.npmjs.org/@types/two.js/-/two.js-0.7.2.tgz#46b1750681850ab9f910c48c4c605bec1d5d5147"
-  integrity sha512-2IR3lqfFPmfAcPtoQCbu5nob/5PjMKWsNxJcViM54QrU3Tdno3eS3u1zCDwyavHpMbY4Limh/wdAa6KHImhElg==
-
 "@types/uglify-js@*":
   version "3.9.0"
   resolved "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.9.0.tgz#4490a140ca82aa855ad68093829e7fd6ae94ea87"
@@ -10220,10 +10215,10 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
-svg-drawing@1.8.6:
-  version "1.8.6"
-  resolved "https://registry.npmjs.org/svg-drawing/-/svg-drawing-1.8.6.tgz#62446806105cee0a5b1a7b98bf5f70639dee539c"
-  integrity sha512-Vx8RWUk6ilgu67+XDh0QnH2gUPbvab6NCU+bxS3oHCaquSuMl5tY1C75PBFNjgUSs4OwBHVk+cHbu1ljTeHKKw==
+svg-drawing@2.0.0-alpha.2:
+  version "2.0.0-alpha.2"
+  resolved "https://registry.npmjs.org/svg-drawing/-/svg-drawing-2.0.0-alpha.2.tgz#ee4e2182803eb14e98ea21245dcc38e9ea6ef78a"
+  integrity sha512-kRIVyaj902eCaMIsHe82/rwVZDI8CGiV/nI2eDv+99SXFKWPI7tmVPiH66uKdEckQ99Ub6J40I3N3F0Ua207mw==
 
 symbol-tree@^3.2.2:
   version "3.2.4"
@@ -10510,11 +10505,6 @@ tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   resolved "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
   integrity sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=
 
-two.js@0.7.0-beta.3:
-  version "0.7.0-beta.3"
-  resolved "https://registry.npmjs.org/two.js/-/two.js-0.7.0-beta.3.tgz#0edff0768fd6ed10611d01aef7d0d7bcc0c538ab"
-  integrity sha512-oPEmRGCo5c296Wn40+yTxYydwPTf1iwJY+EPdLoka5TxUkLkAUo10CkQxRZJ7VGmbShBxQRXQxS5i5/otwqGZg==
-
 type-check@~0.3.2:
   version "0.3.2"
   resolved "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"