WIP: intuitive erasing

public/cursor.svg

+<svg viewBox="-2 -2 6 6" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="2" cy="2" r="2"/>
+</svg>
\ No newline at end of file

public/styles.css

 html,
 body {
   height: 100%;
+  cursor: crosshair;
 }
 
 body {

src/app.js

@@ -18,7 +18,53 @@ const tools = {
 
 const STROKECOLOUR = "blue"
 const STROKERADIUS = 2
-const ERASERRADIUS = STROKERADIUS * 2
+const ERASERRADIUS = STROKERADIUS * 5
+
+function interpolatedCoordinate(start, end, length) {
+  const dx = end[0] - start[0]
+  const dy = end[1] - start[1]
+  const dist = getDistance(start, end)
+  const ratio = length / dist
+  return [start[0] + dx * ratio, start[1] + dy * ratio]
+}
+
+function eraseAt(x, y, room) {
+  let mousePos = [x, y]
+  room.getPaths().forEach((points, pathID) => {
+    points.forEach((point, i) => {
+      const distanceToPoint = getDistance(mousePos, point)
+      if (distanceToPoint <= ERASERRADIUS) {
+        room.erasePoint(pathID, i)
+
+        let prev, next
+        if (i > 0) {
+          prev = i - 1
+        }
+        if (i < points.length - 1) {
+          next = i + 1
+        }
+
+        if (prev !== undefined) {
+          const interpolatedPoint = interpolatedCoordinate(
+            point,
+            points[prev],
+            ERASERRADIUS,
+          )
+          room.insertIntoPath(pathID, prev, interpolatedPoint)
+        }
+
+        if (next !== undefined) {
+          const interpolatedPoint = interpolatedCoordinate(
+            point,
+            points[next],
+            ERASERRADIUS,
+          )
+          room.insertIntoPath(pathID, next, interpolatedPoint)
+        }
+      }
+    })
+  })
+}
 
 const addOrUpdatePathElem = (pathElems, id, points) => {
   let pathElem = pathElems.get(id)
@@ -90,9 +136,7 @@ const addOrUpdatePathElem = (pathElems, id, points) => {
 }
 
 const getDistance = (a, b) => {
-  return Math.sqrt(
-    (a[0] - b[0]) * (a[0] - b[0]) + (a[1] - b[1]) * (a[1] - b[1]),
-  )
+  return Math.sqrt((a[0] - b[0]) ** 2 + (a[1] - b[1]) ** 2)
 }
 
 function setElemVisible(elem, visible = true) {
@@ -158,7 +202,7 @@ function handleRoomConnectionEstablished(room) {
     addOrUpdatePathElem(pathElems, id, points)
   })
 
-  let currentTool = tools.PEN
+  let currentTool = tools.ERASER
   const pathIDsByPointerID = new Map()
 
   const canvasOnPointerEnter = (e) => {
@@ -171,13 +215,7 @@ function handleRoomConnectionEstablished(room) {
     if (currentTool == tools.PEN) {
       pathIDsByPointerID.set(e.pointerId, room.addPath(mousePos))
     } else if (currentTool == tools.ERASER) {
-      room.getPaths().forEach((points, pathID) => {
-        points.forEach((point, i) => {
-          if (getDistance(mousePos, point) <= ERASERRADIUS) {
-            room.erasePoint(pathID, i)
-          }
-        })
-      })
+      eraseAt(mousePos[0], mousePos[1], room)
     }
   }
 
@@ -263,6 +301,11 @@ function handleRoomConnectionEstablished(room) {
     handleRoomConnectClick()
   }
   HTML.roomConnectButton.addEventListener("click", roomConnectButtonOnClick)
+
+  let pid = room.addPath([100, 100])
+  room.extendPath(pid, [100, 100])
+  room.extendPath(pid, [150, 150])
+  room.extendPath(pid, [100, 200])
 }
 
 function handleRoomConnectionError(err) {

src/room.js

@@ -29,7 +29,19 @@ class Room extends EventTarget {
     return id
   }
 
+  insertIntoPath(id, index, [x, y]) {
+    console.log("Inserting path with", index, [x, y])
+
+    console.log(this._y.share.strokeAdd.get(id))
+
+    this._y.share.strokeAdd.get(id).insert(index, [[x, y]])
+  }
+
   extendPath(id, [x, y]) {
+    console.log("Extending path with", [x, y])
+
+    console.log(this._y.share.strokeAdd.get(id))
+
     this._y.share.strokeAdd.get(id).push([[x, y]])
   }