fix: resolve resize handle inversion by standardizing coordinate systems

[Rish-it]

Fix Resize Handle Inversion Issue

Description

This PR resolves a critical bug where element resize handles behaved inversely to user expectations. When users attempted to resize elements by dragging from their edges, the resize behavior was inverted:

• Problem: Dragging from the right edge would affect the left side instead of the right
• Problem: Dragging from the top edge would affect the bottom side instead of the top

Root Cause Analysis

The issue was caused by a coordinate system mismatch in the handleMouseDownDimensions function within the resize component:

• calculateNewElementDimensions correctly used adjustedDelta (canvas-scaled coordinates)
• calculateNewOverlayDimensions incorrectly used raw deltaX, deltaY (screen coordinates)

This inconsistency caused the visual overlay to behave differently from the actual element resize, especially noticeable at non-1.0 zoom levels.

Technical Solution

• Fixed: Standardized both calculations to use adjustedDelta consistently
• Result: Both element and overlay calculations now use the same canvas-scaled coordinate system
• Impact: Resize handles now behave intuitively and consistently across all zoom levels

Related Issues

Fixes #2061

Type of Change

• [x] Bug fix
• [ ] New feature
• [ ] Documentation update
• [ ] Release
• [ ] Refactor
• [ ] Other (please describe)

Screenshots

https://github.com/user-attachments/assets/780c70c5-88fa-48c7-8c7a-37e7d27b8bf5

---

[!IMPORTANT] Fixes resize handle inversion by standardizing coordinate systems in resize.tsx.

• Behavior:
  • Fixes resize handle inversion issue in resize.tsx by standardizing coordinate systems.
  • calculateNewOverlayDimensions now uses adjustedDelta instead of deltaX, deltaY.
  • Ensures consistent resize behavior across all zoom levels.
• Technical Solution:
  • Standardized calculations in handleMouseDownDimensions to use canvas-scaled coordinates.
  • Affects both element and overlay dimensions calculations.

^{This description was created by for eae97eebc03980a6730b351cc617aad8fd3588ba. You can customize this summary. It will automatically update as commits are pushed.}

[vercel[bot]]

@Rish-it is attempting to deploy a commit to the Onlook Team on Vercel.

A member of the Team first needs to authorize it.

[Kitenite]

Closing for now but feel free to re-open if you disagree