js-draw 0.7.2 → 0.9.0

package/dist/src/math/Path.js

@@ -195,6 +195,45 @@ export default class Path {
             ...other.parts,
         ]);
     }
+    getEndPoint() {
+        if (this.parts.length === 0) {
+            return this.startPoint;
+        }
+        const lastPart = this.parts[this.parts.length - 1];
+        if (lastPart.kind === PathCommandType.QuadraticBezierTo || lastPart.kind === PathCommandType.CubicBezierTo) {
+            return lastPart.endPoint;
+        }
+        else {
+            return lastPart.point;
+        }
+    }
+    roughlyIntersects(rect, strokeWidth = 0) {
+        if (this.parts.length === 0) {
+            return rect.containsPoint(this.startPoint);
+        }
+        const isClosed = this.startPoint.eq(this.getEndPoint());
+        if (isClosed && strokeWidth === 0) {
+            return this.closedRoughlyIntersects(rect);
+        }
+        if (rect.containsRect(this.bbox)) {
+            return true;
+        }
+        // Does the rectangle intersect the bounding boxes of any of this' parts?
+        let startPoint = this.startPoint;
+        for (const part of this.parts) {
+            const bbox = Path.computeBBoxForSegment(startPoint, part).grownBy(strokeWidth);
+            if (part.kind === PathCommandType.LineTo || part.kind === PathCommandType.MoveTo) {
+                startPoint = part.point;
+            }
+            else {
+                startPoint = part.endPoint;
+            }
+            if (rect.intersects(bbox)) {
+                return true;
+            }
+        }
+        return false;
+    }
     // Treats this as a closed path and returns true if part of `rect` is roughly within
     // this path's interior.
     //
@@ -266,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/CanvasRenderer.js

@@ -64,6 +64,8 @@ export default class CanvasRenderer extends AbstractRenderer {
         if (style.stroke) {
             this.ctx.strokeStyle = style.stroke.color.toHexString();
             this.ctx.lineWidth = this.getSizeOfCanvasPixelOnScreen() * style.stroke.width;
+            this.ctx.lineCap = 'round';
+            this.ctx.lineJoin = 'round';
             this.ctx.stroke();
         }
         this.ctx.closePath();

package/dist/src/rendering/renderers/SVGRenderer.d.ts

@@ -6,6 +6,7 @@ import { Point2, Vec2 } from '../../math/Vec2';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
 import AbstractRenderer, { RenderableImage, RenderablePathSpec } from './AbstractRenderer';
+export declare const renderedStylesheetId = "js-draw-style-sheet";
 export default class SVGRenderer extends AbstractRenderer {
     private elem;
     private sanitize;
@@ -14,6 +15,7 @@ export default class SVGRenderer extends AbstractRenderer {
     private objectElems;
     private overwrittenAttrs;
     constructor(elem: SVGSVGElement, viewport: Viewport, sanitize?: boolean);
+    private addStyleSheet;
     setRootSVGAttribute(name: string, value: string | null): void;
     displaySize(): Vec2;
     clear(): void;

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

@@ -4,6 +4,7 @@ import { toRoundedString } from '../../math/rounding';
 import { Vec2 } from '../../math/Vec2';
 import { svgAttributesDataKey, svgStyleAttributesDataKey } from '../../SVGLoader';
 import AbstractRenderer from './AbstractRenderer';
+export const renderedStylesheetId = 'js-draw-style-sheet';
 const svgNameSpace = 'http://www.w3.org/2000/svg';
 export default class SVGRenderer extends AbstractRenderer {
     // Renders onto `elem`. If `sanitize`, don't render potentially untrusted data.
@@ -18,6 +19,21 @@ export default class SVGRenderer extends AbstractRenderer {
         this.textContainer = null;
         this.textContainerTransform = null;
         this.clear();
+        this.addStyleSheet();
+    }
+    addStyleSheet() {
+        if (!this.elem.querySelector(`#${renderedStylesheetId}`)) {
+            // Default to rounded strokes.
+            const styleSheet = document.createElementNS('http://www.w3.org/2000/svg', 'style');
+            styleSheet.innerHTML = `
+				path {
+					stroke-linecap: round;
+					stroke-linejoin: round;
+				}
+			`.replace(/\s+/g, '');
+            styleSheet.setAttribute('id', renderedStylesheetId);
+            this.elem.appendChild(styleSheet);
+        }
     }
     // Sets an attribute on the root SVG element.
     setRootSVGAttribute(name, value) {
@@ -214,6 +230,10 @@ export default class SVGRenderer extends AbstractRenderer {
         if (this.sanitize) {
             return;
         }
+        // Don't add multiple copies of the default stylesheet.
+        if (elem.tagName.toLowerCase() === 'style' && elem.getAttribute('id') === renderedStylesheetId) {
+            return;
+        }
         this.elem.appendChild(elem.cloneNode(true));
     }
     isTooSmallToRender(_rect) {

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,11 +1,13 @@
 export interface ToolbarLocalization {
     fontLabel: string;
     touchPanning: string;
+    lockRotation: string;
     outlinedRectanglePen: string;
     filledRectanglePen: string;
     linePen: string;
     arrowPen: string;
     freehandPen: string;
+    pressureSensitiveFreehandPen: string;
     selectObjectType: string;
     colorLabel: string;
     pen: string;

package/dist/src/toolbar/localization.js

@@ -19,10 +19,12 @@ export const defaultToolbarLocalization = {
     selectionToolKeyboardShortcuts: 'Selection tool: Use arrow keys to move selected items, lowercase/uppercase ‘i’ and ‘o’ to resize.',
     touchPanning: 'Touchscreen panning',
     freehandPen: 'Freehand',
+    pressureSensitiveFreehandPen: 'Freehand (pressure sensitive)',
     arrowPen: 'Arrow',
     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);
+    }
 }