js-draw 0.21.0 → 0.22.0

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/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/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;

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

@@ -16,8 +16,9 @@ import  ActionButtonWidget  from './widgets/ActionButtonWidget.mjs';
 import  InsertImageWidget  from './widgets/InsertImageWidget.mjs';
 import  DocumentPropertiesWidget  from './widgets/DocumentPropertiesWidget.mjs';
 import  OverflowWidget  from './widgets/OverflowWidget.mjs';
+import  { Vec2 }  from '../math/Vec2.mjs';
 export const toolbarCSSPrefix = 'toolbar-';
-export default class HTMLToolbar {
+class HTMLToolbar {
     /** @internal */
     constructor(editor, parent, localizationTable = defaultToolbarLocalization) {
         this.editor = editor;
@@ -30,6 +31,7 @@ export default class HTMLToolbar {
         // Widget to toggle overflow menu.
         this.overflowWidget = null;
         this.updateColoris = null;
+        this.closeColorPickerOverlay = null;
         this.reLayoutQueued = false;
         this.container = document.createElement('div');
         this.container.classList.add(`${toolbarCSSPrefix}root`);
@@ -50,6 +52,68 @@ export default class HTMLToolbar {
             console.warn('ResizeObserver not supported. Toolbar will not resize.');
         }
     }
+    setupCloseColorPickerOverlay() {
+        if (this.closeColorPickerOverlay)
+            return;
+        this.closeColorPickerOverlay = document.createElement('div');
+        this.closeColorPickerOverlay.className = `${toolbarCSSPrefix}closeColorPickerOverlay`;
+        this.editor.createHTMLOverlay(this.closeColorPickerOverlay);
+        // Buffer events: Send events to the editor only if the pointer has moved enough to
+        // suggest that the user is attempting to draw, rather than click to close the color picker.
+        let eventBuffer = [];
+        let gestureStartPos = null;
+        // Hide the color picker when attempting to draw on the overlay.
+        this.listeners.push(this.editor.handlePointerEventsFrom(this.closeColorPickerOverlay, (eventName, event) => {
+            var _a, _b;
+            // Position of the current event.
+            const currentPos = Vec2.of(event.pageX, event.pageY);
+            // Whether to send the current event to the editor
+            let sendToEditor = true;
+            if (eventName === 'pointerdown') {
+                closeColoris();
+                // Buffer the event, but don't send it to the editor yet.
+                // We don't want to send single-click events, but we do want to send full strokes.
+                eventBuffer = [];
+                eventBuffer.push([eventName, event]);
+                gestureStartPos = currentPos;
+                // Capture the pointer so we receive future events even if the overlay is hidden.
+                (_a = this.closeColorPickerOverlay) === null || _a === void 0 ? void 0 : _a.setPointerCapture(event.pointerId);
+                // Don't send to the editor.
+                sendToEditor = false;
+            }
+            else if (eventName === 'pointermove') {
+                // Skip if the pointer hasn't moved enough to not be a "click".
+                const strokeStartThreshold = 10;
+                if (gestureStartPos && currentPos.minus(gestureStartPos).magnitude() < strokeStartThreshold) {
+                    eventBuffer.push([eventName, event]);
+                    sendToEditor = false;
+                }
+                else {
+                    // Send all buffered events to the editor -- start the stroke.
+                    for (const [eventName, event] of eventBuffer) {
+                        this.editor.handleHTMLPointerEvent(eventName, event);
+                    }
+                    eventBuffer = [];
+                    sendToEditor = true;
+                }
+            }
+            // Otherwise, if we received a pointerup/pointercancel without flushing all pointerevents from the
+            // buffer, the gesture wasn't recognised as a stroke. Thus, the editor isn't expecting a pointerup/
+            // pointercancel event.
+            else if ((eventName === 'pointerup' || eventName === 'pointercancel') && eventBuffer.length > 0) {
+                (_b = this.closeColorPickerOverlay) === null || _b === void 0 ? void 0 : _b.releasePointerCapture(event.pointerId);
+                eventBuffer = [];
+                // Don't send to the editor.
+                sendToEditor = false;
+            }
+            // Transfer focus to the editor to allow keyboard events to be handled.
+            if (eventName === 'pointerup') {
+                this.editor.focus();
+            }
+            // Forward all other events to the editor.
+            return sendToEditor;
+        }));
+    }
     // @internal
     setupColorPickers() {
         // Much of the setup only needs to be done once.
@@ -57,16 +121,7 @@ export default class HTMLToolbar {
             this.updateColoris();
             return;
         }
-        const closePickerOverlay = document.createElement('div');
-        closePickerOverlay.className = `${toolbarCSSPrefix}closeColorPickerOverlay`;
-        this.editor.createHTMLOverlay(closePickerOverlay);
-        // Hide the color picker when attempting to draw on the overlay.
-        this.listeners.push(this.editor.handlePointerEventsFrom(closePickerOverlay, (eventName) => {
-            if (eventName === 'pointerdown') {
-                closeColoris();
-            }
-            return true;
-        }));
+        this.setupCloseColorPickerOverlay();
         const maxSwatchLen = 12;
         const swatches = [
             Color4.red.toHexString(),
@@ -111,7 +166,9 @@ export default class HTMLToolbar {
             }
             // Show/hide the overlay. Making the overlay visible gives users a surface to click
             // on that shows/hides the color picker.
-            closePickerOverlay.style.display = event.open ? 'block' : 'none';
+            if (this.closeColorPickerOverlay) {
+                this.closeColorPickerOverlay.style.display = event.open ? 'block' : 'none';
+            }
         }));
         // Add newly-selected colors to the swatch.
         this.listeners.push(this.editor.notifier.on(EditorEventType.ColorPickerColorSelected, event => {
@@ -373,11 +430,14 @@ export default class HTMLToolbar {
         this.addDefaultActionButtons();
     }
     remove() {
+        var _a;
         this.container.remove();
         this.resizeObserver.disconnect();
+        (_a = this.closeColorPickerOverlay) === null || _a === void 0 ? void 0 : _a.remove();
         for (const listener of this.listeners) {
             listener.remove();
         }
     }
 }
 HTMLToolbar.colorisStarted = false;
+export default HTMLToolbar;

package/dist/mjs/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/mjs/src/toolbar/widgets/BaseToolWidget.mjs

@@ -3,7 +3,6 @@ import  BaseWidget  from './BaseWidget.mjs';
 export default class BaseToolWidget extends BaseWidget {
     constructor(editor, targetTool, id, localizationTable) {
         super(editor, id, localizationTable);
-        this.editor = editor;
         this.targetTool = targetTool;
         editor.notifier.on(EditorEventType.ToolEnabled, toolEvt => {
             if (toolEvt.kind !== EditorEventType.ToolEnabled) {

package/dist/mjs/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/mjs/src/toolbar/widgets/BaseWidget.mjs

@@ -135,14 +135,26 @@ export default 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);

package/dist/mjs/src/toolbar/widgets/DocumentPropertiesWidget.mjs

@@ -7,7 +7,7 @@ import  { EditorEventType }  from '../../types.mjs';
 import  { toolbarCSSPrefix }  from '../HTMLToolbar.mjs';
 import  makeColorInput  from '../makeColorInput.mjs';
 import  BaseWidget  from './BaseWidget.mjs';
-export default class DocumentPropertiesWidget extends BaseWidget {
+class DocumentPropertiesWidget extends BaseWidget {
     constructor(editor, localizationTable) {
         super(editor, 'document-properties-widget', localizationTable);
         this.updateDropdownContent = () => { };
@@ -170,3 +170,4 @@ export default class DocumentPropertiesWidget extends BaseWidget {
     }
 }
 DocumentPropertiesWidget.idCounter = 0;
+export default DocumentPropertiesWidget;

package/dist/mjs/src/toolbar/widgets/EraserToolWidget.mjs

@@ -1,7 +1,7 @@
 import  { EditorEventType }  from '../../types.mjs';
 import  { toolbarCSSPrefix }  from '../HTMLToolbar.mjs';
 import  BaseToolWidget  from './BaseToolWidget.mjs';
-export default class EraserToolWidget extends BaseToolWidget {
+class EraserToolWidget extends BaseToolWidget {
     constructor(editor, tool, localizationTable) {
         super(editor, tool, 'eraser-tool-widget', localizationTable);
         this.tool = tool;
@@ -55,3 +55,4 @@ export default class EraserToolWidget extends BaseToolWidget {
     }
 }
 EraserToolWidget.nextThicknessInputId = 0;
+export default EraserToolWidget;

package/dist/mjs/src/toolbar/widgets/InsertImageWidget.mjs

@@ -15,7 +15,7 @@ import  SelectionTool  from '../../tools/SelectionTool/SelectionTool.mjs';
 import  Mat33  from '../../math/Mat33.mjs';
 import  fileToBase64  from '../../util/fileToBase64.mjs';
 import  ActionButtonWidget  from './ActionButtonWidget.mjs';
-export default class InsertImageWidget extends ActionButtonWidget {
+class InsertImageWidget extends ActionButtonWidget {
     constructor(editor, localization) {
         localization !== null && localization !== void 0 ? localization : (localization = editor.localization);
         super(editor, 'insert-image-widget', () => editor.icons.makeInsertImageIcon(), localization.image, () => this.onClicked());
@@ -168,3 +168,4 @@ export default class InsertImageWidget extends ActionButtonWidget {
     }
 }
 InsertImageWidget.nextInputId = 0;
+export default InsertImageWidget;

package/dist/mjs/src/toolbar/widgets/PenToolWidget.mjs

@@ -8,7 +8,7 @@ import  { toolbarCSSPrefix }  from '../HTMLToolbar.mjs';
 import  makeColorInput  from '../makeColorInput.mjs';
 import  BaseToolWidget  from './BaseToolWidget.mjs';
 import  Color4  from '../../Color4.mjs';
-export default class PenToolWidget extends BaseToolWidget {
+class PenToolWidget extends BaseToolWidget {
     constructor(editor, tool, localization) {
         super(editor, tool, 'pen', localization);
         this.tool = tool;
@@ -218,3 +218,4 @@ export default class PenToolWidget extends BaseToolWidget {
     }
 }
 PenToolWidget.idCounter = 0;
+export default PenToolWidget;

package/dist/mjs/src/toolbar/widgets/TextToolWidget.mjs

@@ -3,7 +3,7 @@ import  { EditorEventType }  from '../../types.mjs';
 import  { toolbarCSSPrefix }  from '../HTMLToolbar.mjs';
 import  makeColorInput  from '../makeColorInput.mjs';
 import  BaseToolWidget  from './BaseToolWidget.mjs';
-export default class TextToolWidget extends BaseToolWidget {
+class TextToolWidget extends BaseToolWidget {
     constructor(editor, tool, localization) {
         super(editor, tool, 'text-tool-widget', localization);
         this.tool = tool;
@@ -107,3 +107,4 @@ export default class TextToolWidget extends BaseToolWidget {
     }
 }
 TextToolWidget.idCounter = 0;
+export default TextToolWidget;