js-draw 0.19.0 → 0.20.0

package/dist/mjs/src/components/BackgroundComponent.mjs

@@ -0,0 +1,279 @@
+import  Color4  from '../Color4.mjs';
+import  { EditorImageEventType }  from '../EditorImage.mjs';
+import  Rect2  from '../math/Rect2.mjs';
+import  AbstractComponent  from './AbstractComponent.mjs';
+import  { createRestyleComponentCommand }  from './RestylableComponent.mjs';
+import  Path, { PathCommandType }  from '../math/Path.mjs';
+import  { Vec2 }  from '../math/Vec2.mjs';
+import  Viewport  from '../Viewport.mjs';
+import  { toRoundedString }  from '../math/rounding.mjs';
+export var BackgroundType;
+(function (BackgroundType) {
+    BackgroundType[BackgroundType["SolidColor"] = 0] = "SolidColor";
+    BackgroundType[BackgroundType["Grid"] = 1] = "Grid";
+    BackgroundType[BackgroundType["None"] = 2] = "None";
+})(BackgroundType || (BackgroundType = {}));
+export const imageBackgroundCSSClassName = 'js-draw-image-background';
+// Class name prefix indicating the size of the background's grid cells (if present).
+export const imageBackgroundGridSizeCSSPrefix = 'js-draw-image-background-grid-';
+// Flag included in rendered SVGs (etc) that indicates that the secondary color of the
+// background has been manually set.
+export const imageBackgroundNonAutomaticSecondaryColorCSSClassName = 'js-draw-image-background-non-automatic-secondary-color';
+export const backgroundTypeToClassNameMap = {
+    [BackgroundType.Grid]: 'js-draw-image-background-grid',
+    [BackgroundType.SolidColor]: imageBackgroundCSSClassName,
+    [BackgroundType.None]: '',
+};
+// Represents the background of the editor's canvas.
+export default class BackgroundComponent extends AbstractComponent {
+    constructor(backgroundType, mainColor) {
+        super('image-background', 0);
+        this.backgroundType = backgroundType;
+        this.mainColor = mainColor;
+        this.viewportSizeChangeListener = null;
+        this.gridSize = Viewport.getGridSize(2);
+        this.gridStrokeWidth = 0.7;
+        this.secondaryColor = null;
+        // eslint-disable-next-line @typescript-eslint/prefer-as-const
+        this.isRestylableComponent = true;
+        this.contentBBox = Rect2.empty;
+    }
+    static ofGrid(backgroundColor, gridSize, gridColor, gridStrokeWidth) {
+        const background = new BackgroundComponent(BackgroundType.Grid, backgroundColor);
+        if (gridSize !== undefined) {
+            background.gridSize = gridSize;
+        }
+        if (gridColor !== undefined) {
+            background.secondaryColor = gridColor;
+        }
+        if (gridStrokeWidth !== undefined) {
+            background.gridStrokeWidth = gridStrokeWidth;
+        }
+        return background;
+    }
+    getBackgroundType() {
+        return this.backgroundType;
+    }
+    // @internal
+    getMainColor() {
+        return this.mainColor;
+    }
+    // @internal
+    getSecondaryColor() {
+        return this.secondaryColor;
+    }
+    // @internal
+    getGridSize() {
+        return this.gridSize;
+    }
+    getStyle() {
+        let color = this.mainColor;
+        if (this.backgroundType === BackgroundType.None) {
+            color = undefined;
+        }
+        return {
+            color,
+        };
+    }
+    updateStyle(style) {
+        return createRestyleComponentCommand(this.getStyle(), style, this);
+    }
+    // @internal
+    forceStyle(style, editor) {
+        const fill = style.color;
+        if (!fill) {
+            return;
+        }
+        this.mainColor = fill;
+        // A solid background and transparent fill is equivalent to no background.
+        if (fill.eq(Color4.transparent) && this.backgroundType === BackgroundType.SolidColor) {
+            this.backgroundType = BackgroundType.None;
+        }
+        else if (this.backgroundType === BackgroundType.None) {
+            this.backgroundType = BackgroundType.SolidColor;
+        }
+        if (editor) {
+            editor.image.queueRerenderOf(this);
+            editor.queueRerender();
+        }
+    }
+    onAddToImage(image) {
+        if (this.viewportSizeChangeListener) {
+            console.warn('onAddToImage called when background is already in an image');
+            this.onRemoveFromImage();
+        }
+        this.viewportSizeChangeListener = image.notifier.on(EditorImageEventType.ExportViewportChanged, () => {
+            this.recomputeBBox(image);
+        });
+        this.recomputeBBox(image);
+    }
+    onRemoveFromImage() {
+        var _a;
+        (_a = this.viewportSizeChangeListener) === null || _a === void 0 ? void 0 : _a.remove();
+        this.viewportSizeChangeListener = null;
+    }
+    recomputeBBox(image) {
+        const importExportRect = image.getImportExportViewport().visibleRect;
+        if (!this.contentBBox.eq(importExportRect)) {
+            this.contentBBox = importExportRect;
+            // Re-render this if already added to the EditorImage.
+            image.queueRerenderOf(this);
+        }
+    }
+    generateGridPath(visibleRect) {
+        var _a, _b;
+        const targetRect = (_b = (_a = visibleRect === null || visibleRect === void 0 ? void 0 : visibleRect.grownBy(this.gridStrokeWidth)) === null || _a === void 0 ? void 0 : _a.intersection(this.contentBBox)) !== null && _b !== void 0 ? _b : this.contentBBox;
+        const roundDownToGrid = (coord) => Math.floor(coord / this.gridSize) * this.gridSize;
+        const roundUpToGrid = (coord) => Math.ceil(coord / this.gridSize) * this.gridSize;
+        const startY = roundUpToGrid(targetRect.y);
+        const endY = roundDownToGrid(targetRect.y + targetRect.h);
+        const startX = roundUpToGrid(targetRect.x);
+        const endX = roundDownToGrid(targetRect.x + targetRect.w);
+        const result = [];
+        // Don't generate grids with a huge number of rows/columns -- such grids
+        // take a long time to render and are likely invisible due to the number of
+        // cells.
+        const rowCount = (endY - startY) / this.gridSize;
+        const colCount = (endX - startX) / this.gridSize;
+        const maxGridCols = 1000;
+        const maxGridRows = 1000;
+        if (rowCount > maxGridRows || colCount > maxGridCols) {
+            return Path.empty;
+        }
+        const startPoint = Vec2.of(targetRect.x, startY);
+        for (let y = startY; y <= endY; y += this.gridSize) {
+            result.push({
+                kind: PathCommandType.MoveTo,
+                point: Vec2.of(targetRect.x, y),
+            });
+            result.push({
+                kind: PathCommandType.LineTo,
+                point: Vec2.of(targetRect.x + targetRect.w, y),
+            });
+        }
+        for (let x = startX; x <= endX; x += this.gridSize) {
+            result.push({
+                kind: PathCommandType.MoveTo,
+                point: Vec2.of(x, targetRect.y),
+            });
+            result.push({
+                kind: PathCommandType.LineTo,
+                point: Vec2.of(x, targetRect.y + targetRect.h)
+            });
+        }
+        return new Path(startPoint, result);
+    }
+    render(canvas, visibleRect) {
+        if (this.backgroundType === BackgroundType.None) {
+            return;
+        }
+        const clip = true;
+        canvas.startObject(this.contentBBox, clip);
+        if (this.backgroundType === BackgroundType.SolidColor || this.backgroundType === BackgroundType.Grid) {
+            // If the rectangle for this region contains the visible rect,
+            // we can fill the entire visible rectangle (which may be more efficient than
+            // filling the entire region for this.)
+            if (visibleRect) {
+                const intersection = visibleRect.intersection(this.contentBBox);
+                if (intersection) {
+                    canvas.fillRect(intersection, this.mainColor);
+                }
+            }
+            else {
+                canvas.fillRect(this.contentBBox, this.mainColor);
+            }
+        }
+        if (this.backgroundType === BackgroundType.Grid) {
+            let gridColor = this.secondaryColor;
+            gridColor !== null && gridColor !== void 0 ? gridColor : (gridColor = Color4.ofRGBA(1 - this.mainColor.r, 1 - this.mainColor.g, 1 - this.mainColor.b, 0.2));
+            // If the background fill is completely transparent, ensure visibility on otherwise light
+            // and dark backgrounds.
+            if (this.mainColor.a === 0) {
+                gridColor = Color4.ofRGBA(0.5, 0.5, 0.5, 0.2);
+            }
+            const style = {
+                fill: Color4.transparent,
+                stroke: { width: this.gridStrokeWidth, color: gridColor }
+            };
+            canvas.drawPath(this.generateGridPath(visibleRect).toRenderable(style));
+        }
+        const backgroundTypeCSSClass = backgroundTypeToClassNameMap[this.backgroundType];
+        const classNames = [imageBackgroundCSSClassName];
+        if (backgroundTypeCSSClass !== imageBackgroundCSSClassName) {
+            classNames.push(backgroundTypeCSSClass);
+            const gridSizeStr = toRoundedString(this.gridSize).replace(/[.]/g, 'p');
+            classNames.push(imageBackgroundGridSizeCSSPrefix + gridSizeStr);
+        }
+        if (this.secondaryColor !== null) {
+            classNames.push(imageBackgroundNonAutomaticSecondaryColorCSSClassName);
+        }
+        canvas.endObject(this.getLoadSaveData(), classNames);
+    }
+    intersects(lineSegment) {
+        return this.contentBBox.getEdges().some(edge => edge.intersects(lineSegment));
+    }
+    isSelectable() {
+        return false;
+    }
+    isBackground() {
+        return true;
+    }
+    serializeToJSON() {
+        var _a;
+        return {
+            mainColor: this.mainColor.toHexString(),
+            secondaryColor: (_a = this.secondaryColor) === null || _a === void 0 ? void 0 : _a.toHexString(),
+            backgroundType: this.backgroundType,
+            gridSize: this.gridSize,
+            gridStrokeWidth: this.gridStrokeWidth,
+        };
+    }
+    applyTransformation(_affineTransfm) {
+        // Do nothing — it doesn't make sense to transform the background.
+    }
+    description(localizationTable) {
+        if (this.backgroundType === BackgroundType.SolidColor) {
+            return localizationTable.filledBackgroundWithColor(this.mainColor.toString());
+        }
+        else {
+            return localizationTable.emptyBackground;
+        }
+    }
+    createClone() {
+        return new BackgroundComponent(this.backgroundType, this.mainColor);
+    }
+    // @internal
+    static deserializeFromJSON(json) {
+        var _a, _b;
+        if (typeof json === 'string') {
+            json = JSON.parse(json);
+        }
+        if (typeof json.mainColor !== 'string') {
+            throw new Error('Error deserializing — mainColor must be of type string.');
+        }
+        let backgroundType;
+        const jsonBackgroundType = json.backgroundType;
+        if (jsonBackgroundType === BackgroundType.None || jsonBackgroundType === BackgroundType.Grid
+            || jsonBackgroundType === BackgroundType.SolidColor) {
+            backgroundType = jsonBackgroundType;
+        }
+        else {
+            const exhaustivenessCheck = jsonBackgroundType;
+            return exhaustivenessCheck;
+        }
+        const mainColor = Color4.fromHex(json.mainColor);
+        const secondaryColor = json.secondaryColor ? Color4.fromHex(json.secondaryColor) : null;
+        const gridSize = (_a = json.gridSize) !== null && _a !== void 0 ? _a : undefined;
+        const gridStrokeWidth = (_b = json.gridStrokeWidth) !== null && _b !== void 0 ? _b : undefined;
+        const result = new BackgroundComponent(backgroundType, mainColor);
+        result.secondaryColor = secondaryColor;
+        if (gridSize) {
+            result.gridSize = gridSize;
+        }
+        if (gridStrokeWidth) {
+            result.gridStrokeWidth = gridStrokeWidth;
+        }
+        return result;
+    }
+}
+AbstractComponent.registerComponent('image-background', BackgroundComponent.deserializeFromJSON);

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

@@ -125,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;
                 }

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

@@ -36,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;

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

@@ -158,7 +158,7 @@ export default class TextComponent extends AbstractComponent {
             editor.queueRerender();
         }
     }
-    // See this.getStyle
+    // See {@link getStyle}
     getTextStyle() {
         return cloneTextStyle(this.style);
     }

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

@@ -9,5 +9,5 @@ import TextComponent from './TextComponent';
 import ImageComponent from './ImageComponent';
 import RestyleableComponent from './RestylableComponent';
 import { createRestyleComponentCommand, isRestylableComponent, ComponentStyle as RestyleableComponentStyle } from './RestylableComponent';
-import ImageBackground from './ImageBackground';
-export { Stroke, TextComponent as Text, RestyleableComponent, createRestyleComponentCommand, isRestylableComponent, RestyleableComponentStyle, TextComponent, Stroke as StrokeComponent, ImageBackground as BackgroundComponent, ImageComponent, };
+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/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;