Replace getElementAbsoluteXY with getElementAbsoluteCoords

src/element/bounds.test.ts

@@ -0,0 +1,67 @@
+import { getElementAbsoluteCoords } from "./bounds";
+import { ExcalidrawElement } from "./types";
+
+const _ce = ({ x, y, w, h }: { x: number; y: number; w: number; h: number }) =>
+  ({
+    type: "test",
+    strokeColor: "#000",
+    backgroundColor: "#000",
+    fillStyle: "solid",
+    strokeWidth: 1,
+    roughness: 1,
+    opacity: 1,
+    x,
+    y,
+    width: w,
+    height: h
+  } as ExcalidrawElement);
+
+describe("getElementAbsoluteCoords", () => {
+  it("test x1 coordinate if width is positive or zero", () => {
+    const [x1] = getElementAbsoluteCoords(_ce({ x: 10, y: 0, w: 10, h: 0 }));
+    expect(x1).toEqual(10);
+  });
+
+  it("test x1 coordinate if width is negative", () => {
+    const [x1] = getElementAbsoluteCoords(_ce({ x: 20, y: 0, w: -10, h: 0 }));
+    expect(x1).toEqual(10);
+  });
+
+  it("test x2 coordinate if width is positive or zero", () => {
+    const [, , x2] = getElementAbsoluteCoords(
+      _ce({ x: 10, y: 0, w: 10, h: 0 })
+    );
+    expect(x2).toEqual(20);
+  });
+
+  it("test x2 coordinate if width is negative", () => {
+    const [, , x2] = getElementAbsoluteCoords(
+      _ce({ x: 10, y: 0, w: -10, h: 0 })
+    );
+    expect(x2).toEqual(10);
+  });
+
+  it("test y1 coordinate if height is positive or zero", () => {
+    const [, y1] = getElementAbsoluteCoords(_ce({ x: 0, y: 10, w: 0, h: 10 }));
+    expect(y1).toEqual(10);
+  });
+
+  it("test y1 coordinate if height is negative", () => {
+    const [, y1] = getElementAbsoluteCoords(_ce({ x: 0, y: 20, w: 0, h: -10 }));
+    expect(y1).toEqual(10);
+  });
+
+  it("test y2 coordinate if height is positive or zero", () => {
+    const [, , , y2] = getElementAbsoluteCoords(
+      _ce({ x: 0, y: 10, w: 0, h: 10 })
+    );
+    expect(y2).toEqual(20);
+  });
+
+  it("test y2 coordinate if height is negative", () => {
+    const [, , , y2] = getElementAbsoluteCoords(
+      _ce({ x: 0, y: 10, w: 0, h: -10 })
+    );
+    expect(y2).toEqual(10);
+  });
+});

src/element/bounds.ts

@@ -5,17 +5,13 @@ import { rotate } from "../math";
 // This set of functions retrieves the absolute position of the 4 points.
 // We can't just always normalize it since we need to remember the fact that an arrow
 // is pointing left or right.
-export function getElementAbsoluteX1(element: ExcalidrawElement) {
-  return element.width >= 0 ? element.x : element.x + element.width;
-}
-export function getElementAbsoluteX2(element: ExcalidrawElement) {
-  return element.width >= 0 ? element.x + element.width : element.x;
-}
-export function getElementAbsoluteY1(element: ExcalidrawElement) {
-  return element.height >= 0 ? element.y : element.y + element.height;
-}
-export function getElementAbsoluteY2(element: ExcalidrawElement) {
-  return element.height >= 0 ? element.y + element.height : element.y;
+export function getElementAbsoluteCoords(element: ExcalidrawElement) {
+  return [
+    element.width >= 0 ? element.x : element.x + element.width, // x1
+    element.height >= 0 ? element.y : element.y + element.height, // y1
+    element.width >= 0 ? element.x + element.width : element.x, // x2
+    element.height >= 0 ? element.y + element.height : element.y // y2
+  ];
 }
 
 export function getDiamondPoints(element: ExcalidrawElement) {

src/element/collision.ts

@@ -2,12 +2,9 @@ import { distanceBetweenPointAndSegment } from "../math";
 
 import { ExcalidrawElement } from "./types";
 import {
-  getElementAbsoluteX1,
-  getElementAbsoluteX2,
-  getElementAbsoluteY1,
-  getElementAbsoluteY2,
   getArrowPoints,
-  getDiamondPoints
+  getDiamondPoints,
+  getElementAbsoluteCoords
 } from "./bounds";
 
 export function hitTest(
@@ -55,10 +52,7 @@ export function hitTest(
 
     return Math.hypot(a * tx - px, b * ty - py) < lineThreshold;
   } else if (element.type === "rectangle") {
-    const x1 = getElementAbsoluteX1(element);
-    const x2 = getElementAbsoluteX2(element);
-    const y1 = getElementAbsoluteY1(element);
-    const y2 = getElementAbsoluteY2(element);
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
 
     // (x1, y1) --A-- (x2, y1)
     //    |D             |B
@@ -109,10 +103,7 @@ export function hitTest(
       distanceBetweenPointAndSegment(x, y, x4, y4, x2, y2) < lineThreshold
     );
   } else if (element.type === "text") {
-    const x1 = getElementAbsoluteX1(element);
-    const x2 = getElementAbsoluteX2(element);
-    const y1 = getElementAbsoluteY1(element);
-    const y2 = getElementAbsoluteY2(element);
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
 
     return x >= x1 && x <= x2 && y >= y1 && y <= y2;
   } else if (element.type === "selection") {

src/element/index.ts

@@ -1,9 +1,6 @@
 export { newElement } from "./newElement";
 export {
-  getElementAbsoluteX1,
-  getElementAbsoluteX2,
-  getElementAbsoluteY1,
-  getElementAbsoluteY2,
+  getElementAbsoluteCoords,
   getDiamondPoints,
   getArrowPoints
 } from "./bounds";

src/renderer/renderScene.ts

@@ -1,13 +1,7 @@
 import { RoughCanvas } from "roughjs/bin/canvas";
 
 import { ExcalidrawElement } from "../element/types";
-import {
-  getElementAbsoluteX1,
-  getElementAbsoluteX2,
-  getElementAbsoluteY1,
-  getElementAbsoluteY2,
-  handlerRectangles
-} from "../element";
+import { getElementAbsoluteCoords, handlerRectangles } from "../element";
 
 import { roundRect } from "../scene/roundRect";
 import { SceneState } from "../scene/types";
@@ -65,10 +59,12 @@ export function renderScene(
     selectedElements.forEach(element => {
       const margin = 4;
 
-      const elementX1 = getElementAbsoluteX1(element);
-      const elementX2 = getElementAbsoluteX2(element);
-      const elementY1 = getElementAbsoluteY1(element);
-      const elementY2 = getElementAbsoluteY2(element);
+      const [
+        elementX1,
+        elementY1,
+        elementX2,
+        elementY2
+      ] = getElementAbsoluteCoords(element);
       const lineDash = context.getLineDash();
       context.setLineDash([8, 4]);
       context.strokeRect(

src/scene/data.ts

@@ -2,12 +2,7 @@ import rough from "roughjs/bin/wrappers/rough";
 
 import { ExcalidrawElement } from "../element/types";
 
-import {
-  getElementAbsoluteX1,
-  getElementAbsoluteX2,
-  getElementAbsoluteY1,
-  getElementAbsoluteY2
-} from "../element";
+import { getElementAbsoluteCoords } from "../element";
 
 import { renderScene } from "../renderer";
 import { AppState } from "../types";
@@ -93,10 +88,11 @@ export function exportAsPNG(
   let subCanvasY2 = 0;
 
   elements.forEach(element => {
-    subCanvasX1 = Math.min(subCanvasX1, getElementAbsoluteX1(element));
-    subCanvasX2 = Math.max(subCanvasX2, getElementAbsoluteX2(element));
-    subCanvasY1 = Math.min(subCanvasY1, getElementAbsoluteY1(element));
-    subCanvasY2 = Math.max(subCanvasY2, getElementAbsoluteY2(element));
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+    subCanvasX1 = Math.min(subCanvasX1, x1);
+    subCanvasY1 = Math.min(subCanvasY1, y1);
+    subCanvasX2 = Math.max(subCanvasX2, x2);
+    subCanvasY2 = Math.max(subCanvasY2, y2);
   });
 
   function distance(x: number, y: number) {

src/scene/scrollbars.ts

@@ -1,10 +1,5 @@
 import { ExcalidrawElement } from "../element/types";
-import {
-  getElementAbsoluteX1,
-  getElementAbsoluteX2,
-  getElementAbsoluteY1,
-  getElementAbsoluteY2
-} from "../element";
+import { getElementAbsoluteCoords } from "../element";
 
 const SCROLLBAR_MIN_SIZE = 15;
 const SCROLLBAR_MARGIN = 4;
@@ -24,10 +19,11 @@ export function getScrollBars(
   let maxY = 0;
 
   elements.forEach(element => {
-    minX = Math.min(minX, getElementAbsoluteX1(element));
-    maxX = Math.max(maxX, getElementAbsoluteX2(element));
-    minY = Math.min(minY, getElementAbsoluteY1(element));
-    maxY = Math.max(maxY, getElementAbsoluteY2(element));
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+    minX = Math.min(minX, x1);
+    minY = Math.min(minY, y1);
+    maxX = Math.max(maxX, x2);
+    maxY = Math.max(maxY, y2);
   });
 
   minX += scrollX;

src/scene/selection.ts

@@ -1,24 +1,23 @@
 import { ExcalidrawElement } from "../element/types";
-import {
-  getElementAbsoluteX1,
-  getElementAbsoluteX2,
-  getElementAbsoluteY1,
-  getElementAbsoluteY2
-} from "../element";
+import { getElementAbsoluteCoords } from "../element";
 
 export function setSelection(
   elements: ExcalidrawElement[],
   selection: ExcalidrawElement
 ) {
-  const selectionX1 = getElementAbsoluteX1(selection);
-  const selectionX2 = getElementAbsoluteX2(selection);
-  const selectionY1 = getElementAbsoluteY1(selection);
-  const selectionY2 = getElementAbsoluteY2(selection);
+  const [
+    selectionX1,
+    selectionY1,
+    selectionX2,
+    selectionY2
+  ] = getElementAbsoluteCoords(selection);
   elements.forEach(element => {
-    const elementX1 = getElementAbsoluteX1(element);
-    const elementX2 = getElementAbsoluteX2(element);
-    const elementY1 = getElementAbsoluteY1(element);
-    const elementY2 = getElementAbsoluteY2(element);
+    const [
+      elementX1,
+      elementY1,
+      elementX2,
+      elementY2
+    ] = getElementAbsoluteCoords(element);
     element.isSelected =
       element.type !== "selection" &&
       selectionX1 <= elementX1 &&