js-draw 0.21.0 → 0.22.1

package/dist/cjs/src/toolbar/localization.d.ts

@@ -26,6 +26,7 @@ export interface ToolbarLocalization {
     duplicateSelection: string;
     pickColorFromScreen: string;
     clickToPickColorAnnouncement: string;
+    colorSelectionCanceledAnnouncement: string;
     reformatSelection: string;
     undo: string;
     redo: string;

package/dist/cjs/src/toolbar/localization.js

@@ -26,6 +26,7 @@ exports.defaultToolbarLocalization = {
     selectPenType: 'Pen type: ',
     pickColorFromScreen: 'Pick color from screen',
     clickToPickColorAnnouncement: 'Click on the screen to pick a color',
+    colorSelectionCanceledAnnouncement: 'Color selection canceled',
     selectionToolKeyboardShortcuts: 'Selection tool: Use arrow keys to move selected items, lowercase/uppercase ‘i’ and ‘o’ to resize.',
     documentProperties: 'Page',
     backgroundColor: 'Background Color: ',

package/dist/cjs/src/toolbar/makeColorInput.js

@@ -48,6 +48,11 @@ const makeColorInput = (editor, onColorChange) => {
             open: true,
         });
         pipetteController.cancel();
+        // Focus the Coloris color picker, if it exists.
+        // Don't focus the text input within the color picker, however,
+        // as this displays a keyboard on mobile devices.
+        const colorPickerElem = document.querySelector('#clr-picker #clr-hue-slider');
+        colorPickerElem === null || colorPickerElem === void 0 ? void 0 : colorPickerElem.focus();
     });
     colorInput.addEventListener('close', () => {
         editor.notifier.dispatch(types_1.EditorEventType.ColorPickerToggled, {
@@ -55,6 +60,8 @@ const makeColorInput = (editor, onColorChange) => {
             open: false,
         });
         onInputEnd();
+        // Restore focus to the input that opened the color picker
+        colorInput.focus();
     });
     const setColorInputValue = (color) => {
         if (typeof color === 'object') {
@@ -101,6 +108,7 @@ const addPipetteTool = (editor, container, onColorChange) => {
         // If already picking, cancel it.
         if (pipetteButton.classList.contains('active')) {
             endColorSelectMode();
+            editor.announceForAccessibility(editor.localization.colorSelectionCanceledAnnouncement);
             return;
         }
         pipetteTool === null || pipetteTool === void 0 ? void 0 : pipetteTool.setColorListener(pipetteColorPreview, pipetteColorSelect);

package/dist/cjs/src/toolbar/widgets/BaseToolWidget.d.ts

@@ -3,7 +3,6 @@ import BaseTool from '../../tools/BaseTool';
 import { ToolbarLocalization } from '../localization';
 import BaseWidget from './BaseWidget';
 export default abstract class BaseToolWidget extends BaseWidget {
-    protected editor: Editor;
     protected targetTool: BaseTool;
     constructor(editor: Editor, targetTool: BaseTool, id: string, localizationTable?: ToolbarLocalization);
     protected handleClick(): void;

package/dist/cjs/src/toolbar/widgets/BaseToolWidget.js

@@ -8,7 +8,6 @@ const BaseWidget_1 = __importDefault(require("./BaseWidget"));
 class BaseToolWidget extends BaseWidget_1.default {
     constructor(editor, targetTool, id, localizationTable) {
         super(editor, id, localizationTable);
-        this.editor = editor;
         this.targetTool = targetTool;
         editor.notifier.on(types_1.EditorEventType.ToolEnabled, toolEvt => {
             if (toolEvt.kind !== types_1.EditorEventType.ToolEnabled) {

package/dist/cjs/src/toolbar/widgets/BaseWidget.d.ts

@@ -37,6 +37,11 @@ export default abstract class BaseWidget {
     protected get hasDropdown(): boolean;
     protected addSubWidget(widget: BaseWidget): void;
     private toolbarWidgetToggleListener;
+    /**
+     * Adds this to `parent`. This can only be called once for each ToolbarWidget.
+     * Returns the element that was just added to `parent`.
+     * @internal
+     */
     addTo(parent: HTMLElement): HTMLElement;
     protected updateIcon(): void;
     setDisabled(disabled: boolean): void;

package/dist/cjs/src/toolbar/widgets/BaseWidget.js

@@ -140,14 +140,26 @@ class BaseWidget {
         const id = widget.getUniqueIdIn(this.subWidgets);
         this.subWidgets[id] = widget;
     }
-    // Adds this to [parent]. This can only be called once for each ToolbarWidget.
-    // Returns the element that was just added to `parent`.
-    // @internal
+    /**
+     * Adds this to `parent`. This can only be called once for each ToolbarWidget.
+     * Returns the element that was just added to `parent`.
+     * @internal
+     */
     addTo(parent) {
-        this.label.innerText = this.getTitle();
-        this.setupActionBtnClickListener(this.button);
+        // Update title and icon
         this.icon = null;
         this.updateIcon();
+        this.label.innerText = this.getTitle();
+        const longLabelCSSClass = 'long-label';
+        if (this.label.innerText.length > 7) {
+            this.label.classList.add(longLabelCSSClass);
+        }
+        else {
+            this.label.classList.remove(longLabelCSSClass);
+        }
+        // Click functionality
+        this.setupActionBtnClickListener(this.button);
+        // Clear anything already in this.container.
         this.container.replaceChildren();
         this.button.replaceChildren(this.icon, this.label);
         this.container.appendChild(this.button);
@@ -204,13 +216,18 @@ class BaseWidget {
         if (currentlySelected === selected) {
             return;
         }
+        // Ensure that accessibility tools check and read the value of
+        // aria-checked.
+        // TODO: Ensure that 'role' is set to 'switch' by default for selectable
+        //       buttons.
+        this.button.setAttribute('role', 'switch');
         if (selected) {
             this.container.classList.add('selected');
-            this.button.ariaSelected = 'true';
+            this.button.setAttribute('aria-checked', 'true');
         }
         else {
             this.container.classList.remove('selected');
-            this.button.ariaSelected = 'false';
+            this.button.setAttribute('aria-checked', 'false');
         }
     }
     setDropdownVisible(visible) {

package/dist/cjs/src/toolbar/widgets/DocumentPropertiesWidget.js

@@ -197,5 +197,5 @@ class DocumentPropertiesWidget extends BaseWidget_1.default {
         return true;
     }
 }
-exports.default = DocumentPropertiesWidget;
 DocumentPropertiesWidget.idCounter = 0;
+exports.default = DocumentPropertiesWidget;

package/dist/cjs/src/toolbar/widgets/EraserToolWidget.js

@@ -59,5 +59,5 @@ class EraserToolWidget extends BaseToolWidget_1.default {
         }
     }
 }
-exports.default = EraserToolWidget;
 EraserToolWidget.nextThicknessInputId = 0;
+exports.default = EraserToolWidget;

package/dist/cjs/src/toolbar/widgets/InsertImageWidget.js

@@ -172,5 +172,5 @@ class InsertImageWidget extends ActionButtonWidget_1.default {
         });
     }
 }
-exports.default = InsertImageWidget;
 InsertImageWidget.nextInputId = 0;
+exports.default = InsertImageWidget;

package/dist/cjs/src/toolbar/widgets/PenToolWidget.js

@@ -222,5 +222,5 @@ class PenToolWidget extends BaseToolWidget_1.default {
         }
     }
 }
-exports.default = PenToolWidget;
 PenToolWidget.idCounter = 0;
+exports.default = PenToolWidget;

package/dist/cjs/src/toolbar/widgets/TextToolWidget.js

@@ -111,5 +111,5 @@ class TextToolWidget extends BaseToolWidget_1.default {
         super.deserializeFrom(state);
     }
 }
-exports.default = TextToolWidget;
 TextToolWidget.idCounter = 0;
+exports.default = TextToolWidget;

package/dist/cjs/src/tools/SelectionTool/Selection.js

@@ -153,6 +153,9 @@ class Selection {
         this.transform = Mat33_1.default.identity;
         // Make the commands undo-able
         this.editor.dispatch(new Selection.ApplyTransformationCommand(this, selectedElems, fullTransform));
+        // Clear renderings of any in-progress transformations
+        const wetInkRenderer = this.editor.display.getWetInkRenderer();
+        wetInkRenderer.clear();
     }
     // Preview the effects of the current transformation on the selection
     previewTransformCmds() {
@@ -406,7 +409,6 @@ class Selection {
         return this.selectedElems;
     }
 }
-exports.default = Selection;
 _a = Selection;
 (() => {
     SerializableCommand_1.default.register('selection-tool-transform', (json, _editor) => {
@@ -471,7 +473,7 @@ Selection.ApplyTransformationCommand = class extends SerializableCommand_1.defau
             (_b = this.selection) === null || _b === void 0 ? void 0 : _b.setTransform(this.fullTransform.inverse(), false);
             (_c = this.selection) === null || _c === void 0 ? void 0 : _c.updateUI();
             yield editor.asyncUnapplyCommands(this.transformCommands, updateChunkSize, true);
-            (_d = this.selection) === null || _d === void 0 ? void 0 : _d.setTransform(Mat33_1.default.identity);
+            (_d = this.selection) === null || _d === void 0 ? void 0 : _d.setTransform(Mat33_1.default.identity, false);
             (_e = this.selection) === null || _e === void 0 ? void 0 : _e.recomputeRegion();
             (_f = this.selection) === null || _f === void 0 ? void 0 : _f.updateUI();
         });
@@ -486,3 +488,4 @@ Selection.ApplyTransformationCommand = class extends SerializableCommand_1.defau
         return localizationTable.transformedElements(this.selectedElemIds.length);
     }
 };
+exports.default = Selection;

package/dist/cjs/src/tools/SelectionTool/SelectionTool.js

@@ -393,7 +393,6 @@ class SelectionTool extends BaseTool_1.default {
         this.onSelectionUpdated();
     }
 }
-exports.default = SelectionTool;
 SelectionTool.handleableKeys = [
     'a', 'h', 'ArrowLeft',
     'd', 'l', 'ArrowRight',
@@ -403,3 +402,4 @@ SelectionTool.handleableKeys = [
     'i', 'I', 'o', 'O',
     'Control', 'Meta',
 ];
+exports.default = SelectionTool;

package/dist/cjs/src/types.d.ts

@@ -9,6 +9,8 @@ import Pointer from './Pointer';
 import Color4 from './Color4';
 import Command from './commands/Command';
 import BaseWidget from './toolbar/widgets/BaseWidget';
+export type HTMLPointerEventName = 'pointerdown' | 'pointermove' | 'pointerup' | 'pointercancel';
+export type HTMLPointerEventFilter = (eventName: HTMLPointerEventName, event: PointerEvent) => boolean;
 export interface PointerEvtListener {
     onPointerDown(event: PointerEvt): boolean;
     onPointerMove(event: PointerEvt): void;

package/dist/mjs/src/Color4.mjs

@@ -1,5 +1,5 @@
 import  Vec3  from './math/Vec3.mjs';
-export default class Color4 {
+class Color4 {
     constructor(
     /** Red component. Should be in the range [0, 1]. */
     r, 
@@ -254,4 +254,5 @@ Color4.clay = Color4.ofRGB(0.8, 0.4, 0.2);
 Color4.black = Color4.ofRGB(0, 0, 0);
 Color4.gray = Color4.ofRGB(0.5, 0.5, 0.5);
 Color4.white = Color4.ofRGB(1, 1, 1);
+export default Color4;
 export { Color4 };

package/dist/mjs/src/Editor.d.ts

@@ -1,6 +1,6 @@
 import EditorImage from './EditorImage';
 import ToolController from './tools/ToolController';
-import { InputEvtType, EditorNotifier, ImageLoader } from './types';
+import { InputEvtType, EditorNotifier, ImageLoader, HTMLPointerEventFilter } from './types';
 import Command from './commands/Command';
 import UndoRedoHistory from './UndoRedoHistory';
 import Viewport from './Viewport';
@@ -14,8 +14,6 @@ import Rect2 from './math/Rect2';
 import { EditorLocalization } from './localization';
 import IconProvider from './toolbar/IconProvider';
 import AbstractComponent from './components/AbstractComponent';
-type HTMLPointerEventType = 'pointerdown' | 'pointermove' | 'pointerup' | 'pointercancel';
-type HTMLPointerEventFilter = (eventName: HTMLPointerEventType, event: PointerEvent) => boolean;
 export interface EditorSettings {
     /** Defaults to `RenderingMode.CanvasRenderer` */
     renderingMode: RenderingMode;

package/dist/mjs/src/EditorImage.mjs

@@ -1,3 +1,7 @@
+var __setFunctionName = (this && this.__setFunctionName) || function (f, name, prefix) {
+    if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
+    return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
+};
 var _a, _b, _c;
 import  Viewport  from './Viewport.mjs';
 import  AbstractComponent  from './components/AbstractComponent.mjs';
@@ -16,7 +20,7 @@ export var EditorImageEventType;
     EditorImageEventType[EditorImageEventType["ExportViewportChanged"] = 0] = "ExportViewportChanged";
 })(EditorImageEventType || (EditorImageEventType = {}));
 // Handles lookup/storage of elements in the image
-export default class EditorImage {
+class EditorImage {
     // @internal
     constructor() {
         this.root = new ImageNode();
@@ -194,6 +198,7 @@ EditorImage.AddElementCommand = (_b = class extends SerializableCommand {
             };
         }
     },
+    __setFunctionName(_b, "AddElementCommand"),
     (() => {
         SerializableCommand.register('add-element', (json, editor) => {
             const id = json.elemData.id;
@@ -241,6 +246,7 @@ EditorImage.SetImportExportRectCommand = (_c = class extends SerializableCommand
             };
         }
     },
+    __setFunctionName(_c, "SetImportExportRectCommand"),
     _c.commandId = 'set-import-export-rect',
     (() => {
         const commandId = _c.commandId;
@@ -261,8 +267,9 @@ EditorImage.SetImportExportRectCommand = (_c = class extends SerializableCommand
         });
     })(),
     _c);
+export default EditorImage;
 /** Part of the Editor's image. @internal */
-export class ImageNode {
+class ImageNode {
     constructor(parent = null) {
         this.parent = parent;
         this.targetChildCount = 30;
@@ -475,3 +482,4 @@ export class ImageNode {
     }
 }
 ImageNode.idCounter = 0;
+export { ImageNode };

package/dist/mjs/src/Viewport.mjs

@@ -17,7 +17,7 @@ import  { Vec2 }  from './math/Vec2.mjs';
 import  Vec3  from './math/Vec3.mjs';
 export class ViewportTransform extends Command {
 }
-export class Viewport {
+class Viewport {
     // @internal
     constructor(onTransformChangeCallback) {
         this.onTransformChangeCallback = onTransformChangeCallback;
@@ -257,4 +257,5 @@ Viewport.ViewportTransform = (_a = class extends ViewportTransform {
     },
     _inverseTransform = new WeakMap(),
     _a);
+export { Viewport };
 export default Viewport;

package/dist/mjs/src/commands/Command.mjs

@@ -1,4 +1,4 @@
-export class Command {
+class Command {
     // Called when the command is being deleted
     onDrop(_editor) { }
     static union(a, b) {
@@ -27,4 +27,5 @@ Command.empty = new class extends Command {
     apply(_editor) { }
     unapply(_editor) { }
 };
+export { Command };
 export default Command;

package/dist/mjs/src/commands/SerializableCommand.mjs

@@ -1,5 +1,5 @@
 import  Command  from './Command.mjs';
-export default class SerializableCommand extends Command {
+class SerializableCommand extends Command {
     constructor(commandTypeId) {
         super();
         this.commandTypeId = commandTypeId;
@@ -34,3 +34,4 @@ export default class SerializableCommand extends Command {
     }
 }
 SerializableCommand.deserializationCallbacks = {};
+export default SerializableCommand;

package/dist/mjs/src/commands/uniteCommands.mjs

@@ -68,12 +68,17 @@ class SerializableUnion extends SerializableCommand {
         this.nonserializableCommand = new NonSerializableUnion(commands, applyChunkSize);
     }
     serializeToJSON() {
+        if (this.serializedData) {
+            return this.serializedData;
+        }
         return {
             applyChunkSize: this.applyChunkSize,
             data: this.commands.map(command => command.serialize()),
         };
     }
     apply(editor) {
+        // Cache this' serialized form -- applying this may change how commands serialize.
+        this.serializedData = this.serializeToJSON();
         return this.nonserializableCommand.apply(editor);
     }
     unapply(editor) {

package/dist/mjs/src/components/AbstractComponent.mjs

@@ -1,3 +1,7 @@
+var __setFunctionName = (this && this.__setFunctionName) || function (f, name, prefix) {
+    if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
+    return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
+};
 var _a;
 import  SerializableCommand  from '../commands/SerializableCommand.mjs';
 import  EditorImage  from '../EditorImage.mjs';
@@ -6,7 +10,7 @@ import  UnresolvedSerializableCommand  from '../commands/UnresolvedCommand.mjs';
 /**
  * A base class for everything that can be added to an {@link EditorImage}.
  */
-export default class AbstractComponent {
+class AbstractComponent {
     constructor(
     // A unique identifier for the type of component
     componentKind, initialZIndex) {
@@ -249,6 +253,7 @@ AbstractComponent.TransformElementCommand = (_a = class extends UnresolvedSerial
             };
         }
     },
+    __setFunctionName(_a, "TransformElementCommand"),
     (() => {
         SerializableCommand.register(AbstractComponent.transformElementCommandId, (json, editor) => {
             var _a, _b;
@@ -260,3 +265,4 @@ AbstractComponent.TransformElementCommand = (_a = class extends UnresolvedSerial
         });
     })(),
     _a);
+export default AbstractComponent;

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

@@ -14,6 +14,12 @@ export default class ImageComponent extends AbstractComponent {
     render(canvas: AbstractRenderer, _visibleRect?: Rect2): void;
     getProportionalRenderingTime(): number;
     intersects(lineSegment: LineSegment2): boolean;
+    protected applyTransformation(affineTransfm: Mat33): void;
+    description(localizationTable: ImageComponentLocalization): string;
+    getAltText(): string | undefined;
+    getURL(): string;
+    getTransformation(): Mat33;
+    protected createClone(): AbstractComponent;
     protected serializeToJSON(): {
         src: string;
         label: string | undefined;
@@ -21,11 +27,5 @@ export default class ImageComponent extends AbstractComponent {
         height: number;
         transform: Mat33Array;
     };
-    protected applyTransformation(affineTransfm: Mat33): void;
-    description(localizationTable: ImageComponentLocalization): string;
-    getAltText(): string | undefined;
-    getURL(): string;
-    getTransformation(): Mat33;
-    protected createClone(): AbstractComponent;
     static deserializeFromJSON(data: any): ImageComponent;
 }

package/dist/mjs/src/components/ImageComponent.mjs

@@ -9,6 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import  Mat33  from '../math/Mat33.mjs';
 import  Rect2  from '../math/Rect2.mjs';
+import  { assertIsNumber, assertIsNumberArray }  from '../util/assertions.mjs';
 import  AbstractComponent  from './AbstractComponent.mjs';
 // Represents a raster image.
 export default class ImageComponent extends AbstractComponent {
@@ -98,16 +99,6 @@ export default class ImageComponent extends AbstractComponent {
         }
         return false;
     }
-    serializeToJSON() {
-        return {
-            src: this.image.base64Url,
-            label: this.image.label,
-            // Store the width and height for bounding box computations while the image is loading.
-            width: this.image.image.width,
-            height: this.image.image.height,
-            transform: this.image.transform.toArray(),
-        };
-    }
     applyTransformation(affineTransfm) {
         this.image.transform = affineTransfm.rightMul(this.image.transform);
         this.recomputeBBox();
@@ -127,19 +118,33 @@ export default class ImageComponent extends AbstractComponent {
     createClone() {
         return new ImageComponent(Object.assign({}, this.image));
     }
+    serializeToJSON() {
+        return {
+            src: this.image.base64Url,
+            label: this.image.label,
+            // Store the width and height for bounding box computations while the image is loading.
+            width: this.image.image.width,
+            height: this.image.image.height,
+            transform: this.image.transform.toArray(),
+        };
+    }
     static deserializeFromJSON(data) {
         if (!(typeof data.src === 'string')) {
             throw new Error(`${data} has invalid format! Expected src property.`);
         }
+        assertIsNumberArray(data.transform);
+        assertIsNumber(data.width);
+        assertIsNumber(data.height);
         const image = new Image();
         image.src = data.src;
         image.width = data.width;
         image.height = data.height;
+        const transform = new Mat33(...data.transform);
         return new ImageComponent({
             image: image,
-            base64Url: image.src,
+            base64Url: data.src,
             label: data.label,
-            transform: new Mat33(...data.transform),
+            transform,
         });
     }
 }

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

@@ -9,7 +9,7 @@ const componentTypeId = 'text';
 /**
  * Displays text.
  */
-export default class TextComponent extends AbstractComponent {
+class TextComponent extends AbstractComponent {
     /**
      * Creates a new text object from a list of component text or child TextComponents.
      *
@@ -271,4 +271,5 @@ export default class TextComponent extends AbstractComponent {
     }
 }
 TextComponent.textMeasuringCtx = null;
+export default TextComponent;
 AbstractComponent.registerComponent(componentTypeId, (data) => TextComponent.deserializeFromString(data));

package/dist/mjs/src/localizations/de.mjs

@@ -1,4 +1,4 @@
 import  { defaultEditorLocalization }  from '../localization.mjs';
 // German localization
-const localization = Object.assign(Object.assign({}, defaultEditorLocalization), { pen: 'Stift', eraser: 'Radierer', select: 'Auswahl', handTool: 'Verschieben', zoom: 'Vergrößerung', resetView: 'Ansicht zurücksetzen', thicknessLabel: 'Dicke: ', colorLabel: 'Farbe: ', fontLabel: 'Schriftart: ', resizeImageToSelection: 'Bildgröße an Auswahl anpassen', deleteSelection: 'Auswahl löschen', duplicateSelection: 'Auswahl duplizieren', undo: 'Rückgängig', redo: 'Wiederholen', pickColorFromScreen: 'Farbe von Bildschirm auswählen', clickToPickColorAnnouncement: 'Klicke auf den Bildschirm, um eine Farbe auszuwählen', selectionToolKeyboardShortcuts: 'Auswahl-Werkzeug: Verwende die Pfeiltasten, um ausgewählte Elemente zu verschieben und ‚i‘ und ‚o‘, um ihre Größe zu ändern.', touchPanning: 'Ansicht mit Touchscreen verschieben', anyDevicePanning: 'Ansicht mit jedem Eingabegerät verschieben', selectPenType: 'Objekt-Typ: ', freehandPen: 'Freihand', arrowPen: 'Pfeil', linePen: 'Linie', outlinedRectanglePen: 'Umrissenes Rechteck', filledRectanglePen: 'Ausgefülltes Rechteck', dropdownShown: t => `Dropdown-Menü für ${t} angezeigt`, dropdownHidden: t => `Dropdown-Menü für ${t} versteckt`, zoomLevel: t => `Vergößerung: ${t}%`, colorChangedAnnouncement: t => `Farbe zu ${t} geändert`, penTool: t => `Stift ${t}`, selectionTool: 'Auswahl', eraserTool: 'Radiergummi', touchPanTool: 'Ansicht mit Touchscreen verschieben', twoFingerPanZoomTool: 'Ansicht verschieben und vergrößern', undoRedoTool: 'Rückgängig/Wiederholen', rightClickDragPanTool: 'Rechtsklick-Ziehen', pipetteTool: 'Farbe von Bildschirm auswählen', keyboardPanZoom: 'Tastaturkürzel zum Verschieben/Vergrößern der Ansicht', textTool: 'Text', enterTextToInsert: 'Einzufügender Text', toolEnabledAnnouncement: t => `${t} aktiviert`, toolDisabledAnnouncement: t => `${t} deaktiviert`, updatedViewport: 'Transformierte Ansicht', transformedElements: t => `${t} Element${1 === t ? '' : 'e'} transformiert`, resizeOutputCommand: t => `Bildgröße auf ${t.w}x${t.h} geändert`, addElementAction: t => `${t} hinzugefügt`, eraseAction: (t, e) => `${e} ${t} gelöscht`, duplicateAction: (t, e) => `${e} ${t} dupliziert`, inverseOf: t => `Umkehrung von ${t}`, elements: 'Elemente', erasedNoElements: 'Nichts entfernt', duplicatedNoElements: 'Nichts dupliziert', rotatedBy: t => `${Math.abs(t)} Grad ${t < 0 ? 'im Uhrzeigersinn' : 'gegen den Uhrzeigersinn'} gedreht`, movedLeft: 'Nacht links bewegt', movedUp: 'Nacht oben bewegt', movedDown: 'Nacht unten bewegt', movedRight: 'Nacht rechts bewegt', zoomedOut: 'Ansicht verkleinert', zoomedIn: 'Ansicht vergrößert', selectedElements: t => `${t} Element${1 === t ? '' : 'e'} ausgewählt`, stroke: 'Strich', svgObject: 'SVG-Objekt', text: t => `Text-Objekt: ${t}`, pathNodeCount: t => `Es gibt ${t} sichtbare Pfad-Objekte.`, textNodeCount: t => `Es gibt ${t} sichtbare Text-Knotenpunkte.`, textNode: t => `Text: ${t}`, rerenderAsText: 'Als Text darstellen', accessibilityInputInstructions: 'Drücke ‚t‘, um den Inhalt des Ansichtsfensters als Text zu lesen. Verwende die Pfeiltasten, um die Ansicht zu verschieben, und klicke und ziehe, um Striche zu zeichnen. Drücke ‚w‘ zum Vergrößern und ‚s‘ zum Verkleinern der Ansicht.', loading: t => `Laden ${t}%...`, doneLoading: 'Laden fertig', imageEditor: 'Bild-Editor', undoAnnouncement: t => `Rückgangig gemacht ${t}`, redoAnnouncement: t => `Wiederholt ${t}` });
+const localization = Object.assign(Object.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: ', freehandPen: 'Freihand', pressureSensitiveFreehandPen: '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', closeFindDialog: '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/src/math/Mat33.mjs

@@ -5,7 +5,7 @@ import  Vec3  from './Vec3.mjs';
  * a two-dimensional affine transformation. (An affine transformation scales/rotates/shears
  * **and** translates while a linear transformation just scales/rotates/shears).
  */
-export default class Mat33 {
+class Mat33 {
     /**
      * Creates a matrix from inputs in the form,
      * ```
@@ -324,3 +324,4 @@ export default class Mat33 {
     }
 }
 Mat33.identity = new Mat33(1, 0, 0, 0, 1, 0, 0, 0, 1);
+export default Mat33;

package/dist/mjs/src/math/Path.mjs

@@ -29,7 +29,7 @@ const getPartBBox = (part) => {
     }
     return partBBox;
 };
-export default class Path {
+class Path {
     constructor(startPoint, parts) {
         this.startPoint = startPoint;
         this.parts = parts;
@@ -867,3 +867,4 @@ export default class Path {
     }
 }
 Path.empty = new Path(Vec2.zero, []);
+export default Path;

package/dist/mjs/src/math/Rect2.mjs

@@ -1,7 +1,7 @@
 import  LineSegment2  from './LineSegment2.mjs';
 import  { Vec2 }  from './Vec2.mjs';
 // invariant: w ≥ 0, h ≥ 0.
-export default class Rect2 {
+class Rect2 {
     constructor(x, y, w, h) {
         this.x = x;
         this.y = y;
@@ -227,3 +227,4 @@ export default class Rect2 {
 }
 Rect2.empty = new Rect2(0, 0, 0, 0);
 Rect2.unitSquare = new Rect2(0, 0, 1, 1);
+export default Rect2;

package/dist/mjs/src/math/Vec3.mjs

@@ -3,7 +3,7 @@
  *
  * A `Vec3` is immutable.
  */
-export default class Vec3 {
+class Vec3 {
     constructor(x, y, z) {
         this.x = x;
         this.y = y;
@@ -172,3 +172,4 @@ Vec3.unitX = Vec3.of(1, 0, 0);
 Vec3.unitY = Vec3.of(0, 1, 0);
 Vec3.unitZ = Vec3.of(0, 0, 1);
 Vec3.zero = Vec3.of(0, 0, 0);
+export default Vec3;

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

@@ -53,7 +53,7 @@ export default class Display {
      */
     rerenderAsText(): void;
     /**
-     * Clears the drawing surfaces and otherwise prepares for a rerender.
+     * Clears the main drawing surface and otherwise prepares for a rerender.
      *
      * @returns the dry ink renderer.
      */

package/dist/mjs/src/rendering/Display.mjs

@@ -170,14 +170,13 @@ export default class Display {
         }
     }
     /**
-     * Clears the drawing surfaces and otherwise prepares for a rerender.
+     * Clears the main drawing surface and otherwise prepares for a rerender.
      *
      * @returns the dry ink renderer.
      */
     startRerender() {
         var _a;
         (_a = this.resizeSurfacesCallback) === null || _a === void 0 ? void 0 : _a.call(this);
-        this.wetInkRenderer.clear();
         this.dryInkRenderer.clear();
         return this.dryInkRenderer;
     }

package/dist/mjs/src/toolbar/HTMLToolbar.d.ts

@@ -22,6 +22,8 @@ export default class HTMLToolbar {
     private updateColoris;
     /** @internal */
     constructor(editor: Editor, parent: HTMLElement, localizationTable?: ToolbarLocalization);
+    private closeColorPickerOverlay;
+    private setupCloseColorPickerOverlay;
     setupColorPickers(): void;
     private reLayoutQueued;
     private queueReLayout;