fix: text corner resizing only takes delta y

packages/element/src/resizeElements.ts

@@ -318,7 +318,18 @@ export const resizeSingleTextElement = (
 ) => {
   const elementsMap = scene.getNonDeletedElementsMap();
 
-  const metricsWidth = element.width * (nextHeight / element.height);
+  const isCornerHandle = transformHandleType.length === 2;
+  let metricsWidth = element.width * (nextHeight / element.height);
+  let metricsHeight = nextHeight;
+
+  if (isCornerHandle) {
+    const widthRatio = Math.abs(nextWidth) / element.width;
+    const heightRatio = Math.abs(nextHeight) / element.height;
+    const ratio = Math.max(widthRatio, heightRatio);
+    const sign = Math.sign(nextHeight) || 1;
+    metricsWidth = element.width * ratio * sign;
+    metricsHeight = element.height * ratio * sign;
+  }
 
   const metrics = measureFontSizeFromWidth(element, elementsMap, metricsWidth);
   if (metrics === null) {
@@ -333,7 +344,7 @@ export const resizeSingleTextElement = (
       origElement.width,
       origElement.height,
       metricsWidth,
-      nextHeight,
+      metricsHeight,
       origElement.angle,
       transformHandleType,
       false,
@@ -343,7 +354,7 @@ export const resizeSingleTextElement = (
     scene.mutateElement(element, {
       fontSize: metrics.size,
       width: metricsWidth,
-      height: nextHeight,
+      height: metricsHeight,
       x: newOrigin.x,
       y: newOrigin.y,
     });

packages/element/tests/resize.test.tsx

@@ -563,6 +563,24 @@ describe("text element", () => {
     expect(text.fontSize).toBeCloseTo(fontSize * scale);
   });
 
+  it("resizes proportionally using horizontal delta from corner handles", async () => {
+    const text = UI.createElement("text");
+    await UI.editText(text, "hello\nworld");
+    const { x, y, width, height, fontSize } = text;
+    const deltaX = width;
+    const deltaY = 0;
+    const scale = (width + deltaX) / width;
+
+    UI.resize(text, "se", [deltaX, deltaY]);
+
+    expect(text.x).toBeCloseTo(x);
+    expect(text.y).toBeCloseTo(y);
+    expect(text.width).toBeCloseTo(width * scale);
+    expect(text.height).toBeCloseTo(height * scale);
+    expect(text.angle).toBeCloseTo(0);
+    expect(text.fontSize).toBeCloseTo(fontSize * scale);
+  });
+
   // TODO enable this test after adding single text element flipping
   it.skip("flips while resizing", async () => {
     const text = UI.createElement("text");