diff --git a/packages/core/src/utils/Dragger.ts b/packages/core/src/utils/Dragger.ts index 69a874757..b9a9523ff 100644 --- a/packages/core/src/utils/Dragger.ts +++ b/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 - if (ev.shiftKey) { - lockedAxis = !lockedAxis && this.detectAxisLock(delta.x, delta.y); + // Handle axis locking when Shift key is pressed + const isShiftKeyPressed = 'shiftKey' in ev && ev.shiftKey; + 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;