@excalidraw/excalidraw 0.17.1-c0b80a0 → 0.17.1-c329470

package/dist/excalidraw/scene/export.js

@@ -2,7 +2,7 @@ import rough from "roughjs/bin/rough";
 import { getCommonBounds, getElementAbsoluteCoords } from "../element/bounds";
 import { renderSceneToSvg } from "../renderer/staticSvgScene";
 import { arrayToMap, distance, getFontString, toBrandedType } from "../utils";
-import { DEFAULT_EXPORT_PADDING, FRAME_STYLE, FONT_FAMILY, SVG_NS, THEME, THEME_FILTER, } from "../constants";
+import { DEFAULT_EXPORT_PADDING, FRAME_STYLE, FONT_FAMILY, SVG_NS, THEME, THEME_FILTER, MIME_TYPES, EXPORT_DATA_TYPES, } from "../constants";
 import { getDefaultAppState } from "../appState";
 import { serializeAsJSON } from "../data/json";
 import { getInitializedImageElements, updateImageCache, } from "../element/image";
@@ -13,7 +13,7 @@ import { isFrameLikeElement } from "../element/typeChecks";
 import { syncInvalidIndices } from "../fractionalIndex";
 import { renderStaticScene } from "../renderer/staticScene";
 import { Fonts } from "../fonts";
-const SVG_EXPORT_TAG = `<!-- svg-source:excalidraw -->`;
+import { base64ToString, decode, encode, stringToBase64 } from "../data/encode";
 const truncateText = (element, maxWidth) => {
     if (element.width <= maxWidth) {
         return element;
@@ -157,6 +157,12 @@ export const exportToCanvas = async (elements, appState, files, { exportBackgrou
     });
     return canvas;
 };
+const createHTMLComment = (text) => {
+    // surrounding with spaces to maintain prettified consistency with previous
+    // iterations
+    // <!-- comment -->
+    return document.createComment(` ${text} `);
+};
 export const exportToSvg = async (elements, appState, files, opts) => {
     const frameRendering = getFrameRenderingConfig(opts?.exportingFrame ?? null, appState.frameRendering ?? null);
     let { exportPadding = DEFAULT_EXPORT_PADDING, exportWithDarkMode = false, viewBackgroundColor, exportScale = 1, exportEmbedScene, } = appState;
@@ -170,67 +176,84 @@ export const exportToSvg = async (elements, appState, files, opts) => {
     if (exportingFrame) {
         exportPadding = 0;
     }
-    let metadata = "";
+    const [minX, minY, width, height] = getCanvasSize(exportingFrame ? [exportingFrame] : getRootElements(elementsForRender), exportPadding);
+    const offsetX = -minX + exportPadding;
+    const offsetY = -minY + exportPadding;
+    // ---------------------------------------------------------------------------
+    // initialize SVG root element
+    // ---------------------------------------------------------------------------
+    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);
+    }
+    const defsElement = svgRoot.ownerDocument.createElementNS(SVG_NS, "defs");
+    const metadataElement = svgRoot.ownerDocument.createElementNS(SVG_NS, "metadata");
+    svgRoot.appendChild(createHTMLComment("svg-source:excalidraw"));
+    svgRoot.appendChild(metadataElement);
+    svgRoot.appendChild(defsElement);
+    // ---------------------------------------------------------------------------
+    // scene embed
+    // ---------------------------------------------------------------------------
     // 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 import("../data/image")).encodeSvgMetadata({
+            encodeSvgBase64Payload({
+                metadataElement,
                 // 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"),
+                payload: 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);
-    }
-    const offsetX = -minX + exportPadding;
-    const offsetY = -minY + exportPadding;
+    // ---------------------------------------------------------------------------
+    // frame clip paths
+    // ---------------------------------------------------------------------------
     const frameElements = getFrameLikeElements(elements);
-    let exportingFrameClipPath = "";
-    const elementsMap = arrayToMap(elements);
-    for (const frame of frameElements) {
-        const [x1, y1, x2, y2] = getElementAbsoluteCoords(frame, elementsMap);
-        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}"
-          ${exportingFrame
-            ? ""
-            : `rx=${FRAME_STYLE.radius} ry=${FRAME_STYLE.radius}`}
-          >
-          </rect>
-        </clipPath>`;
+    if (frameElements.length) {
+        const elementsMap = arrayToMap(elements);
+        for (const frame of frameElements) {
+            const clipPath = svgRoot.ownerDocument.createElementNS(SVG_NS, "clipPath");
+            clipPath.setAttribute("id", frame.id);
+            const [x1, y1, x2, y2] = getElementAbsoluteCoords(frame, elementsMap);
+            const cx = (x2 - x1) / 2 - (frame.x - x1);
+            const cy = (y2 - y1) / 2 - (frame.y - y1);
+            const rect = svgRoot.ownerDocument.createElementNS(SVG_NS, "rect");
+            rect.setAttribute("transform", `translate(${frame.x + offsetX} ${frame.y + offsetY}) rotate(${frame.angle} ${cx} ${cy})`);
+            rect.setAttribute("width", `${frame.width}`);
+            rect.setAttribute("height", `${frame.height}`);
+            if (!exportingFrame) {
+                rect.setAttribute("rx", `${FRAME_STYLE.radius}`);
+                rect.setAttribute("ry", `${FRAME_STYLE.radius}`);
+            }
+            clipPath.appendChild(rect);
+            defsElement.appendChild(clipPath);
+        }
     }
+    // ---------------------------------------------------------------------------
+    // inline font faces
+    // ---------------------------------------------------------------------------
     const fontFaces = !opts?.skipInliningFonts
         ? await Fonts.generateFontFaceDeclarations(elements)
         : [];
     const delimiter = "\n      "; // 6 spaces
-    svgRoot.innerHTML = `
-  ${SVG_EXPORT_TAG}
-  ${metadata}
-  <defs>
-    <style class="style-fonts">${delimiter}${fontFaces.join(delimiter)}
-    </style>
-    ${exportingFrameClipPath}
-  </defs>
-  `;
+    const style = svgRoot.ownerDocument.createElementNS(SVG_NS, "style");
+    style.classList.add("style-fonts");
+    style.appendChild(document.createTextNode(`${delimiter}${fontFaces.join(delimiter)}`));
+    defsElement.appendChild(style);
+    // ---------------------------------------------------------------------------
+    // background
+    // ---------------------------------------------------------------------------
     // render background rect
     if (appState.exportBackground && viewBackgroundColor) {
         const rect = svgRoot.ownerDocument.createElementNS(SVG_NS, "rect");
@@ -241,6 +264,9 @@ export const exportToSvg = async (elements, appState, files, opts) => {
         rect.setAttribute("fill", viewBackgroundColor);
         svgRoot.appendChild(rect);
     }
+    // ---------------------------------------------------------------------------
+    // render elements
+    // ---------------------------------------------------------------------------
     const rsvg = rough.svg(svgRoot);
     const renderEmbeddables = opts?.renderEmbeddables ?? false;
     renderSceneToSvg(elementsForRender, toBrandedType(arrayToMap(elementsForRender)), rsvg, svgRoot, files || {}, {
@@ -258,8 +284,46 @@ export const exportToSvg = async (elements, appState, files, opts) => {
             : new Map(),
         reuseImages: opts?.reuseImages ?? true,
     });
+    // ---------------------------------------------------------------------------
     return svgRoot;
 };
+export const encodeSvgBase64Payload = ({ payload, metadataElement, }) => {
+    const base64 = stringToBase64(JSON.stringify(encode({ text: payload })), true /* is already byte string */);
+    metadataElement.appendChild(createHTMLComment(`payload-type:${MIME_TYPES.excalidraw}`));
+    metadataElement.appendChild(createHTMLComment("payload-version:2"));
+    metadataElement.appendChild(createHTMLComment("payload-start"));
+    metadataElement.appendChild(document.createTextNode(base64));
+    metadataElement.appendChild(createHTMLComment("payload-end"));
+};
+export const decodeSvgBase64Payload = ({ svg }) => {
+    if (svg.includes(`payload-type:${MIME_TYPES.excalidraw}`)) {
+        const match = svg.match(/<!-- payload-start -->\s*(.+?)\s*<!-- payload-end -->/);
+        if (!match) {
+            throw new Error("INVALID");
+        }
+        const versionMatch = svg.match(/<!-- payload-version:(\d+) -->/);
+        const version = versionMatch?.[1] || "1";
+        const isByteString = version !== "1";
+        try {
+            const json = base64ToString(match[1], isByteString);
+            const encodedData = JSON.parse(json);
+            if (!("encoded" in encodedData)) {
+                // legacy, un-encoded scene JSON
+                if ("type" in encodedData &&
+                    encodedData.type === EXPORT_DATA_TYPES.excalidraw) {
+                    return json;
+                }
+                throw new Error("FAILED");
+            }
+            return decode(encodedData);
+        }
+        catch (error) {
+            console.error(error);
+            throw new Error("FAILED");
+        }
+    }
+    throw new Error("INVALID");
+};
 // calculate smallest area to fit the contents in
 const getCanvasSize = (elements, exportPadding) => {
     const [minX, minY, maxX, maxY] = getCommonBounds(elements);

package/dist/excalidraw/scene/index.d.ts

@@ -1,4 +1,4 @@
 export { isSomeElementSelected, getElementsWithinSelection, getCommonAttributeOfSelectedElements, getSelectedElements, getTargetElements, } from "./selection";
 export { calculateScrollCenter } from "./scroll";
-export { hasBackground, hasStrokeWidth, hasStrokeStyle, canHaveArrowheads, canChangeRoundness, getElementAtPosition, getElementsAtPosition, } from "./comparisons";
+export { hasBackground, hasStrokeWidth, hasStrokeStyle, canHaveArrowheads, canChangeRoundness, } from "./comparisons";
 export { getNormalizedZoom, getNormalizedGridSize, getNormalizedGridStep, } from "./normalize";

package/dist/excalidraw/scene/index.js

@@ -1,4 +1,4 @@
 export { isSomeElementSelected, getElementsWithinSelection, getCommonAttributeOfSelectedElements, getSelectedElements, getTargetElements, } from "./selection";
 export { calculateScrollCenter } from "./scroll";
-export { hasBackground, hasStrokeWidth, hasStrokeStyle, canHaveArrowheads, canChangeRoundness, getElementAtPosition, getElementsAtPosition, } from "./comparisons";
+export { hasBackground, hasStrokeWidth, hasStrokeStyle, canHaveArrowheads, canChangeRoundness, } from "./comparisons";
 export { getNormalizedZoom, getNormalizedGridSize, getNormalizedGridStep, } from "./normalize";

package/dist/excalidraw/scene/selection.js

@@ -94,16 +94,19 @@ export const getCommonAttributeOfSelectedElements = (elements, appState, getAttr
     return attributes.length === 1 ? attributes[0] : null;
 };
 export const getSelectedElements = (elements, appState, opts) => {
+    const addedElements = new Set();
     const selectedElements = [];
     for (const element of elements.values()) {
         if (appState.selectedElementIds[element.id]) {
             selectedElements.push(element);
+            addedElements.add(element.id);
             continue;
         }
         if (opts?.includeBoundTextElement &&
             isBoundToContainer(element) &&
             appState.selectedElementIds[element?.containerId]) {
             selectedElements.push(element);
+            addedElements.add(element.id);
             continue;
         }
     }
@@ -111,7 +114,7 @@ export const getSelectedElements = (elements, appState, opts) => {
         const elementsToInclude = [];
         selectedElements.forEach((element) => {
             if (isFrameLikeElement(element)) {
-                getFrameChildren(elements, element.id).forEach((e) => elementsToInclude.push(e));
+                getFrameChildren(elements, element.id).forEach((e) => !addedElements.has(e.id) && elementsToInclude.push(e));
             }
             elementsToInclude.push(element);
         });

package/dist/excalidraw/types.d.ts

@@ -415,6 +415,20 @@ export interface ExcalidrawProps {
         pointersMap: Gesture["pointers"];
     }) => void;
     onPaste?: (data: ClipboardData, event: ClipboardEvent | null) => Promise<boolean> | boolean;
+    /**
+     * Called when element(s) are duplicated so you can listen or modify as
+     * needed.
+     *
+     * Called when duplicating via mouse-drag, keyboard, paste, library insert
+     * etc.
+     *
+     * Returned elements will be used in place of the next elements
+     * (you should return all elements, including deleted, and not mutate
+     * the element if changes are made)
+     */
+    onDuplicate?: (nextElements: readonly ExcalidrawElement[], 
+    /** excludes the duplicated elements */
+    prevElements: readonly ExcalidrawElement[]) => ExcalidrawElement[] | void;
     renderTopRightUI?: (isMobile: boolean, appState: UIAppState) => JSX.Element | null;
     langCode?: Language["code"];
     viewModeEnabled?: boolean;
@@ -533,6 +547,7 @@ export type AppClassProperties = {
     getEditorUIOffsets: App["getEditorUIOffsets"];
     visibleElements: App["visibleElements"];
     excalidrawContainerValue: App["excalidrawContainerValue"];
+    onPointerUpEmitter: App["onPointerUpEmitter"];
 };
 export type PointerDownState = Readonly<{
     origin: Readonly<{

package/dist/excalidraw/utility-types.d.ts

@@ -30,3 +30,4 @@ export type MakeBrand<T extends string> = {
 };
 /** Maybe just promise or already fulfilled one! */
 export type MaybePromise<T> = T | Promise<T>;
+export type AllPossibleKeys<T> = T extends any ? keyof T : never;

package/dist/excalidraw/utils.d.ts

@@ -1,5 +1,5 @@
 import type { EVENT } from "./constants";
-import type { FontFamilyValues, FontString } from "./element/types";
+import type { ExcalidrawBindableElement, FontFamilyValues, FontString } from "./element/types";
 import type { ActiveTool, AppState, ToolType, UnsubscribeCallback, Zoom } from "./types";
 import type { MaybePromise } from "./utility-types";
 export declare const setDateTimeForTests: (dateTime: string) => void;
@@ -137,6 +137,7 @@ export declare const muteFSAbortError: (error?: Error) => void;
 export declare const findIndex: <T>(array: readonly T[], cb: (element: T, index: number, array: readonly T[]) => boolean, fromIndex?: number) => number;
 export declare const findLastIndex: <T>(array: readonly T[], cb: (element: T, index: number, array: readonly T[]) => boolean, fromIndex?: number) => number;
 export declare const isTransparent: (color: string) => boolean;
+export declare const isBindingFallthroughEnabled: (el: ExcalidrawBindableElement) => boolean;
 export type ResolvablePromise<T> = Promise<T> & {
     resolve: [T] extends [undefined] ? (value?: MaybePromise<Awaited<T>>) => void : (value: MaybePromise<Awaited<T>>) => void;
     reject: (error: Error) => void;
@@ -246,4 +247,10 @@ export declare class PromisePool<T> {
     constructor(source: IterableIterator<Promise<void | readonly [number, T]>>, concurrency: number);
     all(): PromiseLike<T[]>;
 }
+/**
+ * use when you need to render unsafe string as HTML attribute, but MAKE SURE
+ * the attribute is double-quoted when constructing the HTML string
+ */
+export declare const escapeDoubleQuotes: (str: string) => string;
+export declare const castArray: <T>(value: T | T[]) => T[];
 export {};

package/dist/excalidraw/utils.js

@@ -346,6 +346,7 @@ export const isTransparent = (color) => {
         isRRGGBBTransparent ||
         color === COLOR_PALETTE.transparent);
 };
+export const isBindingFallthroughEnabled = (el) => el.fillStyle !== "solid" || isTransparent(el.backgroundColor);
 export const resolvablePromise = () => {
     let resolve;
     let reject;
@@ -750,3 +751,11 @@ export class PromisePool {
         });
     }
 }
+/**
+ * use when you need to render unsafe string as HTML attribute, but MAKE SURE
+ * the attribute is double-quoted when constructing the HTML string
+ */
+export const escapeDoubleQuotes = (str) => {
+    return str.replace(/"/g, """);
+};
+export const castArray = (value) => Array.isArray(value) ? value : [value];

package/dist/excalidraw/visualdebug.d.ts

@@ -1,4 +1,4 @@
-import { type GlobalPoint } from "../math";
+import { type GlobalPoint, type LocalPoint } from "../math";
 import type { LineSegment } from "../utils";
 import type { BoundingBox, Bounds } from "./element/bounds";
 declare global {
@@ -7,6 +7,8 @@ declare global {
             data: DebugElement[][];
             currentFrame?: number;
         };
+        debugDrawPoint: typeof debugDrawPoint;
+        debugDrawLine: typeof debugDrawLine;
     }
 }
 export type DebugElement = {
@@ -31,5 +33,10 @@ export declare const debugDrawBounds: (box: Bounds | Bounds[], opts?: {
     color?: string;
     permanent?: boolean;
 }) => void;
+export declare const debugDrawPoints: ({ x, y, points, }: {
+    x: number;
+    y: number;
+    points: LocalPoint[];
+}, options?: any) => void;
 export declare const debugCloseFrame: () => void;
 export declare const debugClear: () => void;

package/dist/excalidraw/visualdebug.js

@@ -42,6 +42,9 @@ export const debugDrawBounds = (box, opts) => {
         permanent: !!opts?.permanent,
     }));
 };
+export const debugDrawPoints = ({ x, y, points, }, options) => {
+    points.forEach((p) => debugDrawPoint(pointFrom(x + p[0], y + p[1]), options));
+};
 export const debugCloseFrame = () => {
     window.visualDebug?.data.push([]);
 };

package/dist/math/line.d.ts

@@ -23,4 +23,23 @@ export declare function lineFromPointPair<P extends GlobalPoint | LocalPoint>([a
  * @returns
  */
 export declare function lineFromPointArray<P extends GlobalPoint | LocalPoint>(pointArray: P[]): Line<P> | undefined;
+/**
+ * Return the coordinates resulting from rotating the given line about an
+ * origin by an angle in degrees note that when the origin is not given,
+ * the midpoint of the given line is used as the origin
+ *
+ * @param l
+ * @param angle
+ * @param origin
+ * @returns
+ */
 export declare const lineRotate: <Point extends GlobalPoint | LocalPoint>(l: Line<Point>, angle: Radians, origin?: Point | undefined) => Line<Point>;
+/**
+ * Determines the intersection point (unless the lines are parallel) of two
+ * lines
+ *
+ * @param a
+ * @param b
+ * @returns
+ */
+export declare const linesIntersectAt: <Point extends GlobalPoint | LocalPoint>(a: Line<Point>, b: Line<Point>) => Point | null;

package/dist/math/line.js

@@ -1,4 +1,4 @@
-import { pointCenter, pointRotateRads } from "./point";
+import { pointCenter, pointFrom, pointRotateRads } from "./point";
 /**
  * Create a line from two points.
  *
@@ -28,8 +28,37 @@ export function lineFromPointArray(pointArray) {
         ? line(pointArray[0], pointArray[1])
         : undefined;
 }
-// return the coordinates resulting from rotating the given line about an origin by an angle in degrees
-// note that when the origin is not given, the midpoint of the given line is used as the origin
+/**
+ * Return the coordinates resulting from rotating the given line about an
+ * origin by an angle in degrees note that when the origin is not given,
+ * the midpoint of the given line is used as the origin
+ *
+ * @param l
+ * @param angle
+ * @param origin
+ * @returns
+ */
 export const lineRotate = (l, angle, origin) => {
     return line(pointRotateRads(l[0], origin || pointCenter(l[0], l[1]), angle), pointRotateRads(l[1], origin || pointCenter(l[0], l[1]), angle));
 };
+/**
+ * Determines the intersection point (unless the lines are parallel) of two
+ * lines
+ *
+ * @param a
+ * @param b
+ * @returns
+ */
+export const linesIntersectAt = (a, b) => {
+    const A1 = a[1][1] - a[0][1];
+    const B1 = a[0][0] - a[1][0];
+    const A2 = b[1][1] - b[0][1];
+    const B2 = b[0][0] - b[1][0];
+    const D = A1 * B2 - A2 * B1;
+    if (D !== 0) {
+        const C1 = A1 * a[0][0] + B1 * a[0][1];
+        const C2 = A2 * b[0][0] + B2 * b[0][1];
+        return pointFrom((C1 * B2 - C2 * B1) / D, (A1 * C2 - A2 * C1) / D);
+    }
+    return null;
+};

package/dist/math/point.d.ts

@@ -28,6 +28,16 @@ export declare function pointFromPair<Point extends GlobalPoint | LocalPoint>(pa
  * @returns The point the vector points at with origin 0,0
  */
 export declare function pointFromVector<P extends GlobalPoint | LocalPoint>(v: Vector): P;
+/**
+ * Convert the coordiante object to a point.
+ *
+ * @param coords The coordinate object with x and y properties
+ * @returns
+ */
+export declare function pointFromCoords<Point extends GlobalPoint | LocalPoint>({ x, y, }: {
+    x: number;
+    y: number;
+}): Point;
 /**
  * Checks if the provided value has the shape of a Point.
  *

package/dist/math/point.js

@@ -40,6 +40,15 @@ export function pointFromPair(pair) {
 export function pointFromVector(v) {
     return v;
 }
+/**
+ * Convert the coordiante object to a point.
+ *
+ * @param coords The coordinate object with x and y properties
+ * @returns
+ */
+export function pointFromCoords({ x, y, }) {
+    return [x, y];
+}
 /**
  * Checks if the provided value has the shape of a Point.
  *
@@ -156,7 +165,9 @@ export function pointDistance(a, b) {
  * @returns The euclidean distance between the two points.
  */
 export function pointDistanceSq(a, b) {
-    return Math.hypot(b[0] - a[0], b[1] - a[1]);
+    const xDiff = b[0] - a[0];
+    const yDiff = b[1] - a[1];
+    return xDiff * xDiff + yDiff * yDiff;
 }
 /**
  * Scale a point from a given origin by the multiplier.