From c6c41cab9f7efe1665ee5a349323c230ded324d5 Mon Sep 17 00:00:00 2001
From: Yuriy Maksymets <iurii.maksymets@gmail.com>
Date: Thu, 14 Nov 2019 23:15:42 +0000
Subject: [PATCH] Fixed stroke end events, recognize on stroke end

---
 src/app.js    | 26 +++++++++++++++++++++-----
 src/canvas.js |  7 +++++--
 src/room.js   | 22 ++++++++++++++++++++++
 3 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/src/app.js b/src/app.js
index db3f5fe..5edb579 100644
--- a/src/app.js
+++ b/src/app.js
@@ -130,7 +130,7 @@ const onRoomConnect = (room_) => {
 
   room.addEventListener("addOrUpdatePath", ({ detail: { id, points } }) => {
     canvas.renderPath(id, points, room.erasureIntervals)
-    drawRecognized(points)
+    //drawRecognized(id, points)
   })
 
   room.addEventListener(
@@ -145,9 +145,11 @@ const onRoomConnect = (room_) => {
   )
 }
 
-const mp = (x, y) => [x, y, 1, "black", true]
-
-function drawRecognized(points) {
+const mp = (x, y) => [x, y, 1, "black"]
+const r = []
+function drawRecognized(pathID, points) {
+  if (r.includes(pathID)) return
+  console.log(123)
   const recognizedShape = recognizeFromPoints(points)
   if (recognizedShape.shape === Shapes.line) {
     console.log(recognizedShape)
@@ -158,10 +160,15 @@ function drawRecognized(points) {
     canvas.renderPath("lastRecognizedLine", [mp(x0, y0), mp(x1, y1)])
   } 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)),
+    )
   } else {
     canvas.renderPath("lastRecognizedLine", [])
   }
@@ -261,9 +268,11 @@ const updateOverallStatusIcon = () => {
 }
 
 canvas.input.addEventListener("strokestart", ({ detail: e }) => {
+  e.preventDefault()
   if (room == null) {
     return
   }
+  console.log(pathIDsByPointerID)
   const currentTool = toolSelection.getTool()
   const mousePos = [e.offsetX, e.offsetY]
   if (currentTool == toolSelection.Tools.PEN) {
@@ -286,7 +295,13 @@ canvas.input.addEventListener("strokestart", ({ detail: e }) => {
 })
 
 canvas.input.addEventListener("strokeend", ({ detail: e }) => {
-  pathIDsByPointerID.delete(e.pointerId)
+  console.log(12331)
+  console.log(12331)
+  console.log(12331)
+
+  const pathID = pathIDsByPointerID.get(e.pointerId)
+  drawRecognized(pathID, room.getPoints(pathID))
+  //pathIDsByPointerID.delete(e.pointerId)
 })
 
 canvas.input.addEventListener("strokemove", ({ detail: e }) => {
@@ -296,6 +311,7 @@ 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),
diff --git a/src/canvas.js b/src/canvas.js
index 6aeaecc..3bfe608 100644
--- a/src/canvas.js
+++ b/src/canvas.js
@@ -270,12 +270,13 @@ export const clear = () => {
 }
 
 // Necessary since buttons property is non standard on iOS versions < 13.2
-const isValidPointerEvent = (e) => {
+const isValidPointerEvent = (e, name) => {
+  if (name === "strokeend") return true
   return e.buttons & 1 || e.pointerType === "touch"
 }
 
 const dispatchPointerEvent = (name) => (e) => {
-  if (isValidPointerEvent(e)) {
+  if (isValidPointerEvent(e, name)) {
     input.dispatchEvent(new CustomEvent(name, { detail: e }))
   }
 }
@@ -284,6 +285,8 @@ const dispatchPointerEvent = (name) => (e) => {
 canvas.addEventListener("pointerdown", dispatchPointerEvent("strokestart"))
 canvas.addEventListener("pointerenter", dispatchPointerEvent("strokestart"))
 canvas.addEventListener("pointerup", dispatchPointerEvent("strokeend"))
+canvas.addEventListener("onmouseup", dispatchPointerEvent("strokeend"))
+canvas.addEventListener("mouseup", dispatchPointerEvent("strokeend"))
 canvas.addEventListener("pointerleave", dispatchPointerEvent("strokeend"))
 canvas.addEventListener("pointermove", dispatchPointerEvent("strokemove"))
 canvas.addEventListener("touchmove", (e) => e.preventDefault())
diff --git a/src/room.js b/src/room.js
index f44fe68..37ba7fe 100644
--- a/src/room.js
+++ b/src/room.js
@@ -54,6 +54,24 @@ class Room extends EventTarget {
         [flattenErasureIntervals({ [pointID]: newIntervals })],
       )[0]
       const postJSON = JSON.stringify(combinedIntervals)
+      console.log(postJSON)
+      if (prevJSON == postJSON) {
+        return
+      }
+
+      self.shared.eraseIntervals.set(pathID, postJSON)
+    })
+  }
+
+  setInvisible(pathID) {
+    const self = this
+
+    // eslint-disable-next-line require-yield
+    this._y.db.requestTransaction(function* requestTransaction() {
+      const prevJSON = self.shared.eraseIntervals.get(pathID) || "[]"
+      const postJSON = JSON.stringify([
+        [0, self.shared.strokePoints.get(pathID).length],
+      ])
 
       if (prevJSON == postJSON) {
         return
@@ -73,6 +91,10 @@ class Room extends EventTarget {
     return paths
   }
 
+  getPoints(pathID) {
+    return this._generatePath(pathID)
+  }
+
   get shared() {
     return this._y.share
   }
-- 
GitLab