js-draw 0.25.1 → 1.0.1

package/dist/mjs/localization.mjs

@@ -1,21 +1,22 @@
-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);
-};
 import  { defaultCommandLocalization }  from './commands/localization.mjs';
 import  { defaultComponentLocalization }  from './components/localization.mjs';
 import  { defaultTextRendererLocalization }  from './rendering/localization.mjs';
 import  { defaultToolbarLocalization }  from './toolbar/localization.mjs';
 import  { defaultToolLocalization }  from './tools/localization.mjs';
-export var defaultEditorLocalization = __assign(__assign(__assign(__assign(__assign(__assign({}, defaultToolbarLocalization), defaultToolLocalization), defaultCommandLocalization), defaultComponentLocalization), defaultTextRendererLocalization), { accessibilityInputInstructions: [
+export const defaultEditorLocalization = {
+    ...defaultToolbarLocalization,
+    ...defaultToolLocalization,
+    ...defaultCommandLocalization,
+    ...defaultComponentLocalization,
+    ...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); } });
+    ].join(' '),
+    loading: (percentage) => `Loading ${percentage}%...`,
+    imageEditor: 'Image Editor',
+    doneLoading: 'Done loading',
+    undoAnnouncement: (commandDescription) => `Undid ${commandDescription}`,
+    redoAnnouncement: (commandDescription) => `Redid ${commandDescription}`,
+};

package/dist/mjs/localizations/de.mjs

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

package/dist/mjs/localizations/en.mjs

@@ -1,15 +1,6 @@
-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);
-};
 import  { defaultEditorLocalization }  from '../localization.mjs';
 // Default localizations are already in English.
-var localization = __assign({}, defaultEditorLocalization);
+const localization = {
+    ...defaultEditorLocalization,
+};
 export default localization;

package/dist/mjs/localizations/es.mjs

@@ -1,29 +1,68 @@
-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);
-};
 import  { defaultEditorLocalization }  from '../localization.mjs';
 // A partial Spanish localization.
-var localization = __assign(__assign({}, defaultEditorLocalization), { 
+const localization = {
+    ...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', 
+    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', roundedTipPen: 'Lapiz Redondeado', 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: ' });
+    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',
+    roundedTipPen: 'Lapiz Redondeado',
+    selectPenTip: '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`;
+    },
+    colorChangedAnnouncement: function (color) {
+        return `Color fue cambiado a ${color}`;
+    },
+    keyboardPanZoom: 'Mover la pantalla con el teclado',
+    penTool: function (penId) {
+        return `Lapiz ${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: (size, units) => `Tamaño del imagen: ${size} ${units}`,
+    imageLoadError: (message) => `Error cargando imagen: ${message}`,
+    toggleOverflow: 'Más',
+    documentProperties: 'Fondo',
+    imageWidthOption: 'Ancho',
+    imageHeightOption: 'Alto',
+    backgroundColor: 'Color de fondo: '
+};
 export default localization;

package/dist/mjs/localizations/getLocalizationTable.mjs

@@ -2,14 +2,14 @@ import  { defaultEditorLocalization }  from '../localization.mjs';
 import  de  from './de.mjs';
 import  en  from './en.mjs';
 import  es  from './es.mjs';
-export var allLocales = {
-    de: de,
-    en: en,
-    es: es,
+export const allLocales = {
+    de,
+    en,
+    es,
 };
 // [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);
+const languageFromLocale = (locale) => {
+    const matches = /^(\w+)[_-](\w+)$/.exec(locale);
     if (!matches) {
         // If not in languageCode_region format, the locale should be the
         // languageCode. Return that.
@@ -22,11 +22,10 @@ var languageFromLocale = function (locale) {
  * the list of `userLocales`. If there is no matching language, returns
  * `defaultLocalizationTable`.
  */
-export 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);
+export const matchingLocalizationTable = (userLocales, localizationTables, defaultLocalizationTable) => {
+    let prevLanguage;
+    for (const locale of userLocales) {
+        const language = languageFromLocale(locale);
         // If the specific localization of the language is not available, but
         // a localization for the language is,
         if (prevLanguage && language !== prevLanguage) {
@@ -54,8 +53,8 @@ export var matchingLocalizationTable = function (userLocales, localizationTables
  * Returns the default localization table if no appropriate localization
  * exists.
  */
-var getLocalizationTable = function (userLocales) {
-    userLocales !== null && userLocales !== void 0 ? userLocales : (userLocales = navigator.languages);
+const getLocalizationTable = (userLocales) => {
+    userLocales ??= navigator.languages;
     return matchingLocalizationTable(userLocales, allLocales, defaultEditorLocalization);
 };
 export default getLocalizationTable;

package/dist/mjs/rendering/Display.d.ts

@@ -1,8 +1,7 @@
 import AbstractRenderer from './renderers/AbstractRenderer';
 import { Editor } from '../Editor';
-import { Point2 } from '../math/Vec2';
+import { Point2, Color4 } from '@js-draw/math';
 import RenderingCache from './caching/RenderingCache';
-import Color4 from '../Color4';
 export declare enum RenderingMode {
     DummyRenderer = 0,
     CanvasRenderer = 1

package/dist/mjs/rendering/Display.mjs

@@ -1,10 +1,9 @@
 import  CanvasRenderer  from './renderers/CanvasRenderer.mjs';
 import  { EditorEventType }  from '../types.mjs';
 import  DummyRenderer  from './renderers/DummyRenderer.mjs';
-import  { Vec2 }  from '../math/Vec2.mjs';
+import { Vec2, Color4 } from '@js-draw/math';
 import  RenderingCache  from './caching/RenderingCache.mjs';
 import  TextOnlyRenderer  from './renderers/TextOnlyRenderer.mjs';
-import  Color4  from '../Color4.mjs';
 export var RenderingMode;
 (function (RenderingMode) {
     RenderingMode[RenderingMode["DummyRenderer"] = 0] = "DummyRenderer";
@@ -23,10 +22,9 @@ export var RenderingMode;
  * const colorAtCenter = editor.display.getColorAt(center);
  * ```
  */
-var Display = /** @class */ (function () {
+export default class Display {
     /** @internal */
-    function Display(editor, mode, parent) {
-        var _this = this;
+    constructor(editor, mode, parent) {
         this.editor = editor;
         this.parent = parent;
         this.textRerenderOutput = null;
@@ -34,7 +32,7 @@ var Display = /** @class */ (function () {
          * @returns the color at the given point on the dry ink renderer, or `null` if `screenPos`
          * 	is not on the display.
          */
-        this.getColorAt = function (_screenPos) {
+        this.getColorAt = (_screenPos) => {
             return null;
         };
         if (mode === RenderingMode.CanvasRenderer) {
@@ -45,13 +43,13 @@ var Display = /** @class */ (function () {
             this.wetInkRenderer = new DummyRenderer(editor.viewport);
         }
         else {
-            throw new Error("Unknown rendering mode, ".concat(mode, "!"));
+            throw new Error(`Unknown rendering mode, ${mode}!`);
         }
         this.textRenderer = new TextOnlyRenderer(editor.viewport, editor.localization);
         this.initializeTextRendering();
-        var cacheBlockResolution = Vec2.of(600, 600);
+        const cacheBlockResolution = Vec2.of(600, 600);
         this.cache = new RenderingCache({
-            createRenderer: function () {
+            createRenderer: () => {
                 if (mode === RenderingMode.DummyRenderer) {
                     return new DummyRenderer(editor.viewport);
                 }
@@ -60,14 +58,14 @@ var Display = /** @class */ (function () {
                 }
                 // Make the canvas slightly larger than each cache block to prevent
                 // seams.
-                var canvas = document.createElement('canvas');
+                const canvas = document.createElement('canvas');
                 canvas.width = cacheBlockResolution.x + 1;
                 canvas.height = cacheBlockResolution.y + 1;
-                var ctx = canvas.getContext('2d');
+                const ctx = canvas.getContext('2d');
                 return new CanvasRenderer(ctx, editor.viewport);
             },
-            isOfCorrectType: function (renderer) {
-                return _this.dryInkRenderer.canRenderFromWithoutDataLoss(renderer);
+            isOfCorrectType: (renderer) => {
+                return this.dryInkRenderer.canRenderFromWithoutDataLoss(renderer);
             },
             blockResolution: cacheBlockResolution,
             cacheSize: 600 * 600 * 4 * 90,
@@ -78,43 +76,33 @@ var Display = /** @class */ (function () {
             // Require about 105 strokes with 4 parts each to use the cache at all.
             minProportionalRenderTimeToUseCache: 105 * 4,
         });
-        this.editor.notifier.on(EditorEventType.DisplayResized, function (event) {
-            var _a;
+        this.editor.notifier.on(EditorEventType.DisplayResized, event => {
             if (event.kind !== EditorEventType.DisplayResized) {
                 throw new Error('Mismatched event.kinds!');
             }
-            (_a = _this.resizeSurfacesCallback) === null || _a === void 0 ? void 0 : _a.call(_this);
+            this.resizeSurfacesCallback?.();
         });
     }
-    Object.defineProperty(Display.prototype, "width", {
-        /**
-         * @returns the visible width of the display (e.g. how much
-         * space the display's element takes up in the x direction
-         * in the DOM).
-         */
-        get: function () {
-            return this.dryInkRenderer.displaySize().x;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Display.prototype, "height", {
-        get: function () {
-            return this.dryInkRenderer.displaySize().y;
-        },
-        enumerable: false,
-        configurable: true
-    });
+    /**
+     * @returns the visible width of the display (e.g. how much
+     * space the display's element takes up in the x direction
+     * in the DOM).
+     */
+    get width() {
+        return this.dryInkRenderer.displaySize().x;
+    }
+    get height() {
+        return this.dryInkRenderer.displaySize().y;
+    }
     /** @internal */
-    Display.prototype.getCache = function () {
+    getCache() {
         return this.cache;
-    };
-    Display.prototype.initializeCanvasRendering = function () {
-        var _this = this;
-        var dryInkCanvas = document.createElement('canvas');
-        var wetInkCanvas = document.createElement('canvas');
-        var dryInkCtx = dryInkCanvas.getContext('2d');
-        var wetInkCtx = wetInkCanvas.getContext('2d');
+    }
+    initializeCanvasRendering() {
+        const dryInkCanvas = document.createElement('canvas');
+        const wetInkCanvas = document.createElement('canvas');
+        const dryInkCtx = dryInkCanvas.getContext('2d');
+        const wetInkCtx = wetInkCanvas.getContext('2d');
         this.dryInkRenderer = new CanvasRenderer(dryInkCtx, this.editor.viewport);
         this.wetInkRenderer = new CanvasRenderer(wetInkCtx, this.editor.viewport);
         dryInkCanvas.className = 'dryInkCanvas';
@@ -123,8 +111,8 @@ var Display = /** @class */ (function () {
             this.parent.appendChild(dryInkCanvas);
             this.parent.appendChild(wetInkCanvas);
         }
-        this.resizeSurfacesCallback = function () {
-            var hasSizeMismatch = function (canvas) {
+        this.resizeSurfacesCallback = () => {
+            const hasSizeMismatch = (canvas) => {
                 return canvas.clientHeight !== canvas.height || canvas.clientWidth !== canvas.width;
             };
             // Ensure that the drawing surfaces sizes match the
@@ -134,86 +122,81 @@ var Display = /** @class */ (function () {
                 dryInkCanvas.height = dryInkCanvas.clientHeight;
                 wetInkCanvas.width = wetInkCanvas.clientWidth;
                 wetInkCanvas.height = wetInkCanvas.clientHeight;
-                _this.editor.notifier.dispatch(EditorEventType.DisplayResized, {
+                this.editor.notifier.dispatch(EditorEventType.DisplayResized, {
                     kind: EditorEventType.DisplayResized,
-                    newSize: Vec2.of(_this.width, _this.height),
+                    newSize: Vec2.of(this.width, this.height),
                 });
             }
         };
         this.resizeSurfacesCallback();
-        this.flattenCallback = function () {
+        this.flattenCallback = () => {
             dryInkCtx.drawImage(wetInkCanvas, 0, 0);
         };
-        this.getColorAt = function (screenPos) {
-            var pixel = dryInkCtx.getImageData(screenPos.x, screenPos.y, 1, 1);
-            var data = pixel === null || pixel === void 0 ? void 0 : pixel.data;
+        this.getColorAt = (screenPos) => {
+            const pixel = dryInkCtx.getImageData(screenPos.x, screenPos.y, 1, 1);
+            const data = pixel?.data;
             if (data) {
-                var color = Color4.ofRGBA(data[0] / 255, data[1] / 255, data[2] / 255, data[3] / 255);
+                const color = Color4.ofRGBA(data[0] / 255, data[1] / 255, data[2] / 255, data[3] / 255);
                 return color;
             }
             return null;
         };
-    };
-    Display.prototype.initializeTextRendering = function () {
-        var _this = this;
-        var textRendererOutputContainer = document.createElement('div');
+    }
+    initializeTextRendering() {
+        const textRendererOutputContainer = document.createElement('div');
         textRendererOutputContainer.classList.add('textRendererOutputContainer');
-        var rerenderButton = document.createElement('button');
+        const rerenderButton = document.createElement('button');
         rerenderButton.classList.add('rerenderButton');
         rerenderButton.innerText = this.editor.localization.rerenderAsText;
         this.textRerenderOutput = document.createElement('div');
         this.textRerenderOutput.setAttribute('aria-live', 'polite');
-        rerenderButton.onclick = function () {
-            _this.rerenderAsText();
+        rerenderButton.onclick = () => {
+            this.rerenderAsText();
         };
         textRendererOutputContainer.replaceChildren(rerenderButton, this.textRerenderOutput);
         this.editor.createHTMLOverlay(textRendererOutputContainer);
-    };
+    }
     /**
      * Rerenders the text-based display.
      * The text-based display is intended for screen readers and can be navigated to by pressing `tab`.
      */
-    Display.prototype.rerenderAsText = function () {
+    rerenderAsText() {
         this.textRenderer.clear();
         this.editor.image.render(this.textRenderer, this.editor.viewport);
         if (this.textRerenderOutput) {
             this.textRerenderOutput.innerText = this.textRenderer.getDescription();
         }
-    };
+    }
     /**
      * Clears the main drawing surface and otherwise prepares for a rerender.
      *
      * @returns the dry ink renderer.
      */
-    Display.prototype.startRerender = function () {
-        var _a;
-        (_a = this.resizeSurfacesCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+    startRerender() {
+        this.resizeSurfacesCallback?.();
         this.dryInkRenderer.clear();
         return this.dryInkRenderer;
-    };
+    }
     /**
      * If `draftMode`, the dry ink renderer is configured to render
      * low-quality output.
      */
-    Display.prototype.setDraftMode = function (draftMode) {
+    setDraftMode(draftMode) {
         this.dryInkRenderer.setDraftMode(draftMode);
-    };
+    }
     /** @internal */
-    Display.prototype.getDryInkRenderer = function () {
+    getDryInkRenderer() {
         return this.dryInkRenderer;
-    };
+    }
     /**
      * @returns The renderer used for showing action previews (e.g. an unfinished stroke).
      * The `wetInkRenderer`'s surface is stacked above the `dryInkRenderer`'s.
      */
-    Display.prototype.getWetInkRenderer = function () {
+    getWetInkRenderer() {
         return this.wetInkRenderer;
-    };
+    }
     /** Re-renders the contents of the wetInkRenderer onto the dryInkRenderer. */
-    Display.prototype.flatten = function () {
-        var _a;
-        (_a = this.flattenCallback) === null || _a === void 0 ? void 0 : _a.call(this);
-    };
-    return Display;
-}());
-export default Display;
+    flatten() {
+        this.flattenCallback?.();
+    }
+}

package/dist/mjs/rendering/RenderablePathSpec.d.ts

@@ -0,0 +1,15 @@
+import { Path, PathCommand, Point2, Rect2 } from '@js-draw/math';
+import RenderingStyle from './RenderingStyle';
+interface RenderablePathSpec {
+    startPoint: Point2;
+    commands: PathCommand[];
+    style: RenderingStyle;
+    path?: Path;
+}
+export declare const pathFromRenderable: (renderable: RenderablePathSpec) => Path;
+export declare const pathToRenderable: (path: Path, style: RenderingStyle) => RenderablePathSpec;
+/**
+ * @returns a Path that, when rendered, looks roughly equivalent to the given path.
+ */
+export declare const visualEquivalent: (renderablePath: RenderablePathSpec, visibleRect: Rect2) => RenderablePathSpec;
+export default RenderablePathSpec;