js-draw 0.8.0 → 0.9.0

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

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

@@ -57,7 +57,7 @@ const makeZoomControl = (localizationTable, editor) => {
 };
 class ZoomWidget extends BaseWidget {
     constructor(editor, localizationTable) {
-        super(editor, localizationTable);
+        super(editor, 'zoom-widget', localizationTable);
         // Make it possible to open the dropdown, even if this widget isn't selected.
         this.container.classList.add('dropdownShowable');
     }
@@ -76,8 +76,8 @@ class ZoomWidget extends BaseWidget {
     }
 }
 class HandModeWidget extends BaseWidget {
-    constructor(editor, localizationTable, tool, flag, makeIcon, title) {
-        super(editor, localizationTable);
+    constructor(editor, tool, flag, makeIcon, title, localizationTable) {
+        super(editor, `pan-mode-${flag}`, localizationTable);
         this.tool = tool;
         this.flag = flag;
         this.makeIcon = makeIcon;
@@ -94,13 +94,7 @@ class HandModeWidget extends BaseWidget {
         this.setSelected(false);
     }
     setModeFlag(enabled) {
-        const mode = this.tool.getMode();
-        if (enabled) {
-            this.tool.setMode(mode | this.flag);
-        }
-        else {
-            this.tool.setMode(mode & ~this.flag);
-        }
+        this.tool.setModeEnabled(this.flag, enabled);
     }
     handleClick() {
         this.setModeFlag(!this.isSelected());
@@ -122,7 +116,7 @@ export default class HandToolWidget extends BaseToolWidget {
     overridePanZoomTool, localizationTable) {
         const primaryHandTool = HandToolWidget.getPrimaryHandTool(editor.toolController);
         const tool = primaryHandTool !== null && primaryHandTool !== void 0 ? primaryHandTool : overridePanZoomTool;
-        super(editor, tool, localizationTable);
+        super(editor, tool, 'hand-tool-widget', localizationTable);
         this.overridePanZoomTool = overridePanZoomTool;
         // Only allow toggling a hand tool if we're using the primary hand tool and not the override
         // hand tool for this button.
@@ -132,8 +126,10 @@ export default class HandToolWidget extends BaseToolWidget {
             this.container.classList.add('dropdownShowable');
         }
         // Controls for the overriding hand tool.
-        this.touchPanningWidget = new HandModeWidget(editor, localizationTable, overridePanZoomTool, PanZoomMode.OneFingerTouchGestures, () => this.editor.icons.makeTouchPanningIcon(), localizationTable.touchPanning);
-        this.addSubWidget(this.touchPanningWidget);
+        const touchPanningWidget = new HandModeWidget(editor, overridePanZoomTool, PanZoomMode.OneFingerTouchGestures, () => this.editor.icons.makeTouchPanningIcon(), localizationTable.touchPanning, localizationTable);
+        const rotationLockWidget = new HandModeWidget(editor, overridePanZoomTool, PanZoomMode.RotationLocked, () => this.editor.icons.makeRotationLockIcon(), localizationTable.lockRotation, localizationTable);
+        this.addSubWidget(touchPanningWidget);
+        this.addSubWidget(rotationLockWidget);
         this.addSubWidget(new ZoomWidget(editor, localizationTable));
     }
     static getPrimaryHandTool(toolController) {
@@ -160,4 +156,17 @@ export default class HandToolWidget extends BaseToolWidget {
             super.setSelected(selected);
         }
     }
+    serializeState() {
+        const toolMode = this.overridePanZoomTool.getMode();
+        return Object.assign(Object.assign({}, super.serializeState()), { touchPanning: toolMode & PanZoomMode.OneFingerTouchGestures, rotationLocked: toolMode & PanZoomMode.RotationLocked });
+    }
+    deserializeFrom(state) {
+        if (state.touchPanning !== undefined) {
+            this.overridePanZoomTool.setModeEnabled(PanZoomMode.OneFingerTouchGestures, state.touchPanning);
+        }
+        if (state.rotationLocked !== undefined) {
+            this.overridePanZoomTool.setModeEnabled(PanZoomMode.RotationLocked, state.rotationLocked);
+        }
+        super.deserializeFrom(state);
+    }
 }

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

@@ -4,18 +4,24 @@ import Pen from '../../tools/Pen';
 import { KeyPressEvent } from '../../types';
 import { ToolbarLocalization } from '../localization';
 import BaseToolWidget from './BaseToolWidget';
+import { SavedToolbuttonState } from './BaseWidget';
 export interface PenTypeRecord {
     name: string;
+    id: string;
     factory: ComponentBuilderFactory;
 }
 export default class PenToolWidget extends BaseToolWidget {
     private tool;
     private updateInputs;
     protected penTypes: PenTypeRecord[];
-    constructor(editor: Editor, tool: Pen, localization: ToolbarLocalization);
+    constructor(editor: Editor, tool: Pen, localization?: ToolbarLocalization);
     protected getTitle(): string;
+    private getCurrentPenTypeIdx;
+    private getCurrentPenType;
     protected createIcon(): Element;
     private static idCounter;
     protected fillDropdown(dropdown: HTMLElement): boolean;
     protected onKeyPress(event: KeyPressEvent): boolean;
+    serializeState(): SavedToolbuttonState;
+    deserializeFrom(state: SavedToolbuttonState): void;
 }