fix: movable point coordX

junyiacademy · May 15, 2024 · 88579fd · 88579fd
1 parent 4c92db7
commit 88579fd
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git 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
@@ -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;
         };