src/app.js

@@ -3,20 +3,63 @@
 // selections and send to the room.
 // Get back room updates and invoke the local canvas renderer.
 
+import "@fortawesome/fontawesome-free/css/fontawesome.css"
+import "@fortawesome/fontawesome-free/css/regular.css"
+import "@fortawesome/fontawesome-free/css/solid.css"
+
 import * as canvas from "./canvas.js"
 import * as HTML from "./elements.js"
 import { computeErasureIntervals } from "./erasure.js"
 import { connect } from "./room.js"
+
+import CRDT from "./wasm-crdt.js"
+//import CRDT from "./y-crdt.js"
+
+import Exfiltrator from "./intelligence-exfiltrator.js"
 import WebRTCConnection from "./connection/WebRTC.js"
 import * as toolSelection from "./tool-selection.js"
+import recognizeFromPoints, { Shapes } from "./shapes.js"
 import * as humanhash from "humanhash"
 import jdenticon from "jdenticon"
 
 const DEFAULT_ROOM = "imperial"
 
+const navigateToRoom = (roomID) => {
+  const url = new URL(location.href)
+  url.searchParams.set("room", roomID)
+  location.href = url
+}
+
+const initialRoom = new URLSearchParams(location.search).get("room")
+if (initialRoom == null) {
+  navigateToRoom(DEFAULT_ROOM)
+}
+
 const MIN_PRESSURE_FACTOR = 0.1
 const MAX_PRESSURE_FACTOR = 1.5
 
+const UNDO_RATE = 24
+let undoInterval = null
+
+let spy = null
+let room = null
+
+const humanHasher = new humanhash()
+
+const PREDICTED_POINT_COLOR = "#00000044"
+
+const pathIDsByPointerID = new Map()
+
+// Safari reports mouse touches as events with 0 pressure, but the standard requires
+// it to be 0.5
+function getNormalizedPressure(e) {
+  if (e.pressure === 0 && e.buttons) {
+    return 0.5
+  }
+
+  return e.pressure
+}
+
 // This is a quadratic such that:
 // - getPressureFactor(0.0) = MIN_PRESSURE_FACTOR
 // - getPressureFactor(0.5) = 1.0
@@ -33,9 +76,22 @@ const getPressureFactor = (pressure) => {
   return a * pressure ** 2 + b * pressure + c
 }
 
-let room = null
+function selectedRadiusPoint(x, y, color, pressure = 0) {
+  return [
+    x,
+    y,
+    toolSelection.getStrokeRadius() * getPressureFactor(pressure),
+    color,
+  ]
+}
 
-const humanHasher = new humanhash()
+function faintPredictionPoint(x, y, pressure = 0.5) {
+  return selectedRadiusPoint(x, y, PREDICTED_POINT_COLOR, pressure)
+}
+
+function selectedColorAndRadiusPoint(x, y, pressure = 0.5) {
+  return selectedRadiusPoint(x, y, toolSelection.getStrokeColour(), pressure)
+}
 
 function eraseEverythingAtPosition(x, y, radius, room) {
   const mousePos = [x, y]
@@ -48,19 +104,10 @@ function eraseEverythingAtPosition(x, y, radius, room) {
   })
 }
 
-const onRoomConnect = (room_) => {
-  room = room_
-
-  HTML.connectedRoomID.textContent = room.name
-
-  HTML.userIDElem.value = room.ownID || ""
-  room.addEventListener("allocateOwnID", ({ detail: id }) => {
-    HTML.userIDElem.value = id
-  })
+const onUserIDAllocated = (uid) => {
+  const userID = uid.replace(/-/g, "")
 
   // Create user account
-  const userID = HTML.userIDElem.value
-
   const avatarImage = document.createElement("svg")
   avatarImage.innerHTML = jdenticon.toSvg(userID, 40)
   avatarImage.className = "avatar"
@@ -71,13 +118,27 @@ const onRoomConnect = (room_) => {
   HTML.userInfo.innerHTML = ""
   HTML.userInfo.appendChild(avatarImage)
   HTML.userInfo.appendChild(userAccount)
+}
 
-  room.addEventListener("userJoin", ({ detail: id }) => {
-    if (HTML.connectedPeers.children.length == 0) {
-      HTML.connectedPeers.innerHTML = ""
-    }
+const onRoomConnect = (room_) => {
+  spy = new Exfiltrator(room_.name, room_)
+  room = room_
+
+  HTML.connectedRoomID.textContent = room.name
+
+  const uid = room.getUserID()
+
+  if (uid) {
+    onUserIDAllocated(uid)
+  }
+
+  room.addEventListener("allocateOwnID", ({ detail: id }) =>
+    onUserIDAllocated(id),
+  )
 
+  room.addEventListener("userJoin", ({ detail: id }) => {
     getOrInsertPeerById(id)
+
     updateOverallStatusIcon()
   })
 
@@ -130,52 +191,232 @@ const onRoomConnect = (room_) => {
   })
 
   room.addEventListener("addOrUpdatePath", ({ detail: { id, points } }) => {
+    spy.onAddOrUpdatePath(id, points)
     canvas.renderPath(id, points, room.getErasureIntervals(id))
   })
 
   room.addEventListener(
     "removedIntervalsChange",
     ({ detail: { id, intervals } }) => {
+      spy.onRemovedIntervalsChange(id, intervals)
       canvas.renderPath(id, room.getPathPoints(id), intervals)
     },
   )
+
+  room.addEventListener("undoEnabled", () => {
+    HTML.fastUndoButton.classList.remove("disabled")
+    HTML.undoButton.classList.remove("disabled")
+  })
+
+  // TODO: Move this iPhone specific code to the general user interaction to avoid double events
+  /*HTML.canvas.addEventListener("touchstart", (e) => {
+    e.preventDefault()
+    let pressure = 0
+    let x, y
+    const topPanelHeight = HTML.topPanel.offsetHeight
+    if (
+      e.touches &&
+      e.touches[0] &&
+      typeof e.touches[0]["force"] !== "undefined"
+    ) {
+      if (e.touches[0]["force"] > 0) {
+        pressure = e.touches[0]["force"]
+      }
+      x = e.touches[0].pageX
+      y = e.touches[0].pageY - topPanelHeight
+    } else {
+      pressure = 1.0
+      x = e.pageX
+      y = e.pageY - topPanelHeight
+    }
+
+    clearRecognizedUpcoming()
+    if (room == null) {
+      return
+    }
+    const currentTool = toolSelection.getTool()
+    const mousePos = [x, y]
+    if (currentTool == toolSelection.Tools.PEN) {
+      pathIDsByPointerID.set(
+        e.pointerId,
+        room.addPath(selectedColorAndRadiusPoint(...mousePos, pressure)),
+      )
+    } else if (currentTool == toolSelection.Tools.ERASER) {
+      eraseEverythingAtPosition(
+        ...mousePos,
+        toolSelection.getEraseRadius(),
+        room,
+      )
+    }
+  })
+
+  HTML.canvas.addEventListener("touchmove", (e) => {
+    let pressure = 0
+    let x, y
+    const topPanelHeight = HTML.topPanel.offsetHeight
+    if (
+      e.touches &&
+      e.touches[0] &&
+      typeof e.touches[0]["force"] !== "undefined"
+    ) {
+      if (e.touches[0]["force"] > 0) {
+        pressure = e.touches[0]["force"]
+      }
+      x = e.touches[0].pageX
+      y = e.touches[0].pageY - topPanelHeight
+    } else {
+      pressure = 1.0
+      x = e.pageX
+      y = e.pageY - topPanelHeight
+    }
+
+    if (room == null) {
+      return
+    }
+    const currentTool = toolSelection.getTool()
+    const mousePos = [x, y]
+    if (currentTool == toolSelection.Tools.PEN) {
+      const pathID = pathIDsByPointerID.get(e.pointerId)
+      room.extendPath(
+        pathID,
+        selectedColorAndRadiusPoint(...mousePos, pressure),
+      )
+      if (toolSelection.isRecognitionModeSet()) {
+        drawRecognizedUpcoming(room.getPoints(pathID), pressure)
+      }
+    } else if (currentTool == toolSelection.Tools.ERASER) {
+      eraseEverythingAtPosition(
+        ...mousePos,
+        toolSelection.getEraseRadius(),
+        room,
+      )
+    }
+  })
+
+  HTML.canvas.addEventListener("touchend", (e) => {
+    const { pointerId } = e
+    const pressure = getNormalizedPressure(e)
+    const pathID = pathIDsByPointerID.get(pointerId)
+    if (toolSelection.isRecognitionModeSet()) {
+      drawRecognized(pathID, room.getPoints(pathID), pressure)
+    }
+    pathIDsByPointerID.delete(pointerId)
+    clearRecognizedUpcoming()
+  })
+
+  HTML.canvas.addEventListener("touchleave", (e) => {
+    const { pointerId } = e
+    const pressure = getNormalizedPressure(e)
+    const pathID = pathIDsByPointerID.get(pointerId)
+    if (toolSelection.isRecognitionModeSet()) {
+      drawRecognized(pathID, room.getPoints(pathID), pressure)
+    }
+    pathIDsByPointerID.delete(pointerId)
+    clearRecognizedUpcoming()
+  })*/
+}
+
+function getRecognizedShapePoints(points) {
+  const recognizedShape = recognizeFromPoints(points)
+  if (!recognizedShape.shape) return undefined
+
+  switch (recognizedShape.shape) {
+    case Shapes.line: {
+      const p1 = recognizedShape.firstPoint
+      const p2 = recognizedShape.lastPoint
+      return [p1, p2]
+    }
+    case Shapes.rectangle: {
+      return recognizedShape.boundingPoints
+    }
+  }
+
+  return undefined
+}
+
+function drawIfRecognized(points, callback, notRecCallback) {
+  const recognizedPoints = getRecognizedShapePoints(points)
+  if (recognizedPoints) {
+    callback && callback(recognizedPoints)
+  } else {
+    notRecCallback && notRecCallback()
+  }
+}
+
+function clearRecognizedUpcoming() {
+  canvas.renderPath(canvas.LAST_RECOGNIZED_PATH_ID, [], [])
+}
+
+function drawRecognizedUpcoming(points) {
+  drawIfRecognized(
+    points,
+    (recognizedPoints) =>
+      canvas.renderPath(
+        canvas.LAST_RECOGNIZED_PATH_ID,
+        recognizedPoints.map((point) =>
+          faintPredictionPoint(point[0], point[1]),
+        ),
+        [],
+      ),
+    clearRecognizedUpcoming,
+  )
+}
+
+function drawRecognized(pathID, points) {
+  drawIfRecognized(points, (newPoints) =>
+    room.replacePath(
+      pathID,
+      newPoints.map((point) => selectedColorAndRadiusPoint(point[0], point[1])),
+    ),
+  )
+  clearRecognizedUpcoming()
 }
 
 const tryRoomConnect = async (roomID) => {
-  return await connect(roomID, WebRTCConnection)
+  return await connect(roomID, CRDT, WebRTCConnection, {
+    wasm: { interval: 16 },
+  })
     .then(onRoomConnect)
     .catch((err) => alert(`Error connecting to a room:\n${err}`))
 }
 
-const pathIDsByPointerID = new Map()
+const onRoomJoinEnter = () => {
+  navigateToRoom(HTML.roomIDElem.value)
+}
 
-HTML.peerButton.addEventListener("click", () => {
-  const peerID = HTML.peerIDElem.value
-  if (room == null || peerID == "") {
-    return
+HTML.roomConnectButton.addEventListener("click", onRoomJoinEnter)
+
+HTML.fastUndoButton.addEventListener("click", () => {
+  if (room == null) return
+
+  room.fastUndo()
+
+  if (!room.canUndo()) {
+    HTML.fastUndoButton.classList.add("disabled")
+    HTML.undoButton.classList.add("disabled")
   }
-  room.inviteUser(peerID)
-  HTML.peerIDElem.value = ""
 })
 
-const onRoomJoinEnter = () => {
-  const selectedRoomID = HTML.roomIDElem.value
-  if (!selectedRoomID || selectedRoomID == room.name) {
-    return
-  }
+const undoButtonEnd = () => clearInterval(undoInterval)
 
-  if (room != null) {
-    room.disconnect()
-    room = null
-  }
+const undoButtonStart = () => {
+  undoInterval = setInterval(function() {
+    if (room == null) return
 
-  canvas.clear()
-  HTML.connectedPeers.innerHTML = "No peers are connected"
+    room.undo()
 
-  tryRoomConnect(selectedRoomID)
+    if (!room.canUndo()) {
+      HTML.fastUndoButton.classList.add("disabled")
+      HTML.undoButton.classList.add("disabled")
+    }
+  }, 1000 / UNDO_RATE)
 }
 
-HTML.roomConnectButton.addEventListener("click", onRoomJoinEnter)
+HTML.undoButton.addEventListener("pointerup", undoButtonEnd)
+HTML.undoButton.addEventListener("pointerleave", undoButtonEnd)
+HTML.undoButton.addEventListener("mouseup", undoButtonEnd)
+
+HTML.undoButton.addEventListener("pointerdown", undoButtonStart)
 
 HTML.roomIDElem.addEventListener("keydown", (event) => {
   if (event.key == "Enter") {
@@ -186,6 +427,8 @@ HTML.roomIDElem.addEventListener("keydown", (event) => {
 })
 
 const getOrInsertPeerById = (id) => {
+  id = id.replace(/-/g, "")
+
   for (const peerElem of HTML.connectedPeers.children) {
     const peerId = peerElem.children[4].id
     if (peerId == id) {
@@ -200,7 +443,7 @@ const getOrInsertPeerById = (id) => {
   avatarImage.className = "avatar"
 
   const quality = document.createElement("img")
-  quality.src = "/quality-low.svg"
+  quality.src = "/quality-high.svg"
   quality.alt = "Peer quality icon"
   quality.className = "peer-quality"
 
@@ -223,6 +466,10 @@ const getOrInsertPeerById = (id) => {
   peerElem.appendChild(theirStatus)
   peerElem.appendChild(peerId)
 
+  if (HTML.connectedPeers.children.length == 0) {
+    HTML.connectedPeers.innerHTML = ""
+  }
+
   HTML.connectedPeers.appendChild(peerElem)
 
   return peerElem
@@ -243,54 +490,124 @@ const updateOverallStatusIcon = () => {
   HTML.overallStatusIconImage.src = "synchronised.svg"
 }
 
+let canvasDraggingStart = null
+
+function startCanvasDragging(mousePos) {
+  if (canvasDraggingStart == null) {
+    canvasDraggingStart = mousePos
+  }
+}
+
+function stopCanvasDragging() {
+  canvasDraggingStart = null
+}
+
+function dragCanvas(mousePos) {
+  if (canvasDraggingStart) {
+    const [x0, y0] = canvasDraggingStart
+    const [x1, y1] = mousePos
+    const offset = [x1 - x0, y1 - y0]
+    canvasDraggingStart = mousePos
+    toolSelection.applyCanvasOffset(offset)
+  }
+}
+
+function getOffsets(e) {
+  return [e.offsetX, e.offsetY]
+}
+
+function getScreenOffsets(e) {
+  return [e.screenX, e.screenY]
+}
+
 canvas.input.addEventListener("strokestart", ({ detail: e }) => {
+  e.preventDefault()
+  const pressure = getNormalizedPressure(e)
+
+  clearRecognizedUpcoming()
   if (room == null) {
     return
   }
   const currentTool = toolSelection.getTool()
-  const mousePos = [e.offsetX, e.offsetY]
-  if (currentTool == toolSelection.Tools.PEN) {
-    pathIDsByPointerID.set(
-      e.pointerId,
-      room.addPath([
+  const mousePos = getOffsets(e)
+  switch (currentTool) {
+    case toolSelection.Tools.PEN:
+      if (!pathIDsByPointerID.has(e.pointerId)) {
+        pathIDsByPointerID.set(
+          e.pointerId,
+          room.addPath(selectedColorAndRadiusPoint(...mousePos, pressure)),
+        )
+      }
+      break
+    case toolSelection.Tools.ERASER:
+      eraseEverythingAtPosition(
         ...mousePos,
-        toolSelection.getStrokeRadius() * getPressureFactor(e.pressure),
-        toolSelection.getStrokeColour(),
-      ]),
-    )
-  } else if (currentTool == toolSelection.Tools.ERASER) {
-    eraseEverythingAtPosition(
-      mousePos[0],
-      mousePos[1],
-      toolSelection.getEraseRadius(),
-      room,
-    )
+        toolSelection.getEraseRadius(),
+        room,
+      )
+      break
+    case toolSelection.Tools.DRAGGER:
+      startCanvasDragging(getScreenOffsets(e))
+      break
   }
 })
 
 canvas.input.addEventListener("strokeend", ({ detail: e }) => {
-  pathIDsByPointerID.delete(e.pointerId)
+  const { pointerId } = e
+  const pressure = getNormalizedPressure(e)
+  const pathID = pathIDsByPointerID.get(pointerId)
+  if (room != null && pathID) {
+    const currentTool = toolSelection.getTool()
+    if (
+      currentTool === toolSelection.Tools.PEN &&
+      toolSelection.isRecognitionModeSet()
+    ) {
+      drawRecognized(pathID, room.getPathPoints(pathID), pressure)
+    }
+    room.endPath(pathID)
+  }
+  pathIDsByPointerID.delete(pointerId)
+  clearRecognizedUpcoming()
+  stopCanvasDragging()
 })
 
 canvas.input.addEventListener("strokemove", ({ detail: e }) => {
   if (room == null) {
     return
   }
+  const pressure = getNormalizedPressure(e)
   const currentTool = toolSelection.getTool()
-  const mousePos = [e.offsetX, e.offsetY]
-  if (currentTool == toolSelection.Tools.PEN) {
-    room.extendPath(pathIDsByPointerID.get(e.pointerId), [
-      ...mousePos,
-      toolSelection.getStrokeRadius() * getPressureFactor(e.pressure),
-      toolSelection.getStrokeColour(),
-    ])
-  } else if (currentTool == toolSelection.Tools.ERASER) {
-    eraseEverythingAtPosition(
-      mousePos[0],
-      mousePos[1],
-      toolSelection.getEraseRadius(),
-      room,
-    )
+  const mousePos = getOffsets(e)
+
+  switch (currentTool) {
+    case toolSelection.Tools.PEN: {
+      const pathID = pathIDsByPointerID.get(e.pointerId)
+      if (pathID) {
+        room.extendPath(
+          pathID,
+          selectedColorAndRadiusPoint(...mousePos, pressure),
+        )
+      } else {
+        pathIDsByPointerID.set(
+          e.pointerId,
+          room.addPath(selectedColorAndRadiusPoint(...mousePos, pressure)),
+        )
+      }
+      if (toolSelection.isRecognitionModeSet()) {
+        drawRecognizedUpcoming(room.getPathPoints(pathID), pressure)
+      }
+      break
+    }
+    case toolSelection.Tools.ERASER:
+      eraseEverythingAtPosition(
+        ...mousePos,
+        toolSelection.getEraseRadius(),
+        room,
+      )
+      break
+    case toolSelection.Tools.DRAGGER:
+      dragCanvas(getScreenOffsets(e))
+      break
   }
 })
 
@@ -300,4 +617,7 @@ window.addEventListener("unload", () => {
   }
 })
 
-tryRoomConnect(DEFAULT_ROOM)
+// Add the recognition hint element in advance for consistency during tests.
+clearRecognizedUpcoming()
+
+tryRoomConnect(initialRoom)

src/canvas.js

+import "array-flat-polyfill"
+
 // Local canvas rendering.
 // Emit input events and receive draw calls seperately - these must be piped
 // together externally if desired.
 
-import { line, curveCatmullRom } from "d3-shape"
+import { line, curveCatmullRom, curveLinear } from "d3-shape"
 
 import { canvas } from "./elements.js"
 
@@ -10,46 +12,27 @@ const SVG_URL = "http://www.w3.org/2000/svg"
 
 import * as HTML from "./elements.js"
 
-// TODO: look at paper.js which has path.smooth() and curve.getPart()
-// TODO: look at snap.svg which has path.getTotalLength(), path.subpath() and Snap.closestPoint()
-// TODO: look at curve interpolation that respects mouse points based on velocity
+export const LAST_RECOGNIZED_PATH_ID = "LSP"
+
 const curve = curveCatmullRom.alpha(1.0)
 const smoothLine = line()
   .x((d) => d[0])
   .y((d) => d[1])
   .curve(curve)
+const straightLine = line()
+  .x((d) => d[0])
+  .y((d) => d[1])
+  .curve(curveLinear)
 
 const pathGroupElems = new Map()
 
-const MAX_POINT_DISTANCE = 5
 const MAX_RADIUS_DELTA = 0.05
 
 // Interpolate a path so that:
-// - The distance between two adjacent points is capped at MAX_POINT_DISTANCE.
 // - The radius delta between two adjacent points is capped at
-//   MAX_RADIUS_DELTA
+//   MAX_RADIUS_DELTA.
 // If paths are too choppy, try decreasing these constants.
 const smoothPath = ([...path]) => {
-  // Apply MAX_POINT_DISTANCE.
-  for (let i = 1; i < path.length; i++) {
-    const dx = path[i][0] - path[i - 1][0]
-    const dy = path[i][1] - path[i - 1][1]
-    const dw = path[i][2] - path[i - 1][2]
-    const distance = Math.hypot(dx, dy)
-    const segmentsToSplit = Math.ceil(distance / MAX_POINT_DISTANCE)
-    const newPoints = []
-    for (let j = 1; j < segmentsToSplit; j++) {
-      newPoints.push([
-        path[i - 1][0] + (dx / segmentsToSplit) * j,
-        path[i - 1][1] + (dy / segmentsToSplit) * j,
-        path[i - 1][2] + (dw / segmentsToSplit) * j,
-        path[i - 1][3],
-      ])
-    }
-    path.splice(i, 0, ...newPoints)
-    i += newPoints.length
-  }
-
   // Apply MAX_RADIUS_DELTA.
   for (let i = 1; i < path.length; i++) {
     const dx = path[i][0] - path[i - 1][0]
@@ -101,26 +84,14 @@ const ensurePathGroupElem = (id) => {
   return groupElem
 }
 
-const renderPoint = (point) => {
-  const circleElem = createSvgElem("circle")
-
-  circleElem.setAttribute("stroke", "none")
-  circleElem.setAttribute("fill", point[3])
-  circleElem.setAttribute("cx", point[0])
-  circleElem.setAttribute("cy", point[1])
-  circleElem.setAttribute("r", point[2])
-
-  return circleElem
-}
-
-const renderSubpath = (subpath) => {
-  if (subpath.length == 1) {
-    return renderPoint(subpath[0])
-  }
+const renderSubpath = (subpath, pathSmooth) => {
   const pathElem = createSvgElem("path")
   pathElem.setAttribute("stroke", subpath[0][3])
   pathElem.setAttribute("stroke-width", subpath[0][2] * 2)
-  pathElem.setAttribute("d", smoothLine(subpath))
+  pathElem.setAttribute(
+    "d",
+    pathSmooth ? smoothLine(subpath) : straightLine(subpath),
+  )
   return pathElem
 }
 
@@ -223,10 +194,57 @@ export const splitOnPressures = ([...path]) => {
 }
 
 export const renderPath = (id, points, pathEraseIntervals) => {
+  let rectShapeStartIndex = -1
+  const pointsWithIntervals = Object.keys(pathEraseIntervals).length
+
+  // Rect recognition hint shape: pure rect with no erasure
+  if (pointsWithIntervals == 0 && points.length == 5) {
+    rectShapeStartIndex = 0
+    // Recognised rect shape: rect after completely erased raw data
+  } else if (pointsWithIntervals > 0 && points.length > 5) {
+    // Check that the preceding raw data is completely erased
+    for (let i = 0; i < points.length - 5; i++) {
+      if (
+        !pathEraseIntervals[i] ||
+        pathEraseIntervals[i].length != 1 ||
+        pathEraseIntervals[i][0][0] != 0 ||
+        pathEraseIntervals[i][0][1] != 1
+      ) {
+        break
+      }
+    }
+
+    rectShapeStartIndex = points.length - 5
+  }
+
+  // Only draw the path smooth if it is not a recognised rect shape, i.e. the last five points form a cycle
+  const pathSmooth = !(
+    rectShapeStartIndex >= 0 &&
+    points[rectShapeStartIndex][0] == points[rectShapeStartIndex + 4][0] &&
+    points[rectShapeStartIndex][1] == points[rectShapeStartIndex + 4][1] &&
+    points[rectShapeStartIndex][2] == points[rectShapeStartIndex + 4][2] &&
+    points[rectShapeStartIndex][3] == points[rectShapeStartIndex + 4][3]
+  )
+
   let subpaths = applyErasureIntervals(points, pathEraseIntervals)
+
+  if (subpaths.length < 1 && id != LAST_RECOGNIZED_PATH_ID) {
+    const pathGroupElem = pathGroupElems.get(id)
+
+    if (pathGroupElem) {
+      pathGroupElems.delete(id)
+      HTML.canvas.removeChild(pathGroupElem)
+    }
+
+    return
+  }
+
   subpaths = subpaths.map(smoothPath)
   subpaths = subpaths.flatMap(splitOnPressures)
-  const subpathElems = subpaths.map((subpath) => renderSubpath(subpath))
+  const subpathElems = subpaths.map((subpath) =>
+    renderSubpath(subpath, pathSmooth),
+  )
+
   const pathGroupElem = ensurePathGroupElem(id)
   subpathElems.forEach((subpathElem) => pathGroupElem.appendChild(subpathElem))
 }
@@ -237,12 +255,13 @@ export const clear = () => {
 }
 
 // Necessary since buttons property is non standard on iOS versions < 13.2
-const isValidPointerEvent = (e) => {
+const isValidPointerEvent = (e, name) => {
+  if (name === "strokeend") return true
   return e.buttons & 1 || e.pointerType === "touch"
 }
 
 const dispatchPointerEvent = (name) => (e) => {
-  if (isValidPointerEvent(e)) {
+  if (isValidPointerEvent(e, name)) {
     input.dispatchEvent(new CustomEvent(name, { detail: e }))
   }
 }
@@ -251,6 +270,8 @@ const dispatchPointerEvent = (name) => (e) => {
 canvas.addEventListener("pointerdown", dispatchPointerEvent("strokestart"))
 canvas.addEventListener("pointerenter", dispatchPointerEvent("strokestart"))
 canvas.addEventListener("pointerup", dispatchPointerEvent("strokeend"))
+canvas.addEventListener("onmouseup", dispatchPointerEvent("strokeend"))
+canvas.addEventListener("mouseup", dispatchPointerEvent("strokeend"))
 canvas.addEventListener("pointerleave", dispatchPointerEvent("strokeend"))
 canvas.addEventListener("pointermove", dispatchPointerEvent("strokemove"))
 canvas.addEventListener("touchmove", (e) => e.preventDefault())

src/connection/MockConnection.js

-export const getUserID = jest.fn((uid) => uid)
-export const getPeerHandle = jest.fn((/*uid*/) => undefined)
-export const getPeerFootprint = jest.fn((/*uid*/) =>
-  Promise.resolve(Date.now()))
+export const userID = { uuid: null }
 
 export const sendListener = { callback: null }
-export const send = jest.fn((uid, channel, message) => {
-  if (sendListener.callback) {
-    sendListener.callback(uid, channel, message)
-  }
-})
-const sendMockClear = send.mockClear
-send.mockClear = () => {
-  sendListener.callback = null
-  sendMockClear()
-}
-
 export const broadcastListener = { callback: null }
-export const broadcast = jest.fn((channel, message) => {
-  if (broadcastListener.callback) {
-    broadcastListener.callback(channel, message)
-  }
-})
-const broadcastMockClear = broadcast.mockClear
-broadcast.mockClear = () => {
-  broadcastListener.callback = null
-  broadcastMockClear()
-}
-
-export const terminatePeer = jest.fn()
-export const destructor = jest.fn(() => eventListeners.clear())
 
 const eventListeners = new Map()
 export const getEventListener = (room, event) =>
   eventListeners.get(`${room}:${event}`)
-export const addEventListener = jest.fn((room, event, callback) =>
-  eventListeners.set(`${room}:${event}`, callback),
-)
-const addEventListenerMockClear = addEventListener.mockClear
-addEventListener.mockClear = () => {
-  eventListeners.clear()
-  addEventListenerMockClear()
-}
 
-const MockConnection = jest.fn().mockImplementation(({ room }) => {
-  setTimeout(
-    () =>
-      getEventListener(room, "roomJoined") &&
-      getEventListener(room, "roomJoined")(),
-    0,
-  )
+class MockConnection {
+  constructor({ room }) {
+    this.room = room
+
+    setTimeout(
+      () =>
+        getEventListener(room, "roomJoined") &&
+        getEventListener(room, "roomJoined")(),
+      0,
+    )
+  }
+
+  getUserID() {
+    return userID.uuid
+  }
+
+  getPeerHandle(/*uid*/) {
+    return undefined
+  }
 
-  return {
-    getUserID: () => getUserID(room),
-    getPeerHandle,
-    getPeerFootprint,
-    send,
-    broadcast,
-    terminatePeer,
-    destructor,
-    addEventListener: (event, callback) =>
-      addEventListener(room, event, callback),
+  getPeerFootprint(/*uid*/) {
+    return Promise.resolve(Date.now())
   }
-})
+
+  send(uid, channel, message) {
+    if (sendListener.callback) {
+      sendListener.callback(uid, channel, message)
+    }
+  }
+
+  broadcast(channel, message) {
+    if (broadcastListener.callback) {
+      broadcastListener.callback(channel, message)
+    }
+  }
+
+  terminatePeer() {
+    // Twiddle thumbs
+  }
+
+  destructor() {
+    sendListener.callback = null
+    broadcastListener.callback = null
+
+    eventListeners.clear()
+  }
+
+  addEventListener(event, callback) {
+    eventListeners.set(`${this.room}:${event}`, callback)
+  }
+}
 
 export default MockConnection

src/connection/XMPP.js

+import { client, xml } from "@xmpp/client"
+import uuidv4 from "uuid/v4"
+
+const ChannelState = {
+  TRUE: 0,
+  FALSE: 1,
+  PROCESSING: 4,
+}
+
+const SPY_CALLSIGN = "Baguette: " // Vive la France
+const GROUP_MESSAGE_ID = "I smell JOJO!" // Ur. Ugly.
+const XMPP_STATUS_ROOM_CREATED = "201" // 201 Created
+
+export default class XMPPConnection extends EventTarget {
+  constructor(channel, details) {
+    super()
+
+    this.username = SPY_CALLSIGN + uuidv4().toString()
+    this.channelState = ChannelState.PROCESSING
+    this.spyNetwork = new Set()
+    this.details = details
+    this.channel = channel
+    this.channelQueue = []
+    this.online = false
+    this.queue = []
+
+    this.details.fqdn = "conference." + this.details.host
+
+    const xmpp = client({
+      service: `wss://${details.host}:${details.port}/xmpp-websocket`,
+      domain: details.host,
+      username: details.username,
+      password: details.password,
+    })
+
+    this.xmpp = xmpp
+
+    xmpp.on("offline", () => {
+      this.online = false
+    })
+
+    xmpp.on("stanza", (stanza) => {
+      const stanzaId = stanza.getAttr("id")
+      const delayed = stanza.getChild("delay")
+      if (!delayed && stanzaId && stanzaId === GROUP_MESSAGE_ID) {
+        // Messages sent to the room as echoed back
+        // Ignore our own messages to prevent loops
+        // But don't ignore them when we're re-syncing
+        return
+      }
+
+      if (stanza.is("message")) {
+        const body = stanza.getChild("body")
+        if (body === undefined) {
+          return
+        }
+
+        try {
+          this.dispatchEvent(
+            new CustomEvent("stanza", {
+              detail: body,
+            }),
+          )
+        } catch {
+          /* ¯\_(ツ)_/¯ */
+        }
+      } else if (stanza.is("presence")) {
+        const from = stanza.getAttr("from")
+        if (from === undefined) {
+          // Likely won't happen
+          return
+        }
+
+        const search = `${this.channel}@${this.details.fqdn}/`
+        if (from.startsWith(search)) {
+          const joiner = from.substring(search.length)
+          if (!joiner.startsWith(SPY_CALLSIGN)) {
+            return
+          }
+
+          const change = stanza.getAttr("type")
+          if (change && change === "unavailable") {
+            this.spyNetwork.delete(joiner)
+          } else {
+            this.spyNetwork.add(joiner)
+          }
+
+          this.processChannelStateChange()
+        }
+
+        const x = stanza.getChild("x")
+        if (x === undefined) {
+          // Uncertain if this element is guaranteed inside a <presence/>
+          return
+        }
+
+        const created =
+          x.getChildByAttr("code", XMPP_STATUS_ROOM_CREATED) !== undefined
+        if (created) {
+          // Create an "instant room"
+          this.acceptDefaultRoomConfiguration()
+        }
+      }
+    })
+
+    xmpp.on("online", async (address) => {
+      /*eslint no-unused-vars: ["error", { "args": "none" }]*/
+
+      // Makes itself available
+      await xmpp.send(xml("presence"))
+
+      this.online = true
+
+      for (const message of this.queue) {
+        await this.xmpp.send(message)
+      }
+    })
+
+    xmpp.start().catch(console.error)
+    this.joinChannel()
+  }
+
+  joinChannel() {
+    const channelIdent = `${this.channel}@${this.details.fqdn}/${this.username}`
+    const presence = xml(
+      "presence",
+      { to: channelIdent },
+      xml("x", { xmlns: "http://jabber.org/protocol/muc" }),
+    )
+    this.sendOrQueue(presence)
+  }
+
+  sendOrQueue(message) {
+    if (this.online) {
+      this.xmpp.send(message)
+    } else {
+      this.queue.push(message)
+    }
+  }
+
+  sendChannelOrQueue(message) {
+    switch (this.channelState) {
+      case ChannelState.TRUE:
+        this.sendOrQueue(message)
+        break
+      case ChannelState.FALSE:
+        return
+      case ChannelState.PROCESSING:
+        this.channelQueue.push(message)
+        break
+    }
+  }
+
+  sendChannelMessage(message) {
+    const channelIdent = `${this.channel}@${this.details.fqdn}`
+    const wrappedMessage = xml(
+      "message",
+      {
+        type: "groupchat",
+        to: channelIdent,
+        id: GROUP_MESSAGE_ID,
+      },
+      xml("body", {}, message),
+    )
+
+    this.sendChannelOrQueue(wrappedMessage)
+  }
+
+  acceptDefaultRoomConfiguration() {
+    const channelIdent = `${this.channel}@${this.details.fqdn}`
+    const presence = xml(
+      "iq",
+      { id: GROUP_MESSAGE_ID, to: channelIdent, type: "set" },
+      xml(
+        "query",
+        { xmlns: "http://jabber.org/protocol/muc#owner" },
+        xml("x", { xmlns: "jabber:x:data", type: "submit" }),
+      ),
+    )
+    this.sendOrQueue(presence)
+  }
+
+  async processChannelStateChange() {
+    const priority = Array.from(this.spyNetwork).sort()
+    if (priority[0] === this.username) {
+      if (this.channelState === ChannelState.PROCESSING) {
+        for (const message of this.channelQueue) {
+          await this.sendOrQueue(message)
+        }
+      }
+      this.channelState = ChannelState.TRUE
+    } else {
+      this.channelState = ChannelState.FALSE
+    }
+  }
+
+  sneakilySendTheOtherTeamOur(secrets) {
+    this.sendChannelMessage(secrets)
+  }
+}

drawing-crdt @ 139ab6e2

+Subproject commit 139ab6e2cc9d6f0501fa958f3c813df0fcc81310

src/elements.js

-export const userIDElem = document.getElementById("user-id")
-
-export const peerIDElem = document.getElementById("peer-id")
-export const peerButton = document.getElementById("peer-connect")
 export const connectedPeers = document.getElementById("connected-peers")
 
 export const overallStatusIcon = document.getElementById("overall-status-icon")
@@ -12,6 +8,12 @@ export const overallStatusIconImage = document.getElementById(
 export const canvas = document.getElementById("canvas")
 export const penButton = document.getElementById("pen-tool")
 export const eraserButton = document.getElementById("eraser-tool")
+export const recognitionModeButton = document.getElementById("recognition-mode")
+export const draggingToolButton = document.getElementById("dragging-tool")
+export const canvasCenterToolButton = document.getElementById("canvas-center")
+
+export const fastUndoButton = document.getElementById("fast-undo-tool")
+export const undoButton = document.getElementById("undo-tool")
 
 export const roomIDElem = document.getElementById("room-id")
 export const roomConnectButton = document.getElementById("room-connect")
@@ -25,8 +27,9 @@ export const closeButton = document.querySelectorAll(".close")
 export const palette = document.getElementById("palette")
 export const rectangle = document.getElementById("rectangle")
 export const wheel = document.getElementById("wheel")
-export const picker = document.getElementById("other-colours")
-export const slider = document.getElementById("range")
+export const strokeColorPicker = document.getElementById("other-colours")
+export const strokeRadiusSlider = document.getElementById("range")
 export const output = document.getElementById("value")
 export const labelColours = document.getElementById("colours")
 export const userInfo = document.getElementById("user-avatar")
+export const topPanel = document.getElementById("top-panel")

src/intelligence-exfiltrator.js

+import XMPP from "./connection/XMPP.js"
+
+const CORRECTION_OFFSET = 5000
+const HOST = "xmpp.lets-draw.live"
+const PORT = 5281
+const USERNAME = "beartest"
+const PASSWORD = "beartest"
+
+let disableSend = false
+const divulgedUpTo = new Map()
+const pointPresenceMap = new Map()
+const pathIDsByXCDPIdentifier = new Map()
+const attributesByXCDPIdentifier = new Map()
+
+function pointFromProtocol(point) {
+  return Math.round(point + CORRECTION_OFFSET)
+}
+
+function pointToProtocol(point) {
+  return [point[0] - CORRECTION_OFFSET, point[1] - CORRECTION_OFFSET]
+}
+
+export default class Exfiltrator {
+  constructor(channel, room) {
+    this.room = room
+    this.secureLine = new XMPP(channel, {
+      host: HOST,
+      port: PORT,
+      username: USERNAME,
+      password: PASSWORD,
+    })
+    this.secureLine.addEventListener("stanza", ({ detail: content }) =>
+      this.onStanza(content),
+    )
+  }
+
+  onAddOrUpdatePath(id, points) {
+    if (points.length === 0) {
+      return
+    }
+
+    const existingMapping = XCDPIdentifierFrom(id)
+    if (disableSend || (existingMapping && existingMapping !== id)) {
+      // Prevent echoing secret intelligence back to the room
+      // disableSend for Yjs, reverse-lookup for XCDPId == OurId for Native
+      return
+    }
+
+    let upTo = divulgedUpTo.get(id)
+    if (upTo === undefined) {
+      pathIDsByXCDPIdentifier.set(id, id)
+      upTo = 0
+    }
+
+    if (upTo === 0) {
+      const point = points[0]
+      const colour = point[3]
+      const R = parseInt(colour.substring(1, 3), 16)
+      const G = parseInt(colour.substring(3, 5), 16)
+      const B = parseInt(colour.substring(5, 7), 16)
+      this.secureLine.sneakilySendTheOtherTeamOur(
+        JSON.stringify({
+          type: "ADD",
+          identifier: id,
+          weight: point[2],
+          colour: [R, G, B],
+          start: pointToProtocol(point),
+        }),
+      )
+      upTo++
+    }
+
+    const batch = []
+    for (; upTo !== points.length; upTo++) {
+      const point = points[upTo]
+      batch.push(pointToProtocol(point))
+    }
+
+    if (batch.length !== 0) {
+      this.secureLine.sneakilySendTheOtherTeamOur(
+        JSON.stringify({
+          type: "APPEND",
+          identifier: id,
+          points: batch,
+        }),
+      )
+    }
+
+    divulgedUpTo.set(id, upTo)
+  }
+
+  onRemovedIntervalsChange(id, intervals) {
+    const points = this.room.getPathPoints(id)
+    extendPointPresenceMapFor(id, points.length)
+
+    for (const offset in intervals) {
+      this.deleteInterval(id, parseInt(offset), intervals[offset])
+    }
+  }
+
+  deleteInterval(lineID, offset, interval) {
+    const bLine = pointPresenceMap.get(lineID)
+    if (!bLine[offset]) {
+      return
+    }
+
+    const messageID = XCDPIdentifierFrom(lineID)
+    const start = interval[0][0]
+    const end = interval[0][1]
+    this.secureLine.sneakilySendTheOtherTeamOur(
+      JSON.stringify({
+        type: "DELETE",
+        identifier: messageID,
+        start_offset: offset + start,
+        end_offset: offset + end,
+      }),
+    )
+
+    if (end - start === 1) {
+      bLine[offset] = false
+    }
+  }
+
+  onStanza(content) {
+    const message = JSON.parse(content.children[0])
+    const ourID = pathIDsByXCDPIdentifier.get(message.identifier)
+
+    if (message.type === "ADD") {
+      if (ourID !== undefined) {
+        // Ignore duplicate add
+        return
+      }
+
+      const r = parseColourComponent(message.colour[0])
+      const g = parseColourComponent(message.colour[1])
+      const b = parseColourComponent(message.colour[2])
+      const attributes = { weight: message.weight, colour: "#" + r + g + b }
+      const initialPoint = [
+        pointFromProtocol(message.start[0]),
+        pointFromProtocol(message.start[1]),
+        attributes.weight,
+        attributes.colour,
+      ]
+
+      attributesByXCDPIdentifier.set(message.identifier, attributes)
+      disableSend = true
+      pathIDsByXCDPIdentifier.set(
+        message.identifier,
+        this.room.addPathRemote(initialPoint),
+      )
+      disableSend = false
+    } else if (message.type === "APPEND") {
+      if (ourID === undefined) {
+        // They're trying to hack us with an ID that wasn't added
+        // Plan of action: initiate DDOS against them in retaliation
+        return
+      }
+
+      const attributes = attributesByXCDPIdentifier.get(message.identifier)
+      disableSend = true
+      for (let index = 0; index != message.points.length; index++) {
+        const point = message.points[index]
+        const toAdd = [
+          pointFromProtocol(point[0]),
+          pointFromProtocol(point[1]),
+          attributes.weight,
+          attributes.colour,
+        ]
+        this.room.extendPathRemote(ourID, toAdd)
+      }
+      disableSend = false
+    } else if (message.type === "DELETE") {
+      if (ourID === undefined) {
+        // Ditto above. Alternative explanation: exfiltrator was started late and missed the add
+        return
+      }
+
+      const offset = parseInt(message.start_offset)
+      extendPointPresenceMapFor(ourID, offset)
+      this.room.extendErasureIntervals(ourID, offset, [
+        [message.start_offset - offset, message.end_offset - offset],
+      ])
+    }
+  }
+}
+
+function extendPointPresenceMapFor(pathID, minLength) {
+  const mapping = pointPresenceMap.get(pathID)
+  if (mapping === undefined) {
+    pointPresenceMap.set(pathID, Array(minLength).fill(true))
+  } else if (mapping.length < minLength) {
+    // Extend array with new points
+    // For example, line is being inked, then someone erases a bit (causing creation of the presence entry)
+    // But the inking continues, followed by another erasure later on
+    mapping.push.apply(mapping, Array(minLength - mapping.length).fill(true))
+  }
+}
+
+const XCDPIdentifierFrom = (lineID) => {
+  for (const [XCDPID, ourID] of pathIDsByXCDPIdentifier.entries()) {
+    if (ourID === lineID) {
+      return XCDPID
+    }
+  }
+}
+
+function parseColourComponent(component) {
+  return component.toString(16).padStart(2, "0")
+}

src/p2p-mesh.js

+"use strict"
+
+export default class P2PMesh {
+  constructor(crdt, options) {
+    if (options === undefined) {
+      throw new Error("Options must not be undefined!")
+    }
+
+    this.crdt = crdt
+
+    this.options = options
+
+    this.options.mesh = this.options.mesh || {}
+    this.options.mesh.minPeers = this.options.mesh.minPeers || 4
+    this.options.mesh.maxPeers = this.options.mesh.maxPeers || 8
+
+    this.options.handshake = this.options.handshake || {}
+    this.options.handshake.initial = this.options.handshake.initial || 100
+    this.options.handshake.interval = this.options.handshake.interval || 500
+
+    this.options.heartbeat = this.options.heartbeat || {}
+    this.options.heartbeat.interval = this.options.heartbeat.interval || 500
+    this.options.heartbeat.minimum = this.options.heartbeat.minimum || 1000
+    this.options.heartbeat.timeout = this.options.heartbeat.timeout || 10000
+
+    this.queue = new Worker("js/queue.js")
+
+    this.queue.onmessage = (event) => {
+      if (!this.crdt) {
+        return
+      }
+
+      const method = event.data.method
+
+      if (method == "send") {
+        const { uid, channel, message } = event.data
+
+        // CRDT (e.g. y-js db transactions) can send messages after a peer has disconnected
+        if (channel == "crdt" && !this.peers.has(uid)) {
+          return
+        }
+
+        this.connection.send(uid, channel, message)
+      } else if (method == "broadcast") {
+        const { channel, message } = event.data
+
+        return this.connection.broadcast(channel, message)
+      } else if (method == "received") {
+        const { uid, channel, message } = event.data
+
+        if (channel === "tw-ml") {
+          // Handshakes can only be sent and received directly
+          if (message === "tw") {
+            // Response message in the handshake
+            this.queue.postMessage({
+              method: "send",
+              uid,
+              channel: "tw-ml",
+              message: "ml",
+              compressed: false,
+            })
+          } else if (message == "ml") {
+            // Handshake completed
+            this.checkAndInsertPeer(uid)
+          }
+        } else {
+          this.checkAndInsertPeer(uid)
+
+          if (channel === "crdt") {
+            this.checkAndInsertPeer(uid)
+
+            this.crdt.receiveMessage(uid, message)
+          }
+        }
+      }
+    }
+
+    this.initialiseConnection()
+  }
+
+  initialiseConnection() {
+    this.peers = new Map()
+
+    this.connection = new this.options.connection(this.options)
+
+    this.connection.addEventListener("roomJoined", () => {
+      this.checkAndEnsureUser()
+    })
+
+    this.connection.addEventListener("roomLeft", () => {
+      console.log("TODO: LEFT ROOM")
+    })
+
+    this.connection.addEventListener("channelOpened", ({ detail: uid }) => {
+      this.checkAndEnsureUser()
+
+      // Start a handshake to ensure both sides are able to use the channel
+      function handshake(peer) {
+        const _peer = this.connection.getPeerHandle(uid)
+
+        if (!_peer || _peer !== peer) {
+          return
+        }
+
+        if (this.peers.has(uid)) {
+          return
+        }
+
+        // Initial message in the handshake
+        this.queue.postMessage({
+          method: "send",
+          uid,
+          channel: "tw-ml",
+          message: "tw",
+          compressed: false,
+        })
+
+        setTimeout(handshake.bind(this, peer), this.options.handshake.interval)
+      }
+
+      setTimeout(
+        handshake.bind(this, this.connection.getPeerHandle(uid)),
+        this.options.handshake.initial,
+      )
+    })
+
+    this.connection.addEventListener("channelError", ({ detail: uid }) =>
+      console.log("TODO: CHANNEL ERROR", uid),
+    )
+
+    this.connection.addEventListener("channelClosed", ({ detail: uid }) => {
+      this.checkAndEnsureUser()
+      this.checkAndRemovePeer(uid)
+    })
+
+    this.connection.addEventListener(
+      "messageReceived",
+      ({ detail: { uid, channel, message } }) => {
+        this.checkAndEnsureUser()
+
+        this.queue.postMessage({
+          method: "received",
+          uid,
+          channel,
+          message,
+        })
+      },
+    )
+  }
+
+  // Ensure that the crdt is up to date on the user's id
+  checkAndEnsureUser() {
+    if (!this.crdt) {
+      return
+    }
+
+    const uid = this.connection.getUserID()
+
+    if (this.crdt.getUserID() == uid) {
+      return
+    }
+
+    this.crdt.setUserID(uid)
+  }
+
+  // Ensure that the crdt knows that the peer has joined
+  checkAndInsertPeer(uid) {
+    if (!this.crdt) {
+      return
+    }
+
+    if (this.peers.has(uid)) {
+      return
+    }
+
+    const health = {
+      lastFootprintResolved: true,
+      lastFootprint: 0,
+      lastFootprintTimestamp: Date.now(),
+    }
+    health.cb = setInterval(
+      this.heartbeat.bind(
+        this,
+        uid,
+        this.connection.getPeerHandle(uid),
+        health,
+      ),
+      this.options.heartbeat.interval,
+    )
+
+    this.peers.set(uid, health)
+
+    this.crdt.userJoined(uid)
+  }
+
+  heartbeat(uid, peer, health) {
+    const _peer = this.connection.getPeerHandle(uid)
+
+    if (!_peer || _peer !== peer || !this.peers.has(uid)) {
+      clearInterval(health.cb)
+
+      return
+    }
+
+    if (!health.lastFootprintResolved) {
+      return this.connection.terminatePeer(uid)
+    }
+    health.lastFootprintResolved = false
+
+    const self = this
+
+    this.connection
+      .getPeerFootprint(uid)
+      .then((footprint) => {
+        health.lastFootprintResolved = true
+
+        const timeSinceLastFootprint =
+          Date.now() - health.lastFootprintTimestamp
+
+        if (footprint != health.lastFootprint) {
+          health.lastFootprint = footprint
+          health.lastFootprintTimestamp = Date.now()
+        } else if (timeSinceLastFootprint > self.options.heartbeat.timeout) {
+          return this.connection.terminatePeer(uid)
+        } else if (timeSinceLastFootprint > self.options.heartbeat.interval) {
+          self.queue.postMessage({
+            method: "send",
+            uid,
+            channel: "heartbeat",
+          })
+        }
+
+        this.crdt.reportConnectionQuality(
+          uid,
+          1.0 -
+            (self.options.heartbeat.timeout -
+              Math.max(
+                timeSinceLastFootprint,
+                self.options.heartbeat.minimum,
+              )) /
+              (self.options.heartbeat.timeout - self.options.heartbeat.minimum),
+        )
+      })
+      .catch(() => {
+        return this.connection.terminatePeer(uid)
+      })
+  }
+
+  // Ensure that the crdt knows that the peer has left
+  checkAndRemovePeer(uid) {
+    if (!this.crdt) {
+      return
+    }
+
+    if (!this.peers.has(uid)) {
+      return
+    }
+
+    this.peers.delete(uid)
+
+    this.crdt.userLeft(uid)
+  }
+
+  disconnect() {
+    this.queue.terminate()
+
+    this.connection.destructor()
+
+    this.crdt = null
+  }
+
+  send(uid, message, compressed = true) {
+    this.queue.postMessage({
+      method: "send",
+      uid,
+      channel: "crdt",
+      message,
+      compressed,
+    })
+  }
+
+  broadcast(message, compressed = true) {
+    this.queue.postMessage({
+      method: "broadcast",
+      channel: "crdt",
+      message,
+      compressed,
+    })
+  }
+}

src/queue.js

@@ -3,14 +3,14 @@
 import MessagePack from "what-the-pack"
 import pako from "pako"
 import uuidv4 from "uuid/v4"
-
-const UintBuffer = MessagePack.Buffer || Buffer
+import FastBitSet from "fastbitset"
 
 const MESSAGE_BUFFER_SIZE = 2 ** 25 // 32MB
 const MESSAGE_SLICE_SIZE = 2 ** 10 // 1KB
 
 const { encode, decode } = MessagePack.initialize(MESSAGE_BUFFER_SIZE)
 
+const queue = []
 const buffer = {}
 
 onmessage = (event) => {
@@ -20,10 +20,13 @@ onmessage = (event) => {
 
   if (event.data.method == "send" || event.data.method == "broadcast") {
     let message = event.data.message
-    const compressed = typeof message == "object"
+
+    const compressed =
+      event.data.compressed != null ? event.data.compressed : true
+
     const uuid = uuidv4()
 
-    //console.log("send in", message)
+    //console.log("send in", JSON.stringify(message))
 
     message = encode(message)
 
@@ -31,76 +34,85 @@ onmessage = (event) => {
       message = pako.deflate(message)
     }
 
-    for (
-      let offset = 0;
-      offset < message.length;
-      offset += MESSAGE_SLICE_SIZE
-    ) {
-      event.data.message = {
+    const sender = (slice) => {
+      let offset = slice * MESSAGE_SLICE_SIZE
+
+      event.data.message = encode({
         uuid,
         message: message.subarray(offset, offset + MESSAGE_SLICE_SIZE),
-        slice: offset / MESSAGE_SLICE_SIZE,
-        length: Math.ceil(message.length / MESSAGE_SLICE_SIZE),
+        slice,
+        length: message.length,
         compressed,
-      }
+      })
 
-      //console.log("send out", event.data)
+      //console.log(JSON.stringify([...event.data.message]), event.data.message.length, "send out")
 
       self.postMessage(event.data)
+
+      offset += MESSAGE_SLICE_SIZE
+
+      if (offset < message.length) {
+        setTimeout(() => sender(slice + 1), 5)
+      } else {
+        queue.shift()
+
+        if (queue.length > 0) queue[0](0)
+      }
     }
+
+    queue.push(sender)
+
+    if (queue.length == 1) queue[0](0)
   } else if (event.data.method == "received") {
-    let message = event.data.message.message
+    const packet = decode(MessagePack.Buffer.from(event.data.message))
+    let message = packet.message
 
-    //console.log("receive in", message)
+    //console.log("receive in", JSON.stringify(packet))
 
-    if (event.data.message.length > 1) {
+    if (packet.length > MESSAGE_SLICE_SIZE) {
       let messages = buffer[event.data.uid]
       if (!messages) {
         messages = {}
         buffer[event.data.uid] = messages
       }
 
-      let slices = messages[event.data.message.uuid]
+      let slices = messages[packet.uuid]
       if (!slices) {
-        slices = []
-        messages[event.data.message.uuid] = slices
+        slices = {
+          message: new Uint8Array(packet.length),
+          received: new FastBitSet(),
+          length: 0,
+        }
+        messages[packet.uuid] = slices
       }
 
-      slices.push(event.data.message)
-
-      if (slices.length < slices[slices.length - 1].length) {
-        return
+      // Packets may arrive out-of-order and multiple times
+      if (slices.received.checkedAdd(packet.slice) === 1) {
+        slices.length += packet.message.length
+        slices.message.set(packet.message, packet.slice * MESSAGE_SLICE_SIZE)
       }
 
-      message = new Uint8Array(
-        slices.reduce((acc, s) => acc + s.message.length, 0),
-      )
-
-      slices.sort((a, b) => a.slice - b.slice)
+      if (slices.length < slices.message.length) {
+        delete packet.uuid
+        delete packet.message
 
-      let offset = 0
-
-      for (const slice of slices) {
-        message.set(slice.message, offset)
-        offset += slice.message.length
+        return
       }
 
-      delete messages[event.data.message.uuid]
-    }
+      message = slices.message
 
-    if (event.data.message.compressed) {
-      message = pako.inflate(Uint8Array.from(message))
+      delete messages[packet.uuid]
     }
 
-    if (!UintBuffer.isBuffer(message)) {
-      message = UintBuffer.from(message)
+    if (packet.compressed) {
+      message = pako.inflate(Uint8Array.from(message))
     }
 
-    message = decode(message)
+    message = decode(MessagePack.Buffer.from(message))
 
     event.data.message = message
 
-    //console.log("receive out", event.data)
+    //console.log("receive out", JSON.stringify(event.data))
 
     self.postMessage(event.data)
   }

src/room.js

-import uuidv4 from "uuid/v4"
-import yArray from "y-array"
-import yMap from "y-map"
-import yUnion, { Union } from "./y-union.js"
-import yMemory from "y-memory"
-import Y from "yjs"
-
-import yP2PMesh from "./y-p2p-mesh.js"
-
-yMemory(Y)
-Y.Struct.Union = Union
-yUnion(Y)
-yMap(Y)
-yArray(Y)
-yP2PMesh(Y)
-
 import { spreadErasureIntervals, flattenErasureIntervals } from "./erasure.js"
 
-/* webpack should NOT import the yaeti NodeJS polyfill */
-// #!if false
-import { EventTarget } from "yaeti"
-// #!endif
-
 class Room extends EventTarget {
   constructor(name) {
     super()
     this.name = name
-    this._y = null
-    this.ownID = null
+    this.crdt = null
+    this.undoStack = []
   }
 
   disconnect() {
-    this._y.destroy()
+    this.crdt.destroy()
+    this.crdt = null
+  }
+
+  getUserID() {
+    return this.crdt.getUserID()
   }
 
   addPath([x, y, w, colour]) {
-    const id = uuidv4()
+    const pathID = this.crdt.addPath([x, y, w, colour])
+
+    this.undoStack.push([pathID, 0, 0])
+
+    this.dispatchEvent(new CustomEvent("undoEnabled"))
+
+    return pathID
+  }
+
+  addPathRemote([x, y, w, colour]) {
+    return this.crdt.addPathRemote([x, y, w, colour])
+  }
 
-    this.shared.strokePoints.set(id, Y.Array).push([[x, y, w, colour]])
-    this.shared.eraseIntervals.set(id, Y.Union)
+  extendPath(pathID, [x, y, w, colour]) {
+    const pathLength = this.crdt.extendPath(pathID, [x, y, w, colour])
 
-    return id
+    if (pathLength == 2) {
+      this.undoStack[this.undoStack.length - 1] = [pathID, 0, 1]
+    } else {
+      this.undoStack.push([pathID, pathLength - 2, pathLength - 1])
+    }
+
+    this.dispatchEvent(new CustomEvent("undoEnabled"))
   }
 
-  extendPath(id, [x, y, w, colour]) {
-    this.shared.strokePoints.get(id).push([[x, y, w, colour]])
+  extendPathRemote(pathID, [x, y, w, colour]) {
+    return this.crdt.extendPathRemote(pathID, [x, y, w, colour])
+  }
+
+  endPath(pathID) {
+    this.crdt.endPath(pathID)
   }
 
   extendErasureIntervals(pathID, pointID, newIntervals) {
-    this.shared.eraseIntervals
-      .get(pathID)
-      .merge(flattenErasureIntervals({ [pointID]: newIntervals }))
+    this.crdt.extendErasureIntervals(
+      pathID,
+      flattenErasureIntervals({ [pointID]: newIntervals }),
+    )
+  }
+
+  replacePath(pathID, newPoints) {
+    this.fastUndo(true)
+
+    newPoints.forEach((point) => this.extendPath(pathID, point))
+
+    this.undoStack.splice(this.undoStack.length - newPoints.length, 1)
   }
 
   getPaths() {
     const paths = new Map()
 
-    for (const id of this.shared.strokePoints.keys()) {
-      paths.set(id, this._generatePath(id))
+    for (const pathID of this.crdt.getPathIDs()) {
+      paths.set(pathID, this.crdt.getPathPoints(pathID))
     }
 
     return paths
   }
 
-  getErasureIntervals(pathID) {
-    return this._generateRemovedIntervals(pathID)
-  }
-
   getPathPoints(pathID) {
-    return this._generatePath(pathID)
+    return this.crdt.getPathPoints(pathID)
   }
 
-  get shared() {
-    return this._y.share
+  getErasureIntervals(pathID) {
+    return spreadErasureIntervals(this.crdt.getErasureIntervals(pathID))
   }
 
-  _generatePath(id) {
-    const points = this.shared.strokePoints.get(id)
-
-    if (!points) return []
-
-    return points.toArray()
+  canUndo() {
+    return this.undoStack.length > 0
   }
 
-  _generateRemovedIntervals(id) {
-    const intervals = this.shared.eraseIntervals.get(id)
+  undo() {
+    const operation = this.undoStack.pop()
 
-    if (!intervals) return []
+    if (!operation) return
 
-    return spreadErasureIntervals(intervals.get())
-  }
+    const [pathID, ...interval] = operation
 
-  inviteUser(id) {
-    this._y.connector.connectToPeer(id)
+    this.crdt.extendErasureIntervals(pathID, [interval])
   }
 
-  async _initialise(connection) {
-    this._y = await Y({
-      db: {
-        name: "memory",
-      },
-      connector: {
-        name: "p2p-mesh",
-        connection,
-        url: "/",
-        room: this.name,
-        mesh: {
-          minPeers: 4,
-          maxPeers: 8,
-        },
-        handshake: {
-          initial: 100,
-          interval: 500,
-        },
-        heartbeat: {
-          interval: 500,
-          minimum: 1000,
-          timeout: 10000,
-        },
-        onUserEvent: (event) => {
-          if (event.action == "userConnection") {
-            const { id, quality } = event
-            this.dispatchEvent(
-              new CustomEvent("userConnection", { detail: { id, quality } }),
-            )
-          } else if (event.action == "userID") {
-            const { user: id } = event
-            this.ownID = id
-            this.dispatchEvent(new CustomEvent("allocateOwnID", { detail: id }))
-          } else if (event.action == "userJoined") {
-            const { user: id } = event
-            this.dispatchEvent(new CustomEvent("userJoin", { detail: id }))
-          } else if (event.action == "userLeft") {
-            const { user: id } = event
-            this.dispatchEvent(new CustomEvent("userLeave", { detail: id }))
-          } else if (event.action === "peerSyncedWithUs") {
-            const { user: id } = event
-            this.dispatchEvent(
-              new CustomEvent("peerSyncedWithUs", { detail: id }),
-            )
-          } else if (event.action === "waitingForSyncStep") {
-            const { user: id } = event
-            this.dispatchEvent(
-              new CustomEvent("waitingForSyncStep", { detail: id }),
-            )
-          } else if (event.action === "weSyncedWithPeer") {
-            const { user: id } = event
-            this.dispatchEvent(
-              new CustomEvent("weSyncedWithPeer", { detail: id }),
-            )
-          }
-        },
-      },
-      share: {
-        strokePoints: "Map",
-        eraseIntervals: "Map",
-      },
-    })
-
-    const dispatchRemovedIntervalsEvent = (lineEvent) => {
-      const id = lineEvent.name
-      const intervals = this._generateRemovedIntervals(id)
-      const detail = { id, intervals }
-      this.dispatchEvent(
-        new CustomEvent("removedIntervalsChange", {
-          detail,
-        }),
-      )
-    }
+  fastUndo(forReplacing = false) {
+    let from = this.undoStack.length - 1
 
-    const dispatchPathUpdateEvent = (lineEvent) => {
-      const id = lineEvent.name
-      const points = this._generatePath(id)
-      const detail = { id, points }
-      this.dispatchEvent(new CustomEvent("addOrUpdatePath", { detail }))
-    }
+    if (from < 0) return
 
-    this.shared.strokePoints.observe((lineEvent) => {
-      if (lineEvent.type == "add") {
-        dispatchPathUpdateEvent(lineEvent)
+    // eslint-disable-next-line no-unused-vars
+    const [pathID, _, end] = this.undoStack[from]
+    const endErasing = forReplacing ? end + 1 : end
 
-        lineEvent.value.observe((pointEvent) => {
-          if (pointEvent.type == "insert") {
-            dispatchPathUpdateEvent(lineEvent)
-          }
-        })
+    for (; from >= 0; from--) {
+      if (this.undoStack[from][0] != pathID) {
+        from++
+        break
       }
-    })
-    this.shared.eraseIntervals.observe((lineEvent) => {
-      if (lineEvent.type == "add") {
-        dispatchRemovedIntervalsEvent(lineEvent)
-
-        lineEvent.value.observe(() => {
-          dispatchRemovedIntervalsEvent(lineEvent)
-        })
-      }
-    })
+    }
+
+    this.undoStack = this.undoStack.slice(0, Math.max(0, from))
+
+    this.crdt.extendErasureIntervals(pathID, [[0, endErasing]])
   }
 }
 
-export const connect = async (roomName, connection) => {
+export const connect = async (
+  roomName,
+  CRDT,
+  connection,
+  options = undefined,
+) => {
   const room = new Room(roomName)
-  await room._initialise(connection)
+
+  await CRDT.initialise(
+    room,
+    Object.assign({}, options, {
+      connection,
+      url: "/",
+      room: room.name,
+      mesh: {
+        minPeers: 4,
+        maxPeers: 8,
+      },
+      handshake: {
+        initial: 100,
+        interval: 500,
+      },
+      heartbeat: {
+        interval: 500,
+        minimum: 1000,
+        timeout: 10000,
+      },
+    }),
+  )
+
   return room
 }

src/server.js

@@ -45,6 +45,17 @@ app.use((request, response, next) => {
   next()
 })
 
+app.get("/", (request, response, next) => {
+  if (request.query.room == null) {
+    const url = new URL(
+      `${request.protocol}://${request.get("host")}${request.originalUrl}`,
+    )
+    url.searchParams.set("room", "imperial")
+    return response.redirect(url)
+  }
+  next()
+})
+
 app.use("/", express.static("public"))
 
 server.listen(port, host, () => {

public/service-worker.js → src/service-worker.js

@@ -7,25 +7,7 @@ self.addEventListener("activate", (event) => {
 })
 
 const CACHE_NAME = "APP-V0"
-const FILES_TO_CACHE = [
-  "/index.html",
-  "/styles.css",
-  "/cursor.svg",
-  "/js/app.js",
-  "/js/queue.js",
-  "/logo.png",
-  "/manifest.json",
-  "/assets/fonts/martel-v4-latin/martel-v4-latin-regular.eot",
-  "/assets/fonts/martel-v4-latin/martel-v4-latin-regular.svg",
-  "/assets/fonts/martel-v4-latin/martel-v4-latin-regular.ttf",
-  "/assets/fonts/martel-v4-latin/martel-v4-latin-regular.woff",
-  "/assets/fonts/martel-v4-latin/martel-v4-latin-regular.woff2",
-  "/synchronising.svg",
-  "/synchronised.svg",
-  "/quality-high.svg",
-  "/quality-medium.svg",
-  "/quality-low.svg",
-]
+const FILES_TO_CACHE = [FILES_TO_CACHE_LIST] // eslint-disable-line no-undef
 const FILE_ALIASES = new Map([["/", "/index.html"]])
 
 self.addEventListener("install", async () => {
@@ -41,7 +23,11 @@ self.addEventListener("activate", async () => {
 })
 
 const normalizePath = (path) => {
-  let normalizedPath = path.replace(/\/+/g, "/").replace(/$(?<!^)\/$/, "")
+  let normalizedPath = path.replace(/\/+/g, "/")
+  // TODO: Is this a correct replacement for replace(/$(?<!^)\/$/, "") (compatible with Safari)?
+  if (normalizedPath != "/" && normalizedPath.endsWith("/")) {
+    normalizedPath = normalizedPath.slice(0, -1)
+  }
   normalizedPath = FILE_ALIASES.get(normalizedPath) || normalizedPath
   return normalizedPath
 }

src/shapes.js

+const LINE_ANGLE_THRESHOLD = Math.PI / 6
+const VECTOR_LEN_THRESHOLD_FRACTION = 0.3
+
+const RECT_MATRIX_SIZE = 3
+const RECT_MATRIX_CENTER_RATIO = 0.65
+
+const RECT_THRESHOLD_CENTER = 0
+const RECT_THRESHOLD_SIDE_VARIANCE = 0.25
+
+const MIN_RECT_POINTS = 4
+const MIN_LINE_POINTS = 2
+
+function getDistance(p1, p2) {
+  if (!(p1 && p2)) return 0
+  const [[x0, y0], [x1, y1]] = [p1, p2]
+  return Math.hypot(x1 - x0, y1 - y0)
+}
+
+function vectorLen(v) {
+  const [x, y] = v
+  return Math.hypot(x, y)
+}
+
+function diffVector([x0, y0], [x1, y1]) {
+  return [x0 - x1, y0 - y1]
+}
+
+function angleBetweenVectors(p1, p2) {
+  const [[x0, y0], [x1, y1]] = [p1, p2]
+  return Math.acos((x0 * x1 + y0 * y1) / (vectorLen(p1) * vectorLen(p2)))
+}
+
+function boundingCoords(points) {
+  const xs = points.map((p) => p[0])
+  const ys = points.map((p) => p[1])
+  return {
+    maxX: Math.max(...xs),
+    minX: Math.min(...xs),
+    maxY: Math.max(...ys),
+    minY: Math.min(...ys),
+  }
+}
+
+function matrixBoundsArray(min, max) {
+  const d = max - min
+  const centerSegmentSize = d * RECT_MATRIX_CENTER_RATIO
+  const smallStep = (d - centerSegmentSize) / 2
+  const p = [min + smallStep, min + smallStep + centerSegmentSize, max]
+  return p
+}
+
+function getCluster([x, y], xBounds, yBounds) {
+  return {
+    x: xBounds.findIndex((bound) => x <= bound),
+    y: yBounds.findIndex((bound) => y <= bound),
+  }
+}
+
+function computeClusters(points, xBounds, yBounds) {
+  const clusters = Array(RECT_MATRIX_SIZE)
+    .fill(0)
+    .map(() =>
+      Array(RECT_MATRIX_SIZE)
+        .fill()
+        .map(() => ({ arr: [], sum: 0 })),
+    )
+  const intervals = points.map((point, i) => ({
+    point,
+    dist: getDistance(point, points[i + 1]),
+  }))
+
+  let totalSum = 0
+  intervals.forEach((interval) => {
+    const { x, y } = getCluster(interval.point, xBounds, yBounds)
+    clusters[x][y].arr.push(interval)
+    clusters[x][y].sum += interval.dist
+    totalSum += interval.dist
+  })
+
+  return { arr: clusters, totalSum }
+}
+
+function clusterCoefficients(clusters) {
+  return clusters.arr.map((rowCluster) =>
+    rowCluster.map((cluster) => cluster.sum / clusters.totalSum),
+  )
+}
+
+export function computeMatrixCoefficients(points, boundingRect) {
+  const { maxX, minX, maxY, minY } = boundingRect
+  const xBounds = matrixBoundsArray(minX, maxX)
+  const yBounds = matrixBoundsArray(minY, maxY)
+  const clusters = computeClusters(points, xBounds, yBounds)
+  const coefficients = clusterCoefficients(clusters, points)
+  return coefficients
+}
+
+function couldBeRect(points) {
+  if (points.length < MIN_RECT_POINTS) return false
+
+  const boundingRect = boundingCoords(points)
+  const matrixCoefficients = computeMatrixCoefficients(points, boundingRect)
+
+  let [maxC, minC] = [0, 1]
+  for (let i = 0; i < RECT_MATRIX_SIZE; i++) {
+    for (let j = 0; j < RECT_MATRIX_SIZE; j++) {
+      if (!(i === j && j === 1)) {
+        maxC = Math.max(maxC, matrixCoefficients[i][j])
+        minC = Math.min(minC, matrixCoefficients[i][j])
+      }
+    }
+  }
+
+  if (
+    matrixCoefficients[1][1] <= RECT_THRESHOLD_CENTER &&
+    maxC - minC < RECT_THRESHOLD_SIDE_VARIANCE
+  ) {
+    return { coefficients: matrixCoefficients, boundingRect }
+  }
+  return undefined
+}
+
+function couldBeLine(points) {
+  if (points.length < MIN_LINE_POINTS) return false
+
+  const vectorThreshold = Math.floor(
+    points.length * VECTOR_LEN_THRESHOLD_FRACTION,
+  )
+  const pivot = points[0]
+  let cumulativeThreshold = 0
+  for (let i = 2; i < points.length; i++) {
+    const prev = points[i - 1]
+    const curr = points[i]
+    const d1 = diffVector(pivot, prev)
+    const d2 = diffVector(prev, curr)
+    const angle = angleBetweenVectors(d1, d2)
+
+    if (Math.abs(angle) > LINE_ANGLE_THRESHOLD) {
+      const d2Len = vectorLen(d2)
+      if (cumulativeThreshold < vectorThreshold && d2Len < vectorThreshold) {
+        cumulativeThreshold += d2Len
+        continue
+      }
+      return false
+    }
+  }
+  return true
+}
+
+function recognizedRect(_, rectDetectionData) {
+  const { minX, minY, maxX, maxY } = rectDetectionData.boundingRect
+  return {
+    boundingPoints: [
+      [minX, minY],
+      [minX, maxY],
+      [maxX, maxY],
+      [maxX, minY],
+      [minX, minY],
+    ],
+    shape: Shapes.rectangle,
+  }
+}
+
+function recognizedLine(points) {
+  const [p1, p2] = [points[0], points[points.length - 1]]
+  return {
+    shape: Shapes.line,
+
+    // Take only [x, y] from the whole point tuple
+    lastPoint: p2.slice(0, 2),
+    firstPoint: p1.slice(0, 2),
+  }
+}
+
+function recognizeFromPoints(points) {
+  const rectDetectData = couldBeRect(points)
+  if (rectDetectData) {
+    return recognizedRect(points, rectDetectData)
+  } else if (couldBeLine(points)) {
+    return recognizedLine(points)
+  }
+
+  return {}
+}
+
+export const Shapes = {
+  rectangle: "rect",
+  line: "line",
+}
+
+export default recognizeFromPoints

signalbuddy @ 216be42b

-Subproject commit 04ea4e5081059faffdebae65c92da25fa98f996d
+Subproject commit 216be42b2a6cc5632d427cf222c789d34026a274

tiny-worker @ 60d95bad

-Subproject commit 60d95bad97b43bb73dda1ef86b605b1114ae1294

src/tool-selection.js

@@ -3,18 +3,30 @@ import * as HTML from "./elements.js"
 export const Tools = Object.freeze({
   PEN: Symbol("pen"),
   ERASER: Symbol("eraser"),
+  DRAGGER: Symbol("dragger"),
 })
+const STANDARD_CANVAS_OFFSET = [-5000, -5000]
 
-let tool = Tools.PEN
-let strokeColour = "#0000ff"
-let strokeRadius = 5
+let canvasOffset = [...STANDARD_CANVAS_OFFSET]
+let selectedTool = Tools.PEN
+let strokeColour = "#000000"
+let strokeRadius = 2
+let recognitionEnabled = false
 // TODO: The erase radius should also be selectable.
 const ERASE_RADIUS = 20
 
-export const getTool = () => tool
+export const getTool = () => selectedTool
 export const getStrokeColour = () => strokeColour
 export const getStrokeRadius = () => strokeRadius
+
+export const applyCanvasOffset = ([x, y]) => {
+  canvasOffset[0] += x
+  canvasOffset[1] += y
+  updateCanvasOffset()
+}
+
 export const getEraseRadius = () => ERASE_RADIUS
+export const isRecognitionModeSet = () => recognitionEnabled
 
 const showElement = (element) => {
   element.style.display = "block"
@@ -24,41 +36,102 @@ const hideElement = (element) => {
   element.style.display = "none"
 }
 
+function setStrokeColour(colour) {
+  HTML.rectangle.style.backgroundColor = colour
+  HTML.strokeColorPicker.value = colour
+  HTML.labelColours.style.backgroundColor = colour
+  strokeColour = colour
+}
+
+function setStrokeRadius(value) {
+  HTML.strokeRadiusSlider.setAttribute("value", value)
+  strokeRadius = value / 2
+}
+
+setStrokeColour(strokeColour)
+setStrokeRadius(strokeRadius)
+
+HTML.recognitionModeButton.addEventListener("click", () => {
+  recognitionEnabled = !recognitionEnabled
+  if (recognitionEnabled) {
+    setSelectedTool(Tools.PEN)
+    HTML.recognitionModeButton.classList.add("selected")
+  } else {
+    HTML.recognitionModeButton.classList.remove("selected")
+  }
+})
+
+const toolElements = {
+  [Tools.PEN]: HTML.penButton,
+  [Tools.ERASER]: HTML.eraserButton,
+  [Tools.DRAGGER]: HTML.draggingToolButton,
+}
+
+function setSelectedTool(newSelectedTool) {
+  selectedTool = newSelectedTool
+
+  Object.getOwnPropertySymbols(toolElements).forEach((e) =>
+    toolElements[e].classList.remove("selected"),
+  )
+
+  if (newSelectedTool != Tools.PEN) {
+    recognitionEnabled = false
+    HTML.recognitionModeButton.classList.remove("selected")
+  }
+
+  toolElements[newSelectedTool].classList.add("selected")
+}
+
+function withPx(str) {
+  return `${str}px`
+}
+
+function updateCanvasOffset() {
+  HTML.canvas.style.left = withPx(canvasOffset[0])
+  HTML.canvas.style.top = withPx(canvasOffset[1])
+}
+
+function centerCanvas() {
+  canvasOffset = [...STANDARD_CANVAS_OFFSET]
+  updateCanvasOffset()
+}
+
 HTML.penButton.addEventListener("click", () => {
-  if (tool == Tools.PEN) {
+  if (selectedTool == Tools.PEN) {
     showElement(HTML.penProperties)
   } else {
-    tool = Tools.PEN
-    HTML.penButton.classList.add("selected")
-    HTML.eraserButton.classList.remove("selected")
+    setSelectedTool(Tools.PEN)
   }
 })
 
 HTML.eraserButton.addEventListener("click", () => {
-  tool = Tools.ERASER
-  HTML.penButton.classList.remove("selected")
-  HTML.eraserButton.classList.add("selected")
+  setSelectedTool(Tools.ERASER)
+})
+
+HTML.draggingToolButton.addEventListener("click", () => {
+  setSelectedTool(Tools.DRAGGER)
+})
+
+HTML.canvasCenterToolButton.addEventListener("click", () => {
+  centerCanvas()
 })
 
-HTML.picker.addEventListener("change", () => {
+HTML.strokeColorPicker.addEventListener("change", () => {
   const paletteColour = event.target.value
-  HTML.rectangle.style.backgroundColor = paletteColour
-  HTML.labelColours.style.backgroundColor = paletteColour
-  strokeColour = paletteColour
+  setStrokeColour(paletteColour)
 })
 
-HTML.slider.oninput = function() {
+HTML.strokeRadiusSlider.oninput = function() {
   HTML.output.innerHTML = this.value
   strokeRadius = this.value / 2
 }
 
-HTML.output.innerHTML = HTML.slider.value
+HTML.output.innerHTML = HTML.strokeRadiusSlider.value
 
 // If the page has been refreshed
 if (performance.navigation.type == 1) {
   const sliderValue = parseInt(HTML.output.innerHTML)
-  HTML.slider.setAttribute("value", sliderValue)
-  strokeRadius = sliderValue / 2
+  setStrokeRadius(sliderValue)
 }
 
 const x = window.matchMedia(
@@ -96,10 +169,7 @@ const svg = HTML.wheel.children
 for (let i = 1; i < svg.length; i++) {
   svg[i].addEventListener("click", (event) => {
     const paletteColour = event.target.getAttribute("fill")
-    HTML.rectangle.style.backgroundColor = paletteColour
-    HTML.picker.value = paletteColour
-    HTML.labelColours.style.backgroundColor = paletteColour
-    strokeColour = paletteColour
+    setStrokeColour(paletteColour)
     hideElement(HTML.palette)
   })
 }

src/wasm-crdt.js

+const WasmCRDTAsync = import("drawing-crdt")
+
+import { spreadErasureIntervals } from "./erasure.js"
+import P2PMesh from "./p2p-mesh.js"
+
+Array.prototype.remove = function(elem) {
+  const index = this.indexOf(elem)
+
+  if (index > -1) {
+    return this.splice(index, 1)[0]
+  }
+
+  return undefined
+}
+
+export default class WasmCRDTWrapper {
+  constructor(WasmCRDT, room, interval, resolve) {
+    this.room = room
+    this.mesh = null
+    this.resolve = resolve
+
+    this.users = {
+      synced: [],
+      syncing: null,
+      check: false,
+      waiting: [],
+    }
+
+    this.crdt = new WasmCRDT({
+      on_stroke: (stroke_id, points) => {
+        stroke_id = (" " + stroke_id).slice(1)
+
+        const detail = { id: stroke_id, points }
+
+        this.room.dispatchEvent(new CustomEvent("addOrUpdatePath", { detail }))
+      },
+      on_interval: (stroke_id, intervals) => {
+        const detail = {
+          id: stroke_id,
+          intervals: spreadErasureIntervals(intervals),
+        }
+
+        this.room.dispatchEvent(
+          new CustomEvent("removedIntervalsChange", {
+            detail,
+          }),
+        )
+      },
+      on_deltas: (deltas) => this.mesh.broadcast(deltas, true),
+      on_deltas_from_state: (uid, deltas) => {
+        this.mesh.send(
+          uid,
+          {
+            type: "sync step 2",
+            message: deltas,
+          },
+          true,
+        )
+
+        this.room.dispatchEvent(
+          new CustomEvent("weSyncedWithPeer", { detail: uid }),
+        )
+      },
+    })
+
+    this.interval = setInterval(() => {
+      this.crdt.fetch_events()
+      this.crdt.fetch_deltas()
+    }, interval)
+  }
+
+  destroy() {
+    clearInterval(this.interval)
+    this.interval = null
+
+    this.mesh.disconnect()
+    this.mesh = null
+
+    this.crdt.free()
+    this.crdt = null
+
+    this.room = null
+  }
+
+  static async initialise(room, options) {
+    const { WasmCRDT } = await WasmCRDTAsync
+
+    await new Promise((resolve) => {
+      room.crdt = new WasmCRDTWrapper(
+        WasmCRDT,
+        room,
+        (options.wasm && options.wasm.interval) || 0,
+        resolve,
+      )
+
+      room.crdt.mesh = new P2PMesh(room.crdt, options)
+    })
+  }
+
+  getUserID() {
+    return this.crdt.get_user()
+  }
+
+  setUserID(uid) {
+    const success = this.crdt.set_user(uid)
+
+    if (success) {
+      this.resolve()
+      this.room.dispatchEvent(new CustomEvent("allocateOwnID", { detail: uid }))
+    }
+
+    return success
+  }
+
+  fetchDrawingEvents() {
+    return this.crdt.fetch_events()
+  }
+
+  addPath([x, y, w, colour]) {
+    return this.crdt.add_stroke(x, y, w, colour)
+  }
+
+  addPathRemote([x, y, w, colour]) {
+    return this.crdt.add_stroke_unique(x, y, w, colour)
+  }
+
+  extendPath(pathID, [x, y, w, colour]) {
+    return this.crdt.add_point(pathID, x, y, w, colour)
+  }
+
+  extendPathRemote(pathID, [x, y, w, colour]) {
+    return this.crdt.add_point_unique(pathID, x, y, w, colour)
+  }
+
+  endPath(pathID) {
+    this.crdt.end_stroke(pathID)
+  }
+
+  extendErasureIntervals(pathID, newIntervals) {
+    newIntervals.forEach(([from, to]) =>
+      this.crdt.erase_stroke(pathID, from, to),
+    )
+  }
+
+  getPathIDs() {
+    return this.crdt.get_stroke_ids()
+  }
+
+  getPathPoints(pathID) {
+    return this.crdt.get_stroke_points(pathID)
+  }
+
+  getErasureIntervals(pathID) {
+    return this.crdt.get_stroke_intervals(pathID)
+  }
+
+  userJoined(uid) {
+    if (
+      this.users.syncing == uid ||
+      this.users.synced.includes(uid) ||
+      this.users.waiting.includes(uid)
+    ) {
+      return
+    }
+
+    this.users.waiting.push(uid)
+
+    this._continueSync()
+
+    this.room.dispatchEvent(new CustomEvent("userJoin", { detail: uid }))
+  }
+
+  userLeft(uid) {
+    if (this.users.syncing == uid) {
+      this.users.syncing = null
+      this.users.check = false
+
+      this._continueSync()
+    } else if (
+      !this.users.synced.remove(uid) &&
+      !this.users.waiting.remove(uid)
+    ) {
+      return
+    }
+
+    this.room.dispatchEvent(new CustomEvent("userLeave", { detail: uid }))
+  }
+
+  receiveMessage(uid, message) {
+    if (message instanceof Uint8Array) {
+      return this.crdt.apply_deltas(message)
+    }
+
+    const { type, message: _message } = message
+
+    if (type == "sync step 1" && _message instanceof Uint8Array) {
+      this.crdt.fetch_deltas_from_state_vector(uid, _message)
+    } else if (type == "sync step 2" && _message instanceof Uint8Array) {
+      this.users.check = this.crdt.apply_deltas(_message)
+
+      if (this.users.syncing == uid) {
+        this.users.syncing = null
+
+        if (this.users.check) {
+          this.users.synced.forEach((user) =>
+            this.mesh.send(user, { type: "sync check" }, false),
+          )
+          this.users.waiting.forEach((user) =>
+            this.mesh.send(user, { type: "sync check" }, false),
+          )
+        }
+
+        this.users.check = false
+
+        this.users.synced.push(uid)
+
+        this._continueSync()
+
+        this.room.dispatchEvent(
+          new CustomEvent("peerSyncedWithUs", { detail: uid }),
+        )
+      }
+    } else if (type == "sync check") {
+      this.users.synced.remove(uid)
+      this.users.waiting.remove(uid)
+
+      this.users.waiting.unshift(uid)
+
+      if (this.users.syncing == uid) {
+        this.users.syncing = null
+        this.users.check = false
+
+        this._continueSync()
+      }
+    }
+  }
+
+  _continueSync() {
+    if (this.users.syncing != null || this.users.waiting.length <= 0) {
+      return
+    }
+
+    this.users.syncing = this.users.waiting.shift()
+    this.users.check = false
+
+    this.mesh.send(
+      this.users.syncing,
+      {
+        type: "sync step 1",
+        message: this.crdt.get_state_vector(),
+      },
+      false,
+    )
+
+    this.room.dispatchEvent(
+      new CustomEvent("waitingForSyncStep", { detail: this.users.syncing }),
+    )
+  }
+
+  reportConnectionQuality(uid, quality) {
+    this.room.dispatchEvent(
+      new CustomEvent("userConnection", { detail: { id: uid, quality } }),
+    )
+  }
+}
+
+export const benchmark = {
+  blocksize: Number.MAX_SAFE_INTEGER,
+  eventsGC: Number.MAX_SAFE_INTEGER,
+  syncStep1: Uint8Array.of(
+    133,
+    164,
+    117,
+    117,
+    105,
+    100,
+    217,
+    36,
+    55,
+    101,
+    98,
+    98,
+    55,
+    53,
+    54,
+    51,
+    45,
+    50,
+    54,
+    100,
+    55,
+    45,
+    52,
+    97,
+    100,
+    101,
+    45,
+    56,
+    56,
+    54,
+    57,
+    45,
+    52,
+    52,
+    102,
+    102,
+    101,
+    100,
+    57,
+    49,
+    102,
+    99,
+    55,
+    54,
+    167,
+    109,
+    101,
+    115,
+    115,
+    97,
+    103,
+    101,
+    196,
+    31,
+    130,
+    164,
+    116,
+    121,
+    112,
+    101,
+    171,
+    115,
+    121,
+    110,
+    99,
+    32,
+    115,
+    116,
+    101,
+    112,
+    32,
+    49,
+    167,
+    109,
+    101,
+    115,
+    115,
+    97,
+    103,
+    101,
+    196,
+    3,
+    0,
+    0,
+    0,
+    165,
+    115,
+    108,
+    105,
+    99,
+    101,
+    0,
+    166,
+    108,
+    101,
+    110,
+    103,
+    116,
+    104,
+    31,
+    170,
+    99,
+    111,
+    109,
+    112,
+    114,
+    101,
+    115,
+    115,
+    101,
+    100,
+    194,
+  ),
+}

src/y-crdt.js

+import P2PMesh from "./p2p-mesh.js"
+
+import uuidv4 from "uuid/v4"
+import yArray from "y-array"
+import yMap from "y-map"
+import yUnion, { Union } from "./y-union.js"
+import yMemory from "y-memory"
+import Y from "yjs"
+
+yMemory(Y)
+Y.Struct.Union = Union
+yUnion(Y)
+yMap(Y)
+yArray(Y)
+
+function gc(obj) {
+  const objs = new Set()
+
+  const free = (obj) => {
+    if (obj == null) return
+
+    for (const key of Object.keys(obj)) {
+      if (typeof obj[key] == "object") {
+        if (!objs.has(obj[key])) {
+          objs.add(obj[key])
+          free(obj[key])
+        }
+      }
+
+      delete obj[key]
+    }
+  }
+
+  free(obj)
+
+  objs.clear()
+}
+
+export default class YjsCRDTWrapper extends Y.AbstractConnector {
+  constructor(y, options) {
+    if (options === undefined) {
+      throw new Error("Options must not be undefined!")
+    }
+
+    options.role = "slave"
+    super(y, options)
+
+    this.y = y
+    this.room = null
+    this.mesh = new P2PMesh(this, options)
+  }
+
+  _initialise(room) {
+    this.room = room
+
+    super.onUserEvent((event) => {
+      if (event.action == "userJoined") {
+        const { user: id } = event
+        this.room.dispatchEvent(new CustomEvent("userJoin", { detail: id }))
+      } else if (event.action == "userLeft") {
+        const { user: id } = event
+        this.room.dispatchEvent(new CustomEvent("userLeave", { detail: id }))
+      }
+    })
+
+    const dispatchPathUpdateEvent = (lineEvent) => {
+      const pathID = lineEvent.name
+      const points = this.room.getPathPoints(pathID)
+
+      const detail = { id: pathID, points }
+
+      this.room.dispatchEvent(new CustomEvent("addOrUpdatePath", { detail }))
+    }
+
+    const dispatchRemovedIntervalsEvent = (lineEvent) => {
+      const pathID = lineEvent.name
+      const intervals = this.room.getErasureIntervals(pathID)
+
+      const detail = { id: pathID, intervals }
+
+      this.room.dispatchEvent(
+        new CustomEvent("removedIntervalsChange", {
+          detail,
+        }),
+      )
+    }
+
+    this.y.share.strokePoints.observe((lineEvent) => {
+      if (lineEvent.type == "add") {
+        dispatchPathUpdateEvent(lineEvent)
+
+        lineEvent.value.observe((pointEvent) => {
+          if (pointEvent.type == "insert") {
+            dispatchPathUpdateEvent(lineEvent)
+          }
+        })
+      }
+    })
+
+    this.y.share.eraseIntervals.observe((lineEvent) => {
+      if (lineEvent.type == "add") {
+        dispatchRemovedIntervalsEvent(lineEvent)
+
+        lineEvent.value.observe(() => {
+          dispatchRemovedIntervalsEvent(lineEvent)
+        })
+      }
+    })
+  }
+
+  destroy() {
+    // yjs connectors have an optional destroy() method that is called on y.destroy()
+    if (this.mesh == null) return
+
+    this.mesh.disconnect()
+    this.mesh = null
+
+    delete this.room
+
+    gc(this)
+  }
+
+  static async initialise(room, options) {
+    const y = await Y({
+      db: {
+        name: "memory",
+      },
+      connector: Object.assign({}, options, { name: "y-crdt" }),
+      share: {
+        strokePoints: "Map",
+        eraseIntervals: "Map",
+      },
+    })
+
+    y.connector._initialise(room)
+
+    room.crdt = y.connector
+  }
+
+  getUserID() {
+    return this.y.db.userId
+  }
+
+  setUserID(uid) {
+    return super.setUserId(uid)
+  }
+
+  fetchDrawingEvents() {
+    // NOOP: twiddle thumbs
+  }
+
+  addPath([x, y, w, colour]) {
+    const id = uuidv4()
+
+    this.y.share.strokePoints.set(id, Y.Array).push([[x, y, w, colour]])
+    this.y.share.eraseIntervals.set(id, Y.Union)
+
+    return id
+  }
+
+  addPathRemote([x, y, w, colour]) {
+    return this.addPath([x, y, w, colour])
+  }
+
+  extendPath(pathID, [x, y, w, colour]) {
+    const path = this.y.share.strokePoints.get(pathID)
+
+    path.push([[x, y, w, colour]])
+
+    return path.length
+  }
+
+  extendPathRemote(pathID, [x, y, w, colour]) {
+    return this.extendPath(pathID, [x, y, w, colour])
+  }
+
+  endPath(/*pathID*/) {
+    // NOOP: twiddle thumbs
+  }
+
+  extendErasureIntervals(pathID, newIntervals) {
+    this.y.share.eraseIntervals.get(pathID).merge(newIntervals)
+  }
+
+  getPathIDs() {
+    return this.y.share.strokePoints.keys()
+  }
+
+  getPathPoints(pathID) {
+    const points = this.y.share.strokePoints.get(pathID)
+
+    if (!points) return []
+
+    return points.toArray()
+  }
+
+  getErasureIntervals(pathID) {
+    const intervals = this.y.share.eraseIntervals.get(pathID)
+
+    if (!intervals) return []
+
+    return intervals.get()
+  }
+
+  userJoined(uid) {
+    super.userJoined(uid, "master")
+  }
+
+  userLeft(uid) {
+    super.userLeft(uid)
+  }
+
+  receiveMessage(uid, message) {
+    super.receiveMessage(uid, message)
+
+    if (message && message.type === "sync step 2") {
+      // We emulate the sync done message as it is not sent
+      super.receiveMessage(uid, { type: "sync done" })
+
+      this.room.dispatchEvent(
+        new CustomEvent("peerSyncedWithUs", { detail: uid }),
+      )
+    }
+  }
+
+  reportConnectionQuality(uid, quality) {
+    this.room.dispatchEvent(
+      new CustomEvent("userConnection", { detail: { id: uid, quality } }),
+    )
+  }
+
+  disconnect() {
+    super.disconnect()
+  }
+
+  reconnect() {
+    throw "Unsupported operation reconnect()"
+  }
+
+  send(uid, message) {
+    let compressed = true
+
+    if (!message) {
+      compressed = false
+    } else if (message.type === "sync step 1") {
+      compressed = false
+
+      this.room.dispatchEvent(
+        new CustomEvent("waitingForSyncStep", { detail: uid }),
+      )
+    } else if (message.type === "sync done") {
+      this.room.dispatchEvent(
+        new CustomEvent("weSyncedWithPeer", { detail: uid }),
+      )
+
+      // We supress the sync done message as it is emulated on receival of sync step 2
+
+      return
+    } else if (message.type === "sync check") {
+      compressed = false
+    }
+
+    this.mesh.send(uid, message, compressed)
+  }
+
+  broadcast(message) {
+    this.mesh.broadcast(message, true)
+  }
+
+  isDisconnected() {
+    return false
+  }
+}
+
+Y.extend("y-crdt", YjsCRDTWrapper)
+
+export const benchmark = {
+  blocksize: 10,
+  eventsGC: 5000,
+  syncStep1: Uint8Array.of(
+    133,
+    164,
+    117,
+    117,
+    105,
+    100,
+    217,
+    36,
+    51,
+    98,
+    53,
+    98,
+    100,
+    52,
+    53,
+    53,
+    45,
+    49,
+    100,
+    57,
+    102,
+    45,
+    52,
+    55,
+    51,
+    55,
+    45,
+    97,
+    52,
+    99,
+    97,
+    45,
+    53,
+    57,
+    53,
+    49,
+    57,
+    50,
+    54,
+    49,
+    51,
+    99,
+    97,
+    51,
+    167,
+    109,
+    101,
+    115,
+    115,
+    97,
+    103,
+    101,
+    196,
+    62,
+    133,
+    164,
+    116,
+    121,
+    112,
+    101,
+    171,
+    115,
+    121,
+    110,
+    99,
+    32,
+    115,
+    116,
+    101,
+    112,
+    32,
+    49,
+    168,
+    115,
+    116,
+    97,
+    116,
+    101,
+    83,
+    101,
+    116,
+    128,
+    169,
+    100,
+    101,
+    108,
+    101,
+    116,
+    101,
+    83,
+    101,
+    116,
+    128,
+    175,
+    112,
+    114,
+    111,
+    116,
+    111,
+    99,
+    111,
+    108,
+    86,
+    101,
+    114,
+    115,
+    105,
+    111,
+    110,
+    11,
+    164,
+    97,
+    117,
+    116,
+    104,
+    192,
+    165,
+    115,
+    108,
+    105,
+    99,
+    101,
+    0,
+    166,
+    108,
+    101,
+    110,
+    103,
+    116,
+    104,
+    62,
+    170,
+    99,
+    111,
+    109,
+    112,
+    114,
+    101,
+    115,
+    115,
+    101,
+    100,
+    194,
+  ),
+}

src/y-p2p-mesh.js

-/* global Y */
-"use strict"
-
-/* webpack should NOT import Worker */
-// #!if false
-import path from "path"
-import Worker from "tiny-worker"
-// #!endif
-
-function extend(Y) {
-  class P2PMesh extends Y.AbstractConnector {
-    constructor(y, options) {
-      if (options === undefined) {
-        throw new Error("Options must not be undefined!")
-      }
-
-      options.role = "slave"
-      super(y, options)
-      this.options = options
-
-      this.options.mesh = this.options.mesh || {}
-      this.options.mesh.minPeers = this.options.mesh.minPeers || 4
-      this.options.mesh.maxPeers = this.options.mesh.maxPeers || 8
-
-      this.options.handshake = this.options.handshake || {}
-      this.options.handshake.initial = this.options.handshake.initial || 100
-      this.options.handshake.interval = this.options.handshake.interval || 500
-
-      this.options.heartbeat = this.options.heartbeat || {}
-      this.options.heartbeat.interval = this.options.heartbeat.interval || 500
-      this.options.heartbeat.minimum = this.options.heartbeat.minimum || 1000
-      this.options.heartbeat.timeout = this.options.heartbeat.timeout || 10000
-
-      /* webpack should use the packaged queue.js path */
-      let workerPath = "js/queue.js"
-      // #!if false
-      workerPath = path.join(__dirname, "./queue.js")
-      // #!endif
-      this.queue = new Worker(workerPath, [], { esm: true })
-
-      this.queue.onmessage = (event) => {
-        const method = event.data.method
-
-        if (method == "send") {
-          const { uid, channel, message } = event.data
-
-          // y-js db transactions can send messages after a peer has disconnected
-          if (channel == "y-js" && !this.peers.has(uid)) {
-            return
-          }
-
-          this.connection.send(uid, channel, message)
-        } else if (method == "broadcast") {
-          const { channel, message } = event.data
-
-          return this.connection.broadcast(channel, message)
-        } else if (method == "received") {
-          const { uid, channel, message } = event.data
-
-          if (channel === "tw-ml") {
-            // Handshakes can only be sent and received directly
-            if (message === "tw") {
-              // Response message in the handshake
-              this.queue.postMessage({
-                method: "send",
-                uid,
-                channel: "tw-ml",
-                message: "ml",
-              })
-            } else if (message == "ml") {
-              // Handshake completed
-              this.checkAndInsertPeer(uid)
-            }
-          } else {
-            this.checkAndInsertPeer(uid)
-
-            if (channel === "y-js") {
-              this.checkAndInsertPeer(uid)
-
-              if (message.type === "sync done") {
-                this.raiseUserEvent("peerSyncedWithUs", { user: uid })
-              }
-
-              this.receiveMessage(uid, message)
-            }
-          }
-        }
-      }
-
-      if (options.onUserEvent) {
-        this.onUserEvent(options.onUserEvent)
-      }
-
-      this.initialiseConnection()
-    }
-
-    initialiseConnection() {
-      this.peers = new Map()
-
-      this.connection = new this.options.connection(this.options)
-
-      this.connection.addEventListener("roomJoined", () => {
-        this.checkAndEnsureUser()
-      })
-
-      this.connection.addEventListener("roomLeft", () => {
-        console.log("TODO: LEFT ROOM")
-      })
-
-      this.connection.addEventListener("channelOpened", ({ detail: uid }) => {
-        this.checkAndEnsureUser()
-
-        // Start a handshake to ensure both sides are able to use the channel
-        function handshake(peer) {
-          const _peer = this.connection.getPeerHandle(uid)
-
-          if (!_peer || _peer !== peer) {
-            return
-          }
-
-          if (this.peers.has(uid)) {
-            return
-          }
-
-          // Initial message in the handshake
-          this.queue.postMessage({
-            method: "send",
-            uid,
-            channel: "tw-ml",
-            message: "tw",
-          })
-
-          setTimeout(
-            handshake.bind(this, peer),
-            this.options.handshake.interval,
-          )
-        }
-
-        setTimeout(
-          handshake.bind(this, this.connection.getPeerHandle(uid)),
-          this.options.handshake.initial,
-        )
-      })
-
-      this.connection.addEventListener("channelError", ({ detail: uid }) =>
-        console.log("TODO: CHANNEL ERROR", uid),
-      )
-
-      this.connection.addEventListener("channelClosed", ({ detail: uid }) => {
-        this.checkAndEnsureUser()
-        this.checkAndRemovePeer(uid)
-      })
-
-      this.connection.addEventListener(
-        "messageReceived",
-        ({ detail: { uid, channel, message } }) => {
-          this.checkAndEnsureUser()
-
-          this.queue.postMessage({
-            method: "received",
-            uid,
-            channel,
-            message,
-          })
-        },
-      )
-    }
-
-    // Ensure that y-js is up to date on the user's id
-    checkAndEnsureUser() {
-      const id = this.connection.getUserID()
-
-      if (this.y.db.userId === id) {
-        return
-      }
-
-      this.raiseUserEvent("userID", { user: id })
-
-      this.setUserId(id)
-    }
-
-    // Ensure that y-js knows that the peer has joined
-    checkAndInsertPeer(uid) {
-      if (this.peers.has(uid)) {
-        return
-      }
-
-      const health = {
-        lastFootprintResolved: true,
-        lastFootprint: 0,
-        lastFootprintTimestamp: Date.now(),
-      }
-      health.cb = setInterval(
-        this.heartbeat.bind(
-          this,
-          uid,
-          this.connection.getPeerHandle(uid),
-          health,
-        ),
-        this.options.heartbeat.interval,
-      )
-
-      this.peers.set(uid, health)
-
-      this.userJoined(uid, "master")
-    }
-
-    heartbeat(uid, peer, health) {
-      const _peer = this.connection.getPeerHandle(uid)
-
-      if (!_peer || _peer !== peer || !this.peers.has(uid)) {
-        clearInterval(health.cb)
-
-        return
-      }
-
-      if (!health.lastFootprintResolved) {
-        return this.connection.terminatePeer(uid)
-      }
-      health.lastFootprintResolved = false
-
-      const self = this
-
-      this.connection
-        .getPeerFootprint(uid)
-        .then((footprint) => {
-          health.lastFootprintResolved = true
-
-          const timeSinceLastFootprint =
-            Date.now() - health.lastFootprintTimestamp
-
-          if (footprint != health.lastFootprint) {
-            health.lastFootprint = footprint
-            health.lastFootprintTimestamp = Date.now()
-          } else if (timeSinceLastFootprint > self.options.heartbeat.timeout) {
-            return this.connection.terminatePeer(uid)
-          } else if (timeSinceLastFootprint > self.options.heartbeat.interval) {
-            self.queue.postMessage({
-              method: "send",
-              uid,
-              channel: "heartbeat",
-            })
-          }
-
-          this.raiseUserEvent("userConnection", {
-            id: uid,
-            quality:
-              1.0 -
-              (self.options.heartbeat.timeout -
-                Math.max(
-                  timeSinceLastFootprint,
-                  self.options.heartbeat.minimum,
-                )) /
-                (self.options.heartbeat.timeout -
-                  self.options.heartbeat.minimum),
-          })
-        })
-        .catch(() => {
-          return this.connection.terminatePeer(uid)
-        })
-    }
-
-    // Ensure that y-js knows that the peer has left
-    checkAndRemovePeer(uid) {
-      if (!this.peers.has(uid)) {
-        return
-      }
-
-      this.peers.delete(uid)
-
-      this.userLeft(uid)
-    }
-
-    connectToPeer(/*uid*/) {
-      // currently deprecated
-    }
-
-    disconnect() {
-      this.queue.terminate()
-
-      this.connection.destructor()
-
-      super.disconnect()
-    }
-
-    reconnect() {
-      this.initialiseConnection()
-
-      super.reconnect()
-    }
-
-    raiseUserEvent(action, data) {
-      const event = Object.assign({ action }, data)
-
-      for (const f of this.userEventListeners) {
-        f(event)
-      }
-    }
-
-    send(uid, message) {
-      if (message.type === "sync step 1") {
-        this.raiseUserEvent("waitingForSyncStep", { user: uid })
-      } else if (message.type === "sync done") {
-        this.raiseUserEvent("weSyncedWithPeer", { user: uid })
-      }
-
-      this.queue.postMessage({ method: "send", uid, channel: "y-js", message })
-    }
-
-    broadcast(message) {
-      this.queue.postMessage({ method: "broadcast", channel: "y-js", message })
-    }
-
-    isDisconnected() {
-      return false
-    }
-  }
-
-  Y.extend("p2p-mesh", P2PMesh)
-}
-
-export default extend
-if (typeof Y !== "undefined") {
-  extend(Y)
-}