build: decouple package deps and introduce yarn workspaces (#7415)

* feat: decouple package deps and introduce yarn workspaces

* update root directory

* fix

* fix scripts

* fix lint

* update path in scripts

* remove yarn.lock files from packages

* ignore workspace

* dummy

* dummy

* remove comment check

* revert workflow changes

* ignore ws when installing gh actions

* remove log

* update path

* fix

* fix typo

packages/excalidraw/scene/Fonts.ts

@@ -0,0 +1,94 @@
+import { isTextElement, refreshTextDimensions } from "../element";
+import { newElementWith } from "../element/mutateElement";
+import { isBoundToContainer } from "../element/typeChecks";
+import { ExcalidrawElement, ExcalidrawTextElement } from "../element/types";
+import { getFontString } from "../utils";
+import type Scene from "./Scene";
+import { ShapeCache } from "./ShapeCache";
+
+export class Fonts {
+  private scene: Scene;
+  private onSceneUpdated: () => void;
+
+  constructor({
+    scene,
+    onSceneUpdated,
+  }: {
+    scene: Scene;
+    onSceneUpdated: () => void;
+  }) {
+    this.scene = scene;
+    this.onSceneUpdated = onSceneUpdated;
+  }
+
+  // it's ok to track fonts across multiple instances only once, so let's use
+  // a static member to reduce memory footprint
+  private static loadedFontFaces = new Set<string>();
+
+  /**
+   * if we load a (new) font, it's likely that text elements using it have
+   * already been rendered using a fallback font. Thus, we want invalidate
+   * their shapes and rerender. See #637.
+   *
+   * Invalidates text elements and rerenders scene, provided that at least one
+   * of the supplied fontFaces has not already been processed.
+   */
+  public onFontsLoaded = (fontFaces: readonly FontFace[]) => {
+    if (
+      // bail if all fonts with have been processed. We're checking just a
+      // subset of the font properties (though it should be enough), so it
+      // can technically bail on a false positive.
+      fontFaces.every((fontFace) => {
+        const sig = `${fontFace.family}-${fontFace.style}-${fontFace.weight}`;
+        if (Fonts.loadedFontFaces.has(sig)) {
+          return true;
+        }
+        Fonts.loadedFontFaces.add(sig);
+        return false;
+      })
+    ) {
+      return false;
+    }
+
+    let didUpdate = false;
+
+    this.scene.mapElements((element) => {
+      if (isTextElement(element) && !isBoundToContainer(element)) {
+        ShapeCache.delete(element);
+        didUpdate = true;
+        return newElementWith(element, {
+          ...refreshTextDimensions(element),
+        });
+      }
+      return element;
+    });
+
+    if (didUpdate) {
+      this.onSceneUpdated();
+    }
+  };
+
+  public loadFontsForElements = async (
+    elements: readonly ExcalidrawElement[],
+  ) => {
+    const fontFaces = await Promise.all(
+      [
+        ...new Set(
+          elements
+            .filter((element) => isTextElement(element))
+            .map((element) => (element as ExcalidrawTextElement).fontFamily),
+        ),
+      ].map((fontFamily) => {
+        const fontString = getFontString({
+          fontFamily,
+          fontSize: 16,
+        });
+        if (!document.fonts?.check?.(fontString)) {
+          return document.fonts?.load?.(fontString);
+        }
+        return undefined;
+      }),
+    );
+    this.onFontsLoaded(fontFaces.flat().filter(Boolean) as FontFace[]);
+  };
+}

packages/excalidraw/scene/Renderer.ts

@@ -0,0 +1,131 @@
+import { isElementInViewport } from "../element/sizeHelpers";
+import { isImageElement } from "../element/typeChecks";
+import { NonDeletedExcalidrawElement } from "../element/types";
+import { cancelRender } from "../renderer/renderScene";
+import { AppState } from "../types";
+import { memoize } from "../utils";
+import Scene from "./Scene";
+
+export class Renderer {
+  private scene: Scene;
+
+  constructor(scene: Scene) {
+    this.scene = scene;
+  }
+
+  public getRenderableElements = (() => {
+    const getVisibleCanvasElements = ({
+      elements,
+      zoom,
+      offsetLeft,
+      offsetTop,
+      scrollX,
+      scrollY,
+      height,
+      width,
+    }: {
+      elements: readonly NonDeletedExcalidrawElement[];
+      zoom: AppState["zoom"];
+      offsetLeft: AppState["offsetLeft"];
+      offsetTop: AppState["offsetTop"];
+      scrollX: AppState["scrollX"];
+      scrollY: AppState["scrollY"];
+      height: AppState["height"];
+      width: AppState["width"];
+    }): readonly NonDeletedExcalidrawElement[] => {
+      return elements.filter((element) =>
+        isElementInViewport(element, width, height, {
+          zoom,
+          offsetLeft,
+          offsetTop,
+          scrollX,
+          scrollY,
+        }),
+      );
+    };
+
+    const getCanvasElements = ({
+      editingElement,
+      elements,
+      pendingImageElementId,
+    }: {
+      elements: readonly NonDeletedExcalidrawElement[];
+      editingElement: AppState["editingElement"];
+      pendingImageElementId: AppState["pendingImageElementId"];
+    }) => {
+      return elements.filter((element) => {
+        if (isImageElement(element)) {
+          if (
+            // => not placed on canvas yet (but in elements array)
+            pendingImageElementId === element.id
+          ) {
+            return false;
+          }
+        }
+        // we don't want to render text element that's being currently edited
+        // (it's rendered on remote only)
+        return (
+          !editingElement ||
+          editingElement.type !== "text" ||
+          element.id !== editingElement.id
+        );
+      });
+    };
+
+    return memoize(
+      ({
+        zoom,
+        offsetLeft,
+        offsetTop,
+        scrollX,
+        scrollY,
+        height,
+        width,
+        editingElement,
+        pendingImageElementId,
+        // unused but serves we cache on it to invalidate elements if they
+        // get mutated
+        versionNonce: _versionNonce,
+      }: {
+        zoom: AppState["zoom"];
+        offsetLeft: AppState["offsetLeft"];
+        offsetTop: AppState["offsetTop"];
+        scrollX: AppState["scrollX"];
+        scrollY: AppState["scrollY"];
+        height: AppState["height"];
+        width: AppState["width"];
+        editingElement: AppState["editingElement"];
+        pendingImageElementId: AppState["pendingImageElementId"];
+        versionNonce: ReturnType<InstanceType<typeof Scene>["getVersionNonce"]>;
+      }) => {
+        const elements = this.scene.getNonDeletedElements();
+
+        const canvasElements = getCanvasElements({
+          elements,
+          editingElement,
+          pendingImageElementId,
+        });
+
+        const visibleElements = getVisibleCanvasElements({
+          elements: canvasElements,
+          zoom,
+          offsetLeft,
+          offsetTop,
+          scrollX,
+          scrollY,
+          height,
+          width,
+        });
+
+        return { canvasElements, visibleElements };
+      },
+    );
+  })();
+
+  // NOTE Doesn't destroy everything (scene, rc, etc.) because it may not be
+  // safe to break TS contract here (for upstream cases)
+  public destroy() {
+    cancelRender();
+    this.getRenderableElements.clear();
+  }
+}

packages/excalidraw/scene/Scene.ts

@@ -0,0 +1,337 @@
+import {
+  ExcalidrawElement,
+  NonDeletedExcalidrawElement,
+  NonDeleted,
+  ExcalidrawFrameLikeElement,
+} from "../element/types";
+import { getNonDeletedElements, isNonDeletedElement } from "../element";
+import { LinearElementEditor } from "../element/linearElementEditor";
+import { isFrameLikeElement } from "../element/typeChecks";
+import { getSelectedElements } from "./selection";
+import { AppState } from "../types";
+import { Assert, SameType } from "../utility-types";
+import { randomInteger } from "../random";
+
+type ElementIdKey = InstanceType<typeof LinearElementEditor>["elementId"];
+type ElementKey = ExcalidrawElement | ElementIdKey;
+
+type SceneStateCallback = () => void;
+type SceneStateCallbackRemover = () => void;
+
+type SelectionHash = string & { __brand: "selectionHash" };
+
+const hashSelectionOpts = (
+  opts: Parameters<InstanceType<typeof Scene>["getSelectedElements"]>[0],
+) => {
+  const keys = ["includeBoundTextElement", "includeElementsInFrames"] as const;
+
+  type HashableKeys = Omit<typeof opts, "selectedElementIds" | "elements">;
+
+  // just to ensure we're hashing all expected keys
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  type _ = Assert<
+    SameType<
+      Required<HashableKeys>,
+      Pick<Required<HashableKeys>, typeof keys[number]>
+    >
+  >;
+
+  let hash = "";
+  for (const key of keys) {
+    hash += `${key}:${opts[key] ? "1" : "0"}`;
+  }
+  return hash as SelectionHash;
+};
+
+// ideally this would be a branded type but it'd be insanely hard to work with
+// in our codebase
+export type ExcalidrawElementsIncludingDeleted = readonly ExcalidrawElement[];
+
+const isIdKey = (elementKey: ElementKey): elementKey is ElementIdKey => {
+  if (typeof elementKey === "string") {
+    return true;
+  }
+  return false;
+};
+
+class Scene {
+  // ---------------------------------------------------------------------------
+  // static methods/props
+  // ---------------------------------------------------------------------------
+
+  private static sceneMapByElement = new WeakMap<ExcalidrawElement, Scene>();
+  private static sceneMapById = new Map<string, Scene>();
+
+  static mapElementToScene(
+    elementKey: ElementKey,
+    scene: Scene,
+    /**
+     * needed because of frame exporting hack.
+     * elementId:Scene mapping will be removed completely, soon.
+     */
+    mapElementIds = true,
+  ) {
+    if (isIdKey(elementKey)) {
+      if (!mapElementIds) {
+        return;
+      }
+      // for cases where we don't have access to the element object
+      // (e.g. restore serialized appState with id references)
+      this.sceneMapById.set(elementKey, scene);
+    } else {
+      this.sceneMapByElement.set(elementKey, scene);
+      if (!mapElementIds) {
+        // if mapping element objects, also cache the id string when later
+        // looking up by id alone
+        this.sceneMapById.set(elementKey.id, scene);
+      }
+    }
+  }
+
+  static getScene(elementKey: ElementKey): Scene | null {
+    if (isIdKey(elementKey)) {
+      return this.sceneMapById.get(elementKey) || null;
+    }
+    return this.sceneMapByElement.get(elementKey) || null;
+  }
+
+  // ---------------------------------------------------------------------------
+  // instance methods/props
+  // ---------------------------------------------------------------------------
+
+  private callbacks: Set<SceneStateCallback> = new Set();
+
+  private nonDeletedElements: readonly NonDeletedExcalidrawElement[] = [];
+  private elements: readonly ExcalidrawElement[] = [];
+  private nonDeletedFramesLikes: readonly NonDeleted<ExcalidrawFrameLikeElement>[] =
+    [];
+  private frames: readonly ExcalidrawFrameLikeElement[] = [];
+  private elementsMap = new Map<ExcalidrawElement["id"], ExcalidrawElement>();
+  private selectedElementsCache: {
+    selectedElementIds: AppState["selectedElementIds"] | null;
+    elements: readonly NonDeletedExcalidrawElement[] | null;
+    cache: Map<SelectionHash, NonDeletedExcalidrawElement[]>;
+  } = {
+    selectedElementIds: null,
+    elements: null,
+    cache: new Map(),
+  };
+  private versionNonce: number | undefined;
+
+  getElementsIncludingDeleted() {
+    return this.elements;
+  }
+
+  getNonDeletedElements(): readonly NonDeletedExcalidrawElement[] {
+    return this.nonDeletedElements;
+  }
+
+  getFramesIncludingDeleted() {
+    return this.frames;
+  }
+
+  getSelectedElements(opts: {
+    // NOTE can be ommitted by making Scene constructor require App instance
+    selectedElementIds: AppState["selectedElementIds"];
+    /**
+     * for specific cases where you need to use elements not from current
+     * scene state. This in effect will likely result in cache-miss, and
+     * the cache won't be updated in this case.
+     */
+    elements?: readonly ExcalidrawElement[];
+    // selection-related options
+    includeBoundTextElement?: boolean;
+    includeElementsInFrames?: boolean;
+  }): NonDeleted<ExcalidrawElement>[] {
+    const hash = hashSelectionOpts(opts);
+
+    const elements = opts?.elements || this.nonDeletedElements;
+    if (
+      this.selectedElementsCache.elements === elements &&
+      this.selectedElementsCache.selectedElementIds === opts.selectedElementIds
+    ) {
+      const cached = this.selectedElementsCache.cache.get(hash);
+      if (cached) {
+        return cached;
+      }
+    } else if (opts?.elements == null) {
+      // if we're operating on latest scene elements and the cache is not
+      //  storing the latest elements, clear the cache
+      this.selectedElementsCache.cache.clear();
+    }
+
+    const selectedElements = getSelectedElements(
+      elements,
+      { selectedElementIds: opts.selectedElementIds },
+      opts,
+    );
+
+    // cache only if we're not using custom elements
+    if (opts?.elements == null) {
+      this.selectedElementsCache.selectedElementIds = opts.selectedElementIds;
+      this.selectedElementsCache.elements = this.nonDeletedElements;
+      this.selectedElementsCache.cache.set(hash, selectedElements);
+    }
+
+    return selectedElements;
+  }
+
+  getNonDeletedFramesLikes(): readonly NonDeleted<ExcalidrawFrameLikeElement>[] {
+    return this.nonDeletedFramesLikes;
+  }
+
+  getElement<T extends ExcalidrawElement>(id: T["id"]): T | null {
+    return (this.elementsMap.get(id) as T | undefined) || null;
+  }
+
+  getVersionNonce() {
+    return this.versionNonce;
+  }
+
+  getNonDeletedElement(
+    id: ExcalidrawElement["id"],
+  ): NonDeleted<ExcalidrawElement> | null {
+    const element = this.getElement(id);
+    if (element && isNonDeletedElement(element)) {
+      return element;
+    }
+    return null;
+  }
+
+  /**
+   * A utility method to help with updating all scene elements, with the added
+   * performance optimization of not renewing the array if no change is made.
+   *
+   * Maps all current excalidraw elements, invoking the callback for each
+   * element. The callback should either return a new mapped element, or the
+   * original element if no changes are made. If no changes are made to any
+   * element, this results in a no-op. Otherwise, the newly mapped elements
+   * are set as the next scene's elements.
+   *
+   * @returns whether a change was made
+   */
+  mapElements(
+    iteratee: (element: ExcalidrawElement) => ExcalidrawElement,
+  ): boolean {
+    let didChange = false;
+    const newElements = this.elements.map((element) => {
+      const nextElement = iteratee(element);
+      if (nextElement !== element) {
+        didChange = true;
+      }
+      return nextElement;
+    });
+    if (didChange) {
+      this.replaceAllElements(newElements);
+    }
+    return didChange;
+  }
+
+  replaceAllElements(
+    nextElements: readonly ExcalidrawElement[],
+    mapElementIds = true,
+  ) {
+    this.elements = nextElements;
+    const nextFrameLikes: ExcalidrawFrameLikeElement[] = [];
+    this.elementsMap.clear();
+    nextElements.forEach((element) => {
+      if (isFrameLikeElement(element)) {
+        nextFrameLikes.push(element);
+      }
+      this.elementsMap.set(element.id, element);
+      Scene.mapElementToScene(element, this);
+    });
+    this.nonDeletedElements = getNonDeletedElements(this.elements);
+    this.frames = nextFrameLikes;
+    this.nonDeletedFramesLikes = getNonDeletedElements(this.frames);
+
+    this.informMutation();
+  }
+
+  informMutation() {
+    this.versionNonce = randomInteger();
+
+    for (const callback of Array.from(this.callbacks)) {
+      callback();
+    }
+  }
+
+  addCallback(cb: SceneStateCallback): SceneStateCallbackRemover {
+    if (this.callbacks.has(cb)) {
+      throw new Error();
+    }
+
+    this.callbacks.add(cb);
+
+    return () => {
+      if (!this.callbacks.has(cb)) {
+        throw new Error();
+      }
+      this.callbacks.delete(cb);
+    };
+  }
+
+  destroy() {
+    this.nonDeletedElements = [];
+    this.elements = [];
+    this.nonDeletedFramesLikes = [];
+    this.frames = [];
+    this.elementsMap.clear();
+    this.selectedElementsCache.selectedElementIds = null;
+    this.selectedElementsCache.elements = null;
+    this.selectedElementsCache.cache.clear();
+
+    Scene.sceneMapById.forEach((scene, elementKey) => {
+      if (scene === this) {
+        Scene.sceneMapById.delete(elementKey);
+      }
+    });
+
+    // done not for memory leaks, but to guard against possible late fires
+    // (I guess?)
+    this.callbacks.clear();
+  }
+
+  insertElementAtIndex(element: ExcalidrawElement, index: number) {
+    if (!Number.isFinite(index) || index < 0) {
+      throw new Error(
+        "insertElementAtIndex can only be called with index >= 0",
+      );
+    }
+    const nextElements = [
+      ...this.elements.slice(0, index),
+      element,
+      ...this.elements.slice(index),
+    ];
+    this.replaceAllElements(nextElements);
+  }
+
+  insertElementsAtIndex(elements: ExcalidrawElement[], index: number) {
+    if (!Number.isFinite(index) || index < 0) {
+      throw new Error(
+        "insertElementAtIndex can only be called with index >= 0",
+      );
+    }
+    const nextElements = [
+      ...this.elements.slice(0, index),
+      ...elements,
+      ...this.elements.slice(index),
+    ];
+
+    this.replaceAllElements(nextElements);
+  }
+
+  addNewElement = (element: ExcalidrawElement) => {
+    if (element.frameId) {
+      this.insertElementAtIndex(element, this.getElementIndex(element.frameId));
+    } else {
+      this.replaceAllElements([...this.elements, element]);
+    }
+  };
+
+  getElementIndex(elementId: string) {
+    return this.elements.findIndex((element) => element.id === elementId);
+  }
+}
+
+export default Scene;

packages/excalidraw/scene/Shape.ts

@@ -0,0 +1,467 @@
+import type { Drawable, Options } from "roughjs/bin/core";
+import type { RoughGenerator } from "roughjs/bin/generator";
+import { getDiamondPoints, getArrowheadPoints } from "../element";
+import type { ElementShapes } from "./types";
+import type {
+  ExcalidrawElement,
+  NonDeletedExcalidrawElement,
+  ExcalidrawSelectionElement,
+  ExcalidrawLinearElement,
+  Arrowhead,
+} from "../element/types";
+import { isPathALoop, getCornerRadius } from "../math";
+import { generateFreeDrawShape } from "../renderer/renderElement";
+import { isTransparent, assertNever } from "../utils";
+import { simplify } from "points-on-curve";
+import { ROUGHNESS } from "../constants";
+import {
+  isEmbeddableElement,
+  isIframeElement,
+  isIframeLikeElement,
+  isLinearElement,
+} from "../element/typeChecks";
+import { canChangeRoundness } from "./comparisons";
+
+const getDashArrayDashed = (strokeWidth: number) => [8, 8 + strokeWidth];
+
+const getDashArrayDotted = (strokeWidth: number) => [1.5, 6 + strokeWidth];
+
+function adjustRoughness(element: ExcalidrawElement): number {
+  const roughness = element.roughness;
+
+  const maxSize = Math.max(element.width, element.height);
+  const minSize = Math.min(element.width, element.height);
+
+  // don't reduce roughness if
+  if (
+    // both sides relatively big
+    (minSize >= 20 && maxSize >= 50) ||
+    // is round & both sides above 15px
+    (minSize >= 15 &&
+      !!element.roundness &&
+      canChangeRoundness(element.type)) ||
+    // relatively long linear element
+    (isLinearElement(element) && maxSize >= 50)
+  ) {
+    return roughness;
+  }
+
+  return Math.min(roughness / (maxSize < 10 ? 3 : 2), 2.5);
+}
+
+export const generateRoughOptions = (
+  element: ExcalidrawElement,
+  continuousPath = false,
+): Options => {
+  const options: Options = {
+    seed: element.seed,
+    strokeLineDash:
+      element.strokeStyle === "dashed"
+        ? getDashArrayDashed(element.strokeWidth)
+        : element.strokeStyle === "dotted"
+        ? getDashArrayDotted(element.strokeWidth)
+        : undefined,
+    // for non-solid strokes, disable multiStroke because it tends to make
+    // dashes/dots overlay each other
+    disableMultiStroke: element.strokeStyle !== "solid",
+    // for non-solid strokes, increase the width a bit to make it visually
+    // similar to solid strokes, because we're also disabling multiStroke
+    strokeWidth:
+      element.strokeStyle !== "solid"
+        ? element.strokeWidth + 0.5
+        : element.strokeWidth,
+    // when increasing strokeWidth, we must explicitly set fillWeight and
+    // hachureGap because if not specified, roughjs uses strokeWidth to
+    // calculate them (and we don't want the fills to be modified)
+    fillWeight: element.strokeWidth / 2,
+    hachureGap: element.strokeWidth * 4,
+    roughness: adjustRoughness(element),
+    stroke: element.strokeColor,
+    preserveVertices:
+      continuousPath || element.roughness < ROUGHNESS.cartoonist,
+  };
+
+  switch (element.type) {
+    case "rectangle":
+    case "iframe":
+    case "embeddable":
+    case "diamond":
+    case "ellipse": {
+      options.fillStyle = element.fillStyle;
+      options.fill = isTransparent(element.backgroundColor)
+        ? undefined
+        : element.backgroundColor;
+      if (element.type === "ellipse") {
+        options.curveFitting = 1;
+      }
+      return options;
+    }
+    case "line":
+    case "freedraw": {
+      if (isPathALoop(element.points)) {
+        options.fillStyle = element.fillStyle;
+        options.fill =
+          element.backgroundColor === "transparent"
+            ? undefined
+            : element.backgroundColor;
+      }
+      return options;
+    }
+    case "arrow":
+      return options;
+    default: {
+      throw new Error(`Unimplemented type ${element.type}`);
+    }
+  }
+};
+
+const modifyIframeLikeForRoughOptions = (
+  element: NonDeletedExcalidrawElement,
+  isExporting: boolean,
+) => {
+  if (
+    isIframeLikeElement(element) &&
+    (isExporting || (isEmbeddableElement(element) && !element.validated)) &&
+    isTransparent(element.backgroundColor) &&
+    isTransparent(element.strokeColor)
+  ) {
+    return {
+      ...element,
+      roughness: 0,
+      backgroundColor: "#d3d3d3",
+      fillStyle: "solid",
+    } as const;
+  } else if (isIframeElement(element)) {
+    return {
+      ...element,
+      strokeColor: isTransparent(element.strokeColor)
+        ? "#000000"
+        : element.strokeColor,
+      backgroundColor: isTransparent(element.backgroundColor)
+        ? "#f4f4f6"
+        : element.backgroundColor,
+    };
+  }
+  return element;
+};
+
+const getArrowheadShapes = (
+  element: ExcalidrawLinearElement,
+  shape: Drawable[],
+  position: "start" | "end",
+  arrowhead: Arrowhead,
+  generator: RoughGenerator,
+  options: Options,
+  canvasBackgroundColor: string,
+) => {
+  const arrowheadPoints = getArrowheadPoints(
+    element,
+    shape,
+    position,
+    arrowhead,
+  );
+
+  if (arrowheadPoints === null) {
+    return [];
+  }
+
+  switch (arrowhead) {
+    case "dot":
+    case "circle":
+    case "circle_outline": {
+      const [x, y, diameter] = arrowheadPoints;
+
+      // always use solid stroke for arrowhead
+      delete options.strokeLineDash;
+
+      return [
+        generator.circle(x, y, diameter, {
+          ...options,
+          fill:
+            arrowhead === "circle_outline"
+              ? canvasBackgroundColor
+              : element.strokeColor,
+
+          fillStyle: "solid",
+          stroke: element.strokeColor,
+          roughness: Math.min(0.5, options.roughness || 0),
+        }),
+      ];
+    }
+    case "triangle":
+    case "triangle_outline": {
+      const [x, y, x2, y2, x3, y3] = arrowheadPoints;
+
+      // always use solid stroke for arrowhead
+      delete options.strokeLineDash;
+
+      return [
+        generator.polygon(
+          [
+            [x, y],
+            [x2, y2],
+            [x3, y3],
+            [x, y],
+          ],
+          {
+            ...options,
+            fill:
+              arrowhead === "triangle_outline"
+                ? canvasBackgroundColor
+                : element.strokeColor,
+            fillStyle: "solid",
+            roughness: Math.min(1, options.roughness || 0),
+          },
+        ),
+      ];
+    }
+    case "diamond":
+    case "diamond_outline": {
+      const [x, y, x2, y2, x3, y3, x4, y4] = arrowheadPoints;
+
+      // always use solid stroke for arrowhead
+      delete options.strokeLineDash;
+
+      return [
+        generator.polygon(
+          [
+            [x, y],
+            [x2, y2],
+            [x3, y3],
+            [x4, y4],
+            [x, y],
+          ],
+          {
+            ...options,
+            fill:
+              arrowhead === "diamond_outline"
+                ? canvasBackgroundColor
+                : element.strokeColor,
+            fillStyle: "solid",
+            roughness: Math.min(1, options.roughness || 0),
+          },
+        ),
+      ];
+    }
+    case "bar":
+    case "arrow":
+    default: {
+      const [x2, y2, x3, y3, x4, y4] = arrowheadPoints;
+
+      if (element.strokeStyle === "dotted") {
+        // for dotted arrows caps, reduce gap to make it more legible
+        const dash = getDashArrayDotted(element.strokeWidth - 1);
+        options.strokeLineDash = [dash[0], dash[1] - 1];
+      } else {
+        // for solid/dashed, keep solid arrow cap
+        delete options.strokeLineDash;
+      }
+      options.roughness = Math.min(1, options.roughness || 0);
+      return [
+        generator.line(x3, y3, x2, y2, options),
+        generator.line(x4, y4, x2, y2, options),
+      ];
+    }
+  }
+};
+
+/**
+ * Generates the roughjs shape for given element.
+ *
+ * Low-level. Use `ShapeCache.generateElementShape` instead.
+ *
+ * @private
+ */
+export const _generateElementShape = (
+  element: Exclude<NonDeletedExcalidrawElement, ExcalidrawSelectionElement>,
+  generator: RoughGenerator,
+  {
+    isExporting,
+    canvasBackgroundColor,
+  }: { isExporting: boolean; canvasBackgroundColor: string },
+): Drawable | Drawable[] | null => {
+  switch (element.type) {
+    case "rectangle":
+    case "iframe":
+    case "embeddable": {
+      let shape: ElementShapes[typeof element.type];
+      // this is for rendering the stroke/bg of the embeddable, especially
+      // when the src url is not set
+
+      if (element.roundness) {
+        const w = element.width;
+        const h = element.height;
+        const r = getCornerRadius(Math.min(w, h), element);
+        shape = generator.path(
+          `M ${r} 0 L ${w - r} 0 Q ${w} 0, ${w} ${r} L ${w} ${
+            h - r
+          } Q ${w} ${h}, ${w - r} ${h} L ${r} ${h} Q 0 ${h}, 0 ${
+            h - r
+          } L 0 ${r} Q 0 0, ${r} 0`,
+          generateRoughOptions(
+            modifyIframeLikeForRoughOptions(element, isExporting),
+            true,
+          ),
+        );
+      } else {
+        shape = generator.rectangle(
+          0,
+          0,
+          element.width,
+          element.height,
+          generateRoughOptions(
+            modifyIframeLikeForRoughOptions(element, isExporting),
+            false,
+          ),
+        );
+      }
+      return shape;
+    }
+    case "diamond": {
+      let shape: ElementShapes[typeof element.type];
+
+      const [topX, topY, rightX, rightY, bottomX, bottomY, leftX, leftY] =
+        getDiamondPoints(element);
+      if (element.roundness) {
+        const verticalRadius = getCornerRadius(Math.abs(topX - leftX), element);
+
+        const horizontalRadius = getCornerRadius(
+          Math.abs(rightY - topY),
+          element,
+        );
+
+        shape = generator.path(
+          `M ${topX + verticalRadius} ${topY + horizontalRadius} L ${
+            rightX - verticalRadius
+          } ${rightY - horizontalRadius}
+            C ${rightX} ${rightY}, ${rightX} ${rightY}, ${
+            rightX - verticalRadius
+          } ${rightY + horizontalRadius}
+            L ${bottomX + verticalRadius} ${bottomY - horizontalRadius}
+            C ${bottomX} ${bottomY}, ${bottomX} ${bottomY}, ${
+            bottomX - verticalRadius
+          } ${bottomY - horizontalRadius}
+            L ${leftX + verticalRadius} ${leftY + horizontalRadius}
+            C ${leftX} ${leftY}, ${leftX} ${leftY}, ${leftX + verticalRadius} ${
+            leftY - horizontalRadius
+          }
+            L ${topX - verticalRadius} ${topY + horizontalRadius}
+            C ${topX} ${topY}, ${topX} ${topY}, ${topX + verticalRadius} ${
+            topY + horizontalRadius
+          }`,
+          generateRoughOptions(element, true),
+        );
+      } else {
+        shape = generator.polygon(
+          [
+            [topX, topY],
+            [rightX, rightY],
+            [bottomX, bottomY],
+            [leftX, leftY],
+          ],
+          generateRoughOptions(element),
+        );
+      }
+      return shape;
+    }
+    case "ellipse": {
+      const shape: ElementShapes[typeof element.type] = generator.ellipse(
+        element.width / 2,
+        element.height / 2,
+        element.width,
+        element.height,
+        generateRoughOptions(element),
+      );
+      return shape;
+    }
+    case "line":
+    case "arrow": {
+      let shape: ElementShapes[typeof element.type];
+      const options = generateRoughOptions(element);
+
+      // points array can be empty in the beginning, so it is important to add
+      // initial position to it
+      const points = element.points.length ? element.points : [[0, 0]];
+
+      // curve is always the first element
+      // this simplifies finding the curve for an element
+      if (!element.roundness) {
+        if (options.fill) {
+          shape = [generator.polygon(points as [number, number][], options)];
+        } else {
+          shape = [generator.linearPath(points as [number, number][], options)];
+        }
+      } else {
+        shape = [generator.curve(points as [number, number][], options)];
+      }
+
+      // add lines only in arrow
+      if (element.type === "arrow") {
+        const { startArrowhead = null, endArrowhead = "arrow" } = element;
+
+        if (startArrowhead !== null) {
+          const shapes = getArrowheadShapes(
+            element,
+            shape,
+            "start",
+            startArrowhead,
+            generator,
+            options,
+            canvasBackgroundColor,
+          );
+          shape.push(...shapes);
+        }
+
+        if (endArrowhead !== null) {
+          if (endArrowhead === undefined) {
+            // Hey, we have an old arrow here!
+          }
+
+          const shapes = getArrowheadShapes(
+            element,
+            shape,
+            "end",
+            endArrowhead,
+            generator,
+            options,
+            canvasBackgroundColor,
+          );
+          shape.push(...shapes);
+        }
+      }
+      return shape;
+    }
+    case "freedraw": {
+      let shape: ElementShapes[typeof element.type];
+      generateFreeDrawShape(element);
+
+      if (isPathALoop(element.points)) {
+        // generate rough polygon to fill freedraw shape
+        const simplifiedPoints = simplify(element.points, 0.75);
+        shape = generator.curve(simplifiedPoints as [number, number][], {
+          ...generateRoughOptions(element),
+          stroke: "none",
+        });
+      } else {
+        shape = null;
+      }
+      return shape;
+    }
+    case "frame":
+    case "magicframe":
+    case "text":
+    case "image": {
+      const shape: ElementShapes[typeof element.type] = null;
+      // we return (and cache) `null` to make sure we don't regenerate
+      // `element.canvas` on rerenders
+      return shape;
+    }
+    default: {
+      assertNever(
+        element,
+        `generateElementShape(): Unimplemented type ${(element as any)?.type}`,
+      );
+      return null;
+    }
+  }
+};

packages/excalidraw/scene/ShapeCache.ts

@@ -0,0 +1,84 @@
+import { Drawable } from "roughjs/bin/core";
+import { RoughGenerator } from "roughjs/bin/generator";
+import {
+  ExcalidrawElement,
+  ExcalidrawSelectionElement,
+} from "../element/types";
+import { elementWithCanvasCache } from "../renderer/renderElement";
+import { _generateElementShape } from "./Shape";
+import { ElementShape, ElementShapes } from "./types";
+import { COLOR_PALETTE } from "../colors";
+import { AppState } from "../types";
+
+export class ShapeCache {
+  private static rg = new RoughGenerator();
+  private static cache = new WeakMap<ExcalidrawElement, ElementShape>();
+
+  /**
+   * Retrieves shape from cache if available. Use this only if shape
+   * is optional and you have a fallback in case it's not cached.
+   */
+  public static get = <T extends ExcalidrawElement>(element: T) => {
+    return ShapeCache.cache.get(
+      element,
+    ) as T["type"] extends keyof ElementShapes
+      ? ElementShapes[T["type"]] | undefined
+      : ElementShape | undefined;
+  };
+
+  public static set = <T extends ExcalidrawElement>(
+    element: T,
+    shape: T["type"] extends keyof ElementShapes
+      ? ElementShapes[T["type"]]
+      : Drawable,
+  ) => ShapeCache.cache.set(element, shape);
+
+  public static delete = (element: ExcalidrawElement) =>
+    ShapeCache.cache.delete(element);
+
+  public static destroy = () => {
+    ShapeCache.cache = new WeakMap();
+  };
+
+  /**
+   * Generates & caches shape for element if not already cached, otherwise
+   * returns cached shape.
+   */
+  public static generateElementShape = <
+    T extends Exclude<ExcalidrawElement, ExcalidrawSelectionElement>,
+  >(
+    element: T,
+    renderConfig: {
+      isExporting: boolean;
+      canvasBackgroundColor: AppState["viewBackgroundColor"];
+    } | null,
+  ) => {
+    // when exporting, always regenerated to guarantee the latest shape
+    const cachedShape = renderConfig?.isExporting
+      ? undefined
+      : ShapeCache.get(element);
+
+    // `null` indicates no rc shape applicable for this element type,
+    // but it's considered a valid cache value (= do not regenerate)
+    if (cachedShape !== undefined) {
+      return cachedShape;
+    }
+
+    elementWithCanvasCache.delete(element);
+
+    const shape = _generateElementShape(
+      element,
+      ShapeCache.rg,
+      renderConfig || {
+        isExporting: false,
+        canvasBackgroundColor: COLOR_PALETTE.white,
+      },
+    ) as T["type"] extends keyof ElementShapes
+      ? ElementShapes[T["type"]]
+      : Drawable | null;
+
+    ShapeCache.cache.set(element, shape);
+
+    return shape;
+  };
+}

packages/excalidraw/scene/comparisons.ts

@@ -0,0 +1,92 @@
+import { isIframeElement } from "../element/typeChecks";
+import {
+  ExcalidrawIframeElement,
+  NonDeletedExcalidrawElement,
+} from "../element/types";
+import { ElementOrToolType } from "../types";
+
+export const hasBackground = (type: ElementOrToolType) =>
+  type === "rectangle" ||
+  type === "iframe" ||
+  type === "embeddable" ||
+  type === "ellipse" ||
+  type === "diamond" ||
+  type === "line" ||
+  type === "freedraw";
+
+export const hasStrokeColor = (type: ElementOrToolType) =>
+  type !== "image" && type !== "frame" && type !== "magicframe";
+
+export const hasStrokeWidth = (type: ElementOrToolType) =>
+  type === "rectangle" ||
+  type === "iframe" ||
+  type === "embeddable" ||
+  type === "ellipse" ||
+  type === "diamond" ||
+  type === "freedraw" ||
+  type === "arrow" ||
+  type === "line";
+
+export const hasStrokeStyle = (type: ElementOrToolType) =>
+  type === "rectangle" ||
+  type === "iframe" ||
+  type === "embeddable" ||
+  type === "ellipse" ||
+  type === "diamond" ||
+  type === "arrow" ||
+  type === "line";
+
+export const canChangeRoundness = (type: ElementOrToolType) =>
+  type === "rectangle" ||
+  type === "iframe" ||
+  type === "embeddable" ||
+  type === "arrow" ||
+  type === "line" ||
+  type === "diamond";
+
+export const canHaveArrowheads = (type: ElementOrToolType) => type === "arrow";
+
+export const getElementAtPosition = (
+  elements: readonly NonDeletedExcalidrawElement[],
+  isAtPositionFn: (element: NonDeletedExcalidrawElement) => boolean,
+) => {
+  let hitElement = null;
+  // We need to to hit testing from front (end of the array) to back (beginning of the array)
+  // because array is ordered from lower z-index to highest and we want element z-index
+  // with higher z-index
+  for (let index = elements.length - 1; index >= 0; --index) {
+    const element = elements[index];
+    if (element.isDeleted) {
+      continue;
+    }
+    if (isAtPositionFn(element)) {
+      hitElement = element;
+      break;
+    }
+  }
+
+  return hitElement;
+};
+
+export const getElementsAtPosition = (
+  elements: readonly NonDeletedExcalidrawElement[],
+  isAtPositionFn: (element: NonDeletedExcalidrawElement) => boolean,
+) => {
+  const iframeLikes: ExcalidrawIframeElement[] = [];
+  // The parameter elements comes ordered from lower z-index to higher.
+  // We want to preserve that order on the returned array.
+  // Exception being embeddables which should be on top of everything else in
+  // terms of hit testing.
+  const elsAtPos = elements.filter((element) => {
+    const hit = !element.isDeleted && isAtPositionFn(element);
+    if (hit) {
+      if (isIframeElement(element)) {
+        iframeLikes.push(element);
+        return false;
+      }
+      return true;
+    }
+    return false;
+  });
+  return elsAtPos.concat(iframeLikes);
+};

packages/excalidraw/scene/export.ts

@@ -0,0 +1,467 @@
+import rough from "roughjs/bin/rough";
+import {
+  ExcalidrawElement,
+  ExcalidrawFrameLikeElement,
+  ExcalidrawTextElement,
+  NonDeletedExcalidrawElement,
+} from "../element/types";
+import {
+  Bounds,
+  getCommonBounds,
+  getElementAbsoluteCoords,
+} from "../element/bounds";
+import { renderSceneToSvg, renderStaticScene } from "../renderer/renderScene";
+import { cloneJSON, distance, getFontString } from "../utils";
+import { AppState, BinaryFiles } from "../types";
+import {
+  DEFAULT_EXPORT_PADDING,
+  FONT_FAMILY,
+  FRAME_STYLE,
+  SVG_NS,
+  THEME_FILTER,
+} from "../constants";
+import { getDefaultAppState } from "../appState";
+import { serializeAsJSON } from "../data/json";
+import {
+  getInitializedImageElements,
+  updateImageCache,
+} from "../element/image";
+import { elementsOverlappingBBox } from "../../withinBounds";
+import {
+  getFrameLikeElements,
+  getFrameLikeTitle,
+  getRootElements,
+} from "../frame";
+import { newTextElement } from "../element";
+import { Mutable } from "../utility-types";
+import { newElementWith } from "../element/mutateElement";
+import Scene from "./Scene";
+import { isFrameElement, isFrameLikeElement } from "../element/typeChecks";
+
+const SVG_EXPORT_TAG = `<!-- svg-source:excalidraw -->`;
+
+// getContainerElement and getBoundTextElement and potentially other helpers
+// depend on `Scene` which will not be available when these pure utils are
+// called outside initialized Excalidraw editor instance or even if called
+// from inside Excalidraw if the elements were never cached by Scene (e.g.
+// for library elements).
+//
+// As such, before passing the elements down, we need to initialize a custom
+// Scene instance and assign them to it.
+//
+// FIXME This is a super hacky workaround and we'll need to rewrite this soon.
+const __createSceneForElementsHack__ = (
+  elements: readonly ExcalidrawElement[],
+) => {
+  const scene = new Scene();
+  // we can't duplicate elements to regenerate ids because we need the
+  // orig ids when embedding. So we do another hack of not mapping element
+  // ids to Scene instances so that we don't override the editor elements
+  // mapping.
+  // We still need to clone the objects themselves to regen references.
+  scene.replaceAllElements(cloneJSON(elements), false);
+  return scene;
+};
+
+const truncateText = (element: ExcalidrawTextElement, maxWidth: number) => {
+  if (element.width <= maxWidth) {
+    return element;
+  }
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d")!;
+  ctx.font = getFontString({
+    fontFamily: element.fontFamily,
+    fontSize: element.fontSize,
+  });
+
+  let text = element.text;
+
+  const metrics = ctx.measureText(text);
+
+  if (metrics.width > maxWidth) {
+    // we iterate from the right, removing characters one by one instead
+    // of bulding the string up. This assumes that it's more likely
+    // your frame names will overflow by not that many characters
+    // (if ever), so it sohuld be faster this way.
+    for (let i = text.length; i > 0; i--) {
+      const newText = `${text.slice(0, i)}...`;
+      if (ctx.measureText(newText).width <= maxWidth) {
+        text = newText;
+        break;
+      }
+    }
+  }
+  return newElementWith(element, { text, width: maxWidth });
+};
+
+/**
+ * When exporting frames, we need to render frame labels which are currently
+ * being rendered in DOM when editing. Adding the labels as regular text
+ * elements seems like a simple hack. In the future we'll want to move to
+ * proper canvas rendering, even within editor (instead of DOM).
+ */
+const addFrameLabelsAsTextElements = (
+  elements: readonly NonDeletedExcalidrawElement[],
+  opts: Pick<AppState, "exportWithDarkMode">,
+) => {
+  const nextElements: NonDeletedExcalidrawElement[] = [];
+  let frameIndex = 0;
+  let magicFrameIndex = 0;
+  for (const element of elements) {
+    if (isFrameLikeElement(element)) {
+      if (isFrameElement(element)) {
+        frameIndex++;
+      } else {
+        magicFrameIndex++;
+      }
+      let textElement: Mutable<ExcalidrawTextElement> = newTextElement({
+        x: element.x,
+        y: element.y - FRAME_STYLE.nameOffsetY,
+        fontFamily: FONT_FAMILY.Assistant,
+        fontSize: FRAME_STYLE.nameFontSize,
+        lineHeight:
+          FRAME_STYLE.nameLineHeight as ExcalidrawTextElement["lineHeight"],
+        strokeColor: opts.exportWithDarkMode
+          ? FRAME_STYLE.nameColorDarkTheme
+          : FRAME_STYLE.nameColorLightTheme,
+        text: getFrameLikeTitle(
+          element,
+          isFrameElement(element) ? frameIndex : magicFrameIndex,
+        ),
+      });
+      textElement.y -= textElement.height;
+
+      textElement = truncateText(textElement, element.width);
+
+      nextElements.push(textElement);
+    }
+    nextElements.push(element);
+  }
+
+  return nextElements;
+};
+
+const getFrameRenderingConfig = (
+  exportingFrame: ExcalidrawFrameLikeElement | null,
+  frameRendering: AppState["frameRendering"] | null,
+): AppState["frameRendering"] => {
+  frameRendering = frameRendering || getDefaultAppState().frameRendering;
+  return {
+    enabled: exportingFrame ? true : frameRendering.enabled,
+    outline: exportingFrame ? false : frameRendering.outline,
+    name: exportingFrame ? false : frameRendering.name,
+    clip: exportingFrame ? true : frameRendering.clip,
+  };
+};
+
+const prepareElementsForRender = ({
+  elements,
+  exportingFrame,
+  frameRendering,
+  exportWithDarkMode,
+}: {
+  elements: readonly ExcalidrawElement[];
+  exportingFrame: ExcalidrawFrameLikeElement | null | undefined;
+  frameRendering: AppState["frameRendering"];
+  exportWithDarkMode: AppState["exportWithDarkMode"];
+}) => {
+  let nextElements: readonly ExcalidrawElement[];
+
+  if (exportingFrame) {
+    nextElements = elementsOverlappingBBox({
+      elements,
+      bounds: exportingFrame,
+      type: "overlap",
+    });
+  } else if (frameRendering.enabled && frameRendering.name) {
+    nextElements = addFrameLabelsAsTextElements(elements, {
+      exportWithDarkMode,
+    });
+  } else {
+    nextElements = elements;
+  }
+
+  return nextElements;
+};
+
+export const exportToCanvas = async (
+  elements: readonly NonDeletedExcalidrawElement[],
+  appState: AppState,
+  files: BinaryFiles,
+  {
+    exportBackground,
+    exportPadding = DEFAULT_EXPORT_PADDING,
+    viewBackgroundColor,
+    exportingFrame,
+  }: {
+    exportBackground: boolean;
+    exportPadding?: number;
+    viewBackgroundColor: string;
+    exportingFrame?: ExcalidrawFrameLikeElement | null;
+  },
+  createCanvas: (
+    width: number,
+    height: number,
+  ) => { canvas: HTMLCanvasElement; scale: number } = (width, height) => {
+    const canvas = document.createElement("canvas");
+    canvas.width = width * appState.exportScale;
+    canvas.height = height * appState.exportScale;
+    return { canvas, scale: appState.exportScale };
+  },
+) => {
+  const tempScene = __createSceneForElementsHack__(elements);
+  elements = tempScene.getNonDeletedElements();
+
+  const frameRendering = getFrameRenderingConfig(
+    exportingFrame ?? null,
+    appState.frameRendering ?? null,
+  );
+
+  const elementsForRender = prepareElementsForRender({
+    elements,
+    exportingFrame,
+    exportWithDarkMode: appState.exportWithDarkMode,
+    frameRendering,
+  });
+
+  if (exportingFrame) {
+    exportPadding = 0;
+  }
+
+  const [minX, minY, width, height] = getCanvasSize(
+    exportingFrame ? [exportingFrame] : getRootElements(elementsForRender),
+    exportPadding,
+  );
+
+  const { canvas, scale = 1 } = createCanvas(width, height);
+
+  const defaultAppState = getDefaultAppState();
+
+  const { imageCache } = await updateImageCache({
+    imageCache: new Map(),
+    fileIds: getInitializedImageElements(elementsForRender).map(
+      (element) => element.fileId,
+    ),
+    files,
+  });
+
+  renderStaticScene({
+    canvas,
+    rc: rough.canvas(canvas),
+    elements: elementsForRender,
+    visibleElements: elementsForRender,
+    scale,
+    appState: {
+      ...appState,
+      frameRendering,
+      viewBackgroundColor: exportBackground ? viewBackgroundColor : null,
+      scrollX: -minX + exportPadding,
+      scrollY: -minY + exportPadding,
+      zoom: defaultAppState.zoom,
+      shouldCacheIgnoreZoom: false,
+      theme: appState.exportWithDarkMode ? "dark" : "light",
+    },
+    renderConfig: {
+      canvasBackgroundColor: viewBackgroundColor,
+      imageCache,
+      renderGrid: false,
+      isExporting: true,
+    },
+  });
+
+  tempScene.destroy();
+
+  return canvas;
+};
+
+export const exportToSvg = async (
+  elements: readonly NonDeletedExcalidrawElement[],
+  appState: {
+    exportBackground: boolean;
+    exportPadding?: number;
+    exportScale?: number;
+    viewBackgroundColor: string;
+    exportWithDarkMode?: boolean;
+    exportEmbedScene?: boolean;
+    frameRendering?: AppState["frameRendering"];
+  },
+  files: BinaryFiles | null,
+  opts?: {
+    renderEmbeddables?: boolean;
+    exportingFrame?: ExcalidrawFrameLikeElement | null;
+  },
+): Promise<SVGSVGElement> => {
+  const tempScene = __createSceneForElementsHack__(elements);
+  elements = tempScene.getNonDeletedElements();
+
+  const frameRendering = getFrameRenderingConfig(
+    opts?.exportingFrame ?? null,
+    appState.frameRendering ?? null,
+  );
+
+  let {
+    exportPadding = DEFAULT_EXPORT_PADDING,
+    exportWithDarkMode = false,
+    viewBackgroundColor,
+    exportScale = 1,
+    exportEmbedScene,
+  } = appState;
+
+  const { exportingFrame = null } = opts || {};
+
+  const elementsForRender = prepareElementsForRender({
+    elements,
+    exportingFrame,
+    exportWithDarkMode,
+    frameRendering,
+  });
+
+  if (exportingFrame) {
+    exportPadding = 0;
+  }
+
+  let metadata = "";
+
+  // we need to serialize the "original" elements before we put them through
+  // the tempScene hack which duplicates and regenerates ids
+  if (exportEmbedScene) {
+    try {
+      metadata = await (
+        await import(/* webpackChunkName: "image" */ "../data/image")
+      ).encodeSvgMetadata({
+        // when embedding scene, we want to embed the origionally supplied
+        // elements which don't contain the temp frame labels.
+        // But it also requires that the exportToSvg is being supplied with
+        // only the elements that we're exporting, and no extra.
+        text: serializeAsJSON(elements, appState, files || {}, "local"),
+      });
+    } catch (error: any) {
+      console.error(error);
+    }
+  }
+
+  const [minX, minY, width, height] = getCanvasSize(
+    exportingFrame ? [exportingFrame] : getRootElements(elementsForRender),
+    exportPadding,
+  );
+
+  // initialize SVG root
+  const svgRoot = document.createElementNS(SVG_NS, "svg");
+  svgRoot.setAttribute("version", "1.1");
+  svgRoot.setAttribute("xmlns", SVG_NS);
+  svgRoot.setAttribute("viewBox", `0 0 ${width} ${height}`);
+  svgRoot.setAttribute("width", `${width * exportScale}`);
+  svgRoot.setAttribute("height", `${height * exportScale}`);
+  if (exportWithDarkMode) {
+    svgRoot.setAttribute("filter", THEME_FILTER);
+  }
+
+  let assetPath = "https://excalidraw.com/";
+  // Asset path needs to be determined only when using package
+  if (import.meta.env.VITE_IS_EXCALIDRAW_NPM_PACKAGE) {
+    assetPath =
+      window.EXCALIDRAW_ASSET_PATH ||
+      `https://unpkg.com/${import.meta.env.VITE_PKG_NAME}@${
+        import.meta.env.PKG_VERSION
+      }`;
+
+    if (assetPath?.startsWith("/")) {
+      assetPath = assetPath.replace("/", `${window.location.origin}/`);
+    }
+    assetPath = `${assetPath}/dist/excalidraw-assets/`;
+  }
+
+  const offsetX = -minX + exportPadding;
+  const offsetY = -minY + exportPadding;
+
+  const frameElements = getFrameLikeElements(elements);
+
+  let exportingFrameClipPath = "";
+  for (const frame of frameElements) {
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(frame);
+    const cx = (x2 - x1) / 2 - (frame.x - x1);
+    const cy = (y2 - y1) / 2 - (frame.y - y1);
+
+    exportingFrameClipPath += `<clipPath id=${frame.id}>
+            <rect transform="translate(${frame.x + offsetX} ${
+      frame.y + offsetY
+    }) rotate(${frame.angle} ${cx} ${cy})"
+          width="${frame.width}"
+          height="${frame.height}"
+          >
+          </rect>
+        </clipPath>`;
+  }
+
+  svgRoot.innerHTML = `
+  ${SVG_EXPORT_TAG}
+  ${metadata}
+  <defs>
+    <style class="style-fonts">
+      @font-face {
+        font-family: "Virgil";
+        src: url("${assetPath}Virgil.woff2");
+      }
+      @font-face {
+        font-family: "Cascadia";
+        src: url("${assetPath}Cascadia.woff2");
+      }
+      @font-face {
+        font-family: "Assistant";
+        src: url("${assetPath}Assistant-Regular.woff2");
+      }
+    </style>
+    ${exportingFrameClipPath}
+  </defs>
+  `;
+
+  // render background rect
+  if (appState.exportBackground && viewBackgroundColor) {
+    const rect = svgRoot.ownerDocument!.createElementNS(SVG_NS, "rect");
+    rect.setAttribute("x", "0");
+    rect.setAttribute("y", "0");
+    rect.setAttribute("width", `${width}`);
+    rect.setAttribute("height", `${height}`);
+    rect.setAttribute("fill", viewBackgroundColor);
+    svgRoot.appendChild(rect);
+  }
+
+  const rsvg = rough.svg(svgRoot);
+  renderSceneToSvg(elementsForRender, rsvg, svgRoot, files || {}, {
+    offsetX,
+    offsetY,
+    isExporting: true,
+    exportWithDarkMode,
+    renderEmbeddables: opts?.renderEmbeddables ?? false,
+    frameRendering,
+    canvasBackgroundColor: viewBackgroundColor,
+  });
+
+  tempScene.destroy();
+
+  return svgRoot;
+};
+
+// calculate smallest area to fit the contents in
+const getCanvasSize = (
+  elements: readonly NonDeletedExcalidrawElement[],
+  exportPadding: number,
+): Bounds => {
+  const [minX, minY, maxX, maxY] = getCommonBounds(elements);
+  const width = distance(minX, maxX) + exportPadding * 2;
+  const height = distance(minY, maxY) + exportPadding * 2;
+
+  return [minX, minY, width, height];
+};
+
+export const getExportSize = (
+  elements: readonly NonDeletedExcalidrawElement[],
+  exportPadding: number,
+  scale: number,
+): [number, number] => {
+  const [, , width, height] = getCanvasSize(elements, exportPadding).map(
+    (dimension) => Math.trunc(dimension * scale),
+  );
+
+  return [width, height];
+};

packages/excalidraw/scene/index.ts

@@ -0,0 +1,19 @@
+export { isOverScrollBars } from "./scrollbars";
+export {
+  isSomeElementSelected,
+  getElementsWithinSelection,
+  getCommonAttributeOfSelectedElements,
+  getSelectedElements,
+  getTargetElements,
+} from "./selection";
+export { calculateScrollCenter } from "./scroll";
+export {
+  hasBackground,
+  hasStrokeWidth,
+  hasStrokeStyle,
+  canHaveArrowheads,
+  canChangeRoundness,
+  getElementAtPosition,
+  getElementsAtPosition,
+} from "./comparisons";
+export { getNormalizedZoom } from "./zoom";

packages/excalidraw/scene/scroll.ts

@@ -0,0 +1,77 @@
+import { AppState, PointerCoords, Zoom } from "../types";
+import { ExcalidrawElement } from "../element/types";
+import {
+  getCommonBounds,
+  getClosestElementBounds,
+  getVisibleElements,
+} from "../element";
+
+import {
+  sceneCoordsToViewportCoords,
+  viewportCoordsToSceneCoords,
+} from "../utils";
+
+const isOutsideViewPort = (appState: AppState, cords: Array<number>) => {
+  const [x1, y1, x2, y2] = cords;
+  const { x: viewportX1, y: viewportY1 } = sceneCoordsToViewportCoords(
+    { sceneX: x1, sceneY: y1 },
+    appState,
+  );
+  const { x: viewportX2, y: viewportY2 } = sceneCoordsToViewportCoords(
+    { sceneX: x2, sceneY: y2 },
+    appState,
+  );
+  return (
+    viewportX2 - viewportX1 > appState.width ||
+    viewportY2 - viewportY1 > appState.height
+  );
+};
+
+export const centerScrollOn = ({
+  scenePoint,
+  viewportDimensions,
+  zoom,
+}: {
+  scenePoint: PointerCoords;
+  viewportDimensions: { height: number; width: number };
+  zoom: Zoom;
+}) => {
+  return {
+    scrollX: viewportDimensions.width / 2 / zoom.value - scenePoint.x,
+    scrollY: viewportDimensions.height / 2 / zoom.value - scenePoint.y,
+  };
+};
+
+export const calculateScrollCenter = (
+  elements: readonly ExcalidrawElement[],
+  appState: AppState,
+): { scrollX: number; scrollY: number } => {
+  elements = getVisibleElements(elements);
+
+  if (!elements.length) {
+    return {
+      scrollX: 0,
+      scrollY: 0,
+    };
+  }
+  let [x1, y1, x2, y2] = getCommonBounds(elements);
+
+  if (isOutsideViewPort(appState, [x1, y1, x2, y2])) {
+    [x1, y1, x2, y2] = getClosestElementBounds(
+      elements,
+      viewportCoordsToSceneCoords(
+        { clientX: appState.scrollX, clientY: appState.scrollY },
+        appState,
+      ),
+    );
+  }
+
+  const centerX = (x1 + x2) / 2;
+  const centerY = (y1 + y2) / 2;
+
+  return centerScrollOn({
+    scenePoint: { x: centerX, y: centerY },
+    viewportDimensions: { width: appState.width, height: appState.height },
+    zoom: appState.zoom,
+  });
+};

packages/excalidraw/scene/scrollbars.ts

@@ -0,0 +1,124 @@
+import { ExcalidrawElement } from "../element/types";
+import { getCommonBounds } from "../element";
+import { InteractiveCanvasAppState } from "../types";
+import { ScrollBars } from "./types";
+import { getGlobalCSSVariable } from "../utils";
+import { getLanguage } from "../i18n";
+
+export const SCROLLBAR_MARGIN = 4;
+export const SCROLLBAR_WIDTH = 6;
+export const SCROLLBAR_COLOR = "rgba(0,0,0,0.3)";
+
+export const getScrollBars = (
+  elements: readonly ExcalidrawElement[],
+  viewportWidth: number,
+  viewportHeight: number,
+  appState: InteractiveCanvasAppState,
+): ScrollBars => {
+  if (elements.length === 0) {
+    return {
+      horizontal: null,
+      vertical: null,
+    };
+  }
+  // This is the bounding box of all the elements
+  const [elementsMinX, elementsMinY, elementsMaxX, elementsMaxY] =
+    getCommonBounds(elements);
+
+  // Apply zoom
+  const viewportWidthWithZoom = viewportWidth / appState.zoom.value;
+  const viewportHeightWithZoom = viewportHeight / appState.zoom.value;
+
+  const viewportWidthDiff = viewportWidth - viewportWidthWithZoom;
+  const viewportHeightDiff = viewportHeight - viewportHeightWithZoom;
+
+  const safeArea = {
+    top: parseInt(getGlobalCSSVariable("sat")) || 0,
+    bottom: parseInt(getGlobalCSSVariable("sab")) || 0,
+    left: parseInt(getGlobalCSSVariable("sal")) || 0,
+    right: parseInt(getGlobalCSSVariable("sar")) || 0,
+  };
+
+  const isRTL = getLanguage().rtl;
+
+  // The viewport is the rectangle currently visible for the user
+  const viewportMinX =
+    -appState.scrollX + viewportWidthDiff / 2 + safeArea.left;
+  const viewportMinY =
+    -appState.scrollY + viewportHeightDiff / 2 + safeArea.top;
+  const viewportMaxX = viewportMinX + viewportWidthWithZoom - safeArea.right;
+  const viewportMaxY = viewportMinY + viewportHeightWithZoom - safeArea.bottom;
+
+  // The scene is the bounding box of both the elements and viewport
+  const sceneMinX = Math.min(elementsMinX, viewportMinX);
+  const sceneMinY = Math.min(elementsMinY, viewportMinY);
+  const sceneMaxX = Math.max(elementsMaxX, viewportMaxX);
+  const sceneMaxY = Math.max(elementsMaxY, viewportMaxY);
+
+  // The scrollbar represents where the viewport is in relationship to the scene
+
+  return {
+    horizontal:
+      viewportMinX === sceneMinX && viewportMaxX === sceneMaxX
+        ? null
+        : {
+            x:
+              Math.max(safeArea.left, SCROLLBAR_MARGIN) +
+              ((viewportMinX - sceneMinX) / (sceneMaxX - sceneMinX)) *
+                viewportWidth,
+            y:
+              viewportHeight -
+              SCROLLBAR_WIDTH -
+              Math.max(SCROLLBAR_MARGIN, safeArea.bottom),
+            width:
+              ((viewportMaxX - viewportMinX) / (sceneMaxX - sceneMinX)) *
+                viewportWidth -
+              Math.max(SCROLLBAR_MARGIN * 2, safeArea.left + safeArea.right),
+            height: SCROLLBAR_WIDTH,
+          },
+    vertical:
+      viewportMinY === sceneMinY && viewportMaxY === sceneMaxY
+        ? null
+        : {
+            x: isRTL
+              ? Math.max(safeArea.left, SCROLLBAR_MARGIN)
+              : viewportWidth -
+                SCROLLBAR_WIDTH -
+                Math.max(safeArea.right, SCROLLBAR_MARGIN),
+            y:
+              ((viewportMinY - sceneMinY) / (sceneMaxY - sceneMinY)) *
+                viewportHeight +
+              Math.max(safeArea.top, SCROLLBAR_MARGIN),
+            width: SCROLLBAR_WIDTH,
+            height:
+              ((viewportMaxY - viewportMinY) / (sceneMaxY - sceneMinY)) *
+                viewportHeight -
+              Math.max(SCROLLBAR_MARGIN * 2, safeArea.top + safeArea.bottom),
+          },
+  };
+};
+
+export const isOverScrollBars = (
+  scrollBars: ScrollBars,
+  x: number,
+  y: number,
+): {
+  isOverEither: boolean;
+  isOverHorizontal: boolean;
+  isOverVertical: boolean;
+} => {
+  const [isOverHorizontal, isOverVertical] = [
+    scrollBars.horizontal,
+    scrollBars.vertical,
+  ].map((scrollBar) => {
+    return (
+      scrollBar != null &&
+      scrollBar.x <= x &&
+      x <= scrollBar.x + scrollBar.width &&
+      scrollBar.y <= y &&
+      y <= scrollBar.y + scrollBar.height
+    );
+  });
+  const isOverEither = isOverHorizontal || isOverVertical;
+  return { isOverEither, isOverHorizontal, isOverVertical };
+};

packages/excalidraw/scene/selection.test.ts

@@ -0,0 +1,35 @@
+import { makeNextSelectedElementIds } from "./selection";
+
+describe("makeNextSelectedElementIds", () => {
+  const _makeNextSelectedElementIds = (
+    selectedElementIds: { [id: string]: true },
+    prevSelectedElementIds: { [id: string]: true },
+    expectUpdated: boolean,
+  ) => {
+    const ret = makeNextSelectedElementIds(selectedElementIds, {
+      selectedElementIds: prevSelectedElementIds,
+    });
+    expect(ret === selectedElementIds).toBe(expectUpdated);
+  };
+  it("should return prevState selectedElementIds if no change", () => {
+    _makeNextSelectedElementIds({}, {}, false);
+    _makeNextSelectedElementIds({ 1: true }, { 1: true }, false);
+    _makeNextSelectedElementIds(
+      { 1: true, 2: true },
+      { 1: true, 2: true },
+      false,
+    );
+  });
+  it("should return new selectedElementIds if changed", () => {
+    // _makeNextSelectedElementIds({ 1: true }, { 1: false }, true);
+    _makeNextSelectedElementIds({ 1: true }, {}, true);
+    _makeNextSelectedElementIds({}, { 1: true }, true);
+    _makeNextSelectedElementIds({ 1: true }, { 2: true }, true);
+    _makeNextSelectedElementIds({ 1: true }, { 1: true, 2: true }, true);
+    _makeNextSelectedElementIds(
+      { 1: true, 2: true },
+      { 1: true, 3: true },
+      true,
+    );
+  });
+});

packages/excalidraw/scene/selection.ts

@@ -0,0 +1,230 @@
+import {
+  ExcalidrawElement,
+  NonDeletedExcalidrawElement,
+} from "../element/types";
+import { getElementAbsoluteCoords, getElementBounds } from "../element";
+import { AppState, InteractiveCanvasAppState } from "../types";
+import { isBoundToContainer, isFrameLikeElement } from "../element/typeChecks";
+import {
+  elementOverlapsWithFrame,
+  getContainingFrame,
+  getFrameChildren,
+} from "../frame";
+import { isShallowEqual } from "../utils";
+import { isElementInViewport } from "../element/sizeHelpers";
+
+/**
+ * Frames and their containing elements are not to be selected at the same time.
+ * Given an array of selected elements, if there are frames and their containing elements
+ * we only keep the frames.
+ * @param selectedElements
+ */
+export const excludeElementsInFramesFromSelection = <
+  T extends ExcalidrawElement,
+>(
+  selectedElements: readonly T[],
+) => {
+  const framesInSelection = new Set<T["id"]>();
+
+  selectedElements.forEach((element) => {
+    if (isFrameLikeElement(element)) {
+      framesInSelection.add(element.id);
+    }
+  });
+
+  return selectedElements.filter((element) => {
+    if (element.frameId && framesInSelection.has(element.frameId)) {
+      return false;
+    }
+    return true;
+  });
+};
+
+export const getElementsWithinSelection = (
+  elements: readonly NonDeletedExcalidrawElement[],
+  selection: NonDeletedExcalidrawElement,
+  excludeElementsInFrames: boolean = true,
+) => {
+  const [selectionX1, selectionY1, selectionX2, selectionY2] =
+    getElementAbsoluteCoords(selection);
+
+  let elementsInSelection = elements.filter((element) => {
+    let [elementX1, elementY1, elementX2, elementY2] =
+      getElementBounds(element);
+
+    const containingFrame = getContainingFrame(element);
+    if (containingFrame) {
+      const [fx1, fy1, fx2, fy2] = getElementBounds(containingFrame);
+
+      elementX1 = Math.max(fx1, elementX1);
+      elementY1 = Math.max(fy1, elementY1);
+      elementX2 = Math.min(fx2, elementX2);
+      elementY2 = Math.min(fy2, elementY2);
+    }
+
+    return (
+      element.locked === false &&
+      element.type !== "selection" &&
+      !isBoundToContainer(element) &&
+      selectionX1 <= elementX1 &&
+      selectionY1 <= elementY1 &&
+      selectionX2 >= elementX2 &&
+      selectionY2 >= elementY2
+    );
+  });
+
+  elementsInSelection = excludeElementsInFrames
+    ? excludeElementsInFramesFromSelection(elementsInSelection)
+    : elementsInSelection;
+
+  elementsInSelection = elementsInSelection.filter((element) => {
+    const containingFrame = getContainingFrame(element);
+
+    if (containingFrame) {
+      return elementOverlapsWithFrame(element, containingFrame);
+    }
+
+    return true;
+  });
+
+  return elementsInSelection;
+};
+
+export const getVisibleAndNonSelectedElements = (
+  elements: readonly NonDeletedExcalidrawElement[],
+  selectedElements: readonly NonDeletedExcalidrawElement[],
+  appState: AppState,
+) => {
+  const selectedElementsSet = new Set(
+    selectedElements.map((element) => element.id),
+  );
+  return elements.filter((element) => {
+    const isVisible = isElementInViewport(
+      element,
+      appState.width,
+      appState.height,
+      appState,
+    );
+
+    return !selectedElementsSet.has(element.id) && isVisible;
+  });
+};
+
+// FIXME move this into the editor instance to keep utility methods stateless
+export const isSomeElementSelected = (function () {
+  let lastElements: readonly NonDeletedExcalidrawElement[] | null = null;
+  let lastSelectedElementIds: AppState["selectedElementIds"] | null = null;
+  let isSelected: boolean | null = null;
+
+  const ret = (
+    elements: readonly NonDeletedExcalidrawElement[],
+    appState: Pick<AppState, "selectedElementIds">,
+  ): boolean => {
+    if (
+      isSelected != null &&
+      elements === lastElements &&
+      appState.selectedElementIds === lastSelectedElementIds
+    ) {
+      return isSelected;
+    }
+
+    isSelected = elements.some(
+      (element) => appState.selectedElementIds[element.id],
+    );
+    lastElements = elements;
+    lastSelectedElementIds = appState.selectedElementIds;
+
+    return isSelected;
+  };
+
+  ret.clearCache = () => {
+    lastElements = null;
+    lastSelectedElementIds = null;
+    isSelected = null;
+  };
+
+  return ret;
+})();
+
+/**
+ * Returns common attribute (picked by `getAttribute` callback) of selected
+ *  elements. If elements don't share the same value, returns `null`.
+ */
+export const getCommonAttributeOfSelectedElements = <T>(
+  elements: readonly NonDeletedExcalidrawElement[],
+  appState: Pick<AppState, "selectedElementIds">,
+  getAttribute: (element: ExcalidrawElement) => T,
+): T | null => {
+  const attributes = Array.from(
+    new Set(
+      getSelectedElements(elements, appState).map((element) =>
+        getAttribute(element),
+      ),
+    ),
+  );
+  return attributes.length === 1 ? attributes[0] : null;
+};
+
+export const getSelectedElements = (
+  elements: readonly NonDeletedExcalidrawElement[],
+  appState: Pick<InteractiveCanvasAppState, "selectedElementIds">,
+  opts?: {
+    includeBoundTextElement?: boolean;
+    includeElementsInFrames?: boolean;
+  },
+) => {
+  const selectedElements = elements.filter((element) => {
+    if (appState.selectedElementIds[element.id]) {
+      return element;
+    }
+    if (
+      opts?.includeBoundTextElement &&
+      isBoundToContainer(element) &&
+      appState.selectedElementIds[element?.containerId]
+    ) {
+      return element;
+    }
+    return null;
+  });
+
+  if (opts?.includeElementsInFrames) {
+    const elementsToInclude: ExcalidrawElement[] = [];
+    selectedElements.forEach((element) => {
+      if (isFrameLikeElement(element)) {
+        getFrameChildren(elements, element.id).forEach((e) =>
+          elementsToInclude.push(e),
+        );
+      }
+      elementsToInclude.push(element);
+    });
+
+    return elementsToInclude;
+  }
+
+  return selectedElements;
+};
+
+export const getTargetElements = (
+  elements: readonly NonDeletedExcalidrawElement[],
+  appState: Pick<AppState, "selectedElementIds" | "editingElement">,
+) =>
+  appState.editingElement
+    ? [appState.editingElement]
+    : getSelectedElements(elements, appState, {
+        includeBoundTextElement: true,
+      });
+
+/**
+ * returns prevState's selectedElementids if no change from previous, so as to
+ * retain reference identity for memoization
+ */
+export const makeNextSelectedElementIds = (
+  nextSelectedElementIds: AppState["selectedElementIds"],
+  prevState: Pick<AppState, "selectedElementIds">,
+) => {
+  if (isShallowEqual(prevState.selectedElementIds, nextSelectedElementIds)) {
+    return prevState.selectedElementIds;
+  }
+
+  return nextSelectedElementIds;
+};

packages/excalidraw/scene/types.ts

@@ -0,0 +1,122 @@
+import type { RoughCanvas } from "roughjs/bin/canvas";
+import { Drawable } from "roughjs/bin/core";
+import {
+  ExcalidrawTextElement,
+  NonDeletedExcalidrawElement,
+} from "../element/types";
+import {
+  AppClassProperties,
+  AppState,
+  InteractiveCanvasAppState,
+  StaticCanvasAppState,
+} from "../types";
+
+export type StaticCanvasRenderConfig = {
+  canvasBackgroundColor: AppState["viewBackgroundColor"];
+  // extra options passed to the renderer
+  // ---------------------------------------------------------------------------
+  imageCache: AppClassProperties["imageCache"];
+  renderGrid: boolean;
+  /** when exporting the behavior is slightly different (e.g. we can't use
+   CSS filters), and we disable render optimizations for best output */
+  isExporting: boolean;
+};
+
+export type SVGRenderConfig = {
+  offsetX: number;
+  offsetY: number;
+  isExporting: boolean;
+  exportWithDarkMode: boolean;
+  renderEmbeddables: boolean;
+  frameRendering: AppState["frameRendering"];
+  canvasBackgroundColor: AppState["viewBackgroundColor"];
+};
+
+export type InteractiveCanvasRenderConfig = {
+  // collab-related state
+  // ---------------------------------------------------------------------------
+  remoteSelectedElementIds: { [elementId: string]: string[] };
+  remotePointerViewportCoords: { [id: string]: { x: number; y: number } };
+  remotePointerUserStates: { [id: string]: string };
+  remotePointerUsernames: { [id: string]: string };
+  remotePointerButton?: { [id: string]: string | undefined };
+  selectionColor?: string;
+  // extra options passed to the renderer
+  // ---------------------------------------------------------------------------
+  renderScrollbars?: boolean;
+};
+
+export type RenderInteractiveSceneCallback = {
+  atLeastOneVisibleElement: boolean;
+  elements: readonly NonDeletedExcalidrawElement[];
+  scrollBars?: ScrollBars;
+};
+
+export type StaticSceneRenderConfig = {
+  canvas: HTMLCanvasElement;
+  rc: RoughCanvas;
+  elements: readonly NonDeletedExcalidrawElement[];
+  visibleElements: readonly NonDeletedExcalidrawElement[];
+  scale: number;
+  appState: StaticCanvasAppState;
+  renderConfig: StaticCanvasRenderConfig;
+};
+
+export type InteractiveSceneRenderConfig = {
+  canvas: HTMLCanvasElement | null;
+  elements: readonly NonDeletedExcalidrawElement[];
+  visibleElements: readonly NonDeletedExcalidrawElement[];
+  selectedElements: readonly NonDeletedExcalidrawElement[];
+  scale: number;
+  appState: InteractiveCanvasAppState;
+  renderConfig: InteractiveCanvasRenderConfig;
+  callback: (data: RenderInteractiveSceneCallback) => void;
+};
+
+export type SceneScroll = {
+  scrollX: number;
+  scrollY: number;
+};
+
+export interface Scene {
+  elements: ExcalidrawTextElement[];
+}
+
+export type ExportType =
+  | "png"
+  | "clipboard"
+  | "clipboard-svg"
+  | "backend"
+  | "svg";
+
+export type ScrollBars = {
+  horizontal: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  } | null;
+  vertical: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  } | null;
+};
+
+export type ElementShape = Drawable | Drawable[] | null;
+
+export type ElementShapes = {
+  rectangle: Drawable;
+  ellipse: Drawable;
+  diamond: Drawable;
+  iframe: Drawable;
+  embeddable: Drawable;
+  freedraw: Drawable | null;
+  arrow: Drawable[];
+  line: Drawable[];
+  text: null;
+  image: null;
+  frame: null;
+  magicframe: null;
+};

packages/excalidraw/scene/zoom.ts

@@ -0,0 +1,40 @@
+import { MIN_ZOOM } from "../constants";
+import { AppState, NormalizedZoomValue } from "../types";
+
+export const getNormalizedZoom = (zoom: number): NormalizedZoomValue => {
+  return Math.max(MIN_ZOOM, Math.min(zoom, 30)) as NormalizedZoomValue;
+};
+
+export const getStateForZoom = (
+  {
+    viewportX,
+    viewportY,
+    nextZoom,
+  }: {
+    viewportX: number;
+    viewportY: number;
+    nextZoom: NormalizedZoomValue;
+  },
+  appState: AppState,
+) => {
+  const appLayerX = viewportX - appState.offsetLeft;
+  const appLayerY = viewportY - appState.offsetTop;
+
+  const currentZoom = appState.zoom.value;
+
+  // get original scroll position without zoom
+  const baseScrollX = appState.scrollX + (appLayerX - appLayerX / currentZoom);
+  const baseScrollY = appState.scrollY + (appLayerY - appLayerY / currentZoom);
+
+  // get scroll offsets for target zoom level
+  const zoomOffsetScrollX = -(appLayerX - appLayerX / nextZoom);
+  const zoomOffsetScrollY = -(appLayerY - appLayerY / nextZoom);
+
+  return {
+    scrollX: baseScrollX + zoomOffsetScrollX,
+    scrollY: baseScrollY + zoomOffsetScrollY,
+    zoom: {
+      value: nextZoom,
+    },
+  };
+};