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

package/dist/packages/excalidraw/element/dragElements.js

@@ -0,0 +1,119 @@
+import { updateBoundElements } from "./binding";
+import { getCommonBounds } from "./bounds";
+import { mutateElement } from "./mutateElement";
+import { getPerfectElementSize } from "./sizeHelpers";
+import { getBoundTextElement } from "./textElement";
+import { isSelectedViaGroup } from "../groups";
+import { getGridPoint } from "../math";
+import { isArrowElement, isBoundToContainer, isFrameLikeElement, } from "./typeChecks";
+export const dragSelectedElements = (pointerDownState, selectedElements, offset, appState, scene, snapOffset, gridSize) => {
+    // we do not want a frame and its elements to be selected at the same time
+    // but when it happens (due to some bug), we want to avoid updating element
+    // in the frame twice, hence the use of set
+    const elementsToUpdate = new Set(selectedElements);
+    const frames = selectedElements
+        .filter((e) => isFrameLikeElement(e))
+        .map((f) => f.id);
+    if (frames.length > 0) {
+        const elementsInFrames = scene
+            .getNonDeletedElements()
+            .filter((e) => !isBoundToContainer(e))
+            .filter((e) => e.frameId !== null)
+            .filter((e) => frames.includes(e.frameId));
+        elementsInFrames.forEach((element) => elementsToUpdate.add(element));
+    }
+    const commonBounds = getCommonBounds(Array.from(elementsToUpdate).map((el) => pointerDownState.originalElements.get(el.id) ?? el));
+    const adjustedOffset = calculateOffset(commonBounds, offset, snapOffset, gridSize);
+    elementsToUpdate.forEach((element) => {
+        updateElementCoords(pointerDownState, element, adjustedOffset);
+        // update coords of bound text only if we're dragging the container directly
+        // (we don't drag the group that it's part of)
+        if (
+        // Don't update coords of arrow label since we calculate its position during render
+        !isArrowElement(element) &&
+            // container isn't part of any group
+            // (perf optim so we don't check `isSelectedViaGroup()` in every case)
+            (!element.groupIds.length ||
+                // container is part of a group, but we're dragging the container directly
+                (appState.editingGroupId && !isSelectedViaGroup(appState, element)))) {
+            const textElement = getBoundTextElement(element);
+            if (textElement) {
+                updateElementCoords(pointerDownState, textElement, adjustedOffset);
+            }
+        }
+        updateBoundElements(element, {
+            simultaneouslyUpdated: Array.from(elementsToUpdate),
+        });
+    });
+};
+const calculateOffset = (commonBounds, dragOffset, snapOffset, gridSize) => {
+    const [x, y] = commonBounds;
+    let nextX = x + dragOffset.x + snapOffset.x;
+    let nextY = y + dragOffset.y + snapOffset.y;
+    if (snapOffset.x === 0 || snapOffset.y === 0) {
+        const [nextGridX, nextGridY] = getGridPoint(x + dragOffset.x, y + dragOffset.y, gridSize);
+        if (snapOffset.x === 0) {
+            nextX = nextGridX;
+        }
+        if (snapOffset.y === 0) {
+            nextY = nextGridY;
+        }
+    }
+    return {
+        x: nextX - x,
+        y: nextY - y,
+    };
+};
+const updateElementCoords = (pointerDownState, element, dragOffset) => {
+    const originalElement = pointerDownState.originalElements.get(element.id) ?? element;
+    const nextX = originalElement.x + dragOffset.x;
+    const nextY = originalElement.y + dragOffset.y;
+    mutateElement(element, {
+        x: nextX,
+        y: nextY,
+    });
+};
+export const getDragOffsetXY = (selectedElements, x, y) => {
+    const [x1, y1] = getCommonBounds(selectedElements);
+    return [x - x1, y - y1];
+};
+export const dragNewElement = (draggingElement, elementType, originX, originY, x, y, width, height, shouldMaintainAspectRatio, shouldResizeFromCenter, 
+/** whether to keep given aspect ratio when `isResizeWithSidesSameLength` is
+    true */
+widthAspectRatio, originOffset = null) => {
+    if (shouldMaintainAspectRatio && draggingElement.type !== "selection") {
+        if (widthAspectRatio) {
+            height = width / widthAspectRatio;
+        }
+        else {
+            // Depending on where the cursor is at (x, y) relative to where the starting point is
+            // (originX, originY), we use ONLY width or height to control size increase.
+            // This allows the cursor to always "stick" to one of the sides of the bounding box.
+            if (Math.abs(y - originY) > Math.abs(x - originX)) {
+                ({ width, height } = getPerfectElementSize(elementType, height, x < originX ? -width : width));
+            }
+            else {
+                ({ width, height } = getPerfectElementSize(elementType, width, y < originY ? -height : height));
+            }
+            if (height < 0) {
+                height = -height;
+            }
+        }
+    }
+    let newX = x < originX ? originX - width : originX;
+    let newY = y < originY ? originY - height : originY;
+    if (shouldResizeFromCenter) {
+        width += width;
+        height += height;
+        newX = originX - width / 2;
+        newY = originY - height / 2;
+    }
+    if (width !== 0 && height !== 0) {
+        mutateElement(draggingElement, {
+            x: newX + (originOffset?.x ?? 0),
+            y: newY + (originOffset?.y ?? 0),
+            width,
+            height,
+        });
+    }
+};

package/dist/packages/excalidraw/element/embeddable.js

@@ -0,0 +1,305 @@
+import { register } from "../actions/register";
+import { FONT_FAMILY, VERTICAL_ALIGN } from "../constants";
+import { t } from "../i18n";
+import { getFontString, updateActiveTool } from "../utils";
+import { setCursorForShape } from "../cursor";
+import { newTextElement } from "./newElement";
+import { getContainerElement, wrapText } from "./textElement";
+import { isFrameLikeElement, isIframeElement, isIframeLikeElement, } from "./typeChecks";
+const embeddedLinkCache = new Map();
+const RE_YOUTUBE = /^(?:http(?:s)?:\/\/)?(?:www\.)?youtu(?:be\.com|\.be)\/(embed\/|watch\?v=|shorts\/|playlist\?list=|embed\/videoseries\?list=)?([a-zA-Z0-9_-]+)(?:\?t=|&t=|\?start=|&start=)?([a-zA-Z0-9_-]+)?[^\s]*$/;
+const RE_VIMEO = /^(?:http(?:s)?:\/\/)?(?:(?:w){3}.)?(?:player\.)?vimeo\.com\/(?:video\/)?([^?\s]+)(?:\?.*)?$/;
+const RE_FIGMA = /^https:\/\/(?:www\.)?figma\.com/;
+const RE_GH_GIST = /^https:\/\/gist\.github\.com/;
+const RE_GH_GIST_EMBED = /^<script[\s\S]*?\ssrc=["'](https:\/\/gist.github.com\/.*?)\.js["']/i;
+// not anchored to start to allow <blockquote> twitter embeds
+const RE_TWITTER = /(?:http(?:s)?:\/\/)?(?:(?:w){3}.)?twitter.com/;
+const RE_TWITTER_EMBED = /^<blockquote[\s\S]*?\shref=["'](https:\/\/twitter.com\/[^"']*)/i;
+const RE_VALTOWN = /^https:\/\/(?:www\.)?val.town\/(v|embed)\/[a-zA-Z_$][0-9a-zA-Z_$]+\.[a-zA-Z_$][0-9a-zA-Z_$]+/;
+const RE_GENERIC_EMBED = /^<(?:iframe|blockquote)[\s\S]*?\s(?:src|href)=["']([^"']*)["'][\s\S]*?>$/i;
+const RE_GIPHY = /giphy.com\/(?:clips|embed|gifs)\/[a-zA-Z0-9]*?-?([a-zA-Z0-9]+)(?:[^a-zA-Z0-9]|$)/;
+const ALLOWED_DOMAINS = new Set([
+    "youtube.com",
+    "youtu.be",
+    "vimeo.com",
+    "player.vimeo.com",
+    "figma.com",
+    "link.excalidraw.com",
+    "gist.github.com",
+    "twitter.com",
+    "*.simplepdf.eu",
+    "stackblitz.com",
+    "val.town",
+    "giphy.com",
+    "dddice.com",
+]);
+export const createSrcDoc = (body) => {
+    return `<html><body>${body}</body></html>`;
+};
+export const getEmbedLink = (link) => {
+    if (!link) {
+        return null;
+    }
+    if (embeddedLinkCache.has(link)) {
+        return embeddedLinkCache.get(link);
+    }
+    const originalLink = link;
+    let type = "generic";
+    let aspectRatio = { w: 560, h: 840 };
+    const ytLink = link.match(RE_YOUTUBE);
+    if (ytLink?.[2]) {
+        const time = ytLink[3] ? `&start=${ytLink[3]}` : ``;
+        const isPortrait = link.includes("shorts");
+        type = "video";
+        switch (ytLink[1]) {
+            case "embed/":
+            case "watch?v=":
+            case "shorts/":
+                link = `https://www.youtube.com/embed/${ytLink[2]}?enablejsapi=1${time}`;
+                break;
+            case "playlist?list=":
+            case "embed/videoseries?list=":
+                link = `https://www.youtube.com/embed/videoseries?list=${ytLink[2]}&enablejsapi=1${time}`;
+                break;
+            default:
+                link = `https://www.youtube.com/embed/${ytLink[2]}?enablejsapi=1${time}`;
+                break;
+        }
+        aspectRatio = isPortrait ? { w: 315, h: 560 } : { w: 560, h: 315 };
+        embeddedLinkCache.set(originalLink, {
+            link,
+            intrinsicSize: aspectRatio,
+            type,
+        });
+        return { link, intrinsicSize: aspectRatio, type };
+    }
+    const vimeoLink = link.match(RE_VIMEO);
+    if (vimeoLink?.[1]) {
+        const target = vimeoLink?.[1];
+        const warning = !/^\d+$/.test(target)
+            ? t("toast.unrecognizedLinkFormat")
+            : undefined;
+        type = "video";
+        link = `https://player.vimeo.com/video/${target}?api=1`;
+        aspectRatio = { w: 560, h: 315 };
+        //warning deliberately ommited so it is displayed only once per link
+        //same link next time will be served from cache
+        embeddedLinkCache.set(originalLink, {
+            link,
+            intrinsicSize: aspectRatio,
+            type,
+        });
+        return { link, intrinsicSize: aspectRatio, type, warning };
+    }
+    const figmaLink = link.match(RE_FIGMA);
+    if (figmaLink) {
+        type = "generic";
+        link = `https://www.figma.com/embed?embed_host=share&url=${encodeURIComponent(link)}`;
+        aspectRatio = { w: 550, h: 550 };
+        embeddedLinkCache.set(originalLink, {
+            link,
+            intrinsicSize: aspectRatio,
+            type,
+        });
+        return { link, intrinsicSize: aspectRatio, type };
+    }
+    const valLink = link.match(RE_VALTOWN);
+    if (valLink) {
+        link =
+            valLink[1] === "embed" ? valLink[0] : valLink[0].replace("/v", "/embed");
+        embeddedLinkCache.set(originalLink, {
+            link,
+            intrinsicSize: aspectRatio,
+            type,
+        });
+        return { link, intrinsicSize: aspectRatio, type };
+    }
+    if (RE_TWITTER.test(link)) {
+        let ret;
+        // assume embed code
+        if (/<blockquote/.test(link)) {
+            const srcDoc = createSrcDoc(link);
+            ret = {
+                type: "document",
+                srcdoc: () => srcDoc,
+                intrinsicSize: { w: 480, h: 480 },
+            };
+            // assume regular tweet url
+        }
+        else {
+            ret = {
+                type: "document",
+                srcdoc: (theme) => createSrcDoc(`<blockquote class="twitter-tweet" data-dnt="true" data-theme="${theme}"><a href="${link}"></a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>`),
+                intrinsicSize: { w: 480, h: 480 },
+            };
+        }
+        embeddedLinkCache.set(originalLink, ret);
+        return ret;
+    }
+    if (RE_GH_GIST.test(link)) {
+        let ret;
+        // assume embed code
+        if (/<script>/.test(link)) {
+            const srcDoc = createSrcDoc(link);
+            ret = {
+                type: "document",
+                srcdoc: () => srcDoc,
+                intrinsicSize: { w: 550, h: 720 },
+            };
+            // assume regular url
+        }
+        else {
+            ret = {
+                type: "document",
+                srcdoc: () => createSrcDoc(`
+          <script src="${link}.js"></script>
+          <style type="text/css">
+            * { margin: 0px; }
+            table, .gist { height: 100%; }
+            .gist .gist-file { height: calc(100vh - 2px); padding: 0px; display: grid; grid-template-rows: 1fr auto; }
+          </style>
+        `),
+                intrinsicSize: { w: 550, h: 720 },
+            };
+        }
+        embeddedLinkCache.set(link, ret);
+        return ret;
+    }
+    embeddedLinkCache.set(link, { link, intrinsicSize: aspectRatio, type });
+    return { link, intrinsicSize: aspectRatio, type };
+};
+export const isIframeLikeOrItsLabel = (element) => {
+    if (isIframeLikeElement(element)) {
+        return true;
+    }
+    if (element.type === "text") {
+        const container = getContainerElement(element);
+        if (container && isFrameLikeElement(container)) {
+            return true;
+        }
+    }
+    return false;
+};
+export const createPlaceholderEmbeddableLabel = (element) => {
+    let text;
+    if (isIframeElement(element)) {
+        text = "IFrame element";
+    }
+    else {
+        text =
+            !element.link || element?.link === "" ? "Empty Web-Embed" : element.link;
+    }
+    const fontSize = Math.max(Math.min(element.width / 2, element.width / text.length), element.width / 30);
+    const fontFamily = FONT_FAMILY.Helvetica;
+    const fontString = getFontString({
+        fontSize,
+        fontFamily,
+    });
+    return newTextElement({
+        x: element.x + element.width / 2,
+        y: element.y + element.height / 2,
+        strokeColor: element.strokeColor !== "transparent" ? element.strokeColor : "black",
+        backgroundColor: "transparent",
+        fontFamily,
+        fontSize,
+        text: wrapText(text, fontString, element.width - 20),
+        textAlign: "center",
+        verticalAlign: VERTICAL_ALIGN.MIDDLE,
+        angle: element.angle ?? 0,
+    });
+};
+export const actionSetEmbeddableAsActiveTool = register({
+    name: "setEmbeddableAsActiveTool",
+    trackEvent: { category: "toolbar" },
+    perform: (elements, appState, _, app) => {
+        const nextActiveTool = updateActiveTool(appState, {
+            type: "embeddable",
+        });
+        setCursorForShape(app.canvas, {
+            ...appState,
+            activeTool: nextActiveTool,
+        });
+        return {
+            elements,
+            appState: {
+                ...appState,
+                activeTool: updateActiveTool(appState, {
+                    type: "embeddable",
+                }),
+            },
+            commitToHistory: false,
+        };
+    },
+});
+const validateHostname = (url, 
+/** using a Set assumes it already contains normalized bare domains */
+allowedHostnames) => {
+    try {
+        const { hostname } = new URL(url);
+        const bareDomain = hostname.replace(/^www\./, "");
+        const bareDomainWithFirstSubdomainWildcarded = bareDomain.replace(/^([^.]+)/, "*");
+        if (allowedHostnames instanceof Set) {
+            return (ALLOWED_DOMAINS.has(bareDomain) ||
+                ALLOWED_DOMAINS.has(bareDomainWithFirstSubdomainWildcarded));
+        }
+        if (bareDomain === allowedHostnames.replace(/^www\./, "")) {
+            return true;
+        }
+    }
+    catch (error) {
+        // ignore
+    }
+    return false;
+};
+export const extractSrc = (htmlString) => {
+    const twitterMatch = htmlString.match(RE_TWITTER_EMBED);
+    if (twitterMatch && twitterMatch.length === 2) {
+        return twitterMatch[1];
+    }
+    const gistMatch = htmlString.match(RE_GH_GIST_EMBED);
+    if (gistMatch && gistMatch.length === 2) {
+        return gistMatch[1];
+    }
+    if (RE_GIPHY.test(htmlString)) {
+        return `https://giphy.com/embed/${RE_GIPHY.exec(htmlString)[1]}`;
+    }
+    const match = htmlString.match(RE_GENERIC_EMBED);
+    if (match && match.length === 2) {
+        return match[1];
+    }
+    return htmlString;
+};
+export const embeddableURLValidator = (url, validateEmbeddable) => {
+    if (!url) {
+        return false;
+    }
+    if (validateEmbeddable != null) {
+        if (typeof validateEmbeddable === "function") {
+            const ret = validateEmbeddable(url);
+            // if return value is undefined, leave validation to default
+            if (typeof ret === "boolean") {
+                return ret;
+            }
+        }
+        else if (typeof validateEmbeddable === "boolean") {
+            return validateEmbeddable;
+        }
+        else if (validateEmbeddable instanceof RegExp) {
+            return validateEmbeddable.test(url);
+        }
+        else if (Array.isArray(validateEmbeddable)) {
+            for (const domain of validateEmbeddable) {
+                if (domain instanceof RegExp) {
+                    if (url.match(domain)) {
+                        return true;
+                    }
+                }
+                else if (validateHostname(url, domain)) {
+                    return true;
+                }
+            }
+            return false;
+        }
+    }
+    return validateHostname(url, ALLOWED_DOMAINS);
+};

package/dist/packages/excalidraw/element/image.js

@@ -0,0 +1,91 @@
+// -----------------------------------------------------------------------------
+// ExcalidrawImageElement & related helpers
+// -----------------------------------------------------------------------------
+import { MIME_TYPES, SVG_NS } from "../constants";
+import { t } from "../i18n";
+import { isInitializedImageElement } from "./typeChecks";
+export const loadHTMLImageElement = (dataURL) => {
+    return new Promise((resolve, reject) => {
+        const image = new Image();
+        image.onload = () => {
+            resolve(image);
+        };
+        image.onerror = (error) => {
+            reject(error);
+        };
+        image.src = dataURL;
+    });
+};
+/** NOTE: updates cache even if already populated with given image. Thus,
+ * you should filter out the images upstream if you want to optimize this. */
+export const updateImageCache = async ({ fileIds, files, imageCache, }) => {
+    const updatedFiles = new Map();
+    const erroredFiles = new Map();
+    await Promise.all(fileIds.reduce((promises, fileId) => {
+        const fileData = files[fileId];
+        if (fileData && !updatedFiles.has(fileId)) {
+            updatedFiles.set(fileId, true);
+            return promises.concat((async () => {
+                try {
+                    if (fileData.mimeType === MIME_TYPES.binary) {
+                        throw new Error("Only images can be added to ImageCache");
+                    }
+                    const imagePromise = loadHTMLImageElement(fileData.dataURL);
+                    const data = {
+                        image: imagePromise,
+                        mimeType: fileData.mimeType,
+                    };
+                    // store the promise immediately to indicate there's an in-progress
+                    // initialization
+                    imageCache.set(fileId, data);
+                    const image = await imagePromise;
+                    imageCache.set(fileId, { ...data, image });
+                }
+                catch (error) {
+                    erroredFiles.set(fileId, true);
+                }
+            })());
+        }
+        return promises;
+    }, []));
+    return {
+        imageCache,
+        /** includes errored files because they cache was updated nonetheless */
+        updatedFiles,
+        /** files that failed when creating HTMLImageElement */
+        erroredFiles,
+    };
+};
+export const getInitializedImageElements = (elements) => elements.filter((element) => isInitializedImageElement(element));
+export const isHTMLSVGElement = (node) => {
+    // lower-casing due to XML/HTML convention differences
+    // https://johnresig.com/blog/nodename-case-sensitivity
+    return node?.nodeName.toLowerCase() === "svg";
+};
+export const normalizeSVG = async (SVGString) => {
+    const doc = new DOMParser().parseFromString(SVGString, MIME_TYPES.svg);
+    const svg = doc.querySelector("svg");
+    const errorNode = doc.querySelector("parsererror");
+    if (errorNode || !isHTMLSVGElement(svg)) {
+        throw new Error(t("errors.invalidSVGString"));
+    }
+    else {
+        if (!svg.hasAttribute("xmlns")) {
+            svg.setAttribute("xmlns", SVG_NS);
+        }
+        if (!svg.hasAttribute("width") || !svg.hasAttribute("height")) {
+            const viewBox = svg.getAttribute("viewBox");
+            let width = svg.getAttribute("width") || "50";
+            let height = svg.getAttribute("height") || "50";
+            if (viewBox) {
+                const match = viewBox.match(/\d+ +\d+ +(\d+) +(\d+)/);
+                if (match) {
+                    [, width, height] = match;
+                }
+            }
+            svg.setAttribute("width", width);
+            svg.setAttribute("height", height);
+        }
+        return svg.outerHTML;
+    }
+};

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

@@ -0,0 +1,24 @@
+import { isInvisiblySmallElement } from "./sizeHelpers";
+import { isLinearElementType } from "./typeChecks";
+export { newElement, newTextElement, updateTextElement, refreshTextDimensions, newLinearElement, newImageElement, duplicateElement, } from "./newElement";
+export { getElementAbsoluteCoords, getElementBounds, getCommonBounds, getDiamondPoints, getArrowheadPoints, getClosestElementBounds, } from "./bounds";
+export { OMIT_SIDES_FOR_MULTIPLE_ELEMENTS, getTransformHandlesFromCoords, getTransformHandles, } from "./transformHandles";
+export { hitTest, isHittingElementBoundingBoxWithoutHittingElement, } from "./collision";
+export { resizeTest, getCursorForResizingElement, getElementWithTransformHandleType, getTransformHandleTypeFromCoords, } from "./resizeTest";
+export { transformElements, getResizeOffsetXY, getResizeArrowDirection, } from "./resizeElements";
+export { dragSelectedElements, getDragOffsetXY, dragNewElement, } from "./dragElements";
+export { isTextElement, isExcalidrawElement } from "./typeChecks";
+export { textWysiwyg } from "./textWysiwyg";
+export { redrawTextBoundingBox } from "./textElement";
+export { getPerfectElementSize, getLockedLinearCursorAlignSize, isInvisiblySmallElement, resizePerfectLineForNWHandler, getNormalizedDimensions, } from "./sizeHelpers";
+export { showSelectedShapeActions } from "./showSelectedShapeActions";
+export const getSceneVersion = (elements) => elements.reduce((acc, el) => acc + el.version, 0);
+export const getVisibleElements = (elements) => elements.filter((el) => !el.isDeleted && !isInvisiblySmallElement(el));
+export const getNonDeletedElements = (elements) => elements.filter((element) => !element.isDeleted);
+export const isNonDeletedElement = (element) => !element.isDeleted;
+const _clearElements = (elements) => getNonDeletedElements(elements).map((element) => isLinearElementType(element.type)
+    ? { ...element, lastCommittedPoint: null }
+    : element);
+export const clearElementsForDatabase = (elements) => _clearElements(elements);
+export const clearElementsForExport = (elements) => _clearElements(elements);
+export const clearElementsForLocalStorage = (elements) => _clearElements(elements);