app.js

import { line, curveLinear } from "d3-shape"

import {
  canvas,
  connectedPeers,
  peerButton,
  peerIDElem,
  userIDElem,
  penButton,
  eraserButton,
} from "./elements.js"
import { connect } from "./room.js"

// TODO: switch to curve interpolation that respects mouse points based on velocity
const lineFn = line()
  .x((d) => d[0])
  .y((d) => d[1])
  .curve(curveLinear)

const tools = {
  PEN: "pen",
  ERASER: "eraser",
}

const STROKECOLOUR = "blue"
const STROKERADIUS = 2
const ERASERRADIUS = STROKERADIUS * 2

const pathElems = new Map()

const addOrUpdatePathElem = (id, points) => {
  let pathElem = pathElems.get(id)

  if (pathElem == null) {
    pathElem = document.createElementNS("http://www.w3.org/2000/svg", "g")

    pathElem.setAttribute("stroke", STROKECOLOUR)
    pathElem.setAttribute("stroke-width", STROKERADIUS * 2)
    pathElem.setAttribute("fill", "none")
    pathElem.setAttribute("pointer-events", "none")
    pathElem.setAttribute("marker-start", "url(#dot)")
    pathElem.setAttribute("marker-end", "url(#dot)")

    canvas.appendChild(pathElem)
    pathElems.set(id, pathElem)
  }

  pathElem.innerHTML = ""

  if (points.length == 0) {
    return pathElem
  }

  // Push a fake path split to generate the last path
  points.push([-1, -1, false])

  let subpath = []

  for (let point of points) {
    if (point[0] === undefined) {
      continue
    }

    if (point[2] === false) {
      if (subpath.length === 1) {
        let subpathElem = document.createElementNS(
          "http://www.w3.org/2000/svg",
          "circle",
        )

        subpathElem.setAttribute("stroke", "none")
        subpathElem.setAttribute("fill", STROKECOLOUR)
        subpathElem.setAttribute("cx", subpath[0][0])
        subpathElem.setAttribute("cy", subpath[0][1])
        subpathElem.setAttribute("r", STROKERADIUS)

        pathElem.appendChild(subpathElem)
      } else if (subpath.length > 0) {
        let subpathElem = document.createElementNS(
          "http://www.w3.org/2000/svg",
          "path",
        )

        subpathElem.setAttribute("d", lineFn(subpath))

        pathElem.appendChild(subpathElem)
      }

      subpath = []

      continue
    }

    subpath.push(point)
  }

  return pathElem
}

const getDistance = (a, b) => {
  return Math.sqrt(
    (a[0] - b[0]) * (a[0] - b[0]) + (a[1] - b[1]) * (a[1] - b[1]),
  )
}

connect("imperial").then((room) => {
  let userInput = false
  let currentTool = tools.PEN
  let currentPathID = null

  userIDElem.value = room.ownID || ""
  room.addEventListener("allocateOwnID", ({ detail: id }) => {
    userIDElem.value = id
  })

  room.addEventListener("userJoin", ({ detail: id }) => {
    const peerElem = document.createElement("li")
    peerElem.innerHTML = id
    connectedPeers.appendChild(peerElem)
  })

  room.addEventListener("userLeave", ({ detail: id }) => {
    for (const peerElem of connectedPeers.children) {
      if (peerElem.innerHTML == id) {
        connectedPeers.removeChild(peerElem)
      }
    }
  })

  room.addEventListener("addOrUpdatePath", ({ detail: { id, points } }) => {
    addOrUpdatePathElem(id, points)
  })

  canvas.addEventListener("mousedown", (e) => {
    userInput = true

    let mouse = [e.offsetX, e.offsetY]

    if (currentTool === tools.PEN) {
      currentPathID = room.addPath(mouse)
    } else if (currentTool === tools.ERASER) {
      room.getPaths().forEach((points, pathID) => {
        points.forEach((point, i) => {
          if (getDistance(mouse, point) <= ERASERRADIUS) {
            room.erasePoint(pathID, i)
          }
        })
      })
    }
  })

  canvas.addEventListener("mouseleave", () => {
    userInput = false
  })

  canvas.addEventListener("mouseup", () => {
    userInput = false
  })

  canvas.addEventListener("mousemove", (e) => {
    if (!userInput) {
      return
    }

    let mouse = [e.offsetX, e.offsetY]

    if (currentTool === tools.PEN) {
      room.extendPath(currentPathID, mouse)
    } else if (currentTool === tools.ERASER) {
      room.getPaths().forEach((points, pathID) => {
        points.forEach((point, i) => {
          if (getDistance(mouse, point) <= ERASERRADIUS) {
            room.erasePoint(pathID, i)
          }
        })
      })
    }
  })

  peerButton.addEventListener("click", () => {
    const peerID = peerIDElem.value
    if (peerID == "") {
      return
    }
    room.inviteUser(peerID)
    peerIDElem.value = ""
  })

  penButton.addEventListener("click", () => {
    currentTool = tools.PEN

    penButton.classList.add("selected")
    eraserButton.classList.remove("selected")
  })

  eraserButton.addEventListener("click", () => {
    currentTool = tools.ERASER

    penButton.classList.remove("selected")
    eraserButton.classList.add("selected")
  })
})