Drawing recognized upcoming before converting

src/app.js

@@ -130,7 +130,7 @@ const onRoomConnect = (room_) => {
 
   room.addEventListener("addOrUpdatePath", ({ detail: { id, points } }) => {
     canvas.renderPath(id, points, room.erasureIntervals)
-    //drawRecognized(id, points)
+    drawRecognizedUpcoming(points)
   })
 
   room.addEventListener(
@@ -145,35 +145,67 @@ const onRoomConnect = (room_) => {
   )
 }
 
-const mp = (x, y) => [x, y, 1, "black"]
-const r = []
-function drawRecognized(pathID, points) {
-  if (r.includes(pathID)) return
-  console.log(123)
+const mp = (x, y) => [x, y, 1, "#00000033"]
+
+function attributedPoint(x, y, pressure = 0) {
+  return [
+    x,
+    y,
+    toolSelection.getStrokeRadius() * getPressureFactor(pressure),
+    toolSelection.getStrokeColour(),
+  ]
+}
+
+function getRecognizedShapePoints(points) {
   const recognizedShape = recognizeFromPoints(points)
   if (recognizedShape.shape === Shapes.line) {
     console.log(recognizedShape)
     const [x, y] = points[0]
     const a = (recognizedShape.angle * Math.PI) / 180
-    const [x0, y0] = [x - 2000 * Math.cos(a), y + 2000 * Math.sin(a)]
-    const [x1, y1] = [x + 2000 * Math.cos(a), y - 2000 * Math.sin(a)]
-    canvas.renderPath("lastRecognizedLine", [mp(x0, y0), mp(x1, y1)])
+    const p1 = [x - 2000 * Math.cos(a), y + 2000 * Math.sin(a)]
+    const p2 = [x + 2000 * Math.cos(a), y - 2000 * Math.sin(a)]
+    return [p1, p2]
   } else if (recognizedShape.shape === Shapes.rectangle) {
     console.log(recognizedShape)
-    r.push(pathID)
-    canvas.renderPath(
-      "lastRecognizedLine",
-      recognizedShape.boundingPoints.map((x) => mp(...x)),
-    )
-    room.setInvisible(pathID)
-    recognizedShape.boundingPoints.forEach((point) =>
-      room.extendPath(pathID, mp(...point)),
-    )
+    return recognizedShape.boundingPoints
+  }
+  return undefined
+}
+
+const LAST_RECOGNIZED_PATH_ID = "LSP"
+
+function drawIfRecognized(points, callback, notRecCallback) {
+  const recognizedPoints = getRecognizedShapePoints(points)
+  if (recognizedPoints) {
+    callback(recognizedPoints)
   } else {
-    canvas.renderPath("lastRecognizedLine", [])
+    notRecCallback()
   }
 }
 
+function clearRecognizedUpcoming() {
+  canvas.renderPath(LAST_RECOGNIZED_PATH_ID, [])
+}
+
+function drawRecognizedUpcoming(points) {
+  drawIfRecognized(
+    points,
+    (recognizedPoints) =>
+      canvas.renderPath(
+        LAST_RECOGNIZED_PATH_ID,
+        recognizedPoints.map((x) => mp(...x)),
+      ),
+    clearRecognizedUpcoming,
+  )
+}
+
+function drawRecognized(pathID, points) {
+  drawIfRecognized(points, (newPoints) =>
+    room.replacePath(pathID, newPoints.map((x) => attributedPoint(...x))),
+  )
+  clearRecognizedUpcoming()
+}
+
 const tryRoomConnect = async (roomID) => {
   return await connect(roomID)
     .then(onRoomConnect)
@@ -269,10 +301,10 @@ const updateOverallStatusIcon = () => {
 
 canvas.input.addEventListener("strokestart", ({ detail: e }) => {
   e.preventDefault()
+  clearRecognizedUpcoming()
   if (room == null) {
     return
   }
-  console.log(pathIDsByPointerID)
   const currentTool = toolSelection.getTool()
   const mousePos = [e.offsetX, e.offsetY]
   if (currentTool == toolSelection.Tools.PEN) {
@@ -295,13 +327,10 @@ canvas.input.addEventListener("strokestart", ({ detail: e }) => {
 })
 
 canvas.input.addEventListener("strokeend", ({ detail: e }) => {
-  console.log(12331)
-  console.log(12331)
-  console.log(12331)
-
   const pathID = pathIDsByPointerID.get(e.pointerId)
   drawRecognized(pathID, room.getPoints(pathID))
-  //pathIDsByPointerID.delete(e.pointerId)
+  pathIDsByPointerID.delete(e.pointerId)
+  clearRecognizedUpcoming()
 })
 
 canvas.input.addEventListener("strokemove", ({ detail: e }) => {
@@ -311,12 +340,10 @@ canvas.input.addEventListener("strokemove", ({ detail: e }) => {
   const currentTool = toolSelection.getTool()
   const mousePos = [e.offsetX, e.offsetY]
   if (currentTool == toolSelection.Tools.PEN) {
-    console.log(pathIDsByPointerID.get(e.pointerId))
-    room.extendPath(pathIDsByPointerID.get(e.pointerId), [
-      ...mousePos,
-      toolSelection.getStrokeRadius() * getPressureFactor(e.pressure),
-      toolSelection.getStrokeColour(),
-    ])
+    room.extendPath(
+      pathIDsByPointerID.get(e.pointerId),
+      attributedPoint(...mousePos, e.pressure),
+    )
   } else if (currentTool == toolSelection.Tools.ERASER) {
     eraseEverythingAtPosition(
       mousePos[0],

src/room.js

@@ -63,7 +63,7 @@ class Room extends EventTarget {
     })
   }
 
-  setInvisible(pathID) {
+  replacePath(pathID, newPoints) {
     const self = this
 
     // eslint-disable-next-line require-yield
@@ -77,6 +77,7 @@ class Room extends EventTarget {
         return
       }
 
+      newPoints.forEach((point) => self.extendPath(pathID, point))
       self.shared.eraseIntervals.set(pathID, postJSON)
     })
   }