@excalidraw/excalidraw 0.17.1-7441-0269e5a → 0.17.1-7441-4c9a6f4

package/dist/packages/excalidraw/scene/export.js

@@ -0,0 +1,304 @@
+import rough from "roughjs/bin/rough";
+import { getCommonBounds, getElementAbsoluteCoords, } from "../element/bounds";
+import { renderSceneToSvg, renderStaticScene } from "../renderer/renderScene";
+import { cloneJSON, distance, getFontString } from "../utils";
+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 "../../utils/export";
+import { getFrameLikeElements, getFrameLikeTitle, getRootElements, } from "../frame";
+import { newTextElement } from "../element";
+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) => {
+    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, maxWidth) => {
+    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, opts) => {
+    const nextElements = [];
+    let frameIndex = 0;
+    let magicFrameIndex = 0;
+    for (const element of elements) {
+        if (isFrameLikeElement(element)) {
+            if (isFrameElement(element)) {
+                frameIndex++;
+            }
+            else {
+                magicFrameIndex++;
+            }
+            let textElement = newTextElement({
+                x: element.x,
+                y: element.y - FRAME_STYLE.nameOffsetY,
+                fontFamily: FONT_FAMILY.Assistant,
+                fontSize: FRAME_STYLE.nameFontSize,
+                lineHeight: FRAME_STYLE.nameLineHeight,
+                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, 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, }) => {
+    let nextElements;
+    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, appState, files, { exportBackground, exportPadding = DEFAULT_EXPORT_PADDING, viewBackgroundColor, exportingFrame, }, createCanvas = (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, appState, files, opts) => {
+    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("../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) {
+            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, exportPadding) => {
+    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, exportPadding, scale) => {
+    const [, , width, height] = getCanvasSize(elements, exportPadding).map((dimension) => Math.trunc(dimension * scale));
+    return [width, height];
+};

package/dist/packages/excalidraw/scene/index.js

@@ -0,0 +1,5 @@
+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";

package/dist/packages/excalidraw/scene/scroll.js

@@ -0,0 +1,35 @@
+import { getCommonBounds, getClosestElementBounds, getVisibleElements, } from "../element";
+import { sceneCoordsToViewportCoords, viewportCoordsToSceneCoords, } from "../utils";
+const isOutsideViewPort = (appState, cords) => {
+    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, }) => {
+    return {
+        scrollX: viewportDimensions.width / 2 / zoom.value - scenePoint.x,
+        scrollY: viewportDimensions.height / 2 / zoom.value - scenePoint.y,
+    };
+};
+export const calculateScrollCenter = (elements, appState) => {
+    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,
+    });
+};

package/dist/packages/excalidraw/scene/scrollbars.js

@@ -0,0 +1,85 @@
+import { getCommonBounds } from "../element";
+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, viewportWidth, viewportHeight, appState) => {
+    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, x, y) => {
+    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 };
+};

package/dist/packages/excalidraw/scene/selection.js

@@ -0,0 +1,134 @@
+import { getElementAbsoluteCoords, getElementBounds } from "../element";
+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 = (selectedElements) => {
+    const framesInSelection = new Set();
+    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, selection, excludeElementsInFrames = 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, selectedElements, 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 = null;
+    let lastSelectedElementIds = null;
+    let isSelected = null;
+    const ret = (elements, appState) => {
+        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 = (elements, appState, getAttribute) => {
+    const attributes = Array.from(new Set(getSelectedElements(elements, appState).map((element) => getAttribute(element))));
+    return attributes.length === 1 ? attributes[0] : null;
+};
+export const getSelectedElements = (elements, appState, opts) => {
+    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 = [];
+        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, appState) => 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, prevState) => {
+    if (isShallowEqual(prevState.selectedElementIds, nextSelectedElementIds)) {
+        return prevState.selectedElementIds;
+    }
+    return nextSelectedElementIds;
+};

package/dist/packages/excalidraw/scene/types.js

@@ -0,0 +1 @@
+export {};

package/dist/packages/excalidraw/scene/zoom.js

@@ -0,0 +1,22 @@
+import { MIN_ZOOM } from "../constants";
+export const getNormalizedZoom = (zoom) => {
+    return Math.max(MIN_ZOOM, Math.min(zoom, 30));
+};
+export const getStateForZoom = ({ viewportX, viewportY, nextZoom, }, 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,
+        },
+    };
+};

package/dist/packages/excalidraw/shapes.js

@@ -0,0 +1,84 @@
+import { ArrowIcon, DiamondIcon, EllipseIcon, EraserIcon, FreedrawIcon, ImageIcon, LineIcon, RectangleIcon, SelectionIcon, TextIcon, } from "./components/icons";
+import { KEYS } from "./keys";
+export const SHAPES = [
+    {
+        icon: SelectionIcon,
+        value: "selection",
+        key: KEYS.V,
+        numericKey: KEYS["1"],
+        fillable: true,
+    },
+    {
+        icon: RectangleIcon,
+        value: "rectangle",
+        key: KEYS.R,
+        numericKey: KEYS["2"],
+        fillable: true,
+    },
+    {
+        icon: DiamondIcon,
+        value: "diamond",
+        key: KEYS.D,
+        numericKey: KEYS["3"],
+        fillable: true,
+    },
+    {
+        icon: EllipseIcon,
+        value: "ellipse",
+        key: KEYS.O,
+        numericKey: KEYS["4"],
+        fillable: true,
+    },
+    {
+        icon: ArrowIcon,
+        value: "arrow",
+        key: KEYS.A,
+        numericKey: KEYS["5"],
+        fillable: true,
+    },
+    {
+        icon: LineIcon,
+        value: "line",
+        key: KEYS.L,
+        numericKey: KEYS["6"],
+        fillable: true,
+    },
+    {
+        icon: FreedrawIcon,
+        value: "freedraw",
+        key: [KEYS.P, KEYS.X],
+        numericKey: KEYS["7"],
+        fillable: false,
+    },
+    {
+        icon: TextIcon,
+        value: "text",
+        key: KEYS.T,
+        numericKey: KEYS["8"],
+        fillable: false,
+    },
+    {
+        icon: ImageIcon,
+        value: "image",
+        key: null,
+        numericKey: KEYS["9"],
+        fillable: false,
+    },
+    {
+        icon: EraserIcon,
+        value: "eraser",
+        key: KEYS.E,
+        numericKey: KEYS["0"],
+        fillable: false,
+    },
+];
+export const findShapeByKey = (key) => {
+    const shape = SHAPES.find((shape, index) => {
+        return ((shape.numericKey != null && key === shape.numericKey.toString()) ||
+            (shape.key &&
+                (typeof shape.key === "string"
+                    ? shape.key === key
+                    : shape.key.includes(key))));
+    });
+    return shape?.value || null;
+};