js-draw 0.25.1 → 1.0.1

package/dist/cjs/inputEvents.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isPointerEvt = exports.keyPressEventFromHTMLEvent = exports.keyUpEventFromHTMLEvent = exports.InputEvtType = void 0;
+var InputEvtType;
+(function (InputEvtType) {
+    InputEvtType[InputEvtType["PointerDownEvt"] = 0] = "PointerDownEvt";
+    InputEvtType[InputEvtType["PointerMoveEvt"] = 1] = "PointerMoveEvt";
+    InputEvtType[InputEvtType["PointerUpEvt"] = 2] = "PointerUpEvt";
+    InputEvtType[InputEvtType["GestureCancelEvt"] = 3] = "GestureCancelEvt";
+    InputEvtType[InputEvtType["WheelEvt"] = 4] = "WheelEvt";
+    InputEvtType[InputEvtType["KeyPressEvent"] = 5] = "KeyPressEvent";
+    InputEvtType[InputEvtType["KeyUpEvent"] = 6] = "KeyUpEvent";
+    InputEvtType[InputEvtType["CopyEvent"] = 7] = "CopyEvent";
+    InputEvtType[InputEvtType["PasteEvent"] = 8] = "PasteEvent";
+})(InputEvtType || (exports.InputEvtType = InputEvtType = {}));
+// Constructor
+const keyEventFromHTMLEvent = (kind, event) => {
+    return {
+        kind,
+        key: event.key,
+        code: event.code,
+        ctrlKey: event.ctrlKey || event.metaKey,
+        altKey: event.altKey,
+        shiftKey: event.shiftKey,
+    };
+};
+const keyUpEventFromHTMLEvent = (event) => {
+    return keyEventFromHTMLEvent(InputEvtType.KeyUpEvent, event);
+};
+exports.keyUpEventFromHTMLEvent = keyUpEventFromHTMLEvent;
+const keyPressEventFromHTMLEvent = (event) => {
+    return keyEventFromHTMLEvent(InputEvtType.KeyPressEvent, event);
+};
+exports.keyPressEventFromHTMLEvent = keyPressEventFromHTMLEvent;
+const isPointerEvt = (event) => {
+    return event.kind === InputEvtType.PointerDownEvt
+        || event.kind === InputEvtType.PointerMoveEvt
+        || event.kind === InputEvtType.PointerUpEvt;
+};
+exports.isPointerEvt = isPointerEvt;

package/dist/cjs/lib.d.ts

@@ -3,8 +3,8 @@
  * is available through the [`js-draw` package](https://www.npmjs.com/package/js-draw).
  *
  * @example
- * ```
- * import { Editor, Vec3, Mat33 } from 'js-draw';
+ * ```ts,runnable
+ * import { Editor, Vec3, Mat33, ToolbarWidgetTag } from 'js-draw';
  *
  * // Apply js-draw CSS
  * import 'js-draw/styles';
@@ -14,8 +14,11 @@
  * (async () => {
  *   const editor = new Editor(document.body);
  *   const toolbar = editor.addToolbar();
+ *
+ *   // Increases the minimum height of the editor
  *   editor.getRootElement().style.height = '600px';
  *
+ *   // Loads from SVG data
  *   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>
@@ -24,13 +27,19 @@
  *       </svg>
  *   `);
  *
- *   toolbar.addActionButton({
- *      label: 'Save',
- *      icon: editor.icons.makeSaveIcon(),
- *   }, () => {
- *       const saveData = editor.toSVG().outerHTML;
+ *   // Adding tags to a toolbar button allows different styles to be applied.
+ *   // Also see addActionButton.
+ *   const buttonLabels = [ ToolbarWidgetTag.Save ];
  *
- *       // Do something with saveData
+ *   toolbar.addSaveButton(() => {
+ *     const saveData = editor.toSVG().outerHTML;
+ *
+ *     // Do something with saveData
+ *   });
+ *
+ *   toolbar.addExitButton(() => {
+ *     // Save/confirm exiting here?
+ *     editor.remove();
  *   });
  * })();
  * ```
@@ -38,19 +47,19 @@
  * @see
  * {@link Editor}
  * {@link Editor.loadFromSVG}
- * {@link HTMLToolbar.addActionButton }
+ * {@link AbstractToolbar.addActionButton }
  *
  * @packageDocumentation
  */
 import Editor, { EditorSettings } from './Editor';
 export { default as EditorImage } from './EditorImage';
 export * from './types';
+export * from './inputEvents';
 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 '@js-draw/math';
 export * from './components/lib';
 export * from './commands/lib';
 export * from './tools/lib';
@@ -60,7 +69,14 @@ 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 as __js_draw__version } from './version';
+import AbstractToolbar from './toolbar/AbstractToolbar';
+export { Editor, EditorSettings, AbstractToolbar, 
+/**
+ * Using the HTMLToolbar alias is deprecated. Use
+ * `AbstractToolbar` instead.
+ * @deprecated
+ */
+AbstractToolbar as HTMLToolbar, };
 export default Editor;

package/dist/cjs/lib.js

@@ -4,8 +4,8 @@
  * is available through the [`js-draw` package](https://www.npmjs.com/package/js-draw).
  *
  * @example
- * ```
- * import { Editor, Vec3, Mat33 } from 'js-draw';
+ * ```ts,runnable
+ * import { Editor, Vec3, Mat33, ToolbarWidgetTag } from 'js-draw';
  *
  * // Apply js-draw CSS
  * import 'js-draw/styles';
@@ -15,8 +15,11 @@
  * (async () => {
  *   const editor = new Editor(document.body);
  *   const toolbar = editor.addToolbar();
+ *
+ *   // Increases the minimum height of the editor
  *   editor.getRootElement().style.height = '600px';
  *
+ *   // Loads from SVG data
  *   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>
@@ -25,13 +28,19 @@
  *       </svg>
  *   `);
  *
- *   toolbar.addActionButton({
- *      label: 'Save',
- *      icon: editor.icons.makeSaveIcon(),
- *   }, () => {
- *       const saveData = editor.toSVG().outerHTML;
+ *   // Adding tags to a toolbar button allows different styles to be applied.
+ *   // Also see addActionButton.
+ *   const buttonLabels = [ ToolbarWidgetTag.Save ];
+ *
+ *   toolbar.addSaveButton(() => {
+ *     const saveData = editor.toSVG().outerHTML;
  *
- *       // Do something with saveData
+ *     // Do something with saveData
+ *   });
+ *
+ *   toolbar.addExitButton(() => {
+ *     // Save/confirm exiting here?
+ *     editor.remove();
  *   });
  * })();
  * ```
@@ -39,7 +48,7 @@
  * @see
  * {@link Editor}
  * {@link Editor.loadFromSVG}
- * {@link HTMLToolbar.addActionButton }
+ * {@link AbstractToolbar.addActionButton }
  *
  * @packageDocumentation
  */
@@ -57,24 +66,26 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
 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);
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 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.HTMLToolbar = exports.AbstractToolbar = exports.Editor = exports.__js_draw__version = exports.UndoRedoHistory = exports.PointerDevice = exports.Pointer = exports.EventDispatcher = exports.Viewport = exports.SVGLoader = exports.matchingLocalizationTable = exports.getLocalizationTable = exports.EditorImage = void 0;
+const Editor_1 = __importDefault(require("./Editor"));
 exports.Editor = Editor_1.default;
 var EditorImage_1 = require("./EditorImage");
-Object.defineProperty(exports, "EditorImage", { enumerable: true, get: function () { return EditorImage_1.default; } });
+Object.defineProperty(exports, "EditorImage", { enumerable: true, get: function () { return __importDefault(EditorImage_1).default; } });
 __exportStar(require("./types"), exports);
+__exportStar(require("./inputEvents"), exports);
 var getLocalizationTable_1 = require("./localizations/getLocalizationTable");
-Object.defineProperty(exports, "getLocalizationTable", { enumerable: true, get: function () { return getLocalizationTable_1.default; } });
+Object.defineProperty(exports, "getLocalizationTable", { enumerable: true, get: function () { return __importDefault(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; } });
+Object.defineProperty(exports, "SVGLoader", { enumerable: true, get: function () { return __importDefault(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);
+Object.defineProperty(exports, "Viewport", { enumerable: true, get: function () { return __importDefault(Viewport_1).default; } });
+__exportStar(require("@js-draw/math"), exports);
 __exportStar(require("./components/lib"), exports);
 __exportStar(require("./commands/lib"), exports);
 __exportStar(require("./tools/lib"), exports);
@@ -83,12 +94,16 @@ __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; } });
+Object.defineProperty(exports, "EventDispatcher", { enumerable: true, get: function () { return __importDefault(EventDispatcher_1).default; } });
 var Pointer_1 = require("./Pointer");
-Object.defineProperty(exports, "Pointer", { enumerable: true, get: function () { return Pointer_1.default; } });
+Object.defineProperty(exports, "Pointer", { enumerable: true, get: function () { return __importDefault(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; } });
+Object.defineProperty(exports, "UndoRedoHistory", { enumerable: true, get: function () { return __importDefault(UndoRedoHistory_1).default; } });
+// @internal
+var version_1 = require("./version");
+Object.defineProperty(exports, "__js_draw__version", { enumerable: true, get: function () { return __importDefault(version_1).default; } });
+const AbstractToolbar_1 = __importDefault(require("./toolbar/AbstractToolbar"));
+exports.AbstractToolbar = AbstractToolbar_1.default;
+exports.HTMLToolbar = AbstractToolbar_1.default;
 exports.default = Editor_1.default;

package/dist/cjs/localization.js

@@ -1,24 +1,25 @@
 "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: [
+const localization_1 = require("./commands/localization");
+const localization_2 = require("./components/localization");
+const localization_3 = require("./rendering/localization");
+const localization_4 = require("./toolbar/localization");
+const localization_5 = require("./tools/localization");
+exports.defaultEditorLocalization = {
+    ...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); } });
+    ].join(' '),
+    loading: (percentage) => `Loading ${percentage}%...`,
+    imageEditor: 'Image Editor',
+    doneLoading: 'Done loading',
+    undoAnnouncement: (commandDescription) => `Undid ${commandDescription}`,
+    redoAnnouncement: (commandDescription) => `Redid ${commandDescription}`,
+};

package/dist/cjs/localizations/de.js

@@ -1,17 +1,121 @@
 "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");
+const 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: ', 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 = {
+    ...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',
+    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`,
+};
 exports.default = localization;

package/dist/cjs/localizations/en.js

@@ -1,17 +1,8 @@
 "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");
+const localization_1 = require("../localization");
 // Default localizations are already in English.
-var localization = __assign({}, localization_1.defaultEditorLocalization);
+const localization = {
+    ...localization_1.defaultEditorLocalization,
+};
 exports.default = localization;

package/dist/cjs/localizations/es.js

@@ -1,31 +1,70 @@
 "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");
+const localization_1 = require("../localization");
 // A partial Spanish localization.
-var localization = __assign(__assign({}, localization_1.defaultEditorLocalization), { 
+const localization = {
+    ...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', 
+    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: '
+};
 exports.default = localization;

package/dist/cjs/localizations/getLocalizationTable.js

@@ -1,18 +1,21 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 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");
+const localization_1 = require("../localization");
+const de_1 = __importDefault(require("./de"));
+const en_1 = __importDefault(require("./en"));
+const es_1 = __importDefault(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);
+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.
@@ -25,11 +28,10 @@ var languageFromLocale = function (locale) {
  * 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);
+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) {
@@ -58,8 +60,8 @@ exports.matchingLocalizationTable = matchingLocalizationTable;
  * 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 (0, exports.matchingLocalizationTable)(userLocales, exports.allLocales, localization_1.defaultEditorLocalization);
 };
 exports.default = getLocalizationTable;

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