js-draw 1.16.0 → 1.17.0

package/dist/cjs/Editor.js

@@ -42,7 +42,6 @@ const getLocalizationTable_1 = __importDefault(require("./localizations/getLocal
 const IconProvider_1 = __importDefault(require("./toolbar/IconProvider"));
 const CanvasRenderer_1 = __importDefault(require("./rendering/renderers/CanvasRenderer"));
 const untilNextAnimationFrame_1 = __importDefault(require("./util/untilNextAnimationFrame"));
-const fileToBase64Url_1 = __importDefault(require("./util/fileToBase64Url"));
 const uniteCommands_1 = __importDefault(require("./commands/uniteCommands"));
 const SelectionTool_1 = __importDefault(require("./tools/SelectionTool/SelectionTool"));
 const Erase_1 = __importDefault(require("./commands/Erase"));
@@ -58,6 +57,7 @@ const editorImageToSVG_1 = require("./image/export/editorImageToSVG");
 const ReactiveValue_1 = require("./util/ReactiveValue");
 const listenForKeyboardEventsFrom_1 = __importDefault(require("./util/listenForKeyboardEventsFrom"));
 const mitLicenseAttribution_1 = __importDefault(require("./util/mitLicenseAttribution"));
+const ClipboardHandler_1 = __importDefault(require("./util/ClipboardHandler"));
 /**
  * The main entrypoint for the full editor.
  *
@@ -138,6 +138,7 @@ class Editor {
             iconProvider: settings.iconProvider ?? new IconProvider_1.default(),
             notices: [],
             appInfo: settings.appInfo ? { ...settings.appInfo } : null,
+            pens: { additionalPenTypes: settings.pens?.additionalPenTypes ?? [], },
         };
         // Validate settings
         if (this.settings.minZoom > this.settings.maxZoom) {
@@ -218,6 +219,16 @@ class Editor {
             }
         });
     }
+    /**
+     * @returns a shallow copy of the current settings of the editor.
+     *
+     * Do not modify.
+     */
+    getCurrentSettings() {
+        return {
+            ...this.settings,
+        };
+    }
     /**
      * @returns a reference to the editor's container.
      *
@@ -267,6 +278,24 @@ class Editor {
         this.handlePointerEventsFrom(this.renderingRegion);
         this.handleKeyEventsFrom(this.renderingRegion);
         this.handlePointerEventsFrom(this.accessibilityAnnounceArea);
+        // Prevent selected text from control areas from being dragged.
+        // See https://github.com/personalizedrefrigerator/joplin-plugin-freehand-drawing/issues/8
+        const preventSelectionOf = [
+            this.renderingRegion,
+            this.accessibilityAnnounceArea,
+            this.accessibilityControlArea,
+            this.loadingWarning,
+        ];
+        for (const element of preventSelectionOf) {
+            element.addEventListener('drag', event => {
+                event.preventDefault();
+                return false;
+            });
+            element.addEventListener('dragstart', event => {
+                event.preventDefault();
+                return false;
+            });
+        }
         this.container.addEventListener('wheel', evt => {
             this.handleHTMLWheelEvent(evt);
         });
@@ -286,19 +315,12 @@ class Editor {
         this.accessibilityControlArea.addEventListener('input', () => {
             this.accessibilityControlArea.value = '';
         });
-        document.addEventListener('copy', evt => {
+        const copyHandler = new ClipboardHandler_1.default(this);
+        document.addEventListener('copy', async (evt) => {
             if (!this.isEventSink(document.querySelector(':focus'))) {
                 return;
             }
-            const clipboardData = evt.clipboardData;
-            if (this.toolController.dispatchInputEvent({
-                kind: inputEvents_1.InputEvtType.CopyEvent,
-                setData: (mime, data) => {
-                    clipboardData?.setData(mime, data);
-                },
-            })) {
-                evt.preventDefault();
-            }
+            copyHandler.copy(evt);
         });
         document.addEventListener('paste', evt => {
             this.handlePaste(evt);
@@ -366,11 +388,21 @@ class Editor {
      * (e.g. with synthetic events). @internal
      */
     setPointerCapture(target, pointerId) {
-        target.setPointerCapture(pointerId);
+        try {
+            target.setPointerCapture(pointerId);
+        }
+        catch (error) {
+            console.warn('Failed to setPointerCapture', error);
+        }
     }
     /** Can be overridden in a testing environment to handle synthetic events. @internal */
     releasePointerCapture(target, pointerId) {
-        target.releasePointerCapture(pointerId);
+        try {
+            target.releasePointerCapture(pointerId);
+        }
+        catch (error) {
+            console.warn('Failed to releasePointerCapture', error);
+        }
     }
     /**
      * Dispatches a `PointerEvent` to the editor. The target element for `evt` must have the same top left
@@ -396,7 +428,7 @@ class Editor {
             if (pointer.down) {
                 const prevData = this.pointers[pointer.id];
                 if (prevData) {
-                    const distanceMoved = pointer.screenPos.minus(prevData.screenPos).magnitude();
+                    const distanceMoved = pointer.screenPos.distanceTo(prevData.screenPos);
                     // If the pointer moved less than two pixels, don't send a new event.
                     if (distanceMoved < 2) {
                         return false;
@@ -444,71 +476,18 @@ class Editor {
         }
         return false;
     }
+    /** @internal */
+    async handleDrop(evt) {
+        evt.preventDefault();
+        this.handlePaste(evt);
+    }
+    /** @internal */
     async handlePaste(evt) {
         const target = document.querySelector(':focus') ?? evt.target;
         if (!this.isEventSink(target)) {
             return;
         }
-        const clipboardData = evt.dataTransfer ?? evt.clipboardData;
-        if (!clipboardData) {
-            return;
-        }
-        // Handle SVG files (prefer to PNG/JPEG)
-        for (const file of clipboardData.files) {
-            if (file.type.toLowerCase() === 'image/svg+xml') {
-                const text = await file.text();
-                if (this.toolController.dispatchInputEvent({
-                    kind: inputEvents_1.InputEvtType.PasteEvent,
-                    mime: file.type,
-                    data: text,
-                })) {
-                    evt.preventDefault();
-                    return;
-                }
-            }
-        }
-        // Handle image files.
-        for (const file of clipboardData.files) {
-            const fileType = file.type.toLowerCase();
-            if (fileType === 'image/png' || fileType === 'image/jpg') {
-                this.showLoadingWarning(0);
-                const onprogress = (evt) => {
-                    this.showLoadingWarning(evt.loaded / evt.total);
-                };
-                try {
-                    const data = await (0, fileToBase64Url_1.default)(file, { onprogress });
-                    if (data && this.toolController.dispatchInputEvent({
-                        kind: inputEvents_1.InputEvtType.PasteEvent,
-                        mime: fileType,
-                        data: data,
-                    })) {
-                        evt.preventDefault();
-                        this.hideLoadingWarning();
-                        return;
-                    }
-                }
-                catch (e) {
-                    console.error('Error reading image:', e);
-                }
-                this.hideLoadingWarning();
-            }
-        }
-        // Supported MIMEs for text data, in order of preference
-        const supportedMIMEs = [
-            'image/svg+xml',
-            'text/plain',
-        ];
-        for (const mime of supportedMIMEs) {
-            const data = clipboardData.getData(mime);
-            if (data && this.toolController.dispatchInputEvent({
-                kind: inputEvents_1.InputEvtType.PasteEvent,
-                mime,
-                data,
-            })) {
-                evt.preventDefault();
-                return;
-            }
-        }
+        return await new ClipboardHandler_1.default(this).paste(evt);
     }
     /**
      * Forward pointer events from `elem` to this editor. Such that right-click/right-click drag
@@ -619,7 +598,7 @@ class Editor {
                 const eventBuffer = gestureData[pointerId].eventBuffer;
                 // Skip if the pointer hasn't moved enough to not be a "click".
                 const strokeStartThreshold = 10;
-                const isWithinClickThreshold = gestureStartPos && currentPos.minus(gestureStartPos).magnitude() < strokeStartThreshold;
+                const isWithinClickThreshold = gestureStartPos && currentPos.distanceTo(gestureStartPos) < strokeStartThreshold;
                 if (isWithinClickThreshold && !gestureData[pointerId].hasMovedSignificantly) {
                     eventBuffer.push([eventName, event]);
                     sendToEditor = false;
@@ -706,8 +685,7 @@ class Editor {
             evt.preventDefault();
         };
         elem.ondrop = evt => {
-            evt.preventDefault();
-            this.handlePaste(evt);
+            this.handleDrop(evt);
         };
         this.eventListenerTargets.push(elem);
     }
@@ -734,7 +712,8 @@ class Editor {
     /** `apply` a command. `command` will be announced for accessibility. */
     dispatch(command, addToHistory = true) {
         const dispatchResult = this.dispatchNoAnnounce(command, addToHistory);
-        this.announceForAccessibility(command.description(this, this.localization));
+        const commandDescription = command.description(this, this.localization);
+        this.announceForAccessibility(commandDescription);
         return dispatchResult;
     }
     /**
@@ -948,8 +927,11 @@ class Editor {
      * This is a convenience method that creates **and applies** a single command.
      *
      * If `selectComponents` is true (the default), the components are selected.
+     *
+     * `actionDescription`, if given, should be a screenreader-friendly description of the
+     * reason components were added (e.g. "pasted").
      */
-    async addAndCenterComponents(components, selectComponents = true) {
+    async addAndCenterComponents(components, selectComponents = true, actionDescription) {
         let bbox = null;
         for (const component of components) {
             if (bbox) {
@@ -980,7 +962,7 @@ class Editor {
             commands.push(component.transformBy(transfm));
         }
         const applyChunkSize = 100;
-        await this.dispatch((0, uniteCommands_1.default)(commands, applyChunkSize), true);
+        await this.dispatch((0, uniteCommands_1.default)(commands, { applyChunkSize, description: actionDescription }), true);
         if (selectComponents) {
             for (const selectionTool of this.toolController.getMatchingTools(SelectionTool_1.default)) {
                 selectionTool.setEnabled(true);
@@ -1000,17 +982,7 @@ class Editor {
      * [[include:doc-pages/inline-examples/adding-an-image-and-data-urls.md]]
      */
     toDataURL(format = 'image/png', outputSize) {
-        const canvas = document.createElement('canvas');
-        const importExportViewport = this.image.getImportExportViewport();
-        const exportRectSize = importExportViewport.getScreenRectSize();
-        const resolution = outputSize ?? exportRectSize;
-        canvas.width = resolution.x;
-        canvas.height = resolution.y;
-        const ctx = canvas.getContext('2d');
-        // Scale to ensure that the entire output is visible.
-        const scaleFactor = Math.min(resolution.x / exportRectSize.x, resolution.y / exportRectSize.y);
-        ctx.scale(scaleFactor, scaleFactor);
-        const renderer = new CanvasRenderer_1.default(ctx, importExportViewport);
+        const { element: canvas, renderer } = CanvasRenderer_1.default.fromViewport(this.image.getImportExportViewport(), { canvasSize: outputSize });
         this.image.renderAll(renderer);
         const dataURL = canvas.toDataURL(format);
         return dataURL;
@@ -1103,8 +1075,59 @@ class Editor {
         }
         return background;
     }
+    /**
+     * This is a convenience method for adding or updating the {@link BackgroundComponent}
+     * and {@link EditorImage.setAutoresizeEnabled} for the current image.
+     *
+     * If there are multiple {@link BackgroundComponent}s in the image, this only modifies
+     * the topmost such element.
+     *
+     * **Example**:
+     * ```ts,runnable
+     * import { Editor, Color4, BackgroundComponentBackgroundType } from 'js-draw';
+     * const editor = new Editor(document.body);
+     * editor.dispatch(editor.setBackgroundStyle({
+     *     color: Color4.orange,
+     *     type: BackgroundComponentBackgroundType.Grid,
+     *     autoresize: true,
+     * }));
+     * ```
+     *
+     * To change the background size, see {@link EditorImage.setImportExportRect}.
+     */
+    setBackgroundStyle(style) {
+        const originalBackground = this.getTopmostBackgroundComponent();
+        const commands = [];
+        if (originalBackground) {
+            commands.push(new Erase_1.default([originalBackground]));
+        }
+        const originalType = originalBackground?.getBackgroundType?.() ?? BackgroundComponent_1.BackgroundType.None;
+        const originalColor = originalBackground?.getStyle?.().color ?? math_1.Color4.transparent;
+        const originalFillsScreen = this.image.getAutoresizeEnabled();
+        const defaultType = (style.color && originalType === BackgroundComponent_1.BackgroundType.None ? BackgroundComponent_1.BackgroundType.SolidColor : originalType);
+        const backgroundType = style.type ?? defaultType;
+        const backgroundColor = style.color ?? originalColor;
+        const fillsScreen = style.autoresize ?? originalFillsScreen;
+        if (backgroundType !== BackgroundComponent_1.BackgroundType.None) {
+            const newBackground = new BackgroundComponent_1.default(backgroundType, backgroundColor);
+            commands.push(EditorImage_1.default.addElement(newBackground));
+        }
+        if (fillsScreen !== originalFillsScreen) {
+            commands.push(this.image.setAutoresizeEnabled(fillsScreen));
+            // Avoid 0x0 backgrounds
+            if (!fillsScreen && this.image.getImportExportRect().maxDimension === 0) {
+                commands.push(this.image.setImportExportRect(this.image.getImportExportRect().resizedTo(math_1.Vec2.of(500, 500))));
+            }
+        }
+        return (0, uniteCommands_1.default)(commands);
+    }
     /**
      * Set the background color of the image.
+     *
+     * This is a convenience method for adding or updating the {@link BackgroundComponent}
+     * for the current image.
+     *
+     * @see {@link setBackgroundStyle}
      */
     setBackgroundColor(color) {
         let background = this.getTopmostBackgroundComponent();

package/dist/cjs/Pointer.d.ts

@@ -35,5 +35,6 @@ export default class Pointer {
      */
     withCanvasPosition(canvasPos: Point2, viewport: Viewport): Pointer;
     static ofEvent(evt: PointerEvent, isDown: boolean, viewport: Viewport, relativeTo?: HTMLElement): Pointer;
-    static ofCanvasPoint(canvasPos: Point2, isDown: boolean, viewport: Viewport, id?: number, device?: PointerDevice, isPrimary?: boolean, pressure?: number | null): Pointer;
+    static ofCanvasPoint(canvasPos: Point2, isDown: boolean, viewport: Viewport, id?: number, device?: PointerDevice, isPrimary?: boolean, pressure?: number | null, timeStamp?: number | null): Pointer;
+    static ofScreenPoint(screenPos: Point2, isDown: boolean, viewport: Viewport, id?: number, device?: PointerDevice, isPrimary?: boolean, pressure?: number | null, timeStamp?: number | null): Pointer;
 }

package/dist/cjs/Pointer.js

@@ -113,9 +113,16 @@ class Pointer {
     }
     // Create a new Pointer from a point on the canvas.
     // Intended for unit tests.
-    static ofCanvasPoint(canvasPos, isDown, viewport, id = 0, device = PointerDevice.Pen, isPrimary = true, pressure = null) {
+    static ofCanvasPoint(canvasPos, isDown, viewport, id = 0, device = PointerDevice.Pen, isPrimary = true, pressure = null, timeStamp = null) {
         const screenPos = viewport.canvasToScreen(canvasPos);
-        const timeStamp = performance.now();
+        timeStamp ??= performance.now();
+        return new Pointer(screenPos, canvasPos, pressure, isPrimary, isDown, device, id, timeStamp);
+    }
+    // Create a new Pointer from a point on the screen.
+    // Intended for unit tests.
+    static ofScreenPoint(screenPos, isDown, viewport, id = 0, device = PointerDevice.Pen, isPrimary = true, pressure = null, timeStamp = null) {
+        const canvasPos = viewport.screenToCanvas(screenPos);
+        timeStamp ??= performance.now();
         return new Pointer(screenPos, canvasPos, pressure, isPrimary, isDown, device, id, timeStamp);
     }
 }

package/dist/cjs/commands/localization.d.ts

@@ -20,6 +20,7 @@ export interface CommandLocalization {
     duplicateAction: (elemDescription: string, count: number) => string;
     inverseOf: (actionDescription: string) => string;
     unionOf: (actionDescription: string, actionCount: number) => string;
+    andNMoreCommands: (count: number) => string;
     selectedElements: (count: number) => string;
 }
 export declare const defaultCommandLocalization: CommandLocalization;

package/dist/cjs/commands/localization.js

@@ -22,5 +22,6 @@ exports.defaultCommandLocalization = {
     movedRight: 'Moved right',
     zoomedOut: 'Zoomed out',
     zoomedIn: 'Zoomed in',
+    andNMoreCommands: (count) => `And ${count} more commands.`,
     selectedElements: (count) => `Selected ${count} element${count === 1 ? '' : 's'}`,
 };

package/dist/cjs/commands/uniteCommands.d.ts

@@ -1,5 +1,9 @@
 import Command from './Command';
 import SerializableCommand from './SerializableCommand';
+export interface UniteCommandsOptions {
+    applyChunkSize?: number;
+    description?: string;
+}
 /**
  * Creates a single command from `commands`. This is useful when undoing should undo *all* commands
  * in `commands` at once, rather than one at a time.
@@ -36,5 +40,5 @@ import SerializableCommand from './SerializableCommand';
  * // applying them shouldn't be done all at once (which would block the UI).
  * ```
  */
-declare const uniteCommands: <T extends Command>(commands: T[], applyChunkSize?: number) => T extends SerializableCommand ? SerializableCommand : Command;
+declare const uniteCommands: <T extends Command>(commands: T[], options?: UniteCommandsOptions | number) => T extends SerializableCommand ? SerializableCommand : Command;
 export default uniteCommands;

package/dist/cjs/commands/uniteCommands.js

@@ -7,10 +7,11 @@ const waitForAll_1 = __importDefault(require("../util/waitForAll"));
 const Command_1 = __importDefault(require("./Command"));
 const SerializableCommand_1 = __importDefault(require("./SerializableCommand"));
 class NonSerializableUnion extends Command_1.default {
-    constructor(commands, applyChunkSize) {
+    constructor(commands, applyChunkSize, descriptionOverride) {
         super();
         this.commands = commands;
         this.applyChunkSize = applyChunkSize;
+        this.descriptionOverride = descriptionOverride;
     }
     apply(editor) {
         if (this.applyChunkSize === undefined) {
@@ -36,9 +37,13 @@ class NonSerializableUnion extends Command_1.default {
         this.commands.forEach(command => command.onDrop(editor));
     }
     description(editor, localizationTable) {
+        if (this.descriptionOverride) {
+            return this.descriptionOverride;
+        }
         const descriptions = [];
         let lastDescription = null;
         let duplicateDescriptionCount = 0;
+        let handledCommandCount = 0;
         for (const part of this.commands) {
             const description = part.description(editor, localizationTable);
             if (description !== lastDescription && lastDescription !== null) {
@@ -47,7 +52,13 @@ class NonSerializableUnion extends Command_1.default {
                 duplicateDescriptionCount = 0;
             }
             duplicateDescriptionCount++;
+            handledCommandCount++;
             lastDescription ??= description;
+            // Long descriptions aren't very useful to the user.
+            const maxDescriptionLength = 12;
+            if (descriptions.length > maxDescriptionLength) {
+                break;
+            }
         }
         if (duplicateDescriptionCount > 1) {
             descriptions.push(localizationTable.unionOf(lastDescription, duplicateDescriptionCount));
@@ -55,15 +66,19 @@ class NonSerializableUnion extends Command_1.default {
         else if (duplicateDescriptionCount === 1) {
             descriptions.push(lastDescription);
         }
+        if (handledCommandCount < this.commands.length) {
+            descriptions.push(localizationTable.andNMoreCommands(this.commands.length - handledCommandCount));
+        }
         return descriptions.join(', ');
     }
 }
 class SerializableUnion extends SerializableCommand_1.default {
-    constructor(commands, applyChunkSize) {
+    constructor(commands, applyChunkSize, descriptionOverride) {
         super('union');
         this.commands = commands;
         this.applyChunkSize = applyChunkSize;
-        this.nonserializableCommand = new NonSerializableUnion(commands, applyChunkSize);
+        this.descriptionOverride = descriptionOverride;
+        this.nonserializableCommand = new NonSerializableUnion(commands, applyChunkSize, descriptionOverride);
     }
     serializeToJSON() {
         if (this.serializedData) {
@@ -72,6 +87,7 @@ class SerializableUnion extends SerializableCommand_1.default {
         return {
             applyChunkSize: this.applyChunkSize,
             data: this.commands.map(command => command.serialize()),
+            description: this.descriptionOverride,
         };
     }
     apply(editor) {
@@ -125,7 +141,7 @@ class SerializableUnion extends SerializableCommand_1.default {
  * // applying them shouldn't be done all at once (which would block the UI).
  * ```
  */
-const uniteCommands = (commands, applyChunkSize) => {
+const uniteCommands = (commands, options) => {
     let allSerializable = true;
     for (const command of commands) {
         if (!(command instanceof SerializableCommand_1.default)) {
@@ -133,12 +149,21 @@ const uniteCommands = (commands, applyChunkSize) => {
             break;
         }
     }
+    let applyChunkSize;
+    let description;
+    if (typeof options === 'number') {
+        applyChunkSize = options;
+    }
+    else {
+        applyChunkSize = options?.applyChunkSize;
+        description = options?.description;
+    }
     if (!allSerializable) {
-        return new NonSerializableUnion(commands, applyChunkSize);
+        return new NonSerializableUnion(commands, applyChunkSize, description);
     }
     else {
         const castedCommands = commands;
-        return new SerializableUnion(castedCommands, applyChunkSize);
+        return new SerializableUnion(castedCommands, applyChunkSize, description);
     }
 };
 SerializableCommand_1.default.register('union', (data, editor) => {
@@ -149,10 +174,11 @@ SerializableCommand_1.default.register('union', (data, editor) => {
     if (typeof applyChunkSize !== 'number' && applyChunkSize !== undefined) {
         throw new Error('serialized applyChunkSize is neither undefined nor a number.');
     }
+    const description = typeof data.description === 'string' ? data.description : undefined;
     const commands = [];
     for (const part of data.data) {
         commands.push(SerializableCommand_1.default.deserialize(part, editor));
     }
-    return uniteCommands(commands, applyChunkSize);
+    return uniteCommands(commands, { applyChunkSize, description });
 });
 exports.default = uniteCommands;

package/dist/cjs/components/TextComponent.d.ts

@@ -19,6 +19,41 @@ export declare enum TextTransformMode {
 type TextElement = TextComponent | string;
 /**
  * Displays text.
+ *
+ * A `TextComponent` is a collection of `TextElement`s (`string`s or {@link TextComponent}s).
+ *
+ * **Example**:
+ *
+ * ```ts,runnable
+ * import { Editor, TextComponent, Mat33, Vec2, Color4, TextRenderingStyle } from 'js-draw';
+ * const editor = new Editor(document.body);
+ * editor.dispatch(editor.setBackgroundStyle({ color: Color4.black, autoresize: true ));
+ * ---visible---
+ * /// Adding a simple TextComponent
+ * ///------------------------------
+ *
+ * const positioning1 = Mat33.translation(Vec2.of(10, 10));
+ * const style: TextRenderingStyle = {
+ *     fontFamily: 'sans', size: 12, renderingStyle: { fill: Color4.green },
+ * };
+ *
+ * editor.dispatch(
+ *     editor.image.addElement(new TextComponent(['Hello, world'], positioning1, style)),
+ * );
+ *
+ *
+ * /// Adding nested TextComponents
+ * ///-----------------------------
+ *
+ * // Add another TextComponent that contains text and a TextComponent. Observe that '[Test]'
+ * // is placed directly after 'Test'.
+ * const positioning2 = Mat33.translation(Vec2.of(10, 50));
+ * editor.dispatch(
+ *     editor.image.addElement(
+ *         new TextComponent([ new TextComponent(['Test'], positioning1, style), '[Test]' ], positioning2, style)
+ *     ),
+ * );
+ * ```
  */
 export default class TextComponent extends AbstractComponent implements RestyleableComponent {
     protected readonly textObjects: Array<TextElement>;
@@ -32,7 +67,7 @@ export default class TextComponent extends AbstractComponent implements Restylea
      *
      * @see {@link fromLines}
      */
-    constructor(textObjects: Array<TextElement>, transform: Mat33, style: TextRenderingStyle, transformMode?: TextTransformMode);
+    constructor(textObjects: Array<TextElement>, transform: Mat33, style?: TextRenderingStyle, transformMode?: TextTransformMode);
     static applyTextStyles(ctx: CanvasRenderingContext2D, style: TextRenderingStyle): void;
     private static textMeasuringCtx;
     private static estimateTextDimens;

package/dist/cjs/components/TextComponent.js

@@ -20,8 +20,46 @@ var TextTransformMode;
     /**Relatively positioned in the Y direction, absolutely positioned in the X direction. */
     TextTransformMode[TextTransformMode["RELATIVE_Y_ABSOLUTE_X"] = 3] = "RELATIVE_Y_ABSOLUTE_X";
 })(TextTransformMode || (exports.TextTransformMode = TextTransformMode = {}));
+const defaultTextStyle = {
+    fontFamily: 'sans', size: 12, renderingStyle: { fill: math_1.Color4.purple },
+};
 /**
  * Displays text.
+ *
+ * A `TextComponent` is a collection of `TextElement`s (`string`s or {@link TextComponent}s).
+ *
+ * **Example**:
+ *
+ * ```ts,runnable
+ * import { Editor, TextComponent, Mat33, Vec2, Color4, TextRenderingStyle } from 'js-draw';
+ * const editor = new Editor(document.body);
+ * editor.dispatch(editor.setBackgroundStyle({ color: Color4.black, autoresize: true ));
+ * ---visible---
+ * /// Adding a simple TextComponent
+ * ///------------------------------
+ *
+ * const positioning1 = Mat33.translation(Vec2.of(10, 10));
+ * const style: TextRenderingStyle = {
+ *     fontFamily: 'sans', size: 12, renderingStyle: { fill: Color4.green },
+ * };
+ *
+ * editor.dispatch(
+ *     editor.image.addElement(new TextComponent(['Hello, world'], positioning1, style)),
+ * );
+ *
+ *
+ * /// Adding nested TextComponents
+ * ///-----------------------------
+ *
+ * // Add another TextComponent that contains text and a TextComponent. Observe that '[Test]'
+ * // is placed directly after 'Test'.
+ * const positioning2 = Mat33.translation(Vec2.of(10, 50));
+ * editor.dispatch(
+ *     editor.image.addElement(
+ *         new TextComponent([ new TextComponent(['Test'], positioning1, style), '[Test]' ], positioning2, style)
+ *     ),
+ * );
+ * ```
  */
 class TextComponent extends AbstractComponent_1.default {
     /**
@@ -31,7 +69,7 @@ class TextComponent extends AbstractComponent_1.default {
      */
     constructor(textObjects, 
     // Transformation relative to this component's parent element.
-    transform, style, 
+    transform, style = defaultTextStyle, 
     // @internal
     transformMode = TextTransformMode.ABSOLUTE_XY) {
         super(componentTypeId);

package/dist/cjs/components/builders/ArrowBuilder.js

@@ -27,7 +27,7 @@ class ArrowBuilder {
         const lineStartPoint = this.startPoint.pos;
         const endPoint = this.endPoint.pos;
         const toEnd = endPoint.minus(lineStartPoint).normalized();
-        const arrowLength = endPoint.minus(lineStartPoint).length();
+        const arrowLength = endPoint.distanceTo(lineStartPoint);
         // Ensure that the arrow tip is smaller than the arrow.
         const arrowTipSize = Math.min(this.getLineWidth(), arrowLength / 2);
         const startSize = this.startPoint.width / 2;

package/dist/cjs/components/builders/PolylineBuilder.d.ts

@@ -0,0 +1,35 @@
+import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
+import RenderablePathSpec from '../../rendering/RenderablePathSpec';
+import { Rect2 } from '@js-draw/math';
+import Stroke from '../Stroke';
+import Viewport from '../../Viewport';
+import { StrokeDataPoint } from '../../types';
+import { ComponentBuilder, ComponentBuilderFactory } from './types';
+import RenderingStyle from '../../rendering/RenderingStyle';
+/**
+ * Creates strokes from line segments rather than Bézier curves.
+ *
+ * @beta Output behavior may change significantly between versions. For now, intended for debugging.
+ */
+export declare const makePolylineBuilder: ComponentBuilderFactory;
+export default class PolylineBuilder implements ComponentBuilder {
+    private minFitAllowed;
+    private viewport;
+    private parts;
+    private bbox;
+    private averageWidth;
+    private widthAverageNumSamples;
+    private lastPoint;
+    private startPoint;
+    constructor(startPoint: StrokeDataPoint, minFitAllowed: number, viewport: Viewport);
+    getBBox(): Rect2;
+    protected getRenderingStyle(): RenderingStyle;
+    protected previewCurrentPath(): RenderablePathSpec;
+    protected previewFullPath(): RenderablePathSpec[];
+    preview(renderer: AbstractRenderer): void;
+    build(): Stroke;
+    private getMinFit;
+    private roundPoint;
+    private roundDistance;
+    addPoint(newPoint: StrokeDataPoint): void;
+}