From b75d9381da3550270cd574902600ccf03a7b767a Mon Sep 17 00:00:00 2001 From: Gasim Gasimzada Date: Tue, 7 Jan 2020 17:28:04 +0400 Subject: [PATCH] Replace getElementAbsoluteXY with getElementAbsoluteCoords --- src/element/bounds.test.ts | 67 +++++++++++++++++++++++++++++++++++++ src/element/bounds.ts | 18 ++++------ src/element/collision.ts | 17 +++------- src/element/index.ts | 5 +-- src/renderer/renderScene.ts | 18 ++++------ src/scene/data.ts | 16 ++++----- src/scene/scrollbars.ts | 16 ++++----- src/scene/selection.ts | 27 +++++++-------- 8 files changed, 111 insertions(+), 73 deletions(-) create mode 100644 src/element/bounds.test.ts diff --git a/src/element/bounds.test.ts b/src/element/bounds.test.ts new file mode 100644 index 000000000..6ed9f2139 --- /dev/null +++ b/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); + }); +}); diff --git a/src/element/bounds.ts b/src/element/bounds.ts index a95d63dc2..9d83b8cec 100644 --- a/src/element/bounds.ts +++ b/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) { diff --git a/src/element/collision.ts b/src/element/collision.ts index 4d1af1b26..58c65601c 100644 --- a/src/element/collision.ts +++ b/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") { diff --git a/src/element/index.ts b/src/element/index.ts index 28e7fe0ac..71c0cbc95 100644 --- a/src/element/index.ts +++ b/src/element/index.ts @@ -1,9 +1,6 @@ export { newElement } from "./newElement"; export { - getElementAbsoluteX1, - getElementAbsoluteX2, - getElementAbsoluteY1, - getElementAbsoluteY2, + getElementAbsoluteCoords, getDiamondPoints, getArrowPoints } from "./bounds"; diff --git a/src/renderer/renderScene.ts b/src/renderer/renderScene.ts index a368a4ec9..dc4c59345 100644 --- a/src/renderer/renderScene.ts +++ b/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( diff --git a/src/scene/data.ts b/src/scene/data.ts index a3f731997..716f6fdc7 100644 --- a/src/scene/data.ts +++ b/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) { diff --git a/src/scene/scrollbars.ts b/src/scene/scrollbars.ts index b7f767f27..fbd77fb00 100644 --- a/src/scene/scrollbars.ts +++ b/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; diff --git a/src/scene/selection.ts b/src/scene/selection.ts index 256c6fd66..b1fbc13ee 100644 --- a/src/scene/selection.ts +++ b/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 &&