From 6fd152e70e224bde24a7b7fb5d2df997ef5f0d81 Mon Sep 17 00:00:00 2001
From: ArjunGTX <arjun@usefindr.com>
Date: Thu, 2 Jan 2025 11:09:50 +0530
Subject: [PATCH] fix: limit the min and max value of point coordinates to 0
 and 1

---
 src/curve-generator.ts | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/curve-generator.ts b/src/curve-generator.ts
index efbf9e4..af9fdc8 100644
--- a/src/curve-generator.ts
+++ b/src/curve-generator.ts
@@ -40,6 +40,11 @@ export class CurveGenerator {
     this.draggingPoint = null;
   };
 
+  private clampCanvasCord = (cord: number) => {
+    // Clamp the coordinate to the range [0,1]
+    return Math.max(0, Math.min(1, cord));
+  };
+
   private updateCurve = (clientX: number, clientY: number) => {
     // Calculate the dragging point based on the mouse coordinates
     const point = this.calculateDraggingPoint(clientX, clientY);
@@ -50,12 +55,14 @@ export class CurveGenerator {
         ? "grab"
         : "default";
     // Update the curve control points based on the dragging point
+    const x = this.clampCanvasCord(point.x);
+    const y = this.clampCanvasCord(point.y);
     if (this.draggingPoint?.point === "p1") {
-      this.curve.x1 = point.x;
-      this.curve.y1 = point.y;
+      this.curve.x1 = x;
+      this.curve.y1 = y;
     } else if (this.draggingPoint?.point === "p2") {
-      this.curve.x2 = point.x;
-      this.curve.y2 = point.y;
+      this.curve.x2 = x;
+      this.curve.y2 = y;
     }
   };
 
@@ -66,7 +73,8 @@ export class CurveGenerator {
   private onTouchMove = (e: TouchEvent) => {
     const touch = e.touches[0];
     if (touch) {
-      if (this.draggingPoint) {
+      // Prevent default behavior to avoid interfering with touch scrolling and zooming if a point is being dragged
+      if (this.draggingPoint?.point) {
         e.preventDefault();
       }
       this.updateCurve(touch.clientX, touch.clientY);