js-draw 1.18.0 → 1.20.0

package/dist/cjs/tools/SelectionTool/SelectionHandle.js

@@ -64,6 +64,11 @@ class SelectionHandle {
     addTo(container) {
         container.appendChild(this.element);
     }
+    /**
+     * Removes this element from its container. Should only be called
+     * after {@link addTo}.
+     */
+    remove() { this.element.remove(); }
     /**
      * Returns this handle's bounding box relative to the top left of the
      * selection box.
@@ -112,6 +117,7 @@ class SelectionHandle {
     handleDragStart(pointer) {
         this.onDragStart(pointer.canvasPos);
         this.dragLastPos = pointer.canvasPos;
+        return true;
     }
     handleDragUpdate(pointer) {
         if (!this.dragLastPos) {

package/dist/cjs/tools/SelectionTool/SelectionTool.js

@@ -404,7 +404,7 @@ class SelectionTool extends BaseTool_1.default {
                     resolve(blob);
                 }
                 else {
-                    reject('Failed to convert canvas to blob.');
+                    reject(new Error('Failed to convert canvas to blob.'));
                 }
             }, 'image/png');
         }));

package/dist/cjs/tools/SelectionTool/types.d.ts

@@ -1,3 +1,5 @@
+import type { Rect2, Point2 } from '@js-draw/math';
+import Pointer from '../../Pointer';
 export declare enum ResizeMode {
     Both = 0,
     HorizontalOnly = 1,
@@ -7,3 +9,20 @@ export declare enum TransformMode {
     Snap = 0,
     NoSnap = 1
 }
+/**
+ * Represents a child of the selection that should move with the selection
+ * and handle events.
+ *
+ * Although selection children should be `HTMLElement`s, the selection may be
+ * hidden behind an invisible element. As such, these elements should handle
+ * drag start/update/end events.
+ */
+export interface SelectionBoxChild {
+    updatePosition(selectionScreenBBox: Rect2): void;
+    containsPoint(point: Point2): boolean;
+    addTo(container: HTMLElement): void;
+    remove(): void;
+    handleDragStart(pointer: Pointer): boolean;
+    handleDragUpdate(pointer: Pointer): void;
+    handleDragEnd(): void;
+}

package/dist/cjs/tools/TextTool.js

@@ -23,9 +23,10 @@ class TextTool extends BaseTool_1.default {
         this.textMeasuringCtx = null;
         this.textScale = math_1.Vec2.of(1, 1);
         this.removeExistingCommand = null;
+        const editorFonts = editor.getCurrentSettings().text?.fonts ?? [];
         this.textStyleValue = ReactiveValue_1.ReactiveValue.fromInitialValue({
             size: 32,
-            fontFamily: 'sans-serif',
+            fontFamily: editorFonts.length > 0 ? editorFonts[0] : 'sans-serif',
             renderingStyle: {
                 fill: math_1.Color4.purple,
             },

package/dist/cjs/tools/TextTool.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/tools/ToolController.d.ts

@@ -55,6 +55,8 @@ export default class ToolController implements InputEventListener {
     insertToolsAfter(insertAfter: BaseTool, toolsToInsert: BaseTool[]): void;
     /** @see {@link insertToolsAfter} */
     insertToolsBefore(insertBefore: BaseTool, toolsToInsert: BaseTool[]): void;
+    /** @internal */
+    changeActiveToolTo(tool: BaseTool): void;
     private onEventInternal;
     /** Alias for {@link dispatchInputEvent}. */
     onEvent(event: InputEvt): boolean;

package/dist/cjs/tools/ToolController.js

@@ -62,6 +62,7 @@ class ToolController {
         const secondaryPenTool = new Pen_1.default(editor, localization.penTool(2), { color: math_1.Color4.clay, thickness: 4 });
         // Stabilize the secondary pen tool.
         secondaryPenTool.setInputMapper(new InputStabilizer_1.default(editor.viewport));
+        const eraser = new Eraser_1.default(editor, localization.eraserTool);
         const primaryTools = [
             // Three pens
             primaryPenTool,
@@ -72,7 +73,7 @@ class ToolController {
                 thickness: 40,
                 factory: PressureSensitiveFreehandLineBuilder_1.makePressureSensitiveFreehandLineBuilder
             }),
-            new Eraser_1.default(editor, localization.eraserTool),
+            eraser,
             new SelectionTool_1.default(editor, localization.selectionTool),
             new TextTool_1.default(editor, localization.textTool, localization),
             new PanZoom_1.default(editor, PanZoom_1.PanZoomMode.SinglePointerGestures, localization.anyDevicePanning),
@@ -90,6 +91,7 @@ class ToolController {
             new UndoRedoShortcut_1.default(editor),
             new ToolbarShortcutHandler_1.default(editor),
             new ToolSwitcherShortcut_1.default(editor),
+            eraser.makeEraserSwitcherTool(),
             new FindTool_1.default(editor),
             new PasteHandler_1.default(editor),
             new SelectAllShortcutHandler_1.default(editor),
@@ -208,6 +210,13 @@ class ToolController {
     insertToolsBefore(insertBefore, toolsToInsert) {
         this.insertTools(insertBefore, toolsToInsert, 'before');
     }
+    /** @internal */
+    changeActiveToolTo(tool) {
+        if (!tool.isEnabled()) {
+            tool.setEnabled(true);
+        }
+        this.activeTool = tool;
+    }
     // @internal use `dispatchEvent` rather than calling `onEvent` directly.
     onEventInternal(event) {
         const isEditorReadOnly = this.isEditorReadOnly.get();

package/dist/cjs/util/ReactiveValue.d.ts

@@ -2,6 +2,9 @@ type ListenerResult = {
     remove(): void;
 };
 type UpdateCallback<T> = (value: T) => void;
+type ReactiveValuesOf<T extends unknown[]> = {
+    [key in keyof T]: ReactiveValue<T[key]>;
+};
 /**
  * A `ReactiveValue` is a value that
  * - updates periodically,
@@ -33,6 +36,8 @@ export declare abstract class ReactiveValue<T> {
      * @see {@link onUpdate}.
      */
     abstract onUpdateAndNow(callback: UpdateCallback<T>): ListenerResult;
+    /** Returns a promise that resolves when this value is next changed. */
+    waitForNextUpdate(): Promise<T>;
     /** Creates a `ReactiveValue` with an initial value, `initialValue`. */
     static fromInitialValue<T>(initialValue: T): MutableReactiveValue<T>;
     /** Returns a `ReactiveValue` that is **known** will never change. */
@@ -54,6 +59,7 @@ export declare abstract class ReactiveValue<T> {
      * Returns a reactive value derived from a single `source`.
      */
     static map<A, B>(source: ReactiveValue<A>, map: (a: A) => B, inverseMap: (b: B) => A): MutableReactiveValue<B>;
+    static union<Values extends [...unknown[]]>(values: ReactiveValuesOf<Values>): ReactiveValue<Values>;
 }
 export declare abstract class MutableReactiveValue<T> extends ReactiveValue<T> {
     /**

package/dist/cjs/util/ReactiveValue.js

@@ -38,6 +38,15 @@ const noOpSetUpdateListener = () => {
  * Avoid extending this class from an external library, as that may not be stable.
  */
 class ReactiveValue {
+    /** Returns a promise that resolves when this value is next changed. */
+    waitForNextUpdate() {
+        return new Promise(resolve => {
+            const listener = this.onUpdate(value => {
+                listener.remove();
+                resolve(value);
+            });
+        });
+    }
     /** Creates a `ReactiveValue` with an initial value, `initialValue`. */
     static fromInitialValue(initialValue) {
         return new ReactiveValueImpl(initialValue);
@@ -51,6 +60,8 @@ class ReactiveValue {
                 callback(value);
                 return noOpUpdateListenerResult;
             },
+            // Never resolves -- immutable.
+            waitForNextUpdate: () => new Promise(() => { }),
         };
     }
     /**
@@ -95,6 +106,11 @@ class ReactiveValue {
         }
         return result;
     }
+    static union(values) {
+        return ReactiveValue.fromCallback(() => {
+            return values.map(value => value.get());
+        }, values);
+    }
 }
 exports.ReactiveValue = ReactiveValue;
 class MutableReactiveValue extends ReactiveValue {

package/dist/cjs/util/bytesToSizeString.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Returns a size in bytes, KiB, or MiB with units suffix.
+ */
+declare const bytesToSizeString: (sizeBytes: number) => {
+    size: number;
+    units: string;
+};
+export default bytesToSizeString;

package/dist/cjs/util/bytesToSizeString.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Returns a size in bytes, KiB, or MiB with units suffix.
+ */
+const bytesToSizeString = (sizeBytes) => {
+    const sizeInKiB = sizeBytes / 1024;
+    const sizeInMiB = sizeInKiB / 1024;
+    const sizeInGiB = sizeInMiB / 1024;
+    let units = 'B';
+    let size = sizeBytes;
+    if (sizeInGiB >= 1) {
+        size = sizeInGiB;
+        units = 'GiB';
+    }
+    else if (sizeInMiB >= 1) {
+        size = sizeInMiB;
+        units = 'MiB';
+    }
+    else if (sizeInKiB >= 1) {
+        size = sizeInKiB;
+        units = 'KiB';
+    }
+    return { size, units };
+};
+exports.default = bytesToSizeString;

package/dist/cjs/util/bytesToSizeString.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/util/stopPropagationOfScrollingWheelEvents.js

@@ -1,15 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const stopPropagationOfScrollingWheelEvents = (scrollingContainer) => {
+    const scrollsAxis = (delta, clientSize, scrollOffset, scrollSize) => {
+        const hasScroll = clientSize !== scrollSize && delta !== 0;
+        const eventScrollsPastStart = scrollOffset + delta <= 0;
+        const scrollEnd = scrollOffset + clientSize;
+        const eventScrollsPastEnd = scrollEnd + delta > scrollSize;
+        return hasScroll && !eventScrollsPastStart && !eventScrollsPastEnd;
+    };
     scrollingContainer.onwheel = (event) => {
-        const hasScroll = scrollingContainer.clientWidth !== scrollingContainer.scrollWidth
-            && event.deltaX !== 0;
-        const eventScrollsPastLeft = scrollingContainer.scrollLeft + event.deltaX <= 0;
-        const scrollRight = scrollingContainer.scrollLeft + scrollingContainer.clientWidth;
-        const eventScrollsPastRight = scrollRight + event.deltaX > scrollingContainer.scrollWidth;
+        const scrollsX = scrollsAxis(event.deltaX, scrollingContainer.clientWidth, scrollingContainer.scrollLeft, scrollingContainer.scrollWidth);
+        const scrollsY = scrollsAxis(event.deltaY, scrollingContainer.clientHeight, scrollingContainer.scrollTop, scrollingContainer.scrollHeight);
         // Stop the editor from receiving the event if it will scroll the pen type selector
         // instead.
-        if (hasScroll && !eventScrollsPastLeft && !eventScrollsPastRight) {
+        if (scrollsX || scrollsY) {
             event.stopPropagation();
         }
     };

package/dist/cjs/util/waitForAll.d.ts

@@ -1,6 +1,8 @@
 /**
  * Resolves when all given promises have resolved. If no promises are given,
  * does not return a Promise.
+ *
+ * If all elements of `results` are known to be `Promise`s, use `Promise.all`.
  */
 declare const waitForAll: (results: (Promise<void> | void)[]) => Promise<void> | void;
 export default waitForAll;

package/dist/cjs/util/waitForAll.js

@@ -3,6 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 /**
  * Resolves when all given promises have resolved. If no promises are given,
  * does not return a Promise.
+ *
+ * If all elements of `results` are known to be `Promise`s, use `Promise.all`.
  */
 const waitForAll = (results) => {
     // If any are Promises...

package/dist/cjs/util/waitForImageLoaded.js

@@ -4,7 +4,10 @@ const waitForImageLoad = async (image) => {
     if (!image.complete) {
         await new Promise((resolve, reject) => {
             image.onload = event => resolve(event);
+            // TODO(v2): Return a `new Error(event.message)`
+            // eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors -- Forwarding an error-like object.
             image.onerror = event => reject(event);
+            // eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors -- Forwarding an error-like object.
             image.onabort = event => reject(event);
         });
     }

package/dist/cjs/util/waitForTimeout.d.ts

@@ -1,2 +1,3 @@
+/** Returns a promise that resolves after `timeout` milliseconds. */
 declare const waitForTimeout: (timeout: number) => Promise<void>;
 export default waitForTimeout;

package/dist/cjs/util/waitForTimeout.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-// Returns a promise that resolves after `timeout` milliseconds.
+/** Returns a promise that resolves after `timeout` milliseconds. */
 const waitForTimeout = (timeout) => {
     return new Promise(resolve => {
         setTimeout(() => resolve(), timeout);

package/dist/cjs/version.js

@@ -6,5 +6,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
  * @internal
  */
 exports.default = {
-    number: '1.18.0',
+    number: '1.20.0',
 };

package/dist/mjs/Editor.d.ts

@@ -19,6 +19,7 @@ import RenderablePathSpec from './rendering/RenderablePathSpec';
 import { AboutDialogEntry } from './dialogs/makeAboutDialog';
 import ReactiveValue, { MutableReactiveValue } from './util/ReactiveValue';
 import { PenTypeRecord } from './toolbar/widgets/PenToolWidget';
+import { ShowCustomFilePickerCallback } from './toolbar/widgets/components/makeFileInput';
 /**
  * Provides settings to an instance of an editor. See the Editor {@link Editor.constructor}.
  *
@@ -76,7 +77,7 @@ export interface EditorSettings {
         version?: string;
     } | null;
     /**
-     * Configures the default pen tools.
+     * Configures the default {@link PenTool} tools.
      *
      * **Example**:
      * [[include:doc-pages/inline-examples/editor-settings-polyline-pen.md]]
@@ -102,6 +103,24 @@ export interface EditorSettings {
          */
         filterPenTypes?: (penType: PenTypeRecord) => boolean;
     } | null;
+    /** Configures the default {@link TextTool} control and text tool. */
+    text: {
+        /** Fonts to show in the text UI. */
+        fonts?: string[];
+    } | null;
+    /** Configures the default {@link InsertImageWidget} control. */
+    image: {
+        /**
+         * A custom callback to show an image picker. If given, this should return
+         * a list of `File`s representing the images selected by the picker.
+         *
+         * If not given, the default file picker shown by a [file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file)
+         * is shown.
+         *
+         * @beta -- API may change between minor releases.
+         */
+        showImagePicker?: ShowCustomFilePickerCallback;
+    } | null;
 }
 /**
  * The main entrypoint for the full editor.

package/dist/mjs/Editor.mjs

@@ -113,6 +113,12 @@ export class Editor {
                 additionalPenTypes: settings.pens?.additionalPenTypes ?? [],
                 filterPenTypes: settings.pens?.filterPenTypes ?? (() => true)
             },
+            text: {
+                fonts: settings.text?.fonts ?? ['sans-serif', 'serif', 'monospace'],
+            },
+            image: {
+                showImagePicker: settings.image?.showImagePicker ?? undefined,
+            },
         };
         // Validate settings
         if (this.settings.minZoom > this.settings.maxZoom) {

package/dist/mjs/{SVGLoader.d.ts → SVGLoader/index.d.ts}

@@ -1,5 +1,5 @@
 import { Rect2 } from '@js-draw/math';
-import { ComponentAddedListener, ImageLoader, OnDetermineExportRectListener, OnProgressListener } from './types';
+import { ComponentAddedListener, ImageLoader, OnDetermineExportRectListener, OnProgressListener } from '../types';
 export declare const defaultSVGViewRect: Rect2;
 export declare const svgAttributesDataKey = "svgAttrs";
 export declare const svgStyleAttributesDataKey = "svgStyleAttrs";

package/dist/mjs/{SVGLoader.mjs → SVGLoader/index.mjs}

@@ -1,12 +1,13 @@
 import { Color4, Mat33, Path, Rect2, Vec2 } from '@js-draw/math';
-import  BackgroundComponent, { BackgroundType, backgroundTypeToClassNameMap, imageBackgroundCSSClassName, imageBackgroundGridSizeCSSPrefix, imageBackgroundNonAutomaticSecondaryColorCSSClassName }  from './components/BackgroundComponent.mjs';
-import  ImageComponent  from './components/ImageComponent.mjs';
-import  Stroke  from './components/Stroke.mjs';
-import  SVGGlobalAttributesObject  from './components/SVGGlobalAttributesObject.mjs';
-import  TextComponent, { TextTransformMode }  from './components/TextComponent.mjs';
-import  UnknownSVGObject  from './components/UnknownSVGObject.mjs';
-import  { pathToRenderable }  from './rendering/RenderablePathSpec.mjs';
-import  { renderedStylesheetId }  from './rendering/renderers/SVGRenderer.mjs';
+import  BackgroundComponent, { BackgroundType, backgroundTypeToClassNameMap, imageBackgroundCSSClassName, imageBackgroundGridSizeCSSPrefix, imageBackgroundNonAutomaticSecondaryColorCSSClassName }  from '../components/BackgroundComponent.mjs';
+import  ImageComponent  from '../components/ImageComponent.mjs';
+import  Stroke  from '../components/Stroke.mjs';
+import  SVGGlobalAttributesObject  from '../components/SVGGlobalAttributesObject.mjs';
+import  TextComponent, { TextTransformMode }  from '../components/TextComponent.mjs';
+import  UnknownSVGObject  from '../components/UnknownSVGObject.mjs';
+import  { pathToRenderable }  from '../rendering/RenderablePathSpec.mjs';
+import  { renderedStylesheetId }  from '../rendering/renderers/SVGRenderer.mjs';
+import  determineFontSize  from './utils/determineFontSize.mjs';
 // Size of a loaded image if no size is specified.
 export const defaultSVGViewRect = new Rect2(0, 0, 500, 500);
 // Key to retrieve unrecognised attributes from an AbstractComponent
@@ -46,7 +47,9 @@ export default class SVGLoader {
         let fill = Color4.transparent;
         let stroke;
         // If possible, use computedStyles (allows property inheritance).
-        const fillAttribute = node.getAttribute('fill') ?? computedStyles?.fill ?? node.style?.fill;
+        // Chromium, however, sets .fill to a falsy, but not undefined value in some cases where
+        // styles are available. As such, use || instead of ??.
+        const fillAttribute = node.getAttribute('fill') ?? (computedStyles?.fill || node.style?.fill);
         if (fillAttribute) {
             try {
                 fill = Color4.fromString(fillAttribute);
@@ -296,31 +299,13 @@ export default class SVGLoader {
         }
         // Compute styles.
         const computedStyles = this.getComputedStyle(elem);
-        const fontSizeExp = /^([-0-9.e]+)px/i;
-        // In some environments, computedStyles.fontSize can be increased by the system.
-        // Thus, to prevent text from growing on load/save, prefer .style.fontSize.
-        let fontSizeMatch = fontSizeExp.exec(elem.style?.fontSize ?? '');
-        if (!fontSizeMatch && elem.tagName.toLowerCase() === 'tspan' && elem.parentElement) {
-            // Try to inherit the font size of the parent text element.
-            fontSizeMatch = fontSizeExp.exec(elem.parentElement.style?.fontSize ?? '');
-        }
-        // If we still couldn't find a font size, try to use computedStyles (which can be
-        // wrong).
-        if (!fontSizeMatch && computedStyles) {
-            fontSizeMatch = fontSizeExp.exec(computedStyles.fontSize);
-        }
-        const supportedStyleAttrs = [
+        const supportedStyleAttrs = new Set([
             'fontFamily',
             'transform',
             ...supportedStrokeFillStyleAttrs,
-        ];
-        let fontSize = 12;
-        if (fontSizeMatch) {
-            supportedStyleAttrs.push('fontSize');
-            fontSize = parseFloat(fontSizeMatch[1]);
-        }
+        ]);
         const style = {
-            size: fontSize,
+            size: determineFontSize(elem, computedStyles, supportedStyleAttrs),
             fontFamily: computedStyles?.fontFamily || elem.style?.fontFamily || 'sans-serif',
             fontWeight: computedStyles?.fontWeight || elem.style?.fontWeight || undefined,
             fontStyle: computedStyles?.fontStyle || elem.style?.fontStyle || undefined,

package/dist/mjs/SVGLoader/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/SVGLoader/utils/determineFontSize.d.ts

@@ -0,0 +1,3 @@
+/** Computes the font size of a text element, based on style information. */
+declare const determineFontSize: (elem: SVGTextElement | SVGTSpanElement, computedStyles: CSSStyleDeclaration | undefined, supportedStyleAttrs: Set<string>) => number;
+export default determineFontSize;

package/dist/mjs/SVGLoader/utils/determineFontSize.mjs

@@ -0,0 +1,25 @@
+/** Computes the font size of a text element, based on style information. */
+const determineFontSize = (elem, computedStyles, 
+// output: Written to to update supported style attributes
+supportedStyleAttrs) => {
+    const fontSizeExp = /^([-0-9.e]+)px/i;
+    // In some environments, computedStyles.fontSize can be increased by the system.
+    // Thus, to prevent text from growing on load/save, prefer .style.fontSize.
+    let fontSizeMatch = fontSizeExp.exec(elem.style?.fontSize ?? '');
+    if (!fontSizeMatch && elem.tagName.toLowerCase() === 'tspan' && elem.parentElement) {
+        // Try to inherit the font size of the parent text element.
+        fontSizeMatch = fontSizeExp.exec(elem.parentElement.style?.fontSize ?? '');
+    }
+    // If we still couldn't find a font size, try to use computedStyles (which can be
+    // wrong).
+    if (!fontSizeMatch && computedStyles) {
+        fontSizeMatch = fontSizeExp.exec(computedStyles.fontSize);
+    }
+    let fontSize = 12;
+    if (fontSizeMatch) {
+        supportedStyleAttrs.add('fontSize');
+        fontSize = parseFloat(fontSizeMatch[1]);
+    }
+    return fontSize;
+};
+export default determineFontSize;

package/dist/mjs/Viewport.d.ts

@@ -55,7 +55,39 @@ export declare class Viewport {
      *
      * @see {@link getGridSize} and {@link getScaleFactorToNearestPowerOf}.
      */
-    snapToGrid(canvasPos: Point2): Vec3;
+    snapToGrid(canvasPos: Point2): {
+        readonly x: number;
+        readonly y: number;
+        readonly z: number;
+        readonly xy: {
+            x: number;
+            y: number;
+        };
+        at(idx: number): number;
+        length(): number;
+        magnitude(): number;
+        magnitudeSquared(): number;
+        squareDistanceTo(p: Vec3): number;
+        distanceTo(p: Vec3): number;
+        maximumEntryMagnitude(): number;
+        angle(): number;
+        normalized(): Vec3;
+        normalizedOrZero(): Vec3;
+        times(c: number): Vec3;
+        plus(v: Vec3): Vec3;
+        minus(v: Vec3): Vec3;
+        dot(other: Vec3): number;
+        cross(other: Vec3): Vec3;
+        scale(other: number | Vec3): Vec3;
+        orthog(): Vec3;
+        extend(distance: number, direction: Vec3): Vec3;
+        lerp(target: Vec3, fractionTo: number): Vec3;
+        zip(other: Vec3, zip: (componentInThis: number, componentInOther: number) => number): Vec3;
+        map(fn: (component: number, index: number) => number): Vec3;
+        asArray(): [number, number, number];
+        eq(other: Vec3, fuzz?: number | undefined): boolean;
+        toString(): string;
+    };
     /** Returns the size of one screen pixel in canvas units. */
     getSizeOfPixelOnCanvas(): number;
     /**

package/dist/mjs/components/TextComponent.mjs

@@ -83,7 +83,9 @@ class TextComponent extends AbstractComponent {
     }
     static applyTextStyles(ctx, style) {
         // Quote the font family if necessary.
-        const fontFamily = style.fontFamily.match(/\s/) ? style.fontFamily.replace(/["]/g, '\\"') : style.fontFamily;
+        const hasSpaces = style.fontFamily.match(/\s/);
+        const isQuoted = style.fontFamily.match(/^".*"$/);
+        const fontFamily = hasSpaces && !isQuoted ? `"${style.fontFamily.replace(/["]/g, '\\"')}"` : style.fontFamily;
         ctx.font = [
             style.fontStyle ?? '',
             style.fontWeight ?? '',

package/dist/mjs/image/EditorImage.d.ts

@@ -166,7 +166,7 @@ export default class EditorImage {
      *
      * @internal
      */
-    setDebugMode(newDebugMode: boolean): void;
+    static setDebugMode(newDebugMode: boolean): void;
     private static SetImportExportRectCommand;
 }
 /**
@@ -214,6 +214,7 @@ export declare class ImageNode {
     renderAllAsync(renderer: AbstractRenderer, preRenderComponent: PreRenderComponentCallback): Promise<boolean>;
     render(renderer: AbstractRenderer, visibleRect?: Rect2): void;
     renderDebugBoundingBoxes(renderer: AbstractRenderer, visibleRect: Rect2, depth?: number): void;
+    private checkRep;
 }
 /** An `ImageNode` that can properly handle fullscreen/data components. @internal */
 export declare class RootImageNode extends ImageNode {