Add colour sync

src/app.js

@@ -160,7 +160,10 @@ canvas.input.addEventListener("strokestart", ({ detail: e }) => {
   const mousePos = [e.offsetX, e.offsetY]
 
   if (currentTool == tools.PEN) {
-    pathIDsByPointerID.set(e.pointerId, room.addPath([...mousePos, e.pressure]))
+    pathIDsByPointerID.set(
+      e.pointerId,
+      room.addPath([...mousePos, e.pressure, canvas.stroke_colour]),
+    )
   } else if (currentTool == tools.ERASER) {
     erasePoint(mousePos)
   }
@@ -181,6 +184,7 @@ canvas.input.addEventListener("strokemove", ({ detail: e }) => {
     room.extendPath(pathIDsByPointerID.get(e.pointerId), [
       ...mousePos,
       e.pressure,
+      canvas.stroke_colour,
     ])
   } else if (currentTool == tools.ERASER) {
     erasePoint(mousePos)

src/canvas.js

@@ -35,11 +35,13 @@ const createPathElem = (d, width) => {
 
 export const renderPath = (id, points) => {
   points = points.filter(([x]) => x != null)
+  var colour = ""
 
   // Split up points into completely non-erased segments.
   let segments = [[]]
   for (const point of points) {
-    if (point[3] != false) {
+    colour = point[3]
+    if (point[4] != false) {
       segments[segments.length - 1].push(point)
     } else {
       segments.push([])
@@ -59,7 +61,7 @@ export const renderPath = (id, points) => {
 
   if (pathGroupElem == null) {
     pathGroupElem = document.createElementNS(SVG_URL, "g")
-    pathGroupElem.setAttribute("stroke", stroke_colour)
+    pathGroupElem.setAttribute("stroke", colour)
     pathGroupElem.setAttribute("fill", "none")
     pathGroupElem.setAttribute("stroke-linecap", "round")
     pathGroupElem.setAttribute("pointer-events", "none")
@@ -73,7 +75,7 @@ export const renderPath = (id, points) => {
     if (subpath.length == 1) {
       const circleElem = document.createElementNS(SVG_URL, "circle")
       circleElem.setAttribute("stroke", "none")
-      circleElem.setAttribute("fill", stroke_colour)
+      circleElem.setAttribute("fill", colour)
       circleElem.setAttribute("cx", subpath[0][0])
       circleElem.setAttribute("cy", subpath[0][1])
       circleElem.setAttribute("r", getStrokeRadius(subpath[0][2]))
@@ -82,6 +84,7 @@ export const renderPath = (id, points) => {
       // Further split up segments based on thickness.
       const subpath_ = subpath.slice()
       let w = subpath_[0][2]
+      console.log(w)
       for (let i = 1; i < subpath_.length; i++) {
         if (subpath_[i][2] != w) {
           const d = lineFn([...subpath_.splice(0, i), subpath_[0]])

src/room.js

@@ -23,14 +23,14 @@ class Room extends EventTarget {
     this._y.destroy()
   }
 
-  addPath([x, y, w]) {
+  addPath([x, y, w, z]) {
     const id = uuidv4()
-    this._y.share.strokeAdd.set(id, Y.Array).push([[x, y, w]])
+    this._y.share.strokeAdd.set(id, Y.Array).push([[x, y, w, z]])
     return id
   }
 
-  extendPath(id, [x, y, w]) {
-    this._y.share.strokeAdd.get(id).push([[x, y, w]])
+  extendPath(id, [x, y, w, z]) {
+    this._y.share.strokeAdd.get(id).push([[x, y, w, z]])
   }
 
   getPaths() {
@@ -65,7 +65,7 @@ class Room extends EventTarget {
 
     return addSet
       .toArray()
-      .map((p = [], i) => [p[0], p[1], p[2], !eraseSet.get(i.toString())])
+      .map((p = [], i) => [p[0], p[1], p[2], p[3], !eraseSet.get(i.toString())])
   }
 
   inviteUser(id) {