js-draw 0.18.2 → 0.20.0

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

@@ -3,12 +3,43 @@ import  Rect2  from '../math/Rect2.mjs';
 import  { styleFromJSON, styleToJSON }  from '../rendering/RenderingStyle.mjs';
 import  AbstractComponent  from './AbstractComponent.mjs';
 import  { createRestyleComponentCommand }  from './RestylableComponent.mjs';
+/**
+ * Represents an {@link AbstractComponent} made up of one or more {@link Path}s.
+ *
+ * @example
+ * For some {@link Editor} editor and `Stroke` stroke,
+ *
+ * **Restyling**:
+ * ```ts
+ * editor.dispatch(stroke.updateStyle({ color: Color4.red }));
+ * ```
+ *
+ * **Transforming**:
+ * ```ts
+ * editor.dispatch(stroke.transformBy(Mat33.translation(Vec2.of(10, 0))));
+ * ```
+ */
 export default class Stroke extends AbstractComponent {
-    // Creates a `Stroke` from the given `parts`. All parts should have the
-    // same color.
+    /**
+     * Creates a `Stroke` from the given `parts`. All parts should have the
+     * same color.
+     *
+     * @example
+     * ```ts
+     * // A path that starts at (1,1), moves to the right by (2, 0),
+     * // then moves down and right by (3, 3)
+     * const path = Path.fromString('m1,1 2,0 3,3');
+     *
+     * const stroke = new Stroke([
+     *     // Fill with red
+     *     path.toRenderable({ fill: Color4.red })
+     * ]);
+     * ```
+     */
     constructor(parts) {
         var _a;
         super('stroke');
+        // @internal
         // eslint-disable-next-line @typescript-eslint/prefer-as-const
         this.isRestylableComponent = true;
         this.approximateRenderingTime = 0;
@@ -94,7 +125,7 @@ export default class Stroke extends AbstractComponent {
                 if (!bbox.intersects(visibleRect)) {
                     continue;
                 }
-                const muchBiggerThanVisible = bbox.size.x > visibleRect.size.x * 2 || bbox.size.y > visibleRect.size.y * 2;
+                const muchBiggerThanVisible = bbox.size.x > visibleRect.size.x * 3 || bbox.size.y > visibleRect.size.y * 3;
                 if (muchBiggerThanVisible && !part.path.roughlyIntersects(visibleRect, (_b = (_a = part.style.stroke) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0)) {
                     continue;
                 }
@@ -141,6 +172,9 @@ export default class Stroke extends AbstractComponent {
             };
         });
     }
+    /**
+     * @returns the {@link Path.union} of all paths that make up this stroke.
+     */
     getPath() {
         let result = null;
         for (const part of this.parts) {

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

@@ -4,18 +4,26 @@ import Mat33 from '../math/Mat33';
 import Rect2 from '../math/Rect2';
 import Editor from '../Editor';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
-import { TextStyle } from '../rendering/TextRenderingStyle';
+import { TextRenderingStyle } from '../rendering/TextRenderingStyle';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
 import RestyleableComponent, { ComponentStyle } from './RestylableComponent';
+/**
+ * Displays text.
+ */
 export default class TextComponent extends AbstractComponent implements RestyleableComponent {
     protected readonly textObjects: Array<string | TextComponent>;
     private transform;
     private style;
     protected contentBBox: Rect2;
     readonly isRestylableComponent: true;
-    constructor(textObjects: Array<string | TextComponent>, transform: Mat33, style: TextStyle);
-    static applyTextStyles(ctx: CanvasRenderingContext2D, style: TextStyle): void;
+    /**
+     * Creates a new text object from a list of component text or child TextComponents.
+     *
+     * @see {@link fromLines}
+     */
+    constructor(textObjects: Array<string | TextComponent>, transform: Mat33, style: TextRenderingStyle);
+    static applyTextStyles(ctx: CanvasRenderingContext2D, style: TextRenderingStyle): void;
     private static textMeasuringCtx;
     private static estimateTextDimens;
     private static getTextDimens;
@@ -28,19 +36,7 @@ export default class TextComponent extends AbstractComponent implements Restylea
     getStyle(): ComponentStyle;
     updateStyle(style: ComponentStyle): SerializableCommand;
     forceStyle(style: ComponentStyle, editor: Editor | null): void;
-    getTextStyle(): {
-        renderingStyle: {
-            fill: import("../Color4").default;
-            stroke: {
-                color: import("../Color4").default;
-                width: number;
-            } | undefined;
-        };
-        size: number;
-        fontFamily: string;
-        fontWeight?: string | undefined;
-        fontVariant?: string | undefined;
-    };
+    getTextStyle(): TextRenderingStyle;
     getBaselinePos(): import("../lib").Vec3;
     getTransform(): Mat33;
     protected applyTransformation(affineTransfm: Mat33): void;
@@ -49,5 +45,19 @@ export default class TextComponent extends AbstractComponent implements Restylea
     description(localizationTable: ImageComponentLocalization): string;
     protected serializeToJSON(): Record<string, any>;
     static deserializeFromString(json: any): TextComponent;
-    static fromLines(lines: string[], transform: Mat33, style: TextStyle): AbstractComponent;
+    /**
+     * Creates a `TextComponent` from `lines`.
+     *
+     * @example
+     * ```ts
+     * const textStyle = {
+     *   size: 12,
+     *   fontFamily: 'serif',
+     *   renderingStyle: { fill: Color4.black },
+     * };
+     *
+     * const text = TextComponent.fromLines('foo\nbar'.split('\n'), Mat33.identity, textStyle);
+     * ```
+     */
+    static fromLines(lines: string[], transform: Mat33, style: TextRenderingStyle): AbstractComponent;
 }

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

@@ -6,7 +6,15 @@ import  { cloneTextStyle, textStyleFromJSON, textStyleToJSON }  from '../renderi
 import  AbstractComponent  from './AbstractComponent.mjs';
 import  { createRestyleComponentCommand }  from './RestylableComponent.mjs';
 const componentTypeId = 'text';
+/**
+ * Displays text.
+ */
 export default class TextComponent extends AbstractComponent {
+    /**
+     * Creates a new text object from a list of component text or child TextComponents.
+     *
+     * @see {@link fromLines}
+     */
     constructor(textObjects, transform, style) {
         super(componentTypeId);
         this.textObjects = textObjects;
@@ -150,7 +158,7 @@ export default class TextComponent extends AbstractComponent {
             editor.queueRerender();
         }
     }
-    // See this.getStyle
+    // See {@link getStyle}
     getTextStyle() {
         return cloneTextStyle(this.style);
     }
@@ -232,6 +240,20 @@ export default class TextComponent extends AbstractComponent {
         const transform = new Mat33(...transformData);
         return new TextComponent(textObjects, transform, style);
     }
+    /**
+     * Creates a `TextComponent` from `lines`.
+     *
+     * @example
+     * ```ts
+     * const textStyle = {
+     *   size: 12,
+     *   fontFamily: 'serif',
+     *   renderingStyle: { fill: Color4.black },
+     * };
+     *
+     * const text = TextComponent.fromLines('foo\nbar'.split('\n'), Mat33.identity, textStyle);
+     * ```
+     */
     static fromLines(lines, transform, style) {
         let lastComponent = null;
         const components = [];

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

@@ -7,6 +7,7 @@ export { default as AbstractComponent } from './AbstractComponent';
 import Stroke from './Stroke';
 import TextComponent from './TextComponent';
 import ImageComponent from './ImageComponent';
-import RestyleableComponent, { createRestyleComponentCommand, isRestylableComponent } from './RestylableComponent';
-import ImageBackground from './ImageBackground';
-export { Stroke, TextComponent as Text, RestyleableComponent, createRestyleComponentCommand, isRestylableComponent, TextComponent, Stroke as StrokeComponent, ImageBackground as BackgroundComponent, ImageComponent, };
+import RestyleableComponent from './RestylableComponent';
+import { createRestyleComponentCommand, isRestylableComponent, ComponentStyle as RestyleableComponentStyle } from './RestylableComponent';
+import BackgroundComponent from './BackgroundComponent';
+export { Stroke, TextComponent as Text, RestyleableComponent, createRestyleComponentCommand, isRestylableComponent, RestyleableComponentStyle, TextComponent, Stroke as StrokeComponent, BackgroundComponent, ImageComponent, };

package/dist/mjs/src/components/lib.mjs

@@ -8,5 +8,5 @@ import  Stroke  from './Stroke.mjs';
 import  TextComponent  from './TextComponent.mjs';
 import  ImageComponent  from './ImageComponent.mjs';
 import  { createRestyleComponentCommand, isRestylableComponent }  from './RestylableComponent.mjs';
-import  ImageBackground  from './ImageBackground.mjs';
-export { Stroke, TextComponent as Text, createRestyleComponentCommand, isRestylableComponent, TextComponent, Stroke as StrokeComponent, ImageBackground as BackgroundComponent, ImageComponent, };
+import  BackgroundComponent  from './BackgroundComponent.mjs';
+export { Stroke, TextComponent as Text, createRestyleComponentCommand, isRestylableComponent, TextComponent, Stroke as StrokeComponent, BackgroundComponent, ImageComponent, };

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

@@ -1,7 +1,7 @@
-import { Bezier } from 'bezier-js';
 import  { Vec2 }  from '../../math/Vec2.mjs';
 import  Rect2  from '../../math/Rect2.mjs';
 import  LineSegment2  from '../../math/LineSegment2.mjs';
+import  QuadraticBezier  from '../../math/polynomial/QuadraticBezier.mjs';
 // Handles stroke smoothing
 export class StrokeSmoother {
     constructor(startPoint, 
@@ -38,9 +38,9 @@ export class StrokeSmoother {
         if (!this.currentCurve) {
             return 0;
         }
-        const startPt = Vec2.ofXY(this.currentCurve.points[0]);
-        const controlPt = Vec2.ofXY(this.currentCurve.points[1]);
-        const endPt = Vec2.ofXY(this.currentCurve.points[2]);
+        const startPt = this.currentCurve.p0;
+        const controlPt = this.currentCurve.p1;
+        const endPt = this.currentCurve.p2;
         const toControlDist = startPt.minus(controlPt).length();
         const toEndDist = endPt.minus(controlPt).length();
         return toControlDist + toEndDist;
@@ -52,7 +52,7 @@ export class StrokeSmoother {
         }
         this.onCurveAdded(this.currentSegmentToPath());
         const lastPoint = this.buffer[this.buffer.length - 1];
-        this.lastExitingVec = Vec2.ofXY(this.currentCurve.points[2]).minus(Vec2.ofXY(this.currentCurve.points[1]));
+        this.lastExitingVec = this.currentCurve.p2.minus(this.currentCurve.p1);
         console.assert(this.lastExitingVec.magnitude() !== 0, 'lastExitingVec has zero length!');
         // Use the last two points to start a new curve (the last point isn't used
         // in the current curve and we want connected curves to share end points)
@@ -67,13 +67,13 @@ export class StrokeSmoother {
         if (this.currentCurve == null) {
             throw new Error('Invalid State: currentCurve is null!');
         }
-        const startVec = Vec2.ofXY(this.currentCurve.normal(0)).normalized();
+        const startVec = this.currentCurve.normal(0).normalized();
         if (!isFinite(startVec.magnitude())) {
             throw new Error(`startVec(${startVec}) is NaN or ∞`);
         }
-        const startPt = Vec2.ofXY(this.currentCurve.get(0));
-        const endPt = Vec2.ofXY(this.currentCurve.get(1));
-        const controlPoint = Vec2.ofXY(this.currentCurve.points[1]);
+        const startPt = this.currentCurve.at(0);
+        const endPt = this.currentCurve.at(1);
+        const controlPoint = this.currentCurve.p1;
         return {
             startPoint: startPt,
             controlPoint,
@@ -125,7 +125,7 @@ export class StrokeSmoother {
             const p2 = lastPoint.pos.plus((_b = this.lastExitingVec) !== null && _b !== void 0 ? _b : Vec2.unitX);
             const p3 = newPoint.pos;
             // Quadratic Bézier curve
-            this.currentCurve = new Bezier(p1.xy, p2.xy, p3.xy);
+            this.currentCurve = new QuadraticBezier(p1, p2, p3);
             console.assert(!isNaN(p1.magnitude()) && !isNaN(p2.magnitude()) && !isNaN(p3.magnitude()), 'Expected !NaN');
             if (this.isFirstSegment) {
                 // The start of a curve often lacks accurate pressure information. Update it.
@@ -176,19 +176,29 @@ export class StrokeSmoother {
         console.assert(!segmentStart.eq(controlPoint, 1e-11), 'Start and control points are equal!');
         console.assert(!controlPoint.eq(segmentEnd, 1e-11), 'Control and end points are equal!');
         const prevCurve = this.currentCurve;
-        this.currentCurve = new Bezier(segmentStart.xy, controlPoint.xy, segmentEnd.xy);
-        if (isNaN(Vec2.ofXY(this.currentCurve.normal(0)).magnitude())) {
+        this.currentCurve = new QuadraticBezier(segmentStart, controlPoint, segmentEnd);
+        if (isNaN(this.currentCurve.normal(0).magnitude())) {
             console.error('NaN normal at 0. Curve:', this.currentCurve);
             this.currentCurve = prevCurve;
         }
         // 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);
             for (const point of this.buffer) {
-                const proj = Vec2.ofXY(curve.project(point.xy));
-                const dist = proj.minus(point).magnitude();
-                const minFit = Math.max(Math.min(this.curveStartWidth, this.curveEndWidth) / 3, this.minFitAllowed);
+                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 || dist > this.maxFitAllowed) {
+                        nonMatching++;
+                    }
+                }
+                if (nonMatching >= maxNonMatching) {
                     return false;
                 }
             }

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

@@ -5,10 +5,40 @@
  * @example
  * ```
  * import { Editor, Vec3, Mat33 } from 'js-draw';
+ *
+ * // Apply js-draw CSS
+ * import 'js-draw/styles';
+ * // If your bundler doesn't support the above, try
+ * // import 'js-draw/bundledStyles';
+ *
+ * (async () => {
+ *   const editor = new Editor(document.body);
+ *   const toolbar = editor.addToolbar();
+ *   editor.getRootElement().style.height = '600px';
+ *
+ *   await editor.loadFromSVG(`
+ *       <svg viewBox="0 0 500 500" width="500" height="500" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
+ *           <style id="js-draw-style-sheet">path{stroke-linecap:round;stroke-linejoin:round;}text{white-space:pre;}</style>
+ *           <path d="M500,500L500,0L0,0L0,500L500,500" fill="#423131bf" class="js-draw-image-background"></path>
+ *           <text style="transform: matrix(1, 0, 0, 1, 57, 192); font-family: serif; font-size: 32px; fill: rgb(204, 102, 51);">Testing...</text>
+ *       </svg>
+ *   `);
+ *
+ *   toolbar.addActionButton({
+ *      label: 'Save',
+ *      icon: editor.icons.makeSaveIcon(),
+ *   }, () => {
+ *       const saveData = editor.toSVG().outerHTML;
+ *
+ *       // Do something with saveData
+ *   });
+ * })();
  * ```
  *
  * @see
  * {@link Editor}
+ * {@link Editor.loadFromSVG}
+ * {@link HTMLToolbar.addActionButton }
  *
  * @packageDocumentation
  */

package/dist/mjs/src/lib.mjs

@@ -5,10 +5,40 @@
  * @example
  * ```
  * import { Editor, Vec3, Mat33 } from 'js-draw';
+ *
+ * // Apply js-draw CSS
+ * import 'js-draw/styles';
+ * // If your bundler doesn't support the above, try
+ * // import 'js-draw/bundledStyles';
+ *
+ * (async () => {
+ *   const editor = new Editor(document.body);
+ *   const toolbar = editor.addToolbar();
+ *   editor.getRootElement().style.height = '600px';
+ *
+ *   await editor.loadFromSVG(`
+ *       <svg viewBox="0 0 500 500" width="500" height="500" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
+ *           <style id="js-draw-style-sheet">path{stroke-linecap:round;stroke-linejoin:round;}text{white-space:pre;}</style>
+ *           <path d="M500,500L500,0L0,0L0,500L500,500" fill="#423131bf" class="js-draw-image-background"></path>
+ *           <text style="transform: matrix(1, 0, 0, 1, 57, 192); font-family: serif; font-size: 32px; fill: rgb(204, 102, 51);">Testing...</text>
+ *       </svg>
+ *   `);
+ *
+ *   toolbar.addActionButton({
+ *      label: 'Save',
+ *      icon: editor.icons.makeSaveIcon(),
+ *   }, () => {
+ *       const saveData = editor.toSVG().outerHTML;
+ *
+ *       // Do something with saveData
+ *   });
+ * })();
  * ```
  *
  * @see
  * {@link Editor}
+ * {@link Editor.loadFromSVG}
+ * {@link HTMLToolbar.addActionButton }
  *
  * @packageDocumentation
  */

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', selectObjectType: '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', 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}` });
 export default localization;

package/dist/mjs/src/localizations/es.mjs

@@ -6,7 +6,7 @@ const localization = Object.assign(Object.assign({}, defaultEditorLocalization),
     loading: (percentage) => `Cargando: ${percentage}%...`, imageEditor: 'Editor de dibujos', undoAnnouncement: (commandDescription) => `${commandDescription} fue deshecho`, redoAnnouncement: (commandDescription) => `${commandDescription} fue rehecho`, undo: 'Deshace', redo: 'Rehace', 
     // Strings for the toolbar
     // (see src/toolbar/localization.ts)
-    pen: 'Lapiz', eraser: 'Borrador', select: 'Selecciona', thicknessLabel: 'Tamaño: ', colorLabel: 'Color: ', doneLoading: 'El cargado terminó', fontLabel: 'Fuente: ', anyDevicePanning: 'Mover la pantalla con todo dispotivo', touchPanning: 'Mover la pantalla con un dedo', touchPanTool: 'Instrumento de mover la pantalla con un dedo', outlinedRectanglePen: 'Rectángulo con nada más que un borde', filledRectanglePen: 'Rectángulo sin borde', linePen: 'Línea', arrowPen: 'Flecha', freehandPen: 'Dibuja sin restricción de forma', selectObjectType: 'Forma de dibuja:', handTool: 'Mover', zoom: 'Zoom', resetView: 'Reiniciar vista', resizeImageToSelection: 'Redimensionar la imagen a lo que está seleccionado', deleteSelection: 'Borra la selección', duplicateSelection: 'Duplica la selección', pickColorFromScreen: 'Selecciona un color de la pantalla', clickToPickColorAnnouncement: 'Haga un clic en la pantalla para seleccionar un color', dropdownShown(toolName) {
+    pen: 'Lapiz', eraser: 'Borrador', select: 'Selecciona', thicknessLabel: 'Tamaño: ', colorLabel: 'Color: ', doneLoading: 'El cargado terminó', fontLabel: 'Fuente: ', anyDevicePanning: 'Mover la pantalla con todo dispotivo', touchPanning: 'Mover la pantalla con un dedo', touchPanTool: 'Instrumento de mover la pantalla con un dedo', outlinedRectanglePen: 'Rectángulo con nada más que un borde', filledRectanglePen: 'Rectángulo sin borde', linePen: 'Línea', arrowPen: 'Flecha', freehandPen: 'Dibuja sin restricción de forma', selectPenType: 'Forma de dibuja:', handTool: 'Mover', zoom: 'Zoom', resetView: 'Reiniciar vista', resizeImageToSelection: 'Redimensionar la imagen a lo que está seleccionado', deleteSelection: 'Borra la selección', duplicateSelection: 'Duplica la selección', pickColorFromScreen: 'Selecciona un color de la pantalla', clickToPickColorAnnouncement: 'Haga un clic en la pantalla para seleccionar un color', dropdownShown(toolName) {
         return `Menú por ${toolName} es visible`;
     }, dropdownHidden: function (toolName) {
         return `Menú por ${toolName} fue ocultado`;

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

@@ -341,7 +341,7 @@ export default class Path {
         const onlyStroked = strokeWidth > 0 && renderablePath.style.fill.a === 0;
         // Scale the expanded rect --- the visual equivalent is only close for huge strokes.
         const expandedRect = visibleRect.grownBy(strokeWidth)
-            .transformedBoundingBox(Mat33.scaling2D(2, visibleRect.center));
+            .transformedBoundingBox(Mat33.scaling2D(4, visibleRect.center));
         // TODO: Handle simplifying very small paths.
         if (expandedRect.containsRect(path.bbox.grownBy(strokeWidth))) {
             return renderablePath;

package/dist/mjs/src/math/polynomial/QuadraticBezier.d.ts

@@ -0,0 +1,28 @@
+import { Point2, Vec2 } from '../Vec2';
+export default class QuadraticBezier {
+    readonly p0: Point2;
+    readonly p1: Point2;
+    readonly p2: Point2;
+    private bezierJs;
+    constructor(p0: Point2, p1: Point2, p2: Point2);
+    /**
+     * Returns a component of a quadratic Bézier curve at t, where p0,p1,p2 are either all x or
+     * all y components of the target curve.
+     */
+    private static componentAt;
+    private static derivativeComponentAt;
+    /**
+     * @returns the curve evaluated at `t`.
+     */
+    at(t: number): Point2;
+    derivativeAt(t: number): Point2;
+    /**
+     * @returns the approximate distance from `point` to this curve.
+     */
+    approximateDistance(point: Point2): number;
+    /**
+     * @returns the exact distance from `point` to this.
+     */
+    distance(point: Point2): number;
+    normal(t: number): Vec2;
+}

package/dist/mjs/src/math/polynomial/QuadraticBezier.mjs

@@ -0,0 +1,109 @@
+import { Bezier } from 'bezier-js';
+import  { Vec2 }  from '../Vec2.mjs';
+import  solveQuadratic  from './solveQuadratic.mjs';
+export default class QuadraticBezier {
+    constructor(p0, p1, p2) {
+        this.p0 = p0;
+        this.p1 = p1;
+        this.p2 = p2;
+        this.bezierJs = null;
+    }
+    /**
+     * Returns a component of a quadratic Bézier curve at t, where p0,p1,p2 are either all x or
+     * all y components of the target curve.
+     */
+    static componentAt(t, p0, p1, p2) {
+        return p0 + t * (-2 * p0 + 2 * p1) + t * t * (p0 - 2 * p1 + p2);
+    }
+    static derivativeComponentAt(t, p0, p1, p2) {
+        return -2 * p0 + 2 * p1 + 2 * t * (p0 - 2 * p1 + p2);
+    }
+    /**
+     * @returns the curve evaluated at `t`.
+     */
+    at(t) {
+        const p0 = this.p0;
+        const p1 = this.p1;
+        const p2 = this.p2;
+        return Vec2.of(QuadraticBezier.componentAt(t, p0.x, p1.x, p2.x), QuadraticBezier.componentAt(t, p0.y, p1.y, p2.y));
+    }
+    derivativeAt(t) {
+        const p0 = this.p0;
+        const p1 = this.p1;
+        const p2 = this.p2;
+        return Vec2.of(QuadraticBezier.derivativeComponentAt(t, p0.x, p1.x, p2.x), QuadraticBezier.derivativeComponentAt(t, p0.y, p1.y, p2.y));
+    }
+    /**
+     * @returns the approximate distance from `point` to this curve.
+     */
+    approximateDistance(point) {
+        // We want to minimize f(t) = |B(t) - p|².
+        // Expanding,
+        //   f(t)  = (Bₓ(t) - pₓ)² + (Bᵧ(t) - pᵧ)²
+        // ⇒ f'(t) = Dₜ(Bₓ(t) - pₓ)² + Dₜ(Bᵧ(t) - pᵧ)²
+        //
+        // Considering just one component,
+        //  Dₜ(Bₓ(t) - pₓ)² = 2(Bₓ(t) - pₓ)(DₜBₓ(t))
+        //                  = 2(Bₓ(t)DₜBₓ(t) - pₓBₓ(t))
+        //   = 2(p0ₓ + (t)(-2p0ₓ + 2p1ₓ) + (t²)(p0ₓ - 2p1ₓ + p2ₓ) - pₓ)((-2p0ₓ + 2p1ₓ) + 2(t)(p0ₓ - 2p1ₓ + p2ₓ))
+        //     - (pₓ)((-2p0ₓ + 2p1ₓ) + (t)(p0ₓ - 2p1ₓ + p2ₓ))
+        const A = this.p0.x - point.x;
+        const B = -2 * this.p0.x + 2 * this.p1.x;
+        const C = this.p0.x - 2 * this.p1.x + this.p2.x;
+        // Let A = p0ₓ - pₓ, B = -2p0ₓ + 2p1ₓ, C = p0ₓ - 2p1ₓ + p2ₓ. We then have,
+        //  Dₜ(Bₓ(t) - pₓ)²
+        //    = 2(A + tB + t²C)(B + 2tC) - (pₓ)(B + 2tC)
+        //    = 2(AB + tB² + t²BC + 2tCA + 2tCtB + 2tCt²C) - pₓB - pₓ2tC
+        //    = 2(AB + tB² + 2tCA + t²BC + 2t²CB + 2C²t³) - pₓB - pₓ2tC
+        //    = 2AB + 2t(B² + 2CA) + 2t²(BC + 2CB) + 4C²t³ - pₓB - pₓ2tC
+        //    = 2AB + 2t(B² + 2CA - pₓC) + 2t²(BC + 2CB) + 4C²t³ - pₓB
+        //
+        const D = this.p0.y - point.y;
+        const E = -2 * this.p0.y + 2 * this.p1.y;
+        const F = this.p0.y - 2 * this.p1.y + this.p2.y;
+        // Using D = p0ᵧ - pᵧ, E = -2p0ᵧ + 2p1ᵧ, F = p0ᵧ - 2p1ᵧ + p2ᵧ, we thus have,
+        //  f'(t) = 2AB + 2t(B² + 2CA - pₓC) + 2t²(BC + 2CB) + 4C²t³ - pₓB
+        //        + 2DE + 2t(E² + 2FD - pᵧF) + 2t²(EF + 2FE) + 4F²t³ - pᵧE
+        const a = 2 * A * B + 2 * D * E - point.x * B - point.y * E;
+        const b = 2 * B * B + 2 * E * E + 2 * C * A + 2 * F * D - point.x * C - point.y * F;
+        const c = 2 * E * F + 2 * B * C + 2 * C * B + 2 * F * E;
+        //const d = 4 * C * C + 4 * F * F;
+        // Thus,
+        // f'(t) = a + bt + ct² + dt³
+        const fDerivAtZero = a;
+        const f2ndDerivAtZero = b;
+        const f3rdDerivAtZero = 2 * c;
+        // Using the first few terms of a Maclaurin series to approximate f'(t),
+        // f'(t) ≈ f'(0) + t f''(0) + t² f'''(0) / 2
+        let [min1, min2] = solveQuadratic(f3rdDerivAtZero / 2, f2ndDerivAtZero, fDerivAtZero);
+        // If the quadratic has no solutions, approximate.
+        if (isNaN(min1)) {
+            min1 = 0.25;
+        }
+        if (isNaN(min2)) {
+            min2 = 0.75;
+        }
+        const at1 = this.at(min1);
+        const at2 = this.at(min2);
+        const sqrDist1 = at1.minus(point).magnitudeSquared();
+        const sqrDist2 = at2.minus(point).magnitudeSquared();
+        const sqrDist3 = this.at(0).minus(point).magnitudeSquared();
+        const sqrDist4 = this.at(1).minus(point).magnitudeSquared();
+        return Math.sqrt(Math.min(sqrDist1, sqrDist2, sqrDist3, sqrDist4));
+    }
+    /**
+     * @returns the exact distance from `point` to this.
+     */
+    distance(point) {
+        if (!this.bezierJs) {
+            this.bezierJs = new Bezier([this.p0.xy, this.p1.xy, this.p2.xy]);
+        }
+        const proj = Vec2.ofXY(this.bezierJs.project(point.xy));
+        const dist = proj.minus(point).magnitude();
+        return dist;
+    }
+    normal(t) {
+        const tangent = this.derivativeAt(t);
+        return tangent.orthog().normalized();
+    }
+}

package/dist/mjs/src/math/polynomial/solveQuadratic.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Solves an equation of the form ax² + bx + c = 0.
+ * The larger solution is returned first.
+ */
+declare const solveQuadratic: (a: number, b: number, c: number) => [number, number];
+export default solveQuadratic;

package/dist/mjs/src/math/polynomial/solveQuadratic.mjs

@@ -0,0 +1,34 @@
+/**
+ * Solves an equation of the form ax² + bx + c = 0.
+ * The larger solution is returned first.
+ */
+const solveQuadratic = (a, b, c) => {
+    // See also https://en.wikipedia.org/wiki/Quadratic_formula
+    if (a === 0) {
+        let solution;
+        if (b === 0) {
+            solution = c === 0 ? 0 : NaN;
+        }
+        else {
+            // Then we have bx + c = 0
+            // which implies bx = -c.
+            // Thus, x = -c/b
+            solution = -c / b;
+        }
+        return [solution, solution];
+    }
+    const discriminant = b * b - 4 * a * c;
+    if (discriminant < 0) {
+        return [NaN, NaN];
+    }
+    const rootDiscriminant = Math.sqrt(discriminant);
+    const solution1 = (-b + rootDiscriminant) / (2 * a);
+    const solution2 = (-b - rootDiscriminant) / (2 * a);
+    if (solution1 > solution2) {
+        return [solution1, solution2];
+    }
+    else {
+        return [solution2, solution1];
+    }
+};
+export default solveQuadratic;

package/dist/mjs/src/rendering/RenderingStyle.d.ts

@@ -1,9 +1,9 @@
 import Color4 from '../Color4';
 interface RenderingStyle {
-    fill: Color4;
-    stroke?: {
-        color: Color4;
-        width: number;
+    readonly fill: Color4;
+    readonly stroke?: {
+        readonly color: Color4;
+        readonly width: number;
     };
 }
 export default RenderingStyle;

package/dist/mjs/src/rendering/TextRenderingStyle.d.ts

@@ -1,13 +1,13 @@
 import RenderingStyle from './RenderingStyle';
-export interface TextStyle {
-    size: number;
-    fontFamily: string;
-    fontWeight?: string;
-    fontVariant?: string;
-    renderingStyle: RenderingStyle;
+export interface TextRenderingStyle {
+    readonly size: number;
+    readonly fontFamily: string;
+    readonly fontWeight?: string;
+    readonly fontVariant?: string;
+    readonly renderingStyle: RenderingStyle;
 }
-export default TextStyle;
-export declare const cloneTextStyle: (style: TextStyle) => {
+export default TextRenderingStyle;
+export declare const cloneTextStyle: (style: TextRenderingStyle) => {
     renderingStyle: {
         fill: import("../Color4").default;
         stroke: {
@@ -20,8 +20,8 @@ export declare const cloneTextStyle: (style: TextStyle) => {
     fontWeight?: string | undefined;
     fontVariant?: string | undefined;
 };
-export declare const textStyleFromJSON: (json: any) => TextStyle;
-export declare const textStyleToJSON: (style: TextStyle) => {
+export declare const textStyleFromJSON: (json: any) => TextRenderingStyle;
+export declare const textStyleToJSON: (style: TextRenderingStyle) => {
     renderingStyle: {
         fill: string;
         stroke: {