refactor: move _lastCoords to the DOM events

Author: HarshKhandeparkar

src/renderers/RealDrawBoard/RealDrawBoard.ts

@@ -104,11 +104,13 @@ export class RealDrawBoard extends RealRenderer {
       this.canvas.addEventListener('mousemove', this._mouseMoveEventListener);
 
       if (this._currentSnapshotIndex < this._snapshots.length - 1 && this._maxSnapshots > 0) this._snapshots.splice(this._currentSnapshotIndex + 1); // Delete all redo snapshots
+      const coords = this._getMouseCoords(e);
 
       this._startStroke(
-        this._getMouseCoords(e),
+        coords,
         'mouse'
       )
+      this._lastCoords.set('mouse', coords);
     }
   }
 
@@ -118,7 +120,10 @@ export class RealDrawBoard extends RealRenderer {
       this.canvas.removeEventListener('mousemove', this._mouseMoveEventListener);
       this._removeDOMEvents();
 
-      if(this._lastCoords.has('mouse')) this._endStroke(endCoords, 'mouse');
+      if(this._lastCoords.has('mouse')) {
+        this._endStroke(endCoords, 'mouse');
+        this._lastCoords.delete('mouse');
+      }
 
       this._display(this.graphPixels);
 
@@ -140,6 +145,7 @@ export class RealDrawBoard extends RealRenderer {
     if(this._lastCoords.has('mouse')) {
       this._removeDOMEvents();
       this._endStroke(this._getMouseCoords(e), 'mouse');
+      this._lastCoords.delete('mouse');
       this._display(this.graphPixels);
 
       setTimeout(() => { // Delay to let the canvas 'settle'
@@ -157,6 +163,7 @@ export class RealDrawBoard extends RealRenderer {
   _mouseMoveEventListener = (e: MouseEvent) => {
     const coords = this._getMouseCoords(e);
     this._doStroke(coords, 'mouse');
+    this._lastCoords.set('mouse', coords);
   }
 
   _previewMouseMoveEventListener = (e: MouseEvent) => {
@@ -176,17 +183,26 @@ export class RealDrawBoard extends RealRenderer {
     for (let i = 0; i < e.touches.length; i++) {
       if (this._currentSnapshotIndex < this._snapshots.length - 1 && this._maxSnapshots > 0) this._snapshots.splice(this._currentSnapshotIndex + 1); // Delete all redo snapshots
 
+      const coords = this._getTouchCoords(e.touches.item(i));
       this._startStroke(
-        this._getTouchCoords(e.touches.item(i)),
+        coords,
         e.touches.item(i).identifier.toString()
       )
+      this._lastCoords.set(
+        e.touches.item(i).identifier.toString(),
+        coords
+      )
     }
   }
 
   _touchEndEventListener = (e: TouchEvent) => {
     for (let i = 0; i < e.changedTouches.length; i++) {
+      const coords = this._getTouchCoords(e.changedTouches.item(i));
       this._endStroke(
-        this._getTouchCoords(e.changedTouches.item(i)),
+        coords,
+        e.changedTouches.item(i).identifier.toString()
+      )
+      this._lastCoords.delete(
         e.changedTouches.item(i).identifier.toString()
       )
     }
@@ -204,10 +220,15 @@ export class RealDrawBoard extends RealRenderer {
 
   _touchMoveEventListener = (e: TouchEvent) => {
     for (let i = 0; i < e.touches.length; i++) {
+      const coords = this._getTouchCoords(e.touches.item(i));
       this._doStroke(
-        this._getTouchCoords(e.touches.item(i)),
+        coords,
         e.touches.item(i).identifier.toString()
       )
+      this._lastCoords.set(
+        e.touches.item(i).identifier.toString(),
+        coords
+      )
     }
   }
 

src/renderers/RealDrawBoard/tools/brush.ts

@@ -10,8 +10,6 @@ export function _startStroke(
 ) {
   this._doPreview = false;
   this._plot(coords[0], coords[1], this.brushSize, this.brushColor);
-
-  this._lastCoords.set(identifier, coords);
 }
 
 export function _endStroke(
@@ -20,9 +18,6 @@ export function _endStroke(
   identifier: string
 ) {
   this._plot(endCoords[0], endCoords[1], this.brushSize, this.brushColor);
-
-  this._lastCoords.delete(identifier);
-
   this._doPreview = true;
 }
 
@@ -33,8 +28,6 @@ export function _doStroke(
 ) {
   this._plot(coords[0], coords[1], this.brushSize, this.brushColor);
   this._stroke(coords[0], coords[1], this.brushSize, this.brushColor, identifier);
-
-  this._lastCoords.set(identifier, coords);
 }
 
 export function _toolPreview(

src/renderers/RealDrawBoard/tools/eraser.ts

@@ -10,8 +10,6 @@ export function _startStroke(
 ) {
   this._doPreview = false;
   this._plot(coords[0], coords[1], this.eraserSize, this.bgColor);
-
-  this._lastCoords.set(identifier, coords);
 }
 
 export function _endStroke(
@@ -21,8 +19,6 @@ export function _endStroke(
 ) {
   this._doPreview = true;
   this._plot(endCoords[0], endCoords[1], this.eraserSize, this.bgColor);
-
-  this._lastCoords.delete(identifier);
 }
 
 export function _doStroke(
@@ -32,8 +28,6 @@ export function _doStroke(
 ) {
   this._plot(coords[0], coords[1], this.eraserSize, this.bgColor);
   this._stroke(coords[0], coords[1], this.eraserSize, this.bgColor, identifier);
-
-  this._lastCoords.set(identifier, coords);
 }
 
 export function _toolPreview(

src/renderers/RealDrawBoard/tools/line.ts

@@ -14,8 +14,6 @@ export function _startStroke(
   identifier: string
 ) {
   this._plot(coords[0], coords[1], this.brushSize, this.brushColor);
-
-  this._lastCoords.set(identifier, coords);
   _startCoords.set(identifier, coords);
 }
 
@@ -32,8 +30,6 @@ export function _endStroke(
     this.brushColor
   )
   this._plot(endCoords[0], endCoords[1], this.brushSize, this.brushColor);
-
-  this._lastCoords.delete(identifier);
   _startCoords.delete(identifier);
 }
 
@@ -42,7 +38,6 @@ export function _doStroke(
   coords: [number, number],
   identifier: string
 ) {
-  this._lastCoords.set(identifier, coords);
 }
 
 export function _toolPreview(