feat: update example page

Author: kmkzt

package.json

@@ -88,6 +88,7 @@
     "node-sass": "4.12.0",
     "npm-run-all": "4.1.5",
     "postcss-loader": "3.0.0",
+    "pressure": "2.1.2",
     "prettier": "1.17.1",
     "react": "16.8.6",
     "react-dom": "16.8.6",

src/example/index.tsx

@@ -6,6 +6,7 @@ import React, {
   useState
 } from 'react'
 import { render } from 'react-dom'
+import Pressure from 'pressure'
 import { useSvgDrawing } from '../'
 
 const getRandomInt = (max: number): number =>
@@ -33,35 +34,120 @@ const Example = () => {
     width: 500,
     height: 500
   })
-
+  const [randomPen, switchRandom] = useState<boolean>(false)
   const [xml, setXml] = useState('')
+  const [penMode, setPenMode] = useState<string>('normal')
+  const [penWidth, setPenWidth] = useState<number>(5)
+  const [penThinnerWidth, setPenThinnerWidth] = useState<number>(0)
   const handleColor = useCallback(() => {
     changePenColor(getRandomColor())
   }, [changePenColor])
 
   const handlePenWidth = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
+      setPenWidth(Number(e.target.value))
       changePenWidth(Number(e.target.value))
     },
     [changePenWidth]
   )
   const handleChangeXML = useCallback(() => {
     setXml(getSvgXML())
   }, [getSvgXML])
+  const handleChangeMode = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setPenMode(e.target.value)
+    },
+    []
+  )
+  const handleUpdatePenConfig = useCallback(
+    (e: any) => {
+      if (penMode === 'rainbow') {
+        changePenColor(getRandomColor())
+        return
+      }
+      if (penMode === 'random') {
+        changePenWidth(getRandomInt(50) + 5)
+        return
+      }
+      if (penMode == 'thinner') {
+        changePenWidth(penThinnerWidth)
+      }
+      if (penMode === 'normal') {
+        changePenWidth(penWidth)
+      }
+    },
+    [penMode, penWidth, changePenWidth, changePenColor, penThinnerWidth]
+  )
+  // TODO: Fix Can not switch normal pen.
+  const pressureChange = useCallback(
+    (force: any, event: any) => {
+      setPenThinnerWidth(30 - Math.floor(force * 40))
+    },
+    [setPenThinnerWidth]
+  )
+
+  // Pressure -> https://github.com/stuyam/pressure
+  useEffect(() => {
+    if (!divRef.current) return
+    Pressure.set(divRef.current, {
+      change: pressureChange
+    })
+  }, [divRef, pressureChange])
   return (
     <Fragment>
-      <div>
-        pen width
-        <input
-          type="range"
-          defaultValue="5"
-          min={1}
-          max={50}
-          onChange={handlePenWidth}
-        />
-      </div>
-      <button onClick={undo}>Undo</button>
-      <button onClick={handleColor}>Change Color</button>
+      <fieldset>
+        <label>
+          <input
+            type="checkbox"
+            checked={penMode === 'normal'}
+            value="normal"
+            onChange={handleChangeMode}
+          />
+          Normal pen.
+        </label>
+        <label>
+          <input
+            type="checkbox"
+            checked={penMode === 'thinner'}
+            value="thinner"
+            onChange={handleChangeMode}
+          />
+          Pen becoming thinner.
+        </label>
+        <label>
+          <input
+            type="checkbox"
+            checked={penMode === 'random'}
+            value="random"
+            onChange={handleChangeMode}
+          />
+          Pen becoming Random Width.
+        </label>
+        <label>
+          <input
+            type="checkbox"
+            checked={penMode === 'rainbow'}
+            value="rainbow"
+            onChange={handleChangeMode}
+          />
+          Rainbow pen.
+        </label>
+        {['normal', 'rainbow'].includes(penMode) && (
+          <div>
+            pen width
+            <input
+              type="range"
+              value={penWidth}
+              min={1}
+              max={50}
+              onChange={handlePenWidth}
+            />
+          </div>
+        )}
+        {penMode !== 'rainbow' && (
+          <button onClick={handleColor}>Change Color</button>
+        )}
+      </fieldset>
       <div
         style={{
           display: 'flex',
@@ -75,9 +161,12 @@ const Example = () => {
               border: '1px solid #eee',
               margin: 'auto'
             }}
+            onMouseMove={handleUpdatePenConfig}
+            onTouchMove={handleUpdatePenConfig}
             onTouchEnd={handleChangeXML}
             onMouseLeave={handleChangeXML}
           />
+          <button onClick={undo}>Undo</button>
           <button onClick={drawingClear}>Clear</button>
           <button onClick={download}>Download SVG</button>
         </div>