.eslintrc.json

@@ -11,6 +11,7 @@
     "Atomics": "readonly",
     "SharedArrayBuffer": "readonly"
   },
+  "parser": "babel-eslint",
   "parserOptions": {
     "ecmaVersion": 2018,
     "sourceType": "module"

.gitignore

@@ -9,24 +9,54 @@ src/liowebrtc
 src/rtcpeerconnection
 src/signalbuddy
 src/yjs
-src/tiny-worker
-
-# Temporary test dump files
-dot-seq-add.json
-dot-seq-erase.json
-dot-seq-sync.json
-
-dot-par-add.json
-dot-par-erase.json
-dot-par-sync.json
-
-path-seq-add.json
-path-seq-erase.json
-path-seq-sync.json
-
-path-par-add.json
-path-par-erase.json
-path-par-sync.json
+src/drawing-crdt
+
+# Temporary benchmark dump files
+.dot-seq-add-packets.json
+.dot-seq-erase-packets.json
+.dot-seq-sync-packets.json
+.dot-seq-add-events.json
+.dot-seq-erase-events.json
+.dot-seq-sync-events.json
+
+.dot-par-add-packets.json
+.dot-par-erase-packets.json
+.dot-par-sync-packets.json
+.dot-par-add-events.json
+.dot-par-erase-events.json
+.dot-par-sync-events.json
+
+.path-seq-add-packets.json
+.path-seq-erase-packets.json
+.path-seq-sync-packets.json
+.path-seq-add-events.json
+.path-seq-erase-events.json
+.path-seq-sync-events.json
+
+.path-par-add-packets.json
+.path-par-erase-packets.json
+.path-par-sync-packets.json
+.path-par-add-events.json
+.path-par-erase-events.json
+.path-par-sync-events.json
+
+.dot-ver-add-packets.json
+.dot-ver-erase-packets.json
+.dot-ver-sync-packets.json
+.dot-ver-add-events.json
+.dot-ver-erase-events.json
+.dot-ver-sync-events.json
+
+.path-ver-add-packets.json
+.path-ver-erase-packets.json
+.path-ver-sync-packets.json
+.path-ver-add-events.json
+.path-ver-erase-events.json
+.path-ver-sync-events.json
+
+# Benchmark output files
+plots/*.tsv
+plots/*.pdf
 
 ### macOS ###
 # General
@@ -135,8 +165,10 @@ typings/
 .nuxt
 
 # react / gatsby (customised)
-public/js/app.js
-public/js/queue.js
+public/service-worker.js
+public/js
+public/benchmarks.html
+public/assets/fonts/font-awesome
 
 # vuepress build output
 .vuepress/dist

.gitlab-ci.yml

@@ -15,14 +15,14 @@ submodule_fetch:
   script:
     - chmod 600 .drawing-app-deploy.rsa
     - git submodule sync --recursive
-    - GIT_SSH_COMMAND='ssh -i .drawing-app-deploy.rsa -o UserKnownHostsFile=/dev/null -o StrictHostKeyChecking=no' git submodule update --init
+    - GIT_SSH_COMMAND='ssh -i '`pwd`'/.drawing-app-deploy.rsa -o UserKnownHostsFile=/dev/null -o StrictHostKeyChecking=no' git submodule update --init --recursive
   artifacts:
     paths:
       - src/liowebrtc
       - src/rtcpeerconnection
       - src/signalbuddy
       - src/yjs
-      - src/tiny-worker
+      - src/drawing-crdt/pkg
 
 npm_install_prod:
   stage: deps
@@ -33,11 +33,7 @@ npm_install_prod:
   artifacts:
     paths:
       - node_modules
-      - src/liowebrtc
-      - src/rtcpeerconnection
       - src/signalbuddy
-      - src/yjs
-      - src/tiny-worker
 
 npm_install:
   stage: deps
@@ -50,9 +46,9 @@ npm_install:
       - node_modules
       - src/liowebrtc
       - src/rtcpeerconnection
-      - src/signalbuddy
       - src/yjs
-      - src/tiny-worker
+      - src/drawing-crdt/pkg
+      - src/signalbuddy
 
 format_check:
   stage: check
@@ -74,6 +70,7 @@ build:
     - npm_install
   script:
     - npm run build
+    - gcc -E -P -traditional-cpp -o /dev/stdout -DFILES_TO_CACHE_LIST=`find public/ -type f "!" -iname service-worker.js -and "!" -name '.*' | cut -c6- | sed 's_._"_' | sed 's/$/",/' | sort | tr -d '\n'` - < src/service-worker.js | npx prettier --parser babel > public/service-worker.js
   artifacts:
     paths:
       - public/
@@ -110,5 +107,15 @@ benchmark:
   stage: benchmark
   dependencies:
     - npm_install
+  only:
+    - master
   script:
-    - npm run test-benchmark
+    - apt-get -y install gnuplot
+    - npm run build:bench
+    - cp __benchmarks__/benchmarks.html public/benchmarks.html
+    - npm run start-bg
+    - npm run benchmarks
+    - npm run plot
+  artifacts:
+    paths:
+      - plots/

.gitmodules

@@ -10,6 +10,6 @@
 [submodule "src/yjs"]
 	path = src/yjs
 	url = git@gitlab.doc.ic.ac.uk:sweng-group-15/yjs.git
-[submodule "src/tiny-worker"]
-	path = src/tiny-worker
-	url = git@gitlab.doc.ic.ac.uk:sweng-group-15/tiny-worker.git
+[submodule "src/drawing-crdt"]
+	path = src/drawing-crdt
+	url = git@gitlab.doc.ic.ac.uk:sweng-group-15/drawing-crdt.git

__benchmarks__/benchmarks.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+  </head>
+  <body>
+    <script src="js/benchmarks.js"></script>
+  </body>
+</html>

__tests__/benchmark.data.js → __benchmarks__/data.js

-export function createMessageReceivedEvent(
-  message,
-  channel = "y-js",
-  uid = "moritz",
-) {
-  return {
-    detail: {
-      uid,
-      channel,
-      message,
-    },
-  }
-}
+export const handshake = Uint8Array.of(
+  133,
+  164,
+  117,
+  117,
+  105,
+  100,
+  217,
+  36,
+  97,
+  54,
+  100,
+  57,
+  50,
+  55,
+  97,
+  56,
+  45,
+  53,
+  50,
+  57,
+  101,
+  45,
+  52,
+  55,
+  50,
+  54,
+  45,
+  97,
+  102,
+  48,
+  98,
+  45,
+  56,
+  48,
+  57,
+  55,
+  98,
+  48,
+  48,
+  102,
+  55,
+  99,
+  49,
+  55,
+  167,
+  109,
+  101,
+  115,
+  115,
+  97,
+  103,
+  101,
+  196,
+  3,
+  162,
+  109,
+  108,
+  165,
+  115,
+  108,
+  105,
+  99,
+  101,
+  0,
+  166,
+  108,
+  101,
+  110,
+  103,
+  116,
+  104,
+  3,
+  170,
+  99,
+  111,
+  109,
+  112,
+  114,
+  101,
+  115,
+  115,
+  101,
+  100,
+  194,
+)
 
-export const handshake = {
-  uuid: "42c4566d-0cfe-4c00-a645-254b7887e477",
-  message: Uint8Array.of(162, 109, 108),
-  slice: 0,
-  length: 1,
-  compressed: false,
-}
-
-export const syncStep1 = {
-  uuid: "6e20b20d-e1d8-405d-8a61-d56cb1c47a24",
-  message: Uint8Array.of(
-    120,
-    156,
-    107,
-    93,
-    82,
-    82,
-    89,
-    144,
-    186,
-    186,
-    184,
-    50,
-    47,
-    89,
-    161,
-    184,
-    36,
-    181,
-    64,
-    193,
-    112,
-    69,
-    113,
-    73,
-    98,
-    73,
-    106,
-    112,
-    106,
-    73,
-    195,
-    202,
-    148,
-    212,
-    156,
-    84,
-    8,
-    115,
-    125,
-    65,
-    81,
-    126,
-    73,
-    126,
-    114,
-    126,
-    78,
-    88,
-    106,
-    81,
-    113,
-    102,
-    126,
-    30,
-    247,
-    146,
-    196,
-    210,
-    146,
-    140,
-    3,
-    0,
-    80,
-    113,
-    26,
-    230,
-  ),
-  slice: 0,
-  length: 1,
-  compressed: true,
-}
-
-export const syncDone = {
-  message: Uint8Array.of(
-    120,
-    156,
-    107,
-    92,
-    82,
-    82,
-    89,
-    144,
-    186,
-    178,
-    184,
-    50,
-    47,
-    89,
-    33,
-    37,
-    63,
-    47,
-    21,
-    0,
-    64,
-    79,
-    7,
-    20,
-  ),
-  slice: 0,
-  length: 1,
-  compressed: true,
-}
-
-export const dotDraw = [[209, 88, 5.000000000000001, "#0000ff"]]
+export const dotDraw = [[209, 88, 5.0, "#0000ff"]]
 export const dotErase = [[0, [[0, 0]]]]
 
 export const pathDraw = [
-  [229, 147, 5.000000000000001, "#0000ff"],
-  [239, 149, 5.000000000000001, "#0000ff"],
-  [265, 154, 5.000000000000001, "#0000ff"],
-  [329, 158, 5.000000000000001, "#0000ff"],
-  [428, 168, 5.000000000000001, "#0000ff"],
-  [559, 172, 5.000000000000001, "#0000ff"],
-  [689, 176, 5.000000000000001, "#0000ff"],
-  [789, 176, 5.000000000000001, "#0000ff"],
-  [871, 178, 5.000000000000001, "#0000ff"],
-  [915, 179, 5.000000000000001, "#0000ff"],
-  [937, 179, 5.000000000000001, "#0000ff"],
-  [942, 179, 5.000000000000001, "#0000ff"],
+  [229, 147, 5.0, "#0000ff"],
+  [239, 149, 5.0, "#0000ff"],
+  [265, 154, 5.0, "#0000ff"],
+  [329, 158, 5.0, "#0000ff"],
+  [428, 168, 5.0, "#0000ff"],
+  [559, 172, 5.0, "#0000ff"],
+  [689, 176, 5.0, "#0000ff"],
+  [789, 176, 5.0, "#0000ff"],
+  [871, 178, 5.0, "#0000ff"],
+  [915, 179, 5.0, "#0000ff"],
+  [937, 179, 5.0, "#0000ff"],
+  [942, 179, 5.0, "#0000ff"],
 ]
 export const pathErase = [
   [0, [[0, 0.030367582231477598]]],

__benchmarks__/puppeteer.js

+import puppeteer from "puppeteer-core"
+import fs from "fs"
+;(async () => {
+  const browser = await puppeteer.launch({
+    executablePath: "google-chrome",
+    headless: true,
+    args: [
+      "--js-flags=--expose-gc",
+      "--no-sandbox",
+      "--enable-precise-memory-info",
+    ],
+  })
+  const page = await browser.newPage()
+
+  const done = new Promise((resolve) => {
+    page.on("console", (msg) => {
+      if (msg.type() == "debug") {
+        process.stderr.write(msg.text())
+      } else if (msg.type() == "info") {
+        const { filename, title, iterations, results } = JSON.parse(msg.text())
+
+        if (title) {
+          const columns = ["iterations"]
+
+          for (const title of results) {
+            columns.push(`${title}_timeLoc`)
+            columns.push(`${title}_encodeRAM`)
+            columns.push(`${title}_packets`)
+            columns.push(`${title}_size`)
+            columns.push(`${title}_timeRem`)
+            columns.push(`${title}_decodeRAM`)
+            columns.push(`${title}_events`)
+          }
+
+          fs.writeFileSync(
+            filename,
+            `# Benchmark: ${title}\n# ${columns.join("\t")}\n`,
+          )
+        } else {
+          const columns = [iterations]
+
+          for (const title in results) {
+            const {
+              timeLoc,
+              encodeRAM,
+              packets,
+              size,
+              timeRem,
+              decodeRAM,
+              events,
+            } = results[title]
+
+            columns.push(timeLoc)
+            columns.push(encodeRAM)
+            columns.push(packets)
+            columns.push(size)
+            columns.push(timeRem)
+            columns.push(decodeRAM)
+            columns.push(events)
+          }
+
+          fs.appendFileSync(filename, `${columns.join("\t")}\n`)
+        }
+      } else if (msg.type() == "log") {
+        if (msg.text().startsWith("# failure")) {
+          resolve()
+        }
+
+        process.stdout.write(msg.text() + "\n")
+      }
+    })
+  })
+
+  await page.goto("http://localhost:3000/benchmarks.html").catch(console.error)
+
+  await done
+
+  await browser.close()
+})()

__e2e_tests__/peer1.e2e.js

@@ -29,5 +29,6 @@ test("Clicking and dragging on canvas creates a single child element", async (t)
     .drag(canvas, 10, 10)
     .wait(syncTimeout)
     .expect(canvas.childElementCount)
-    .eql(1)
+    // first draw also creates last recognised path placeholder
+    .eql(2)
 })

__e2e_tests__/peer2.e2e.js

@@ -6,6 +6,7 @@ const port = 3000
 fixture`Peer 2`.page`${host}:${port}`
 
 const idAppearTimeout = 1000
+const syncTimeout = 15000
 const selectorOptions = { timeout: 1000 }
 
 test("Connection id appears", async (t) => {
@@ -23,5 +24,5 @@ test("Connection id appears", async (t) => {
 
 test("Canvas eventually gets a child element", async (t) => {
   const canvas = Selector("#canvas").with(selectorOptions)
-  await t.expect(canvas.childElementCount).eql(1, { timeout: 10000 })
+  await t.expect(canvas.childElementCount).eql(1, { timeout: syncTimeout })
 })

__tests__/shape.test.js

+import recognizeFromPoints, { Shapes } from "../src/shapes"
+
+describe("shape recognition", () => {
+  describe("general", () => {
+    test("should return a shape description object", () => {
+      const points = [[0, 0]]
+      const result = recognizeFromPoints(points)
+      expect(result).not.toBeNull()
+    })
+  })
+
+  describe("lines", () => {
+    test("should recognize a simple horizontal line", () => {
+      const points = [
+        [0, 0],
+        [100, 0],
+      ]
+      const result = recognizeFromPoints(points)
+      expect(result.shape).toBe(Shapes.line)
+      expect(result.firstPoint).toStrictEqual([0, 0])
+      expect(result.lastPoint).toStrictEqual([100, 0])
+    })
+
+    test("should recognize a simple vertical line", () => {
+      const points = [
+        [0, 50],
+        [0, -100],
+      ]
+      const result = recognizeFromPoints(points)
+      expect(result.shape).toBe(Shapes.line)
+      expect(result.firstPoint).toStrictEqual([0, 50])
+      expect(result.lastPoint).toStrictEqual([0, -100])
+    })
+
+    test("should recognize a slightly curve horizontal line", () => {
+      const points = [
+        [0, 0],
+        [30, 5],
+        [100, 0],
+      ]
+      const result = recognizeFromPoints(points)
+      expect(result.shape).toBe(Shapes.line)
+    })
+
+    test("should not recognize a heavily curved horizontal line", () => {
+      const points = [
+        [0, 0],
+        [30, 30],
+        [100, -4],
+      ]
+      const result = recognizeFromPoints(points)
+      expect(result.shape).not.toBe(Shapes.line)
+    })
+
+    test("should recognize a long horizontal line", () => {
+      const points = [
+        [48.675496688741724, 197.8062913907285],
+        [50.66225165562914, 197.8062913907285],
+        [53.64238410596026, 197.8062913907285],
+        [57.6158940397351, 197.8062913907285],
+        [61.58940397350993, 197.8062913907285],
+        [66.55629139072848, 197.8062913907285],
+        [71.52317880794702, 197.8062913907285],
+        [76.49006622516558, 197.8062913907285],
+        [77.48344370860927, 197.8062913907285],
+        [82.45033112582782, 197.8062913907285],
+        [84.43708609271523, 197.8062913907285],
+        [87.41721854304636, 197.8062913907285],
+        [88.41059602649007, 197.8062913907285],
+        [88.41059602649007, 197.8062913907285],
+        [89.40397350993378, 197.8062913907285],
+      ]
+      const result = recognizeFromPoints(points)
+      expect(result.shape).toBe(Shapes.line)
+    })
+
+    test("should recognize a long vertical line", () => {
+      const points = [
+        [218.54304635761588, 84.56125827814569],
+        [218.54304635761588, 86.54801324503312],
+        [218.54304635761588, 87.54139072847681],
+        [218.54304635761588, 88.53476821192052],
+        [218.54304635761588, 90.52152317880794],
+        [218.54304635761588, 91.51490066225165],
+        [218.54304635761588, 92.50827814569537],
+        [218.54304635761588, 93.50165562913908],
+        [218.54304635761588, 94.49503311258277],
+        [218.54304635761588, 94.49503311258277],
+        [218.54304635761588, 95.4884105960265],
+        [218.54304635761588, 96.4817880794702],
+        [218.54304635761588, 97.4751655629139],
+        [218.54304635761588, 98.46854304635761],
+        [218.54304635761588, 100.45529801324503],
+        [218.54304635761588, 101.44867549668874],
+        [218.54304635761588, 103.43543046357617],
+        [218.54304635761588, 105.42218543046357],
+        [218.54304635761588, 108.4023178807947],
+        [218.54304635761588, 110.38907284768212],
+        [218.54304635761588, 112.37582781456953],
+        [218.54304635761588, 114.36258278145695],
+        [218.54304635761588, 116.34933774834438],
+        [218.54304635761588, 118.33609271523179],
+        [218.54304635761588, 119.32947019867551],
+        [218.54304635761588, 120.3228476821192],
+        [218.54304635761588, 122.30960264900662],
+        [218.54304635761588, 123.30298013245033],
+        [218.54304635761588, 124.29635761589404],
+        [218.54304635761588, 125.28973509933775],
+        [218.54304635761588, 125.28973509933775],
+        [218.54304635761588, 125.28973509933775],
+        [218.54304635761588, 126.28311258278147],
+        [218.54304635761588, 126.28311258278147],
+        [218.54304635761588, 127.27649006622516],
+      ]
+      const result = recognizeFromPoints(points)
+      expect(result.shape).toBe(Shapes.line)
+    })
+
+    test("should recognize a line at 20 degrees", () => {
+      const points = [
+        [34.7682119205298, 268.3360927152318],
+        [34.7682119205298, 268.3360927152318],
+        [36.75496688741722, 268.3360927152318],
+        [37.74834437086093, 268.3360927152318],
+        [38.741721854304636, 268.3360927152318],
+        [39.735099337748345, 268.3360927152318],
+        [40.728476821192054, 268.3360927152318],
+        [41.721854304635755, 268.3360927152318],
+        [42.71523178807947, 268.3360927152318],
+        [43.70860927152318, 268.3360927152318],
+        [43.70860927152318, 268.3360927152318],
+        [44.70198675496689, 268.3360927152318],
+        [44.70198675496689, 268.3360927152318],
+        [45.6953642384106, 267.3427152317881],
+        [45.6953642384106, 267.3427152317881],
+        [46.6887417218543, 267.3427152317881],
+        [47.682119205298015, 267.3427152317881],
+        [48.675496688741724, 266.34933774834434],
+        [48.675496688741724, 266.34933774834434],
+        [49.66887417218543, 266.34933774834434],
+        [50.66225165562914, 266.34933774834434],
+        [51.65562913907284, 265.35596026490066],
+        [52.64900662251656, 265.35596026490066],
+        [52.64900662251656, 265.35596026490066],
+        [53.64238410596026, 265.35596026490066],
+        [54.63576158940397, 264.362582781457],
+        [54.63576158940397, 264.362582781457],
+        [55.629139072847686, 264.362582781457],
+        [55.629139072847686, 264.362582781457],
+        [57.6158940397351, 263.36920529801324],
+        [57.6158940397351, 263.36920529801324],
+        [58.609271523178805, 263.36920529801324],
+        [58.609271523178805, 263.36920529801324],
+        [59.602649006622514, 262.37582781456956],
+        [60.59602649006623, 262.37582781456956],
+        [61.58940397350993, 262.37582781456956],
+        [62.58278145695365, 261.3824503311258],
+        [63.57615894039735, 261.3824503311258],
+        [64.56953642384106, 260.3890728476821],
+        [66.55629139072848, 259.3956953642384],
+        [67.54966887417218, 259.3956953642384],
+        [68.54304635761589, 259.3956953642384],
+        [69.5364238410596, 258.4023178807947],
+        [69.5364238410596, 258.4023178807947],
+        [70.52980132450331, 258.4023178807947],
+        [71.52317880794702, 258.4023178807947],
+        [71.52317880794702, 257.408940397351],
+        [71.52317880794702, 257.408940397351],
+        [72.51655629139073, 257.408940397351],
+        [72.51655629139073, 257.408940397351],
+        [72.51655629139073, 257.408940397351],
+        [73.50993377483444, 257.408940397351],
+        [73.50993377483444, 257.408940397351],
+        [73.50993377483444, 257.408940397351],
+        [74.50331125827815, 257.408940397351],
+        [76.49006622516558, 257.408940397351],
+        [77.48344370860927, 257.408940397351],
+        [79.47019867549669, 256.4155629139073],
+        [80.4635761589404, 256.4155629139073],
+        [82.45033112582782, 255.42218543046357],
+        [83.44370860927151, 255.42218543046357],
+        [84.43708609271523, 255.42218543046357],
+        [85.43046357615894, 255.42218543046357],
+        [85.43046357615894, 254.42880794701986],
+        [86.42384105960264, 254.42880794701986],
+        [86.42384105960264, 254.42880794701986],
+        [87.41721854304636, 254.42880794701986],
+        [87.41721854304636, 254.42880794701986],
+      ]
+
+      const result = recognizeFromPoints(points)
+      expect(result.shape).toBe(Shapes.line)
+    })
+
+    test("should recognize line 1", () => {
+      const points = [
+        [380, 355],
+        [380, 356],
+        [381, 355],
+        [383, 354],
+        [386, 352],
+        [391, 349],
+        [395, 346],
+        [400, 343],
+        [405, 339],
+        [411, 335],
+        [416, 332],
+        [425, 325],
+        [433, 318],
+        [440, 312],
+        [447, 306],
+        [454, 300],
+        [462, 293],
+        [471, 283],
+        [479, 274],
+        [487, 266],
+        [498, 255],
+        [509, 244],
+        [520, 235],
+        [531, 226],
+        [539, 218],
+        [543, 215],
+        [550, 208],
+        [558, 203],
+        [563, 199],
+        [567, 196],
+        [571, 193],
+        [575, 190],
+        [577, 189],
+        [578, 188],
+        [579, 187],
+        [580, 187],
+        [580, 187],
+        [581, 187],
+        [581, 186],
+      ]
+      const result = recognizeFromPoints(points)
+      expect(result.shape).toBe(Shapes.line)
+    })
+
+    test("should recognize line 2", () => {
+      const points = [
+        [648, 509],
+        [648, 509],
+        [648, 509],
+        [646, 509],
+        [641, 509],
+        [634, 509],
+        [628, 509],
+        [608, 509],
+        [591, 509],
+        [571, 509],
+        [554, 509],
+        [534, 509],
+        [513, 505],
+        [486, 499],
+        [462, 495],
+        [454, 494],
+        [433, 490],
+        [413, 488],
+        [396, 485],
+        [382, 485],
+        [368, 482],
+        [360, 482],
+        [356, 482],
+        [348, 479],
+        [341, 479],
+        [336, 478],
+        [331, 478],
+        [329, 478],
+        [327, 477],
+        [326, 476],
+        [326, 476],
+        [325, 476],
+        [325, 476],
+        [325, 476],
+        [325, 476],
+        [323, 476],
+        [322, 476],
+        [320, 476],
+        [319, 476],
+        [318, 476],
+        [316, 476],
+        [315, 475],
+        [315, 475],
+        [314, 475],
+        [314, 475],
+        [313, 475],
+      ]
+      const result = recognizeFromPoints(points)
+      expect(result.shape).toBe(Shapes.line)
+    })
+
+    test("should recognize line 3", () => {
+      const points = [
+        [204, 590],
+        [205, 590],
+        [208, 584],
+        [219, 574],
+        [254, 534],
+        [276, 500],
+        [305, 456],
+        [334, 410],
+        [346, 388],
+        [376, 336],
+        [404, 284],
+        [430, 238],
+        [454, 197],
+        [458, 190],
+        [474, 160],
+        [483, 142],
+        [485, 138],
+        [492, 126],
+        [495, 121],
+        [498, 117],
+        [499, 115],
+        [500, 114],
+        [500, 114],
+        [500, 113],
+      ]
+      const result = recognizeFromPoints(points)
+      expect(result.shape).toBe(Shapes.line)
+    })
+  })
+
+  describe("rectangles", () => {
+    test("should recognize simple rectangle", () => {
+      const points = [
+        [0, 0],
+        [5, 0],
+        [10, 0],
+        [10, 5],
+        [10, 10],
+        [5, 10],
+        [0, 10],
+      ]
+      const result = recognizeFromPoints(points)
+      expect(result.shape).toBe(Shapes.rectangle)
+    })
+
+    test("should recognize rectangle with varying points", () => {
+      const points = [
+        [0, 0],
+        [5, 1],
+        [10, 0],
+        [10, 6],
+        [10, 10],
+        [6, 10],
+        [0, 10],
+      ]
+      const result = recognizeFromPoints(points)
+      expect(result.shape).toBe(Shapes.rectangle)
+    })
+
+    test("should not recognize rectangle with non-rectangular points", () => {
+      const points = [
+        [5, 1],
+        [23, 0],
+        [10, 54],
+        [0, 10],
+      ]
+      const result = recognizeFromPoints(points)
+      expect(result.shape).not.toBe(Shapes.rectangle)
+    })
+
+    test("should not recognize unclosed rectangle", () => {
+      const points = [
+        [-10, -10],
+        [10, -10],
+        [10, 10],
+      ]
+      const result = recognizeFromPoints(points)
+      expect(result.shape).not.toBe(Shapes.rectangle)
+    })
+
+    test("should recognize almost-closed rectangle", () => {
+      const points = [
+        [0, 0],
+        [5, 0],
+        [10, 0],
+        [10, 5],
+        [10, 10],
+        [5, 10],
+        [0, 8],
+      ]
+      const result = recognizeFromPoints(points)
+      expect(result.shape).toBe(Shapes.rectangle)
+    })
+
+    test("should recognize half-closed rectangle", () => {
+      const points = [
+        [380, 503],
+        [379, 503],
+        [379, 503],
+        [379, 498],
+        [379, 491],
+        [379, 471],
+        [379, 468],
+        [379, 457],
+        [379, 440],
+        [379, 428],
+        [379, 412],
+        [379, 398],
+        [379, 384],
+        [379, 373],
+        [379, 369],
+        [379, 361],
+        [379, 354],
+        [379, 349],
+        [379, 346],
+        [379, 344],
+        [379, 343],
+        [379, 342],
+        [379, 341],
+        [381, 340],
+        [385, 340],
+        [389, 340],
+        [398, 340],
+        [407, 340],
+        [418, 340],
+        [429, 340],
+        [440, 340],
+        [451, 340],
+        [463, 340],
+        [476, 342],
+        [488, 343],
+        [502, 345],
+        [515, 348],
+        [520, 349],
+        [531, 350],
+        [540, 351],
+        [549, 352],
+        [552, 353],
+        [557, 354],
+        [558, 355],
+        [560, 355],
+        [560, 355],
+        [560, 355],
+        [561, 355],
+        [561, 356],
+        [561, 356],
+        [561, 356],
+        [561, 357],
+        [561, 360],
+        [561, 363],
+        [561, 368],
+        [561, 377],
+        [561, 388],
+        [561, 399],
+        [561, 406],
+        [561, 414],
+        [561, 423],
+        [561, 432],
+        [561, 441],
+        [561, 447],
+        [561, 452],
+        [561, 459],
+        [561, 463],
+        [561, 468],
+        [561, 471],
+        [561, 475],
+        [561, 478],
+        [561, 479],
+        [561, 480],
+        [561, 480],
+        [561, 481],
+        [561, 482],
+        [561, 482],
+        [561, 483],
+        [560, 483],
+        [560, 483],
+        [558, 484],
+        [556, 485],
+        [551, 487],
+        [546, 488],
+        [540, 490],
+        [533, 492],
+        [522, 493],
+        [513, 494],
+        [502, 496],
+        [491, 497],
+        [480, 497],
+        [466, 499],
+        [452, 500],
+        [447, 500],
+        [436, 500],
+        [427, 501],
+        [418, 501],
+        [412, 503],
+        [407, 503],
+        [402, 504],
+        [400, 504],
+        [398, 504],
+        [398, 504],
+        [397, 504],
+        [396, 504],
+      ]
+      const result = recognizeFromPoints(points)
+      expect(result.shape).toBe(Shapes.rectangle)
+    })
+
+    test("should recognize half-closed rectangle 2", () => {
+      const points = [
+        [294, 477],
+        [293, 477],
+        [293, 477],
+        [293, 473],
+        [293, 469],
+        [293, 465],
+        [293, 459],
+        [293, 455],
+        [293, 451],
+        [293, 444],
+        [293, 437],
+        [293, 431],
+        [293, 423],
+        [293, 414],
+        [293, 403],
+        [293, 394],
+        [293, 391],
+        [293, 384],
+        [293, 379],
+        [293, 376],
+        [293, 373],
+        [293, 372],
+        [293, 371],
+        [293, 370],
+        [293, 370],
+        [293, 369],
+        [294, 369],
+        [295, 368],
+        [298, 368],
+        [303, 367],
+        [308, 366],
+        [317, 364],
+        [328, 362],
+        [341, 360],
+        [358, 357],
+        [375, 355],
+        [392, 352],
+        [412, 350],
+        [436, 348],
+        [457, 346],
+        [480, 344],
+        [501, 342],
+        [518, 342],
+        [535, 340],
+        [539, 339],
+        [551, 339],
+        [559, 338],
+        [568, 337],
+        [573, 337],
+        [576, 337],
+        [578, 337],
+        [579, 337],
+        [579, 337],
+        [580, 337],
+        [580, 337],
+        [581, 337],
+        [581, 338],
+        [581, 341],
+        [581, 346],
+        [581, 349],
+        [581, 358],
+        [579, 366],
+        [578, 373],
+        [576, 382],
+        [575, 386],
+        [571, 403],
+        [571, 407],
+        [568, 420],
+        [567, 424],
+        [565, 430],
+        [562, 437],
+        [561, 442],
+        [559, 447],
+        [558, 450],
+        [557, 452],
+        [556, 454],
+        [556, 456],
+        [555, 458],
+        [555, 459],
+        [554, 460],
+        [554, 461],
+        [553, 462],
+        [553, 462],
+        [553, 463],
+        [552, 463],
+        [552, 463],
+        [552, 464],
+        [552, 464],
+        [551, 464],
+        [550, 465],
+        [549, 465],
+        [544, 466],
+        [541, 467],
+        [534, 468],
+        [527, 469],
+        [521, 470],
+        [512, 472],
+        [509, 472],
+        [500, 474],
+        [493, 475],
+        [485, 476],
+        [478, 477],
+        [471, 478],
+        [465, 479],
+        [460, 480],
+        [454, 481],
+        [450, 482],
+        [446, 483],
+        [442, 483],
+        [439, 483],
+        [437, 484],
+        [436, 484],
+        [435, 484],
+        [434, 484],
+        [433, 484],
+        [433, 484],
+        [433, 484],
+      ]
+      const result = recognizeFromPoints(points)
+      expect(result.shape).toBe(Shapes.rectangle)
+    })
+  })
+})

package.json

@@ -13,12 +13,13 @@
     "build": "webpack --config webpack.prod.js",
     "build:analyze": "webpack --env.analyze --config webpack.prod.js",
     "build:dev": "webpack --config webpack.dev.js",
+    "build:bench": "webpack --config webpack.bench.js",
     "watch": "webpack --watch --config webpack.dev.js",
     "start": "node --experimental-modules src/server.js",
-    "test": "jest --testPathIgnorePatterns .*.data.js .*benchmark.test.js src/liowebrtc src/rtcpeerconnection src/signalbuddy src/yjs src/tiny-worker",
-    "test-changed": "jest --only-changed --testPathIgnorePatterns __tests__/*.data.js src/liowebrtc src/rtcpeerconnection src/signalbuddy src/yjs src/tiny-worker",
-    "test-coverage": "jest --coverage --testPathIgnorePatterns __tests__/*.data.js src/liowebrtc src/rtcpeerconnection src/signalbuddy src/yjs src/tiny-worker",
-    "test-benchmark": "jest --testPathPattern .*benchmark.test.js --testPathIgnorePatterns .*.data.js src/liowebrtc src/rtcpeerconnection src/signalbuddy src/yjs src/tiny-worker",
+    "test": "jest --testPathIgnorePatterns src/liowebrtc src/rtcpeerconnection src/signalbuddy src/yjs src/drawing-crdt",
+    "test-changed": "jest --only-changed --testPathIgnorePatterns src/liowebrtc src/rtcpeerconnection src/signalbuddy src/yjs src/drawing-crdt",
+    "test-coverage": "jest --coverage --testPathIgnorePatterns src/liowebrtc src/rtcpeerconnection src/signalbuddy src/yjs src/drawing-crdt",
+    "benchmarks": "node --experimental-modules __benchmarks__/puppeteer.js | npx tap-summary --no-progress",
     "test-e2e:peer1": "testcafe chrome:headless __e2e_tests__/peer1.e2e.js",
     "test-e2e:peer2": "testcafe chrome:headless __e2e_tests__/peer2.e2e.js",
     "test-e2e": "run-p test-e2e:*",
@@ -27,44 +28,54 @@
     "format": "prettier --ignore-path .gitignore --check --write '**/*.{html,js,json,md}'",
     "format-check": "prettier --ignore-path .gitignore --check '**/*.{html,js,json,md}'",
     "lint": "eslint --ignore-path .gitignore '**/*.js'",
-    "validate": "npm ls"
+    "validate": "npm ls",
+    "plot": "find plot-scripts/ -maxdepth 1 -type f -name '*.p' -exec gnuplot {} \\;"
   },
   "dependencies": {
-    "@ungap/event-target": "^0.1.0",
-    "d3-shape": "^1.3.5",
+    "@xmpp/client": "^0.9.2",
     "dotenv": "^8.2.0",
     "express": "^4.17.1",
-    "humanhash": "^1.0.4",
-    "jdenticon": "^2.2.0",
-    "liowebrtc": "file:src/liowebrtc",
-    "pako": "^1.0.10",
-    "rtcpeerconnection": "file:src/rtcpeerconnection",
     "signalbuddy": "file:src/signalbuddy",
-    "uuid": "^3.3.3",
-    "webrtc-adapter": "^7.3.0",
-    "what-the-pack": "^2.0.3",
-    "y-array": "^10.1.4",
-    "y-map": "^10.1.3",
-    "y-memory": "^8.0.9",
-    "yjs": "file:src/yjs"
+    "uuid": "^3.3.3"
   },
   "devDependencies": {
     "@babel/plugin-transform-modules-commonjs": "^7.6.0",
+    "@fortawesome/fontawesome-free": "^5.12.0",
+    "@ungap/event-target": "^0.1.0",
+    "array-flat-polyfill": "^1.0.1",
+    "babel-eslint": "^10.0.3",
     "chalk": "^3.0.0",
+    "css-loader": "^3.4.1",
+    "d3-shape": "^1.3.5",
+    "drawing-crdt": "file:src/drawing-crdt/pkg",
     "eslint": "^6.5.1",
     "eslint-config-prettier": "^6.5.0",
     "eslint-plugin-testcafe": "^0.2.1",
+    "fastbitset": "^0.2.8",
+    "file-loader": "^5.0.2",
+    "humanhash": "^1.0.4",
+    "jdenticon": "^2.2.0",
     "jest": "^24.9.0",
+    "liowebrtc": "file:src/liowebrtc",
     "npm-run-all": "^4.1.5",
+    "pako": "^1.0.10",
     "prettier": "^1.18.2",
+    "puppeteer-core": "^2.0.0",
+    "rtcpeerconnection": "file:src/rtcpeerconnection",
+    "style-loader": "^1.1.2",
+    "tap-summary": "^4.0.0",
     "testcafe": "^1.5.0",
-    "tiny-worker": "file:src/tiny-worker",
     "webpack": "^4.41.0",
     "webpack-bundle-analyzer": "^3.6.0",
     "webpack-cli": "^3.3.9",
     "webpack-merge": "^4.2.2",
-    "webpack-preprocessor-loader": "^1.1.2",
-    "yaeti": "^1.0.2"
+    "webrtc-adapter": "^7.3.0",
+    "what-the-pack": "^2.0.3",
+    "y-array": "^10.1.4",
+    "y-map": "^10.1.3",
+    "y-memory": "^8.0.9",
+    "yjs": "file:src/yjs",
+    "zora": "^3.1.8"
   },
   "pre-commit": [
     "lint",

plot-scripts/demo.p

+set xlabel "Iterations"
+set ylabel "Time [ms]"
+set title "addPath() performance scalability"
+set key inside bottom right
+
+set terminal dumb size 120, 30
+set autoscale
+
+plot "plots/dot-seq-benchmark.tsv" using 1:($2/(1e6*$1)) with lines title "dot [sequential]"
+
+set terminal pdf
+set output "plots/dot-seq-benchmark.pdf"
+
+plot "plots/dot-seq-benchmark.tsv" using 1:($2/(1e6*$1)) with lines title "dot [sequential]"

public/imperial.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 417.7 150.7" style="enable-background:new 0 0 417.7 150.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#003C70;}
+</style>
+<path class="st0" d="M28.4,68.2V30.3h7.4v37.9H28.4z"/>
+<path class="st0" d="M46.7,44.3h0.1c1.8-2.4,5.2-3.8,8.3-3.8c3.3,0,6.2,1.4,7.8,3.8c2.2-2.2,5.6-3.8,8.8-3.8c6-0.1,9.1,3.7,9.2,9.9
+	v17.8h-7V51.7c0-3.1-1.1-6.4-4.5-6.4c-3.4,0-5.5,2.1-5.5,6.8v16.2h-7V51.7c0-3.8-1.6-6.4-4.6-6.4c-3.3,0-5.4,2.3-5.4,6.9v16h-7V41.1
+	h7V44.3z"/>
+<path class="st0" d="M98.5,44.8c4,0,6,4.7,6,9.3c0,4.8-1.6,10.4-6.3,10.4c-3.8,0-6.5-3.8-6.5-9.5C91.8,48.7,94.1,44.8,98.5,44.8z
+	 M91.8,41.1h-7v40.7h7V64.8c2,2.4,4.7,4,7.9,4c7.5,0,12.3-7.6,12.3-14.8c0-6-3.4-13.6-11.7-13.6c-3.2,0-6.6,1.6-8.4,4.4h-0.1V41.1z"
+	/>
+<path class="st0" d="M122,51.4c-0.1-3.6,1.7-6.9,5.8-6.9c3.5,0,4.9,2.8,4.6,6.9H122z M139,55.3c0.5-8.1-2.9-14.8-11.1-14.8
+	c-7.5,0-13.5,5.3-13.5,13.7c0,8.9,6,14.7,13.9,14.7c3,0,6.8-0.9,10.3-3l-2-3.8c-1.7,1.2-4.5,2.2-7.1,2.2c-4.4,0-7.9-3.8-7.7-8.9H139
+	z"/>
+<path class="st0" d="M149.4,45.9h0.1l1.4-2.1c0.8-1.1,2.4-3.3,4.5-3.3c1.6,0,3.3,0.9,4.8,2.4l-2.6,5c-1.2-0.6-1.9-0.9-3.3-0.9
+	c-2.4,0-4.8,2-4.8,7.9v13.4h-7V41.1h7V45.9z"/>
+<path class="st0" d="M169.4,41.1v27.1h-7V41.1H169.4z M161.7,33c0-2.1,1.7-4.2,4.1-4.2c2.4,0,4.3,2.1,4.3,4.2c0,2.3-1.6,4.5-4.2,4.5
+	C163.4,37.5,161.7,35.3,161.7,33z"/>
+<path class="st0" d="M188.5,52.5c0.5,8-3.1,11.5-5.9,11.5c-1.7,0-3.2-1.6-3.2-4c0-3.1,1.7-5.1,5.2-6.2L188.5,52.5z M188.4,64.2
+	c0,1.5,0.2,3,0.7,4h7.4c-0.8-1.9-1.1-4.4-1.1-6.6V50.5c0-8.5-6-10.1-10.8-10.1c-3.6,0-6.9,0.9-10.1,3.7l2.3,3.4c1.8-1.6,4-2.8,7-2.8
+	c2.3,0,4.4,1.6,4.8,4.1l-6.2,1.9c-6.1,1.8-9.8,4.7-9.8,9.9c0,5,3.4,8.2,7.5,8.2c2.4,0,4.8-1.7,6.8-3.3L188.4,64.2z"/>
+<path class="st0" d="M199.8,68.2V28.4h7v39.8H199.8z"/>
+<path class="st0" d="M253.1,37.1c-1.8-1-4.8-2.1-7.7-2.1c-7.6,0-13.1,5.5-13.1,14.1c0,9,6.1,14.3,13.3,14.3c2.9,0,5.5-0.8,7.4-1.9
+	l2.1,4.7c-2.3,1.4-6.2,2.6-9.8,2.6c-12.8,0-20.9-8.7-20.9-19.8c0-10.4,8-19.4,21-19.4c3.9,0,7.4,1.4,10,2.9L253.1,37.1z"/>
+<path class="st0" d="M269.1,64.8c-5,0-6.4-5.7-6.4-10.5c0-4.5,1.6-9.9,6.4-9.9c4.9,0,6.4,5.4,6.4,9.9
+	C275.5,59.1,274.2,64.8,269.1,64.8z M269.1,68.9c8.3,0,13.9-6.1,13.9-14.5c0-8.8-6.7-13.9-13.9-13.9c-7.1,0-13.8,5.1-13.8,13.9
+	C255.3,62.7,260.8,68.9,269.1,68.9z"/>
+<path class="st0" d="M286,68.2V28.4h7v39.8H286z"/>
+<path class="st0" d="M297.4,68.2V28.4h7v39.8H297.4z"/>
+<path class="st0" d="M314.9,51.4c-0.1-3.6,1.7-6.9,5.7-6.9c3.5,0,4.9,2.8,4.6,6.9H314.9z M331.9,55.3c0.5-8.1-2.9-14.8-11.1-14.8
+	c-7.5,0-13.5,5.3-13.5,13.7c0,8.9,6,14.7,13.9,14.7c3,0,6.8-0.9,10.3-3l-2-3.8c-1.7,1.2-4.5,2.2-7.1,2.2c-4.4,0-7.9-3.8-7.7-8.9
+	H331.9z"/>
+<path class="st0" d="M372.2,51.4c-0.1-3.6,1.7-6.9,5.8-6.9c3.5,0,4.9,2.8,4.6,6.9H372.2z M389.2,55.3c0.5-8.1-2.9-14.8-11.1-14.8
+	c-7.5,0-13.5,5.3-13.5,13.7c0,8.9,6,14.7,13.9,14.7c3,0,6.8-0.9,10.3-3l-2-3.8c-1.7,1.2-4.5,2.2-7.1,2.2c-4.4,0-7.9-3.8-7.7-8.9
+	H389.2z"/>
+<path class="st0" d="M348.3,44.8c4.2,0,6.4,4.4,6.4,9.1c0,5.4-2,10.6-6.7,10.6c-4.1,0-6.1-5.1-6.1-10.4
+	C342,48.9,343.8,44.8,348.3,44.8z M361.7,41.1h-7v3.3h-0.1c-1.5-2.4-4.6-4-7.9-4c-7.2,0-12.2,6.8-12.2,13.9
+	c0,8.7,4.6,14.5,11.6,14.5c4,0,6.8-2.3,8.5-4.6h0.1v3.6c0,6.3-3.6,9.2-8.2,9.2c-3.6,0-6.6-0.7-9.2-2.3l-1.4,4.4
+	c3.1,1.6,7.1,2.6,11.1,2.6c7.9,0,14.7-4,14.7-16V41.1z"/>
+<path class="st0" d="M28.4,84.5h7.5v32.8h15.8v5.1H28.4V84.5z"/>
+<path class="st0" d="M92.8,98.5c2.5-2.6,6-3.8,9.5-3.8c6.5,0,9.6,3.5,9.6,10.3v17.5h-7.1v-16.6c0-3.8-1.7-6.3-5.6-6.3
+	c-3.6,0-6.4,2.3-6.4,6.8v16.2h-7.1V95.3h7V98.5z"/>
+<path class="st0" d="M130.2,99c4.4,0,6.7,4.4,6.7,9.1c0,5.4-2.1,10.6-7.1,10.6c-4.3,0-6.4-5.1-6.4-10.4S125.4,99,130.2,99z
+	 M136.9,122.4h7.1V82.6h-7.1v15.9h-0.1c-1.7-2.4-4.9-3.8-8.5-3.8c-7.4,0-12.7,6.8-12.7,13.9c0,8.7,4.8,14.5,12.1,14.5
+	c4.3,0,7.2-2.3,9-4.6h0.1V122.4z"/>
+<path class="st0" d="M162.3,119c-5.3,0-6.7-5.7-6.7-10.5c0-4.5,1.7-9.9,6.7-9.9c5.2,0,6.8,5.4,6.8,9.9
+	C169,113.3,167.6,119,162.3,119z M162.3,123.1c8.7,0,14.6-6.1,14.6-14.5c0-8.8-7.1-13.9-14.6-13.9c-7.4,0-14.5,5.1-14.5,13.9
+	C147.7,116.9,153.6,123.1,162.3,123.1z"/>
+<path class="st0" d="M187.7,98.5c2.5-2.6,6-3.8,9.5-3.8c6.5,0,9.6,3.5,9.6,10.3v17.5h-7.1v-16.6c0-3.8-1.7-6.3-5.6-6.3
+	c-3.6,0-6.4,2.3-6.4,6.8v16.2h-7.1V95.3h7V98.5z"/>
+<path class="st0" d="M67.2,119c-5.3,0-6.7-5.7-6.7-10.5c0-4.5,1.7-9.9,6.7-9.9c5.2,0,6.8,5.4,6.8,9.9C74,113.3,72.6,119,67.2,119z
+	 M67.2,123.1c8.7,0,14.6-6.1,14.6-14.5c0-8.8-7.1-13.9-14.6-13.9c-7.4,0-14.5,5.1-14.5,13.9C52.7,116.9,58.6,123.1,67.2,123.1z"/>
+</svg>

public/index.html

@@ -6,11 +6,6 @@
     <link rel="shortcut icon" href="logo.png" />
     <link rel="apple-touch-icon" href="logo.png" />
     <link rel="stylesheet" href="styles.css" />
-
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
     <script>
       if (navigator.serviceWorker) {
         navigator.serviceWorker.register("service-worker.js").then(
@@ -25,17 +20,10 @@
     </script>
   </head>
   <body>
-    <div style="display:none">
-      Your client ID: <input id="user-id" type="text" value="" readonly="" />
-    </div>
-    <div style="display:none">
-      Enter peer ID: <input id="peer-id" type="text" value="" />
-      <button id="peer-connect">Connect</button>
-    </div>
     <div id="top-panel">
       <div class="top-bar">
         <div class="dropdown">
-          <button class="dropdown-peers"><i class="fa fa-bars"></i></button>
+          <button class="dropdown-peers"><i class="fas fa-bars"></i></button>
           <div class="peers">
             <ul id="connected-peers">
               No peers are connected
@@ -57,11 +45,11 @@
           size="25"
           color="gray"
         />
-        <button id="room-connect">Connect <i class="fa fa-link"></i></button>
+        <button id="room-connect">Connect <i class="fas fa-link"></i></button>
       </div>
       <div id="tools-panel">
-        <button id="pen-tool" class="selected">
-          <i class="fa fa-paint-brush"></i>
+        <button id="pen-tool" class="selectable-tool selected">
+          <i class="fas fa-paint-brush"></i>
         </button>
         <div id="pen-properties" class="properties">
           <div class="pen-contents">
@@ -86,8 +74,7 @@
                 <input
                   type="range"
                   min="1"
-                  max="100"
-                  value="10"
+                  max="10"
                   class="slider"
                   id="range"
                 />
@@ -192,23 +179,51 @@
                 <b>Other colours</b>
               </div>
               <label id="colours">
-                <input id="other-colours" type="color" value="#0000ff" />
+                <input id="other-colours" type="color" />
               </label>
             </div>
           </div>
         </div>
-        <button id="eraser-tool"><i class="fa fa-eraser"></i></button>
+        <button id="eraser-tool" class="selectable-tool">
+          <i class="fas fa-eraser"></i>
+        </button>
+        <button id="dragging-tool" class="selectable-tool">
+          <i class="far fa-hand-paper"></i>
+        </button>
+        <button id="canvas-center" class="selectable-tool">
+          <i class="fas fa-crosshairs"></i>
+        </button>
+        <button id="recognition-mode" class="selectable-tool">
+          <i class="fas fa-square"></i>
+        </button>
+        <div class="spacer"></div>
+
         <div id="status-info">
-          <div id="user-avatar"></div>
+          <button id="fast-undo-tool" class="disabled selectable-tool">
+            <i class="fas fa-fast-backward"></i>
+          </button>
+          <button id="undo-tool" class="disabled selectable-tool">
+            <i class="fas fa-step-backward"></i>
+          </button>
           <div id="connected-room-info">
-            Room <i class="fa fa-globe">: </i> &nbsp;
+            Room:&nbsp;
             <span id="connected-room-id"></span>
           </div>
+          <div id="user-avatar"></div>
+          <div id="imperial-logo">
+            <img
+              src="imperial.svg"
+              alt="Imperial College London Logo"
+              height="42px"
+            />
+          </div>
         </div>
       </div>
     </div>
 
-    <svg id="canvas"></svg>
+    <div id="canvas-container">
+      <svg id="canvas"></svg>
+    </div>
 
     <script src="js/app.js"></script>
   </body>

public/styles.css

@@ -14,11 +14,21 @@ body {
   flex-direction: column;
 }
 
-#canvas {
+#canvas-container {
   width: calc(100vw - 8px);
   background-color: white;
   border: 4px solid red;
   flex-grow: 1;
+  position: relative;
+  overflow: hidden;
+}
+
+#canvas {
+  position: absolute;
+  left: -5000px;
+  top: -5000px;
+  width: 10000px;
+  height: 10000px;
 }
 
 #tools-panel {
@@ -27,20 +37,18 @@ body {
   align-items: center;
 }
 
+.spacer {
+  flex: 1;
+}
+
 #connected-room-info {
   color: white;
   display: flex;
   align-items: center;
   background-color: #4f4f4fb7;
   border-radius: 4px;
-  margin-left: 8px;
   justify-content: center;
-  height: 44px;
-}
-
-#connected-room-info:hover {
-  background-color: #4f4f4f !important;
-  transition-duration: 0.4s;
+  padding: 0.75em;
 }
 
 button.selected {
@@ -73,7 +81,7 @@ button.selected {
   cursor: pointer;
   border-radius: 4px;
   transition-duration: 0.4s;
-  height: 100%;
+  height: 36px;
   width: 36px;
 }
 
@@ -267,9 +275,13 @@ button.selected {
   border: none;
   cursor: pointer;
   border-radius: 4px;
+  width: 78px;
+  height: 36px;
+  white-space: nowrap;
+  overflow: hidden;
 }
 
-#pen-tool {
+.selectable-tool {
   background-color: #2f2f2f;
   color: white;
   padding: 10px;
@@ -277,27 +289,89 @@ button.selected {
   border: none;
   cursor: pointer;
   border-radius: 50%;
-  margin-right: 8px;
 }
 
-#pen-tool:hover {
+.selectable-tool:hover {
   background-color: #4f4f4f !important;
   transition-duration: 0.4s;
 }
 
+#pen-tool {
+  width: 39px;
+  height: 39px;
+  margin-right: 8px;
+}
+
+#pen-tool > i {
+  padding: 0 1.5px;
+}
+
 #eraser-tool {
-  background-color: #2f2f2f;
-  color: white;
-  padding: 10px;
-  font-size: 16px;
-  border: none;
-  cursor: pointer;
-  border-radius: 50%;
+  width: 39px;
+  height: 39px;
+  margin-right: 8px;
 }
 
-#eraser-tool:hover {
-  background-color: #4f4f4f !important;
-  transition-duration: 0.4s;
+#eraser-tool > i {
+  padding: 0 1.5px;
+}
+
+#dragging-tool {
+  width: 39px;
+  height: 39px;
+  margin-right: 8px;
+}
+
+#dragging-tool > i {
+  padding: 0 2.5px;
+}
+
+#canvas-center {
+  width: 39px;
+  height: 39px;
+  margin-right: 8px;
+}
+
+#canvas-center > i {
+  padding: 0 1.5px;
+}
+
+#recognition-mode {
+  width: 39px;
+  height: 39px;
+  margin-right: 8px;
+}
+
+#recognition-mode > i {
+  padding: 0 2.5px;
+}
+
+#undo-tool {
+  width: 39px;
+  height: 39px;
+  margin-right: 8px;
+}
+
+#undo-tool.disabled {
+  display: none;
+}
+
+#undo-tool > i {
+  padding: 0 2.5px;
+}
+
+#fast-undo-tool {
+  width: 39px;
+  height: 39px;
+  margin-right: 8px;
+}
+
+#fast-undo-tool.disabled {
+  display: none;
+}
+
+#fast-undo-tool > i {
+  padding: 0 1.5px;
 }
 
 .properties {
@@ -547,16 +621,21 @@ button.selected {
   align-items: center;
   background-color: #4f4f4fb7;
   border-radius: 4px;
-}
-
-#user-avatar:hover {
-  background-color: #4f4f4f !important;
-  transition-duration: 0.4s;
+  margin-left: 0.75em;
+  padding: 0 0.75em 0 0;
 }
 
 #status-info {
   display: flex;
   align-items: center;
   justify-content: right;
-  width: 100%;
+}
+
+#imperial-logo {
+    background-color: white;
+    display: flex;
+    align-items: center;
+    border-radius: 4px;
+    margin-left: 0.75em;
+    padding: 0;
 }