src/connection/Connection.js

+export default class AbstractConnection extends EventTarget {
+  constructor(options) {
+    super()
+
+    this.options = options
+  }
+
+  /*
+    Supported events:
+     - roomJoined => ()
+     - roomLeft => ()
+     - channelOpened => ({detail: uid})
+     - channelError => ({detail: uid})
+     - channelClosed => ({detail: uid})
+     - messageReceived => ({detail: {uid, channel, message}})
+    */
+
+  getUserID() {
+    // => int
+  }
+
+  getPeerHandle(/*uid*/) {
+    // => opaque
+  }
+
+  getPeerFootprint(/*uid*/) {
+    // => Promise => int
+  }
+
+  send(/*uid, channel, message*/) {
+    // => void
+  }
+
+  broadcast(/*channel, message*/) {
+    // => void
+  }
+
+  terminatePeer(/*uid*/) {
+    // => void
+  }
+
+  destructor() {
+    // => void
+  }
+}

src/connection/MockConnection.js

+export const userID = { uuid: null }
+
+export const sendListener = { callback: null }
+export const broadcastListener = { callback: null }
+
+const eventListeners = new Map()
+export const getEventListener = (room, event) =>
+  eventListeners.get(`${room}:${event}`)
+
+class MockConnection {
+  constructor({ room }) {
+    this.room = room
+
+    setTimeout(
+      () =>
+        getEventListener(room, "roomJoined") &&
+        getEventListener(room, "roomJoined")(),
+      0,
+    )
+  }
+
+  getUserID() {
+    return userID.uuid
+  }
+
+  getPeerHandle(/*uid*/) {
+    return undefined
+  }
+
+  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/WebRTC.js

+import AbstractConnection from "./Connection.js"
+
+import LioWebRTC from "liowebrtc"
+
+export default class WebRTCConnection extends AbstractConnection {
+  constructor(options) {
+    super(options)
+
+    this.webrtc = new LioWebRTC({
+      url: this.options.url,
+      dataOnly: true,
+      constraints: {
+        minPeers: this.options.mesh.minPeers,
+        maxPeers: this.options.mesh.maxPeers,
+      },
+    })
+
+    this.webrtc.on("ready", () => {
+      this.webrtc.joinRoom(this.options.room)
+    })
+
+    this.webrtc.on("joinedRoom", () => {
+      this.dispatchEvent(new CustomEvent("roomJoined"))
+    })
+
+    this.webrtc.on("leftRoom", () => {
+      this.dispatchEvent(new CustomEvent("roomLeft"))
+    })
+
+    this.webrtc.on("channelOpen", (dataChannel, peer) => {
+      this.dispatchEvent(new CustomEvent("channelOpened", { detail: peer.id }))
+    })
+
+    this.webrtc.on("channelError", (dataChannel, peer) => {
+      this.dispatchEvent(new CustomEvent("channelError", { detail: peer.id }))
+    })
+
+    this.webrtc.on("channelClose", (dataChannel, peer) => {
+      this.dispatchEvent(new CustomEvent("channelClosed", { detail: peer.id }))
+    })
+
+    this.webrtc.on("receivedPeerData", (channel, message, peer) => {
+      // Message could have been forwarded but interface only needs to know about directly connected peers
+      this.dispatchEvent(
+        new CustomEvent("messageReceived", {
+          detail: {
+            uid: peer.forwardedBy ? peer.forwardedBy.id : peer.id,
+            channel,
+            message,
+          },
+        }),
+      )
+    })
+  }
+
+  getUserID() {
+    return this.webrtc.getMyId()
+  }
+
+  getPeerHandle(uid) {
+    return this.webrtc.getPeerById(uid)
+  }
+
+  getPeerFootprint(uid) {
+    const peer = this.webrtc.getPeerById(uid)
+
+    if (!peer) return Promise.reject()
+
+    return new Promise(function(resolve, reject) {
+      peer.getStats(null).then((stats) => {
+        let footprint = -1
+
+        stats.forEach((report) => {
+          if (
+            report.type == "candidate-pair" &&
+            report.bytesSent > 0 &&
+            report.bytesReceived > 0 &&
+            report.writable
+          ) {
+            footprint = Math.max(footprint, report.bytesReceived)
+          }
+        })
+
+        if (footprint != -1) {
+          resolve(footprint)
+        } else {
+          reject()
+        }
+      })
+    })
+  }
+
+  send(uid, channel, message) {
+    const peer = this.webrtc.getPeerById(uid)
+
+    if (!peer) return
+
+    this.webrtc.whisper(peer, channel, message)
+  }
+
+  broadcast(channel, message) {
+    this.webrtc.shout(channel, message)
+  }
+
+  terminatePeer(uid) {
+    const peer = this.webrtc.getPeerById(uid)
+
+    if (!peer) return
+
+    peer.end()
+  }
+
+  destructor() {
+    this.webrtc.quit()
+  }
+}

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 connectedPeers = document.getElementById("connected-peers")
+
+export const overallStatusIcon = document.getElementById("overall-status-icon")
+export const overallStatusIconImage = document.getElementById(
+  "overall-status-icon-img",
+)
+
+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")
+export const connectedRoomID = document.getElementById("connected-room-id")
+export const connectedRoomInfoContainer = document.getElementById(
+  "connected-room-info",
+)
+
+export const penProperties = document.getElementById("pen-properties")
+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 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/erasure.js

+function sqr(x) {
+  return x ** 2
+}
+
+function hypotenuseSquared(a, b) {
+  return sqr(a) + sqr(b)
+}
+
+function distanceSquared([x0, y0], [x1, y1]) {
+  return hypotenuseSquared(x0 - x1, y0 - y1)
+}
+
+function distance(point0, point1) {
+  return Math.sqrt(distanceSquared(point0, point1))
+}
+
+function cap01(x) {
+  return Math.max(0, Math.min(1, x))
+}
+
+function distToSegmentSquared(lineStart, lineEnd, point) {
+  const l2 = distanceSquared(lineStart, lineEnd)
+  if (l2 === 0) return distanceSquared(point, lineStart)
+  let t =
+    ((point[0] - lineStart[0]) * (lineEnd[0] - lineStart[0]) +
+      (point[1] - lineStart[1]) * (lineEnd[1] - lineStart[1])) /
+    l2
+  t = cap01(t)
+  return distanceSquared(point, [
+    lineStart[0] + t * (lineEnd[0] - lineStart[0]),
+    lineStart[1] + t * (lineEnd[1] - lineStart[1]),
+  ])
+}
+
+function interpolate([x0, y0], [x1, y1], t) {
+  return [x0 + (x1 - x0) * t, y0 + (y1 - y0) * t]
+}
+
+function project([x1, y1], [x2, y2], [x3, y3]) {
+  const x21 = x2 - x1,
+    y21 = y2 - y1
+  const x31 = x3 - x1,
+    y31 = y3 - y1
+  return (x31 * x21 + y31 * y21) / (x21 * x21 + y21 * y21)
+}
+
+function erasureInterval(lineStart, lineEnd, erasureCenter, erasureRadius) {
+  if (!(lineStart && erasureCenter)) return undefined
+
+  if (!lineEnd) {
+    const dist2ToSingularity = distanceSquared(erasureCenter, lineStart)
+    return dist2ToSingularity <= erasureRadius ** 2 ? [0, 0] : undefined
+  }
+
+  const distToSegment2 = distToSegmentSquared(lineStart, lineEnd, erasureCenter)
+  if (erasureRadius ** 2 < distToSegment2) return undefined
+
+  const lineLength = distance(lineStart, lineEnd)
+  if (lineLength === 0) {
+    return distToSegment2 <= erasureRadius ** 2 ? [0, 1] : undefined
+  }
+
+  const projT = project(lineStart, lineEnd, erasureCenter)
+  const projectionPoint = interpolate(lineStart, lineEnd, projT)
+
+  const d2 = distance(erasureCenter, projectionPoint)
+  const halfLength = Math.sqrt(Math.abs(sqr(erasureRadius) - sqr(d2)))
+  if (halfLength === 0) return undefined
+
+  let touchFromStartDist = distance(lineStart, projectionPoint)
+  if (projT < 0) touchFromStartDist = -touchFromStartDist
+
+  const touchBeginFromStarDist = touchFromStartDist - halfLength
+  const touchEndFromStarDist = touchFromStartDist + halfLength
+
+  return [
+    cap01(touchBeginFromStarDist / lineLength),
+    cap01(touchEndFromStarDist / lineLength),
+  ]
+}
+
+export function computeErasureIntervals(points, erasureCenter, erasureRadius) {
+  return points
+    .map((point, i) => ({ point, i }))
+    .reduce((acc, { point, i }) => {
+      const interval = erasureInterval(
+        point,
+        points[i + 1],
+        erasureCenter,
+        erasureRadius,
+      )
+      if (!interval) return acc
+      return {
+        ...acc,
+        [i]: [interval],
+      }
+    }, {})
+}
+
+function overlaps([s1, e1], [, e2]) {
+  return s1 <= e2 && s1 <= e1
+}
+
+function mergeIntervals(...intervals) {
+  if (!intervals.length) return []
+  const sorted = intervals.sort(([a], [b]) => a - b)
+  const stack = [sorted[0]]
+  sorted.forEach((x) => {
+    const top = stack[stack.length - 1]
+    if (overlaps(x, top)) {
+      if (x[1] > top[1]) top[1] = x[1]
+    } else {
+      stack.push(x)
+    }
+  })
+  return stack
+}
+
+export function combineErasureIntervals(i1, i2) {
+  const _i1 = { ...i1 }
+  Object.keys(i1).forEach((key) => {
+    if (i2[key]) {
+      _i1[key] = mergeIntervals(...i1[key], ...i2[key])
+    }
+  })
+  return { ...i2, ..._i1 }
+}
+
+export function spreadErasureIntervals(intervals) {
+  const spread = {}
+
+  intervals.forEach(([l, u]) => {
+    if (u > l) {
+      for (let li = Math.floor(l); li < u; li++) {
+        const list = spread[li] || []
+
+        const [il, iu] = [Math.max(li, l), Math.min(li + 1, u)]
+
+        list.push([il % 1, iu == li + 1 ? 1 : iu % 1])
+
+        spread[li] = list
+      }
+    } else {
+      spread[Math.floor(l)] = [[l % 1, u % 1]]
+    }
+  })
+
+  return spread
+}
+
+export function flattenErasureIntervals(intervals) {
+  const flatten = []
+
+  for (const idx in intervals) {
+    if (intervals[idx])
+      flatten.push(
+        intervals[idx].map(([l, u]) => [parseInt(idx) + l, parseInt(idx) + u]),
+      )
+  }
+
+  return flatten.flat()
+}

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")
+}

liowebrtc @ ce4a2ebe

+Subproject commit ce4a2ebe160804ed84f7b6fc3bd10c91e766bdcd

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

+"use strict"
+
+import MessagePack from "what-the-pack"
+import pako from "pako"
+import uuidv4 from "uuid/v4"
+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) => {
+  if (!event || !event.data) {
+    return
+  }
+
+  if (event.data.method == "send" || event.data.method == "broadcast") {
+    let message = event.data.message
+
+    const compressed =
+      event.data.compressed != null ? event.data.compressed : true
+
+    const uuid = uuidv4()
+
+    //console.log("send in", JSON.stringify(message))
+
+    message = encode(message)
+
+    if (compressed) {
+      message = pako.deflate(message)
+    }
+
+    const sender = (slice) => {
+      let offset = slice * MESSAGE_SLICE_SIZE
+
+      event.data.message = encode({
+        uuid,
+        message: message.subarray(offset, offset + MESSAGE_SLICE_SIZE),
+        slice,
+        length: message.length,
+        compressed,
+      })
+
+      //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") {
+    const packet = decode(MessagePack.Buffer.from(event.data.message))
+    let message = packet.message
+
+    //console.log("receive in", JSON.stringify(packet))
+
+    if (packet.length > MESSAGE_SLICE_SIZE) {
+      let messages = buffer[event.data.uid]
+      if (!messages) {
+        messages = {}
+        buffer[event.data.uid] = messages
+      }
+
+      let slices = messages[packet.uuid]
+      if (!slices) {
+        slices = {
+          message: new Uint8Array(packet.length),
+          received: new FastBitSet(),
+          length: 0,
+        }
+        messages[packet.uuid] = slices
+      }
+
+      // 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)
+      }
+
+      if (slices.length < slices.message.length) {
+        delete packet.uuid
+        delete packet.message
+
+        return
+      }
+
+      message = slices.message
+
+      delete messages[packet.uuid]
+    }
+
+    if (packet.compressed) {
+      message = pako.inflate(Uint8Array.from(message))
+    }
+
+    message = decode(MessagePack.Buffer.from(message))
+
+    event.data.message = message
+
+    //console.log("receive out", JSON.stringify(event.data))
+
+    self.postMessage(event.data)
+  }
+}

src/room.js

+import { spreadErasureIntervals, flattenErasureIntervals } from "./erasure.js"
+
+class Room extends EventTarget {
+  constructor(name) {
+    super()
+    this.name = name
+    this.crdt = null
+    this.undoStack = []
+  }
+
+  disconnect() {
+    this.crdt.destroy()
+    this.crdt = null
+  }
+
+  getUserID() {
+    return this.crdt.getUserID()
+  }
+
+  addPath([x, y, w, colour]) {
+    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])
+  }
+
+  extendPath(pathID, [x, y, w, colour]) {
+    const pathLength = this.crdt.extendPath(pathID, [x, y, w, colour])
+
+    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"))
+  }
+
+  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.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 pathID of this.crdt.getPathIDs()) {
+      paths.set(pathID, this.crdt.getPathPoints(pathID))
+    }
+
+    return paths
+  }
+
+  getPathPoints(pathID) {
+    return this.crdt.getPathPoints(pathID)
+  }
+
+  getErasureIntervals(pathID) {
+    return spreadErasureIntervals(this.crdt.getErasureIntervals(pathID))
+  }
+
+  canUndo() {
+    return this.undoStack.length > 0
+  }
+
+  undo() {
+    const operation = this.undoStack.pop()
+
+    if (!operation) return
+
+    const [pathID, ...interval] = operation
+
+    this.crdt.extendErasureIntervals(pathID, [interval])
+  }
+
+  fastUndo(forReplacing = false) {
+    let from = this.undoStack.length - 1
+
+    if (from < 0) return
+
+    // eslint-disable-next-line no-unused-vars
+    const [pathID, _, end] = this.undoStack[from]
+    const endErasing = forReplacing ? end + 1 : end
+
+    for (; from >= 0; from--) {
+      if (this.undoStack[from][0] != pathID) {
+        from++
+        break
+      }
+    }
+
+    this.undoStack = this.undoStack.slice(0, Math.max(0, from))
+
+    this.crdt.extendErasureIntervals(pathID, [[0, endErasing]])
+  }
+}
+
+export const connect = async (
+  roomName,
+  CRDT,
+  connection,
+  options = undefined,
+) => {
+  const room = new Room(roomName)
+
+  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
+}

rtcpeerconnection @ 52fdf903

+Subproject commit 52fdf9038edd3f2d97b87c1ac7b318ca0a107d18

src/server.js

+import dotenv from "dotenv"
+import express from "express"
+import http from "http"
+import process from "process"
+import signalbuddy from "signalbuddy"
+
+dotenv.config()
+
+const host = "0.0.0.0"
+const port = parseInt(process.env.PORT) || 3000
+
+const app = express()
+const server = http.createServer(app)
+
+const config = {
+  rooms: {
+    maxClients: 0, // no limit
+  },
+  ice: {
+    host: process.env.ICE_HOST || "localhost",
+    port: parseInt(process.env.ICE_PORT) || 3478,
+    stun: {
+      username: process.env.ICE_STUN_USERNAME || "user",
+      password: process.env.ICE_STUN_PASSWORD || "password",
+    },
+    turn: {
+      secret: process.env.ICE_TURN_SECRET || "secret",
+      timeout: parseInt(process.env.ICE_TURN_TIMEOUT) || 86400,
+    },
+  },
+}
+
+signalbuddy(server, config)
+
+app.use((request, response, next) => {
+  response.on("finish", () => {
+    console.log(
+      "[%s] [%s]: %s %s",
+      `${new Date()}`.split(" ", 5).join(" "),
+      response.statusCode,
+      request.method.padStart(7),
+      request.originalUrl,
+    )
+  })
+  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, () => {
+  console.log(`Listening on http://${host}:${port}`)
+  process.on("SIGINT", process.exit)
+})

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

@@ -7,18 +7,9 @@ self.addEventListener("activate", (event) => {
 })
 
 const CACHE_NAME = "APP-V0"
-const FILES_TO_CACHE = ["/index.html", "/js/app.js", "/manifest.json"]
+const FILES_TO_CACHE = [FILES_TO_CACHE_LIST] // eslint-disable-line no-undef
 const FILE_ALIASES = new Map([["/", "/index.html"]])
 
-const normalizeUrl = (url) => {
-  const url_ = new URL(url)
-  url_.pathname = url_.pathname.replace(/\/+/g, "/").replace(/\/$/, "")
-  if (FILE_ALIASES.has(url_.pathname)) {
-    url_.pathname = FILE_ALIASES.get(url_.pathname)
-  }
-  return url_.href
-}
-
 self.addEventListener("install", async () => {
   const cache = await caches.open(CACHE_NAME)
   const additions = cache.addAll(FILES_TO_CACHE)
@@ -31,18 +22,30 @@ self.addEventListener("activate", async () => {
   oldCacheKeys.forEach((key) => caches.delete(key))
 })
 
+const normalizePath = (path) => {
+  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
+}
+
 self.addEventListener("fetch", (event) => {
-  const normalizedUrl = normalizeUrl(event.request.url)
   let response = fetch(event.request)
-  if (FILES_TO_CACHE.includes(normalizedUrl)) {
-    response = response
-      .then(async (response) => {
-        const cache = await caches.open(CACHE_NAME)
-        await cache.put(normalizedUrl, response.clone())
-        return response
-      })
-      .catch(() => caches.match(normalizedUrl))
-      .catch(() => null)
+  const { origin, pathname } = new URL(event.request.url)
+  const path = normalizePath(pathname)
+  if (origin == self.location.origin && FILES_TO_CACHE.includes(path)) {
+    const requestOptions = { ...event.request, mode: "same-origin" }
+    const request = new Request(`${origin}${path}`, requestOptions)
+    response.then(async (response) => {
+      const clone = response.clone()
+      ;(await caches.open(CACHE_NAME)).put(request, clone)
+    })
+    response = response.catch(async (error) => {
+      return (await caches.match(request)) || Promise.reject(error)
+    })
   }
   event.respondWith(response)
 })

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 216be42b2a6cc5632d427cf222c789d34026a274

src/tool-selection.js

+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 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 = () => 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"
+}
+
+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 (selectedTool == Tools.PEN) {
+    showElement(HTML.penProperties)
+  } else {
+    setSelectedTool(Tools.PEN)
+  }
+})
+
+HTML.eraserButton.addEventListener("click", () => {
+  setSelectedTool(Tools.ERASER)
+})
+
+HTML.draggingToolButton.addEventListener("click", () => {
+  setSelectedTool(Tools.DRAGGER)
+})
+
+HTML.canvasCenterToolButton.addEventListener("click", () => {
+  centerCanvas()
+})
+
+HTML.strokeColorPicker.addEventListener("change", () => {
+  const paletteColour = event.target.value
+  setStrokeColour(paletteColour)
+})
+
+HTML.strokeRadiusSlider.oninput = function() {
+  HTML.output.innerHTML = this.value
+  strokeRadius = this.value / 2
+}
+
+HTML.output.innerHTML = HTML.strokeRadiusSlider.value
+
+// If the page has been refreshed
+if (performance.navigation.type == 1) {
+  const sliderValue = parseInt(HTML.output.innerHTML)
+  setStrokeRadius(sliderValue)
+}
+
+const x = window.matchMedia(
+  "only screen and (orientation: landscape) and (max-width: 600px)",
+)
+x.addListener(() => {
+  if (x.matches) {
+    HTML.wheel.setAttribute("viewBox", "-50 10 200 100")
+    HTML.palette.setAttribute("style", "padding-top: 50px")
+  } else {
+    HTML.wheel.setAttribute("viewBox", "0 10 100 100")
+  }
+})
+
+HTML.closeButton.forEach((element) => {
+  element.addEventListener("click", () => {
+    hideElement(element.parentNode.parentNode.parentNode)
+  })
+})
+
+window.addEventListener("click", (event) => {
+  if (event.target == HTML.penProperties) {
+    hideElement(HTML.penProperties)
+  } else if (event.target == HTML.palette) {
+    hideElement(HTML.palette)
+    hideElement(HTML.penProperties)
+  }
+})
+
+HTML.rectangle.addEventListener("click", () => {
+  showElement(HTML.palette)
+})
+
+const svg = HTML.wheel.children
+for (let i = 1; i < svg.length; i++) {
+  svg[i].addEventListener("click", (event) => {
+    const paletteColour = event.target.getAttribute("fill")
+    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,
+  ),
+}