Fixed rendering with deleted points

src/app.js

@@ -23,7 +23,7 @@ const tools = {
 
 const STROKECOLOUR = "blue"
 const STROKERADIUS = 2
-const ERASERRADIUS = STROKERADIUS * 8
+const ERASERRADIUS = STROKERADIUS * 10
 
 function interpolatedCoordinate(start, end, length) {
   const dx = end[0] - start[0]
@@ -36,36 +36,47 @@ function interpolatedCoordinate(start, end, length) {
 function eraseAt(x, y, room) {
   let mousePos = [x, y]
   room.getPaths().forEach((points, pathID) => {
+    const t = computeErasureIntervals(points, mousePos, ERASERRADIUS)
+    if (!TEST_ERASE_INTERVAL[pathID]) TEST_ERASE_INTERVAL[pathID] = {}
+    TEST_ERASE_INTERVAL[pathID] = combineErasureIntervals(
+      TEST_ERASE_INTERVAL[pathID],
+      t,
+    )
+    room.dispatchEvent(
+      new CustomEvent("addOrUpdatePath", {
+        detail: { id: pathID, points },
+      }),
+    )
     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)
-        }
+        // 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)
+        // }
       }
     })
   })
@@ -82,7 +93,7 @@ const SVG = {
   },
 }
 
-let TEST_ERASE_INTERVAL = { 0: [[0.1, 0.3], [0.4, 0.8]] }
+let TEST_ERASE_INTERVAL = {} // { 0: [[0.1, 0.3], [0.4, 0.8]] }
 
 function erasurePoints(pointA, pointB, start, fin) {
   if (start >= fin) return
@@ -166,8 +177,15 @@ const addOrUpdatePathElem = (pathElems, id, points) => {
     // Valid point inside a subpath
     subPath.push(point)
 
-    const eraseIntervals = TEST_ERASE_INTERVAL[i]
+    const eraseIntervalsForPath = TEST_ERASE_INTERVAL[id]
+    if (!eraseIntervalsForPath) continue
+    const eraseIntervals = TEST_ERASE_INTERVAL[id][i]
     if (!eraseIntervals) continue
+    if (i === points.length - 1) {
+      continue
+    }
+
+    const nextPoint = points[i + 1]
 
     for (const eraseInterval of eraseIntervals) {
       if (eraseInterval) {
@@ -176,18 +194,14 @@ const addOrUpdatePathElem = (pathElems, id, points) => {
           toAdd = undefined
         }
 
-        if (i === points.length - 1) {
-          continue
-        }
-
-        const nextPoint = points[i + 1]
-
-        const [start, fin] = erasurePoints(
+        const erp = erasurePoints(
           point,
           nextPoint,
           eraseInterval[0],
           eraseInterval[1],
         )
+        if (!(erp && erp.length)) continue
+        const [start, fin] = erp
 
         subPath.push(start)
 
@@ -302,20 +316,7 @@ function handleRoomConnectionEstablished(room) {
     if (currentTool == tools.PEN) {
       room.extendPath(pathIDsByPointerID.get(e.pointerId), mousePos)
     } else if (currentTool == tools.ERASER) {
-      room.getPaths().forEach((points, pathID) => {
-        const t = computeErasureIntervals(points, mousePos, ERASERRADIUS)
-        TEST_ERASE_INTERVAL = combineErasureIntervals(TEST_ERASE_INTERVAL, t)
-        room.dispatchEvent(
-          new CustomEvent("addOrUpdatePath", {
-            detail: { id: pathID, points },
-          }),
-        )
-        points.forEach((point, i) => {
-          if (getDistance(mousePos, point) <= ERASERRADIUS) {
-            room.erasePoint(pathID, i)
-          }
-        })
-      })
+      eraseAt(e.offsetX, e.offsetY, room)
     }
   }
 
@@ -379,8 +380,10 @@ function handleRoomConnectionEstablished(room) {
   HTML.roomConnectButton.addEventListener("click", roomConnectButtonOnClick)
 
   let pid = room.addPath([100, 100])
-  room.extendPath(pid, [150, 150])
-  room.extendPath(pid, [100, 200])
+  room.extendPath(pid, [110, 105])
+  room.extendPath(pid, [120, 100])
+  room.extendPath(pid, [130, 105])
+  room.extendPath(pid, [140, 100])
 }
 
 function handleRoomConnectionError(err) {

src/erasure.js

@@ -3,7 +3,7 @@ function distance([x1, y1], [x2, y2]) {
 }
 
 function sqr(x) {
-  return x * x
+  return x ** 2
 }
 
 function dist2(v, w) {
@@ -63,7 +63,7 @@ function cap1(x) {
 }
 
 function erasureInterval(lineStart, lineEnd, erasureCenter, erasureRadius) {
-  const [cx, cy] = interpolate(
+  const projectionPoint = interpolate(
     lineStart,
     lineEnd,
     project(lineStart, lineEnd, erasureCenter),
@@ -72,9 +72,10 @@ function erasureInterval(lineStart, lineEnd, erasureCenter, erasureRadius) {
   const halfLength = Math.sqrt(erasureRadius ** 2 - d ** 2)
   const lineLength = distance(lineStart, lineEnd)
 
-  const touchFromStartDist = distance(lineStart, [cx, cy])
+  const touchFromStartDist = distance(lineStart, projectionPoint)
   const touchBeginFromStarDist = touchFromStartDist - halfLength
   const touchEndFromStarDist = touchFromStartDist + halfLength
+
   return [
     cap0(touchBeginFromStarDist / lineLength),
     cap1(touchEndFromStarDist / lineLength),