js-draw 0.8.0 → 0.9.1

package/dist/src/Color4.js

@@ -63,6 +63,9 @@ export default class Color4 {
         if (text.startsWith('#')) {
             return Color4.fromHex(text);
         }
+        else if (text === 'none' || text === 'transparent') {
+            return Color4.transparent;
+        }
         else {
             // Otherwise, try to use an HTML5Canvas to determine the color
             const canvas = document.createElement('canvas');

package/dist/src/Editor.d.ts

@@ -197,7 +197,9 @@ export declare class Editor {
     addStyleSheet(content: string): HTMLStyleElement;
     sendKeyboardEvent(eventType: InputEvtType.KeyPressEvent | InputEvtType.KeyUpEvent, key: string, ctrlKey?: boolean, altKey?: boolean): void;
     sendPenEvent(eventType: InputEvtType.PointerDownEvt | InputEvtType.PointerMoveEvt | InputEvtType.PointerUpEvt, point: Point2, allPointers?: Pointer[]): void;
+    toDataURL(format?: 'image/png' | 'image/jpeg' | 'image/webp'): string;
     toSVG(): SVGElement;
+    private renderAllWithTransform;
     loadFrom(loader: ImageLoader): Promise<void>;
     getImportExportRect(): Rect2;
     setImportExportRect(imageRect: Rect2): Command;

package/dist/src/Editor.js

@@ -43,6 +43,7 @@ import Mat33 from './math/Mat33';
 import getLocalizationTable from './localizations/getLocalizationTable';
 import IconProvider from './toolbar/IconProvider';
 import { toRoundedString } from './math/rounding';
+import CanvasRenderer from './rendering/renderers/CanvasRenderer';
 // { @inheritDoc Editor! }
 export class Editor {
     /**
@@ -626,17 +627,29 @@ export class Editor {
             current: mainPointer,
         });
     }
+    // Get a data URL (e.g. as produced by `HTMLCanvasElement::toDataURL`).
+    // If `format` is not `image/png`, a PNG image URL may still be returned (as in the
+    // case of `HTMLCanvasElement::toDataURL`).
+    //
+    // The export resolution is the same as the size of the drawing canvas.
+    toDataURL(format = 'image/png') {
+        const canvas = document.createElement('canvas');
+        const resolution = this.importExportViewport.getResolution();
+        canvas.width = resolution.x;
+        canvas.height = resolution.y;
+        const ctx = canvas.getContext('2d');
+        const renderer = new CanvasRenderer(ctx, this.importExportViewport);
+        // Render everything with no transform (0,0) should be (0,0) in the output image
+        this.renderAllWithTransform(renderer, this.importExportViewport, Mat33.identity);
+        const dataURL = canvas.toDataURL(format);
+        return dataURL;
+    }
     toSVG() {
         const importExportViewport = this.importExportViewport;
         const svgNameSpace = 'http://www.w3.org/2000/svg';
         const result = document.createElementNS(svgNameSpace, 'svg');
         const renderer = new SVGRenderer(result, importExportViewport);
-        const origTransform = importExportViewport.canvasToScreenTransform;
-        // Reset the transform to ensure that (0, 0) is (0, 0)
-        importExportViewport.resetTransform(Mat33.identity);
-        // Render **all** elements.
-        this.image.renderAll(renderer);
-        importExportViewport.resetTransform(origTransform);
+        this.renderAllWithTransform(renderer, importExportViewport);
         // Just show the main region
         const rect = importExportViewport.visibleRect;
         result.setAttribute('viewBox', [rect.x, rect.y, rect.w, rect.h].map(part => toRoundedString(part)).join(' '));
@@ -649,6 +662,18 @@ export class Editor {
         result.setAttribute('xmlns', svgNameSpace);
         return result;
     }
+    // Renders everything in this' image to `renderer`, but first transforming the given `viewport`
+    // such that its transform is `transform`. The given `viewport`'s transform is restored before this method
+    // returns.
+    //
+    // For example, rendering with `transform = Mat33.identity` *sets* `viewport`'s transform to `Mat33.identity`,
+    // renders everything in this' image to `renderer`, then restores `viewport`'s transform to whatever it was before.
+    renderAllWithTransform(renderer, viewport, transform = Mat33.identity) {
+        const origTransform = this.importExportViewport.canvasToScreenTransform;
+        viewport.resetTransform(transform);
+        this.image.renderAll(renderer);
+        viewport.resetTransform(origTransform);
+    }
     loadFrom(loader) {
         return __awaiter(this, void 0, void 0, function* () {
             this.showLoadingWarning(0);

package/dist/src/SVGLoader.js

@@ -22,6 +22,7 @@ export const defaultSVGViewRect = new Rect2(0, 0, 500, 500);
 // Key to retrieve unrecognised attributes from an AbstractComponent
 export const svgAttributesDataKey = 'svgAttrs';
 export const svgStyleAttributesDataKey = 'svgStyleAttrs';
+const supportedStrokeFillStyleAttrs = ['stroke', 'fill', 'stroke-width'];
 export default class SVGLoader {
     constructor(source, onFinish, storeUnknown = true) {
         this.source = source;
@@ -123,8 +124,7 @@ export default class SVGLoader {
         try {
             const strokeData = this.strokeDataFromElem(node);
             elem = new Stroke(strokeData);
-            const supportedStyleAttrs = ['stroke', 'fill', 'stroke-width'];
-            this.attachUnrecognisedAttrs(elem, node, new Set([...supportedStyleAttrs, 'd']), new Set(supportedStyleAttrs));
+            this.attachUnrecognisedAttrs(elem, node, new Set([...supportedStrokeFillStyleAttrs, 'd']), new Set(supportedStrokeFillStyleAttrs));
         }
         catch (e) {
             console.error('Invalid path in node', node, '\nError:', e, '\nAdding as an unknown object.');
@@ -193,8 +193,8 @@ export default class SVGLoader {
         const fontSizeMatch = /^([-0-9.e]+)px/i.exec(computedStyles.fontSize);
         const supportedStyleAttrs = [
             'fontFamily',
-            'fill',
-            'transform'
+            'transform',
+            ...supportedStrokeFillStyleAttrs,
         ];
         let fontSize = 12;
         if (fontSizeMatch) {
@@ -204,9 +204,7 @@ export default class SVGLoader {
         const style = {
             size: fontSize,
             fontFamily: computedStyles.fontFamily || elem.style.fontFamily || 'sans-serif',
-            renderingStyle: {
-                fill: Color4.fromString(computedStyles.fill || elem.style.fill || '#000')
-            },
+            renderingStyle: this.getStyle(elem),
         };
         const supportedAttrs = [];
         const transform = this.getTransform(elem, supportedAttrs, computedStyles);

package/dist/src/Viewport.js

@@ -103,8 +103,8 @@ export class Viewport {
         }
         // Represent as k 10ⁿ for some n, k ∈ ℤ.
         const decimalComponent = Math.pow(10, Math.floor(Math.log10(Math.abs(scaleRatio))));
-        const roundAnountFactor = Math.pow(2, roundAmount);
-        scaleRatio = Math.round(scaleRatio / decimalComponent * roundAnountFactor) / roundAnountFactor * decimalComponent;
+        const roundAmountFactor = Math.pow(2, roundAmount);
+        scaleRatio = Math.round(scaleRatio / decimalComponent * roundAmountFactor) / roundAmountFactor * decimalComponent;
         return scaleRatio;
     }
     // Computes and returns an affine transformation that makes `toMakeVisible` visible and roughly centered on the screen.

package/dist/src/components/Stroke.js

@@ -36,7 +36,7 @@ export default class Stroke extends AbstractComponent {
         return false;
     }
     render(canvas, visibleRect) {
-        var _a;
+        var _a, _b;
         canvas.startObject(this.getBBox());
         for (const part of this.parts) {
             const bbox = this.bboxForPart(part.path.bbox, part.style);
@@ -45,7 +45,7 @@ export default class Stroke extends AbstractComponent {
                     continue;
                 }
                 const muchBiggerThanVisible = bbox.size.x > visibleRect.size.x * 2 || bbox.size.y > visibleRect.size.y * 2;
-                if (muchBiggerThanVisible && !part.path.roughlyIntersects(visibleRect, (_a = part.style.stroke) === null || _a === void 0 ? void 0 : _a.width)) {
+                if (muchBiggerThanVisible && !part.path.roughlyIntersects(visibleRect, (_b = (_a = part.style.stroke) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0)) {
                     continue;
                 }
             }

package/dist/src/components/builders/LineBuilder.js

@@ -37,6 +37,10 @@ export default class LineBuilder {
                         kind: PathCommandType.LineTo,
                         point: endPoint.minus(scaledEndNormal),
                     },
+                    {
+                        kind: PathCommandType.LineTo,
+                        point: startPoint.minus(scaledStartNormal),
+                    },
                 ],
                 style: {
                     fill: this.startPoint.color,

package/dist/src/components/util/StrokeSmoother.js

@@ -167,7 +167,7 @@ export class StrokeSmoother {
         if (!controlPoint || segmentStart.eq(controlPoint) || segmentEnd.eq(controlPoint)) {
             // Position the control point closer to the first -- the connecting
             // segment will be roughly a line.
-            controlPoint = segmentStart.plus(enteringVec.times(startEndDist / 3));
+            controlPoint = segmentStart.plus(enteringVec.times(startEndDist / 4));
         }
         console.assert(!segmentStart.eq(controlPoint, 1e-11), 'Start and control points are equal!');
         console.assert(!controlPoint.eq(segmentEnd, 1e-11), 'Control and end points are equal!');

package/dist/src/math/Path.js

@@ -212,7 +212,7 @@ export default class Path {
             return rect.containsPoint(this.startPoint);
         }
         const isClosed = this.startPoint.eq(this.getEndPoint());
-        if (isClosed && strokeWidth == 0) {
+        if (isClosed && strokeWidth === 0) {
             return this.closedRoughlyIntersects(rect);
         }
         if (rect.containsRect(this.bbox)) {
@@ -305,6 +305,11 @@ export default class Path {
                 point: corner,
             });
         }
+        // Close the shape
+        commands.push({
+            kind: PathCommandType.LineTo,
+            point: startPoint,
+        });
         return new Path(startPoint, commands);
     }
     static fromRenderable(renderable) {

package/dist/src/rendering/renderers/SVGRenderer.js

@@ -79,7 +79,12 @@ export default class SVGRenderer extends AbstractRenderer {
         const pathElem = document.createElementNS(svgNameSpace, 'path');
         pathElem.setAttribute('d', this.lastPathString.join(' '));
         const style = this.lastPathStyle;
-        pathElem.setAttribute('fill', style.fill.toHexString());
+        if (style.fill.a > 0) {
+            pathElem.setAttribute('fill', style.fill.toHexString());
+        }
+        else {
+            pathElem.setAttribute('fill', 'none');
+        }
         if (style.stroke) {
             pathElem.setAttribute('stroke', style.stroke.color.toHexString());
             pathElem.setAttribute('stroke-width', style.stroke.width.toString());

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

@@ -7,12 +7,15 @@ export default class HTMLToolbar {
     private editor;
     private localizationTable;
     private container;
+    private widgets;
     private static colorisStarted;
     private updateColoris;
     /** @internal */
     constructor(editor: Editor, parent: HTMLElement, localizationTable?: ToolbarLocalization);
     setupColorPickers(): void;
     addWidget(widget: BaseWidget): void;
+    serializeState(): string;
+    deserializeState(state: string): void;
     addActionButton(title: string | ActionButtonIcon, command: () => void, parent?: Element): HTMLButtonElement;
     addUndoRedoButtons(): void;
     addDefaultToolWidgets(): void;

package/dist/src/toolbar/HTMLToolbar.js

@@ -18,6 +18,7 @@ export default class HTMLToolbar {
     constructor(editor, parent, localizationTable = defaultToolbarLocalization) {
         this.editor = editor;
         this.localizationTable = localizationTable;
+        this.widgets = {};
         this.updateColoris = null;
         this.container = document.createElement('div');
         this.container.classList.add(`${toolbarCSSPrefix}root`);
@@ -95,9 +96,32 @@ export default class HTMLToolbar {
     // Adds an `ActionButtonWidget` or `BaseToolWidget`. The widget should not have already have a parent
     // (i.e. its `addTo` method should not have been called).
     addWidget(widget) {
+        // Prevent name collisions
+        const id = widget.getUniqueIdIn(this.widgets);
+        // Add the widget
+        this.widgets[id] = widget;
+        // Add HTML elements.
         widget.addTo(this.container);
         this.setupColorPickers();
     }
+    serializeState() {
+        const result = {};
+        for (const widgetId in this.widgets) {
+            result[widgetId] = this.widgets[widgetId].serializeState();
+        }
+        return JSON.stringify(result);
+    }
+    // Deserialize toolbar widgets from the given state.
+    // Assumes that toolbar widgets are in the same order as when state was serialized.
+    deserializeState(state) {
+        const data = JSON.parse(state);
+        for (const widgetId in data) {
+            if (!(widgetId in this.widgets)) {
+                console.warn(`Unable to deserialize widget ${widgetId} ­— no such widget.`);
+            }
+            this.widgets[widgetId].deserializeFrom(data[widgetId]);
+        }
+    }
     addActionButton(title, command, parent) {
         const button = document.createElement('button');
         button.classList.add(`${toolbarCSSPrefix}button`);

package/dist/src/toolbar/IconProvider.d.ts

@@ -18,6 +18,7 @@ export default class IconProvider {
     makeTouchPanningIcon(): IconType;
     makeAllDevicePanningIcon(): IconType;
     makeZoomIcon(): IconType;
+    makeRotationLockIcon(): IconType;
     makeTextIcon(textStyle: TextStyle): IconType;
     makePenIcon(tipThickness: number, color: string | Color4): IconType;
     makeIconFromFactory(pen: Pen, factory: ComponentBuilderFactory): IconType;

package/dist/src/toolbar/IconProvider.js

@@ -113,7 +113,7 @@ export default class IconProvider {
         const fill = 'none';
         const strokeColor = 'var(--icon-color)';
         const strokeWidth = '3';
-        // Draw a cursor-like shape (like some of the other icons, made with Inkscape)
+        // Draw a cursor-like shape
         return this.makeIconFromPath(`
 			m 10,60
 				5,30
@@ -242,6 +242,48 @@ export default class IconProvider {
         addTextNode('-', 70, 75);
         return icon;
     }
+    makeRotationLockIcon() {
+        const icon = this.makeIconFromPath(`
+			M 40.1 25.1 
+			C 32.5 25 27.9 34.1 27.9 34.1 
+			L 25.7 30 
+			L 28 44.7 
+			L 36.6 40.3 
+			L 32.3 38.3 
+			C 33.6 28 38.1 25.2 45.1 31.8 
+			L 49.4 29.6 
+			C 45.9 26.3 42.8 25.1 40.1 25.1 
+			z
+
+			M 51.7 34.2 
+			L 43.5 39.1 
+			L 48 40.8 
+			C 47.4 51.1 43.1 54.3 35.7 48.2 
+			L 31.6 50.7 
+			C 45.5 62.1 52.6 44.6 52.6 44.6 
+			L 55.1 48.6 
+			L 51.7 34.2 
+			z
+
+			M 56.9 49.9 
+			C 49.8 49.9 49.2 57.3 49.3 60.9 
+			L 47.6 60.9 
+			L 47.6 73.7 
+			L 66.1 73.7 
+			L 66.1 60.9 
+			L 64.4 60.9 
+			C 64.5 57.3 63.9 49.9 56.9 49.9 
+			z
+
+			M 56.9 53.5 
+			C 60.8 53.5 61 58.2 60.8 60.9 
+			L 52.9 60.9 
+			C 52.7 58.2 52.9 53.5 56.9 53.5 
+			z
+		`);
+        icon.setAttribute('viewBox', '10 10 70 70');
+        return icon;
+    }
     makeTextIcon(textStyle) {
         var _a, _b;
         const icon = document.createElementNS(svgNamespace, 'svg');

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

@@ -1,6 +1,7 @@
 export interface ToolbarLocalization {
     fontLabel: string;
     touchPanning: string;
+    lockRotation: string;
     outlinedRectanglePen: string;
     filledRectanglePen: string;
     linePen: string;

package/dist/src/toolbar/localization.js

@@ -24,6 +24,7 @@ export const defaultToolbarLocalization = {
     linePen: 'Line',
     outlinedRectanglePen: 'Outlined rectangle',
     filledRectanglePen: 'Filled rectangle',
+    lockRotation: 'Lock rotation',
     dropdownShown: (toolName) => `Dropdown for ${toolName} shown`,
     dropdownHidden: (toolName) => `Dropdown for ${toolName} hidden`,
     zoomLevel: (zoomPercent) => `Zoom: ${zoomPercent}%`,

package/dist/src/toolbar/makeColorInput.d.ts

@@ -1,5 +1,6 @@
 import Color4 from '../Color4';
 import Editor from '../Editor';
 declare type OnColorChangeListener = (color: Color4) => void;
-export declare const makeColorInput: (editor: Editor, onColorChange: OnColorChangeListener) => [HTMLInputElement, HTMLElement];
+declare type SetColorCallback = (color: Color4 | string) => void;
+export declare const makeColorInput: (editor: Editor, onColorChange: OnColorChangeListener) => [HTMLInputElement, HTMLElement, SetColorCallback];
 export default makeColorInput;

package/dist/src/toolbar/makeColorInput.js

@@ -1,7 +1,7 @@
 import Color4 from '../Color4';
 import PipetteTool from '../tools/PipetteTool';
 import { EditorEventType } from '../types';
-// Returns [ color input, input container ].
+// Returns [ color input, input container, callback to change the color value ].
 export const makeColorInput = (editor, onColorChange) => {
     const colorInputContainer = document.createElement('span');
     const colorInput = document.createElement('input');
@@ -22,6 +22,8 @@ export const makeColorInput = (editor, onColorChange) => {
     const handleColorInput = () => {
         currentColor = Color4.fromHex(colorInput.value);
     };
+    // Only change the pen color when we finish sending input (this limits the number of
+    // editor events triggered and accessibility announcements).
     const onInputEnd = () => {
         handleColorInput();
         if (currentColor) {
@@ -47,7 +49,16 @@ export const makeColorInput = (editor, onColorChange) => {
         });
         onInputEnd();
     });
-    return [colorInput, colorInputContainer];
+    const setColorInputValue = (color) => {
+        if (typeof color === 'object') {
+            color = color.toHexString();
+        }
+        colorInput.value = color;
+        // Fire all color event listeners. See
+        // https://github.com/mdbassit/Coloris#manually-updating-the-thumbnail
+        colorInput.dispatchEvent(new Event('input', { bubbles: true }));
+    };
+    return [colorInput, colorInputContainer, setColorInputValue];
 };
 const addPipetteTool = (editor, container, onColorChange) => {
     const pipetteButton = document.createElement('button');

package/dist/src/toolbar/widgets/ActionButtonWidget.d.ts

@@ -5,7 +5,7 @@ export default class ActionButtonWidget extends BaseWidget {
     protected makeIcon: () => Element;
     protected title: string;
     protected clickAction: () => void;
-    constructor(editor: Editor, localizationTable: ToolbarLocalization, makeIcon: () => Element, title: string, clickAction: () => void);
+    constructor(editor: Editor, id: string, makeIcon: () => Element, title: string, clickAction: () => void, localizationTable?: ToolbarLocalization);
     protected handleClick(): void;
     protected getTitle(): string;
     protected createIcon(): Element;

package/dist/src/toolbar/widgets/ActionButtonWidget.js

@@ -1,7 +1,7 @@
 import BaseWidget from './BaseWidget';
 export default class ActionButtonWidget extends BaseWidget {
-    constructor(editor, localizationTable, makeIcon, title, clickAction) {
-        super(editor, localizationTable);
+    constructor(editor, id, makeIcon, title, clickAction, localizationTable) {
+        super(editor, id, localizationTable);
         this.makeIcon = makeIcon;
         this.title = title;
         this.clickAction = clickAction;

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

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

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

@@ -1,11 +1,10 @@
 import { EditorEventType } from '../../types';
 import BaseWidget from './BaseWidget';
 export default class BaseToolWidget extends BaseWidget {
-    constructor(editor, targetTool, localizationTable) {
-        super(editor, localizationTable);
+    constructor(editor, targetTool, id, localizationTable) {
+        super(editor, id, localizationTable);
         this.editor = editor;
         this.targetTool = targetTool;
-        this.localizationTable = localizationTable;
         editor.notifier.on(EditorEventType.ToolEnabled, toolEvt => {
             if (toolEvt.kind !== EditorEventType.ToolEnabled) {
                 throw new Error('Incorrect event type! (Expected ToolEnabled)');

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

@@ -1,10 +1,11 @@
 import Editor from '../../Editor';
 import { KeyPressEvent } from '../../types';
 import { ToolbarLocalization } from '../localization';
+export declare type SavedToolbuttonState = Record<string, any>;
 export default abstract class BaseWidget {
     #private;
     protected editor: Editor;
-    protected localizationTable: ToolbarLocalization;
+    protected id: string;
     protected readonly container: HTMLElement;
     private button;
     private icon;
@@ -14,7 +15,19 @@ export default abstract class BaseWidget {
     private disabled;
     private subWidgets;
     private toplevel;
-    constructor(editor: Editor, localizationTable: ToolbarLocalization);
+    protected readonly localizationTable: ToolbarLocalization;
+    constructor(editor: Editor, id: string, localizationTable?: ToolbarLocalization);
+    getId(): string;
+    /**
+     * Returns the ID of this widget in `container`. Adds a suffix to this' ID
+     * if an item in `container` already has this' ID.
+     *
+     * For example, if `this` has ID `foo` and if
+     * `container = { 'foo': somethingNotThis, 'foo-1': somethingElseNotThis }`, this method
+     * returns `foo-2` because elements with IDs `foo` and `foo-1` are already present in
+     * `container`.
+     */
+    getUniqueIdIn(container: Record<string, BaseWidget>): string;
     protected abstract getTitle(): string;
     protected abstract createIcon(): Element;
     protected fillDropdown(dropdown: HTMLElement): boolean;
@@ -34,4 +47,21 @@ export default abstract class BaseWidget {
     protected isDropdownVisible(): boolean;
     protected isSelected(): boolean;
     private createDropdownIcon;
+    /**
+     * Serialize state associated with this widget.
+     * Override this method to allow saving/restoring from state on application load.
+     *
+     * Overriders should call `super` and include the output of `super.serializeState` in
+     * the output dictionary.
+     *
+     * Clients should not rely on the output from `saveState` being in any particular
+     * format.
+     */
+    serializeState(): SavedToolbuttonState;
+    /**
+     * Restore widget state from serialized data. See also `saveState`.
+     *
+     * Overriders must call `super`.
+     */
+    deserializeFrom(state: SavedToolbuttonState): void;
 }

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

@@ -14,13 +14,15 @@ import ToolbarShortcutHandler from '../../tools/ToolbarShortcutHandler';
 import { EditorEventType, InputEvtType } from '../../types';
 import { toolbarCSSPrefix } from '../HTMLToolbar';
 export default class BaseWidget {
-    constructor(editor, localizationTable) {
+    constructor(editor, id, localizationTable) {
         this.editor = editor;
-        this.localizationTable = localizationTable;
+        this.id = id;
         _BaseWidget_hasDropdown.set(this, void 0);
         this.disabled = false;
-        this.subWidgets = [];
+        // Maps subWidget IDs to subWidgets.
+        this.subWidgets = {};
         this.toplevel = true;
+        this.localizationTable = localizationTable !== null && localizationTable !== void 0 ? localizationTable : editor.localization;
         this.icon = null;
         this.container = document.createElement('div');
         this.container.classList.add(`${toolbarCSSPrefix}toolContainer`);
@@ -40,13 +42,35 @@ export default class BaseWidget {
             toolbarShortcutHandlers[0].registerListener(event => this.onKeyPress(event));
         }
     }
+    getId() {
+        return this.id;
+    }
+    /**
+     * Returns the ID of this widget in `container`. Adds a suffix to this' ID
+     * if an item in `container` already has this' ID.
+     *
+     * For example, if `this` has ID `foo` and if
+     * `container = { 'foo': somethingNotThis, 'foo-1': somethingElseNotThis }`, this method
+     * returns `foo-2` because elements with IDs `foo` and `foo-1` are already present in
+     * `container`.
+     */
+    getUniqueIdIn(container) {
+        let id = this.getId();
+        let idCounter = 0;
+        while (id in container && container[id] !== this) {
+            id = this.getId() + '-' + idCounter.toString();
+            idCounter++;
+        }
+        return id;
+    }
     // Add content to the widget's associated dropdown menu.
     // Returns true if such a menu should be created, false otherwise.
     fillDropdown(dropdown) {
-        if (this.subWidgets.length === 0) {
+        if (Object.keys(this.subWidgets).length === 0) {
             return false;
         }
-        for (const widget of this.subWidgets) {
+        for (const widgetId in this.subWidgets) {
+            const widget = this.subWidgets[widgetId];
             widget.addTo(dropdown);
             widget.setIsToplevel(false);
         }
@@ -100,7 +124,9 @@ export default class BaseWidget {
     }
     // Add a widget to this' dropdown. Must be called before this.addTo.
     addSubWidget(widget) {
-        this.subWidgets.push(widget);
+        // Generate a unique ID for the widget.
+        const id = widget.getUniqueIdIn(this.subWidgets);
+        this.subWidgets[id] = widget;
     }
     // Adds this to [parent]. This can only be called once for each ToolbarWidget.
     // @internal
@@ -209,5 +235,40 @@ export default class BaseWidget {
         icon.classList.add(`${toolbarCSSPrefix}showHideDropdownIcon`);
         return icon;
     }
+    /**
+     * Serialize state associated with this widget.
+     * Override this method to allow saving/restoring from state on application load.
+     *
+     * Overriders should call `super` and include the output of `super.serializeState` in
+     * the output dictionary.
+     *
+     * Clients should not rely on the output from `saveState` being in any particular
+     * format.
+     */
+    serializeState() {
+        const subwidgetState = {};
+        // Save all subwidget state.
+        for (const subwidgetId in this.subWidgets) {
+            subwidgetState[subwidgetId] = this.subWidgets[subwidgetId].serializeState();
+        }
+        return {
+            subwidgetState,
+        };
+    }
+    /**
+     * Restore widget state from serialized data. See also `saveState`.
+     *
+     * Overriders must call `super`.
+     */
+    deserializeFrom(state) {
+        if (state.subwidgetState) {
+            // Deserialize all subwidgets.
+            for (const subwidgetId in state.subwidgetState) {
+                if (subwidgetId in this.subWidgets) {
+                    this.subWidgets[subwidgetId].deserializeFrom(state.subwidgetState[subwidgetId]);
+                }
+            }
+        }
+    }
 }
 _BaseWidget_hasDropdown = new WeakMap();

package/dist/src/toolbar/widgets/EraserToolWidget.d.ts

@@ -1,5 +1,9 @@
+import Editor from '../../Editor';
+import Eraser from '../../tools/Eraser';
+import { ToolbarLocalization } from '../localization';
 import BaseToolWidget from './BaseToolWidget';
 export default class EraserToolWidget extends BaseToolWidget {
+    constructor(editor: Editor, tool: Eraser, localizationTable?: ToolbarLocalization);
     protected getTitle(): string;
     protected createIcon(): Element;
     protected fillDropdown(_dropdown: HTMLElement): boolean;

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

@@ -1,5 +1,8 @@
 import BaseToolWidget from './BaseToolWidget';
 export default class EraserToolWidget extends BaseToolWidget {
+    constructor(editor, tool, localizationTable) {
+        super(editor, tool, 'eraser-tool-widget', localizationTable);
+    }
     getTitle() {
         return this.localizationTable.eraser;
     }

package/dist/src/toolbar/widgets/HandToolWidget.d.ts

@@ -2,9 +2,9 @@ import Editor from '../../Editor';
 import PanZoom from '../../tools/PanZoom';
 import { ToolbarLocalization } from '../localization';
 import BaseToolWidget from './BaseToolWidget';
+import { SavedToolbuttonState } from './BaseWidget';
 export default class HandToolWidget extends BaseToolWidget {
     protected overridePanZoomTool: PanZoom;
-    private touchPanningWidget;
     private allowTogglingBaseTool;
     constructor(editor: Editor, overridePanZoomTool: PanZoom, localizationTable: ToolbarLocalization);
     private static getPrimaryHandTool;
@@ -12,4 +12,6 @@ export default class HandToolWidget extends BaseToolWidget {
     protected createIcon(): Element;
     protected handleClick(): void;
     setSelected(selected: boolean): void;
+    serializeState(): SavedToolbuttonState;
+    deserializeFrom(state: SavedToolbuttonState): void;
 }