Support negative resize for multiple points line/arrow (#1237)

* Support negative resize for multiple points line

* prettier

* Fix an issue with width or height becoming zero

src/element/resizeElements.ts

@@ -144,7 +144,7 @@ export function resizeElements(
             width,
             height,
             ...adjustXYWithRotation("nw", element, deltaX, dY, angle),
-            ...(isLinearElement(element) && width >= 0 && height >= 0
+            ...(isLinearElement(element) && width !== 0 && height !== 0
               ? {
                   points: rescalePoints(
                     0,
@@ -176,7 +176,7 @@ export function resizeElements(
             width,
             height,
             ...adjustXYWithRotation("ne", element, deltaX, dY, angle),
-            ...(isLinearElement(element) && width >= 0 && height >= 0
+            ...(isLinearElement(element) && width !== 0 && height !== 0
               ? {
                   points: rescalePoints(
                     0,
@@ -208,7 +208,7 @@ export function resizeElements(
             width,
             height,
             ...adjustXYWithRotation("sw", element, deltaX, dY, angle),
-            ...(isLinearElement(element) && width >= 0 && height >= 0
+            ...(isLinearElement(element) && width !== 0 && height !== 0
               ? {
                   points: rescalePoints(
                     0,
@@ -240,7 +240,7 @@ export function resizeElements(
             width,
             height,
             ...adjustXYWithRotation("se", element, deltaX, dY, angle),
-            ...(isLinearElement(element) && width >= 0 && height >= 0
+            ...(isLinearElement(element) && width !== 0 && height !== 0
               ? {
                   points: rescalePoints(
                     0,
@@ -255,12 +255,7 @@ export function resizeElements(
       case "n": {
         const height = element.height - deltaY;
 
-        if (isLinearElement(element)) {
-          if (element.points.length > 2 && height <= 0) {
-            // Someday we should implement logic to flip the shape.
-            // But for now, just stop.
-            break;
-          }
+        if (isLinearElement(element) && height !== 0) {
           mutateElement(element, {
             height,
             ...adjustXYWithRotation("n", element, 0, deltaY, angle),
@@ -278,13 +273,7 @@ export function resizeElements(
       case "w": {
         const width = element.width - deltaX;
 
-        if (isLinearElement(element)) {
-          if (element.points.length > 2 && width <= 0) {
-            // Someday we should implement logic to flip the shape.
-            // But for now, just stop.
-            break;
-          }
-
+        if (isLinearElement(element) && width !== 0) {
           mutateElement(element, {
             width,
             ...adjustXYWithRotation("w", element, deltaX, 0, angle),
@@ -301,12 +290,7 @@ export function resizeElements(
       case "s": {
         const height = element.height + deltaY;
 
-        if (isLinearElement(element)) {
-          if (element.points.length > 2 && height <= 0) {
-            // Someday we should implement logic to flip the shape.
-            // But for now, just stop.
-            break;
-          }
+        if (isLinearElement(element) && height !== 0) {
           mutateElement(element, {
             height,
             ...adjustXYWithRotation("s", element, 0, deltaY, angle),
@@ -323,12 +307,7 @@ export function resizeElements(
       case "e": {
         const width = element.width + deltaX;
 
-        if (isLinearElement(element)) {
-          if (element.points.length > 2 && width <= 0) {
-            // Someday we should implement logic to flip the shape.
-            // But for now, just stop.
-            break;
-          }
+        if (isLinearElement(element) && width !== 0) {
           mutateElement(element, {
             width,
             ...adjustXYWithRotation("e", element, deltaX, 0, angle),

src/element/resizeTest.ts

@@ -10,7 +10,6 @@ import {
   handlerRectangles,
 } from "./handlerRectangles";
 import { AppState } from "../types";
-import { isLinearElement } from "./typeChecks";
 
 type HandlerRectanglesRet = keyof ReturnType<typeof handlerRectangles>;
 
@@ -155,7 +154,7 @@ export function normalizeResizeHandle(
   element: ExcalidrawElement,
   resizeHandle: HandlerRectanglesRet,
 ): HandlerRectanglesRet {
-  if ((element.width >= 0 && element.height >= 0) || isLinearElement(element)) {
+  if (element.width >= 0 && element.height >= 0) {
     return resizeHandle;
   }
 

src/element/sizeHelpers.ts

@@ -81,11 +81,7 @@ export function resizePerfectLineForNWHandler(
 export function normalizeDimensions(
   element: ExcalidrawElement | null,
 ): element is ExcalidrawElement {
-  if (
-    !element ||
-    (element.width >= 0 && element.height >= 0) ||
-    isLinearElement(element)
-  ) {
+  if (!element || (element.width >= 0 && element.height >= 0)) {
     return false;
   }