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

package/dist/packages/excalidraw/zindex.js

@@ -0,0 +1,349 @@
+import { bumpVersion } from "./element/mutateElement";
+import { isFrameLikeElement } from "./element/typeChecks";
+import { getElementsInGroup } from "./groups";
+import { getSelectedElements } from "./scene";
+import Scene from "./scene/Scene";
+import { arrayToMap, findIndex, findLastIndex } from "./utils";
+const isOfTargetFrame = (element, frameId) => {
+    return element.frameId === frameId || element.id === frameId;
+};
+/**
+ * Returns indices of elements to move based on selected elements.
+ * Includes contiguous deleted elements that are between two selected elements,
+ *  e.g.: [0 (selected), 1 (deleted), 2 (deleted), 3 (selected)]
+ *
+ * Specified elements (elementsToBeMoved) take precedence over
+ * appState.selectedElementsIds
+ */
+const getIndicesToMove = (elements, appState, elementsToBeMoved) => {
+    let selectedIndices = [];
+    let deletedIndices = [];
+    let includeDeletedIndex = null;
+    let index = -1;
+    const selectedElementIds = arrayToMap(elementsToBeMoved
+        ? elementsToBeMoved
+        : getSelectedElements(elements, appState, {
+            includeBoundTextElement: true,
+            includeElementsInFrames: true,
+        }));
+    while (++index < elements.length) {
+        const element = elements[index];
+        if (selectedElementIds.get(element.id)) {
+            if (deletedIndices.length) {
+                selectedIndices = selectedIndices.concat(deletedIndices);
+                deletedIndices = [];
+            }
+            selectedIndices.push(index);
+            includeDeletedIndex = index + 1;
+        }
+        else if (element.isDeleted && includeDeletedIndex === index) {
+            includeDeletedIndex = index + 1;
+            deletedIndices.push(index);
+        }
+        else {
+            deletedIndices = [];
+        }
+    }
+    return selectedIndices;
+};
+const toContiguousGroups = (array) => {
+    let cursor = 0;
+    return array.reduce((acc, value, index) => {
+        if (index > 0 && array[index - 1] !== value - 1) {
+            cursor = ++cursor;
+        }
+        (acc[cursor] || (acc[cursor] = [])).push(value);
+        return acc;
+    }, []);
+};
+/**
+ * @returns index of target element, consindering tightly-bound elements
+ * (currently non-linear elements bound to a container) as a one unit.
+ * If no binding present, returns `undefined`.
+ */
+const getTargetIndexAccountingForBinding = (nextElement, elements, direction) => {
+    if ("containerId" in nextElement && nextElement.containerId) {
+        if (direction === "left") {
+            const containerElement = Scene.getScene(nextElement).getElement(nextElement.containerId);
+            if (containerElement) {
+                return elements.indexOf(containerElement);
+            }
+        }
+        else {
+            return elements.indexOf(nextElement);
+        }
+    }
+    else {
+        const boundElementId = nextElement.boundElements?.find((binding) => binding.type !== "arrow")?.id;
+        if (boundElementId) {
+            if (direction === "left") {
+                return elements.indexOf(nextElement);
+            }
+            const boundTextElement = Scene.getScene(nextElement).getElement(boundElementId);
+            if (boundTextElement) {
+                return elements.indexOf(boundTextElement);
+            }
+        }
+    }
+};
+const getContiguousFrameRangeElements = (allElements, frameId) => {
+    let rangeStart = -1;
+    let rangeEnd = -1;
+    allElements.forEach((element, index) => {
+        if (isOfTargetFrame(element, frameId)) {
+            if (rangeStart === -1) {
+                rangeStart = index;
+            }
+            rangeEnd = index;
+        }
+    });
+    if (rangeStart === -1) {
+        return [];
+    }
+    return allElements.slice(rangeStart, rangeEnd + 1);
+};
+/**
+ * Returns next candidate index that's available to be moved to. Currently that
+ *  is a non-deleted element, and not inside a group (unless we're editing it).
+ */
+const getTargetIndex = (appState, elements, boundaryIndex, direction, 
+/**
+ * Frame id if moving frame children.
+ * If whole frame (including all children) is being moved, supply `null`.
+ */
+containingFrame) => {
+    const sourceElement = elements[boundaryIndex];
+    const indexFilter = (element) => {
+        if (element.isDeleted) {
+            return false;
+        }
+        if (containingFrame) {
+            return element.frameId === containingFrame;
+        }
+        // if we're editing group, find closest sibling irrespective of whether
+        // there's a different-group element between them (for legacy reasons)
+        if (appState.editingGroupId) {
+            return element.groupIds.includes(appState.editingGroupId);
+        }
+        return true;
+    };
+    const candidateIndex = direction === "left"
+        ? findLastIndex(elements, (el) => indexFilter(el), Math.max(0, boundaryIndex - 1))
+        : findIndex(elements, (el) => indexFilter(el), boundaryIndex + 1);
+    const nextElement = elements[candidateIndex];
+    if (!nextElement) {
+        return -1;
+    }
+    if (appState.editingGroupId) {
+        if (
+        // candidate element is a sibling in current editing group → return
+        sourceElement?.groupIds.join("") === nextElement?.groupIds.join("")) {
+            return (getTargetIndexAccountingForBinding(nextElement, elements, direction) ??
+                candidateIndex);
+        }
+        else if (!nextElement?.groupIds.includes(appState.editingGroupId)) {
+            // candidate element is outside current editing group → prevent
+            return -1;
+        }
+    }
+    if (!containingFrame &&
+        (nextElement.frameId || isFrameLikeElement(nextElement))) {
+        const frameElements = getContiguousFrameRangeElements(elements, nextElement.frameId || nextElement.id);
+        return direction === "left"
+            ? elements.indexOf(frameElements[0])
+            : elements.indexOf(frameElements[frameElements.length - 1]);
+    }
+    if (!nextElement.groupIds.length) {
+        return (getTargetIndexAccountingForBinding(nextElement, elements, direction) ??
+            candidateIndex);
+    }
+    const siblingGroupId = appState.editingGroupId
+        ? nextElement.groupIds[nextElement.groupIds.indexOf(appState.editingGroupId) - 1]
+        : nextElement.groupIds[nextElement.groupIds.length - 1];
+    const elementsInSiblingGroup = getElementsInGroup(elements, siblingGroupId);
+    if (elementsInSiblingGroup.length) {
+        // assumes getElementsInGroup() returned elements are sorted
+        // by zIndex (ascending)
+        return direction === "left"
+            ? elements.indexOf(elementsInSiblingGroup[0])
+            : elements.indexOf(elementsInSiblingGroup[elementsInSiblingGroup.length - 1]);
+    }
+    return candidateIndex;
+};
+const getTargetElementsMap = (elements, indices) => {
+    return indices.reduce((acc, index) => {
+        const element = elements[index];
+        acc[element.id] = element;
+        return acc;
+    }, {});
+};
+const shiftElementsByOne = (elements, appState, direction) => {
+    const indicesToMove = getIndicesToMove(elements, appState);
+    const targetElementsMap = getTargetElementsMap(elements, indicesToMove);
+    let groupedIndices = toContiguousGroups(indicesToMove);
+    if (direction === "right") {
+        groupedIndices = groupedIndices.reverse();
+    }
+    const selectedFrames = new Set(indicesToMove
+        .filter((idx) => isFrameLikeElement(elements[idx]))
+        .map((idx) => elements[idx].id));
+    groupedIndices.forEach((indices, i) => {
+        const leadingIndex = indices[0];
+        const trailingIndex = indices[indices.length - 1];
+        const boundaryIndex = direction === "left" ? leadingIndex : trailingIndex;
+        const containingFrame = indices.some((idx) => {
+            const el = elements[idx];
+            return el.frameId && selectedFrames.has(el.frameId);
+        })
+            ? null
+            : elements[boundaryIndex]?.frameId;
+        const targetIndex = getTargetIndex(appState, elements, boundaryIndex, direction, containingFrame);
+        if (targetIndex === -1 || boundaryIndex === targetIndex) {
+            return;
+        }
+        const leadingElements = direction === "left"
+            ? elements.slice(0, targetIndex)
+            : elements.slice(0, leadingIndex);
+        const targetElements = elements.slice(leadingIndex, trailingIndex + 1);
+        const displacedElements = direction === "left"
+            ? elements.slice(targetIndex, leadingIndex)
+            : elements.slice(trailingIndex + 1, targetIndex + 1);
+        const trailingElements = direction === "left"
+            ? elements.slice(trailingIndex + 1)
+            : elements.slice(targetIndex + 1);
+        elements =
+            direction === "left"
+                ? [
+                    ...leadingElements,
+                    ...targetElements,
+                    ...displacedElements,
+                    ...trailingElements,
+                ]
+                : [
+                    ...leadingElements,
+                    ...displacedElements,
+                    ...targetElements,
+                    ...trailingElements,
+                ];
+    });
+    return elements.map((element) => {
+        if (targetElementsMap[element.id]) {
+            return bumpVersion(element);
+        }
+        return element;
+    });
+};
+const shiftElementsToEnd = (elements, appState, direction, containingFrame, elementsToBeMoved) => {
+    const indicesToMove = getIndicesToMove(elements, appState, elementsToBeMoved);
+    const targetElementsMap = getTargetElementsMap(elements, indicesToMove);
+    const displacedElements = [];
+    let leadingIndex;
+    let trailingIndex;
+    if (direction === "left") {
+        if (containingFrame) {
+            leadingIndex = findIndex(elements, (el) => isOfTargetFrame(el, containingFrame));
+        }
+        else if (appState.editingGroupId) {
+            const groupElements = getElementsInGroup(elements, appState.editingGroupId);
+            if (!groupElements.length) {
+                return elements;
+            }
+            leadingIndex = elements.indexOf(groupElements[0]);
+        }
+        else {
+            leadingIndex = 0;
+        }
+        trailingIndex = indicesToMove[indicesToMove.length - 1];
+    }
+    else {
+        if (containingFrame) {
+            trailingIndex = findLastIndex(elements, (el) => isOfTargetFrame(el, containingFrame));
+        }
+        else if (appState.editingGroupId) {
+            const groupElements = getElementsInGroup(elements, appState.editingGroupId);
+            if (!groupElements.length) {
+                return elements;
+            }
+            trailingIndex = elements.indexOf(groupElements[groupElements.length - 1]);
+        }
+        else {
+            trailingIndex = elements.length - 1;
+        }
+        leadingIndex = indicesToMove[0];
+    }
+    if (leadingIndex === -1) {
+        leadingIndex = 0;
+    }
+    for (let index = leadingIndex; index < trailingIndex + 1; index++) {
+        if (!indicesToMove.includes(index)) {
+            displacedElements.push(elements[index]);
+        }
+    }
+    const targetElements = Object.values(targetElementsMap).map((element) => {
+        return bumpVersion(element);
+    });
+    const leadingElements = elements.slice(0, leadingIndex);
+    const trailingElements = elements.slice(trailingIndex + 1);
+    return direction === "left"
+        ? [
+            ...leadingElements,
+            ...targetElements,
+            ...displacedElements,
+            ...trailingElements,
+        ]
+        : [
+            ...leadingElements,
+            ...displacedElements,
+            ...targetElements,
+            ...trailingElements,
+        ];
+};
+function shiftElementsAccountingForFrames(allElements, appState, direction, shiftFunction) {
+    const elementsToMove = arrayToMap(getSelectedElements(allElements, appState, {
+        includeBoundTextElement: true,
+        includeElementsInFrames: true,
+    }));
+    const frameAwareContiguousElementsToMove = { regularElements: [], frameChildren: new Map() };
+    const fullySelectedFrames = new Set();
+    for (const element of allElements) {
+        if (elementsToMove.has(element.id) && isFrameLikeElement(element)) {
+            fullySelectedFrames.add(element.id);
+        }
+    }
+    for (const element of allElements) {
+        if (elementsToMove.has(element.id)) {
+            if (isFrameLikeElement(element) ||
+                (element.frameId && fullySelectedFrames.has(element.frameId))) {
+                frameAwareContiguousElementsToMove.regularElements.push(element);
+            }
+            else if (!element.frameId) {
+                frameAwareContiguousElementsToMove.regularElements.push(element);
+            }
+            else {
+                const frameChildren = frameAwareContiguousElementsToMove.frameChildren.get(element.frameId) || [];
+                frameChildren.push(element);
+                frameAwareContiguousElementsToMove.frameChildren.set(element.frameId, frameChildren);
+            }
+        }
+    }
+    let nextElements = allElements;
+    const frameChildrenSets = Array.from(frameAwareContiguousElementsToMove.frameChildren.entries());
+    for (const [frameId, children] of frameChildrenSets) {
+        nextElements = shiftFunction(allElements, appState, direction, frameId, children);
+    }
+    return shiftFunction(nextElements, appState, direction, null, frameAwareContiguousElementsToMove.regularElements);
+}
+// public API
+// -----------------------------------------------------------------------------
+export const moveOneLeft = (allElements, appState) => {
+    return shiftElementsByOne(allElements, appState, "left");
+};
+export const moveOneRight = (allElements, appState) => {
+    return shiftElementsByOne(allElements, appState, "right");
+};
+export const moveAllLeft = (allElements, appState) => {
+    return shiftElementsAccountingForFrames(allElements, appState, "left", shiftElementsToEnd);
+};
+export const moveAllRight = (allElements, appState) => {
+    return shiftElementsAccountingForFrames(allElements, appState, "right", shiftElementsToEnd);
+};

package/dist/packages/utils/bbox.js

@@ -0,0 +1,42 @@
+export function getBBox(line) {
+    return [
+        Math.min(line[0][0], line[1][0]),
+        Math.min(line[0][1], line[1][1]),
+        Math.max(line[0][0], line[1][0]),
+        Math.max(line[0][1], line[1][1]),
+    ];
+}
+export function crossProduct(a, b) {
+    return a[0] * b[1] - b[0] * a[1];
+}
+export function doBBoxesIntersect(a, b) {
+    return a[0] <= b[2] && a[2] >= b[0] && a[1] <= b[3] && a[3] >= b[1];
+}
+export function translate(a, b) {
+    return [a[0] - b[0], a[1] - b[1]];
+}
+const EPSILON = 0.000001;
+export function isPointOnLine(l, p) {
+    const p1 = translate(l[1], l[0]);
+    const p2 = translate(p, l[0]);
+    const r = crossProduct(p1, p2);
+    return Math.abs(r) < EPSILON;
+}
+export function isPointRightOfLine(l, p) {
+    const p1 = translate(l[1], l[0]);
+    const p2 = translate(p, l[0]);
+    return crossProduct(p1, p2) < 0;
+}
+export function isLineSegmentTouchingOrCrossingLine(a, b) {
+    return (isPointOnLine(a, b[0]) ||
+        isPointOnLine(a, b[1]) ||
+        (isPointRightOfLine(a, b[0])
+            ? !isPointRightOfLine(a, b[1])
+            : isPointRightOfLine(a, b[1])));
+}
+// https://martin-thoma.com/how-to-check-if-two-line-segments-intersect/
+export function doLineSegmentsIntersect(a, b) {
+    return (doBBoxesIntersect(getBBox(a), getBBox(b)) &&
+        isLineSegmentTouchingOrCrossingLine(a, b) &&
+        isLineSegmentTouchingOrCrossingLine(b, a));
+}

package/dist/packages/utils/export.js

@@ -0,0 +1,109 @@
+import { exportToCanvas as _exportToCanvas, exportToSvg as _exportToSvg, } from "../excalidraw/scene/export";
+import { getDefaultAppState } from "../excalidraw/appState";
+import { restore } from "../excalidraw/data/restore";
+import { MIME_TYPES } from "../excalidraw/constants";
+import { encodePngMetadata } from "../excalidraw/data/image";
+import { serializeAsJSON } from "../excalidraw/data/json";
+import { copyBlobToClipboardAsPng, copyTextToSystemClipboard, copyToClipboard, } from "../excalidraw/clipboard";
+export { MIME_TYPES };
+export const exportToCanvas = ({ elements, appState, files, maxWidthOrHeight, getDimensions, exportPadding, exportingFrame, }) => {
+    const { elements: restoredElements, appState: restoredAppState } = restore({ elements, appState }, null, null);
+    const { exportBackground, viewBackgroundColor } = restoredAppState;
+    return _exportToCanvas(restoredElements, { ...restoredAppState, offsetTop: 0, offsetLeft: 0, width: 0, height: 0 }, files || {}, { exportBackground, exportPadding, viewBackgroundColor, exportingFrame }, (width, height) => {
+        const canvas = document.createElement("canvas");
+        if (maxWidthOrHeight) {
+            if (typeof getDimensions === "function") {
+                console.warn("`getDimensions()` is ignored when `maxWidthOrHeight` is supplied.");
+            }
+            const max = Math.max(width, height);
+            // if content is less then maxWidthOrHeight, fallback on supplied scale
+            const scale = maxWidthOrHeight < max
+                ? maxWidthOrHeight / max
+                : appState?.exportScale ?? 1;
+            canvas.width = width * scale;
+            canvas.height = height * scale;
+            return {
+                canvas,
+                scale,
+            };
+        }
+        const ret = getDimensions?.(width, height) || { width, height };
+        canvas.width = ret.width;
+        canvas.height = ret.height;
+        return {
+            canvas,
+            scale: ret.scale ?? 1,
+        };
+    });
+};
+export const exportToBlob = async (opts) => {
+    let { mimeType = MIME_TYPES.png, quality } = opts;
+    if (mimeType === MIME_TYPES.png && typeof quality === "number") {
+        console.warn(`"quality" will be ignored for "${MIME_TYPES.png}" mimeType`);
+    }
+    // typo in MIME type (should be "jpeg")
+    if (mimeType === "image/jpg") {
+        mimeType = MIME_TYPES.jpg;
+    }
+    if (mimeType === MIME_TYPES.jpg && !opts.appState?.exportBackground) {
+        console.warn(`Defaulting "exportBackground" to "true" for "${MIME_TYPES.jpg}" mimeType`);
+        opts = {
+            ...opts,
+            appState: { ...opts.appState, exportBackground: true },
+        };
+    }
+    const canvas = await exportToCanvas(opts);
+    quality = quality ? quality : /image\/jpe?g/.test(mimeType) ? 0.92 : 0.8;
+    return new Promise((resolve, reject) => {
+        canvas.toBlob(async (blob) => {
+            if (!blob) {
+                return reject(new Error("couldn't export to blob"));
+            }
+            if (blob &&
+                mimeType === MIME_TYPES.png &&
+                opts.appState?.exportEmbedScene) {
+                blob = await encodePngMetadata({
+                    blob,
+                    metadata: serializeAsJSON(
+                    // NOTE as long as we're using the Scene hack, we need to ensure
+                    // we pass the original, uncloned elements when serializing
+                    // so that we keep ids stable
+                    opts.elements, opts.appState, opts.files || {}, "local"),
+                });
+            }
+            resolve(blob);
+        }, mimeType, quality);
+    });
+};
+export const exportToSvg = async ({ elements, appState = getDefaultAppState(), files = {}, exportPadding, renderEmbeddables, exportingFrame, }) => {
+    const { elements: restoredElements, appState: restoredAppState } = restore({ elements, appState }, null, null);
+    const exportAppState = {
+        ...restoredAppState,
+        exportPadding,
+    };
+    return _exportToSvg(restoredElements, exportAppState, files, {
+        exportingFrame,
+        renderEmbeddables,
+    });
+};
+export const exportToClipboard = async (opts) => {
+    if (opts.type === "svg") {
+        const svg = await exportToSvg(opts);
+        await copyTextToSystemClipboard(svg.outerHTML);
+    }
+    else if (opts.type === "png") {
+        await copyBlobToClipboardAsPng(exportToBlob(opts));
+    }
+    else if (opts.type === "json") {
+        await copyToClipboard(opts.elements, opts.files);
+    }
+    else {
+        throw new Error("Invalid export type");
+    }
+};
+export * from "./bbox";
+export { elementsOverlappingBBox, isElementInsideBBox, elementPartiallyOverlapsWithOrContainsBBox, } from "./withinBounds";
+export { serializeAsJSON, serializeLibraryAsJSON, } from "../excalidraw/data/json";
+export { loadFromBlob, loadSceneOrLibraryFromBlob, loadLibraryFromBlob, } from "../excalidraw/data/blob";
+export { getFreeDrawSvgPath } from "../excalidraw/renderer/renderElement";
+export { mergeLibraryItems } from "../excalidraw/data/library";

package/dist/packages/utils/withinBounds.js

@@ -0,0 +1,125 @@
+import { isArrowElement, isExcalidrawElement, isFreeDrawElement, isLinearElement, isTextElement, } from "../excalidraw/element/typeChecks";
+import { isValueInRange, rotatePoint } from "../excalidraw/math";
+import { getElementBounds } from "../excalidraw/element/bounds";
+/** @returns vertices relative to element's top-left [0,0] position  */
+const getNonLinearElementRelativePoints = (element) => {
+    if (element.type === "diamond") {
+        return [
+            [element.width / 2, 0],
+            [element.width, element.height / 2],
+            [element.width / 2, element.height],
+            [0, element.height / 2],
+        ];
+    }
+    return [
+        [0, 0],
+        [0 + element.width, 0],
+        [0 + element.width, element.height],
+        [0, element.height],
+    ];
+};
+/** @returns vertices relative to element's top-left [0,0] position  */
+const getElementRelativePoints = (element) => {
+    if (isLinearElement(element) || isFreeDrawElement(element)) {
+        return element.points;
+    }
+    return getNonLinearElementRelativePoints(element);
+};
+const getMinMaxPoints = (points) => {
+    const ret = points.reduce((limits, [x, y]) => {
+        limits.minY = Math.min(limits.minY, y);
+        limits.minX = Math.min(limits.minX, x);
+        limits.maxX = Math.max(limits.maxX, x);
+        limits.maxY = Math.max(limits.maxY, y);
+        return limits;
+    }, {
+        minX: Infinity,
+        minY: Infinity,
+        maxX: -Infinity,
+        maxY: -Infinity,
+        cx: 0,
+        cy: 0,
+    });
+    ret.cx = (ret.maxX + ret.minX) / 2;
+    ret.cy = (ret.maxY + ret.minY) / 2;
+    return ret;
+};
+const getRotatedBBox = (element) => {
+    const points = getElementRelativePoints(element);
+    const { cx, cy } = getMinMaxPoints(points);
+    const centerPoint = [cx, cy];
+    const rotatedPoints = points.map((point) => rotatePoint([point[0], point[1]], centerPoint, element.angle));
+    const { minX, minY, maxX, maxY } = getMinMaxPoints(rotatedPoints);
+    return [
+        minX + element.x,
+        minY + element.y,
+        maxX + element.x,
+        maxY + element.y,
+    ];
+};
+export const isElementInsideBBox = (element, bbox, eitherDirection = false) => {
+    const elementBBox = getRotatedBBox(element);
+    const elementInsideBbox = bbox[0] <= elementBBox[0] &&
+        bbox[2] >= elementBBox[2] &&
+        bbox[1] <= elementBBox[1] &&
+        bbox[3] >= elementBBox[3];
+    if (!eitherDirection) {
+        return elementInsideBbox;
+    }
+    if (elementInsideBbox) {
+        return true;
+    }
+    return (elementBBox[0] <= bbox[0] &&
+        elementBBox[2] >= bbox[2] &&
+        elementBBox[1] <= bbox[1] &&
+        elementBBox[3] >= bbox[3]);
+};
+export const elementPartiallyOverlapsWithOrContainsBBox = (element, bbox) => {
+    const elementBBox = getRotatedBBox(element);
+    return ((isValueInRange(elementBBox[0], bbox[0], bbox[2]) ||
+        isValueInRange(bbox[0], elementBBox[0], elementBBox[2])) &&
+        (isValueInRange(elementBBox[1], bbox[1], bbox[3]) ||
+            isValueInRange(bbox[1], elementBBox[1], elementBBox[3])));
+};
+export const elementsOverlappingBBox = ({ elements, bounds, type, errorMargin = 0, }) => {
+    if (isExcalidrawElement(bounds)) {
+        bounds = getElementBounds(bounds);
+    }
+    const adjustedBBox = [
+        bounds[0] - errorMargin,
+        bounds[1] - errorMargin,
+        bounds[2] + errorMargin,
+        bounds[3] + errorMargin,
+    ];
+    const includedElementSet = new Set();
+    for (const element of elements) {
+        if (includedElementSet.has(element.id)) {
+            continue;
+        }
+        const isOverlaping = type === "overlap"
+            ? elementPartiallyOverlapsWithOrContainsBBox(element, adjustedBBox)
+            : type === "inside"
+                ? isElementInsideBBox(element, adjustedBBox)
+                : isElementInsideBBox(element, adjustedBBox, true);
+        if (isOverlaping) {
+            includedElementSet.add(element.id);
+            if (element.boundElements) {
+                for (const boundElement of element.boundElements) {
+                    includedElementSet.add(boundElement.id);
+                }
+            }
+            if (isTextElement(element) && element.containerId) {
+                includedElementSet.add(element.containerId);
+            }
+            if (isArrowElement(element)) {
+                if (element.startBinding) {
+                    includedElementSet.add(element.startBinding.elementId);
+                }
+                if (element.endBinding) {
+                    includedElementSet.add(element.endBinding?.elementId);
+                }
+            }
+        }
+    }
+    return elements.filter((element) => includedElementSet.has(element.id));
+};

package/dist/public/fonts/fonts.css

@@ -0,0 +1,38 @@
+/* http://www.eaglefonts.com/fg-virgil-ttf-131249.htm */
+@font-face {
+  font-family: "Virgil";
+  src: url("Virgil.woff2");
+  font-display: swap;
+}
+
+/* https://github.com/microsoft/cascadia-code */
+@font-face {
+  font-family: "Cascadia";
+  src: url("Cascadia.woff2");
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Assistant";
+  src: url("Assistant-Regular.woff2");
+  font-display: swap;
+  font-weight: 400;
+}
+@font-face {
+  font-family: "Assistant";
+  src: url("Assistant-Medium.woff2");
+  font-display: swap;
+  font-weight: 500;
+}
+@font-face {
+  font-family: "Assistant";
+  src: url("Assistant-SemiBold.woff2");
+  font-display: swap;
+  font-weight: 600;
+}
+@font-face {
+  font-family: "Assistant";
+  src: url("Assistant-Bold.woff2");
+  font-display: swap;
+  font-weight: 700;
+}