@kritzel/engine 0.4.31

package/dist/collection/classes/handlers/move.handler.js

@@ -0,0 +1,295 @@
+import { KritzelEventHelper } from "../../helpers/event.helper";
+import { KritzelBaseHandler } from "./base.handler";
+import { KritzelLine } from "../objects/line.class";
+/** Threshold in screen pixels for disconnecting anchored lines during drag */
+const ANCHOR_DISCONNECT_THRESHOLD = 30;
+/**
+ * Handler class responsible for managing move/drag operations on selected objects.
+ * Handles pointer events for mouse, touch, and pen inputs to enable dragging
+ * of selected objects on the canvas. Also manages anchor disconnection when
+ * lines are dragged beyond a threshold distance.
+ */
+export class KritzelMoveHandler extends KritzelBaseHandler {
+    /** X coordinate where the drag started (updates during drag for incremental movement) */
+    dragStartX = 0;
+    /** Y coordinate where the drag started (updates during drag for incremental movement) */
+    dragStartY = 0;
+    /** Initial X coordinate when starting interaction (remains constant during drag) */
+    startX = 0;
+    /** Initial Y coordinate when starting interaction (remains constant during drag) */
+    startY = 0;
+    /** Current X coordinate during move operation */
+    endX = 0;
+    /** Current Y coordinate during move operation */
+    endY = 0;
+    /** Initial position when drag started (for calculating total accumulated distance) */
+    initialDragX = 0;
+    initialDragY = 0;
+    /** Set of line IDs that have been disconnected from anchors during this drag */
+    disconnectedLineIds = new Set();
+    /** Flag indicating whether objects have been moved during the current drag operation */
+    hasMoved = false;
+    /** The pointer ID being tracked for the current drag operation (null if not dragging) */
+    trackedPointerId = null;
+    /**
+     * Creates a new instance of KritzelMoveHandler.
+     * @param core - The KritzelCore instance providing access to store, engine, and other core services
+     */
+    constructor(core) {
+        super(core);
+    }
+    /**
+     * Resets all internal state variables to their initial values.
+     * Called after a drag operation completes or is cancelled to prepare
+     * the handler for the next interaction.
+     * @returns void
+     */
+    reset() {
+        this.dragStartX = 0;
+        this.dragStartY = 0;
+        this.startX = 0;
+        this.startY = 0;
+        this.endX = 0;
+        this.endY = 0;
+        this.initialDragX = 0;
+        this.initialDragY = 0;
+        this.disconnectedLineIds.clear();
+        this.hasMoved = false;
+        this.trackedPointerId = null;
+    }
+    /**
+     * Cancels any pending drag operation without completing it.
+     * Sets the dragging state to false and resets internal state.
+     * Useful for aborting a drag when another interaction takes precedence.
+     * @returns void
+     */
+    cancelPendingDrag() {
+        this._core.store.state.isDragging = false;
+        this.reset();
+    }
+    /**
+     * Handles the pointer down event to initiate a drag operation.
+     * Validates that the event is appropriate for starting a drag (e.g., left mouse click,
+     * single touch, correct state) and initializes drag tracking variables.
+     * Supports mouse, touch, and pen input types.
+     * @param event - The PointerEvent from the browser containing pointer information
+     *                including clientX, clientY, pointerId, pointerType, and modifier keys
+     * @returns void
+     */
+    handlePointerDown(event) {
+        if (event.pointerType === 'mouse') {
+            if (KritzelEventHelper.isLeftClick(event)) {
+                const selectionGroup = this._core.store.selectionGroup;
+                const isAdditive = event.shiftKey || event.ctrlKey;
+                if (selectionGroup?.isSelected && !this._core.store.state.isResizeHandleSelected && !this._core.store.state.isRotationHandleSelected && !this._core.store.state.isLineHandleSelected && !isAdditive) {
+                    const clientX = event.clientX - this._core.store.offsetX;
+                    const clientY = event.clientY - this._core.store.offsetY;
+                    this._core.store.state.isDragging = true;
+                    this.dragStartX = clientX;
+                    this.dragStartY = clientY;
+                    this.startX = this.dragStartX;
+                    this.startY = this.dragStartY;
+                    this.initialDragX = clientX;
+                    this.initialDragY = clientY;
+                    this.disconnectedLineIds.clear();
+                    this.trackedPointerId = event.pointerId;
+                }
+                else {
+                    this.trackedPointerId = null;
+                }
+            }
+            else {
+                this.trackedPointerId = null;
+            }
+        }
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
+            const activePointers = Array.from(this._core.store.state.pointers.values());
+            if (this._core.store.state.pointers.size === 1) {
+                if (this._core.store.state.isScaling) {
+                    this.trackedPointerId = null;
+                    return;
+                }
+                const selectionGroup = this._core.store.selectionGroup;
+                const isAdditive = event.shiftKey || event.ctrlKey;
+                if (selectionGroup?.isSelected && !this._core.store.state.isResizeHandleSelected && !this._core.store.state.isRotationHandleSelected && !this._core.store.state.isLineHandleSelected && !isAdditive) {
+                    const x = Math.round(activePointers[0].clientX - this._core.store.offsetX);
+                    const y = Math.round(activePointers[0].clientY - this._core.store.offsetY);
+                    this.dragStartX = x;
+                    this.dragStartY = y;
+                    this.startX = x;
+                    this.startY = y;
+                    this.initialDragX = x;
+                    this.initialDragY = y;
+                    this.disconnectedLineIds.clear();
+                    this.trackedPointerId = event.pointerId;
+                }
+                else {
+                    this.trackedPointerId = null;
+                }
+            }
+        }
+    }
+    /**
+     * Handles pointer move events during a drag operation.
+     * Calculates movement delta, applies a movement threshold to filter micro-movements,
+     * checks for anchor disconnection on lines, and updates the position of selected objects.
+     * Supports mouse, touch, and pen input types.
+     * @param event - The PointerEvent from the browser containing current pointer position
+     *                and pointer identification (pointerId, pointerType, clientX, clientY)
+     * @returns void
+     */
+    handlePointerMove(event) {
+        if (this.trackedPointerId === null || this.trackedPointerId !== event.pointerId) {
+            return;
+        }
+        if (event.pointerType === 'mouse') {
+            const selectionGroup = this._core.store.selectionGroup;
+            if (this._core.store.state.isDragging && selectionGroup) {
+                const clientX = event.clientX - this._core.store.offsetX;
+                const clientY = event.clientY - this._core.store.offsetY;
+                this.endX = clientX;
+                this.endY = clientY;
+                const moveDeltaX = Math.abs(clientX - this.startX);
+                const moveDeltaY = Math.abs(clientY - this.startY);
+                const moveThreshold = 5;
+                if (this.hasMoved || moveDeltaX > moveThreshold || moveDeltaY > moveThreshold) {
+                    // Check for anchor disconnect threshold on lines
+                    this.checkAndDisconnectAnchors(clientX, clientY);
+                    selectionGroup.move(clientX, clientY, this.dragStartX, this.dragStartY);
+                    this.dragStartX = clientX;
+                    this.dragStartY = clientY;
+                    this.hasMoved = true;
+                }
+            }
+        }
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
+            const activePointers = Array.from(this._core.store.state.pointers.values());
+            const selectionGroup = this._core.store.selectionGroup;
+            if (this._core.store.state.pointers.size === 1 &&
+                selectionGroup &&
+                !this._core.store.state.isResizeHandleSelected &&
+                !this._core.store.state.isRotationHandleSelected &&
+                !this._core.store.state.isScaling) {
+                const x = Math.round(activePointers[0].clientX - this._core.store.offsetX);
+                const y = Math.round(activePointers[0].clientY - this._core.store.offsetY);
+                this._core.store.state.isDragging = true;
+                this.endX = x;
+                this.endY = y;
+                const moveDeltaX = Math.abs(x - this.startX);
+                const moveDeltaY = Math.abs(y - this.startY);
+                const moveThreshold = 5;
+                if (this.hasMoved || moveDeltaX > moveThreshold || moveDeltaY > moveThreshold) {
+                    const timeout = this._core.store.state.longTouchTimeout;
+                    if (timeout) {
+                        globalThis.clearTimeout?.(timeout);
+                    }
+                    // Check for anchor disconnect threshold on lines
+                    this.checkAndDisconnectAnchors(x, y);
+                    selectionGroup.move(x, y, this.dragStartX, this.dragStartY);
+                    this.dragStartX = x;
+                    this.dragStartY = y;
+                    this.hasMoved = true;
+                }
+            }
+        }
+    }
+    /**
+     * Handles the pointer up event to complete a drag operation.
+     * Finalizes the move by updating the selection group, emitting change events
+     * if objects were moved, and resetting internal state for the next operation.
+     * Supports mouse, touch, and pen input types.
+     * @param event - The PointerEvent from the browser containing pointer identification
+     *                (pointerId, pointerType) to verify this is the tracked pointer
+     * @returns void
+     */
+    handlePointerUp(event) {
+        if (this.trackedPointerId === null || this.trackedPointerId !== event.pointerId) {
+            return;
+        }
+        if (event.pointerType === 'mouse') {
+            if (this._core.store.state.isDragging) {
+                this._core.store.state.isDragging = false;
+                if (this.hasMoved) {
+                    this._core.store.selectionGroup.persistChildren();
+                    this._core.store.selectionGroup.refreshObjectDimensions(undefined, false);
+                    this._core.store.selectionGroup.update();
+                    this._core.engine.emitObjectsChange();
+                    this._core.store.state.hasObjectsChanged = true;
+                    this._core.store.objects.stopUndoCapturing();
+                }
+            }
+        }
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
+            if (this._core.store.state.isDragging) {
+                this._core.store.state.isDragging = false;
+                if (this.hasMoved) {
+                    this._core.store.selectionGroup.persistChildren();
+                    this._core.store.selectionGroup.refreshObjectDimensions(undefined, false);
+                    this._core.store.selectionGroup.update();
+                    this._core.engine.emitObjectsChange();
+                    this._core.store.state.hasObjectsChanged = true;
+                    this._core.store.objects.stopUndoCapturing();
+                }
+            }
+        }
+        this.reset();
+    }
+    /**
+     * Checks if the total accumulated drag distance exceeds the anchor disconnect threshold.
+     * If so, disconnects all anchors from any KritzelLine objects in the selection group.
+     * This allows anchored lines to be freely moved after dragging beyond the threshold.
+     *
+     * Only disconnects anchors when the selection contains exclusively line objects.
+     * If the selection includes other object types (e.g., shapes that lines might be
+     * anchored to), no disconnection occurs to preserve intended relationships.
+     *
+     * @param currentX - The current X coordinate of the pointer in screen pixels
+     * @param currentY - The current Y coordinate of the pointer in screen pixels
+     * @returns void
+     */
+    checkAndDisconnectAnchors(currentX, currentY) {
+        const totalDeltaX = currentX - this.initialDragX;
+        const totalDeltaY = currentY - this.initialDragY;
+        const totalDistance = Math.sqrt(totalDeltaX * totalDeltaX + totalDeltaY * totalDeltaY);
+        if (totalDistance < ANCHOR_DISCONNECT_THRESHOLD) {
+            return;
+        }
+        const selectionGroup = this._core.store.selectionGroup;
+        if (!selectionGroup) {
+            return;
+        }
+        // Only disconnect lines if the selection group contains ONLY lines.
+        // If moving lines with other objects (e.g. shapes they might be anchored to), prevent auto-disconnect.
+        // Cache objects once to avoid repeated getter calls
+        const children = selectionGroup.objects;
+        const onlyLines = children.every(obj => obj instanceof KritzelLine);
+        if (!onlyLines) {
+            return;
+        }
+        // Find and disconnect anchors from all anchored lines in the selection
+        for (const obj of children) {
+            // Skip if already disconnected in this drag session
+            if (this.disconnectedLineIds.has(obj.id)) {
+                continue;
+            }
+            // Check if this is a line with anchors
+            if (obj instanceof KritzelLine) {
+                const line = obj;
+                const hasAnchors = line.startAnchor || line.endAnchor;
+                if (hasAnchors) {
+                    // Disconnect both anchors
+                    if (line.startAnchor) {
+                        this._core.anchorManager.removeAnchor(line.id, 'start');
+                    }
+                    if (line.endAnchor) {
+                        this._core.anchorManager.removeAnchor(line.id, 'end');
+                    }
+                    // Mark as disconnected so we don't try again
+                    this.disconnectedLineIds.add(line.id);
+                    // Update the line to persist the change
+                    this._core.store.objects.update(line);
+                }
+            }
+        }
+    }
+}

package/dist/collection/classes/handlers/resize.handler.js

@@ -0,0 +1,327 @@
+import { KritzelHandleType } from "../../enums/handle-type.enum";
+import { KritzelEventHelper } from "../../helpers/event.helper";
+import { KritzelBaseHandler } from "./base.handler";
+/**
+ * Handler class responsible for managing resize operations on selected objects.
+ * Supports mouse, touch, and pen input types, with rotation-aware resizing
+ * and optional aspect ratio locking via Shift key (mouse only).
+ */
+export class KritzelResizeHandler extends KritzelBaseHandler {
+    /** Initial mouse/pointer X coordinate when resize started */
+    initialMouseX = 0;
+    /** Initial mouse/pointer Y coordinate when resize started */
+    initialMouseY = 0;
+    /** Initial position and dimensions of the selection group before resize */
+    initialSize = { x: 0, y: 0, width: 0, height: 0 };
+    /** New position and dimensions being calculated during resize */
+    newSize = { x: 0, y: 0, width: 0, height: 0 };
+    /** Flag indicating whether the user has moved past the resize threshold */
+    hasResized = false;
+    /**
+     * Creates a new KritzelResizeHandler instance.
+     * @param core - The KritzelCore instance providing access to store, engine, and other core functionalities
+     */
+    constructor(core) {
+        super(core);
+    }
+    /**
+     * Resets all internal state variables to their default values.
+     * Called after a resize operation completes to prepare for the next resize.
+     * @private
+     */
+    reset() {
+        this.initialMouseX = 0;
+        this.initialMouseY = 0;
+        this.initialSize = { x: 0, y: 0, width: 0, height: 0 };
+        this.newSize = { x: 0, y: 0, width: 0, height: 0 };
+        this.hasResized = false;
+    }
+    /**
+     * Rebase pointer and size baselines to the latest live selection bounds.
+     * This prevents drift when anchored lines to external objects expand/shrink
+     * the selection box while a resize gesture is in progress.
+     */
+    rebaseResizeBaseline(selectionGroup, clientX, clientY) {
+        this.initialMouseX = clientX;
+        this.initialMouseY = clientY;
+        this.initialSize.width = selectionGroup.width;
+        this.initialSize.height = selectionGroup.height;
+        this.initialSize.x = selectionGroup.translateX;
+        this.initialSize.y = selectionGroup.translateY;
+    }
+    shouldRebaseResizeBaseline(selectionGroup) {
+        return selectionGroup.hasExternalAnchoredLineConnections?.() === true;
+    }
+    /**
+     * Handles the pointer down event to initiate a resize operation.
+     * Captures the initial mouse position and selection group dimensions when
+     * the user clicks/touches a resize handle. Supports both mouse and touch/pen inputs.
+     *
+     * For mouse: Requires left click on an active resize handle.
+     * For touch/pen: Requires single finger touch on an active resize handle.
+     *
+     * @param event - The PointerEvent containing pointer type, position, and button information
+     */
+    handlePointerDown(event) {
+        if (event.pointerType === 'mouse') {
+            if (KritzelEventHelper.isLeftClick(event)) {
+                const selectionGroup = this._core.store.selectionGroup;
+                if (selectionGroup && this._core.store.state.isResizeHandleSelected) {
+                    selectionGroup.beginTransform();
+                    const clientX = event.clientX - this._core.store.offsetX;
+                    const clientY = event.clientY - this._core.store.offsetY;
+                    this._core.store.state.isResizing = true;
+                    this.initialMouseX = clientX;
+                    this.initialMouseY = clientY;
+                    this.initialSize.width = selectionGroup.width;
+                    this.initialSize.height = selectionGroup.height;
+                    this.initialSize.x = selectionGroup.translateX;
+                    this.initialSize.y = selectionGroup.translateY;
+                }
+            }
+        }
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
+            const activePointers = Array.from(this._core.store.state.pointers.values());
+            const firstTouch = activePointers[0];
+            if (!firstTouch) {
+                return;
+            }
+            if (activePointers.length === 1) {
+                const selectionGroup = this._core.store.selectionGroup;
+                if (selectionGroup && this._core.store.state.isResizeHandleSelected) {
+                    selectionGroup.beginTransform();
+                    const clientX = Math.round(firstTouch.clientX - this._core.store.offsetX);
+                    const clientY = Math.round(firstTouch.clientY - this._core.store.offsetY);
+                    this._core.store.state.isResizing = true;
+                    this.initialMouseX = clientX;
+                    this.initialMouseY = clientY;
+                    this.initialSize.width = selectionGroup.width;
+                    this.initialSize.height = selectionGroup.height;
+                    this.initialSize.x = selectionGroup.translateX;
+                    this.initialSize.y = selectionGroup.translateY;
+                    const timeout = this._core.store.state.longTouchTimeout;
+                    if (timeout) {
+                        globalThis.clearTimeout?.(timeout);
+                    }
+                }
+            }
+        }
+    }
+    /**
+     * Handles the pointer move event during an active resize operation.
+     * Calculates the new dimensions based on pointer movement, taking into account:
+     * - The rotation of the selection group (transforms screen delta to local space)
+     * - The current canvas scale/zoom level
+     * - The type of resize handle being dragged (TopLeft, TopRight, BottomLeft, BottomRight)
+     * - Aspect ratio locking when Shift key is pressed (mouse only)
+     *
+     * Uses a movement threshold to prevent accidental micro-resizes.
+     * The resize is applied symmetrically around the center point.
+     *
+     * @param event - The PointerEvent containing current pointer position and modifier keys
+     */
+    handlePointerMove(event) {
+        if (event.pointerType === 'mouse') {
+            const selectionGroup = this._core.store.selectionGroup;
+            if (this._core.store.state.isResizing && selectionGroup) {
+                const clientX = event.clientX - this._core.store.offsetX;
+                const clientY = event.clientY - this._core.store.offsetY;
+                const dx = clientX - this.initialMouseX;
+                const dy = clientY - this.initialMouseY;
+                const resizeDeltaX = Math.abs(dx);
+                const resizeDeltaY = Math.abs(dy);
+                const resizeThreshold = 5;
+                if (resizeDeltaX > resizeThreshold || resizeDeltaY > resizeThreshold) {
+                    this.hasResized = true;
+                }
+                if (!this.hasResized) {
+                    return;
+                }
+                const rotation = selectionGroup.rotation;
+                const sin = Math.sin(rotation);
+                const cos = Math.cos(rotation);
+                const objectScale = selectionGroup.scale || 1;
+                const currentScale = this._core.store.state.scale;
+                // Calculate delta in local unrotated space
+                // We rotate the screen delta by -rotation to align with the object's axes
+                const localDx = (dx * cos + dy * sin) / currentScale;
+                const localDy = (-dx * sin + dy * cos) / currentScale;
+                // Calculate the center of the selection group before resize
+                const initialCenterX = this.initialSize.x + this.initialSize.width / objectScale / 2;
+                const initialCenterY = this.initialSize.y + this.initialSize.height / objectScale / 2;
+                // The center moves by half of the screen delta (scaled)
+                // This is true regardless of rotation because the resize happens symmetrically around the center
+                // relative to the fixed point logic
+                const newCenterX = initialCenterX + dx / currentScale / 2;
+                const newCenterY = initialCenterY + dy / currentScale / 2;
+                switch (this._core.store.state.resizeHandleType) {
+                    case KritzelHandleType.TopLeft:
+                        this.newSize.width = this.initialSize.width - localDx * objectScale;
+                        this.newSize.height = this.initialSize.height - localDy * objectScale;
+                        break;
+                    case KritzelHandleType.TopRight:
+                        this.newSize.width = this.initialSize.width + localDx * objectScale;
+                        this.newSize.height = this.initialSize.height - localDy * objectScale;
+                        break;
+                    case KritzelHandleType.BottomLeft:
+                        this.newSize.width = this.initialSize.width - localDx * objectScale;
+                        this.newSize.height = this.initialSize.height + localDy * objectScale;
+                        break;
+                    case KritzelHandleType.BottomRight:
+                        this.newSize.width = this.initialSize.width + localDx * objectScale;
+                        this.newSize.height = this.initialSize.height + localDy * objectScale;
+                        break;
+                }
+                // Lock aspect ratio when Shift key is pressed
+                if (event.shiftKey) {
+                    this.constrainToAspectRatio();
+                }
+                this.newSize.x = newCenterX - this.newSize.width / objectScale / 2;
+                this.newSize.y = newCenterY - this.newSize.height / objectScale / 2;
+                selectionGroup.resize(this.newSize.x, this.newSize.y, this.newSize.width, this.newSize.height);
+                if (this.shouldRebaseResizeBaseline(selectionGroup)) {
+                    this.rebaseResizeBaseline(selectionGroup, clientX, clientY);
+                }
+            }
+        }
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
+            const activePointers = Array.from(this._core.store.state.pointers.values());
+            const oneFingerTouch = activePointers[0];
+            if (!oneFingerTouch) {
+                return;
+            }
+            const selectionGroup = this._core.store.selectionGroup;
+            if (this._core.store.state.isResizing && selectionGroup) {
+                const clientX = Math.round(oneFingerTouch.clientX - this._core.store.offsetX);
+                const clientY = Math.round(oneFingerTouch.clientY - this._core.store.offsetY);
+                const dx = clientX - this.initialMouseX;
+                const dy = clientY - this.initialMouseY;
+                const resizeDeltaX = Math.abs(dx);
+                const resizeDeltaY = Math.abs(dy);
+                const resizeThreshold = 5;
+                if (resizeDeltaX > resizeThreshold || resizeDeltaY > resizeThreshold) {
+                    const timeout = this._core.store.state.longTouchTimeout;
+                    if (timeout) {
+                        globalThis.clearTimeout?.(timeout);
+                    }
+                    this.hasResized = true;
+                }
+                if (!this.hasResized) {
+                    return;
+                }
+                const rotation = selectionGroup.rotation;
+                const sin = Math.sin(rotation);
+                const cos = Math.cos(rotation);
+                const objectScale = selectionGroup.scale || 1;
+                const currentScale = this._core.store.state.scale;
+                // Calculate delta in local unrotated space
+                // We rotate the screen delta by -rotation to align with the object's axes
+                const localDx = (dx * cos + dy * sin) / currentScale;
+                const localDy = (-dx * sin + dy * cos) / currentScale;
+                // Calculate the center of the selection group before resize
+                const initialCenterX = this.initialSize.x + this.initialSize.width / objectScale / 2;
+                const initialCenterY = this.initialSize.y + this.initialSize.height / objectScale / 2;
+                // The center moves by half of the screen delta (scaled)
+                // This is true regardless of rotation because the resize happens symmetrically around the center
+                // relative to the fixed point logic
+                const newCenterX = initialCenterX + dx / currentScale / 2;
+                const newCenterY = initialCenterY + dy / currentScale / 2;
+                switch (this._core.store.state.resizeHandleType) {
+                    case KritzelHandleType.TopLeft:
+                        this.newSize.width = this.initialSize.width - localDx * objectScale;
+                        this.newSize.height = this.initialSize.height - localDy * objectScale;
+                        break;
+                    case KritzelHandleType.TopRight:
+                        this.newSize.width = this.initialSize.width + localDx * objectScale;
+                        this.newSize.height = this.initialSize.height - localDy * objectScale;
+                        break;
+                    case KritzelHandleType.BottomLeft:
+                        this.newSize.width = this.initialSize.width - localDx * objectScale;
+                        this.newSize.height = this.initialSize.height + localDy * objectScale;
+                        break;
+                    case KritzelHandleType.BottomRight:
+                        this.newSize.width = this.initialSize.width + localDx * objectScale;
+                        this.newSize.height = this.initialSize.height + localDy * objectScale;
+                        break;
+                }
+                // Note: Touch events don't have shiftKey, aspect ratio locking is mouse-only
+                this.newSize.x = newCenterX - this.newSize.width / objectScale / 2;
+                this.newSize.y = newCenterY - this.newSize.height / objectScale / 2;
+                selectionGroup.resize(this.newSize.x, this.newSize.y, this.newSize.width, this.newSize.height);
+                if (this.shouldRebaseResizeBaseline(selectionGroup)) {
+                    this.rebaseResizeBaseline(selectionGroup, clientX, clientY);
+                }
+            }
+        }
+    }
+    /**
+     * Constrains the new size to maintain the original aspect ratio.
+     * Uses the dominant scale factor (the axis with larger relative change)
+     * to determine the final size, ensuring natural resize behavior.
+     *
+     * If width changed more proportionally, height is adjusted to match the aspect ratio.
+     * If height changed more proportionally, width is adjusted to match the aspect ratio.
+     *
+     * @private
+     * @remarks Does nothing if initial width or height is zero to prevent division errors
+     */
+    constrainToAspectRatio() {
+        const initialWidth = this.initialSize.width;
+        const initialHeight = this.initialSize.height;
+        if (initialWidth === 0 || initialHeight === 0) {
+            return;
+        }
+        const aspectRatio = initialWidth / initialHeight;
+        const widthScale = this.newSize.width / initialWidth;
+        const heightScale = this.newSize.height / initialHeight;
+        // Use the dominant scale factor (the one with larger magnitude change)
+        if (Math.abs(widthScale - 1) > Math.abs(heightScale - 1)) {
+            // Width changed more, adjust height to match
+            this.newSize.height = this.newSize.width / aspectRatio;
+        }
+        else {
+            // Height changed more, adjust width to match
+            this.newSize.width = this.newSize.height * aspectRatio;
+        }
+    }
+    /**
+     * Handles the pointer up event to finalize a resize operation.
+     * If resizing occurred (movement exceeded threshold), updates the selection group
+     * and emits change events. Resets all internal state regardless of whether
+     * actual resizing took place.
+     *
+     * For touch/pen inputs, also clears any pending long touch timeout.
+     *
+     * @param event - The PointerEvent containing pointer type information
+     */
+    handlePointerUp(event) {
+        if (event.pointerType === 'mouse') {
+            if (this._core.store.state.isResizing) {
+                this._core.store.state.isResizing = false;
+                if (this.hasResized) {
+                    this._core.store.selectionGroup.update();
+                    this._core.engine.emitObjectsChange();
+                    this._core.store.state.hasObjectsChanged = true;
+                    this._core.store.objects.stopUndoCapturing();
+                }
+                this.reset();
+            }
+        }
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
+            if (this._core.store.state.isResizing) {
+                this._core.store.state.isResizing = false;
+                if (this.hasResized) {
+                    this._core.store.selectionGroup.update();
+                    this._core.engine.emitObjectsChange();
+                    this._core.store.state.hasObjectsChanged = true;
+                    this._core.store.objects.stopUndoCapturing();
+                }
+                this.reset();
+                const timeout = this._core.store.state.longTouchTimeout;
+                if (timeout) {
+                    globalThis.clearTimeout?.(timeout);
+                }
+            }
+        }
+    }
+}