feat: Add option to flip single element on the context menu (#2520)

Co-authored-by: dwelle <luzar.david@gmail.com>

src/tests/flip.test.tsx

@@ -0,0 +1,615 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { render } from "./test-utils";
+import App from "../components/App";
+import { defaultLang, setLanguage } from "../i18n";
+import { UI, Pointer } from "./helpers/ui";
+import { API } from "./helpers/api";
+import { actionFlipHorizontal, actionFlipVertical } from "../actions";
+
+const { h } = window;
+
+const mouse = new Pointer("mouse");
+
+beforeEach(async () => {
+  // Unmount ReactDOM from root
+  ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
+  mouse.reset();
+
+  await setLanguage(defaultLang);
+  render(<App />);
+});
+
+const createAndSelectOneRectangle = (angle: number = 0) => {
+  UI.createElement("rectangle", {
+    x: 0,
+    y: 0,
+    width: 100,
+    height: 50,
+    angle,
+  });
+};
+
+const createAndSelectOneDiamond = (angle: number = 0) => {
+  UI.createElement("diamond", {
+    x: 0,
+    y: 0,
+    width: 100,
+    height: 50,
+    angle,
+  });
+};
+
+const createAndSelectOneEllipse = (angle: number = 0) => {
+  UI.createElement("ellipse", {
+    x: 0,
+    y: 0,
+    width: 100,
+    height: 50,
+    angle,
+  });
+};
+
+const createAndSelectOneArrow = (angle: number = 0) => {
+  UI.createElement("arrow", {
+    x: 0,
+    y: 0,
+    width: 100,
+    height: 50,
+    angle,
+  });
+};
+
+const createAndSelectOneLine = (angle: number = 0) => {
+  UI.createElement("line", {
+    x: 0,
+    y: 0,
+    width: 100,
+    height: 50,
+    angle,
+  });
+};
+
+const createAndReturnOneDraw = (angle: number = 0) => {
+  return UI.createElement("draw", {
+    x: 0,
+    y: 0,
+    width: 50,
+    height: 100,
+    angle,
+  });
+};
+
+// Rectangle element
+
+it("flips an unrotated rectangle horizontally correctly", () => {
+  createAndSelectOneRectangle();
+
+  expect(API.getSelectedElements()[0].x).toEqual(0);
+
+  expect(API.getSelectedElements()[0].y).toEqual(0);
+
+  const originalWidth = API.getSelectedElements()[0].width;
+  const originalHeight = API.getSelectedElements()[0].height;
+
+  h.app.actionManager.executeAction(actionFlipHorizontal);
+
+  // Check if x position did not change
+  expect(API.getSelectedElements()[0].x).toEqual(0);
+
+  expect(API.getSelectedElements()[0].y).toEqual(0);
+
+  // Check if width and height did not change
+  expect(API.getSelectedElements()[0].width).toEqual(originalWidth);
+
+  expect(API.getSelectedElements()[0].height).toEqual(originalHeight);
+});
+
+it("flips an unrotated rectangle vertically correctly", () => {
+  createAndSelectOneRectangle();
+
+  expect(API.getSelectedElements()[0].x).toEqual(0);
+
+  expect(API.getSelectedElements()[0].y).toEqual(0);
+
+  const originalWidth = API.getSelectedElements()[0].width;
+  const originalHeight = API.getSelectedElements()[0].height;
+
+  h.app.actionManager.executeAction(actionFlipVertical);
+
+  // Check if x position did not change
+  expect(API.getSelectedElements()[0].x).toEqual(0);
+
+  expect(API.getSelectedElements()[0].y).toEqual(0);
+
+  // Check if width and height did not change
+  expect(API.getSelectedElements()[0].width).toEqual(originalWidth);
+
+  expect(API.getSelectedElements()[0].height).toEqual(originalHeight);
+});
+
+it("flips a rotated rectangle horizontally correctly", () => {
+  const originalAngle = (3 * Math.PI) / 4;
+  const expectedAngle = (5 * Math.PI) / 4;
+
+  createAndSelectOneRectangle(originalAngle);
+
+  expect(API.getSelectedElements()[0].x).toEqual(0);
+
+  expect(API.getSelectedElements()[0].y).toEqual(0);
+
+  const originalWidth = API.getSelectedElements()[0].width;
+  const originalHeight = API.getSelectedElements()[0].height;
+
+  h.app.actionManager.executeAction(actionFlipHorizontal);
+
+  // Check if x position did not change
+  expect(API.getSelectedElements()[0].x).toEqual(0);
+
+  expect(API.getSelectedElements()[0].y).toEqual(0);
+
+  // Check if width and height did not change
+  expect(API.getSelectedElements()[0].width).toEqual(originalWidth);
+
+  expect(API.getSelectedElements()[0].height).toEqual(originalHeight);
+
+  // Check angle
+  expect(API.getSelectedElements()[0].angle).toBeCloseTo(expectedAngle);
+});
+
+it("flips a rotated rectangle vertically correctly", () => {
+  const originalAngle = (3 * Math.PI) / 4;
+  const expectedAgnle = Math.PI / 4;
+
+  createAndSelectOneRectangle(originalAngle);
+
+  expect(API.getSelectedElements()[0].x).toEqual(0);
+
+  expect(API.getSelectedElements()[0].y).toEqual(0);
+
+  const originalWidth = API.getSelectedElements()[0].width;
+  const originalHeight = API.getSelectedElements()[0].height;
+
+  h.app.actionManager.executeAction(actionFlipVertical);
+
+  // Check if x position did not change
+  expect(API.getSelectedElements()[0].x).toEqual(0);
+
+  expect(API.getSelectedElements()[0].y).toEqual(0);
+
+  // Check if width and height did not change
+  expect(API.getSelectedElements()[0].width).toEqual(originalWidth);
+
+  expect(API.getSelectedElements()[0].height).toEqual(originalHeight);
+
+  // Check angle
+  expect(API.getSelectedElements()[0].angle).toBeCloseTo(expectedAgnle);
+});
+
+// Diamond element
+
+it("flips an unrotated diamond horizontally correctly", () => {
+  createAndSelectOneDiamond();
+
+  expect(API.getSelectedElements()[0].x).toEqual(0);
+
+  expect(API.getSelectedElements()[0].y).toEqual(0);
+
+  const originalWidth = API.getSelectedElements()[0].width;
+  const originalHeight = API.getSelectedElements()[0].height;
+
+  h.app.actionManager.executeAction(actionFlipHorizontal);
+
+  // Check if x position did not change
+  expect(API.getSelectedElements()[0].x).toEqual(0);
+
+  expect(API.getSelectedElements()[0].y).toEqual(0);
+
+  // Check if width and height did not change
+  expect(API.getSelectedElements()[0].width).toEqual(originalWidth);
+
+  expect(API.getSelectedElements()[0].height).toEqual(originalHeight);
+});
+
+it("flips an unrotated diamond vertically correctly", () => {
+  createAndSelectOneDiamond();
+
+  expect(API.getSelectedElements()[0].x).toEqual(0);
+
+  expect(API.getSelectedElements()[0].y).toEqual(0);
+
+  const originalWidth = API.getSelectedElements()[0].width;
+  const originalHeight = API.getSelectedElements()[0].height;
+
+  h.app.actionManager.executeAction(actionFlipVertical);
+
+  // Check if x position did not change
+  expect(API.getSelectedElements()[0].x).toEqual(0);
+
+  expect(API.getSelectedElements()[0].y).toEqual(0);
+
+  // Check if width and height did not change
+  expect(API.getSelectedElements()[0].width).toEqual(originalWidth);
+
+  expect(API.getSelectedElements()[0].height).toEqual(originalHeight);
+});
+
+it("flips a rotated diamond horizontally correctly", () => {
+  const originalAngle = (5 * Math.PI) / 4;
+  const expectedAngle = (3 * Math.PI) / 4;
+
+  createAndSelectOneDiamond(originalAngle);
+
+  expect(API.getSelectedElements()[0].x).toEqual(0);
+
+  expect(API.getSelectedElements()[0].y).toEqual(0);
+
+  const originalWidth = API.getSelectedElements()[0].width;
+  const originalHeight = API.getSelectedElements()[0].height;
+
+  h.app.actionManager.executeAction(actionFlipHorizontal);
+
+  // Check if x position did not change
+  expect(API.getSelectedElements()[0].x).toEqual(0);
+
+  expect(API.getSelectedElements()[0].y).toEqual(0);
+
+  // Check if width and height did not change
+  expect(API.getSelectedElements()[0].width).toEqual(originalWidth);
+
+  expect(API.getSelectedElements()[0].height).toEqual(originalHeight);
+
+  // Check angle
+  expect(API.getSelectedElements()[0].angle).toBeCloseTo(expectedAngle);
+});
+
+it("flips a rotated diamond vertically correctly", () => {
+  const originalAngle = (5 * Math.PI) / 4;
+  const expectedAngle = (7 * Math.PI) / 4;
+
+  createAndSelectOneDiamond(originalAngle);
+
+  expect(API.getSelectedElements()[0].x).toEqual(0);
+
+  expect(API.getSelectedElements()[0].y).toEqual(0);
+
+  const originalWidth = API.getSelectedElements()[0].width;
+  const originalHeight = API.getSelectedElements()[0].height;
+
+  h.app.actionManager.executeAction(actionFlipVertical);
+
+  // Check if x position did not change
+  expect(API.getSelectedElements()[0].x).toEqual(0);
+
+  expect(API.getSelectedElements()[0].y).toEqual(0);
+
+  // Check if width and height did not change
+  expect(API.getSelectedElements()[0].width).toEqual(originalWidth);
+
+  expect(API.getSelectedElements()[0].height).toEqual(originalHeight);
+
+  // Check angle
+  expect(API.getSelectedElements()[0].angle).toBeCloseTo(expectedAngle);
+});
+
+// Ellipse element
+
+it("flips an unrotated ellipse horizontally correctly", () => {
+  createAndSelectOneEllipse();
+
+  expect(API.getSelectedElements()[0].x).toEqual(0);
+
+  expect(API.getSelectedElements()[0].y).toEqual(0);
+
+  const originalWidth = API.getSelectedElements()[0].width;
+  const originalHeight = API.getSelectedElements()[0].height;
+
+  h.app.actionManager.executeAction(actionFlipHorizontal);
+
+  // Check if x position did not change
+  expect(API.getSelectedElements()[0].x).toEqual(0);
+
+  expect(API.getSelectedElements()[0].y).toEqual(0);
+
+  // Check if width and height did not change
+  expect(API.getSelectedElements()[0].width).toEqual(originalWidth);
+
+  expect(API.getSelectedElements()[0].height).toEqual(originalHeight);
+});
+
+it("flips an unrotated ellipse vertically correctly", () => {
+  createAndSelectOneEllipse();
+
+  expect(API.getSelectedElements()[0].x).toEqual(0);
+
+  expect(API.getSelectedElements()[0].y).toEqual(0);
+
+  const originalWidth = API.getSelectedElements()[0].width;
+  const originalHeight = API.getSelectedElements()[0].height;
+
+  h.app.actionManager.executeAction(actionFlipVertical);
+
+  // Check if x position did not change
+  expect(API.getSelectedElements()[0].x).toEqual(0);
+
+  expect(API.getSelectedElements()[0].y).toEqual(0);
+
+  // Check if width and height did not change
+  expect(API.getSelectedElements()[0].width).toEqual(originalWidth);
+
+  expect(API.getSelectedElements()[0].height).toEqual(originalHeight);
+});
+
+it("flips a rotated ellipse horizontally correctly", () => {
+  const originalAngle = (7 * Math.PI) / 4;
+  const expectedAngle = Math.PI / 4;
+
+  createAndSelectOneEllipse(originalAngle);
+
+  expect(API.getSelectedElements()[0].x).toEqual(0);
+
+  expect(API.getSelectedElements()[0].y).toEqual(0);
+
+  const originalWidth = API.getSelectedElements()[0].width;
+  const originalHeight = API.getSelectedElements()[0].height;
+
+  h.app.actionManager.executeAction(actionFlipHorizontal);
+
+  // Check if x position did not change
+  expect(API.getSelectedElements()[0].x).toEqual(0);
+
+  expect(API.getSelectedElements()[0].y).toEqual(0);
+
+  // Check if width and height did not change
+  expect(API.getSelectedElements()[0].width).toEqual(originalWidth);
+
+  expect(API.getSelectedElements()[0].height).toEqual(originalHeight);
+
+  // Check angle
+  expect(API.getSelectedElements()[0].angle).toBeCloseTo(expectedAngle);
+});
+
+it("flips a rotated ellipse vertically correctly", () => {
+  const originalAngle = (7 * Math.PI) / 4;
+  const expectedAngle = (5 * Math.PI) / 4;
+
+  createAndSelectOneEllipse(originalAngle);
+
+  expect(API.getSelectedElements()[0].x).toEqual(0);
+
+  expect(API.getSelectedElements()[0].y).toEqual(0);
+
+  const originalWidth = API.getSelectedElements()[0].width;
+  const originalHeight = API.getSelectedElements()[0].height;
+
+  h.app.actionManager.executeAction(actionFlipVertical);
+
+  // Check if x position did not change
+  expect(API.getSelectedElements()[0].x).toEqual(0);
+
+  expect(API.getSelectedElements()[0].y).toEqual(0);
+
+  // Check if width and height did not change
+  expect(API.getSelectedElements()[0].width).toEqual(originalWidth);
+
+  expect(API.getSelectedElements()[0].height).toEqual(originalHeight);
+
+  // Check angle
+  expect(API.getSelectedElements()[0].angle).toBeCloseTo(expectedAngle);
+});
+
+// Arrow element
+
+it("flips an unrotated arrow horizontally correctly", () => {
+  createAndSelectOneArrow();
+
+  const originalWidth = API.getSelectedElements()[0].width;
+  const originalHeight = API.getSelectedElements()[0].height;
+
+  h.app.actionManager.executeAction(actionFlipHorizontal);
+
+  // Check if width and height did not change
+  expect(API.getSelectedElements()[0].width).toEqual(originalWidth);
+
+  expect(API.getSelectedElements()[0].height).toEqual(originalHeight);
+});
+
+it("flips an unrotated arrow vertically correctly", () => {
+  createAndSelectOneArrow();
+
+  const originalWidth = API.getSelectedElements()[0].width;
+  const originalHeight = API.getSelectedElements()[0].height;
+
+  h.app.actionManager.executeAction(actionFlipVertical);
+
+  // Check if width and height did not change
+  expect(API.getSelectedElements()[0].width).toEqual(originalWidth);
+
+  expect(API.getSelectedElements()[0].height).toEqual(originalHeight);
+});
+
+it("flips a rotated arrow horizontally correctly", () => {
+  const originalAngle = Math.PI / 4;
+  const expectedAngle = (7 * Math.PI) / 4;
+  createAndSelectOneArrow(originalAngle);
+
+  const originalWidth = API.getSelectedElements()[0].width;
+  const originalHeight = API.getSelectedElements()[0].height;
+
+  h.app.actionManager.executeAction(actionFlipHorizontal);
+
+  // Check if width and height did not change
+  expect(API.getSelectedElements()[0].width).toEqual(originalWidth);
+
+  expect(API.getSelectedElements()[0].height).toEqual(originalHeight);
+
+  // Check angle
+  expect(API.getSelectedElements()[0].angle).toBeCloseTo(expectedAngle);
+});
+
+it("flips a rotated arrow vertically correctly", () => {
+  const originalAngle = Math.PI / 4;
+  const expectedAngle = (3 * Math.PI) / 4;
+  createAndSelectOneArrow(originalAngle);
+
+  const originalWidth = API.getSelectedElements()[0].width;
+  const originalHeight = API.getSelectedElements()[0].height;
+
+  h.app.actionManager.executeAction(actionFlipVertical);
+
+  // Check if width and height did not change
+  expect(API.getSelectedElements()[0].width).toEqual(originalWidth);
+
+  expect(API.getSelectedElements()[0].height).toEqual(originalHeight);
+
+  // Check angle
+  expect(API.getSelectedElements()[0].angle).toBeCloseTo(expectedAngle);
+});
+
+// Line element
+
+it("flips an unrotated line horizontally correctly", () => {
+  createAndSelectOneLine();
+
+  const originalWidth = API.getSelectedElements()[0].width;
+  const originalHeight = API.getSelectedElements()[0].height;
+
+  h.app.actionManager.executeAction(actionFlipHorizontal);
+
+  // Check if width and height did not change
+  expect(API.getSelectedElements()[0].width).toEqual(originalWidth);
+
+  expect(API.getSelectedElements()[0].height).toEqual(originalHeight);
+});
+
+it("flips an unrotated line vertically correctly", () => {
+  createAndSelectOneLine();
+
+  const originalWidth = API.getSelectedElements()[0].width;
+  const originalHeight = API.getSelectedElements()[0].height;
+
+  h.app.actionManager.executeAction(actionFlipVertical);
+
+  // Check if width and height did not change
+  expect(API.getSelectedElements()[0].width).toEqual(originalWidth);
+
+  expect(API.getSelectedElements()[0].height).toEqual(originalHeight);
+});
+
+it("flips a rotated line horizontally correctly", () => {
+  const originalAngle = Math.PI / 4;
+  const expectedAngle = (7 * Math.PI) / 4;
+
+  createAndSelectOneLine(originalAngle);
+
+  const originalWidth = API.getSelectedElements()[0].width;
+  const originalHeight = API.getSelectedElements()[0].height;
+
+  h.app.actionManager.executeAction(actionFlipHorizontal);
+
+  // Check if width and height did not change
+  expect(API.getSelectedElements()[0].width).toEqual(originalWidth);
+
+  expect(API.getSelectedElements()[0].height).toEqual(originalHeight);
+
+  // Check angle
+  expect(API.getSelectedElements()[0].angle).toBeCloseTo(expectedAngle);
+});
+
+it("flips a rotated line vertically correctly", () => {
+  const originalAngle = Math.PI / 4;
+  const expectedAngle = (3 * Math.PI) / 4;
+
+  createAndSelectOneLine(originalAngle);
+
+  const originalWidth = API.getSelectedElements()[0].width;
+  const originalHeight = API.getSelectedElements()[0].height;
+
+  h.app.actionManager.executeAction(actionFlipVertical);
+
+  // Check if width and height did not change
+  expect(API.getSelectedElements()[0].width).toEqual(originalWidth);
+
+  expect(API.getSelectedElements()[0].height).toEqual(originalHeight);
+
+  // Check angle
+  expect(API.getSelectedElements()[0].angle).toBeCloseTo(expectedAngle);
+});
+
+// Draw element
+
+it("flips an unrotated drawing horizontally correctly", () => {
+  const draw = createAndReturnOneDraw();
+  // select draw, since not done automatically
+  h.state.selectedElementIds[draw.id] = true;
+
+  const originalWidth = draw.width;
+  const originalHeight = draw.height;
+
+  h.app.actionManager.executeAction(actionFlipHorizontal);
+
+  // Check if width and height did not change
+  expect(draw.width).toEqual(originalWidth);
+
+  expect(draw.height).toEqual(originalHeight);
+});
+
+it("flips an unrotated drawing vertically correctly", () => {
+  const draw = createAndReturnOneDraw();
+  // select draw, since not done automatically
+  h.state.selectedElementIds[draw.id] = true;
+
+  const originalWidth = draw.width;
+  const originalHeight = draw.height;
+
+  h.app.actionManager.executeAction(actionFlipVertical);
+
+  // Check if width and height did not change
+  expect(draw.width).toEqual(originalWidth);
+
+  expect(draw.height).toEqual(originalHeight);
+});
+
+it("flips a rotated drawing horizontally correctly", () => {
+  const originalAngle = Math.PI / 4;
+  const expectedAngle = (7 * Math.PI) / 4;
+
+  const draw = createAndReturnOneDraw(originalAngle);
+  // select draw, since not done automatically
+  h.state.selectedElementIds[draw.id] = true;
+
+  const originalWidth = draw.width;
+  const originalHeight = draw.height;
+
+  h.app.actionManager.executeAction(actionFlipHorizontal);
+
+  // Check if width and height did not change
+  expect(draw.width).toEqual(originalWidth);
+
+  expect(draw.height).toEqual(originalHeight);
+
+  // Check angle
+  expect(draw.angle).toBeCloseTo(expectedAngle);
+});
+
+it("flips a rotated drawing vertically correctly", () => {
+  const originalAngle = Math.PI / 4;
+  const expectedAngle = (3 * Math.PI) / 4;
+
+  const draw = createAndReturnOneDraw(originalAngle);
+  // select draw, since not done automatically
+  h.state.selectedElementIds[draw.id] = true;
+
+  const originalWidth = draw.width;
+  const originalHeight = draw.height;
+
+  h.app.actionManager.executeAction(actionFlipVertical);
+
+  // Check if width and height did not change
+  expect(API.getSelectedElement().width).toEqual(originalWidth);
+
+  expect(API.getSelectedElement().height).toEqual(originalHeight);
+
+  // Check angle
+  expect(API.getSelectedElement().angle).toBeCloseTo(expectedAngle);
+});

src/tests/helpers/ui.ts

@@ -6,6 +6,7 @@ import {
 import { CODES } from "../../keys";
 import { ToolName } from "../queries/toolQueries";
 import { fireEvent, GlobalTestState } from "../test-utils";
+import { mutateElement } from "../../element/mutateElement";
 import { API } from "./api";
 
 const { h } = window;
@@ -202,6 +203,7 @@ export class UI {
       size = 10,
       width = size,
       height = width,
+      angle = 0,
     }: {
       position?: number;
       x?: number;
@@ -209,6 +211,7 @@ export class UI {
       size?: number;
       width?: number;
       height?: number;
+      angle?: number;
     } = {},
   ): (T extends "arrow" | "line" | "draw"
     ? ExcalidrawLinearElement
@@ -231,6 +234,10 @@ export class UI {
 
     const origElement = h.elements[h.elements.length - 1] as any;
 
+    if (angle !== 0) {
+      mutateElement(origElement, { angle });
+    }
+
     return new Proxy(
       {},
       {

src/tests/regressionTests.test.tsx

@@ -653,6 +653,8 @@ describe("regression tests", () => {
       "pasteStyles",
       "deleteSelectedElements",
       "addToLibrary",
+      "flipHorizontal",
+      "flipVertical",
       "sendBackward",
       "bringForward",
       "sendToBack",