Bladeren bron

Fix corner resize for multi-point arrows (#1105)

The logic to support it was not implemented. This is not the prettiest way to solve it in the world but it does work. Some more refactoring here is probably warranted.

Fixes #1039
Christopher Chedeau 5 jaren geleden
bovenliggende
commit
8e6d55cf75
2 gewijzigde bestanden met toevoegingen van 59 en 23 verwijderingen
  1. 59 16
      src/components/App.tsx
  2. 0 7
      src/element/handlerRectangles.ts

+ 59 - 16
src/components/App.tsx

@@ -1964,15 +1964,26 @@ export class App extends React.Component<any, AppState> {
                 }
                 resizeArrowFn(element, 1, deltaX, deltaY, x, y, event.shiftKey);
               } else {
+                const width = element.width - deltaX;
+                const height = event.shiftKey
+                  ? element.width
+                  : element.height - deltaY;
                 mutateElement(element, {
                   x: element.x + deltaX,
                   y: event.shiftKey
                     ? element.y + element.height - element.width
                     : element.y + deltaY,
-                  width: element.width - deltaX,
-                  height: event.shiftKey
-                    ? element.width
-                    : element.height - deltaY,
+                  width,
+                  height,
+                  ...(isLinearElement(element) && width >= 0 && height >= 0
+                    ? {
+                        points: rescalePoints(
+                          0,
+                          width,
+                          rescalePoints(1, height, element.points),
+                        ),
+                      }
+                    : {}),
                 });
               }
               break;
@@ -1988,13 +1999,23 @@ export class App extends React.Component<any, AppState> {
                 }
                 resizeArrowFn(element, 1, deltaX, deltaY, x, y, event.shiftKey);
               } else {
-                const nextWidth = element.width + deltaX;
+                const width = element.width + deltaX;
+                const height = event.shiftKey ? width : element.height - deltaY;
                 mutateElement(element, {
                   y: event.shiftKey
-                    ? element.y + element.height - nextWidth
+                    ? element.y + element.height - width
                     : element.y + deltaY,
-                  width: nextWidth,
-                  height: event.shiftKey ? nextWidth : element.height - deltaY,
+                  width,
+                  height,
+                  ...(isLinearElement(element) && width >= 0 && height >= 0
+                    ? {
+                        points: rescalePoints(
+                          0,
+                          width,
+                          rescalePoints(1, height, element.points),
+                        ),
+                      }
+                    : {}),
                 });
               }
               break;
@@ -2010,12 +2031,23 @@ export class App extends React.Component<any, AppState> {
                 }
                 resizeArrowFn(element, 1, deltaX, deltaY, x, y, event.shiftKey);
               } else {
+                const width = element.width - deltaX;
+                const height = event.shiftKey
+                  ? element.width
+                  : element.height + deltaY;
                 mutateElement(element, {
                   x: element.x + deltaX,
-                  width: element.width - deltaX,
-                  height: event.shiftKey
-                    ? element.width
-                    : element.height + deltaY,
+                  width,
+                  height,
+                  ...(isLinearElement(element) && width >= 0 && height >= 0
+                    ? {
+                        points: rescalePoints(
+                          0,
+                          width,
+                          rescalePoints(1, height, element.points),
+                        ),
+                      }
+                    : {}),
                 });
               }
               break;
@@ -2031,11 +2063,22 @@ export class App extends React.Component<any, AppState> {
                 }
                 resizeArrowFn(element, 1, deltaX, deltaY, x, y, event.shiftKey);
               } else {
+                const width = element.width + deltaX;
+                const height = event.shiftKey
+                  ? element.width
+                  : element.height + deltaY;
                 mutateElement(element, {
-                  width: element.width + deltaX,
-                  height: event.shiftKey
-                    ? element.width
-                    : element.height + deltaY,
+                  width,
+                  height,
+                  ...(isLinearElement(element) && width >= 0 && height >= 0
+                    ? {
+                        points: rescalePoints(
+                          0,
+                          width,
+                          rescalePoints(1, height, element.points),
+                        ),
+                      }
+                    : {}),
                 });
               }
               break;

+ 0 - 7
src/element/handlerRectangles.ts

@@ -131,13 +131,6 @@ export function handlerRectangles(
         } as typeof handlers;
       }
     }
-
-    return {
-      n: handlers.n,
-      s: handlers.s,
-      w: handlers.w,
-      e: handlers.e,
-    } as typeof handlers;
   }
 
   return handlers;