From 426b5d9537d8de329f577bd87b3608915c2c3495 Mon Sep 17 00:00:00 2001
From: Ryan Di <ryan.weihao.di@gmail.com>
Date: Mon, 1 Aug 2022 19:24:46 +0800
Subject: [PATCH] feat: cursor alignment when creating generic elements (#5516)

Co-authored-by: Ryan <diweihao@bytedance.com>
---
 src/element/dragElements.ts | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/element/dragElements.ts b/src/element/dragElements.ts
index 251b345f..e4583e4a 100644
--- a/src/element/dragElements.ts
+++ b/src/element/dragElements.ts
@@ -109,11 +109,22 @@ export const dragNewElement = (
     if (widthAspectRatio) {
       height = width / widthAspectRatio;
     } else {
-      ({ width, height } = getPerfectElementSize(
-        elementType,
-        width,
-        y < originY ? -height : height,
-      ));
+      // Depending on where the cursor is at (x, y) relative to where the starting point is
+      // (originX, originY), we use ONLY width or height to control size increase.
+      // This allows the cursor to always "stick" to one of the sides of the bounding box.
+      if (Math.abs(y - originY) > Math.abs(x - originX)) {
+        ({ width, height } = getPerfectElementSize(
+          elementType,
+          height,
+          x < originX ? -width : width,
+        ));
+      } else {
+        ({ width, height } = getPerfectElementSize(
+          elementType,
+          width,
+          y < originY ? -height : height,
+        ));
+      }
 
       if (height < 0) {
         height = -height;