js-draw 0.20.0 → 0.22.0

package/dist/cjs/src/types.d.ts

@@ -9,6 +9,8 @@ import Pointer from './Pointer';
 import Color4 from './Color4';
 import Command from './commands/Command';
 import BaseWidget from './toolbar/widgets/BaseWidget';
+export type HTMLPointerEventName = 'pointerdown' | 'pointermove' | 'pointerup' | 'pointercancel';
+export type HTMLPointerEventFilter = (eventName: HTMLPointerEventName, event: PointerEvent) => boolean;
 export interface PointerEvtListener {
     onPointerDown(event: PointerEvt): boolean;
     onPointerMove(event: PointerEvt): void;

package/dist/mjs/src/Color4.mjs

@@ -1,5 +1,5 @@
 import  Vec3  from './math/Vec3.mjs';
-export default class Color4 {
+class Color4 {
     constructor(
     /** Red component. Should be in the range [0, 1]. */
     r, 
@@ -254,4 +254,5 @@ Color4.clay = Color4.ofRGB(0.8, 0.4, 0.2);
 Color4.black = Color4.ofRGB(0, 0, 0);
 Color4.gray = Color4.ofRGB(0.5, 0.5, 0.5);
 Color4.white = Color4.ofRGB(1, 1, 1);
+export default Color4;
 export { Color4 };

package/dist/mjs/src/Editor.d.ts

@@ -1,6 +1,6 @@
 import EditorImage from './EditorImage';
 import ToolController from './tools/ToolController';
-import { InputEvtType, EditorNotifier, ImageLoader } from './types';
+import { InputEvtType, EditorNotifier, ImageLoader, HTMLPointerEventFilter } from './types';
 import Command from './commands/Command';
 import UndoRedoHistory from './UndoRedoHistory';
 import Viewport from './Viewport';
@@ -14,8 +14,6 @@ import Rect2 from './math/Rect2';
 import { EditorLocalization } from './localization';
 import IconProvider from './toolbar/IconProvider';
 import AbstractComponent from './components/AbstractComponent';
-type HTMLPointerEventType = 'pointerdown' | 'pointermove' | 'pointerup' | 'pointercancel';
-type HTMLPointerEventFilter = (eventName: HTMLPointerEventType, event: PointerEvent) => boolean;
 export interface EditorSettings {
     /** Defaults to `RenderingMode.CanvasRenderer` */
     renderingMode: RenderingMode;
@@ -191,7 +189,10 @@ export declare class Editor {
      * });
      * ```
      */
-    handlePointerEventsFrom(elem: HTMLElement, filter?: HTMLPointerEventFilter): void;
+    handlePointerEventsFrom(elem: HTMLElement, filter?: HTMLPointerEventFilter): {
+        /** Remove all event listeners registered by this function. */
+        remove: () => void;
+    };
     /** Adds event listners for keypresses to `elem` and forwards those events to the editor. */
     handleKeyEventsFrom(elem: HTMLElement): void;
     /** `apply` a command. `command` will be announced for accessibility. */

package/dist/mjs/src/Editor.mjs

@@ -455,20 +455,38 @@ export class Editor {
     handlePointerEventsFrom(elem, filter) {
         // May be required to prevent text selection on iOS/Safari:
         // See https://stackoverflow.com/a/70992717/17055750
-        elem.addEventListener('touchstart', evt => evt.preventDefault());
-        elem.addEventListener('contextmenu', evt => {
+        const touchstartListener = (evt) => evt.preventDefault();
+        const contextmenuListener = (evt) => {
             // Don't show a context menu
             evt.preventDefault();
-        });
+        };
+        const listeners = {
+            'touchstart': touchstartListener,
+            'contextmenu': contextmenuListener,
+        };
         const eventNames = ['pointerdown', 'pointermove', 'pointerup', 'pointercancel'];
         for (const eventName of eventNames) {
-            elem.addEventListener(eventName, evt => {
-                if (filter && !filter(eventName, evt)) {
+            listeners[eventName] = (evt) => {
+                // This listener will only be called in the context of PointerEvents.
+                const event = evt;
+                if (filter && !filter(eventName, event)) {
                     return true;
                 }
-                return this.handleHTMLPointerEvent(eventName, evt);
-            });
+                return this.handleHTMLPointerEvent(eventName, event);
+            };
         }
+        // Add all listeners.
+        for (const eventName in listeners) {
+            elem.addEventListener(eventName, listeners[eventName]);
+        }
+        return {
+            /** Remove all event listeners registered by this function. */
+            remove: () => {
+                for (const eventName in listeners) {
+                    elem.removeEventListener(eventName, listeners[eventName]);
+                }
+            },
+        };
     }
     /** Adds event listners for keypresses to `elem` and forwards those events to the editor. */
     handleKeyEventsFrom(elem) {

package/dist/mjs/src/EditorImage.mjs

@@ -1,3 +1,7 @@
+var __setFunctionName = (this && this.__setFunctionName) || function (f, name, prefix) {
+    if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
+    return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
+};
 var _a, _b, _c;
 import  Viewport  from './Viewport.mjs';
 import  AbstractComponent  from './components/AbstractComponent.mjs';
@@ -16,7 +20,7 @@ export var EditorImageEventType;
     EditorImageEventType[EditorImageEventType["ExportViewportChanged"] = 0] = "ExportViewportChanged";
 })(EditorImageEventType || (EditorImageEventType = {}));
 // Handles lookup/storage of elements in the image
-export default class EditorImage {
+class EditorImage {
     // @internal
     constructor() {
         this.root = new ImageNode();
@@ -194,6 +198,7 @@ EditorImage.AddElementCommand = (_b = class extends SerializableCommand {
             };
         }
     },
+    __setFunctionName(_b, "AddElementCommand"),
     (() => {
         SerializableCommand.register('add-element', (json, editor) => {
             const id = json.elemData.id;
@@ -241,6 +246,7 @@ EditorImage.SetImportExportRectCommand = (_c = class extends SerializableCommand
             };
         }
     },
+    __setFunctionName(_c, "SetImportExportRectCommand"),
     _c.commandId = 'set-import-export-rect',
     (() => {
         const commandId = _c.commandId;
@@ -261,8 +267,9 @@ EditorImage.SetImportExportRectCommand = (_c = class extends SerializableCommand
         });
     })(),
     _c);
+export default EditorImage;
 /** Part of the Editor's image. @internal */
-export class ImageNode {
+class ImageNode {
     constructor(parent = null) {
         this.parent = parent;
         this.targetChildCount = 30;
@@ -475,3 +482,4 @@ export class ImageNode {
     }
 }
 ImageNode.idCounter = 0;
+export { ImageNode };

package/dist/mjs/src/Viewport.mjs

@@ -17,7 +17,7 @@ import  { Vec2 }  from './math/Vec2.mjs';
 import  Vec3  from './math/Vec3.mjs';
 export class ViewportTransform extends Command {
 }
-export class Viewport {
+class Viewport {
     // @internal
     constructor(onTransformChangeCallback) {
         this.onTransformChangeCallback = onTransformChangeCallback;
@@ -257,4 +257,5 @@ Viewport.ViewportTransform = (_a = class extends ViewportTransform {
     },
     _inverseTransform = new WeakMap(),
     _a);
+export { Viewport };
 export default Viewport;

package/dist/mjs/src/commands/Command.mjs

@@ -1,4 +1,4 @@
-export class Command {
+class Command {
     // Called when the command is being deleted
     onDrop(_editor) { }
     static union(a, b) {
@@ -27,4 +27,5 @@ Command.empty = new class extends Command {
     apply(_editor) { }
     unapply(_editor) { }
 };
+export { Command };
 export default Command;

package/dist/mjs/src/commands/SerializableCommand.mjs

@@ -1,5 +1,5 @@
 import  Command  from './Command.mjs';
-export default class SerializableCommand extends Command {
+class SerializableCommand extends Command {
     constructor(commandTypeId) {
         super();
         this.commandTypeId = commandTypeId;
@@ -34,3 +34,4 @@ export default class SerializableCommand extends Command {
     }
 }
 SerializableCommand.deserializationCallbacks = {};
+export default SerializableCommand;

package/dist/mjs/src/components/AbstractComponent.d.ts

@@ -32,8 +32,15 @@ export default abstract class AbstractComponent {
     /** See {@link attachLoadSaveData} */
     getLoadSaveData(): LoadSaveDataTable;
     getZIndex(): number;
-    /** @returns the bounding box of this. */
+    /**
+     * @returns the bounding box of this. This can be a slight overestimate if doing so
+     * 			significantly improves performance.
+     */
     getBBox(): Rect2;
+    /**
+     * @returns the bounding box of this. Unlike `getBBox`, this should **not** be a rough estimate.
+     */
+    getExactBBox(): Rect2;
     /** Called when this component is added to the given image. */
     onAddToImage(_image: EditorImage): void;
     onRemoveFromImage(): void;
@@ -43,6 +50,11 @@ export default abstract class AbstractComponent {
     /**
      * @returns true if this component intersects `rect` -- it is entirely contained
      *  within the rectangle or one of the rectangle's edges intersects this component.
+     *
+     * The default implementation assumes that `this.getExactBBox()` returns a tight bounding box
+     * -- that any horiziontal/vertical line that intersects this' boounding box also
+     * intersects a point in this component. If this is not the case, components must override
+     * this function.
      */
     intersectsRect(rect: Rect2): boolean;
     protected abstract serializeToJSON(): any[] | Record<string, any> | number | string | null;

package/dist/mjs/src/components/AbstractComponent.mjs

@@ -1,3 +1,7 @@
+var __setFunctionName = (this && this.__setFunctionName) || function (f, name, prefix) {
+    if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
+    return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
+};
 var _a;
 import  SerializableCommand  from '../commands/SerializableCommand.mjs';
 import  EditorImage  from '../EditorImage.mjs';
@@ -6,7 +10,7 @@ import  UnresolvedSerializableCommand  from '../commands/UnresolvedCommand.mjs';
 /**
  * A base class for everything that can be added to an {@link EditorImage}.
  */
-export default class AbstractComponent {
+class AbstractComponent {
     constructor(
     // A unique identifier for the type of component
     componentKind, initialZIndex) {
@@ -55,30 +59,40 @@ export default class AbstractComponent {
     getZIndex() {
         return this.zIndex;
     }
-    /** @returns the bounding box of this. */
+    /**
+     * @returns the bounding box of this. This can be a slight overestimate if doing so
+     * 			significantly improves performance.
+     */
     getBBox() {
         return this.contentBBox;
     }
+    /**
+     * @returns the bounding box of this. Unlike `getBBox`, this should **not** be a rough estimate.
+     */
+    getExactBBox() {
+        return this.getBBox();
+    }
     /** Called when this component is added to the given image. */
     onAddToImage(_image) { }
     onRemoveFromImage() { }
     /**
      * @returns true if this component intersects `rect` -- it is entirely contained
      *  within the rectangle or one of the rectangle's edges intersects this component.
+     *
+     * The default implementation assumes that `this.getExactBBox()` returns a tight bounding box
+     * -- that any horiziontal/vertical line that intersects this' boounding box also
+     * intersects a point in this component. If this is not the case, components must override
+     * this function.
      */
     intersectsRect(rect) {
-        // If this component intersects rect,
+        // If this component intersects the given rectangle,
         // it is either contained entirely within rect or intersects one of rect's edges.
         // If contained within,
-        if (rect.containsRect(this.getBBox())) {
+        if (rect.containsRect(this.getExactBBox())) {
             return true;
         }
-        // Calculated bounding boxes can be slightly larger than their actual contents' bounding box.
-        // As such, test with more lines than just the rect's edges.
-        const testLines = [];
-        for (const subregion of rect.divideIntoGrid(2, 2)) {
-            testLines.push(...subregion.getEdges());
-        }
+        // Otherwise check if it intersects one of the rectangle's edges.
+        const testLines = rect.getEdges();
         return testLines.some(edge => this.intersects(edge));
     }
     // Returns a command that, when applied, transforms this by [affineTransfm] and
@@ -239,6 +253,7 @@ AbstractComponent.TransformElementCommand = (_a = class extends UnresolvedSerial
             };
         }
     },
+    __setFunctionName(_a, "TransformElementCommand"),
     (() => {
         SerializableCommand.register(AbstractComponent.transformElementCommandId, (json, editor) => {
             var _a, _b;
@@ -250,3 +265,4 @@ AbstractComponent.TransformElementCommand = (_a = class extends UnresolvedSerial
         });
     })(),
     _a);
+export default AbstractComponent;

package/dist/mjs/src/components/Stroke.d.ts

@@ -53,6 +53,7 @@ export default class Stroke extends AbstractComponent implements RestyleableComp
     render(canvas: AbstractRenderer, visibleRect?: Rect2): void;
     getProportionalRenderingTime(): number;
     private bboxForPart;
+    getExactBBox(): Rect2;
     protected applyTransformation(affineTransfm: Mat33): void;
     /**
      * @returns the {@link Path.union} of all paths that make up this stroke.

package/dist/mjs/src/components/Stroke.mjs

@@ -109,8 +109,11 @@ export default class Stroke extends AbstractComponent {
         }
     }
     intersects(line) {
+        var _a;
         for (const part of this.parts) {
-            if (part.path.intersection(line).length > 0) {
+            const strokeWidth = (_a = part.style.stroke) === null || _a === void 0 ? void 0 : _a.width;
+            const strokeRadius = strokeWidth ? strokeWidth / 2 : undefined;
+            if (part.path.intersection(line, strokeRadius).length > 0) {
                 return true;
             }
         }
@@ -144,6 +147,16 @@ export default class Stroke extends AbstractComponent {
         }
         return origBBox.grownBy(style.stroke.width / 2);
     }
+    getExactBBox() {
+        let bbox = null;
+        for (const { path, style } of this.parts) {
+            // Paths' default .bbox can be
+            const partBBox = this.bboxForPart(path.getExactBBox(), style);
+            bbox !== null && bbox !== void 0 ? bbox : (bbox = partBBox);
+            bbox = bbox.union(partBBox);
+        }
+        return bbox !== null && bbox !== void 0 ? bbox : Rect2.empty;
+    }
     applyTransformation(affineTransfm) {
         this.contentBBox = Rect2.empty;
         let isFirstPart = true;

package/dist/mjs/src/components/TextComponent.mjs

@@ -9,7 +9,7 @@ const componentTypeId = 'text';
 /**
  * Displays text.
  */
-export default class TextComponent extends AbstractComponent {
+class TextComponent extends AbstractComponent {
     /**
      * Creates a new text object from a list of component text or child TextComponents.
      *
@@ -271,4 +271,5 @@ export default class TextComponent extends AbstractComponent {
     }
 }
 TextComponent.textMeasuringCtx = null;
+export default TextComponent;
 AbstractComponent.registerComponent(componentTypeId, (data) => TextComponent.deserializeFromString(data));

package/dist/mjs/src/components/util/StrokeSmoother.mjs

@@ -146,7 +146,7 @@ export class StrokeSmoother {
         }
         let exitingVec = this.computeExitingVec();
         // Find the intersection between the entering vector and the exiting vector
-        const maxRelativeLength = 2.2;
+        const maxRelativeLength = 2;
         const segmentStart = this.buffer[0];
         const segmentEnd = newPoint.pos;
         const startEndDist = segmentEnd.minus(segmentStart).magnitude();
@@ -184,22 +184,20 @@ export class StrokeSmoother {
         // Should we start making a new curve? Check whether all buffer points are within
         // ±strokeWidth of the curve.
         const curveMatchesPoints = (curve) => {
-            let nonMatching = 0;
-            const maxNonMatching = 2;
-            const minFit = Math.max(Math.min(this.curveStartWidth, this.curveEndWidth) / 3, this.minFitAllowed);
+            const minFit = Math.min(Math.max(Math.min(this.curveStartWidth, this.curveEndWidth) / 4, this.minFitAllowed), this.maxFitAllowed);
+            // The sum of distances greater than minFit must not exceed this:
+            const maxNonMatchingDistSum = minFit;
+            // Sum of distances greater than minFit.
+            let nonMatchingDistSum = 0;
             for (const point of this.buffer) {
                 let dist = curve.approximateDistance(point);
-                if (dist > minFit || dist > this.maxFitAllowed) {
-                    // Avoid using the slower .distance
-                    if (nonMatching >= maxNonMatching - 1) {
-                        dist = curve.distance(point);
+                if (dist > minFit) {
+                    // Use the more accurate distance function
+                    dist = curve.distance(point);
+                    nonMatchingDistSum += Math.max(0, dist - minFit);
+                    if (nonMatchingDistSum > maxNonMatchingDistSum) {
+                        return false; // false: Curve doesn't match points well enough.
                     }
-                    if (dist > minFit || dist > this.maxFitAllowed) {
-                        nonMatching++;
-                    }
-                }
-                if (nonMatching >= maxNonMatching) {
-                    return false;
                 }
             }
             return true;

package/dist/mjs/src/localizations/de.mjs

@@ -1,4 +1,4 @@
 import  { defaultEditorLocalization }  from '../localization.mjs';
 // German localization
-const localization = Object.assign(Object.assign({}, defaultEditorLocalization), { pen: 'Stift', eraser: 'Radierer', select: 'Auswahl', handTool: 'Verschieben', zoom: 'Vergrößerung', resetView: 'Ansicht zurücksetzen', thicknessLabel: 'Dicke: ', colorLabel: 'Farbe: ', fontLabel: 'Schriftart: ', resizeImageToSelection: 'Bildgröße an Auswahl anpassen', deleteSelection: 'Auswahl löschen', duplicateSelection: 'Auswahl duplizieren', undo: 'Rückgängig', redo: 'Wiederholen', pickColorFromScreen: 'Farbe von Bildschirm auswählen', clickToPickColorAnnouncement: 'Klicke auf den Bildschirm, um eine Farbe auszuwählen', selectionToolKeyboardShortcuts: 'Auswahl-Werkzeug: Verwende die Pfeiltasten, um ausgewählte Elemente zu verschieben und ‚i‘ und ‚o‘, um ihre Größe zu ändern.', touchPanning: 'Ansicht mit Touchscreen verschieben', anyDevicePanning: 'Ansicht mit jedem Eingabegerät verschieben', selectPenType: 'Objekt-Typ: ', freehandPen: 'Freihand', arrowPen: 'Pfeil', linePen: 'Linie', outlinedRectanglePen: 'Umrissenes Rechteck', filledRectanglePen: 'Ausgefülltes Rechteck', dropdownShown: t => `Dropdown-Menü für ${t} angezeigt`, dropdownHidden: t => `Dropdown-Menü für ${t} versteckt`, zoomLevel: t => `Vergößerung: ${t}%`, colorChangedAnnouncement: t => `Farbe zu ${t} geändert`, penTool: t => `Stift ${t}`, selectionTool: 'Auswahl', eraserTool: 'Radiergummi', touchPanTool: 'Ansicht mit Touchscreen verschieben', twoFingerPanZoomTool: 'Ansicht verschieben und vergrößern', undoRedoTool: 'Rückgängig/Wiederholen', rightClickDragPanTool: 'Rechtsklick-Ziehen', pipetteTool: 'Farbe von Bildschirm auswählen', keyboardPanZoom: 'Tastaturkürzel zum Verschieben/Vergrößern der Ansicht', textTool: 'Text', enterTextToInsert: 'Einzufügender Text', toolEnabledAnnouncement: t => `${t} aktiviert`, toolDisabledAnnouncement: t => `${t} deaktiviert`, updatedViewport: 'Transformierte Ansicht', transformedElements: t => `${t} Element${1 === t ? '' : 'e'} transformiert`, resizeOutputCommand: t => `Bildgröße auf ${t.w}x${t.h} geändert`, addElementAction: t => `${t} hinzugefügt`, eraseAction: (t, e) => `${e} ${t} gelöscht`, duplicateAction: (t, e) => `${e} ${t} dupliziert`, inverseOf: t => `Umkehrung von ${t}`, elements: 'Elemente', erasedNoElements: 'Nichts entfernt', duplicatedNoElements: 'Nichts dupliziert', rotatedBy: t => `${Math.abs(t)} Grad ${t < 0 ? 'im Uhrzeigersinn' : 'gegen den Uhrzeigersinn'} gedreht`, movedLeft: 'Nacht links bewegt', movedUp: 'Nacht oben bewegt', movedDown: 'Nacht unten bewegt', movedRight: 'Nacht rechts bewegt', zoomedOut: 'Ansicht verkleinert', zoomedIn: 'Ansicht vergrößert', selectedElements: t => `${t} Element${1 === t ? '' : 'e'} ausgewählt`, stroke: 'Strich', svgObject: 'SVG-Objekt', text: t => `Text-Objekt: ${t}`, pathNodeCount: t => `Es gibt ${t} sichtbare Pfad-Objekte.`, textNodeCount: t => `Es gibt ${t} sichtbare Text-Knotenpunkte.`, textNode: t => `Text: ${t}`, rerenderAsText: 'Als Text darstellen', accessibilityInputInstructions: 'Drücke ‚t‘, um den Inhalt des Ansichtsfensters als Text zu lesen. Verwende die Pfeiltasten, um die Ansicht zu verschieben, und klicke und ziehe, um Striche zu zeichnen. Drücke ‚w‘ zum Vergrößern und ‚s‘ zum Verkleinern der Ansicht.', loading: t => `Laden ${t}%...`, doneLoading: 'Laden fertig', imageEditor: 'Bild-Editor', undoAnnouncement: t => `Rückgangig gemacht ${t}`, redoAnnouncement: t => `Wiederholt ${t}` });
+const localization = Object.assign(Object.assign({}, defaultEditorLocalization), { pen: 'Stift', eraser: 'Radierer', select: 'Auswahl', handTool: 'Verschieben', zoom: 'Vergrößerung', image: 'Bild', inputAltText: 'Alt-Text: ', chooseFile: 'Wähle Datei: ', submit: 'Absenden', cancel: 'Abbrechen', resetView: 'Ansicht zurücksetzen', thicknessLabel: 'Dicke: ', colorLabel: 'Farbe: ', fontLabel: 'Schriftart: ', textSize: 'Größe: ', resizeImageToSelection: 'Bildgröße an Auswahl anpassen', deleteSelection: 'Auswahl löschen', duplicateSelection: 'Auswahl duplizieren', undo: 'Rückgängig', redo: 'Wiederholen', pickColorFromScreen: 'Farbe von Bildschirm auswählen', clickToPickColorAnnouncement: 'Klicke auf den Bildschirm, um eine Farbe auszuwählen', selectionToolKeyboardShortcuts: 'Auswahl-Werkzeug: Verwende die Pfeiltasten, um ausgewählte Elemente zu verschieben und ‚i‘ und ‚o‘, um ihre Größe zu ändern.', touchPanning: 'Ansicht mit Touchscreen verschieben', anyDevicePanning: 'Ansicht mit jedem Eingabegerät verschieben', selectPenType: 'Objekt-Typ: ', freehandPen: 'Freihand', pressureSensitiveFreehandPen: 'Stift (druckempfindlich)', arrowPen: 'Pfeil', linePen: 'Linie', outlinedRectanglePen: 'Umrissenes Rechteck', filledRectanglePen: 'Ausgefülltes Rechteck', lockRotation: 'Sperre Rotation', paste: 'Einfügen', dropdownShown: (toolName) => `Dropdown-Menü für ${toolName} angezeigt`, dropdownHidden: (toolName) => `Dropdown-Menü für ${toolName} versteckt`, zoomLevel: (zoomPercent) => `Vergößerung: ${zoomPercent}%`, colorChangedAnnouncement: (color) => `Farbe zu ${color} geändert`, imageSize: (size, units) => `Bild-Größe: ${size} ${units}`, imageLoadError: (message) => `Fehler beim Laden des Bildes: ${message}`, errorImageHasZeroSize: 'Fehler: Bild hat Größe Null', penTool: (penNumber) => `Stift ${penNumber}`, selectionTool: 'Auswahl', eraserTool: 'Radiergummi', touchPanTool: 'Ansicht mit Touchscreen verschieben', twoFingerPanZoomTool: 'Ansicht verschieben und vergrößern', undoRedoTool: 'Rückgängig/Wiederholen', rightClickDragPanTool: 'Rechtsklick-Ziehen', pipetteTool: 'Farbe von Bildschirm auswählen', keyboardPanZoom: 'Tastaturkürzel zum Verschieben/Vergrößern der Ansicht', textTool: 'Text', enterTextToInsert: 'Einzufügender Text', changeTool: 'Wechsle Werkzeug', pasteHandler: 'Copy-Paste-Handler', findLabel: 'Finde', toNextMatch: 'Nächstes', closeFindDialog: 'Schließen', findDialogShown: 'Finde-Dialog angezeigt', findDialogHidden: 'Finde-Dialog versteckt', focusedFoundText: (matchIdx, totalMatches) => `Sieh Treffer ${matchIdx} von ${totalMatches} an`, toolEnabledAnnouncement: (toolName) => `${toolName} aktiviert`, toolDisabledAnnouncement: (toolName) => `${toolName} deaktiviert`, updatedViewport: 'Transformierte Ansicht', transformedElements: (elemCount) => `${elemCount} Element${1 === elemCount ? '' : 'e'} transformiert`, resizeOutputCommand: (newSize) => `Bildgröße auf ${newSize.w}x${newSize.h} geändert`, addElementAction: (componentDescription) => `${componentDescription} hinzugefügt`, eraseAction: (elemDescription, countErased) => `${countErased} ${elemDescription} gelöscht`, duplicateAction: (elemDescription, countErased) => `${countErased} ${elemDescription} dupliziert`, inverseOf: (actionDescription) => `${actionDescription} umgekehrt`, elements: 'Elemente', erasedNoElements: 'Nichts entfernt', duplicatedNoElements: 'Nichts dupliziert', rotatedBy: (degrees) => `${Math.abs(degrees)} Grad ${degrees < 0 ? 'im Uhrzeigersinn' : 'gegen den Uhrzeigersinn'} gedreht`, movedLeft: 'Nacht links bewegt', movedUp: 'Nacht oben bewegt', movedDown: 'Nacht unten bewegt', movedRight: 'Nacht rechts bewegt', zoomedOut: 'Ansicht verkleinert', zoomedIn: 'Ansicht vergrößert', selectedElements: (count) => `${count} Element${1 === count ? '' : 'e'} ausgewählt`, stroke: 'Strich', svgObject: 'SVG-Objekt', text: (text) => `Text-Objekt: ${text}`, pathNodeCount: (count) => `Es gibt ${count} sichtbare Pfad-Objekte.`, textNodeCount: (count) => `Es gibt ${count} sichtbare Text-Knotenpunkte.`, textNode: (content) => `Text: ${content}`, imageNodeCount: (nodeCount) => `Es gibt ${nodeCount} sichtbare Bild-Knoten.`, imageNode: label => `Bild: ${label}`, unlabeledImageNode: 'Bild ohne Label', rerenderAsText: 'Als Text darstellen', accessibilityInputInstructions: 'Drücke ‚t‘, um den Inhalt des Ansichtsfensters als Text zu lesen. Verwende die Pfeiltasten, um die Ansicht zu verschieben, und klicke und ziehe, um Striche zu zeichnen. Drücke ‚w‘ zum Vergrößern und ‚s‘ zum Verkleinern der Ansicht.', loading: percentage => `Laden ${percentage}%...`, doneLoading: 'Laden fertig', imageEditor: 'Bild-Editor', undoAnnouncement: (commandDescription) => `${commandDescription} rückgängig gemacht`, redoAnnouncement: (commandDescription) => `${commandDescription} wiederholt`, reformatSelection: 'Formatiere Auswahl', documentProperties: 'Seite', backgroundColor: 'Hintergrundfarbe: ', imageWidthOption: 'Breite: ', imageHeightOption: 'Höhe: ', useGridOption: 'Gitter: ', toggleOverflow: 'Mehr', selectAllTool: 'Alle auswählen', soundExplorer: 'Klangbasierte Bilderkundung', disableAccessibilityExploreTool: 'Deaktiviere klangbasierte Erkundung', enableAccessibilityExploreTool: 'Aktiviere klangbasierte Erkundung', copied: (count, description) => `${count} ${description} kopiert`, pasted: (count, description) => `${count} ${description} eingefügt`, unionOf: (actionDescription, actionCount) => `Vereinigung: ${actionCount} ${actionDescription}`, emptyBackground: 'Leerer Hintergrund', filledBackgroundWithColor: (color) => `Gefüllter Hintergrund (${color})`, restyledElement: (elementDescription) => `${elementDescription} umgestaltet` });
 export default localization;

package/dist/mjs/src/math/LineSegment2.d.ts

@@ -18,6 +18,8 @@ export default class LineSegment2 {
     intersection(other: LineSegment2): IntersectionResult | null;
     intersects(other: LineSegment2): boolean;
     closestPointTo(target: Point2): import("./Vec3").default;
+    /** Returns the distance from this line segment to `target`. */
+    distance(target: Point2): number;
     transformedBy(affineTransfm: Mat33): LineSegment2;
     toString(): string;
 }

package/dist/mjs/src/math/LineSegment2.mjs

@@ -116,6 +116,10 @@ export default class LineSegment2 {
             return this.p1;
         }
     }
+    /** Returns the distance from this line segment to `target`. */
+    distance(target) {
+        return this.closestPointTo(target).minus(target).magnitude();
+    }
     transformedBy(affineTransfm) {
         return new LineSegment2(affineTransfm.transformVec2(this.p1), affineTransfm.transformVec2(this.p2));
     }

package/dist/mjs/src/math/Mat33.mjs

@@ -5,7 +5,7 @@ import  Vec3  from './Vec3.mjs';
  * a two-dimensional affine transformation. (An affine transformation scales/rotates/shears
  * **and** translates while a linear transformation just scales/rotates/shears).
  */
-export default class Mat33 {
+class Mat33 {
     /**
      * Creates a matrix from inputs in the form,
      * ```
@@ -324,3 +324,4 @@ export default class Mat33 {
     }
 }
 Mat33.identity = new Mat33(1, 0, 0, 0, 1, 0, 0, 0, 1);
+export default Mat33;

package/dist/mjs/src/math/Path.d.ts

@@ -32,21 +32,42 @@ export interface MoveToPathCommand {
 }
 export type PathCommand = CubicBezierPathCommand | LinePathCommand | QuadraticBezierPathCommand | MoveToPathCommand;
 interface IntersectionResult {
-    curve: LineSegment2 | Bezier;
+    curve: LineSegment2 | Bezier | Point2;
     parameterValue: number;
     point: Point2;
 }
+type GeometryType = LineSegment2 | Bezier | Point2;
+type GeometryArrayType = Array<GeometryType>;
 export default class Path {
     readonly startPoint: Point2;
     readonly parts: PathCommand[];
+    /**
+     * A rough estimate of the bounding box of the path.
+     * A slight overestimate.
+     * See {@link getExactBBox}
+     */
     readonly bbox: Rect2;
     constructor(startPoint: Point2, parts: PathCommand[]);
+    getExactBBox(): Rect2;
     private cachedGeometry;
-    get geometry(): Array<LineSegment2 | Bezier>;
+    get geometry(): GeometryArrayType;
     private cachedPolylineApproximation;
     polylineApproximation(): LineSegment2[];
     static computeBBoxForSegment(startPoint: Point2, part: PathCommand): Rect2;
-    intersection(line: LineSegment2): IntersectionResult[];
+    /**
+     * Let `S` be a closed path a distance `strokeRadius` from this path.
+     *
+     * @returns Approximate intersections of `line` with `S` using ray marching, starting from
+     * 	        both end points of `line` and each point in `additionalRaymarchStartPoints`.
+     */
+    private raymarchIntersectionWith;
+    /**
+     * Returns a list of intersections with this path. If `strokeRadius` is given,
+     * intersections are approximated with the surface `strokeRadius` away from this.
+     *
+     * If `strokeRadius > 0`, the resultant `parameterValue` has no defined value.
+     */
+    intersection(line: LineSegment2, strokeRadius?: number): IntersectionResult[];
     private static mapPathCommand;
     mapPoints(mapping: (point: Point2) => Point2): Path;
     transformedBy(affineTransfm: Mat33): Path;