How to draw continuous lines?

[George Anderson]

First of all, very awesome library! Thank you for creating this.

So this isn't really an issue but just want to ask if there's an easy way to do this.

I've tried the React example and it works perfectly!

import * as React from "react"
import getStroke from "perfect-freehand"
import { getSvgPathFromStroke } from "./utils"

export default function Example() {
  const [points, setPoints] = React.useState()

  function handlePointerDown(e) {
    e.preventDefault()
    setPoints([[e.pageX, e.pageY, e.pressure]])
  }

  function handlePointerMove(e) {
    if (e.buttons === 1) {
      e.preventDefault()
      setPoints([...points, [e.pageX, e.pageY, e.pressure]])
    }
  }

  return (
    <svg
      onPointerDown={handlePointerDown}
      onPointerMove={handlePointerMove}
      style={{ touchAction: "none" }}
    >
      {points && (
        <path
          d={getSvgPathFromStroke(
            getStroke(points)
          )}
        />
      )}
    </svg>
  )
}

But this one clears the previous line because there is only one path right? I hope there's an easy example of making it continuous, like in your demo. Thank you!

[George Anderson]

What I did for now which is working, I guess

import * as React from "react"
import getStroke from "perfect-freehand"
import { getSvgPathFromStroke } from "./utils"

export default function Example() {
  const [points, setPoints] = React.useState()
  const [paths, setPaths] = React.useState()

  function handlePointerDown(e) {
    e.preventDefault()
    setPoints([[e.pageX, e.pageY, e.pressure]])
  }

  function handlePointerMove(e) {
    if (e.buttons === 1) {
      e.preventDefault()
      setPoints([...points, [e.pageX, e.pageY, e.pressure]])
    }
  }

  function handlePointerUp(e) {
    e.preventDefault()
    setPaths(points)
  }

  return (
    <svg
      onPointerDown={handlePointerDown}
      onPointerMove={handlePointerMove}
      onPointerUp={handlePointerUp}
      style={{ touchAction: "none" }}
    >
      {points && (
        <path
          d={getSvgPathFromStroke(
            getStroke(points)
          )}
        />
      )}
      {paths.map((p,index) => <path
            key={index}
            d={p}/>
       )}
    </svg>
  )
}