src/room.js

-import uuidv4 from "uuid/v4"
-import yArray from "y-array"
-import yMap from "y-map"
-import yMemory from "y-memory"
-import Y from "yjs"
-
-import yWebrtc from "./y-webrtc/index.js"
-
-yMemory(Y)
-yMap(Y)
-yArray(Y)
-yWebrtc(Y)
+import { spreadErasureIntervals, flattenErasureIntervals } from "./erasure.js"
 
 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
   }
 
-  addPath([x, y, w, colour, radius]) {
-    const id = uuidv4()
-    this._y.share.strokeAdd.set(id, Y.Array).push([[x, y, w, colour, radius]])
-    return id
+  getUserID() {
+    return this.crdt.getUserID()
   }
 
-  extendPath(id, [x, y, w, colour, radius]) {
-    this._y.share.strokeAdd.get(id).push([[x, y, w, colour, radius]])
+  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 id of this._y.share.strokeAdd.keys()) {
-      paths.set(id, this._generatePath(id))
+    for (const pathID of this.crdt.getPathIDs()) {
+      paths.set(pathID, this.crdt.getPathPoints(pathID))
     }
 
     return paths
   }
 
-  erasePoint(id, idx) {
-    let eraseSet = this._y.share.strokeErase.get(id)
+  getPathPoints(pathID) {
+    return this.crdt.getPathPoints(pathID)
+  }
 
-    if (!eraseSet) {
-      eraseSet = this._y.share.strokeErase.set(id, Y.Map)
-    }
+  getErasureIntervals(pathID) {
+    return spreadErasureIntervals(this.crdt.getErasureIntervals(pathID))
+  }
 
-    eraseSet.set(idx.toString(), true)
+  canUndo() {
+    return this.undoStack.length > 0
   }
 
-  // Generate an array of points [x, y, exist] by merging the path's add and erase sets
-  _generatePath(id) {
-    const addSet = this._y.share.strokeAdd.get(id)
+  undo() {
+    const operation = this.undoStack.pop()
 
-    if (addSet === undefined) {
-      return []
-    }
+    if (!operation) return
 
-    const eraseSet = this._y.share.strokeErase.get(id) || { get: () => false }
+    const [pathID, ...interval] = operation
 
-    return addSet
-      .toArray()
-      .map((p = [], i) => [
-        p[0],
-        p[1],
-        p[2],
-        p[3],
-        p[4],
-        !eraseSet.get(i.toString()),
-      ])
+    this.crdt.extendErasureIntervals(pathID, [interval])
   }
 
-  inviteUser(id) {
-    this._y.connector.connectToPeer(id)
-  }
+  fastUndo(forReplacing = false) {
+    let from = this.undoStack.length - 1
 
-  async _initialise() {
-    this._y = await Y({
-      db: {
-        name: "memory",
-      },
-      connector: {
-        name: "webrtc",
-        url: "/",
-        room: this.name,
-        onUserEvent: (event) => {
-          if (event.action == "userID") {
-            const { 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: {
-        strokeAdd: "Map",
-        strokeErase: "Map",
-      },
-    })
-    this._y.share.strokeAdd.observe((lineEvent) => {
-      if (lineEvent.type == "add") {
-        const points = this._generatePath(lineEvent.name)
-        const detail = { id: lineEvent.name, points }
-        this.dispatchEvent(new CustomEvent("addOrUpdatePath", { detail }))
-        lineEvent.value.observe((pointEvent) => {
-          if (pointEvent.type == "insert") {
-            const points = this._generatePath(lineEvent.name)
-            const detail = { id: lineEvent.name, points }
-            this.dispatchEvent(new CustomEvent("addOrUpdatePath", { detail }))
-          }
-        })
-      }
-    })
-    this._y.share.strokeErase.observe((lineEvent) => {
-      if (lineEvent.type == "add") {
-        const points = this._generatePath(lineEvent.name)
-        const detail = { id: lineEvent.name, points }
-        this.dispatchEvent(new CustomEvent("addOrUpdatePath", { detail }))
-        lineEvent.value.observe((pointEvent) => {
-          if (pointEvent.type == "add") {
-            const points = this._generatePath(lineEvent.name)
-            const detail = { id: lineEvent.name, points }
-            this.dispatchEvent(new CustomEvent("addOrUpdatePath", { detail }))
-          }
-        })
+    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) => {
+export const connect = async (
+  roomName,
+  CRDT,
+  connection,
+  options = undefined,
+) => {
   const room = new Room(roomName)
-  await room._initialise()
+
+  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,20 +7,7 @@ self.addEventListener("activate", (event) => {
 })
 
 const CACHE_NAME = "APP-V0"
-const FILES_TO_CACHE = [
-  "/index.html",
-  "/styles.css",
-  "/js/app.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",
-]
+const FILES_TO_CACHE = [FILES_TO_CACHE_LIST] // eslint-disable-line no-undef
 const FILE_ALIASES = new Map([["/", "/index.html"]])
 
 self.addEventListener("install", async () => {
@@ -36,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

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

src/y-union.js

+/* global Y */
+
+import { combineErasureIntervals } from "./erasure.js"
+
+export const Union = {
+  create: function(id) {
+    return {
+      id: id,
+      union: null,
+      struct: "Union",
+    }
+  },
+  encode: function(op) {
+    const e = {
+      struct: "Union",
+      type: op.type,
+      id: op.id,
+      union: null,
+    }
+    if (op.requires != null) {
+      e.requires = op.requires
+    }
+    if (op.info != null) {
+      e.info = op.info
+    }
+    return e
+  },
+  requiredOps: function() {
+    return []
+  },
+  execute: function*() {},
+}
+
+export default function extendYUnion(Y) {
+  class YUnion extends Y.utils.CustomType {
+    constructor(os, model, contents) {
+      super()
+      this._model = model.id
+      this._parent = null
+      this._deepEventHandler = new Y.utils.EventListenerHandler()
+      this.os = os
+      this.union = model.union ? Y.utils.copyObject(model.union) : null
+      this.contents = contents
+      this.eventHandler = new Y.utils.EventHandler((op) => {
+        // compute op event
+        if (op.struct === "Insert") {
+          if (!Y.utils.compareIds(op.id, this.union)) {
+            const mergedContents = this._merge(JSON.parse(op.content[0]))
+            this.union = op.id
+            if (this.contents == mergedContents) {
+              return
+            }
+            this.contents = mergedContents
+            Y.utils.bubbleEvent(this, {
+              object: this,
+              type: "merge",
+            })
+          }
+        } else {
+          throw new Error("Unexpected Operation!")
+        }
+      })
+    }
+    _getPathToChild(/*childId*/) {
+      return undefined
+    }
+    _destroy() {
+      this.eventHandler.destroy()
+      this.eventHandler = null
+      this.contents = null
+      this._model = null
+      this._parent = null
+      this.os = null
+      this.union = null
+    }
+    get() {
+      return JSON.parse(this.contents)
+    }
+    _merge(newIntervals) {
+      const prevIntervals = this.get()
+
+      const mergedIntervals = combineErasureIntervals(
+        [prevIntervals],
+        [newIntervals],
+      )[0]
+
+      return JSON.stringify(mergedIntervals)
+    }
+    merge(newIntervals) {
+      const mergedContents = this._merge(newIntervals)
+
+      if (this.contents == mergedContents) {
+        return
+      }
+
+      const insert = {
+        id: this.os.getNextOpId(1),
+        left: null,
+        right: this.union,
+        origin: null,
+        parent: this._model,
+        content: [mergedContents],
+        struct: "Insert",
+      }
+
+      const eventHandler = this.eventHandler
+      this.os.requestTransaction(function*() {
+        yield* eventHandler.awaitOps(this, this.applyCreatedOperations, [
+          [insert],
+        ])
+      })
+      // always remember to do that after this.os.requestTransaction
+      // (otherwise values might contain a undefined reference to type)
+      eventHandler.awaitAndPrematurelyCall([insert])
+    }
+    observe(f) {
+      this.eventHandler.addEventListener(f)
+    }
+    observeDeep(f) {
+      this._deepEventHandler.addEventListener(f)
+    }
+    unobserve(f) {
+      this.eventHandler.removeEventListener(f)
+    }
+    unobserveDeep(f) {
+      this._deepEventHandler.removeEventListener(f)
+    }
+    // eslint-disable-next-line require-yield
+    *_changed(transaction, op) {
+      this.eventHandler.receivedOp(op)
+    }
+  }
+  Y.extend(
+    "Union",
+    new Y.utils.CustomTypeDefinition({
+      name: "Union",
+      class: YUnion,
+      struct: "Union",
+      initType: function* YUnionInitializer(os, model) {
+        const union = model.union
+        const contents =
+          union !== null ? (yield* this.getOperation(union)).content[0] : "[]"
+        return new YUnion(os, model, contents)
+      },
+      createType: function YUnionCreator(os, model) {
+        const union = new YUnion(os, model, "[]")
+        return union
+      },
+    }),
+  )
+}
+
+if (typeof Y !== "undefined") {
+  extendYUnion(Y)
+}

src/y-webrtc/LICENSE

-The MIT License (MIT)
-
-Copyright (c) 2014 Kevin Jahns <kevin.jahns@rwth-aachen.de>.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

src/y-webrtc/index.js

-/* global Y */
-"use strict"
-
-import LioWebRTC from "liowebrtc"
-
-function extend(Y) {
-  class WebRTC extends Y.AbstractConnector {
-    constructor(y, options) {
-      if (options === undefined) {
-        throw new Error("Options must not be undefined!")
-      }
-
-      options.role = "slave"
-      super(y, options)
-      this.webrtcOptions = options
-
-      if (options.onUserEvent) {
-        this.onUserEvent(options.onUserEvent)
-      }
-      this.initialiseConnection()
-
-      window.addEventListener("unload", () => {
-        this.y.destroy()
-      })
-    }
-
-    initialiseConnection() {
-      this.webrtc = new LioWebRTC({
-        url: this.webrtcOptions.url,
-        dataOnly: true,
-        /*network: {
-          minPeers: 4,
-          maxPeers: 8,
-        },*/
-      })
-
-      this.peers = new Set()
-
-      this.webrtc.on("ready", () => {
-        this.webrtc.joinRoom(this.webrtcOptions.room)
-      })
-
-      this.webrtc.on("joinedRoom", () => {
-        this.checkAndEnsureUser()
-      })
-
-      this.webrtc.on("leftRoom", () => {
-        console.log("LEFT ROOM")
-      })
-
-      this.webrtc.on("channelOpen", (dataChannel, peer) => {
-        this.checkAndEnsureUser()
-
-        // Start a handshake to ensure both sides are able to use the channel
-        function handshake(peer) {
-          const _peer = this.webrtc.getPeerById(peer.id)
-
-          if (!_peer || _peer !== peer) {
-            return
-          }
-
-          if (this.peers.has(peer.id)) {
-            return
-          }
-
-          console.log("ping", peer.id)
-
-          // Initial message in the handshake
-          this.webrtc.whisper(peer, "tw-ml", "tw")
-
-          setTimeout(handshake.bind(this, peer), 500)
-        }
-
-        setTimeout(handshake.bind(this, peer), 100)
-      })
-
-      this.webrtc.on("receivedPeerData", (type, message, peer) => {
-        this.checkAndEnsureUser()
-
-        if (message.type !== "update") {
-          console.log("receivedData", peer.id, message)
-        }
-
-        if (message.type === "sync done") {
-          this.raiseUserEvent("peerSyncedWithUs", peer.id)
-        }
-
-        if (type === "y-js") {
-          this.checkAndInsertPeer(peer.id)
-          this.receiveMessage(peer.id, message)
-        } else if (type === "tw-ml") {
-          if (message === "tw") {
-            // Response message in the handshake
-            this.webrtc.whisper(peer, "tw-ml", "ml")
-          } else if (message == "ml") {
-            // Handshake completed
-            this.checkAndInsertPeer(peer.id)
-          }
-        }
-      })
-
-      this.webrtc.on("channelClose", (dataChannel, peer) => {
-        this.checkAndEnsureUser()
-        this.checkAndRemovePeer(peer.id)
-      })
-    }
-
-    // Ensure that y-js is up to date on the user's id
-    checkAndEnsureUser() {
-      const id = this.webrtc.getMyId()
-
-      if (this.y.db.userId === id) {
-        return
-      }
-
-      this.raiseUserEvent("userID", id)
-
-      this.setUserId(id)
-    }
-
-    // Ensure that y-js knows that the peer has joined
-    checkAndInsertPeer(uid) {
-      if (this.peers.has(uid)) {
-        return
-      }
-
-      this.peers.add(uid)
-
-      console.log("createdPeer", uid)
-
-      this.userJoined(uid, "master")
-    }
-
-    // Ensure that y-js knows that the peer has left
-    checkAndRemovePeer(uid) {
-      if (!this.peers.has(uid)) {
-        return
-      }
-
-      this.peers.delete(uid)
-
-      console.log("removedPeer", uid)
-
-      this.userLeft(uid)
-    }
-
-    connectToPeer(/*uid*/) {
-      // currently deprecated
-    }
-
-    disconnect() {
-      this.webrtc.quit()
-
-      super.disconnect()
-    }
-
-    reconnect() {
-      this.initialiseConnection()
-
-      super.reconnect()
-    }
-
-    raiseUserEvent(action, user_id) {
-      for (const f of this.userEventListeners) {
-        f({ action: action, user: user_id })
-      }
-    }
-
-    send(uid, message) {
-      // y-js db transactions can send messages after a peer has disconnected
-      if (!this.peers.has(uid) || !this.webrtc.getPeerById(uid)) {
-        return
-      }
-
-      console.log("send", uid, message)
-
-      if (message.type === "sync step 1") {
-        this.raiseUserEvent("waitingForSyncStep", uid)
-      } else if (message.type === "sync done") {
-        this.raiseUserEvent("weSyncedWithPeer", uid)
-      }
-
-      this.webrtc.whisper(this.webrtc.getPeerById(uid), "y-js", message)
-    }
-
-    broadcast(message) {
-      if (message.type !== "update") console.log("broadcast", message)
-
-      this.webrtc.shout("y-js", message)
-    }
-
-    isDisconnected() {
-      return false
-    }
-  }
-
-  Y.extend("webrtc", WebRTC)
-}
-
-export default extend
-if (typeof Y !== "undefined") {
-  extend(Y)
-}

yjs @ 44aa194d

-Subproject commit ba068ea6a62d6a124047fd3dd0075adecd5d149a
+Subproject commit 44aa194d19217cbc1d8e0828cf8fdf39fc4dcdd3

webpack.bench.js

+const merge = require("webpack-merge")
+const common = require("./webpack.common.js")
+const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
+  .BundleAnalyzerPlugin
+
+module.exports = (env) => {
+  const config = merge(common, {
+    mode: "production",
+    entry: {
+      benchmarks: "./__benchmarks__/benchmarks.js",
+    },
+    plugins: env && env.analyze ? [new BundleAnalyzerPlugin()] : [],
+  })
+
+  delete config.entry.app
+
+  return config
+}

webpack.common.js

@@ -3,14 +3,38 @@ const webpack = require("webpack")
 
 module.exports = {
   mode: "development",
-  entry: "./src/app.js",
+  entry: {
+    app: "./src/app.js",
+    queue: "./src/queue.js",
+  },
   output: {
-    filename: "app.js",
+    filename: "[name].js",
     path: path.resolve(__dirname, "public/js"),
+    publicPath: "js/",
   },
   plugins: [
     new webpack.ProvidePlugin({
       EventTarget: ["@ungap/event-target", "default"],
     }),
   ],
+  module: {
+    rules: [
+      {
+        test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
+        use: [
+          {
+            loader: "file-loader",
+            options: {
+              name: "../assets/fonts/font-awesome/[name].[ext]",
+              publicPath: "font-awesome/",
+            },
+          },
+        ],
+      },
+      {
+        test: /\.css$/,
+        use: ["style-loader", "css-loader"],
+      },
+    ],
+  },
 }