@zsviczian/excalidraw 0.17.6-7 → 0.17.6-9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zsviczian/excalidraw",
-  "version": "0.17.6-7",
+  "version": "0.17.6-9",
   "main": "main.js",
   "types": "types/excalidraw/index.d.ts",
   "files": [

package/types/excalidraw/components/App.d.ts

@@ -364,7 +364,10 @@ declare class App extends React.Component<AppProps, AppState> {
         duration?: number;
     } | null) => void;
     restoreFileFromShare: () => Promise<void>;
-    /** adds supplied files to existing files in the appState */
+    /**
+     * adds supplied files to existing files in the appState.
+     * NOTE if file already exists in editor state, the file data is not updated
+     * */
     addFiles: ExcalidrawImperativeAPI["addFiles"];
     setMobileModeAllowed: ExcalidrawImperativeAPI["setMobileModeAllowed"];
     private debounceClearHighlightSearchResults;
@@ -373,6 +376,7 @@ declare class App extends React.Component<AppProps, AppState> {
     bringForward: ExcalidrawImperativeAPI["bringForward"];
     sendToBack: ExcalidrawImperativeAPI["sendToBack"];
     sendBackward: ExcalidrawImperativeAPI["sendBackward"];
+    private addMissingFiles;
     updateScene: <K extends keyof AppState>(sceneData: {
         elements?: SceneData["elements"];
         appState?: Pick<AppState, K> | null | undefined;

package/types/excalidraw/data/blob.d.ts

@@ -25,8 +25,11 @@ export declare const canvasToBlob: (canvas: HTMLCanvasElement | Promise<HTMLCanv
 /** generates SHA-1 digest from supplied file (if not supported, falls back
     to a 40-char base64 random id) */
 export declare const generateIdFromFile: (file: File) => Promise<FileId>;
+/** async. For sync variant, use getDataURL_sync */
 export declare const getDataURL: (file: Blob | File) => Promise<DataURL>;
+export declare const getDataURL_sync: (data: string | Uint8Array | ArrayBuffer, mimeType: ValueOf<typeof MIME_TYPES>) => DataURL;
 export declare const dataURLToFile: (dataURL: DataURL, filename?: string) => File;
+export declare const dataURLToString: (dataURL: DataURL) => string;
 export declare const resizeImageFile: (file: File, opts: {
     /** undefined indicates auto */
     outputType?: (typeof MIME_TYPES)["jpg"];

package/types/excalidraw/data/encode.d.ts

@@ -1,10 +1,10 @@
-export declare const toByteString: (data: string | Uint8Array | ArrayBuffer) => Promise<string>;
+export declare const toByteString: (data: string | Uint8Array | ArrayBuffer) => string;
 /**
  * @param isByteString set to true if already byte string to prevent bloat
  *  due to reencoding
  */
-export declare const stringToBase64: (str: string, isByteString?: boolean) => Promise<string>;
-export declare const base64ToString: (base64: string, isByteString?: boolean) => Promise<string>;
+export declare const stringToBase64: (str: string, isByteString?: boolean) => string;
+export declare const base64ToString: (base64: string, isByteString?: boolean) => string;
 export declare const base64ToArrayBuffer: (base64: string) => ArrayBuffer;
 type EncodedData = {
     encoded: string;
@@ -21,8 +21,8 @@ export declare const encode: ({ text, compress, }: {
     text: string;
     /** defaults to `true`. If compression fails, falls back to bstring alone. */
     compress?: boolean | undefined;
-}) => Promise<EncodedData>;
-export declare const decode: (data: EncodedData) => Promise<string>;
+}) => EncodedData;
+export declare const decode: (data: EncodedData) => string;
 /**
  * The returned buffer has following format:
  * `[]` refers to a buffers wrapper (see `concatBuffers`)

package/types/excalidraw/data/image.d.ts

@@ -9,7 +9,7 @@ export declare const encodePngMetadata: ({ blob, metadata, }: {
 export declare const decodePngMetadata: (blob: Blob) => Promise<string>;
 export declare const encodeSvgMetadata: ({ text }: {
     text: string;
-}) => Promise<string>;
+}) => string;
 export declare const decodeSvgMetadata: ({ svg }: {
     svg: string;
-}) => Promise<string>;
+}) => string;

package/types/excalidraw/element/image.d.ts

@@ -29,4 +29,4 @@ export declare const updateImageCache: ({ fileIds, files, imageCache, }: {
 }>;
 export declare const getInitializedImageElements: (elements: readonly ExcalidrawElement[]) => InitializedExcalidrawImageElement[];
 export declare const isHTMLSVGElement: (node: Node | null) => node is SVGElement;
-export declare const normalizeSVG: (SVGString: string) => Promise<string>;
+export declare const normalizeSVG: (SVGString: string) => string;

package/types/excalidraw/element/textElement.d.ts

@@ -2,8 +2,6 @@ import type { ElementsMap, ExcalidrawElement, ExcalidrawElementType, ExcalidrawT
 import type { MaybeTransformHandleType } from "./transformHandles";
 import type { AppState } from "../types";
 import type { ExtractSetType } from "../utility-types";
-export declare const containsCJK: (text: string) => boolean;
-export declare const containsEmoji: (text: string) => boolean;
 export declare const normalizeText: (text: string) => string;
 export declare const redrawTextBoundingBox: (textElement: ExcalidrawTextElement, container: ExcalidrawElement | null, elementsMap: ElementsMap, informMutation?: boolean) => void;
 export declare const bindTextToShapeAfterDuplication: (newElements: ExcalidrawElement[], oldElements: ExcalidrawElement[], oldIdToDuplicatedId: Map<ExcalidrawElement["id"], ExcalidrawElement["id"]>) => void;
@@ -29,10 +27,22 @@ export declare const detectLineHeight: (textElement: ExcalidrawTextElement) => n
  */
 export declare const getLineHeightInPx: (fontSize: ExcalidrawTextElement["fontSize"], lineHeight: ExcalidrawTextElement["lineHeight"]) => number;
 export declare const getApproxMinLineHeight: (fontSize: ExcalidrawTextElement["fontSize"], lineHeight: ExcalidrawTextElement["lineHeight"]) => number;
+/**
+ * @param forceAdvanceWidth use to force retrieve the "advance width" ~ `metrics.width`, instead of the actual boundind box width.
+ *
+ * > The advance width is the distance between the glyph's initial pen position and the next glyph's initial pen position.
+ *
+ * We need to use the advance width as that's the closest thing to the browser wrapping algo, hence using it for:
+ * - text wrapping
+ * - wysiwyg editor (+padding)
+ *
+ * Everything else should be based on the actual bounding box width.
+ *
+ * `Math.ceil` of the final width adds additional buffer which stabilizes slight wrapping incosistencies.
+ */
+export declare const getLineWidth: (text: string, font: FontString, forceAdvanceWidth?: true) => number;
 export declare const getTextWidth: (text: string, font: FontString, forceAdvanceWidth?: true) => number;
 export declare const getTextHeight: (text: string, fontSize: number, lineHeight: ExcalidrawTextElement["lineHeight"]) => number;
-export declare const parseTokens: (line: string) => string[];
-export declare const wrapText: (text: string, font: FontString, maxWidth: number) => string;
 export declare const charWidth: {
     calculate: (char: string, font: FontString) => number;
     getCache: (font: FontString) => number[];

package/types/excalidraw/element/textWrapping.d.ts

@@ -0,0 +1,13 @@
+import type { FontString } from "./types";
+/**
+ * Test if a given text contains any CJK characters (including symbols, punctuation, etc,).
+ */
+export declare const containsCJK: (text: string) => boolean;
+/**
+ * Breaks the line into the tokens based on the found line break opporutnities.
+ */
+export declare const parseTokens: (line: string) => string[];
+/**
+ * Wraps the original text into the lines based on the given width.
+ */
+export declare const wrapText: (text: string, font: FontString, maxWidth: number) => string;

package/types/excalidraw/fonts/Fonts.d.ts

@@ -16,6 +16,10 @@ export declare class Fonts {
     }>;
     private readonly scene;
     constructor(scene: Scene);
+    /**
+     * Get all the font families for the given scene.
+     */
+    getSceneFamilies: () => number[];
     /**
      * if we load a (new) font, it's likely that text elements using it have
      * already been rendered using a fallback font. Thus, we want invalidate
@@ -27,21 +31,35 @@ export declare class Fonts {
     onLoaded: (fontFaces: readonly FontFace[]) => void;
     /**
      * Load font faces for a given scene and trigger scene update.
+     *
+     * FontFaceSet loadingdone event we listen on may not always
+     * fire (looking at you Safari), so on init we manually load all
+     * fonts and rerender scene text elements once done.
+     *
+     * For Safari we make sure to check against each loaded font face
+     * with the unique characters per family in the scene,
+     * otherwise fonts might remain unloaded.
      */
     loadSceneFonts: () => Promise<FontFace[]>;
-    /**
-     * Load all registered font faces.
-     */
-    static loadAllFonts: () => Promise<FontFace[]>;
     /**
      * Load font faces for passed elements - use when the scene is unavailable (i.e. export).
+     *
+     * For Safari we make sure to check against each loaded font face,
+     * with the unique characters per family in the elements
+     * otherwise fonts might remain unloaded.
      */
     static loadElementsFonts: (elements: readonly ExcalidrawElement[]) => Promise<FontFace[]>;
-    static loadFontFaces(fontFamilies: Array<ExcalidrawTextElement["fontFamily"]>): Promise<FontFace[]>;
     /**
-     * WARN: should be called just once on init, even across multiple instances.
+     * Load all registered font faces.
      */
-    private static init;
+    static loadAllFonts: () => Promise<FontFace[]>;
+    /**
+     * Generate CSS @font-face declarations for the given elements.
+     */
+    static generateFontFaceDeclarations(elements: readonly ExcalidrawElement[]): Promise<string[]>;
+    static loadFontFaces(fontFamilies: Array<ExcalidrawTextElement["fontFamily"]>, charsPerFamily?: Record<number, Set<string>>): Promise<FontFace[]>;
+    private static fontFacesLoader;
+    private static fontFacesStylesGenerator;
     /**
      * Register a new font.
      *
@@ -63,11 +81,25 @@ export declare class Fonts {
         fontFaces: ExcalidrawFontFace[];
     }>;
     /**
-     * Gets all the font families for the given scene.
+     * WARN: should be called just once on init, even across multiple instances.
+     */
+    private static init;
+    /**
+     * Get all the unique font families for the given elements.
+     */
+    static getUniqueFamilies(elements: ReadonlyArray<ExcalidrawElement>): Array<ExcalidrawTextElement["fontFamily"]>;
+    /**
+     * Get all the unique characters per font family for the given scene.
+     */
+    private static getCharsPerFamily;
+    /**
+     * Get characters for a given family.
+     */
+    private static getCharacters;
+    /**
+     * Get all registered font families.
      */
-    getSceneFamilies: () => number[];
     private static getAllFamilies;
-    static getElementsFamilies(elements: ReadonlyArray<ExcalidrawElement>): Array<ExcalidrawTextElement["fontFamily"]>;
 }
 /**
  * Calculates vertical offset for a text with alphabetic baseline.

package/types/excalidraw/scene/export.d.ts

@@ -25,5 +25,6 @@ export declare const exportToSvg: (elements: readonly NonDeletedExcalidrawElemen
     renderEmbeddables?: boolean;
     exportingFrame?: ExcalidrawFrameLikeElement | null;
     skipInliningFonts?: true;
+    reuseImages?: boolean;
 }) => Promise<SVGSVGElement>;
 export declare const getExportSize: (elements: readonly NonDeletedExcalidrawElement[], exportPadding: number, scale: number) => [number, number];

package/types/excalidraw/scene/types.d.ts

@@ -26,6 +26,13 @@ export type SVGRenderConfig = {
     canvasBackgroundColor: AppState["viewBackgroundColor"];
     frameColor?: AppState["frameColor"];
     embedsValidationStatus: EmbedsValidationStatus;
+    /**
+     * whether to attempt to reuse images as much as possible through symbols
+     * (reduces SVG size, but may be incompoatible with some SVG renderers)
+     *
+     * @default true
+     */
+    reuseImages: boolean;
 };
 export type InteractiveCanvasRenderConfig = {
     remoteSelectedElementIds: Map<ExcalidrawElement["id"], SocketId[]>;

package/types/excalidraw/types.d.ts

@@ -77,6 +77,11 @@ export type BinaryFileData = {
      * Epoch timestamp in milliseconds.
      */
     lastRetrieved?: number;
+    /**
+     * indicates the version of the file. This can be used to determine whether
+     * the file dataURL has changed e.g. as part of restore due to schema update.
+     */
+    version?: number;
 };
 export type BinaryFileMetadata = Omit<BinaryFileData, "dataURL">;
 export type BinaryFiles = Record<ExcalidrawElement["id"], BinaryFileData>;

package/types/utils/export.d.ts

@@ -22,10 +22,11 @@ export declare const exportToBlob: (opts: ExportOpts & {
     quality?: number;
     exportPadding?: number;
 }) => Promise<Blob>;
-export declare const exportToSvg: ({ elements, appState, files, exportPadding, renderEmbeddables, exportingFrame, skipInliningFonts, }: Omit<ExportOpts, "getDimensions"> & {
+export declare const exportToSvg: ({ elements, appState, files, exportPadding, renderEmbeddables, exportingFrame, skipInliningFonts, reuseImages, }: Omit<ExportOpts, "getDimensions"> & {
     exportPadding?: number | undefined;
     renderEmbeddables?: boolean | undefined;
     skipInliningFonts?: true | undefined;
+    reuseImages?: boolean | undefined;
 }) => Promise<SVGSVGElement>;
 export declare const exportToClipboard: (opts: ExportOpts & {
     mimeType?: string;
@@ -36,7 +37,8 @@ export { getCommonBoundingBox } from "../excalidraw/element/bounds";
 export { getMaximumGroups } from "../excalidraw/groups";
 export { intersectElementWithLine } from "../excalidraw/element/binding";
 export { determineFocusDistance } from "../excalidraw/element/binding";
-export { measureText, wrapText } from "../excalidraw/element/textElement";
+export { measureText } from "../excalidraw/element/textElement";
+export { wrapText } from "../excalidraw/element/textWrapping";
 export { getLineHeight } from "../excalidraw/fonts/index";
 export { getFontString, getFontFamilyString } from "../excalidraw/utils";
 export { getBoundTextMaxWidth } from "../excalidraw/element/textElement";