js-draw 0.0.2 → 0.0.5

package/src/components/builders/RectangleBuilder.ts

@@ -0,0 +1,59 @@
+import Path from '../../geometry/Path';
+import Rect2 from '../../geometry/Rect2';
+import AbstractRenderer from '../../rendering/AbstractRenderer';
+import { StrokeDataPoint } from '../../types';
+import Viewport from '../../Viewport';
+import AbstractComponent from '../AbstractComponent';
+import Stroke from '../Stroke';
+import { ComponentBuilder, ComponentBuilderFactory } from './types';
+
+export const makeFilledRectangleBuilder: ComponentBuilderFactory = (initialPoint: StrokeDataPoint, _viewport: Viewport) => {
+	return new RectangleBuilder(initialPoint, true);
+};
+
+export const makeOutlinedRectangleBuilder: ComponentBuilderFactory = (initialPoint: StrokeDataPoint, _viewport: Viewport) => {
+	return new RectangleBuilder(initialPoint, false);
+};
+
+export default class RectangleBuilder implements ComponentBuilder {
+	private endPoint: StrokeDataPoint;
+
+	public constructor(private readonly startPoint: StrokeDataPoint, private filled: boolean) {
+		// Initially, the start and end points are the same.
+		this.endPoint = startPoint;
+	}
+
+	public getBBox(): Rect2 {
+		const preview = this.buildPreview();
+		return preview.getBBox();
+	}
+
+	private buildPreview(): Stroke {
+		const startPoint = this.startPoint.pos;
+		const endPoint = this.endPoint.pos;
+		const path = Path.fromRect(
+			Rect2.fromCorners(startPoint, endPoint),
+			this.filled ? null : this.endPoint.width,
+		);
+
+		const preview = new Stroke([
+			path.toRenderable({
+				fill: this.endPoint.color
+			}),
+		]);
+
+		return preview;
+	}
+
+	public build(): AbstractComponent {
+		return this.buildPreview();
+	}
+
+	public preview(renderer: AbstractRenderer): void {
+		this.buildPreview().render(renderer);
+	}
+
+	public addPoint(point: StrokeDataPoint): void {
+		this.endPoint = point;
+	}
+}

package/src/components/builders/types.ts

@@ -0,0 +1,15 @@
+import Rect2 from '../../geometry/Rect2';
+import AbstractRenderer from '../../rendering/AbstractRenderer';
+import { StrokeDataPoint } from '../../types';
+import Viewport from '../../Viewport';
+import AbstractComponent from '../AbstractComponent';
+
+export interface ComponentBuilder {
+	getBBox(): Rect2;
+	build(): AbstractComponent;
+	preview(renderer: AbstractRenderer): void;
+
+	addPoint(point: StrokeDataPoint): void;
+}
+
+export type ComponentBuilderFactory = (startPoint: StrokeDataPoint, viewport: Viewport)=> ComponentBuilder;

package/src/geometry/Path.ts

@@ -223,6 +223,49 @@ export default class Path {
 		]);
 	}
 
+	// Returns a path that outlines [rect]. If [lineWidth] is not given, the resultant path is
+	// the outline of [rect]. Otherwise, the resultant path represents a line of width [lineWidth]
+	// that traces [rect].
+	public static fromRect(rect: Rect2, lineWidth: number|null = null): Path {
+		const commands: PathCommand[] = [];
+
+		let corners;
+		let startPoint;
+
+		if (lineWidth !== null) {
+			// Vector from the top left corner or bottom right corner to the edge of the
+			// stroked region.
+			const cornerToEdge = Vec2.of(lineWidth, lineWidth).times(0.5);
+			const innerRect = Rect2.fromCorners(
+				rect.topLeft.plus(cornerToEdge),
+				rect.bottomRight.minus(cornerToEdge)
+			);
+			const outerRect = Rect2.fromCorners(
+				rect.topLeft.minus(cornerToEdge),
+				rect.bottomRight.plus(cornerToEdge)
+			);
+
+			corners = [
+				innerRect.corners[3],
+				...innerRect.corners,
+				...outerRect.corners.reverse(),
+			];
+			startPoint = outerRect.corners[3];
+		} else {
+			corners = rect.corners.slice(1);
+			startPoint = rect.corners[0];
+		}
+
+		for (const corner of corners) {
+			commands.push({
+				kind: PathCommandType.LineTo,
+				point: corner,
+			});
+		}
+
+		return new Path(startPoint, commands);
+	}
+
 	public static fromRenderable(renderable: RenderablePathSpec): Path {
 		return new Path(renderable.startPoint, renderable.commands);
 	}

package/src/geometry/Vec2.test.ts

@@ -28,5 +28,6 @@ describe('Vec2', () => {
 	it('Perpindicular', () => {
 		const fuzz = 0.001;
 		expect(Vec2.unitX.cross(Vec3.unitZ)).objEq(Vec2.unitY.times(-1), fuzz);
+		expect(Vec2.unitX.orthog()).objEq(Vec2.unitY, fuzz);
 	});
 });

package/src/geometry/Vec3.test.ts

@@ -26,4 +26,18 @@ describe('Vec3', () => {
 		expect(vec1.cross(vec2)).objEq(Vec3.unitZ);
 		expect(vec2.cross(vec1)).objEq(Vec3.unitZ.times(-1));
 	});
+
+	it('.orthog should return an orthogonal vector', () => {
+		expect(Vec3.unitZ.orthog().dot(Vec3.unitZ)).toBe(0);
+
+		// Should return some orthogonal vector, even if given the zero vector
+		expect(Vec3.zero.orthog().dot(Vec3.zero)).toBe(0);
+	});
+
+	it('.orthog should return a unit vector', () => {
+		expect(Vec3.zero.orthog().magnitude()).toBe(1);
+		expect(Vec3.unitZ.orthog().magnitude()).toBe(1);
+		expect(Vec3.unitX.orthog().magnitude()).toBe(1);
+		expect(Vec3.unitY.orthog().magnitude()).toBe(1);
+	});
 });

package/src/geometry/Vec3.ts

@@ -31,6 +31,11 @@ export default class Vec3 {
 		throw new Error(`${idx} out of bounds!`);
 	}
 
+	// Alias for this.magnitude
+	public length(): number {
+		return this.magnitude();
+	}
+
 	public magnitude(): number {
 		return Math.sqrt(this.dot(this));
 	}
@@ -76,6 +81,17 @@ export default class Vec3 {
 		);
 	}
 
+	// Returns a vector orthogonal to this. If this is a Vec2, returns [this] rotated
+	// 90 degrees counter-clockwise.
+	public orthog(): Vec3 {
+		// If parallel to the z-axis
+		if (this.dot(Vec3.unitX) === 0 && this.dot(Vec3.unitY) === 0) {
+			return this.dot(Vec3.unitX) === 0 ? Vec3.unitX : this.cross(Vec3.unitX).normalized();
+		}
+
+		return this.cross(Vec3.unitZ.times(-1)).normalized();
+	}
+
 	// Returns this plus a vector of length [distance] in [direction]
 	public extend(distance: number, direction: Vec3): Vec3 {
 		return this.plus(direction.normalized().times(distance));

package/src/localization.ts

@@ -1,7 +1,6 @@
 import { CommandLocalization, defaultCommandLocalization } from './commands/localization';
 import { defaultComponentLocalization, ImageComponentLocalization } from './components/localization';
-import HTMLToolbar from './toolbar/HTMLToolbar';
-import { ToolbarLocalization } from './toolbar/types';
+import { defaultToolbarLocalization, ToolbarLocalization } from './toolbar/localization';
 import { defaultToolLocalization, ToolLocalization } from './tools/localization';
 
 
@@ -14,7 +13,7 @@ export interface EditorLocalization extends ToolbarLocalization, ToolLocalizatio
 }
 
 export const defaultEditorLocalization: EditorLocalization = {
-	...HTMLToolbar.defaultLocalization,
+	...defaultToolbarLocalization,
 	...defaultToolLocalization,
 	...defaultCommandLocalization,
 	...defaultComponentLocalization,

package/src/rendering/AbstractRenderer.ts

@@ -1,5 +1,5 @@
 import Color4 from '../Color4';
-import { PathCommand, PathCommandType } from '../geometry/Path';
+import Path, { PathCommand, PathCommandType } from '../geometry/Path';
 import Rect2 from '../geometry/Rect2';
 import { Point2, Vec2 } from '../geometry/Vec2';
 import Viewport from '../Viewport';
@@ -103,37 +103,8 @@ export default abstract class AbstractRenderer {
 
 	// Draw a rectangle. Boundary lines have width [lineWidth] and are filled with [lineFill]
 	public drawRect(rect: Rect2, lineWidth: number, lineFill: RenderingStyle): void {
-		const commands: PathCommand[] = [];
-
-		// Vector from the top left corner or bottom right corner to the edge of the
-		// stroked region.
-		const cornerToEdge = Vec2.of(lineWidth, lineWidth).times(0.5);
-		const innerRect = Rect2.fromCorners(
-			rect.topLeft.plus(cornerToEdge),
-			rect.bottomRight.minus(cornerToEdge)
-		);
-		const outerRect = Rect2.fromCorners(
-			rect.topLeft.minus(cornerToEdge),
-			rect.bottomRight.plus(cornerToEdge)
-		);
-
-		const corners = [
-			innerRect.corners[3],
-			...innerRect.corners,
-			...outerRect.corners.reverse(),
-		];
-		for (const corner of corners) {
-			commands.push({
-				kind: PathCommandType.LineTo,
-				point: corner,
-			});
-		}
-
-		this.drawPath({
-			startPoint: outerRect.corners[3],
-			commands,
-			style: lineFill,
-		});
+		const path = Path.fromRect(rect, lineWidth);
+		this.drawPath(path.toRenderable(lineFill));
 	}
 
 	// Note the start/end of an object with the given bounding box.

package/src/toolbar/HTMLToolbar.ts

@@ -1,6 +1,6 @@
 import Editor from '../Editor';
 import { ToolType } from '../tools/ToolController';
-import { EditorEventType } from '../types';
+import { EditorEventType, StrokeDataPoint } from '../types';
 
 import { coloris, init as colorisInit } from '@melloware/coloris';
 import Color4 from '../Color4';
@@ -8,7 +8,16 @@ import Pen from '../tools/Pen';
 import Eraser from '../tools/Eraser';
 import BaseTool from '../tools/BaseTool';
 import SelectionTool from '../tools/SelectionTool';
-import { ToolbarLocalization } from './types';
+import { makeFreehandLineBuilder } from '../components/builders/FreehandLineBuilder';
+import { Vec2 } from '../geometry/Vec2';
+import SVGRenderer from '../rendering/SVGRenderer';
+import Viewport from '../Viewport';
+import EventDispatcher from '../EventDispatcher';
+import { ComponentBuilderFactory } from '../components/builders/types';
+import { makeArrowBuilder } from '../components/builders/ArrowBuilder';
+import { makeLineBuilder } from '../components/builders/LineBuilder';
+import { makeFilledRectangleBuilder, makeOutlinedRectangleBuilder } from '../components/builders/RectangleBuilder';
+import { defaultToolbarLocalization, ToolbarLocalization } from './localization';
 
 const primaryForegroundFill = `
 	style='fill: var(--primary-foreground-color);'
@@ -18,6 +27,8 @@ const primaryForegroundStrokeFill = `
 `;
 
 const toolbarCSSPrefix = 'toolbar-';
+const svgNamespace = 'http://www.w3.org/2000/svg';
+
 abstract class ToolbarWidget {
 	protected readonly container: HTMLElement;
 	private button: HTMLElement;
@@ -163,7 +174,7 @@ abstract class ToolbarWidget {
 	}
 
 	private createDropdownIcon(): Element {
-		const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+		const icon = document.createElementNS(svgNamespace, 'svg');
 		icon.innerHTML = `
 		<g>
 			<path
@@ -183,9 +194,7 @@ class EraserWidget extends ToolbarWidget {
 		return this.localizationTable.eraser;
 	}
 	protected createIcon(): Element {
-		const icon = document.createElementNS(
-			'http://www.w3.org/2000/svg', 'svg'
-		);
+		const icon = document.createElementNS(svgNamespace, 'svg');
 
 		// Draw an eraser-like shape
 		icon.innerHTML = `
@@ -220,7 +229,7 @@ class SelectionWidget extends ToolbarWidget {
 	}
 
 	protected createIcon(): Element {
-		const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+		const icon = document.createElementNS(svgNamespace, 'svg');
 
 		// Draw a cursor-like shape
 		icon.innerHTML = `
@@ -270,7 +279,7 @@ class TouchDrawingWidget extends ToolbarWidget {
 	}
 
 	protected createIcon(): Element {
-		const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+		const icon = document.createElementNS(svgNamespace, 'svg');
 
 		// Draw a cursor-like shape
 		icon.innerHTML = `
@@ -307,7 +316,7 @@ class PenWidget extends ToolbarWidget {
 	private updateInputs: ()=> void = () => {};
 
 	public constructor(
-		editor: Editor, private tool: Pen, localization: ToolbarLocalization
+		editor: Editor, private tool: Pen, localization: ToolbarLocalization, private penTypes: PenTypeRecord[]
 	) {
 		super(editor, tool, localization);
 
@@ -328,13 +337,7 @@ class PenWidget extends ToolbarWidget {
 		return this.targetTool.description;
 	}
 
-	protected createIcon(): Element {
-		// We need to use createElementNS to embed an SVG element in HTML.
-		// See http://zhangwenli.com/blog/2017/07/26/createelementns/
-		const icon = document.createElementNS(
-			'http://www.w3.org/2000/svg', 'svg'
-		);
-
+	private makePenIcon(elem: SVGSVGElement) {
 		// Use a square-root scale to prevent the pen's tip from overflowing.
 		const scale = Math.round(Math.sqrt(this.tool.getThickness()) * 2);
 		const color = this.tool.getColor();
@@ -342,7 +345,7 @@ class PenWidget extends ToolbarWidget {
 		// Draw a pen-like shape
 		const primaryStrokeTipPath = `M14,63 L${50 - scale},95 L${50 + scale},90 L88,60 Z`;
 		const backgroundStrokeTipPath = `M14,63 L${50 - scale},85 L${50 + scale},83 L88,60 Z`;
-		icon.innerHTML = `
+		elem.innerHTML = `
 		<defs>
 			<pattern
 				id='checkerboard'
@@ -375,8 +378,50 @@ class PenWidget extends ToolbarWidget {
 			/>
 		</g>
 		`;
+	}
+
+	// Draws an icon with the pen.
+	private makeDrawnIcon(icon: SVGSVGElement) {
+		const strokeFactory = this.tool.getStrokeFactory();
+
+		const toolThickness = this.tool.getThickness();
+
+		const nowTime = (new Date()).getTime();
+		const startPoint: StrokeDataPoint = {
+			pos: Vec2.of(10, 10),
+			width: toolThickness / 5,
+			color: this.tool.getColor(),
+			time: nowTime - 100,
+		};
+		const endPoint: StrokeDataPoint = {
+			pos: Vec2.of(90, 90),
+			width: toolThickness / 5,
+			color: this.tool.getColor(),
+			time: nowTime,
+		};
+
+		const builder = strokeFactory(startPoint, this.editor.viewport);
+		builder.addPoint(endPoint);
+
+		const viewport = new Viewport(new EventDispatcher());
+		viewport.updateScreenSize(Vec2.of(100, 100));
+		const renderer = new SVGRenderer(icon, viewport);
+		builder.preview(renderer);
+	}
+
+	protected createIcon(): Element {
+		// We need to use createElementNS to embed an SVG element in HTML.
+		// See http://zhangwenli.com/blog/2017/07/26/createelementns/
+		const icon = document.createElementNS(svgNamespace, 'svg');
 		icon.setAttribute('viewBox', '0 0 100 100');
 
+		const strokeFactory = this.tool.getStrokeFactory();
+		if (strokeFactory === makeFreehandLineBuilder) {
+			this.makePenIcon(icon);
+		} else {
+			this.makeDrawnIcon(icon);
+		}
+
 		return icon;
 	}
 
@@ -384,15 +429,23 @@ class PenWidget extends ToolbarWidget {
 	protected fillDropdown(dropdown: HTMLElement): boolean {
 		const container = document.createElement('div');
 
-		// Thickness: Value of the input is squared to allow for finer control/larger values.
 		const thicknessRow = document.createElement('div');
+		const objectTypeRow = document.createElement('div');
+
+		// Thickness: Value of the input is squared to allow for finer control/larger values.
 		const thicknessLabel = document.createElement('label');
 		const thicknessInput = document.createElement('input');
+		const objectSelectLabel = document.createElement('label');
+		const objectTypeSelect = document.createElement('select');
 
+		// Give inputs IDs so we can label them with a <label for=...>Label text</label>
 		thicknessInput.id = `${toolbarCSSPrefix}thicknessInput${PenWidget.idCounter++}`;
+		objectTypeSelect.id = `${toolbarCSSPrefix}builderSelect${PenWidget.idCounter++}`;
 
 		thicknessLabel.innerText = this.localizationTable.thicknessLabel;
 		thicknessLabel.setAttribute('for', thicknessInput.id);
+		objectSelectLabel.innerText = this.localizationTable.selectObjectType;
+		objectSelectLabel.setAttribute('for', objectTypeSelect.id);
 
 		thicknessInput.type = 'range';
 		thicknessInput.min = '1';
@@ -404,6 +457,18 @@ class PenWidget extends ToolbarWidget {
 		thicknessRow.appendChild(thicknessLabel);
 		thicknessRow.appendChild(thicknessInput);
 
+		objectTypeSelect.oninput = () => {
+			const penTypeIdx = parseInt(objectTypeSelect.value);
+			if (penTypeIdx < 0 || penTypeIdx >= this.penTypes.length) {
+				console.error('Invalid pen type index', penTypeIdx);
+				return;
+			}
+
+			this.tool.setStrokeFactory(this.penTypes[penTypeIdx].factory);
+		};
+		objectTypeRow.appendChild(objectSelectLabel);
+		objectTypeRow.appendChild(objectTypeSelect);
+
 		const colorRow = document.createElement('div');
 		const colorLabel = document.createElement('label');
 		const colorInput = document.createElement('input');
@@ -417,6 +482,18 @@ class PenWidget extends ToolbarWidget {
 		colorInput.oninput = () => {
 			this.tool.setColor(Color4.fromHex(colorInput.value));
 		};
+		colorInput.addEventListener('open', () => {
+			this.editor.notifier.dispatch(EditorEventType.ColorPickerToggled, {
+				kind: EditorEventType.ColorPickerToggled,
+				open: true,
+			});
+		});
+		colorInput.addEventListener('close', () => {
+			this.editor.notifier.dispatch(EditorEventType.ColorPickerToggled, {
+				kind: EditorEventType.ColorPickerToggled,
+				open: false,
+			});
+		});
 
 		colorRow.appendChild(colorLabel);
 		colorRow.appendChild(colorInput);
@@ -424,45 +501,80 @@ class PenWidget extends ToolbarWidget {
 		this.updateInputs = () => {
 			colorInput.value = this.tool.getColor().toHexString();
 			thicknessInput.value = Math.sqrt(this.tool.getThickness()).toString();
+
+			objectTypeSelect.replaceChildren();
+			for (let i = 0; i < this.penTypes.length; i ++) {
+				const penType = this.penTypes[i];
+				const option = document.createElement('option');
+				option.value = i.toString();
+				option.innerText = penType.name;
+
+				objectTypeSelect.appendChild(option);
+
+				if (penType.factory === this.tool.getStrokeFactory()) {
+					objectTypeSelect.value = i.toString();
+				}
+			}
 		};
 		this.updateInputs();
 
-		container.replaceChildren(colorRow, thicknessRow);
+		container.replaceChildren(colorRow, thicknessRow, objectTypeRow);
 		dropdown.replaceChildren(container);
 		return true;
 	}
 }
 
+interface PenTypeRecord {
+	name: string;
+	factory: ComponentBuilderFactory;
+}
+
 export default class HTMLToolbar {
 	private container: HTMLElement;
-
-	public static defaultLocalization: ToolbarLocalization = {
-		pen: 'Pen',
-		eraser: 'Eraser',
-		select: 'Select',
-		touchDrawing: 'Touch Drawing',
-		thicknessLabel: 'Thickness: ',
-		colorLabel: 'Color: ',
-		resizeImageToSelection: 'Resize image to selection',
-		undo: 'Undo',
-		redo: 'Redo',
-
-		dropdownShown: (toolName) => `Dropdown for ${toolName} shown`,
-		dropdownHidden: (toolName) => `Dropdown for ${toolName} hidden`,
-	};
+	private penTypes: PenTypeRecord[];
 
 	public constructor(
 		private editor: Editor, parent: HTMLElement,
-		private localizationTable: ToolbarLocalization = HTMLToolbar.defaultLocalization,
+		private localizationTable: ToolbarLocalization = defaultToolbarLocalization,
 	) {
 		this.container = document.createElement('div');
 		this.container.classList.add(`${toolbarCSSPrefix}root`);
 		this.container.setAttribute('role', 'toolbar');
-		this.addElements();
 		parent.appendChild(this.container);
 
-		// Initialize color choosers
 		colorisInit();
+		this.setupColorPickers();
+
+		// Default pen types
+		this.penTypes = [
+			{
+				name: localizationTable.freehandPen,
+				factory: makeFreehandLineBuilder,
+			},
+			{
+				name: localizationTable.arrowPen,
+				factory: makeArrowBuilder,
+			},
+			{
+				name: localizationTable.linePen,
+				factory: makeLineBuilder,
+			},
+			{
+				name: localizationTable.filledRectanglePen,
+				factory: makeFilledRectangleBuilder,
+			},
+			{
+				name: localizationTable.outlinedRectanglePen,
+				factory: makeOutlinedRectangleBuilder,
+			},
+		];
+	}
+
+	public setupColorPickers() {
+		const closePickerOverlay = document.createElement('div');
+		closePickerOverlay.className = `${toolbarCSSPrefix}closeColorPickerOverlay`;
+		this.editor.createHTMLOverlay(closePickerOverlay);
+
 		coloris({
 			el: '.coloris_input',
 			format: 'hex',
@@ -479,6 +591,16 @@ export default class HTMLToolbar {
 				Color4.white.toHexString(),
 			],
 		});
+
+		this.editor.notifier.on(EditorEventType.ColorPickerToggled, event => {
+			if (event.kind !== EditorEventType.ColorPickerToggled) {
+				return;
+			}
+
+			// Show/hide the overlay. Making the overlay visible gives users a surface to click
+			// on that shows/hides the color picker.
+			closePickerOverlay.style.display = event.open ? 'block' : 'none';
+		});
 	}
 
 	public addActionButton(text: string, command: ()=> void, parent?: Element) {
@@ -515,14 +637,16 @@ export default class HTMLToolbar {
 		});
 	}
 
-	private addElements() {
+	public addDefaultToolWidgets() {
 		const toolController = this.editor.toolController;
 		for (const tool of toolController.getMatchingTools(ToolType.Pen)) {
 			if (!(tool instanceof Pen)) {
 				throw new Error('All `Pen` tools must have kind === ToolType.Pen');
 			}
 
-			const widget = new PenWidget(this.editor, tool, this.localizationTable);
+			const widget = new PenWidget(
+				this.editor, tool, this.localizationTable, this.penTypes,
+			);
 			widget.addTo(this.container);
 		}
 
@@ -546,6 +670,10 @@ export default class HTMLToolbar {
 			(new TouchDrawingWidget(this.editor, tool, this.localizationTable)).addTo(this.container);
 		}
 
+		this.setupColorPickers();
+	}
+
+	public addDefaultActionButtons() {
 		this.addUndoRedoButtons();
 	}
 }

package/src/toolbar/localization.ts

@@ -0,0 +1,44 @@
+
+
+export interface ToolbarLocalization {
+	outlinedRectanglePen: string;
+	filledRectanglePen: string;
+	linePen: string;
+	arrowPen: string;
+	freehandPen: string;
+	selectObjectType: string;
+	colorLabel: string;
+	pen: string;
+	eraser: string;
+	select: string;
+	touchDrawing: string;
+	thicknessLabel: string;
+	resizeImageToSelection: string;
+	undo: string;
+	redo: string;
+
+	dropdownShown: (toolName: string)=>string;
+	dropdownHidden: (toolName: string)=>string;
+}
+
+export const defaultToolbarLocalization: ToolbarLocalization = {
+	pen: 'Pen',
+	eraser: 'Eraser',
+	select: 'Select',
+	touchDrawing: 'Touch Drawing',
+	thicknessLabel: 'Thickness: ',
+	colorLabel: 'Color: ',
+	resizeImageToSelection: 'Resize image to selection',
+	undo: 'Undo',
+	redo: 'Redo',
+	selectObjectType: 'Object type: ',
+
+	freehandPen: 'Freehand',
+	arrowPen: 'Arrow',
+	linePen: 'Line',
+	outlinedRectanglePen: 'Outlined rectangle',
+	filledRectanglePen: 'Filled rectangle',
+
+	dropdownShown: (toolName) => `Dropdown for ${toolName} shown`,
+	dropdownHidden: (toolName) => `Dropdown for ${toolName} hidden`,
+};

package/src/toolbar/toolbar.css

@@ -100,6 +100,18 @@
     flex-direction: row;
 }
 
+.toolbar-closeColorPickerOverlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+
+    background-color: var(--primary-background-color);
+    opacity: 0.3;
+}
+
 /* Make color selection buttons fill their containing label */
 .toolbar-dropdown .clr-field button {
     width: 100%;