wip2

* fix: Temp fix for elbow arrow at restore

Co-authored-by: Copilot <copilot@github.com>
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

* fix: Speculative fixes to avoid Infinity

Co-authored-by: Copilot <copilot@github.com>
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

* validate/remove arrow size after point normalization & move binding repairs back

* validate even simple arrows

* remove x/y check

* remove duplicate constant

---------

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
Co-authored-by: Copilot <copilot@github.com>
Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>

.codesandbox/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18-bullseye
+FROM node:24-bullseye
 
 # Vite wants to open the browser using `open`, so we
 # need to install those utils.

Dockerfile

@@ -1,4 +1,4 @@
-FROM --platform=${BUILDPLATFORM} node:18 AS build
+FROM --platform=${BUILDPLATFORM} node:24 AS build
 
 WORKDIR /opt/node_app
 
@@ -13,7 +13,7 @@ ARG NODE_ENV=production
 
 RUN npm_config_target_arch=${TARGETARCH} yarn build:app:docker
 
-FROM --platform=${TARGETPLATFORM} nginx:1.27-alpine
+FROM nginx:1.27-alpine
 
 COPY --from=build /opt/node_app/excalidraw-app/build /usr/share/nginx/html
 

README.md

@@ -29,7 +29,7 @@
   <a href="https://docs.excalidraw.com/docs/introduction/contributing">
     <img alt="PRs welcome!" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat"  /></a>
   <a href="https://discord.gg/UexuTaE">
-    <img alt="Chat on Discord" src="https://img.shields.io/discord/723672430744174682?color=738ad6&label=Chat%20on%20Discord&logo=discord&logoColor=ffffff&widge=false"/></a>
+    <img alt="Chat on Discord" src="https://img.shields.io/discord/723672430744174682?color=738ad6&label=Chat%20on%20Discord&logo=discord&logoColor=ffffff&widget=false"/></a>
   <a href="https://deepwiki.com/excalidraw/excalidraw">
     <img alt="Ask DeepWiki" src="https://deepwiki.com/badge.svg" /></a>
   <a href="https://twitter.com/excalidraw">

dev-docs/docusaurus.config.js

@@ -97,8 +97,8 @@ const config = {
                 href: "https://discord.gg/UexuTaE",
               },
               {
-                label: "Twitter",
-                href: "https://twitter.com/excalidraw",
+                label: "𝕏",
+                href: "https://x.com/excalidraw",
               },
               {
                 label: "Linkedin",

packages/element/src/binding.ts

@@ -1943,9 +1943,9 @@ export const calculateFixedPointForElbowArrowBinding = (
   return {
     fixedPoint: normalizeFixedPoint([
       (nonRotatedSnappedGlobalPoint[0] - hoveredElement.x) /
-        hoveredElement.width,
+        Math.max(hoveredElement.width, PRECISION),
       (nonRotatedSnappedGlobalPoint[1] - hoveredElement.y) /
-        hoveredElement.height,
+        Math.max(hoveredElement.height, PRECISION),
     ]),
   };
 };
@@ -1976,9 +1976,11 @@ export const calculateFixedPointForNonElbowArrowBinding = (
 
   // Calculate the ratio relative to the element's bounds
   const fixedPointX =
-    (nonRotatedPoint[0] - hoveredElement.x) / hoveredElement.width;
+    (nonRotatedPoint[0] - hoveredElement.x) /
+    Math.max(hoveredElement.width, PRECISION);
   const fixedPointY =
-    (nonRotatedPoint[1] - hoveredElement.y) / hoveredElement.height;
+    (nonRotatedPoint[1] - hoveredElement.y) /
+    Math.max(hoveredElement.height, PRECISION);
 
   return {
     fixedPoint: normalizeFixedPoint([fixedPointX, fixedPointY]),

packages/element/src/elbowArrow.ts

@@ -2124,8 +2124,8 @@ const normalizeArrowElementUpdate = (
     offsetY < -MAX_POS ||
     offsetY > MAX_POS ||
     offsetX + points[points.length - 1][0] < -MAX_POS ||
-    offsetY + points[points.length - 1][0] > MAX_POS ||
-    offsetX + points[points.length - 1][1] < -MAX_POS ||
+    offsetX + points[points.length - 1][0] > MAX_POS ||
+    offsetY + points[points.length - 1][1] < -MAX_POS ||
     offsetY + points[points.length - 1][1] > MAX_POS
   ) {
     console.error(

packages/excalidraw/components/App.tsx

@@ -603,6 +603,55 @@ const YOUTUBE_VIDEO_STATES = new Map<
   ValueOf<typeof YOUTUBE_STATES>
 >();
 
+const isGoogleDrivePreviewLink = (link: string | null | undefined) => {
+  if (!link) {
+    return false;
+  }
+
+  try {
+    const url = new URL(link);
+    return (
+      url.hostname === "drive.google.com" &&
+      /^\/file\/d\/[^/]+\/preview\/?$/.test(url.pathname)
+    );
+  } catch {
+    return false;
+  }
+};
+
+const isGoogleDriveEmbeddableElement = (
+  element: ExcalidrawElement | null | undefined,
+) => {
+  if (!isEmbeddableElement(element)) {
+    return false;
+  }
+
+  const embedLink = getEmbedLink(toValidURL(element.link || ""));
+  return (
+    embedLink?.type === "video" && isGoogleDrivePreviewLink(embedLink.link)
+  );
+};
+
+const EMBEDDABLE_CANVAS_GUARD_CLASS = "excalidraw__embeddable-canvas-guard";
+const EMBEDDABLE_CANVAS_GUARDS = [
+  {
+    key: "top",
+    style: { top: 0, left: 0, right: 0, height: "33.333%" },
+  },
+  {
+    key: "bottom",
+    style: { bottom: 0, left: 0, right: 0, height: "33.333%" },
+  },
+  {
+    key: "left",
+    style: { top: "33.333%", bottom: "33.333%", left: 0, width: "33.333%" },
+  },
+  {
+    key: "right",
+    style: { top: "33.333%", bottom: "33.333%", right: 0, width: "33.333%" },
+  },
+] as const;
+
 let IS_PLAIN_PASTE = false;
 let IS_PLAIN_PASTE_TIMER = 0;
 let PLAIN_PASTE_TOAST_SHOWN = false;
@@ -1283,6 +1332,46 @@ class App extends React.Component<AppProps, AppState> {
     return this.iFrameRefs.get(element.id);
   }
 
+  private deactivateActiveEmbeddable = () => {
+    if (this.state.activeEmbeddable) {
+      flushSync(() => {
+        this.setState({ activeEmbeddable: null });
+      });
+    }
+  };
+
+  private handleEmbeddableCanvasGuardPointerDown = (
+    event: React.PointerEvent<HTMLDivElement>,
+  ) => {
+    this.deactivateActiveEmbeddable();
+    this.handleCanvasPointerDown(event);
+  };
+
+  private handleEmbeddableCanvasGuardPointerMove = (
+    event: React.PointerEvent<HTMLDivElement>,
+  ) => {
+    this.lastViewportPosition.x = event.clientX;
+    this.lastViewportPosition.y = event.clientY;
+    this.deactivateActiveEmbeddable();
+  };
+
+  private handleEmbeddableCanvasGuardTouchStart = (
+    event: React.TouchEvent<HTMLDivElement>,
+  ) => {
+    if (event.touches.length >= 2) {
+      this.deactivateActiveEmbeddable();
+    }
+  };
+
+  private handleEmbeddableCanvasGuardWheel = (
+    event: React.WheelEvent<HTMLDivElement>,
+  ) => {
+    this.lastViewportPosition.x = event.clientX;
+    this.lastViewportPosition.y = event.clientY;
+    this.deactivateActiveEmbeddable();
+    this.handleWheel(event);
+  };
+
   private handleIframeLikeElementHover = ({
     hitElement,
     scenePointer,
@@ -1305,12 +1394,25 @@ class App extends React.Component<AppProps, AppState> {
         ))
     ) {
       setCursor(this.interactiveCanvas, CURSOR_TYPE.POINTER);
+      const isDriveEmbedActivating =
+        (this.state.viewModeEnabled ||
+          this.state.activeTool.type === "selection") &&
+        isGoogleDriveEmbeddableElement(hitElement);
       this.setState({
-        activeEmbeddable: { element: hitElement, state: "hover" },
+        activeEmbeddable: {
+          element: hitElement,
+          state: isDriveEmbedActivating ? "active" : "hover",
+        },
       });
       return true;
     } else if (this.state.activeEmbeddable?.state === "hover") {
       this.setState({ activeEmbeddable: null });
+    } else if (
+      this.state.activeEmbeddable?.state === "active" &&
+      isGoogleDriveEmbeddableElement(this.state.activeEmbeddable.element) &&
+      this.state.activeEmbeddable.element !== hitElement
+    ) {
+      this.setState({ activeEmbeddable: null });
     }
     return false;
   };
@@ -1734,6 +1836,8 @@ class App extends React.Component<AppProps, AppState> {
           const isHovered =
             this.state.activeEmbeddable?.element === el &&
             this.state.activeEmbeddable?.state === "hover";
+          const shouldConstrainDriveInteraction =
+            isActive && isGoogleDriveEmbeddableElement(el);
 
           return (
             <div
@@ -1785,6 +1889,7 @@ class App extends React.Component<AppProps, AppState> {
                   width: isVisible ? `${el.width}px` : 0,
                   height: isVisible ? `${el.height}px` : 0,
                   transform: isVisible ? `rotate(${el.angle}rad)` : "none",
+                  position: "relative",
                   pointerEvents: isActive
                     ? POINTER_EVENTS.enabled
                     : POINTER_EVENTS.disabled,
@@ -1827,6 +1932,26 @@ class App extends React.Component<AppProps, AppState> {
                     />
                   )}
                 </div>
+                {shouldConstrainDriveInteraction &&
+                  EMBEDDABLE_CANVAS_GUARDS.map(({ key, style }) => (
+                    <div
+                      key={key}
+                      className={EMBEDDABLE_CANVAS_GUARD_CLASS}
+                      onPointerDown={
+                        this.handleEmbeddableCanvasGuardPointerDown
+                      }
+                      onPointerMove={
+                        this.handleEmbeddableCanvasGuardPointerMove
+                      }
+                      onTouchStart={this.handleEmbeddableCanvasGuardTouchStart}
+                      onWheel={this.handleEmbeddableCanvasGuardWheel}
+                      style={{
+                        position: "absolute",
+                        zIndex: 2,
+                        ...style,
+                      }}
+                    />
+                  ))}
               </div>
             </div>
           );
@@ -4733,6 +4858,16 @@ class App extends React.Component<AppProps, AppState> {
         });
       }
 
+      if (
+        this.state.activeEmbeddable &&
+        (event.ctrlKey ||
+          event.metaKey ||
+          event.key === "Control" ||
+          event.key === "Meta")
+      ) {
+        this.setState({ activeEmbeddable: null });
+      }
+
       if (!isInputLike(event.target)) {
         if (
           (event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) &&
@@ -5611,6 +5746,10 @@ class App extends React.Component<AppProps, AppState> {
         selectedElementIds: makeNextSelectedElementIds({}, this.state),
         activeEmbeddable: null,
       });
+    } else if (this.state.activeEmbeddable) {
+      this.setState({
+        activeEmbeddable: null,
+      });
     }
     gesture.initialScale = this.state.zoom.value;
   });
@@ -8165,6 +8304,10 @@ class App extends React.Component<AppProps, AppState> {
       y: event.clientY,
     });
 
+    if (gesture.pointers.size >= 2 && this.state.activeEmbeddable) {
+      this.setState({ activeEmbeddable: null });
+    }
+
     if (gesture.pointers.size === 2) {
       gesture.lastCenter = getCenter(gesture.pointers);
       gesture.initialScale = this.state.zoom.value;
@@ -12584,7 +12727,8 @@ class App extends React.Component<AppProps, AppState> {
           event.target instanceof HTMLTextAreaElement ||
           event.target instanceof HTMLIFrameElement ||
           (event.target instanceof HTMLElement &&
-            event.target.classList.contains(CLASSES.FRAME_NAME))
+            (event.target.classList.contains(CLASSES.FRAME_NAME) ||
+              event.target.classList.contains(EMBEDDABLE_CANVAS_GUARD_CLASS)))
         )
       ) {
         // prevent zooming the browser (but allow scrolling DOM)

packages/excalidraw/data/restore.ts

@@ -96,6 +96,8 @@ type RestoredAppState = Omit<
   "offsetTop" | "offsetLeft" | "width" | "height"
 >;
 
+const MAX_ARROW_PX = 75_000;
+
 export const AllowedExcalidrawActiveTools: Record<
   AppState["activeTool"]["type"],
   boolean
@@ -467,8 +469,8 @@ export const restoreElement = (
         element.endArrowhead === undefined
           ? "arrow"
           : normalizeArrowhead(element.endArrowhead);
-      const x: number | undefined = element.x;
-      const y: number | undefined = element.y;
+      const x = element.x as number | undefined;
+      const y = element.y as number | undefined;
       const points: readonly LocalPoint[] | undefined = // migrate old arrow model to new one
         !Array.isArray(element.points) || element.points.length < 2
           ? [pointFrom(0, 0), pointFrom(element.width, element.height)]
@@ -493,8 +495,8 @@ export const restoreElement = (
         startArrowhead,
         endArrowhead,
         points,
-        x,
-        y,
+        x: x ?? 0,
+        y: y ?? 0,
         elbowed: (element as ExcalidrawArrowElement).elbowed,
         ...getSizeFromPoints(points),
       };
@@ -513,12 +515,44 @@ export const restoreElement = (
           })
         : restoreElementWithProperties(element as ExcalidrawArrowElement, base);
 
-      return {
+      const normalizedRestoredElement = {
         ...restoredElement,
         ...LinearElementEditor.getNormalizeElementPointsAndCoords(
           restoredElement,
         ),
       };
+
+      // Last resort fix for extremely large arrows
+      if (
+        normalizedRestoredElement.width > MAX_ARROW_PX ||
+        normalizedRestoredElement.height > MAX_ARROW_PX
+      ) {
+        console.error(
+          `Removing extremely large arrow ${
+            normalizedRestoredElement.id
+          } (type: ${
+            isElbowArrow(normalizedRestoredElement) ? "elbow" : "simple"
+          }, width: ${normalizedRestoredElement.width}, height: ${
+            normalizedRestoredElement.height
+          }, x: ${normalizedRestoredElement.x}, y: ${
+            normalizedRestoredElement.y
+          })`,
+        );
+        return {
+          ...normalizedRestoredElement,
+          x: 0,
+          y: 0,
+          width: 100,
+          height: 100,
+          points: [
+            pointFrom<LocalPoint>(0, 0),
+            pointFrom<LocalPoint>(100, 100),
+          ],
+          isDeleted: true,
+        };
+      }
+
+      return normalizedRestoredElement;
     }
 
     // generic elements
@@ -666,6 +700,7 @@ export const restoreElements = <T extends ExcalidrawElement>(
   const existingElementsMap = existingElements
     ? arrayToMap(existingElements)
     : null;
+
   const restoredElements = syncInvalidIndices(
     (targetElements || []).reduce((elements, element) => {
       // filtering out selection, which is legacy, no longer kept in elements,
@@ -762,7 +797,7 @@ export const restoreElements = <T extends ExcalidrawElement>(
     }
   }
 
-  // NOTE (mtolmacs): Temporary fix for extremely large arrows
+  // NOTE (mtolmacs): Temporary fix for invalid/self-bound elbow arrows
   // Need to iterate again so we have attached text nodes in elementsMap
   return restoredElements.map((element) => {
     if (

packages/excalidraw/tests/embeddable.test.tsx

@@ -0,0 +1,315 @@
+import { Excalidraw } from "../index";
+
+import { Pointer } from "./helpers/ui";
+import { act, fireEvent, GlobalTestState, render, waitFor } from "./test-utils";
+
+import type { ExcalidrawProps } from "../types";
+
+describe("embeddable interactions", () => {
+  const h = window.h;
+  const mouse = new Pointer("mouse");
+
+  const renderGoogleDriveEmbeddable = async (
+    excalidrawProps: Partial<ExcalidrawProps> = {},
+  ) => {
+    const renderResult = await render(<Excalidraw {...excalidrawProps} />);
+    const fileId = "1AbCdEfGhIjKlMnOpQrStUvWxYz123456";
+    const src = `https://drive.google.com/file/d/${fileId}/preview`;
+    let embeddable!: NonNullable<
+      ReturnType<typeof h.app.insertEmbeddableElement>
+    >;
+
+    act(() => {
+      const insertedEmbeddable = h.app.insertEmbeddableElement({
+        sceneX: 40,
+        sceneY: 40,
+        link: `https://drive.google.com/file/d/${fileId}/view?usp=sharing`,
+      });
+
+      if (!insertedEmbeddable) {
+        throw new Error("Google Drive embeddable not inserted");
+      }
+
+      embeddable = insertedEmbeddable;
+    });
+
+    (
+      h.app as unknown as {
+        embedsValidationStatus: Map<string, boolean>;
+      }
+    ).embedsValidationStatus.set(embeddable.id, true);
+
+    act(() => {
+      h.setState({ width: 1000, height: 1000 });
+      h.app.scene.triggerUpdate();
+    });
+
+    const getIframe = () => {
+      const iframe = renderResult.container.querySelector<HTMLIFrameElement>(
+        "iframe.excalidraw__embeddable",
+      );
+
+      if (!iframe) {
+        throw new Error("Google Drive iframe not rendered");
+      }
+
+      return iframe;
+    };
+
+    await waitFor(() => {
+      expect(getIframe().src).toBe(src);
+    });
+
+    return {
+      ...renderResult,
+      embeddable,
+      getIframe,
+      src,
+    };
+  };
+
+  const renderYouTubeEmbeddable = async (
+    excalidrawProps: Partial<ExcalidrawProps> = {},
+  ) => {
+    const renderResult = await render(<Excalidraw {...excalidrawProps} />);
+    let embeddable!: NonNullable<
+      ReturnType<typeof h.app.insertEmbeddableElement>
+    >;
+
+    act(() => {
+      const insertedEmbeddable = h.app.insertEmbeddableElement({
+        sceneX: 40,
+        sceneY: 40,
+        link: "https://www.youtube.com/watch?v=gkGMXY0wekg",
+      });
+
+      if (!insertedEmbeddable) {
+        throw new Error("YouTube embeddable not inserted");
+      }
+
+      embeddable = insertedEmbeddable;
+    });
+
+    (
+      h.app as unknown as {
+        embedsValidationStatus: Map<string, boolean>;
+      }
+    ).embedsValidationStatus.set(embeddable.id, true);
+
+    act(() => {
+      h.setState({ width: 1000, height: 1000 });
+      h.app.scene.triggerUpdate();
+    });
+
+    await waitFor(() => {
+      expect(
+        renderResult.container.querySelector("iframe.excalidraw__embeddable"),
+      ).not.toBeNull();
+    });
+
+    return {
+      ...renderResult,
+      embeddable,
+    };
+  };
+
+  const setActiveEmbeddable = (
+    embeddable: NonNullable<ReturnType<typeof h.app.insertEmbeddableElement>>,
+  ) => {
+    act(() => {
+      h.setState({
+        activeEmbeddable: { element: embeddable, state: "active" },
+      });
+    });
+  };
+
+  it("lets the initial Google Drive video click land in the iframe center", async () => {
+    const { container, embeddable, getIframe, src } =
+      await renderGoogleDriveEmbeddable();
+
+    mouse.moveTo(
+      embeddable.x + embeddable.width / 2,
+      embeddable.y + embeddable.height / 2,
+    );
+
+    await waitFor(() => {
+      expect(
+        container.querySelector<HTMLElement>(
+          ".excalidraw__embeddable-container__inner",
+        )?.style.pointerEvents,
+      ).toBe("all");
+      expect(h.state.activeEmbeddable?.element.id).toBe(embeddable.id);
+      expect(h.state.activeEmbeddable?.state).toBe("active");
+      expect(
+        container.querySelectorAll(".excalidraw__embeddable-canvas-guard"),
+      ).toHaveLength(4);
+      expect(
+        container.querySelector(".excalidraw__embeddable-hint"),
+      ).toBeNull();
+      expect(getIframe().src).toBe(src);
+    });
+  });
+
+  it("returns Drive embeddable edge interactions to the canvas", async () => {
+    const { container, embeddable } = await renderGoogleDriveEmbeddable();
+
+    act(() => {
+      h.setState({
+        activeEmbeddable: { element: embeddable, state: "active" },
+      });
+    });
+
+    const guard = container.querySelector<HTMLElement>(
+      ".excalidraw__embeddable-canvas-guard",
+    );
+    expect(guard).not.toBeNull();
+
+    fireEvent.pointerMove(guard!, {
+      clientX: embeddable.x + 1,
+      clientY: embeddable.y + 1,
+    });
+
+    await waitFor(() => {
+      expect(h.state.activeEmbeddable).toBeNull();
+      expect(
+        container.querySelector<HTMLElement>(
+          ".excalidraw__embeddable-container__inner",
+        )?.style.pointerEvents,
+      ).toBe("none");
+    });
+  });
+
+  it("deactivates an interactive embeddable on Ctrl/Cmd keydown", async () => {
+    const { embeddable } = await renderGoogleDriveEmbeddable({
+      handleKeyboardGlobally: true,
+    });
+
+    mouse.moveTo(
+      embeddable.x + embeddable.width / 2,
+      embeddable.y + embeddable.height / 2,
+    );
+
+    await waitFor(() => {
+      expect(h.state.activeEmbeddable?.state).toBe("active");
+    });
+
+    fireEvent.keyDown(document, {
+      key: "Control",
+      ctrlKey: true,
+    });
+
+    await waitFor(() => {
+      expect(h.state.activeEmbeddable).toBeNull();
+    });
+  });
+
+  it("handles Ctrl/Cmd wheel on Drive embeddable guards", async () => {
+    const { container, embeddable } = await renderGoogleDriveEmbeddable();
+
+    act(() => {
+      h.setState({
+        activeEmbeddable: { element: embeddable, state: "active" },
+      });
+    });
+
+    const guard = container.querySelector<HTMLElement>(
+      ".excalidraw__embeddable-canvas-guard",
+    );
+    expect(guard).not.toBeNull();
+
+    const prevZoom = h.state.zoom.value;
+
+    fireEvent.wheel(guard!, {
+      clientX: embeddable.x + 1,
+      clientY: embeddable.y + 1,
+      ctrlKey: true,
+      deltaY: -100,
+    });
+
+    await waitFor(() => {
+      expect(h.state.activeEmbeddable).toBeNull();
+      expect(h.state.zoom.value).toBeGreaterThan(prevZoom);
+    });
+  });
+
+  it("deactivates a non-Drive interactive embeddable on Ctrl/Cmd keydown", async () => {
+    const { container, embeddable } = await renderYouTubeEmbeddable({
+      handleKeyboardGlobally: true,
+    });
+
+    setActiveEmbeddable(embeddable);
+
+    await waitFor(() => {
+      expect(
+        container.querySelector<HTMLElement>(
+          ".excalidraw__embeddable-container__inner",
+        )?.style.pointerEvents,
+      ).toBe("all");
+      expect(
+        container.querySelectorAll(".excalidraw__embeddable-canvas-guard"),
+      ).toHaveLength(0);
+    });
+
+    fireEvent.keyDown(document, {
+      key: "Control",
+      ctrlKey: true,
+    });
+
+    await waitFor(() => {
+      expect(h.state.activeEmbeddable).toBeNull();
+      expect(
+        container.querySelector<HTMLElement>(
+          ".excalidraw__embeddable-container__inner",
+        )?.style.pointerEvents,
+      ).toBe("none");
+    });
+  });
+
+  it("deactivates a non-Drive interactive embeddable on parent-observed pinch", async () => {
+    const { embeddable } = await renderYouTubeEmbeddable();
+
+    setActiveEmbeddable(embeddable);
+
+    fireEvent.pointerDown(GlobalTestState.interactiveCanvas, {
+      clientX: embeddable.x + 10,
+      clientY: embeddable.y + 10,
+      pointerId: 1,
+      pointerType: "touch",
+    });
+    fireEvent.pointerDown(GlobalTestState.interactiveCanvas, {
+      clientX: embeddable.x + 30,
+      clientY: embeddable.y + 30,
+      pointerId: 2,
+      pointerType: "touch",
+    });
+
+    await waitFor(() => {
+      expect(h.state.activeEmbeddable).toBeNull();
+    });
+
+    fireEvent.pointerUp(GlobalTestState.interactiveCanvas, {
+      pointerId: 1,
+      pointerType: "touch",
+    });
+    fireEvent.pointerUp(GlobalTestState.interactiveCanvas, {
+      pointerId: 2,
+      pointerType: "touch",
+    });
+  });
+
+  it("deactivates a non-Drive interactive embeddable on Safari gesturestart", async () => {
+    const { embeddable } = await renderYouTubeEmbeddable();
+
+    setActiveEmbeddable(embeddable);
+
+    act(() => {
+      document.dispatchEvent(
+        new Event("gesturestart", { bubbles: true, cancelable: true }),
+      );
+    });
+
+    await waitFor(() => {
+      expect(h.state.activeEmbeddable).toBeNull();
+    });
+  });
+});

packages/math/src/constants.ts

@@ -1,5 +1,3 @@
-export const PRECISION = 10e-5;
-
 // Legendre-Gauss abscissae (x values) and weights for n=24
 // Refeerence: https://pomax.github.io/bezierinfo/legendre-gauss.html
 export const LegendreGaussN24TValues = [