fix(drawing): Moved creation of point timestamps from JS to UI thread

https://mindlogger.atlassian.net/browse/M2-4920
ChildMindInstitute · Feb 7, 2024 · cfbfe49 · cfbfe49
1 parent 6701295
commit cfbfe49
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 24 deletions.
diff --git a/src/entities/drawer/ui/DrawingBoard.tsx b/src/entities/drawer/ui/DrawingBoard.tsx
@@ -43,8 +43,8 @@ const DrawingBoard: FC<Props> = props => {
     points: [],
   });
 
-  const onTouchStart = (x: number, y: number) => {
-    const drawPoint = new DrawPoint(x, y);
+  const onTouchStart = (x: number, y: number, time: number) => {
+    const drawPoint = new DrawPoint(x, y, time);
 
     drawingValueLineRef.current = {
       startTime: Date.now(),
@@ -54,8 +54,8 @@ const DrawingBoard: FC<Props> = props => {
     onLog(drawPoint.scale(vector));
   };
 
-  const onTouchProgress = (x: number, y: number) => {
-    const drawPoint = new DrawPoint(x, y);
+  const onTouchProgress = (x: number, y: number, time: number) => {
+    const drawPoint = new DrawPoint(x, y, time);
 
     drawingValueLineRef.current.points.push(drawPoint);
 

diff --git a/src/shared/ui/SketchCanvas/DrawingGesture.ts b/src/shared/ui/SketchCanvas/DrawingGesture.ts
@@ -11,8 +11,12 @@ type Refs = {
 };
 
 type Callbacks = {
-  onTouchStart: (touchInfo: Point) => void;
-  onTouchProgress: (touchInfo: Point, straightLine: boolean) => void;
+  onTouchStart: (touchInfo: Point, time: number) => void;
+  onTouchProgress: (
+    touchInfo: Point,
+    straightLine: boolean,
+    time: number,
+  ) => void;
   onTouchEnd: () => void;
 };
 
@@ -76,19 +80,20 @@ function DrawingGesture(
         }
       })
       .onBegin(event => {
-        runOnJS(onTouchStart)(event);
+        runOnJS(onTouchStart)(event, Date.now());
       })
       .onTouchesMove((event, manager) => {
         const touchData = event.allTouches[0];
+        const time = Date.now();
 
         if (isOutOfCanvas(touchData)) {
           const finalPoint = normalizeCoordinates(touchData);
 
-          runOnJS(onTouchProgress)(finalPoint, true);
+          runOnJS(onTouchProgress)(finalPoint, true, time);
 
           manager.end();
         } else {
-          runOnJS(onTouchProgress)(touchData, false);
+          runOnJS(onTouchProgress)(touchData, false, time);
         }
       })
       .onFinalize(() => {
@@ -99,19 +104,20 @@ function DrawingGesture(
     Gesture.Pan()
       .maxPointers(1)
       .onBegin(event => {
-        runOnJS(onTouchStart)(event);
+        runOnJS(onTouchStart)(event, Date.now());
       })
       .onTouchesMove((event, manager) => {
         const touchData = event.allTouches[0];
+        const time = Date.now();
 
         if (isOutOfCanvas(touchData)) {
           const finalPoint = normalizeCoordinates(touchData);
 
-          runOnJS(onTouchProgress)(finalPoint, true);
+          runOnJS(onTouchProgress)(finalPoint, true, time);
 
           manager.end();
         } else {
-          runOnJS(onTouchProgress)(touchData, false);
+          runOnJS(onTouchProgress)(touchData, false, time);
         }
       })
       .onFinalize(() => {

diff --git a/src/shared/ui/SketchCanvas/SketchCanvas.tsx b/src/shared/ui/SketchCanvas/SketchCanvas.tsx
@@ -23,8 +23,8 @@ export type SketchCanvasRef = {
 type Props = {
   initialLines: Array<Point[]>;
   width: number;
-  onStrokeStart: (x: number, y: number) => void;
-  onStrokeChanged: (x: number, y: number) => void;
+  onStrokeStart: (x: number, y: number, time: number) => void;
+  onStrokeChanged: (x: number, y: number, time: number) => void;
   onStrokeEnd: () => void;
 };
 
@@ -53,17 +53,17 @@ const SketchCanvas = forwardRef<SketchCanvasRef, Props>((props, ref) => {
   });
 
   const onTouchStart = useCallback(
-    (touchInfo: Point) => {
+    (touchInfo: Point, time: number) => {
       const path = lineSketcher.createLine(touchInfo);
 
       canvasRef.current?.setPaths(currentPaths => [...currentPaths, path]);
-      callbacksRef.current.onStrokeStart(touchInfo.x, touchInfo.y);
+      callbacksRef.current.onStrokeStart(touchInfo.x, touchInfo.y, time);
     },
     [callbacksRef, lineSketcher],
   );
 
   const onTouchProgress = useCallback(
-    (touchInfo: Point, straightLine: boolean) => {
+    (touchInfo: Point, straightLine: boolean, time: number) => {
       const lastDrawnPoint = lineSketcher.getLastPoint();
 
       if (lastDrawnPoint) {
@@ -77,7 +77,7 @@ const SketchCanvas = forwardRef<SketchCanvasRef, Props>((props, ref) => {
         }
       }
 
-      callbacksRef.current.onStrokeChanged(touchInfo.x, touchInfo.y);
+      callbacksRef.current.onStrokeChanged(touchInfo.x, touchInfo.y, time);
 
       canvasRef.current?.setPaths(currentPaths => {
         const pathsCount = currentPaths.length;
@@ -99,8 +99,8 @@ const SketchCanvas = forwardRef<SketchCanvasRef, Props>((props, ref) => {
   );
 
   const createDot = useCallback(
-    (touchInfo: Point) => {
-      callbacksRef.current.onStrokeChanged(touchInfo.x, touchInfo.y);
+    (touchInfo: Point, time: number) => {
+      callbacksRef.current.onStrokeChanged(touchInfo.x, touchInfo.y, time);
 
       canvasRef.current?.setPaths(currentPaths => {
         const pathsCount = currentPaths.length;
@@ -118,10 +118,13 @@ const SketchCanvas = forwardRef<SketchCanvasRef, Props>((props, ref) => {
     if (lineSketcher.getCurrentShape() === Shape.Dot) {
       const firstPoint = lineSketcher.getFirstPoint() as Point;
 
-      createDot({
-        x: firstPoint.x + 1.5,
-        y: firstPoint.y + 1.5,
-      });
+      createDot(
+        {
+          x: firstPoint.x + 1.5,
+          y: firstPoint.y + 1.5,
+        },
+        Date.now(),
+      );
     }
 
     callbacksRef.current.onStrokeEnd();