From 88579fddcaba839d6e913b384615993703065eda Mon Sep 17 00:00:00 2001
From: Kim716 <yichen.hsieh_c7_alumni@teach4taiwan.org>
Date: Wed, 15 May 2024 17:49:47 +0800
Subject: [PATCH] fix: movable point coordX

---
 packages/package.json                    |  2 +-
 packages/perseus/src/util/interactive.ts | 22 +++++++++++++++++++---
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/packages/package.json b/packages/package.json
index b4503fb17f..aa166b305f 100644
--- a/packages/package.json
+++ b/packages/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@junyiacademy/perseus-core",
-  "version": "1.0.34",
+  "version": "1.0.35",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",
diff --git a/packages/perseus/src/util/interactive.ts b/packages/perseus/src/util/interactive.ts
index 90f6a2616d..bdca5d4af0 100644
--- a/packages/perseus/src/util/interactive.ts
+++ b/packages/perseus/src/util/interactive.ts
@@ -622,9 +622,12 @@ _.extend(GraphUtils.Graphie.prototype, {
                 },
                 vertexLabel: "",
                 mouseTarget: null,
+                start: 0,
+                end: 10,
             },
             options,
         );
+        let initialX = movablePoint.coord[0];
 
         const normalColor = movablePoint.constraints.fixed
             ? KhanColors.DYNAMIC
@@ -666,9 +669,23 @@ _.extend(GraphUtils.Graphie.prototype, {
 
             // snap coordinates to grid
             if (movablePoint.snapX !== 0) {
+                // 讓座標是根據移動起始點去計算，而非從 0
                 coordX =
-                    Math.round(coordX / movablePoint.snapX) *
-                    movablePoint.snapX;
+                    Math.round(
+                        (coordX - movablePoint.start) / movablePoint.snapX,
+                    ) *
+                        movablePoint.snapX +
+                    movablePoint.start;
+
+                coordX = coordX > movablePoint.end ? movablePoint.end : coordX;
+                coordX =
+                    coordX < movablePoint.start ? movablePoint.start : coordX;
+
+                // 即便點的初始位置不在可以拖動的路徑上，仍先可以放置於上面，避免使用者困惑，拖動後就只能放置在安排好的位置
+                if (initialX !== null) {
+                    coordX = initialX;
+                    initialX = null;
+                }
             }
             if (movablePoint.snapY !== 0) {
                 coordY =
@@ -723,7 +740,6 @@ _.extend(GraphUtils.Graphie.prototype, {
                     graph.range[1][1] - mouseY / graph.scale[1],
                 );
             }
-
             const result = movablePoint.applyConstraint([coordX, coordY]);
             return result;
         };