js-draw 0.18.2 → 0.20.0

package/dist/cjs/src/components/util/StrokeSmoother.js

@@ -4,10 +4,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StrokeSmoother = void 0;
-const bezier_js_1 = require("bezier-js");
 const Vec2_1 = require("../../math/Vec2");
 const Rect2_1 = __importDefault(require("../../math/Rect2"));
 const LineSegment2_1 = __importDefault(require("../../math/LineSegment2"));
+const QuadraticBezier_1 = __importDefault(require("../../math/polynomial/QuadraticBezier"));
 // Handles stroke smoothing
 class StrokeSmoother {
     constructor(startPoint, 
@@ -44,9 +44,9 @@ class StrokeSmoother {
         if (!this.currentCurve) {
             return 0;
         }
-        const startPt = Vec2_1.Vec2.ofXY(this.currentCurve.points[0]);
-        const controlPt = Vec2_1.Vec2.ofXY(this.currentCurve.points[1]);
-        const endPt = Vec2_1.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;
@@ -58,7 +58,7 @@ class StrokeSmoother {
         }
         this.onCurveAdded(this.currentSegmentToPath());
         const lastPoint = this.buffer[this.buffer.length - 1];
-        this.lastExitingVec = Vec2_1.Vec2.ofXY(this.currentCurve.points[2]).minus(Vec2_1.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)
@@ -73,13 +73,13 @@ class StrokeSmoother {
         if (this.currentCurve == null) {
             throw new Error('Invalid State: currentCurve is null!');
         }
-        const startVec = Vec2_1.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_1.Vec2.ofXY(this.currentCurve.get(0));
-        const endPt = Vec2_1.Vec2.ofXY(this.currentCurve.get(1));
-        const controlPoint = Vec2_1.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,
@@ -131,7 +131,7 @@ class StrokeSmoother {
             const p2 = lastPoint.pos.plus((_b = this.lastExitingVec) !== null && _b !== void 0 ? _b : Vec2_1.Vec2.unitX);
             const p3 = newPoint.pos;
             // Quadratic Bézier curve
-            this.currentCurve = new bezier_js_1.Bezier(p1.xy, p2.xy, p3.xy);
+            this.currentCurve = new QuadraticBezier_1.default(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.
@@ -182,19 +182,29 @@ 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_js_1.Bezier(segmentStart.xy, controlPoint.xy, segmentEnd.xy);
-        if (isNaN(Vec2_1.Vec2.ofXY(this.currentCurve.normal(0)).magnitude())) {
+        this.currentCurve = new QuadraticBezier_1.default(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_1.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/cjs/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/cjs/src/lib.js

@@ -6,10 +6,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/cjs/src/localizations/de.js

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const localization_1 = require("../localization");
 // German localization
-const localization = Object.assign(Object.assign({}, localization_1.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({}, localization_1.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}` });
 exports.default = localization;

package/dist/cjs/src/localizations/es.js

@@ -8,7 +8,7 @@ const localization = Object.assign(Object.assign({}, localization_1.defaultEdito
     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/cjs/src/math/Path.js

@@ -347,7 +347,7 @@ 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_1.default.scaling2D(2, visibleRect.center));
+            .transformedBoundingBox(Mat33_1.default.scaling2D(4, visibleRect.center));
         // TODO: Handle simplifying very small paths.
         if (expandedRect.containsRect(path.bbox.grownBy(strokeWidth))) {
             return renderablePath;

package/dist/cjs/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/cjs/src/math/polynomial/QuadraticBezier.js

@@ -0,0 +1,115 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const bezier_js_1 = require("bezier-js");
+const Vec2_1 = require("../Vec2");
+const solveQuadratic_1 = __importDefault(require("./solveQuadratic"));
+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_1.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_1.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] = (0, solveQuadratic_1.default)(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_js_1.Bezier([this.p0.xy, this.p1.xy, this.p2.xy]);
+        }
+        const proj = Vec2_1.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();
+    }
+}
+exports.default = QuadraticBezier;

package/dist/cjs/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/cjs/src/math/polynomial/solveQuadratic.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * 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];
+    }
+};
+exports.default = solveQuadratic;

package/dist/cjs/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/cjs/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: {

package/dist/cjs/src/rendering/lib.d.ts

@@ -3,3 +3,5 @@ export { default as DummyRenderer } from './renderers/DummyRenderer';
 export { default as SVGRenderer } from './renderers/SVGRenderer';
 export { default as CanvasRenderer } from './renderers/CanvasRenderer';
 export { default as Display, RenderingMode } from './Display';
+export { default as TextRenderingStyle } from './TextRenderingStyle';
+export { default as RenderingStyle } from './RenderingStyle';

package/dist/cjs/src/rendering/renderers/AbstractRenderer.d.ts

@@ -6,7 +6,7 @@ import Rect2 from '../../math/Rect2';
 import { Point2, Vec2 } from '../../math/Vec2';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
-import TextStyle from '../TextRenderingStyle';
+import TextRenderingStyle from '../TextRenderingStyle';
 export interface RenderablePathSpec {
     startPoint: Point2;
     commands: PathCommand[];
@@ -33,7 +33,7 @@ export default abstract class AbstractRenderer {
     protected abstract moveTo(point: Point2): void;
     protected abstract traceCubicBezierCurve(p1: Point2, p2: Point2, p3: Point2): void;
     protected abstract traceQuadraticBezierCurve(controlPoint: Point2, endPoint: Point2): void;
-    abstract drawText(text: string, transform: Mat33, style: TextStyle): void;
+    abstract drawText(text: string, transform: Mat33, style: TextRenderingStyle): void;
     abstract drawImage(image: RenderableImage): void;
     abstract isTooSmallToRender(rect: Rect2): boolean;
     setDraftMode(_draftMode: boolean): void;

package/dist/cjs/src/rendering/renderers/CanvasRenderer.d.ts

@@ -4,7 +4,7 @@ import { Point2, Vec2 } from '../../math/Vec2';
 import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
-import TextStyle from '../TextRenderingStyle';
+import TextRenderingStyle from '../TextRenderingStyle';
 import AbstractRenderer, { RenderableImage, RenderablePathSpec } from './AbstractRenderer';
 /**
  * Renders onto a `CanvasRenderingContext2D`.
@@ -53,7 +53,7 @@ export default class CanvasRenderer extends AbstractRenderer {
     protected traceCubicBezierCurve(p1: Point2, p2: Point2, p3: Point2): void;
     protected traceQuadraticBezierCurve(controlPoint: Vec3, endPoint: Vec3): void;
     drawPath(path: RenderablePathSpec): void;
-    drawText(text: string, transform: Mat33, style: TextStyle): void;
+    drawText(text: string, transform: Mat33, style: TextRenderingStyle): void;
     drawImage(image: RenderableImage): void;
     private clipLevels;
     startObject(boundingBox: Rect2, clip?: boolean): void;

package/dist/cjs/src/rendering/renderers/CanvasRenderer.js

@@ -191,14 +191,16 @@ class CanvasRenderer extends AbstractRenderer_1.default {
         }
     }
     endObject() {
+        // Cache this.objectLevel — it may be decremented by super.endObject.
+        const objectLevel = this.objectLevel;
+        this.currentObjectBBox = null;
+        super.endObject();
         if (!this.ignoringObject && this.clipLevels.length > 0) {
-            if (this.clipLevels[this.clipLevels.length - 1] === this.objectLevel) {
+            if (this.clipLevels[this.clipLevels.length - 1] === objectLevel) {
                 this.ctx.restore();
                 this.clipLevels.pop();
             }
         }
-        this.currentObjectBBox = null;
-        super.endObject();
         // If exiting an object with a too-small-to-draw bounding box,
         if (this.ignoreObjectsAboveLevel !== null && this.getNestingLevel() <= this.ignoreObjectsAboveLevel) {
             this.ignoreObjectsAboveLevel = null;

package/dist/cjs/src/rendering/renderers/DummyRenderer.d.ts

@@ -4,7 +4,7 @@ import { Point2, Vec2 } from '../../math/Vec2';
 import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
-import TextStyle from '../TextRenderingStyle';
+import TextRenderingStyle from '../TextRenderingStyle';
 import AbstractRenderer, { RenderableImage } from './AbstractRenderer';
 export default class DummyRenderer extends AbstractRenderer {
     clearedCount: number;
@@ -25,7 +25,7 @@ export default class DummyRenderer extends AbstractRenderer {
     protected traceCubicBezierCurve(p1: Vec3, p2: Vec3, p3: Vec3): void;
     protected traceQuadraticBezierCurve(controlPoint: Vec3, endPoint: Vec3): void;
     drawPoints(..._points: Vec3[]): void;
-    drawText(text: string, _transform: Mat33, _style: TextStyle): void;
+    drawText(text: string, _transform: Mat33, _style: TextRenderingStyle): void;
     drawImage(image: RenderableImage): void;
     startObject(boundingBox: Rect2, _clip: boolean): void;
     endObject(): void;

package/dist/cjs/src/rendering/renderers/SVGRenderer.d.ts

@@ -4,7 +4,7 @@ import Rect2 from '../../math/Rect2';
 import { Point2, Vec2 } from '../../math/Vec2';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
-import TextStyle from '../TextRenderingStyle';
+import TextRenderingStyle from '../TextRenderingStyle';
 import AbstractRenderer, { RenderableImage, RenderablePathSpec } from './AbstractRenderer';
 export declare const renderedStylesheetId = "js-draw-style-sheet";
 /**
@@ -36,7 +36,7 @@ export default class SVGRenderer extends AbstractRenderer {
     private textContainer;
     private textContainerTransform;
     private textParentStyle;
-    drawText(text: string, transform: Mat33, style: TextStyle): void;
+    drawText(text: string, transform: Mat33, style: TextRenderingStyle): void;
     drawImage(image: RenderableImage): void;
     startObject(boundingBox: Rect2): void;
     endObject(loaderData?: LoadSaveDataTable, elemClassNames?: string[]): void;

package/dist/cjs/src/rendering/renderers/SVGRenderer.js

@@ -9,6 +9,7 @@ const Path_1 = __importDefault(require("../../math/Path"));
 const rounding_1 = require("../../math/rounding");
 const Vec2_1 = require("../../math/Vec2");
 const SVGLoader_1 = require("../../SVGLoader");
+const RenderingStyle_1 = require("../RenderingStyle");
 const AbstractRenderer_1 = __importDefault(require("./AbstractRenderer"));
 exports.renderedStylesheetId = 'js-draw-style-sheet';
 const svgNameSpace = 'http://www.w3.org/2000/svg';
@@ -114,11 +115,10 @@ class SVGRenderer extends AbstractRenderer_1.default {
         (_a = this.objectElems) === null || _a === void 0 ? void 0 : _a.push(pathElem);
     }
     drawPath(pathSpec) {
-        var _a;
         const style = pathSpec.style;
         const path = Path_1.default.fromRenderable(pathSpec).transformedBy(this.getCanvasToScreenTransform());
         // Try to extend the previous path, if possible
-        if (!style.fill.eq((_a = this.lastPathStyle) === null || _a === void 0 ? void 0 : _a.fill) || this.lastPathString.length === 0) {
+        if (this.lastPathString.length === 0 || !this.lastPathStyle || !(0, RenderingStyle_1.stylesEqual)(this.lastPathStyle, style)) {
             this.addPathToSVG();
             this.lastPathStyle = style;
             this.lastPathString = [];
@@ -232,7 +232,7 @@ class SVGRenderer extends AbstractRenderer_1.default {
         this.objectElems = [];
     }
     endObject(loaderData, elemClassNames) {
-        var _a, _b;
+        var _a;
         super.endObject(loaderData);
         // Don't extend paths across objects
         this.addPathToSVG();
@@ -254,9 +254,18 @@ class SVGRenderer extends AbstractRenderer_1.default {
             }
         }
         // Add class names to the object, if given.
-        if (elemClassNames) {
-            for (const elem of (_b = this.objectElems) !== null && _b !== void 0 ? _b : []) {
-                elem.classList.add(...elemClassNames);
+        if (elemClassNames && this.objectElems) {
+            if (this.objectElems.length === 1) {
+                this.objectElems[0].classList.add(...elemClassNames);
+            }
+            else {
+                const wrapper = document.createElementNS(svgNameSpace, 'g');
+                wrapper.classList.add(...elemClassNames);
+                for (const elem of this.objectElems) {
+                    elem.remove();
+                    wrapper.appendChild(elem);
+                }
+                this.elem.appendChild(wrapper);
             }
         }
     }

package/dist/cjs/src/rendering/renderers/TextOnlyRenderer.d.ts

@@ -4,7 +4,7 @@ import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import { TextRendererLocalization } from '../localization';
 import RenderingStyle from '../RenderingStyle';
-import TextStyle from '../TextRenderingStyle';
+import TextRenderingStyle from '../TextRenderingStyle';
 import AbstractRenderer, { RenderableImage } from './AbstractRenderer';
 export default class TextOnlyRenderer extends AbstractRenderer {
     private localizationTable;
@@ -22,7 +22,7 @@ export default class TextOnlyRenderer extends AbstractRenderer {
     protected moveTo(_point: Vec3): void;
     protected traceCubicBezierCurve(_p1: Vec3, _p2: Vec3, _p3: Vec3): void;
     protected traceQuadraticBezierCurve(_controlPoint: Vec3, _endPoint: Vec3): void;
-    drawText(text: string, _transform: Mat33, _style: TextStyle): void;
+    drawText(text: string, _transform: Mat33, _style: TextRenderingStyle): void;
     drawImage(image: RenderableImage): void;
     isTooSmallToRender(rect: Rect2): boolean;
     drawPoints(..._points: Vec3[]): void;