@excalidraw/excalidraw 0.17.1-4bdeaf9 → 0.17.1-7381-cdf6d3e

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@excalidraw/excalidraw",
-  "version": "0.17.1-4bdeaf9",
+  "version": "0.17.1-7381-cdf6d3e",
   "main": "main.js",
   "types": "types/packages/excalidraw/index.d.ts",
   "files": [

package/types/components/IconPicker.d.ts

@@ -2,11 +2,12 @@ import "./IconPicker.scss";
 export declare function IconPicker<T>({ value, label, options, onChange, group, }: {
     label: string;
     value: T;
-    options: {
+    options: readonly {
         value: T;
         text: string;
         icon: JSX.Element;
-        keyBinding: string;
+        keyBinding: string | null;
+        showInPicker?: boolean;
     }[];
     onChange: (value: T) => void;
     group?: string;

package/types/components/icons.d.ts

@@ -110,7 +110,10 @@ export declare const ArrowheadNoneIcon: JSX.Element;
 export declare const ArrowheadArrowIcon: React.MemoExoticComponent<({ flip }: {
     flip?: boolean | undefined;
 }) => JSX.Element>;
-export declare const ArrowheadDotIcon: React.MemoExoticComponent<({ flip }: {
+export declare const ArrowheadCircleIcon: React.MemoExoticComponent<({ flip }: {
+    flip?: boolean | undefined;
+}) => JSX.Element>;
+export declare const ArrowheadCircleOutlineIcon: React.MemoExoticComponent<({ flip }: {
     flip?: boolean | undefined;
 }) => JSX.Element>;
 export declare const ArrowheadBarIcon: React.MemoExoticComponent<({ flip }: {
@@ -119,6 +122,15 @@ export declare const ArrowheadBarIcon: React.MemoExoticComponent<({ flip }: {
 export declare const ArrowheadTriangleIcon: React.MemoExoticComponent<({ flip }: {
     flip?: boolean | undefined;
 }) => JSX.Element>;
+export declare const ArrowheadTriangleOutlineIcon: React.MemoExoticComponent<({ flip }: {
+    flip?: boolean | undefined;
+}) => JSX.Element>;
+export declare const ArrowheadDiamondIcon: React.MemoExoticComponent<({ flip }: {
+    flip?: boolean | undefined;
+}) => JSX.Element>;
+export declare const ArrowheadDiamondOutlineIcon: React.MemoExoticComponent<({ flip }: {
+    flip?: boolean | undefined;
+}) => JSX.Element>;
 export declare const FontSizeSmallIcon: JSX.Element;
 export declare const FontSizeMediumIcon: JSX.Element;
 export declare const FontSizeLargeIcon: JSX.Element;

package/types/element/bounds.d.ts

@@ -32,6 +32,10 @@ export declare const getDiamondPoints: (element: ExcalidrawElement) => number[];
 export declare const getCurvePathOps: (shape: Drawable) => Op[];
 export declare const getMinMaxXYFromCurvePathOps: (ops: Op[], transformXY?: ((x: number, y: number) => [number, number]) | undefined) => Bounds;
 export declare const getBoundsFromPoints: (points: ExcalidrawFreeDrawElement["points"]) => Bounds;
+/** @returns number in pixels */
+export declare const getArrowheadSize: (arrowhead: Arrowhead) => number;
+/** @returns number in degrees */
+export declare const getArrowheadAngle: (arrowhead: Arrowhead) => number;
 export declare const getArrowheadPoints: (element: ExcalidrawLinearElement, shape: Drawable[], position: "start" | "end", arrowhead: Arrowhead) => number[] | null;
 export declare const getElementBounds: (element: ExcalidrawElement) => Bounds;
 export declare const getCommonBounds: (elements: readonly ExcalidrawElement[]) => Bounds;

package/types/element/types.d.ts

@@ -165,7 +165,7 @@ export type PointBinding = {
     focus: number;
     gap: number;
 };
-export type Arrowhead = "arrow" | "bar" | "dot" | "triangle";
+export type Arrowhead = "arrow" | "bar" | "dot" | "circle" | "circle_outline" | "triangle" | "triangle_outline" | "diamond" | "diamond_outline";
 export type ExcalidrawLinearElement = _ExcalidrawElementBase & Readonly<{
     type: "line" | "arrow";
     points: readonly Point[];

package/types/math.d.ts

@@ -1,6 +1,6 @@
 import { Point, Zoom } from "./types";
 import { ExcalidrawElement, ExcalidrawLinearElement, NonDeleted } from "./element/types";
-export declare const rotate: (x1: number, y1: number, x2: number, y2: number, angle: number) => [number, number];
+export declare const rotate: (x: number, y: number, cx: number, cy: number, angle: number) => [number, number];
 export declare const rotatePoint: (point: readonly [number, number], center: readonly [number, number], angle: number) => [number, number];
 export declare const adjustXYWithRotation: (sides: {
     n?: boolean;

package/types/renderer/renderElement.d.ts

@@ -1,7 +1,7 @@
 import { ExcalidrawElement, ExcalidrawTextElement, NonDeletedExcalidrawElement, ExcalidrawFreeDrawElement } from "../element/types";
 import type { RoughCanvas } from "roughjs/bin/canvas";
 import type { RoughSVG } from "roughjs/bin/svg";
-import { StaticCanvasRenderConfig } from "../scene/types";
+import { SVGRenderConfig, StaticCanvasRenderConfig } from "../scene/types";
 import { AppState, StaticCanvasAppState, BinaryFiles, InteractiveCanvasAppState } from "../types";
 export interface ExcalidrawElementWithCanvas {
     element: ExcalidrawElement | ExcalidrawTextElement;
@@ -18,11 +18,7 @@ export declare const DEFAULT_LINK_SIZE = 14;
 export declare const elementWithCanvasCache: WeakMap<ExcalidrawElement, ExcalidrawElementWithCanvas>;
 export declare const renderSelectionElement: (element: NonDeletedExcalidrawElement, context: CanvasRenderingContext2D, appState: InteractiveCanvasAppState) => void;
 export declare const renderElement: (element: NonDeletedExcalidrawElement, rc: RoughCanvas, context: CanvasRenderingContext2D, renderConfig: StaticCanvasRenderConfig, appState: StaticCanvasAppState) => void;
-export declare const renderElementToSvg: (element: NonDeletedExcalidrawElement, rsvg: RoughSVG, svgRoot: SVGElement, files: BinaryFiles, offsetX: number, offsetY: number, renderConfig: {
-    exportWithDarkMode: boolean;
-    renderEmbeddables: boolean;
-    frameRendering: AppState["frameRendering"];
-}) => void;
+export declare const renderElementToSvg: (element: NonDeletedExcalidrawElement, rsvg: RoughSVG, svgRoot: SVGElement, files: BinaryFiles, offsetX: number, offsetY: number, renderConfig: SVGRenderConfig) => void;
 export declare const pathsCache: WeakMap<ExcalidrawFreeDrawElement, Path2D>;
 export declare function generateFreeDrawShape(element: ExcalidrawFreeDrawElement): Path2D;
 export declare function getFreeDrawPath2D(element: ExcalidrawFreeDrawElement): Path2D | undefined;

package/types/renderer/renderScene.d.ts

@@ -1,7 +1,7 @@
 import { RoughSVG } from "roughjs/bin/svg";
-import { BinaryFiles, AppState } from "../types";
+import { BinaryFiles } from "../types";
 import { NonDeletedExcalidrawElement } from "../element/types";
-import { InteractiveSceneRenderConfig, StaticSceneRenderConfig } from "../scene/types";
+import { InteractiveSceneRenderConfig, SVGRenderConfig, StaticSceneRenderConfig } from "../scene/types";
 import "canvas-roundrect-polyfill";
 export declare const DEFAULT_SPACING = 2;
 /**
@@ -22,10 +22,4 @@ export declare const renderInteractiveScene: <U extends ({ canvas, elements, vis
  */
 export declare const renderStaticScene: (renderConfig: StaticSceneRenderConfig, throttle?: boolean) => void;
 export declare const cancelRender: () => void;
-export declare const renderSceneToSvg: (elements: readonly NonDeletedExcalidrawElement[], rsvg: RoughSVG, svgRoot: SVGElement, files: BinaryFiles, { offsetX, offsetY, exportWithDarkMode, renderEmbeddables, frameRendering, }: {
-    offsetX?: number | undefined;
-    offsetY?: number | undefined;
-    exportWithDarkMode: boolean;
-    renderEmbeddables: boolean;
-    frameRendering: AppState["frameRendering"];
-}) => void;
+export declare const renderSceneToSvg: (elements: readonly NonDeletedExcalidrawElement[], rsvg: RoughSVG, svgRoot: SVGElement, files: BinaryFiles, renderConfig: SVGRenderConfig) => void;

package/types/scene/Shape.d.ts

@@ -9,4 +9,7 @@ export declare const generateRoughOptions: (element: ExcalidrawElement, continuo
  *
  * @private
  */
-export declare const _generateElementShape: (element: Exclude<NonDeletedExcalidrawElement, ExcalidrawSelectionElement>, generator: RoughGenerator, isExporting?: boolean) => Drawable | Drawable[] | null;
+export declare const _generateElementShape: (element: Exclude<NonDeletedExcalidrawElement, ExcalidrawSelectionElement>, generator: RoughGenerator, { isExporting, canvasBackgroundColor, }: {
+    isExporting: boolean;
+    canvasBackgroundColor: string;
+}) => Drawable | Drawable[] | null;

package/types/scene/ShapeCache.d.ts

@@ -1,6 +1,7 @@
 import { Drawable } from "roughjs/bin/core";
 import { ExcalidrawElement } from "../element/types";
 import { ElementShape, ElementShapes } from "./types";
+import { AppState } from "../types";
 export declare class ShapeCache {
     private static rg;
     private static cache;
@@ -16,5 +17,8 @@ export declare class ShapeCache {
      * Generates & caches shape for element if not already cached, otherwise
      * returns cached shape.
      */
-    static generateElementShape: <T extends import("../element/types").ExcalidrawLinearElement | import("../element/types").ExcalidrawRectangleElement | import("../element/types").ExcalidrawDiamondElement | import("../element/types").ExcalidrawEllipseElement | import("../element/types").ExcalidrawEmbeddableElement | import("../element/types").ExcalidrawIframeElement | import("../element/types").ExcalidrawImageElement | import("../element/types").ExcalidrawFrameElement | import("../element/types").ExcalidrawMagicFrameElement | import("../element/types").ExcalidrawTextElement | import("../element/types").ExcalidrawFreeDrawElement>(element: T, isExporting?: boolean) => ((T["type"] extends keyof ElementShapes ? ElementShapes[T["type"]] | undefined : ElementShape | undefined) & ({} | null)) | (T["type"] extends keyof ElementShapes ? ElementShapes[T["type"]] : Drawable | null);
+    static generateElementShape: <T extends import("../element/types").ExcalidrawLinearElement | import("../element/types").ExcalidrawRectangleElement | import("../element/types").ExcalidrawDiamondElement | import("../element/types").ExcalidrawEllipseElement | import("../element/types").ExcalidrawEmbeddableElement | import("../element/types").ExcalidrawIframeElement | import("../element/types").ExcalidrawImageElement | import("../element/types").ExcalidrawFrameElement | import("../element/types").ExcalidrawMagicFrameElement | import("../element/types").ExcalidrawTextElement | import("../element/types").ExcalidrawFreeDrawElement>(element: T, renderConfig: {
+        isExporting: boolean;
+        canvasBackgroundColor: AppState["viewBackgroundColor"];
+    } | null) => ((T["type"] extends keyof ElementShapes ? ElementShapes[T["type"]] | undefined : ElementShape | undefined) & ({} | null)) | (T["type"] extends keyof ElementShapes ? ElementShapes[T["type"]] : Drawable | null);
 }

package/types/scene/types.d.ts

@@ -1,14 +1,24 @@
 import type { RoughCanvas } from "roughjs/bin/canvas";
 import { Drawable } from "roughjs/bin/core";
 import { ExcalidrawTextElement, NonDeletedExcalidrawElement } from "../element/types";
-import { AppClassProperties, InteractiveCanvasAppState, StaticCanvasAppState } from "../types";
+import { AppClassProperties, AppState, InteractiveCanvasAppState, StaticCanvasAppState } from "../types";
 export type StaticCanvasRenderConfig = {
+    canvasBackgroundColor: AppState["viewBackgroundColor"];
     imageCache: AppClassProperties["imageCache"];
     renderGrid: boolean;
     /** when exporting the behavior is slightly different (e.g. we can't use
      CSS filters), and we disable render optimizations for best output */
     isExporting: boolean;
 };
+export type SVGRenderConfig = {
+    offsetX: number;
+    offsetY: number;
+    isExporting: boolean;
+    exportWithDarkMode: boolean;
+    renderEmbeddables: boolean;
+    frameRendering: AppState["frameRendering"];
+    canvasBackgroundColor: AppState["viewBackgroundColor"];
+};
 export type InteractiveCanvasRenderConfig = {
     remoteSelectedElementIds: {
         [elementId: string]: string[];