js-draw 1.29.2 → 1.30.1

package/dist/mjs/Editor.mjs

@@ -26,7 +26,7 @@ import  makeAboutDialog  from './dialogs/makeAboutDialog.mjs';
 import  version  from './version.mjs';
 import  { editorImageToSVGSync, editorImageToSVGAsync }  from './image/export/editorImageToSVG.mjs';
 import  ReactiveValue, { MutableReactiveValue }  from './util/ReactiveValue.mjs';
-import  listenForKeyboardEventsFrom  from './util/listenForKeyboardEventsFrom.mjs';
+import  listenForKeyboardEventsFrom  from './util/dom/listenForKeyboardEventsFrom.mjs';
 import  mitLicenseAttribution  from './util/mitLicenseAttribution.mjs';
 import  ClipboardHandler  from './util/ClipboardHandler.mjs';
 import  ContextMenuRecognizer  from './tools/InputFilter/ContextMenuRecognizer.mjs';
@@ -385,18 +385,24 @@ export class Editor {
      * A protected method that can override setPointerCapture in environments where it may fail
      * (e.g. with synthetic events). @internal
      */
-    setPointerCapture(target, pointerId) {
+    setPointerCapture(target, pointer) {
+        // Prevent synthetic events from attempting to capture the pointer.
+        // Such events are sometimes created during debug/testing.
+        if ('__mockEvent' in pointer)
+            return;
         try {
-            target.setPointerCapture(pointerId);
+            target.setPointerCapture(pointer.pointerId);
         }
         catch (error) {
             console.warn('Failed to setPointerCapture', error);
         }
     }
     /** Can be overridden in a testing environment to handle synthetic events. @internal */
-    releasePointerCapture(target, pointerId) {
+    releasePointerCapture(target, pointer) {
+        if ('__mockEvent' in pointer)
+            return;
         try {
-            target.releasePointerCapture(pointerId);
+            target.releasePointerCapture(pointer.pointerId);
         }
         catch (error) {
             console.warn('Failed to releasePointerCapture', error);
@@ -409,10 +415,11 @@ export class Editor {
     handleHTMLPointerEvent(eventType, evt) {
         const eventsRelativeTo = this.renderingRegion;
         const eventTarget = evt.target ?? this.renderingRegion;
+        this.display.onPointerEvent(evt);
         if (eventType === 'pointerdown') {
             const pointer = Pointer.ofEvent(evt, true, this.viewport, eventsRelativeTo);
             this.pointers[pointer.id] = pointer;
-            this.setPointerCapture(eventTarget, pointer.id);
+            this.setPointerCapture(eventTarget, evt);
             const event = {
                 kind: InputEvtType.PointerDownEvt,
                 current: pointer,
@@ -449,7 +456,7 @@ export class Editor {
                 return false;
             }
             this.pointers[pointer.id] = pointer;
-            this.releasePointerCapture(eventTarget, pointer.id);
+            this.releasePointerCapture(eventTarget, evt);
             if (this.toolController.dispatchInputEvent({
                 kind: InputEvtType.PointerUpEvt,
                 current: pointer,
@@ -592,7 +599,7 @@ export class Editor {
                     hasMovedSignificantly: false,
                 };
                 // Capture the pointer so we receive future events even if the overlay is hidden.
-                this.setPointerCapture(elem, event.pointerId);
+                this.setPointerCapture(elem, event);
                 // Don't send to the editor.
                 sendToEditor = false;
             }
@@ -626,7 +633,7 @@ export class Editor {
             else if ((eventName === 'pointerup' || eventName === 'pointercancel') &&
                 gestureData[pointerId] &&
                 gestureData[pointerId].eventBuffer.length > 0) {
-                this.releasePointerCapture(elem, event.pointerId);
+                this.releasePointerCapture(elem, event);
                 // Don't send to the editor.
                 sendToEditor = false;
                 delete gestureData[pointerId];

package/dist/mjs/components/ImageComponent.mjs

@@ -1,7 +1,7 @@
 import { Rect2, Mat33 } from '@js-draw/math';
 import  { assertIsNumber, assertIsNumberArray }  from '../util/assertions.mjs';
 import  AbstractComponent  from './AbstractComponent.mjs';
-import  waitForImageLoaded  from '../util/waitForImageLoaded.mjs';
+import  waitForImageLoaded  from '../util/dom/waitForImageLoaded.mjs';
 /**
  * Represents a raster image.
  *

package/dist/mjs/components/builders/FreehandLineBuilder.d.ts

@@ -1,6 +1,6 @@
 import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import RenderablePathSpec from '../../rendering/RenderablePathSpec';
-import { Rect2 } from '@js-draw/math';
+import { Rect2, Color4 } from '@js-draw/math';
 import Stroke from '../Stroke';
 import Viewport from '../../Viewport';
 import { StrokeDataPoint } from '../../types';
@@ -26,6 +26,10 @@ export default class FreehandLineBuilder implements ComponentBuilder {
     constructor(startPoint: StrokeDataPoint, minFitAllowed: number, maxFitAllowed: number, viewport: Viewport);
     getBBox(): Rect2;
     protected getRenderingStyle(): RenderingStyle;
+    inkTrailStyle(): {
+        color: Color4;
+        width: number;
+    };
     protected previewCurrentPath(): RenderablePathSpec | null;
     protected previewFullPath(): RenderablePathSpec[] | null;
     private previewStroke;

package/dist/mjs/components/builders/FreehandLineBuilder.mjs

@@ -35,10 +35,13 @@ export default class FreehandLineBuilder {
     getRenderingStyle() {
         return {
             fill: Color4.transparent,
-            stroke: {
-                color: this.startPoint.color,
-                width: this.roundDistance(this.averageWidth),
-            },
+            stroke: this.inkTrailStyle(),
+        };
+    }
+    inkTrailStyle() {
+        return {
+            color: this.startPoint.color,
+            width: this.roundDistance(this.averageWidth),
         };
     }
     previewCurrentPath() {

package/dist/mjs/components/builders/PolylineBuilder.d.ts

@@ -1,6 +1,6 @@
 import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import RenderablePathSpec from '../../rendering/RenderablePathSpec';
-import { Rect2 } from '@js-draw/math';
+import { Rect2, Color4 } from '@js-draw/math';
 import Stroke from '../Stroke';
 import Viewport from '../../Viewport';
 import { StrokeDataPoint } from '../../types';
@@ -27,6 +27,10 @@ export default class PolylineBuilder implements ComponentBuilder {
     constructor(startPoint: StrokeDataPoint, minFitAllowed: number, viewport: Viewport);
     getBBox(): Rect2;
     protected getRenderingStyle(): RenderingStyle;
+    inkTrailStyle(): {
+        color: Color4;
+        width: number;
+    };
     protected previewCurrentPath(): RenderablePathSpec;
     protected previewFullPath(): RenderablePathSpec[];
     preview(renderer: AbstractRenderer): void;

package/dist/mjs/components/builders/PolylineBuilder.mjs

@@ -42,10 +42,13 @@ export default class PolylineBuilder {
     getRenderingStyle() {
         return {
             fill: Color4.transparent,
-            stroke: {
-                color: this.startPoint.color,
-                width: this.roundDistance(this.averageWidth),
-            },
+            stroke: this.inkTrailStyle(),
+        };
+    }
+    inkTrailStyle() {
+        return {
+            color: this.startPoint.color,
+            width: this.roundDistance(this.averageWidth),
         };
     }
     previewCurrentPath() {

package/dist/mjs/components/builders/PressureSensitiveFreehandLineBuilder.d.ts

@@ -30,6 +30,7 @@ export default class PressureSensitiveFreehandLineBuilder implements ComponentBu
     build(): Stroke;
     private roundPoint;
     private shouldStartNewSegment;
+    private getCurrentRadius;
     private addCurve;
     private segmentToPath;
     addPoint(newPoint: StrokeDataPoint): void;

package/dist/mjs/components/builders/PressureSensitiveFreehandLineBuilder.mjs

@@ -184,6 +184,9 @@ export default class PressureSensitiveFreehandLineBuilder {
         }
         return false;
     }
+    getCurrentRadius() {
+        return Viewport.roundPoint(this.startPoint.width / 2.2, Math.min(this.minFitAllowed, this.startPoint.width / 4));
+    }
     addCurve(curve) {
         // Case where no points have been added
         if (!curve) {
@@ -191,35 +194,35 @@ export default class PressureSensitiveFreehandLineBuilder {
             if (!this.isFirstSegment) {
                 return;
             }
-            const width = Viewport.roundPoint(this.startPoint.width / 2.2, Math.min(this.minFitAllowed, this.startPoint.width / 4));
+            const radius = this.getCurrentRadius();
             const center = this.roundPoint(this.startPoint.pos);
             // Start on the right, cycle clockwise:
             //    |
             //  ----- ←
             //    |
-            const startPoint = this.startPoint.pos.plus(Vec2.of(width, 0));
+            const startPoint = this.startPoint.pos.plus(Vec2.of(radius, 0));
             // Draw a circle-ish shape around the start point
             this.lowerSegments.push({
                 kind: PathCommandType.QuadraticBezierTo,
-                controlPoint: center.plus(Vec2.of(width, width)),
+                controlPoint: center.plus(Vec2.of(radius, radius)),
                 // Bottom of the circle
                 //    |
                 //  -----
                 //    |
                 //    ↑
-                endPoint: center.plus(Vec2.of(0, width)),
+                endPoint: center.plus(Vec2.of(0, radius)),
             }, {
                 kind: PathCommandType.QuadraticBezierTo,
-                controlPoint: center.plus(Vec2.of(-width, width)),
-                endPoint: center.plus(Vec2.of(-width, 0)),
+                controlPoint: center.plus(Vec2.of(-radius, radius)),
+                endPoint: center.plus(Vec2.of(-radius, 0)),
             }, {
                 kind: PathCommandType.QuadraticBezierTo,
-                controlPoint: center.plus(Vec2.of(-width, -width)),
-                endPoint: center.plus(Vec2.of(0, -width)),
+                controlPoint: center.plus(Vec2.of(-radius, -radius)),
+                endPoint: center.plus(Vec2.of(0, -radius)),
             }, {
                 kind: PathCommandType.QuadraticBezierTo,
-                controlPoint: center.plus(Vec2.of(width, -width)),
-                endPoint: center.plus(Vec2.of(width, 0)),
+                controlPoint: center.plus(Vec2.of(radius, -radius)),
+                endPoint: center.plus(Vec2.of(radius, 0)),
             });
             const connector = {
                 kind: PathCommandType.LineTo,

package/dist/mjs/components/builders/autocorrect/makeShapeFitAutocorrect.mjs

@@ -19,6 +19,9 @@ class ShapeFitBuilder {
         this.viewport = viewport;
         this.builder = sourceFactory(startPoint, viewport);
         this.points = [startPoint];
+        if (this.builder.inkTrailStyle) {
+            this.inkTrailStyle = this.builder.inkTrailStyle.bind(this.builder);
+        }
     }
     getBBox() {
         return this.builder.getBBox();

package/dist/mjs/components/builders/autocorrect/makeSnapToGridAutocorrect.mjs

@@ -11,6 +11,9 @@ class SnapToGridAutocompleteBuilder {
         this.viewport = viewport;
         this.builder = sourceFactory(startPoint, viewport);
         this.points = [startPoint];
+        if (this.builder.inkTrailStyle) {
+            this.inkTrailStyle = this.builder.inkTrailStyle.bind(this.builder);
+        }
     }
     getBBox() {
         return this.builder.getBBox();

package/dist/mjs/components/builders/types.d.ts

@@ -3,10 +3,16 @@ import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
 import Viewport from '../../Viewport';
 import AbstractComponent from '../AbstractComponent';
+import { StrokeStyle } from '../../rendering/RenderingStyle';
 export interface ComponentBuilder {
     getBBox(): Rect2;
     build(): AbstractComponent;
     preview(renderer: AbstractRenderer): void;
+    /**
+     * (Optional) If provided, allows js-draw to efficiently render
+     * an ink trail with the given style on some devices.
+     */
+    inkTrailStyle?: () => StrokeStyle;
     /**
      * Called when the pen is stationary (or the user otherwise
      * activates autocomplete). This might attempt to fit the user's

package/dist/mjs/dialogs/makeMessageDialog.mjs

@@ -1,3 +1,4 @@
+import  createButton  from '../util/dom/createButton.mjs';
 import  waitForTimeout  from '../util/waitForTimeout.mjs';
 const makeAboutDialog = (editor, options) => {
     const overlay = document.createElement('div');
@@ -9,9 +10,10 @@ const makeAboutDialog = (editor, options) => {
     const heading = document.createElement('h1');
     heading.textContent = options.title;
     heading.setAttribute('autofocus', 'true');
-    const closeButton = document.createElement('button');
-    closeButton.innerText = editor.localization.closeDialog;
-    closeButton.classList.add('close');
+    const closeButton = createButton({
+        text: editor.localization.closeDialog,
+        classList: ['close'],
+    });
     const scrollRegion = document.createElement('div');
     scrollRegion.classList.add('scroll');
     // Allow scrolling in the scrollable container -- don't forward wheel events.

package/dist/mjs/localizations/getLocalizationTable.mjs

@@ -2,10 +2,12 @@ import  { defaultEditorLocalization }  from '../localization.mjs';
 import  de  from './de.mjs';
 import  en  from './en.mjs';
 import  es  from './es.mjs';
+import  sk  from './sk.mjs';
 export const allLocales = {
     de,
     en,
     es,
+    sk,
 };
 // [locale]: A string in the format languageCode_Region or just languageCode. For example, en_US.
 const languageFromLocale = (locale) => {

package/dist/mjs/localizations/sk.d.ts

@@ -0,0 +1,3 @@
+import { EditorLocalization } from '../localization';
+declare const localization: EditorLocalization;
+export default localization;

package/dist/mjs/localizations/sk.mjs

@@ -0,0 +1,180 @@
+import  { defaultEditorLocalization }  from '../localization.mjs';
+// Slovak localization
+const localization = {
+    ...defaultEditorLocalization,
+    help: 'Pomoc',
+    helpHidden: 'Skrytá pomoc',
+    next: 'Ďalšie',
+    previous: 'Prechádzajúce',
+    close: 'Zavrieť',
+    helpScreenNavigationHelp: 'Kliknutím na ovládací prvok získate viac informácií.',
+    helpControlsAccessibilityLabel: 'Ovládacie prvky: Aktivujte ovládací prvok, ktorý zobrazí pomoc.',
+    pen: 'Pero',
+    eraser: 'Guma',
+    select: 'Vybrať',
+    handTool: 'Posun',
+    zoom: 'Priblížiť',
+    image: 'Obrázok',
+    reformatSelection: 'Výber formátu',
+    inputAltText: 'Alternatívny text',
+    decreaseImageSize: 'Zmenšiť veľkosť',
+    resetImage: 'Obnoviť',
+    chooseFile: 'Vybrať súbor',
+    dragAndDropHereOrBrowse: 'Presuňte sem alebo {{prehľadávať}}',
+    submit: 'Odoslať',
+    addAll: 'Pridať všetko',
+    cancel: 'Zrušiť',
+    resetView: 'Obnoviť zobrazenie',
+    thicknessLabel: 'Hrúbka',
+    colorLabel: 'Farba',
+    fontLabel: 'Písmo',
+    textSize: 'Veľkosť',
+    resizeImageToSelection: 'Zmena veľkosti obrázka podľa výberu',
+    deleteSelection: 'Vymazať výber',
+    duplicateSelection: 'Duplikovať výber',
+    exit: 'Ukončiť',
+    save: 'Uložiť',
+    undo: 'Späť',
+    redo: 'Opakovať',
+    fullStrokeEraser: 'Guma s plným ťahom',
+    selectPenType: 'Typ pera',
+    selectShape: 'Tvar',
+    pickColorFromScreen: 'Vybrať farbu z obrazovky',
+    clickToPickColorAnnouncement: 'Kliknutím na obrazovku vyberte farbu',
+    colorSelectionCanceledAnnouncement: 'Výber farby zrušený',
+    selectionTool__lassoSelect: 'Výber voľného tvaru',
+    selectionTool__lassoSelect__help: 'Ak je táto funkcia zapnutá, ťahanie vytvorí voľný tvar (laso) výberu.',
+    selectionToolKeyboardShortcuts: 'Nástroj na výber: Pomocou klávesov so šípkami môžete presunúť vybrané položky, malými/veľkými písmenami „i“ a „o“ môžete zmeniť veľkosť.',
+    documentProperties: 'Strana',
+    backgroundColor: 'Farba pozadia',
+    imageWidthOption: 'Šírka',
+    imageHeightOption: 'Výška',
+    useGridOption: 'Mriežka',
+    enableAutoresizeOption: 'Automatická zmena veľkosti',
+    toggleOverflow: 'Viac',
+    about: 'O aplikácii',
+    inputStabilization: 'Stabilizácia',
+    strokeAutocorrect: 'Automatická oprava',
+    pressureSensitivity: 'Tlak',
+    touchPanning: 'Posúvanie dotykom',
+    roundedTipPen: 'Okrúhle',
+    roundedTipPen2: 'Viacčiarové',
+    flatTipPen: 'Ploché',
+    arrowPen: 'Šípka',
+    linePen: 'Čiara',
+    outlinedRectanglePen: 'Obrys obdĺžnika',
+    filledRectanglePen: 'Plný obdĺžnik',
+    outlinedCirclePen: 'Kružnica',
+    lockRotation: 'Zamknúť otáčanie',
+    paste: 'Vložiť',
+    errorImageHasZeroSize: 'Chyba: Obrázok má nulovú veľkosť',
+    describeTheImage: 'Popis obrázku',
+    fileInput__loading: 'Načítavanie...',
+    fileInput__andNMoreFiles: (n) => `(...${n} ďalších)`,
+    penDropdown__baseHelpText: 'Tento nástroj kreslí tvary alebo voľné čiary.',
+    penDropdown__colorHelpText: 'Zmení farbu pera',
+    penDropdown__thicknessHelpText: 'Mení hrúbku ťahov nakreslených perom.',
+    penDropdown__penTypeHelpText: 'Zmení štýl pera.\n\nMôžete si vybrať buď štýl „pero“, alebo „tvar“. Výberom štýlu „pero“ sa kreslia voľné čiary. Výberom štýlu „tvar“ sa kreslia tvary.',
+    penDropdown__autocorrectHelpText: 'Prevedie približné voľné čiary a obdĺžniky na dokonalé.\n\nPero musí byť držané nehybne na konci ťahu, aby sa spustila oprava.',
+    penDropdown__stabilizationHelpText: 'Kreslí hladšie ťahy.\n\nPridáva tiež krátke oneskorenie medzi pohybom myši/stylusu a ťahom.',
+    penDropdown__pressureSensitivityHelpText: 'Pri použití kompatibilného zariadenia, napríklad stylusu, mení hrúbku ťahov podľa sily stlačenia.',
+    handDropdown__baseHelpText: 'Tento nástroj je zodpovedný za posúvanie, otáčanie a zväčšovanie editora.',
+    handDropdown__zoomInHelpText: 'Priblížiť.',
+    handDropdown__zoomOutHelpText: 'Oddialiť.',
+    handDropdown__resetViewHelpText: 'Obnoví úroveň priblíženia na 100 % a vynuluje posúvanie.',
+    handDropdown__zoomDisplayHelpText: 'Zobrazí aktuálnu úroveň priblíženia. 100 % zobrazuje obrázok v jeho skutočnej veľkosti.',
+    handDropdown__touchPanningHelpText: 'Keď je táto funkcia zapnutá, gestá dotykovej obrazovky posúvajú obrázok, a nevyberajú ho ani nekreslia.',
+    handDropdown__lockRotationHelpText: 'Ak je táto funkcia zapnutá, zabraňuje dotykovým gestám otáčať obrazovku.',
+    eraserDropdown__baseHelpText: 'Tento nástroj odstraňuje ťahy, obrázky a text pod kurzorom.',
+    eraserDropdown__thicknessHelpText: 'Zmení veľkosť gumy.',
+    eraserDropdown__fullStrokeEraserHelpText: '`V režime plného ťahu sa vymažú celé tvary.\n\nKeď nie je v režime plného ťahu, tvary sa môžu byť čiastočne vymazané.`',
+    selectionDropdown__baseHelpText: 'Vyberá obsah a manipuluje s výberom',
+    selectionDropdown__resizeToHelpText: 'Oreže kresbu na veľkosť toho, čo je aktuálne vybrané.\n\nAk je zapnutá automatická zmena veľkosti, bude táto funkcia vypnutá.',
+    selectionDropdown__deleteHelpText: 'Vymaže vybrané položky.',
+    selectionDropdown__duplicateHelpText: 'Vytvorí kópiu vybraných položiek.',
+    selectionDropdown__changeColorHelpText: 'Zmení farbu vybraných položiek.',
+    pageDropdown__baseHelpText: 'Ovláda farbu, vzor a veľkosť pozadia kresliaceho plátna.',
+    pageDropdown__backgroundColorHelpText: 'Zmení farbu pozadia kresliaceho plátna.',
+    pageDropdown__gridCheckboxHelpText: 'Zapne/vypne vzor mriežky na pozadí.',
+    pageDropdown__autoresizeCheckboxHelpText: 'Pokiaľ je označené, stránka sa zväčší tak, aby sa prispôsobila kresbe.\n\nKeď nie je označené, stránka je viditeľná a jej veľkosť sa dá nastaviť ručne.',
+    pageDropdown__aboutButtonHelpText: 'Zobrazí verziu, ladenie a ďalšie informácie.',
+    colorPickerPipetteHelpText: 'Vyberie farbu z obrazovky.',
+    colorPickerToggleHelpText: 'Otvorí/zatvorí výber farieb.',
+    closeSidebar: (toolName) => `Zatvoriť bočný panel pre ${toolName}`,
+    dropdownShown: (toolName) => `Ponuka pre ${toolName} zobrazená`,
+    dropdownHidden: (toolName) => `Ponuka pre ${toolName} skrytá`,
+    zoomLevel: (zoomPercent) => `Priblíženie: ${zoomPercent}%`,
+    colorChangedAnnouncement: (color) => `Farba zmenená na ${color}`,
+    imageSize: (size, units) => `Veľkosť obrázka: ${size} ${units}`,
+    imageLoadError: (message) => `Chyba pri načítavaní obrázka: ${message}`,
+    penTool: (penId) => `Pero ${penId}`,
+    selectionTool: 'Výber',
+    selectAllTool: 'Skratka pre výber všetkých',
+    eraserTool: 'Guma',
+    touchPanTool: 'Posúvanie dotykom',
+    twoFingerPanZoomTool: 'Posun a priblíženie',
+    undoRedoTool: 'Späť/Opakovať',
+    rightClickDragPanTool: 'Ťahanie pravým tlačidlom myši',
+    pipetteTool: 'Vybrať farbu z obrazovky',
+    keyboardPanZoom: 'Klávesové skratky pre posúvanie/priblíženie',
+    selectionMenu__show: 'Zobraziť ponuku výberu',
+    selectionMenu__copyToClipboard: 'Kopírovať do schránky',
+    selectionMenu__duplicate: 'Duplikovať',
+    selectionMenu__delete: 'Vymazať',
+    selectionMenu__paste: 'Vložiť',
+    copyPasteError__heading: 'Kopírovať/vložiť',
+    copyPasteError__description: 'Niečo sa pokazilo - tento nástroj nemusí mať prístup k schránke.',
+    copyPasteError__errorDetails: 'Zobraziť chybu',
+    copyPasteError__pasteRetry: 'Ak chcete opakovať pokus, vložte ho do nižšie uvedeného vstupného poľa:',
+    copyPasteError__copyRetry: 'Ak chcete opakovať pokus, skopírujte text do vstupného poľa nižšie:',
+    copyPasteError__copyMe: 'Skopíruj ma!',
+    autocorrectedTo: (strokeDescription) => `Automaticky opravené na ${strokeDescription}`,
+    autocorrectionCanceled: 'Automatická oprava zrušená',
+    enterTextToInsert: 'Text, ktorý sa má vložiť',
+    changeTool: 'Zmeniť nástroj',
+    findLabel: 'Hľadať',
+    toNextMatch: 'Ďalšie',
+    closeDialog: 'Zavrieť',
+    findDialogShown: 'Dialógové okno vyhľadávania zobrazené',
+    findDialogHidden: 'Dialógové okno vyhľadávania je skryté',
+    copied: (count) => `Skopírovaných ${count} položiek`,
+    pasted: (count) => `Vložených ${count} položiek`,
+    toolEnabledAnnouncement: (toolName) => `${toolName} zapnuté`,
+    toolDisabledAnnouncement: (toolName) => `${toolName} vypnuté`,
+    resizeOutputCommand: (newSize) => `Zmenená veľkosť obrázka na ${newSize.w}x${newSize.h}`,
+    enabledAutoresizeOutputCommand: 'Automatická zmena veľkosti výstupu je povolená',
+    disabledAutoresizeOutputCommand: 'Automatická zmena veľkosti výstupu je zakázaná',
+    addComponentAction: (componentDescription) => `Pridané ${componentDescription}`,
+    eraseAction: (componentDescription, numElems) => `Vymazané ${numElems} ${componentDescription}`,
+    duplicateAction: (componentDescription, numElems) => `Duplikované ${numElems} ${componentDescription}`,
+    elements: 'Prvky',
+    erasedNoElements: 'Nič sa nevymazalo.',
+    duplicatedNoElements: 'Nič sa neduplikovalo.',
+    rotatedBy: (degrees) => `Otočené o ${Math.abs(degrees)} stupňov ${degrees < 0 ? 'clockwise' : 'counter-clockwise'}`,
+    movedLeft: 'Presunuté doľava',
+    movedUp: 'Presunuté hore',
+    movedDown: 'Presunuté dole',
+    movedRight: 'Presunuté doprava',
+    zoomedOut: 'Oddialené',
+    zoomedIn: 'Priblížené',
+    andNMoreCommands: (count) => `A ${count} ďalších príkazov.`,
+    unlabeledImageNode: 'Obrázok bez označenia',
+    stroke: 'Ťah',
+    svgObject: 'Objekt SVG',
+    emptyBackground: 'Prázdne pozadie',
+    gridBackground: 'Pozadie s mriežkou',
+    filledBackgroundWithColor: (color) => `Vyplnené pozadie (${color})`,
+    text: (text) => `Textový objekt: ${text}`,
+    imageNode: (label) => `Obrázok: ${label}`,
+    pathNodeCount: (count) => `Viditeľných je ${count} objektov ciest.`,
+    textNodeCount: (count) => `Viditeľných je ${count} textových uzlov.`,
+    imageNodeCount: (nodeCount) => `Viditeľných je ${nodeCount} obrazových uzlov.`,
+    rerenderAsText: 'Opätovne vykresliť ako text.',
+    accessibilityInputInstructions: 'Pomocou tlačidla „t“ prečítate obsah zobrazovacieho okna ako text. Pomocou klávesov so šípkami pohybujte zobrazovacím oknom, kliknutím a ťahaním kreslite ťahy. Stlačením tlačidla „w“ priblížite a stlačením tlačidla „s“ oddialite pohľad.',
+    loading: (percentage) => `Načítava sa ${percentage}%...`,
+    imageEditor: 'Editor obrázkov',
+    doneLoading: 'Načítanie dokončené',
+    softwareLibraries: 'Knižnice',
+    developerInformation: 'Informácie pre vývojárov',
+};
+export default localization;

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

@@ -58,6 +58,8 @@ export default class Display {
     setDevicePixelRatio(dpr: number): Promise<void> | undefined;
     /** @internal */
     getDevicePixelRatio(): number;
+    /** @internal -- used for internal performance improvements. */
+    onPointerEvent(event: PointerEvent): void;
     /**
      * Rerenders the text-based display.
      * The text-based display is intended for screen readers and can be navigated to by pressing `tab`.

package/dist/mjs/rendering/Display.mjs

@@ -4,6 +4,8 @@ import  DummyRenderer  from './renderers/DummyRenderer.mjs';
 import { Vec2, Color4 } from '@js-draw/math';
 import  RenderingCache  from './caching/RenderingCache.mjs';
 import  TextOnlyRenderer  from './renderers/TextOnlyRenderer.mjs';
+import  AcceleratedInkingCanvasRenderer  from './renderers/AcceleratedInkingCanvasRenderer.mjs';
+import  createButton  from '../util/dom/createButton.mjs';
 export var RenderingMode;
 (function (RenderingMode) {
     RenderingMode[RenderingMode["DummyRenderer"] = 0] = "DummyRenderer";
@@ -108,7 +110,7 @@ export default class Display {
         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);
+        this.wetInkRenderer = new AcceleratedInkingCanvasRenderer(wetInkCtx, this.editor.viewport);
         dryInkCanvas.className = 'dryInkCanvas';
         wetInkCanvas.className = 'wetInkCanvas';
         if (this.parent) {
@@ -176,9 +178,10 @@ export default class Display {
     initializeTextRendering() {
         const textRendererOutputContainer = document.createElement('div');
         textRendererOutputContainer.classList.add('textRendererOutputContainer');
-        const rerenderButton = document.createElement('button');
-        rerenderButton.classList.add('rerenderButton');
-        rerenderButton.innerText = this.editor.localization.rerenderAsText;
+        const rerenderButton = createButton({
+            classList: ['rerenderButton'],
+            text: this.editor.localization.rerenderAsText,
+        });
         this.textRerenderOutput = document.createElement('div');
         this.textRerenderOutput.setAttribute('aria-live', 'polite');
         rerenderButton.onclick = () => {
@@ -208,6 +211,12 @@ export default class Display {
     getDevicePixelRatio() {
         return this.devicePixelRatio;
     }
+    /** @internal -- used for internal performance improvements. */
+    onPointerEvent(event) {
+        if (this.wetInkRenderer instanceof AcceleratedInkingCanvasRenderer) {
+            this.wetInkRenderer.onEvent(event);
+        }
+    }
     /**
      * Rerenders the text-based display.
      * The text-based display is intended for screen readers and can be navigated to by pressing `tab`.

package/dist/mjs/rendering/renderers/AbstractRenderer.d.ts

@@ -1,7 +1,7 @@
 import { Color4, Mat33, Point2, Vec2, Rect2 } from '@js-draw/math';
 import { LoadSaveDataTable } from '../../components/AbstractComponent';
 import Viewport from '../../Viewport';
-import RenderingStyle from '../RenderingStyle';
+import RenderingStyle, { StrokeStyle } from '../RenderingStyle';
 import TextRenderingStyle from '../TextRenderingStyle';
 import RenderablePathSpec from '../RenderablePathSpec';
 export interface RenderableImage {
@@ -10,6 +10,21 @@ export interface RenderableImage {
     base64Url: string;
     label?: string;
 }
+/**
+ * An interface that allows renderers to provide accelerated inking.
+ *
+ * This API is intended to reduce latency by rendering a draft preview of the
+ * last, trailing part of a stroke.
+ *
+ * This may be implemented with, for example, [the web `Ink` API](https://developer.mozilla.org/en-US/docs/Web/API/Ink),
+ * or do nothing at all, depending on the renderer and platform.
+ */
+export interface DraftInkPresenter {
+    /** Enables the ink presenter, if available on the current platform. */
+    setEnabled(pointerId: number, enabled: boolean): void;
+    /** Sets the color and width of the stroke trail. */
+    updateStyle(style: StrokeStyle): void;
+}
 /**
  * Abstract base class for renderers.
  *
@@ -38,6 +53,10 @@ export default abstract class AbstractRenderer {
     abstract drawImage(image: RenderableImage): void;
     abstract isTooSmallToRender(rect: Rect2): boolean;
     setDraftMode(_draftMode: boolean): void;
+    /**
+     * Returns an API that can be used to accelerate inking.
+     */
+    getDraftInkPresenter(): DraftInkPresenter;
     protected objectLevel: number;
     private currentPaths;
     private flushPath;

package/dist/mjs/rendering/renderers/AbstractRenderer.mjs

@@ -1,6 +1,7 @@
 import { Vec2, Path, PathCommandType } from '@js-draw/math';
 import  { stylesEqual }  from '../RenderingStyle.mjs';
 import  { pathToRenderable }  from '../RenderablePathSpec.mjs';
+const defaultDraftInkPresenter = { setEnabled: () => { }, updateStyle: () => { } };
 /**
  * Abstract base class for renderers.
  *
@@ -24,6 +25,12 @@ export default class AbstractRenderer {
         return this.viewport;
     }
     setDraftMode(_draftMode) { }
+    /**
+     * Returns an API that can be used to accelerate inking.
+     */
+    getDraftInkPresenter() {
+        return defaultDraftInkPresenter;
+    }
     flushPath() {
         if (!this.currentPaths) {
             return;

package/dist/mjs/rendering/renderers/AcceleratedInkingCanvasRenderer.d.ts

@@ -0,0 +1,22 @@
+import { StrokeStyle } from '../RenderingStyle';
+import { DraftInkPresenter } from './AbstractRenderer';
+import CanvasRenderer from './CanvasRenderer';
+import Viewport from '../../Viewport';
+declare class CanvasInkPresenter implements DraftInkPresenter {
+    private viewport;
+    private enabled;
+    private presenter;
+    private style;
+    constructor(canvas: HTMLCanvasElement, viewport: Viewport);
+    setEnabled(pointerId: number, enabled: boolean): void;
+    updateStyle(style: StrokeStyle): void;
+    onEvent(event: PointerEvent): void;
+}
+/** A canvas that uses the web ink API for accelerated inking. */
+export default class AcceleratedInkingCanvasRenderer extends CanvasRenderer {
+    private inkPresenter;
+    constructor(ctx: CanvasRenderingContext2D, viewport: Viewport);
+    getDraftInkPresenter(): CanvasInkPresenter;
+    onEvent(event: PointerEvent): void;
+}
+export {};