fix: freehand points (#4031)

Co-authored-by: dwelle <luzar.david@gmail.com>

src/components/App.tsx

@@ -686,7 +686,7 @@ class App extends React.Component<AppProps, AppState> {
       if (initialData?.libraryItems) {
         this.libraryItemsFromStorage = initialData.libraryItems;
       }
-    } catch (error) {
+    } catch (error: any) {
       console.error(error);
       initialData = {
         appState: {
@@ -1400,7 +1400,7 @@ class App extends React.Component<AppProps, AppState> {
         await webShareTargetCache.delete("shared-file");
         window.history.replaceState(null, APP_NAME, window.location.pathname);
       }
-    } catch (error) {
+    } catch (error: any) {
       this.setState({ errorMessage: error.message });
     }
   };
@@ -3494,6 +3494,7 @@ class App extends React.Component<AppProps, AppState> {
         mutateElement(draggingElement, {
           points: [...points, [dx, dy]],
           pressures,
+          lastCommittedPoint: [dx, dy],
         });
 
         this.actionManager.executeAction(actionFinalize);
@@ -3839,7 +3840,7 @@ class App extends React.Component<AppProps, AppState> {
             // but can be safely ignored on older releases.
             const item = event.dataTransfer.items[0];
             (file as any).handle = await (item as any).getAsFileSystemHandle();
-          } catch (error) {
+          } catch (error: any) {
             console.warn(error.name, error.message);
           }
         }
@@ -3859,7 +3860,7 @@ class App extends React.Component<AppProps, AppState> {
         });
         return;
       }
-    } catch (error) {
+    } catch (error: any) {
       return this.setState({
         isLoading: false,
         errorMessage: error.message,
@@ -3899,7 +3900,7 @@ class App extends React.Component<AppProps, AppState> {
           // but can be safely ignored on older releases.
           const item = event.dataTransfer.items[0];
           (file as any).handle = await (item as any).getAsFileSystemHandle();
-        } catch (error) {
+        } catch (error: any) {
           console.warn(error.name, error.message);
         }
       }

src/element/collision.ts

@@ -328,15 +328,15 @@ const hitTestFreeDrawElement = (
   let P: readonly [number, number];
 
   // For freedraw dots
-  if (element.points.length === 2) {
-    return (
-      distance2d(A[0], A[1], x, y) < threshold ||
-      distance2d(B[0], B[1], x, y) < threshold
-    );
+  if (
+    distance2d(A[0], A[1], x, y) < threshold ||
+    distance2d(B[0], B[1], x, y) < threshold
+  ) {
+    return true;
   }
 
   // For freedraw lines
-  for (let i = 1; i < element.points.length - 1; i++) {
+  for (let i = 0; i < element.points.length; i++) {
     const delta = [B[0] - A[0], B[1] - A[1]];
     const length = Math.hypot(delta[1], delta[0]);
 

src/renderer/renderElement.ts

@@ -804,7 +804,7 @@ export function getFreeDrawSvgPath(element: ExcalidrawFreeDrawElement) {
     smoothing: 0.5,
     streamline: 0.5,
     easing: (t) => Math.sin((t * Math.PI) / 2), // https://easings.net/#easeOutSine
-    last: false,
+    last: !!element.lastCommittedPoint, // LastCommittedPoint is added on pointerup
   };
 
   return getSvgPathFromStroke(getStroke(inputPoints as number[][], options));
@@ -839,5 +839,5 @@ function getSvgPathFromStroke(points: number[][]): string {
       ["M", points[0], "Q"],
     )
     .join(" ")
-    .replaceAll(TO_FIXED_PRECISION, "$1");
+    .replace(TO_FIXED_PRECISION, "$1");
 }

src/tests/__snapshots__/regressionTests.test.tsx.snap

@@ -6707,7 +6707,10 @@ Object {
   "height": 10,
   "id": "id7",
   "isDeleted": false,
-  "lastCommittedPoint": null,
+  "lastCommittedPoint": Array [
+    50,
+    10,
+  ],
   "opacity": 100,
   "points": Array [
     Array [
@@ -8374,7 +8377,10 @@ Object {
           "height": 10,
           "id": "id7",
           "isDeleted": false,
-          "lastCommittedPoint": null,
+          "lastCommittedPoint": Array [
+            50,
+            10,
+          ],
           "opacity": 100,
           "points": Array [
             Array [
@@ -10533,7 +10539,10 @@ Object {
   "height": 10,
   "id": "id0",
   "isDeleted": false,
-  "lastCommittedPoint": null,
+  "lastCommittedPoint": Array [
+    10,
+    10,
+  ],
   "opacity": 100,
   "points": Array [
     Array [
@@ -10607,7 +10616,10 @@ Object {
           "height": 10,
           "id": "id0",
           "isDeleted": false,
-          "lastCommittedPoint": null,
+          "lastCommittedPoint": Array [
+            10,
+            10,
+          ],
           "opacity": 100,
           "points": Array [
             Array [
@@ -11637,7 +11649,10 @@ Object {
   "height": 10,
   "id": "id0",
   "isDeleted": false,
-  "lastCommittedPoint": null,
+  "lastCommittedPoint": Array [
+    10,
+    10,
+  ],
   "opacity": 100,
   "points": Array [
     Array [
@@ -11711,7 +11726,10 @@ Object {
           "height": 10,
           "id": "id0",
           "isDeleted": false,
-          "lastCommittedPoint": null,
+          "lastCommittedPoint": Array [
+            10,
+            10,
+          ],
           "opacity": 100,
           "points": Array [
             Array [