js-draw 0.8.0 → 0.9.0

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

@@ -7,35 +7,42 @@ import { EditorEventType } from '../../types';
 import { toolbarCSSPrefix } from '../HTMLToolbar';
 import makeColorInput from '../makeColorInput';
 import BaseToolWidget from './BaseToolWidget';
+import Color4 from '../../Color4';
 export default class PenToolWidget extends BaseToolWidget {
     constructor(editor, tool, localization) {
-        super(editor, tool, localization);
+        super(editor, tool, 'pen', localization);
         this.tool = tool;
         this.updateInputs = () => { };
         // Default pen types
         this.penTypes = [
             {
-                name: localization.pressureSensitiveFreehandPen,
+                name: this.localizationTable.pressureSensitiveFreehandPen,
+                id: 'pressure-sensitive-pen',
                 factory: makePressureSensitiveFreehandLineBuilder,
             },
             {
-                name: localization.freehandPen,
+                name: this.localizationTable.freehandPen,
+                id: 'freehand-pen',
                 factory: makeFreehandLineBuilder,
             },
             {
-                name: localization.arrowPen,
+                name: this.localizationTable.arrowPen,
+                id: 'arrow',
                 factory: makeArrowBuilder,
             },
             {
-                name: localization.linePen,
+                name: this.localizationTable.linePen,
+                id: 'line',
                 factory: makeLineBuilder,
             },
             {
-                name: localization.filledRectanglePen,
+                name: this.localizationTable.filledRectanglePen,
+                id: 'filled-rectangle',
                 factory: makeFilledRectangleBuilder,
             },
             {
-                name: localization.outlinedRectanglePen,
+                name: this.localizationTable.outlinedRectanglePen,
+                id: 'outlined-rectangle',
                 factory: makeOutlinedRectangleBuilder,
             },
         ];
@@ -53,6 +60,27 @@ export default class PenToolWidget extends BaseToolWidget {
     getTitle() {
         return this.targetTool.description;
     }
+    // Return the index of this tool's stroke factory in the list of
+    // all stroke factories.
+    //
+    // Returns -1 if the stroke factory is not in the list of all stroke factories.
+    getCurrentPenTypeIdx() {
+        const currentFactory = this.tool.getStrokeFactory();
+        for (let i = 0; i < this.penTypes.length; i++) {
+            if (this.penTypes[i].factory === currentFactory) {
+                return i;
+            }
+        }
+        return -1;
+    }
+    getCurrentPenType() {
+        for (const penType of this.penTypes) {
+            if (penType.factory === this.tool.getStrokeFactory()) {
+                return penType;
+            }
+        }
+        return null;
+    }
     createIcon() {
         const strokeFactory = this.tool.getStrokeFactory();
         if (strokeFactory === makeFreehandLineBuilder || strokeFactory === makePressureSensitiveFreehandLineBuilder) {
@@ -106,7 +134,7 @@ export default class PenToolWidget extends BaseToolWidget {
         objectTypeRow.appendChild(objectTypeSelect);
         const colorRow = document.createElement('div');
         const colorLabel = document.createElement('label');
-        const [colorInput, colorInputContainer] = makeColorInput(this.editor, color => {
+        const [colorInput, colorInputContainer, setColorInputValue] = makeColorInput(this.editor, color => {
             this.tool.setColor(color);
         });
         colorInput.id = `${toolbarCSSPrefix}colorInput${PenToolWidget.idCounter++}`;
@@ -115,8 +143,9 @@ export default class PenToolWidget extends BaseToolWidget {
         colorRow.appendChild(colorLabel);
         colorRow.appendChild(colorInputContainer);
         this.updateInputs = () => {
-            colorInput.value = this.tool.getColor().toHexString();
+            setColorInputValue(this.tool.getColor());
             thicknessInput.value = inverseThicknessInputFn(this.tool.getThickness()).toString();
+            // Update the list of stroke factories
             objectTypeSelect.replaceChildren();
             for (let i = 0; i < this.penTypes.length; i++) {
                 const penType = this.penTypes[i];
@@ -124,9 +153,14 @@ export default class PenToolWidget extends BaseToolWidget {
                 option.value = i.toString();
                 option.innerText = penType.name;
                 objectTypeSelect.appendChild(option);
-                if (penType.factory === this.tool.getStrokeFactory()) {
-                    objectTypeSelect.value = i.toString();
-                }
+            }
+            // Update the selected stroke factory.
+            const strokeFactoryIdx = this.getCurrentPenTypeIdx();
+            if (strokeFactoryIdx === -1) {
+                objectTypeSelect.value = '';
+            }
+            else {
+                objectTypeSelect.value = strokeFactoryIdx.toString();
             }
         };
         this.updateInputs();
@@ -148,5 +182,37 @@ export default class PenToolWidget extends BaseToolWidget {
         }
         return false;
     }
+    serializeState() {
+        var _a;
+        return Object.assign(Object.assign({}, super.serializeState()), { color: this.tool.getColor().toHexString(), thickness: this.tool.getThickness(), strokeFactoryId: (_a = this.getCurrentPenType()) === null || _a === void 0 ? void 0 : _a.id });
+    }
+    deserializeFrom(state) {
+        super.deserializeFrom(state);
+        const verifyPropertyType = (propertyName, expectedType) => {
+            const actualType = typeof (state[propertyName]);
+            if (actualType !== expectedType) {
+                throw new Error(`Deserializing property ${propertyName}: Invalid type. Expected ${expectedType},` +
+                    ` was ${actualType}.`);
+            }
+        };
+        if (state.color) {
+            verifyPropertyType('color', 'string');
+            this.tool.setColor(Color4.fromHex(state.color));
+        }
+        if (state.thickness) {
+            verifyPropertyType('thickness', 'number');
+            this.tool.setThickness(state.thickness);
+        }
+        if (state.strokeFactoryId) {
+            verifyPropertyType('strokeFactoryId', 'string');
+            const factoryId = state.strokeFactoryId;
+            for (const penType of this.penTypes) {
+                if (factoryId === penType.id) {
+                    this.tool.setStrokeFactory(penType.factory);
+                    break;
+                }
+            }
+        }
+    }
 }
 PenToolWidget.idCounter = 0;

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

@@ -5,7 +5,7 @@ import { ToolbarLocalization } from '../localization';
 import BaseToolWidget from './BaseToolWidget';
 export default class SelectionToolWidget extends BaseToolWidget {
     private tool;
-    constructor(editor: Editor, tool: SelectionTool, localization: ToolbarLocalization);
+    constructor(editor: Editor, tool: SelectionTool, localization?: ToolbarLocalization);
     private resizeImageToSelection;
     protected onKeyPress(event: KeyPressEvent): boolean;
     protected getTitle(): string;

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

@@ -3,20 +3,20 @@ import ActionButtonWidget from './ActionButtonWidget';
 import BaseToolWidget from './BaseToolWidget';
 export default class SelectionToolWidget extends BaseToolWidget {
     constructor(editor, tool, localization) {
-        super(editor, tool, localization);
+        super(editor, tool, 'selection-tool-widget', localization);
         this.tool = tool;
-        const resizeButton = new ActionButtonWidget(editor, localization, () => editor.icons.makeResizeViewportIcon(), this.localizationTable.resizeImageToSelection, () => {
+        const resizeButton = new ActionButtonWidget(editor, 'resize-btn', () => editor.icons.makeResizeViewportIcon(), this.localizationTable.resizeImageToSelection, () => {
             this.resizeImageToSelection();
-        });
-        const deleteButton = new ActionButtonWidget(editor, localization, () => editor.icons.makeDeleteSelectionIcon(), this.localizationTable.deleteSelection, () => {
+        }, localization);
+        const deleteButton = new ActionButtonWidget(editor, 'delete-btn', () => editor.icons.makeDeleteSelectionIcon(), this.localizationTable.deleteSelection, () => {
             const selection = this.tool.getSelection();
             this.editor.dispatch(selection.deleteSelectedObjects());
             this.tool.clearSelection();
-        });
-        const duplicateButton = new ActionButtonWidget(editor, localization, () => editor.icons.makeDuplicateSelectionIcon(), this.localizationTable.duplicateSelection, () => {
+        }, localization);
+        const duplicateButton = new ActionButtonWidget(editor, 'duplicate-btn', () => editor.icons.makeDuplicateSelectionIcon(), this.localizationTable.duplicateSelection, () => {
             const selection = this.tool.getSelection();
             this.editor.dispatch(selection.duplicateSelectedObjects());
-        });
+        }, localization);
         this.addSubWidget(resizeButton);
         this.addSubWidget(deleteButton);
         this.addSubWidget(duplicateButton);

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

@@ -2,12 +2,15 @@ import Editor from '../../Editor';
 import TextTool from '../../tools/TextTool';
 import { ToolbarLocalization } from '../localization';
 import BaseToolWidget from './BaseToolWidget';
+import { SavedToolbuttonState } from './BaseWidget';
 export default class TextToolWidget extends BaseToolWidget {
     private tool;
     private updateDropdownInputs;
-    constructor(editor: Editor, tool: TextTool, localization: ToolbarLocalization);
+    constructor(editor: Editor, tool: TextTool, localization?: ToolbarLocalization);
     protected getTitle(): string;
     protected createIcon(): Element;
     private static idCounter;
     protected fillDropdown(dropdown: HTMLElement): boolean;
+    serializeState(): SavedToolbuttonState;
+    deserializeFrom(state: SavedToolbuttonState): void;
 }

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

@@ -1,10 +1,11 @@
+import Color4 from '../../Color4';
 import { EditorEventType } from '../../types';
 import { toolbarCSSPrefix } from '../HTMLToolbar';
 import makeColorInput from '../makeColorInput';
 import BaseToolWidget from './BaseToolWidget';
 export default class TextToolWidget extends BaseToolWidget {
     constructor(editor, tool, localization) {
-        super(editor, tool, localization);
+        super(editor, tool, 'text-tool-widget', localization);
         this.tool = tool;
         this.updateDropdownInputs = null;
         editor.notifier.on(EditorEventType.ToolUpdated, evt => {
@@ -27,7 +28,7 @@ export default class TextToolWidget extends BaseToolWidget {
         const colorRow = document.createElement('div');
         const fontInput = document.createElement('select');
         const fontLabel = document.createElement('label');
-        const [colorInput, colorInputContainer] = makeColorInput(this.editor, color => {
+        const [colorInput, colorInputContainer, setColorInputValue] = makeColorInput(this.editor, color => {
             this.tool.setColor(color);
         });
         const colorLabel = document.createElement('label');
@@ -57,7 +58,7 @@ export default class TextToolWidget extends BaseToolWidget {
         fontRow.appendChild(fontInput);
         this.updateDropdownInputs = () => {
             const style = this.tool.getTextStyle();
-            colorInput.value = style.renderingStyle.fill.toHexString();
+            setColorInputValue(style.renderingStyle.fill);
             if (!fontsInInput.has(style.fontFamily)) {
                 addFontToInput(style.fontFamily);
             }
@@ -67,5 +68,18 @@ export default class TextToolWidget extends BaseToolWidget {
         dropdown.replaceChildren(colorRow, fontRow);
         return true;
     }
+    serializeState() {
+        const textStyle = this.tool.getTextStyle();
+        return Object.assign(Object.assign({}, super.serializeState()), { fontFamily: textStyle.fontFamily, color: textStyle.renderingStyle.fill.toHexString() });
+    }
+    deserializeFrom(state) {
+        if (state.fontFamily && typeof (state.fontFamily) === 'string') {
+            this.tool.setFontFamily(state.fontFamily);
+        }
+        if (state.color && typeof (state.color) === 'string') {
+            this.tool.setColor(Color4.fromHex(state.color));
+        }
+        super.deserializeFrom(state);
+    }
 }
 TextToolWidget.idCounter = 0;

package/dist/src/tools/PanZoom.d.ts

@@ -14,7 +14,8 @@ export declare enum PanZoomMode {
     TwoFingerTouchGestures = 2,
     RightClickDrags = 4,
     SinglePointerGestures = 8,
-    Keyboard = 16
+    Keyboard = 16,
+    RotationLocked = 32
 }
 export default class PanZoom extends BaseTool {
     private editor;
@@ -36,6 +37,8 @@ export default class PanZoom extends BaseTool {
     private updateTransform;
     onWheel({ delta, screenPos }: WheelEvt): boolean;
     onKeyPress({ key, ctrlKey, altKey }: KeyPressEvent): boolean;
+    private isRotationLocked;
+    setModeEnabled(mode: PanZoomMode, enabled: boolean): void;
     setMode(mode: PanZoomMode): void;
     getMode(): PanZoomMode;
 }

package/dist/src/tools/PanZoom.js

@@ -12,6 +12,7 @@ export var PanZoomMode;
     PanZoomMode[PanZoomMode["RightClickDrags"] = 4] = "RightClickDrags";
     PanZoomMode[PanZoomMode["SinglePointerGestures"] = 8] = "SinglePointerGestures";
     PanZoomMode[PanZoomMode["Keyboard"] = 16] = "Keyboard";
+    PanZoomMode[PanZoomMode["RotationLocked"] = 32] = "RotationLocked";
 })(PanZoomMode || (PanZoomMode = {}));
 export default class PanZoom extends BaseTool {
     constructor(editor, mode, description) {
@@ -66,9 +67,13 @@ export default class PanZoom extends BaseTool {
     handleTwoFingerMove(allPointers) {
         const { screenCenter, canvasCenter, angle, dist } = this.computePinchData(allPointers[0], allPointers[1]);
         const delta = this.getCenterDelta(screenCenter);
+        let rotation = angle - this.lastAngle;
+        if (this.isRotationLocked()) {
+            rotation = 0;
+        }
         const transformUpdate = Mat33.translation(delta)
             .rightMul(Mat33.scaling2D(dist / this.lastDist, canvasCenter))
-            .rightMul(Mat33.zRotation(angle - this.lastAngle, canvasCenter));
+            .rightMul(Mat33.zRotation(rotation, canvasCenter));
         this.lastScreenCenter = screenCenter;
         this.lastDist = dist;
         this.lastAngle = angle;
@@ -195,6 +200,9 @@ export default class PanZoom extends BaseTool {
         if (rotation !== 0) {
             rotation += 0.0001;
         }
+        if (this.isRotationLocked()) {
+            rotation = 0;
+        }
         const toCanvas = this.editor.viewport.screenToCanvasTransform;
         // Transform without translating (treat toCanvas as a linear instead of
         // an affine transformation).
@@ -205,6 +213,21 @@ export default class PanZoom extends BaseTool {
         this.updateTransform(transformUpdate, true);
         return true;
     }
+    isRotationLocked() {
+        return !!(this.mode & PanZoomMode.RotationLocked);
+    }
+    // Sets whether the given `mode` is enabled. `mode` should be a single
+    // mode from the `PanZoomMode` enum.
+    setModeEnabled(mode, enabled) {
+        let newMode = this.mode;
+        if (enabled) {
+            newMode |= mode;
+        }
+        else {
+            newMode &= ~mode;
+        }
+        this.setMode(newMode);
+    }
     setMode(mode) {
         if (mode !== this.mode) {
             this.mode = mode;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.8.0",
+	"version": "0.9.0",
 	"description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
 	"main": "./dist/src/lib.d.ts",
 	"types": "./dist/src/lib.js",

package/src/Color4.ts

@@ -73,6 +73,8 @@ export default class Color4 {
 	public static fromString(text: string): 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/src/SVGLoader.ts

@@ -28,6 +28,9 @@ export type SVGLoaderUnknownAttribute = [ string, string ];
 // [key, value, priority]
 export type SVGLoaderUnknownStyleAttribute = { key: string, value: string, priority?: string };
 
+
+const supportedStrokeFillStyleAttrs = [ 'stroke', 'fill', 'stroke-width' ];
+
 export default class SVGLoader implements ImageLoader {
 	private onAddComponent: ComponentAddedListener|null = null;
 	private onProgress: OnProgressListener|null = null;
@@ -154,11 +157,10 @@ export default class SVGLoader implements ImageLoader {
 
 			elem = new Stroke(strokeData);
 
-			const supportedStyleAttrs = [ 'stroke', 'fill', 'stroke-width' ];
 			this.attachUnrecognisedAttrs(
 				elem, node,
-				new Set([ ...supportedStyleAttrs, 'd' ]),
-				new Set(supportedStyleAttrs)
+				new Set([ ...supportedStrokeFillStyleAttrs, 'd' ]),
+				new Set(supportedStrokeFillStyleAttrs)
 			);
 		} catch (e) {
 			console.error(
@@ -234,8 +236,8 @@ export default class SVGLoader implements ImageLoader {
 
 		const supportedStyleAttrs = [
 			'fontFamily',
-			'fill',
-			'transform'
+			'transform',
+			...supportedStrokeFillStyleAttrs,
 		];
 		let fontSize = 12;
 		if (fontSizeMatch) {
@@ -245,9 +247,7 @@ export default class SVGLoader implements ImageLoader {
 		const style: TextStyle = {
 			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: string[] = [];

package/src/components/Stroke.ts

@@ -61,7 +61,7 @@ export default class Stroke extends AbstractComponent {
 				}
 
 				const muchBiggerThanVisible = bbox.size.x > visibleRect.size.x * 2 || bbox.size.y > visibleRect.size.y * 2;
-				if (muchBiggerThanVisible && !part.path.roughlyIntersects(visibleRect, part.style.stroke?.width)) {
+				if (muchBiggerThanVisible && !part.path.roughlyIntersects(visibleRect, part.style.stroke?.width ?? 0)) {
 					continue;
 				}
 			}

package/src/math/Path.test.ts

@@ -171,4 +171,28 @@ describe('Path', () => {
 			).toBe(true);
 		});
 	});
+
+	describe('fromRect', () => {
+		const filledRect = Path.fromRect(Rect2.unitSquare);
+		const strokedRect = Path.fromRect(Rect2.unitSquare, 0.1);
+
+		it('filled should be closed shape', () => {
+			const lastSegment = filledRect.parts[filledRect.parts.length - 1];
+
+			if (lastSegment.kind !== PathCommandType.LineTo) {
+				throw new Error('Rectangles should only be made up of lines');
+			}
+
+			expect(filledRect.startPoint).objEq(lastSegment.point);
+		});
+
+		it('stroked should be closed shape', () => {
+			const lastSegment = strokedRect.parts[strokedRect.parts.length - 1];
+			if (lastSegment.kind !== PathCommandType.LineTo) {
+				throw new Error('Rectangles should only be made up of lines');
+			}
+			
+			expect(strokedRect.startPoint).objEq(lastSegment.point);
+		});
+	});
 });

package/src/math/Path.ts

@@ -285,7 +285,7 @@ export default class Path {
 		}
 		const isClosed = this.startPoint.eq(this.getEndPoint());
         
-		if (isClosed && strokeWidth == 0) {
+		if (isClosed && strokeWidth === 0) {
 			return this.closedRoughlyIntersects(rect);
 		}
 
@@ -401,6 +401,12 @@ export default class Path {
 			});
 		}
 
+		// Close the shape
+		commands.push({
+			kind: PathCommandType.LineTo,
+			point: startPoint,
+		});
+
 		return new Path(startPoint, commands);
 	}
 

package/src/toolbar/HTMLToolbar.ts

@@ -24,6 +24,8 @@ type UpdateColorisCallback = ()=>void;
 export default class HTMLToolbar {
 	private container: HTMLElement;
 
+	private widgets: Record<string, BaseWidget> = {};
+
 	private static colorisStarted: boolean = false;
 	private updateColoris: UpdateColorisCallback|null = null;
 
@@ -121,10 +123,41 @@ 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).
 	public addWidget(widget: BaseWidget) {
+		// 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();
 	}
 
+	public serializeState(): string {
+		const result: Record<string, any> = {};
+
+		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.
+	public deserializeState(state: string) {
+		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]);
+		}
+	}
+
 	public addActionButton(title: string|ActionButtonIcon, command: ()=> void, parent?: Element) {
 		const button = document.createElement('button');
 		button.classList.add(`${toolbarCSSPrefix}button`);

package/src/toolbar/IconProvider.ts

@@ -8,6 +8,9 @@ import Pen from '../tools/Pen';
 import { StrokeDataPoint } from '../types';
 import Viewport from '../Viewport';
 
+// Provides a default set of icons for the editor.
+// Many of the icons were created with Inkscape.
+
 type IconType = SVGSVGElement|HTMLImageElement;
 
 const svgNamespace = 'http://www.w3.org/2000/svg';
@@ -138,7 +141,7 @@ export default class IconProvider {
 		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
@@ -275,6 +278,51 @@ export default class IconProvider {
 	
 		return icon;
 	}
+
+	public makeRotationLockIcon(): IconType {
+		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;
+	}
 	
 	public makeTextIcon(textStyle: TextStyle): IconType {
 		const icon = document.createElementNS(svgNamespace, 'svg');

package/src/toolbar/localization.ts

@@ -3,6 +3,7 @@
 export interface ToolbarLocalization {
 	fontLabel: string;
 	touchPanning: string;
+	lockRotation: string;
 	outlinedRectanglePen: string;
 	filledRectanglePen: string;
 	linePen: string;
@@ -61,6 +62,7 @@ export const defaultToolbarLocalization: ToolbarLocalization = {
 	linePen: 'Line',
 	outlinedRectanglePen: 'Outlined rectangle',
 	filledRectanglePen: 'Filled rectangle',
+	lockRotation: 'Lock rotation',
 
 	dropdownShown: (toolName) => `Dropdown for ${toolName} shown`,
 	dropdownHidden: (toolName) => `Dropdown for ${toolName} hidden`,

package/src/toolbar/makeColorInput.ts

@@ -4,10 +4,13 @@ import PipetteTool from '../tools/PipetteTool';
 import { EditorEventType } from '../types';
 
 type OnColorChangeListener = (color: Color4)=>void;
+type SetColorCallback = (color: Color4|string) => void;
 
+// Returns [ color input, input container, callback to change the color value ].
+export const makeColorInput = (
+	editor: Editor, onColorChange: OnColorChangeListener
+): [ HTMLInputElement, HTMLElement, SetColorCallback ] => {
 
-// Returns [ color input, input container ].
-export const makeColorInput = (editor: Editor, onColorChange: OnColorChangeListener): [ HTMLInputElement, HTMLElement ] => {
 	const colorInputContainer = document.createElement('span');
 	const colorInput = document.createElement('input');
 
@@ -31,6 +34,9 @@ export const makeColorInput = (editor: Editor, onColorChange: OnColorChangeListe
 	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();
 
@@ -61,7 +67,19 @@ export const makeColorInput = (editor: Editor, onColorChange: OnColorChangeListe
 		onInputEnd();
 	});
 
-	return [ colorInput, colorInputContainer ];
+	const setColorInputValue = (color: Color4|string) => {
+		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: Editor, container: HTMLElement, onColorChange: OnColorChangeListener) => {

package/src/toolbar/widgets/ActionButtonWidget.ts

@@ -4,13 +4,16 @@ import BaseWidget from './BaseWidget';
 
 export default class ActionButtonWidget extends BaseWidget {
 	public constructor(
-		editor: Editor, localizationTable: ToolbarLocalization,
+		editor: Editor,
+		id: string,
+
         protected makeIcon: ()=> Element,
 		protected title: string,
-
         protected clickAction: ()=>void,
+
+        localizationTable?: ToolbarLocalization,
 	) {
-		super(editor, localizationTable);
+		super(editor, id, localizationTable);
 	}
 
 	protected handleClick() {