js-draw 0.23.0 → 0.24.0

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

@@ -0,0 +1,225 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StrokeSmoother = void 0;
+var Vec2_1 = require("../../math/Vec2");
+var Rect2_1 = require("../../math/shapes/Rect2");
+var LineSegment2_1 = require("../../math/shapes/LineSegment2");
+var QuadraticBezier_1 = require("../../math/shapes/QuadraticBezier");
+// Handles stroke smoothing
+var StrokeSmoother = /** @class */ (function () {
+    function StrokeSmoother(startPoint, 
+    // Maximum distance from the actual curve (irrespective of stroke width)
+    // for which a point is considered 'part of the curve'.
+    // Note that the maximum will be smaller if the stroke width is less than
+    // [maxFitAllowed].
+    minFitAllowed, maxFitAllowed, onCurveAdded) {
+        this.startPoint = startPoint;
+        this.minFitAllowed = minFitAllowed;
+        this.maxFitAllowed = maxFitAllowed;
+        this.onCurveAdded = onCurveAdded;
+        this.isFirstSegment = true;
+        this.lastExitingVec = null;
+        this.currentCurve = null;
+        this.lastPoint = this.startPoint;
+        this.buffer = [this.startPoint.pos];
+        this.momentum = Vec2_1.Vec2.zero;
+        this.currentCurve = null;
+        this.curveStartWidth = startPoint.width;
+        this.bbox = new Rect2_1.default(this.startPoint.pos.x, this.startPoint.pos.y, 0, 0);
+    }
+    StrokeSmoother.prototype.getBBox = function () {
+        return this.bbox;
+    };
+    StrokeSmoother.prototype.preview = function () {
+        if (!this.currentCurve) {
+            return null;
+        }
+        return this.currentSegmentToPath();
+    };
+    // Returns the distance between the start, control, and end points of the curve.
+    StrokeSmoother.prototype.approxCurrentCurveLength = function () {
+        if (!this.currentCurve) {
+            return 0;
+        }
+        var startPt = this.currentCurve.p0;
+        var controlPt = this.currentCurve.p1;
+        var endPt = this.currentCurve.p2;
+        var toControlDist = startPt.minus(controlPt).length();
+        var toEndDist = endPt.minus(controlPt).length();
+        return toControlDist + toEndDist;
+    };
+    StrokeSmoother.prototype.finalizeCurrentCurve = function () {
+        // Case where no points have been added
+        if (!this.currentCurve) {
+            return;
+        }
+        this.onCurveAdded(this.currentSegmentToPath());
+        var lastPoint = this.buffer[this.buffer.length - 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)
+        this.buffer = [
+            this.buffer[this.buffer.length - 2], lastPoint,
+        ];
+        this.currentCurve = null;
+        this.isFirstSegment = false;
+    };
+    // Returns [upper curve, connector, lower curve]
+    StrokeSmoother.prototype.currentSegmentToPath = function () {
+        if (this.currentCurve == null) {
+            throw new Error('Invalid State: currentCurve is null!');
+        }
+        var startVec = this.currentCurve.normal(0).normalized();
+        if (!isFinite(startVec.magnitude())) {
+            throw new Error("startVec(".concat(startVec, ") is NaN or \u221E"));
+        }
+        var startPt = this.currentCurve.at(0);
+        var endPt = this.currentCurve.at(1);
+        var controlPoint = this.currentCurve.p1;
+        return {
+            startPoint: startPt,
+            controlPoint: controlPoint,
+            endPoint: endPt,
+            startWidth: this.curveStartWidth,
+            endWidth: this.curveEndWidth,
+        };
+    };
+    // Compute the direction of the velocity at the end of this.buffer
+    StrokeSmoother.prototype.computeExitingVec = function () {
+        return this.momentum.normalized().times(this.lastPoint.width / 2);
+    };
+    StrokeSmoother.prototype.addPoint = function (newPoint) {
+        var _this = this;
+        var _a, _b;
+        if (this.lastPoint) {
+            // Ignore points that are identical
+            var fuzzEq = 1e-10;
+            var deltaTime = newPoint.time - this.lastPoint.time;
+            if (newPoint.pos.eq(this.lastPoint.pos, fuzzEq) || deltaTime === 0) {
+                return;
+            }
+            else if (isNaN(newPoint.pos.magnitude())) {
+                console.warn('Discarding NaN point.', newPoint);
+                return;
+            }
+            var threshold = Math.min(this.lastPoint.width, newPoint.width) / 3;
+            var shouldSnapToInitial = this.startPoint.pos.minus(newPoint.pos).magnitude() < threshold
+                && this.isFirstSegment;
+            // Snap to the starting point if the stroke is contained within a small ball centered
+            // at the starting point.
+            // This allows us to create a circle/dot at the start of the stroke.
+            if (shouldSnapToInitial) {
+                return;
+            }
+            var velocity = newPoint.pos.minus(this.lastPoint.pos).times(1 / (deltaTime) * 1000);
+            this.momentum = this.momentum.lerp(velocity, 0.9);
+        }
+        var lastPoint = (_a = this.lastPoint) !== null && _a !== void 0 ? _a : newPoint;
+        this.lastPoint = newPoint;
+        this.buffer.push(newPoint.pos);
+        var pointRadius = newPoint.width;
+        var prevEndWidth = this.curveEndWidth;
+        this.curveEndWidth = pointRadius;
+        // recompute bbox
+        this.bbox = this.bbox.grownToPoint(newPoint.pos, pointRadius);
+        // If the last curve just ended or it's the first curve,
+        if (this.currentCurve === null) {
+            var p1 = lastPoint.pos;
+            var p2 = lastPoint.pos.plus((_b = this.lastExitingVec) !== null && _b !== void 0 ? _b : Vec2_1.Vec2.unitX);
+            var p3 = newPoint.pos;
+            // Quadratic Bézier curve
+            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.
+                this.curveStartWidth = (this.curveStartWidth + pointRadius) / 2;
+            }
+            else {
+                this.curveStartWidth = prevEndWidth;
+            }
+        }
+        // If there isn't an entering vector (e.g. because this.isFirstCurve), approximate it.
+        var enteringVec = this.lastExitingVec;
+        if (!enteringVec) {
+            var sampleIdx = Math.ceil(this.buffer.length / 2);
+            if (sampleIdx === 0 || sampleIdx >= this.buffer.length) {
+                sampleIdx = this.buffer.length - 1;
+            }
+            enteringVec = this.buffer[sampleIdx].minus(this.buffer[0]);
+        }
+        var exitingVec = this.computeExitingVec();
+        // Find the intersection between the entering vector and the exiting vector
+        var maxRelativeLength = 2;
+        var segmentStart = this.buffer[0];
+        var segmentEnd = newPoint.pos;
+        var startEndDist = segmentEnd.minus(segmentStart).magnitude();
+        var maxControlPointDist = maxRelativeLength * startEndDist;
+        // Exit in cases where we would divide by zero
+        if (maxControlPointDist === 0 || exitingVec.magnitude() === 0 || !isFinite(exitingVec.magnitude())) {
+            return;
+        }
+        console.assert(isFinite(enteringVec.magnitude()), 'Pre-normalized enteringVec has NaN or ∞ magnitude!');
+        enteringVec = enteringVec.normalized();
+        exitingVec = exitingVec.normalized();
+        console.assert(isFinite(enteringVec.magnitude()), 'Normalized enteringVec has NaN or ∞ magnitude!');
+        var lineFromStart = new LineSegment2_1.default(segmentStart, segmentStart.plus(enteringVec.times(maxControlPointDist)));
+        var lineFromEnd = new LineSegment2_1.default(segmentEnd.minus(exitingVec.times(maxControlPointDist)), segmentEnd);
+        var intersection = lineFromEnd.intersection(lineFromStart);
+        // Position the control point at this intersection
+        var controlPoint = null;
+        if (intersection) {
+            controlPoint = intersection.point;
+        }
+        // No intersection or the intersection is one of the end points?
+        if (!controlPoint || segmentStart.eq(controlPoint) || segmentEnd.eq(controlPoint)) {
+            // Position the control point closer to the first -- the connecting
+            // segment will be roughly a line.
+            controlPoint = segmentStart.plus(enteringVec.times(startEndDist / 4));
+        }
+        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!');
+        var prevCurve = this.currentCurve;
+        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.
+        var curveMatchesPoints = function (curve) {
+            var minFit = Math.min(Math.max(Math.min(_this.curveStartWidth, _this.curveEndWidth) / 4, _this.minFitAllowed), _this.maxFitAllowed);
+            // The sum of distances greater than minFit must not exceed this:
+            var maxNonMatchingDistSum = minFit;
+            // Sum of distances greater than minFit.
+            var nonMatchingDistSum = 0;
+            for (var _i = 0, _a = _this.buffer; _i < _a.length; _i++) {
+                var point = _a[_i];
+                var dist = curve.approximateDistance(point);
+                if (dist > minFit) {
+                    // Use the more accurate distance function
+                    dist = curve.distance(point);
+                    nonMatchingDistSum += Math.max(0, dist - minFit);
+                    if (nonMatchingDistSum > maxNonMatchingDistSum) {
+                        return false; // false: Curve doesn't match points well enough.
+                    }
+                }
+            }
+            return true;
+        };
+        if (this.buffer.length > 3 && this.approxCurrentCurveLength() > this.curveStartWidth / 2) {
+            if (!curveMatchesPoints(this.currentCurve)) {
+                // Use a curve that better fits the points
+                this.currentCurve = prevCurve;
+                this.curveEndWidth = prevEndWidth;
+                // Reset the last point -- the current point was not added to the curve.
+                this.lastPoint = lastPoint;
+                this.finalizeCurrentCurve();
+                return;
+            }
+        }
+    };
+    return StrokeSmoother;
+}());
+exports.StrokeSmoother = StrokeSmoother;
+exports.default = StrokeSmoother;

package/dist/cjs/components/util/describeComponentList.d.ts

@@ -0,0 +1,4 @@
+import AbstractComponent from '../AbstractComponent';
+import { ImageComponentLocalization } from '../localization';
+declare const _default: (localizationTable: ImageComponentLocalization, elems: AbstractComponent[]) => string;
+export default _default;

package/dist/cjs/components/util/describeComponentList.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// Returns the description of all given elements, if identical, otherwise,
+// returns null.
+exports.default = (function (localizationTable, elems) {
+    if (elems.length === 0) {
+        return null;
+    }
+    var description = elems[0].description(localizationTable);
+    for (var _i = 0, elems_1 = elems; _i < elems_1.length; _i++) {
+        var elem = elems_1[_i];
+        if (elem.description(localizationTable) !== description) {
+            return null;
+        }
+    }
+    return description;
+});

package/dist/cjs/lib.d.ts

@@ -0,0 +1,66 @@
+/**
+ * The main entrypoint for the NPM package. Everything exported by this file
+ * is available through the [`js-draw` package](https://www.npmjs.com/package/js-draw).
+ *
+ * @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
+ */
+import Editor, { EditorSettings } from './Editor';
+export { default as EditorImage } from './EditorImage';
+export * from './types';
+export { default as getLocalizationTable, matchingLocalizationTable } from './localizations/getLocalizationTable';
+export * from './localization';
+export { default as Color4 } from './Color4';
+export { default as SVGLoader } from './SVGLoader';
+export { default as Viewport } from './Viewport';
+export * from './math/lib';
+export * from './components/lib';
+export * from './commands/lib';
+export * from './tools/lib';
+export * from './toolbar/lib';
+export * from './rendering/lib';
+export * from './testing/lib';
+export * from './shortcuts/lib';
+export { default as EventDispatcher } from './EventDispatcher';
+export { default as Pointer, PointerDevice } from './Pointer';
+export { default as HTMLToolbar } from './toolbar/HTMLToolbar';
+export { default as UndoRedoHistory } from './UndoRedoHistory';
+export { Editor, EditorSettings };
+export default Editor;

package/dist/cjs/lib.js

@@ -0,0 +1,94 @@
+"use strict";
+/**
+ * The main entrypoint for the NPM package. Everything exported by this file
+ * is available through the [`js-draw` package](https://www.npmjs.com/package/js-draw).
+ *
+ * @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
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Editor = exports.UndoRedoHistory = exports.HTMLToolbar = exports.PointerDevice = exports.Pointer = exports.EventDispatcher = exports.Viewport = exports.SVGLoader = exports.Color4 = exports.matchingLocalizationTable = exports.getLocalizationTable = exports.EditorImage = void 0;
+var Editor_1 = require("./Editor");
+exports.Editor = Editor_1.default;
+var EditorImage_1 = require("./EditorImage");
+Object.defineProperty(exports, "EditorImage", { enumerable: true, get: function () { return EditorImage_1.default; } });
+__exportStar(require("./types"), exports);
+var getLocalizationTable_1 = require("./localizations/getLocalizationTable");
+Object.defineProperty(exports, "getLocalizationTable", { enumerable: true, get: function () { return getLocalizationTable_1.default; } });
+Object.defineProperty(exports, "matchingLocalizationTable", { enumerable: true, get: function () { return getLocalizationTable_1.matchingLocalizationTable; } });
+__exportStar(require("./localization"), exports);
+var Color4_1 = require("./Color4");
+Object.defineProperty(exports, "Color4", { enumerable: true, get: function () { return Color4_1.default; } });
+var SVGLoader_1 = require("./SVGLoader");
+Object.defineProperty(exports, "SVGLoader", { enumerable: true, get: function () { return SVGLoader_1.default; } });
+var Viewport_1 = require("./Viewport");
+Object.defineProperty(exports, "Viewport", { enumerable: true, get: function () { return Viewport_1.default; } });
+__exportStar(require("./math/lib"), exports);
+__exportStar(require("./components/lib"), exports);
+__exportStar(require("./commands/lib"), exports);
+__exportStar(require("./tools/lib"), exports);
+__exportStar(require("./toolbar/lib"), exports);
+__exportStar(require("./rendering/lib"), exports);
+__exportStar(require("./testing/lib"), exports);
+__exportStar(require("./shortcuts/lib"), exports);
+var EventDispatcher_1 = require("./EventDispatcher");
+Object.defineProperty(exports, "EventDispatcher", { enumerable: true, get: function () { return EventDispatcher_1.default; } });
+var Pointer_1 = require("./Pointer");
+Object.defineProperty(exports, "Pointer", { enumerable: true, get: function () { return Pointer_1.default; } });
+Object.defineProperty(exports, "PointerDevice", { enumerable: true, get: function () { return Pointer_1.PointerDevice; } });
+var HTMLToolbar_1 = require("./toolbar/HTMLToolbar");
+Object.defineProperty(exports, "HTMLToolbar", { enumerable: true, get: function () { return HTMLToolbar_1.default; } });
+var UndoRedoHistory_1 = require("./UndoRedoHistory");
+Object.defineProperty(exports, "UndoRedoHistory", { enumerable: true, get: function () { return UndoRedoHistory_1.default; } });
+exports.default = Editor_1.default;

package/dist/cjs/localization.js

@@ -0,0 +1,24 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultEditorLocalization = void 0;
+var localization_1 = require("./commands/localization");
+var localization_2 = require("./components/localization");
+var localization_3 = require("./rendering/localization");
+var localization_4 = require("./toolbar/localization");
+var localization_5 = require("./tools/localization");
+exports.defaultEditorLocalization = __assign(__assign(__assign(__assign(__assign(__assign({}, localization_4.defaultToolbarLocalization), localization_5.defaultToolLocalization), localization_1.defaultCommandLocalization), localization_2.defaultComponentLocalization), localization_3.defaultTextRendererLocalization), { accessibilityInputInstructions: [
+        'Press "t" to read the contents of the viewport as text.',
+        'Use the arrow keys to move the viewport, click and drag to draw strokes.',
+        'Press "w" to zoom in and "s" to zoom out.',
+    ].join(' '), loading: function (percentage) { return "Loading ".concat(percentage, "%..."); }, imageEditor: 'Image Editor', doneLoading: 'Done loading', undoAnnouncement: function (commandDescription) { return "Undid ".concat(commandDescription); }, redoAnnouncement: function (commandDescription) { return "Redid ".concat(commandDescription); } });

package/dist/cjs/localizations/de.js

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

package/dist/cjs/localizations/en.js

@@ -0,0 +1,17 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var localization_1 = require("../localization");
+// Default localizations are already in English.
+var localization = __assign({}, localization_1.defaultEditorLocalization);
+exports.default = localization;

package/dist/cjs/localizations/es.js

@@ -0,0 +1,31 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var localization_1 = require("../localization");
+// A partial Spanish localization.
+var localization = __assign(__assign({}, localization_1.defaultEditorLocalization), { 
+    // Strings for the main editor interface
+    // (see src/localization.ts)
+    loading: function (percentage) { return "Cargando: ".concat(percentage, "%..."); }, imageEditor: 'Editor de dibujos', undoAnnouncement: function (commandDescription) { return "".concat(commandDescription, " fue deshecho"); }, redoAnnouncement: function (commandDescription) { return "".concat(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', 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: function (toolName) {
+        return "Men\u00FA por ".concat(toolName, " es visible");
+    }, dropdownHidden: function (toolName) {
+        return "Men\u00FA por ".concat(toolName, " fue ocultado");
+    }, colorChangedAnnouncement: function (color) {
+        return "Color fue cambiado a ".concat(color);
+    }, keyboardPanZoom: 'Mover la pantalla con el teclado', penTool: function (penId) {
+        return "Lapiz ".concat(penId);
+    }, selectionTool: 'Selecciona', eraserTool: 'Borrador', textTool: 'Texto', enterTextToInsert: 'Entra texto', textSize: 'Tamaño', rerenderAsText: 'Redibuja la pantalla al texto', lockRotation: 'Bloquea rotación', image: 'Imagen', imageSize: function (size, units) { return "Tama\u00F1o del imagen: ".concat(size, " ").concat(units); }, imageLoadError: function (message) { return "Error cargando imagen: ".concat(message); }, toggleOverflow: 'Más', documentProperties: 'Fondo', imageWidthOption: 'Ancho: ', imageHeightOption: 'Alto: ', backgroundColor: 'Color de fondo: ' });
+exports.default = localization;

package/dist/cjs/localizations/getLocalizationTable.d.ts

@@ -0,0 +1,17 @@
+import { EditorLocalization } from '../localization';
+export declare const allLocales: Record<string, EditorLocalization>;
+/**
+ * Return the localization table in `localizationTables` that best matches
+ * the list of `userLocales`. If there is no matching language, returns
+ * `defaultLocalizationTable`.
+ */
+export declare const matchingLocalizationTable: <T>(userLocales: readonly string[], localizationTables: Record<string, T>, defaultLocalizationTable: T) => T;
+/**
+ * Returns a localization table for the `Editor` that matches
+ * the user's current locale.
+ *
+ * Returns the default localization table if no appropriate localization
+ * exists.
+ */
+declare const getLocalizationTable: (userLocales?: readonly string[]) => EditorLocalization;
+export default getLocalizationTable;

package/dist/cjs/localizations/getLocalizationTable.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.matchingLocalizationTable = exports.allLocales = void 0;
+var localization_1 = require("../localization");
+var de_1 = require("./de");
+var en_1 = require("./en");
+var es_1 = require("./es");
+exports.allLocales = {
+    de: de_1.default,
+    en: en_1.default,
+    es: es_1.default,
+};
+// [locale]: A string in the format languageCode_Region or just languageCode. For example, en_US.
+var languageFromLocale = function (locale) {
+    var matches = /^(\w+)[_-](\w+)$/.exec(locale);
+    if (!matches) {
+        // If not in languageCode_region format, the locale should be the
+        // languageCode. Return that.
+        return locale;
+    }
+    return matches[1];
+};
+/**
+ * Return the localization table in `localizationTables` that best matches
+ * the list of `userLocales`. If there is no matching language, returns
+ * `defaultLocalizationTable`.
+ */
+var matchingLocalizationTable = function (userLocales, localizationTables, defaultLocalizationTable) {
+    var prevLanguage;
+    for (var _i = 0, userLocales_1 = userLocales; _i < userLocales_1.length; _i++) {
+        var locale = userLocales_1[_i];
+        var language = languageFromLocale(locale);
+        // If the specific localization of the language is not available, but
+        // a localization for the language is,
+        if (prevLanguage && language !== prevLanguage) {
+            if (prevLanguage in localizationTables) {
+                return localizationTables[prevLanguage];
+            }
+        }
+        // If the full locale (e.g. en_US) is available,
+        if (locale in localizationTables) {
+            return localizationTables[locale];
+        }
+        prevLanguage = language;
+    }
+    if (prevLanguage && prevLanguage in localizationTables) {
+        return localizationTables[prevLanguage];
+    }
+    else {
+        return defaultLocalizationTable;
+    }
+};
+exports.matchingLocalizationTable = matchingLocalizationTable;
+/**
+ * Returns a localization table for the `Editor` that matches
+ * the user's current locale.
+ *
+ * Returns the default localization table if no appropriate localization
+ * exists.
+ */
+var getLocalizationTable = function (userLocales) {
+    userLocales !== null && userLocales !== void 0 ? userLocales : (userLocales = navigator.languages);
+    return (0, exports.matchingLocalizationTable)(userLocales, exports.allLocales, localization_1.defaultEditorLocalization);
+};
+exports.default = getLocalizationTable;

package/dist/cjs/localizations/getLocalizationTable.test.d.ts

@@ -0,0 +1 @@
+export {};