Merge remote-tracking branch 'origin/release' into danieljgeiger-mathjax

src/tests/__snapshots__/linearElementEditor.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Test Linear Elements Test bound text element should match styles for te
   class="excalidraw-wysiwyg"
   data-type="wysiwyg"
   dir="auto"
-  style="position: absolute; display: inline-block; min-height: 1em; margin: 0px; padding: 0px; border: 0px; outline: 0; resize: none; background: transparent; overflow: hidden; z-index: var(--zIndex-wysiwyg); word-break: break-word; white-space: pre-wrap; overflow-wrap: break-word; box-sizing: content-box; width: 10.5px; height: 24px; left: 35px; top: 8px; transform-origin: 5px 12px; transform: translate(0px, 0px) scale(1) rotate(0deg) translate(0px, 0px); text-align: center; vertical-align: middle; color: rgb(0, 0, 0); opacity: 1; filter: var(--theme-filter); max-height: -8px; font: Emoji 20px 20px; line-height: 24px; font-family: Virgil, Segoe UI Emoji;"
+  style="position: absolute; display: inline-block; min-height: 1em; margin: 0px; padding: 0px; border: 0px; outline: 0; resize: none; background: transparent; overflow: hidden; z-index: var(--zIndex-wysiwyg); word-break: break-word; white-space: pre-wrap; overflow-wrap: break-word; box-sizing: content-box; width: 10.5px; height: 25px; left: 35px; top: 7.5px; transform-origin: 5px 12.5px; transform: translate(0px, 0px) scale(1) rotate(0deg) translate(0px, 0px); text-align: center; vertical-align: middle; color: rgb(0, 0, 0); opacity: 1; filter: var(--theme-filter); max-height: -7.5px; font: Emoji 20px 20px; line-height: 1.25; font-family: Virgil, Segoe UI Emoji;"
   tabindex="0"
   wrap="off"
 />

src/tests/binding.test.tsx

@@ -4,6 +4,7 @@ import { UI, Pointer, Keyboard } from "./helpers/ui";
 import { getTransformHandles } from "../element/transformHandles";
 import { API } from "./helpers/api";
 import { KEYS } from "../keys";
+import { actionCreateContainerFromText } from "../actions/actionBoundText";
 
 const { h } = window;
 
@@ -209,4 +210,103 @@ describe("element binding", () => {
     ).toBe(null);
     expect(arrow.endBinding?.elementId).toBe(text.id);
   });
+
+  it("should update binding when text containerized", async () => {
+    const rectangle1 = API.createElement({
+      type: "rectangle",
+      id: "rectangle1",
+      width: 100,
+      height: 100,
+      boundElements: [
+        { id: "arrow1", type: "arrow" },
+        { id: "arrow2", type: "arrow" },
+      ],
+    });
+
+    const arrow1 = API.createElement({
+      type: "arrow",
+      id: "arrow1",
+      points: [
+        [0, 0],
+        [0, -87.45777932247563],
+      ],
+      startBinding: {
+        elementId: "rectangle1",
+        focus: 0.2,
+        gap: 7,
+      },
+      endBinding: {
+        elementId: "text1",
+        focus: 0.2,
+        gap: 7,
+      },
+    });
+
+    const arrow2 = API.createElement({
+      type: "arrow",
+      id: "arrow2",
+      points: [
+        [0, 0],
+        [0, -87.45777932247563],
+      ],
+      startBinding: {
+        elementId: "text1",
+        focus: 0.2,
+        gap: 7,
+      },
+      endBinding: {
+        elementId: "rectangle1",
+        focus: 0.2,
+        gap: 7,
+      },
+    });
+
+    const text1 = API.createElement({
+      type: "text",
+      id: "text1",
+      text: "ola",
+      boundElements: [
+        { id: "arrow1", type: "arrow" },
+        { id: "arrow2", type: "arrow" },
+      ],
+    });
+
+    h.elements = [rectangle1, arrow1, arrow2, text1];
+
+    API.setSelectedElements([text1]);
+
+    expect(h.state.selectedElementIds[text1.id]).toBe(true);
+
+    h.app.actionManager.executeAction(actionCreateContainerFromText);
+
+    // new text container will be placed before the text element
+    const container = h.elements.at(-2)!;
+
+    expect(container.type).toBe("rectangle");
+    expect(container.id).not.toBe(rectangle1.id);
+
+    expect(container).toEqual(
+      expect.objectContaining({
+        boundElements: expect.arrayContaining([
+          {
+            type: "text",
+            id: text1.id,
+          },
+          {
+            type: "arrow",
+            id: arrow1.id,
+          },
+          {
+            type: "arrow",
+            id: arrow2.id,
+          },
+        ]),
+      }),
+    );
+
+    expect(arrow1.startBinding?.elementId).toBe(rectangle1.id);
+    expect(arrow1.endBinding?.elementId).toBe(container.id);
+    expect(arrow2.startBinding?.elementId).toBe(container.id);
+    expect(arrow2.endBinding?.elementId).toBe(rectangle1.id);
+  });
 });

src/tests/clipboard.test.tsx

@@ -3,8 +3,10 @@ import { render, waitFor, GlobalTestState } from "./test-utils";
 import { Pointer, Keyboard } from "./helpers/ui";
 import ExcalidrawApp from "../excalidraw-app";
 import { KEYS } from "../keys";
-import { getApproxLineHeight } from "../element/textElement";
-import { getFontString } from "../utils";
+import {
+  getDefaultLineHeight,
+  getLineHeightInPx,
+} from "../element/textElement";
 import { getElementBounds } from "../element";
 import { NormalizedZoomValue } from "../types";
 
@@ -118,12 +120,10 @@ describe("paste text as single lines", () => {
 
   it("should space items correctly", async () => {
     const text = "hkhkjhki\njgkjhffjh\njgkjhffjh";
-    const lineHeight =
-      getApproxLineHeight(
-        getFontString({
-          fontSize: h.app.state.currentItemFontSize,
-          fontFamily: h.app.state.currentItemFontFamily,
-        }),
+    const lineHeightPx =
+      getLineHeightInPx(
+        h.app.state.currentItemFontSize,
+        getDefaultLineHeight(h.state.currentItemFontFamily),
       ) +
       10 / h.app.state.zoom.value;
     mouse.moveTo(100, 100);
@@ -135,19 +135,17 @@ describe("paste text as single lines", () => {
       for (let i = 1; i < h.elements.length; i++) {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const [fx, elY] = getElementBounds(h.elements[i]);
-        expect(elY).toEqual(firstElY + lineHeight * i);
+        expect(elY).toEqual(firstElY + lineHeightPx * i);
       }
     });
   });
 
   it("should leave a space for blank new lines", async () => {
     const text = "hkhkjhki\n\njgkjhffjh";
-    const lineHeight =
-      getApproxLineHeight(
-        getFontString({
-          fontSize: h.app.state.currentItemFontSize,
-          fontFamily: h.app.state.currentItemFontFamily,
-        }),
+    const lineHeightPx =
+      getLineHeightInPx(
+        h.app.state.currentItemFontSize,
+        getDefaultLineHeight(h.state.currentItemFontFamily),
       ) +
       10 / h.app.state.zoom.value;
     mouse.moveTo(100, 100);
@@ -158,7 +156,7 @@ describe("paste text as single lines", () => {
       const [fx, firstElY] = getElementBounds(h.elements[0]);
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       const [lx, lastElY] = getElementBounds(h.elements[1]);
-      expect(lastElY).toEqual(firstElY + lineHeight * 2);
+      expect(lastElY).toEqual(firstElY + lineHeightPx * 2);
     });
   });
 });
@@ -224,7 +222,7 @@ describe("Paste bound text container", () => {
       await sleep(1);
       expect(h.elements.length).toEqual(2);
       const container = h.elements[0];
-      expect(container.height).toBe(354);
+      expect(container.height).toBe(368);
       expect(container.width).toBe(166);
     });
   });
@@ -247,7 +245,7 @@ describe("Paste bound text container", () => {
       await sleep(1);
       expect(h.elements.length).toEqual(2);
       const container = h.elements[0];
-      expect(container.height).toBe(740);
+      expect(container.height).toBe(770);
       expect(container.width).toBe(166);
     });
   });

src/tests/data/__snapshots__/restore.test.ts.snap

@@ -291,6 +291,7 @@ Object {
   "height": 100,
   "id": "id-text01",
   "isDeleted": false,
+  "lineHeight": 1.25,
   "link": null,
   "locked": false,
   "opacity": 100,
@@ -312,7 +313,7 @@ Object {
   "verticalAlign": "middle",
   "width": 100,
   "x": -20,
-  "y": -8.4,
+  "y": -8.75,
 }
 `;
 
@@ -329,6 +330,7 @@ Object {
   "height": 100,
   "id": "id-text01",
   "isDeleted": false,
+  "lineHeight": 1.25,
   "link": null,
   "locked": false,
   "opacity": 100,

src/tests/fitToContent.test.tsx

@@ -0,0 +1,189 @@
+import { render } from "./test-utils";
+import { API } from "./helpers/api";
+
+import ExcalidrawApp from "../excalidraw-app";
+
+const { h } = window;
+
+describe("fitToContent", () => {
+  it("should zoom to fit the selected element", async () => {
+    await render(<ExcalidrawApp />);
+
+    h.state.width = 10;
+    h.state.height = 10;
+
+    const rectElement = API.createElement({
+      width: 50,
+      height: 100,
+      x: 50,
+      y: 100,
+    });
+
+    expect(h.state.zoom.value).toBe(1);
+
+    h.app.scrollToContent(rectElement, { fitToContent: true });
+
+    // element is 10x taller than the viewport size,
+    // zoom should be at least 1/10
+    expect(h.state.zoom.value).toBeLessThanOrEqual(0.1);
+  });
+
+  it("should zoom to fit multiple elements", async () => {
+    await render(<ExcalidrawApp />);
+
+    const topLeft = API.createElement({
+      width: 20,
+      height: 20,
+      x: 0,
+      y: 0,
+    });
+
+    const bottomRight = API.createElement({
+      width: 20,
+      height: 20,
+      x: 80,
+      y: 80,
+    });
+
+    h.state.width = 10;
+    h.state.height = 10;
+
+    expect(h.state.zoom.value).toBe(1);
+
+    h.app.scrollToContent([topLeft, bottomRight], {
+      fitToContent: true,
+    });
+
+    // elements take 100x100, which is 10x bigger than the viewport size,
+    // zoom should be at least 1/10
+    expect(h.state.zoom.value).toBeLessThanOrEqual(0.1);
+  });
+
+  it("should scroll the viewport to the selected element", async () => {
+    await render(<ExcalidrawApp />);
+
+    h.state.width = 10;
+    h.state.height = 10;
+
+    const rectElement = API.createElement({
+      width: 100,
+      height: 100,
+      x: 100,
+      y: 100,
+    });
+
+    expect(h.state.zoom.value).toBe(1);
+    expect(h.state.scrollX).toBe(0);
+    expect(h.state.scrollY).toBe(0);
+
+    h.app.scrollToContent(rectElement);
+
+    // zoom level should stay the same
+    expect(h.state.zoom.value).toBe(1);
+
+    // state should reflect some scrolling
+    expect(h.state.scrollX).not.toBe(0);
+    expect(h.state.scrollY).not.toBe(0);
+  });
+});
+
+const waitForNextAnimationFrame = () => {
+  return new Promise((resolve) => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(resolve);
+    });
+  });
+};
+
+describe("fitToContent animated", () => {
+  beforeEach(() => {
+    jest.spyOn(window, "requestAnimationFrame");
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("should ease scroll the viewport to the selected element", async () => {
+    await render(<ExcalidrawApp />);
+
+    h.state.width = 10;
+    h.state.height = 10;
+
+    const rectElement = API.createElement({
+      width: 100,
+      height: 100,
+      x: -100,
+      y: -100,
+    });
+
+    h.app.scrollToContent(rectElement, { animate: true });
+
+    expect(window.requestAnimationFrame).toHaveBeenCalled();
+
+    // Since this is an animation, we expect values to change through time.
+    // We'll verify that the scroll values change at 50ms and 100ms
+    expect(h.state.scrollX).toBe(0);
+    expect(h.state.scrollY).toBe(0);
+
+    await waitForNextAnimationFrame();
+
+    const prevScrollX = h.state.scrollX;
+    const prevScrollY = h.state.scrollY;
+
+    expect(h.state.scrollX).not.toBe(0);
+    expect(h.state.scrollY).not.toBe(0);
+
+    await waitForNextAnimationFrame();
+
+    expect(h.state.scrollX).not.toBe(prevScrollX);
+    expect(h.state.scrollY).not.toBe(prevScrollY);
+  });
+
+  it("should animate the scroll but not the zoom", async () => {
+    await render(<ExcalidrawApp />);
+
+    h.state.width = 50;
+    h.state.height = 50;
+
+    const rectElement = API.createElement({
+      width: 100,
+      height: 100,
+      x: 100,
+      y: 100,
+    });
+
+    expect(h.state.scrollX).toBe(0);
+    expect(h.state.scrollY).toBe(0);
+
+    h.app.scrollToContent(rectElement, { animate: true, fitToContent: true });
+
+    expect(window.requestAnimationFrame).toHaveBeenCalled();
+
+    // Since this is an animation, we expect values to change through time.
+    // We'll verify that the zoom/scroll values change in each animation frame
+
+    // zoom is not animated, it should be set to its final value, which in our
+    // case zooms out to 50% so that th element is fully visible (it's 2x large
+    // as the canvas)
+    expect(h.state.zoom.value).toBeLessThanOrEqual(0.5);
+
+    // FIXME I think this should be [-100, -100] so we may have a bug in our zoom
+    // hadnling, alas
+    expect(h.state.scrollX).toBe(25);
+    expect(h.state.scrollY).toBe(25);
+
+    await waitForNextAnimationFrame();
+
+    const prevScrollX = h.state.scrollX;
+    const prevScrollY = h.state.scrollY;
+
+    expect(h.state.scrollX).not.toBe(0);
+    expect(h.state.scrollY).not.toBe(0);
+
+    await waitForNextAnimationFrame();
+
+    expect(h.state.scrollX).not.toBe(prevScrollX);
+    expect(h.state.scrollY).not.toBe(prevScrollY);
+  });
+});

src/tests/helpers/api.ts

@@ -139,6 +139,9 @@ export class API {
     fileId?: T extends "image" ? string : never;
     scale?: T extends "image" ? ExcalidrawImageElement["scale"] : never;
     status?: T extends "image" ? ExcalidrawImageElement["status"] : never;
+    startBinding?: T extends "arrow"
+      ? ExcalidrawLinearElement["startBinding"]
+      : never;
     endBinding?: T extends "arrow"
       ? ExcalidrawLinearElement["endBinding"]
       : never;
@@ -215,11 +218,13 @@ export class API {
         });
         break;
       case "text":
+        const fontSize = rest.fontSize ?? appState.currentItemFontSize;
+        const fontFamily = rest.fontFamily ?? appState.currentItemFontFamily;
         element = newTextElement({
           ...base,
           text: rest.text || "test",
-          fontSize: rest.fontSize ?? appState.currentItemFontSize,
-          fontFamily: rest.fontFamily ?? appState.currentItemFontFamily,
+          fontSize,
+          fontFamily,
           textAlign: rest.textAlign ?? appState.currentItemTextAlign,
           verticalAlign: rest.verticalAlign ?? DEFAULT_VERTICAL_ALIGN,
           containerId: rest.containerId ?? undefined,
@@ -258,6 +263,10 @@ export class API {
         });
         break;
     }
+    if (element.type === "arrow") {
+      element.startBinding = rest.startBinding ?? null;
+      element.endBinding = rest.endBinding ?? null;
+    }
     if (id) {
       element.id = id;
     }

src/tests/linearElementEditor.test.tsx

@@ -1031,7 +1031,7 @@ describe("Test Linear Elements", () => {
       expect({ width: container.width, height: container.height })
         .toMatchInlineSnapshot(`
         Object {
-          "height": 128,
+          "height": 130,
           "width": 367,
         }
       `);
@@ -1040,7 +1040,7 @@ describe("Test Linear Elements", () => {
         .toMatchInlineSnapshot(`
         Object {
           "x": 272,
-          "y": 46,
+          "y": 45,
         }
       `);
       expect((h.elements[1] as ExcalidrawTextElementWithContainer).text)
@@ -1052,11 +1052,11 @@ describe("Test Linear Elements", () => {
         .toMatchInlineSnapshot(`
         Array [
           20,
-          36,
+          35,
           502,
-          94,
+          95,
           205.9061448421403,
-          53,
+          52.5,
         ]
       `);
     });
@@ -1090,7 +1090,7 @@ describe("Test Linear Elements", () => {
       expect({ width: container.width, height: container.height })
         .toMatchInlineSnapshot(`
         Object {
-          "height": 128,
+          "height": 130,
           "width": 340,
         }
       `);
@@ -1099,7 +1099,7 @@ describe("Test Linear Elements", () => {
         .toMatchInlineSnapshot(`
         Object {
           "x": 75,
-          "y": -4,
+          "y": -5,
         }
       `);
       expect(textElement.text).toMatchInlineSnapshot(`

src/tests/subtypes.test.tsx

@@ -163,7 +163,8 @@ const measureTest2: SubtypeMethods["measureText"] = function (element, next) {
     : next?.fontSize ?? element.fontSize;
   const fontFamily = element.fontFamily;
   const fontString = getFontString({ fontSize, fontFamily });
-  const metrics = textElementUtils.measureText(text, fontString);
+  const lineHeight = element.lineHeight;
+  const metrics = textElementUtils.measureText(text, fontString, lineHeight);
   const width = Math.max(metrics.width - 10, 0);
   const height = Math.max(metrics.height - 5, 0);
   return { width, height, baseline: 1 };
@@ -410,11 +411,7 @@ describe("subtypes", () => {
       }),
     ];
     await render(<ExcalidrawApp />, { localStorageData: { elements } });
-    const mockMeasureText = (
-      text: string,
-      font: FontString,
-      maxWidth?: number | null,
-    ) => {
+    const mockMeasureText = (text: string, font: FontString) => {
       if (text === testString) {
         let multiplier = 1;
         if (font.includes(`${DBFONTSIZE}`)) {
@@ -423,9 +420,7 @@ describe("subtypes", () => {
         if (font.includes(`${TRFONTSIZE}`)) {
           multiplier = 3;
         }
-        const width = maxWidth
-          ? Math.min(multiplier * TWIDTH, maxWidth)
-          : multiplier * TWIDTH;
+        const width = multiplier * TWIDTH;
         const height = multiplier * THEIGHT;
         const baseline = multiplier * TBASELINE;
         return { width, height, baseline };