app.js

import { line, curveBasis } from "d3-shape"
import uuidv4 from "uuid/v4"
import yMemory from "y-memory"
import yMap from "y-map"
import yArray from "y-array"
import Y from "yjs"

import yWebrtc from "./y-webrtc/index.js"

yMemory(Y)
yMap(Y)
yArray(Y)
yWebrtc(Y)

Y({
  db: {
    name: "memory",
  },
  connector: {
    name: "webrtc",
    url: "/",
    room: "imperial",
  },
  share: {
    drawing: "Map",
  },
}).then((y) => {
  const userIDElem = document.getElementById("user-id")
  const peerIDElem = document.getElementById("peer-id")
  const peerButton = document.getElementById("peer-connect")
  const connectedP = document.getElementById("connected-peers")
  const penButton = document.getElementById("pen")
  const eraserButton = document.getElementById("eraser")

  userIDElem.value = y.db.userId

  y.connector.onUserEvent(function(event) {
    switch (event.action) {
      case "userID":
        userIDElem.value = event.id
        break
      case "userJoined":
        var peerElem = document.createElement("li")
        peerElem.innerHTML = event.user
        connectedP.appendChild(peerElem)
        break
      case "userLeft":
        for (var peer of connectedP.children) {
          if (peer.innerHTML == event.user) {
            connectedP.removeChild(peer)
          }
        }
        break
    }
  })

  peerButton.onclick = function() {
    const peerID = peerIDElem.value

    if (peerID == "") {
      return
    }

    y.connector.connectToPeer(peerID)

    peerIDElem.value = ""
  }

  // Used to check what kind of tool is selected
  var addingLine = true
  var removingLine = false

  penButton.onclick = function() {
    // If pen tool selected
    if (!addingLine) {
      addingLine = true
      removingLine = false
    }
  }

  eraserButton.onclick = function() {
    // If eraser tool selected
    if (!removingLine) {
      removingLine = true
      addingLine = false
    }
  }

  const whiteboard = document.getElementById("whiteboard")

  var input = false
  var paths = new Map()
  var pathID

  function createOrUpdatePath(uid, points) {
    const lineFn = line()
      .x((d) => d[0])
      .y((d) => d[1])
      .curve(curveBasis)

    var path = paths.get(uid)

    if (path === undefined) {
      path = document.createElementNS("http://www.w3.org/2000/svg", "path")

      path.setAttribute("stroke", "blue")
      path.setAttribute("stroke-width", 3)
      path.setAttribute("fill", "none")
      path.setAttribute("pointer-events", "none")

      whiteboard.appendChild(path)

      paths.set(uid, path)
    }

    points = points.toArray().filter((point) => point !== undefined)

    if (points.length <= 0) {
      path.removeAttribute("d")

      return path
    }

    path.setAttribute("d", lineFn(points))

    return path
  }

  function removeOrUpdatePath(uid) {
    var path = paths.get(uid)

    if (path !== undefined) {
      paths.delete(path)
    }
  }

  whiteboard.onmousedown = function(e) {
    input = true

    const mouse = {
      x: e.offsetX,
      y: e.offsetY,
    }

    if (addingLine) {
      pathID = uuidv4()
      const sharedPath = y.share.drawing.set(pathID, Y.Array)
      sharedPath.push([[mouse.x, mouse.y]])
    } else if (removingLine) {
      // Iterate over all the possible paths in the Map
      const mapPaths = y.share.drawing.keys()
      for (var mapPath of mapPaths) {
        var found = false
        // Get the array of coordinates
        var mouseArray = y.share.drawing.get(mapPath).toArray()

        // Check the array for current position
        for (var i = 0; i < mouseArray.length; i++) {
          var mouseMap = mouseArray[i]
          if (mouseMap[0] == mouse.x && mouseMap[1] == mouse.y) {
            // Delete coordinates from the array
            mouseArray.delete(i)
            // Update map
            y.share.drawing.set(mapPath, mouseArray)
            found = true
            break
          }
        }
        if (found) {
          break
        }
      }
    }
  }

  whiteboard.onmouseup = function() {
    input = false
  }

  whiteboard.onmousemove = function(e) {
    const mouse = {
      x: e.offsetX,
      y: e.offsetY,
    }

    if (input) {
      if (addingLine) {
        const sharedPath = y.share.drawing.get(pathID)
        sharedPath.push([[mouse.x, mouse.y]])
      } else if (removingLine) {
        // Iterate over all the possible paths in the Map
        const mapPaths = y.share.drawing.keys()
        for (var mapPath of mapPaths) {
          var found = false
          // Get the array of coordinates
          var mouseArray = y.share.drawing.get(mapPath).toArray()

          // Check the array for current position
          for (var i = 0; i < mouseArray.length; i++) {
            var mouseMap = mouseArray[i]
            if (mouseMap[0] == mouse.x && mouseMap[1] == mouse.y) {
              console.log(
                "mouseMap[0] (" +
                  mouseMap[0] +
                  ") == mouse.x (" +
                  mouse.x +
                  "mouseMap[1] (" +
                  mouseMap[1] +
                  ") == mouse.y (" +
                  mouse.y +
                  "y",
              )
              // Delete coordinates from the array
              mouseArray.delete(i)
              // Update map
              y.share.drawing.set(mapPath, mouseArray)
              found = true
              break
            }
          }
          if (found) {
            break
          }
        }
      }
    }
  }

  y.share.drawing.observe(function(lineEvent) {
    const lineID = lineEvent.name

    switch (lineEvent.type) {
      case "add":
        createOrUpdatePath(lineID, lineEvent.value)

        lineEvent.value.observe(function(pointEvent) {
          switch (pointEvent.type) {
            case "insert":
              createOrUpdatePath(lineID, pointEvent.object)
              break
          }
        })

        break

      case "delete":
        removeOrUpdatePath(lineID)

        break
    }
  })
})