feat: enhance axis locking behavior with snapping functionality in Dragger

packages/core/src/utils/Dragger.ts

@@ -221,19 +221,27 @@ export default class Dragger {
     this.lastScrollDiff = resetPos();
     let { lockedAxis } = this;
 
-    // @ts-ignore Lock one axis
+    // Handle axis locking when Shift key is pressed
-    if (ev.shiftKey) {
+    const isShiftKeyPressed = 'shiftKey' in ev && ev.shiftKey;
-      lockedAxis = !lockedAxis && this.detectAxisLock(delta.x, delta.y);
+    if (isShiftKeyPressed) {
+      const { trgX, trgY } = this.snapGuides(delta);
+
+      // If snapped to a vertical guide, lock vertical movement (allow only horizontal movement)
+      if (trgX) lockedAxis = 'y';
+      // If snapped to a horizontal guide, lock horizontal movement (allow only vertical movement)
+      else if (trgY) lockedAxis = 'x';
+      // If no snapping occurs, detect axis lock based on movement direction
+      else if (!lockedAxis) lockedAxis = this.detectAxisLock(delta.x, delta.y);
+
+      // Lock the axis based on the detected axis lock
+      if (lockedAxis === 'x') delta.y = 0;
+      // Lock the axis based on the detected axis lock
+      else if (lockedAxis === 'y') delta.x = 0;
     } else {
+      // Reset axis locking when Shift key is released
       lockedAxis = null;
     }
 
-    if (lockedAxis === 'x') {
-      delta.x = startPointer.x;
-    } else if (lockedAxis === 'y') {
-      delta.y = startPointer.y;
-    }
-
     const moveDelta = (delta: DraggerPosition) => {
       xyArr.forEach((co) => (delta[co] = delta[co] * result(opts, 'scale')));
       this.delta = delta;