js-draw 0.13.1 → 0.15.0

package/src/rendering/renderers/AbstractRenderer.ts

@@ -1,11 +1,11 @@
 import { LoadSaveDataTable } from '../../components/AbstractComponent';
-import { TextStyle } from '../../components/TextComponent';
 import Mat33 from '../../math/Mat33';
 import Path, { PathCommand, PathCommandType } from '../../math/Path';
 import Rect2 from '../../math/Rect2';
 import { Point2, Vec2 } from '../../math/Vec2';
 import Viewport from '../../Viewport';
 import RenderingStyle, { stylesEqual } from '../RenderingStyle';
+import TextStyle from '../TextRenderingStyle';
 
 export interface RenderablePathSpec {
 	startPoint: Point2;

package/src/rendering/renderers/CanvasRenderer.ts

@@ -1,11 +1,12 @@
 import Color4 from '../../Color4';
-import TextComponent, { TextStyle } from '../../components/TextComponent';
+import TextComponent from '../../components/TextComponent';
 import Mat33 from '../../math/Mat33';
 import Rect2 from '../../math/Rect2';
 import { Point2, Vec2 } from '../../math/Vec2';
 import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
+import TextStyle from '../TextRenderingStyle';
 import AbstractRenderer, { RenderableImage, RenderablePathSpec } from './AbstractRenderer';
 
 export default class CanvasRenderer extends AbstractRenderer {

package/src/rendering/renderers/DummyRenderer.ts

@@ -1,10 +1,10 @@
-import { TextStyle } from '../../components/TextComponent';
 import Mat33 from '../../math/Mat33';
 import Rect2 from '../../math/Rect2';
 import { Point2, Vec2 } from '../../math/Vec2';
 import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
+import TextStyle from '../TextRenderingStyle';
 import AbstractRenderer, { RenderableImage } from './AbstractRenderer';
 
 // Renderer that outputs almost nothing. Useful for automated tests.

package/src/rendering/renderers/SVGRenderer.ts

@@ -1,6 +1,5 @@
 
 import { LoadSaveDataTable } from '../../components/AbstractComponent';
-import { TextStyle } from '../../components/TextComponent';
 import Mat33 from '../../math/Mat33';
 import Path from '../../math/Path';
 import Rect2 from '../../math/Rect2';
@@ -9,6 +8,7 @@ import { Point2, Vec2 } from '../../math/Vec2';
 import { svgAttributesDataKey, SVGLoaderUnknownAttribute, SVGLoaderUnknownStyleAttribute, svgStyleAttributesDataKey } from '../../SVGLoader';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
+import TextStyle from '../TextRenderingStyle';
 import AbstractRenderer, { RenderableImage, RenderablePathSpec } from './AbstractRenderer';
 
 export const renderedStylesheetId = 'js-draw-style-sheet';

package/src/rendering/renderers/TextOnlyRenderer.ts

@@ -1,4 +1,3 @@
-import { TextStyle } from '../../components/TextComponent';
 import Mat33 from '../../math/Mat33';
 import Rect2 from '../../math/Rect2';
 import { Vec2 } from '../../math/Vec2';
@@ -6,6 +5,7 @@ import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import { TextRendererLocalization } from '../localization';
 import RenderingStyle from '../RenderingStyle';
+import TextStyle from '../TextRenderingStyle';
 import AbstractRenderer, { RenderableImage } from './AbstractRenderer';
 
 // Outputs a description of what was rendered.

package/src/toolbar/IconProvider.ts

@@ -1,17 +1,14 @@
 import Color4 from '../Color4';
 import { ComponentBuilderFactory } from '../components/builders/types';
-import { TextStyle } from '../components/TextComponent';
 import EventDispatcher from '../EventDispatcher';
 import { Vec2 } from '../math/Vec2';
 import SVGRenderer from '../rendering/renderers/SVGRenderer';
+import TextStyle from '../rendering/TextRenderingStyle';
 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;
+export type IconType = HTMLImageElement|SVGElement;
 
 const svgNamespace = 'http://www.w3.org/2000/svg';
 const iconColorFill = `
@@ -35,8 +32,33 @@ const checkerboardPatternDef = `
 `;
 const checkerboardPatternRef = 'url(#checkerboard)';
 
-// Provides icons that can be used in the toolbar, etc.
-// Extend this class and override methods to customize icons.
+/**
+ * Provides icons that can be used in the toolbar, etc.
+ * Extend this class and override methods to customize icons.
+ * 
+ * @example
+ * ```ts
+ * class CustomIconProvider extends jsdraw.IconProvider {
+ *     // Use '☺' instead of the default dropdown symbol.
+ *     public makeDropdownIcon() {
+ *         const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+ *         icon.innerHTML = `
+ *             <text x='5' y='55' style='fill: var(--icon-color); font-size: 50pt;'>☺</text>
+ *         `;
+ *         icon.setAttribute('viewBox', '0 0 100 100');
+ *         return icon;
+ *     }
+ * }
+ * 
+ * const icons = new CustomIconProvider();
+ * const editor = new jsdraw.Editor(document.body, {
+ *     iconProvider: icons,
+ * });
+ * 
+ * // Add a toolbar that uses these icons
+ * editor.addToolbar();
+ * ```
+ */
 export default class IconProvider {
 	
 	public makeUndoIcon(): IconType {
@@ -587,6 +609,17 @@ export default class IconProvider {
 		icon.setAttribute('viewBox', '0 0 100 100');
 		return icon;
 	}
+
+	public makeFormatSelectionIcon(): IconType {
+		return this.makeIconFromPath(`
+			M 5 10
+			L 5 20 L 10 20 L 10 15 L 20 15 L 20 40 L 15 40 L 15 45 L 35 45 L 35 40 L 30 40 L 30 15 L 40 15 L 40 20 L 45 20 L 45 15 L 45 10 L 5 10 z
+			M 90 10 C 90 10 86.5 13.8 86 14 C 86 14 76.2 24.8 76 25 L 60 25 L 60 65 C 75 70 85 70 90 65 L 90 25 L 80 25 L 76.7 25 L 90 10 z
+			M 60 25 L 55 25 L 50 30 L 60 25 z
+			M 10 55 L 10 90 L 41 90 L 41 86 L 45 86 L 45 55 L 10 55 z
+			M 42 87 L 42 93 L 48 93 L 48 87 L 42 87 z 
+		`);
+	}
 	
 	public makeResizeViewportIcon(): IconType {
 		return this.makeIconFromPath(`

package/src/toolbar/localization.ts

@@ -28,6 +28,7 @@ export interface ToolbarLocalization {
 	duplicateSelection: string;
 	pickColorFromScreen: string;
 	clickToPickColorAnnouncement: string;
+	reformatSelection: string;
 	undo: string;
 	redo: string;
 	zoom: string;
@@ -52,6 +53,7 @@ export const defaultToolbarLocalization: ToolbarLocalization = {
 	handTool: 'Pan',
 	zoom: 'Zoom',
 	image: 'Image',
+	reformatSelection: 'Format selection',
 	inputAltText: 'Alt text: ',
 	chooseFile: 'Choose file: ',
 	submit: 'Submit',

package/src/toolbar/toolbar.css

@@ -33,6 +33,7 @@
 
 .toolbar-dropdown .toolbar-button > .toolbar-icon {
 	max-width: 50px;
+	width: 100%;
 }
 
 .toolbar-button.disabled {
@@ -89,6 +90,8 @@
 
 .toolbar-root .toolbar-icon {
 	flex-shrink: 1;
+
+	width: 100%;
 	min-width: 30px;
 	min-height: 30px;
 }

package/src/toolbar/widgets/BaseWidget.ts

@@ -110,13 +110,17 @@ export default abstract class BaseWidget {
 
 			// If we didn't do anything with the event, send it to the editor.
 			if (!handled) {
-				this.editor.toolController.dispatchInputEvent({
+				handled = this.editor.toolController.dispatchInputEvent({
 					kind: InputEvtType.KeyPressEvent,
 					key: evt.key,
-					ctrlKey: evt.ctrlKey,
+					ctrlKey: evt.ctrlKey || evt.metaKey,
 					altKey: evt.altKey,
 				});
 			}
+
+			if (handled) {
+				evt.preventDefault();
+			}
 		};
 
 		button.onkeyup = evt => {
@@ -124,12 +128,16 @@ export default abstract class BaseWidget {
 				return;
 			}
 
-			this.editor.toolController.dispatchInputEvent({
+			const handled = this.editor.toolController.dispatchInputEvent({
 				kind: InputEvtType.KeyUpEvent,
 				key: evt.key,
-				ctrlKey: evt.ctrlKey,
+				ctrlKey: evt.ctrlKey || evt.metaKey,
 				altKey: evt.altKey,
 			});
+
+			if (handled) {
+				evt.preventDefault();
+			}
 		};
 
 		button.onclick = () => {

package/src/toolbar/widgets/InsertImageWidget.ts

@@ -2,7 +2,8 @@ import ImageComponent from '../../components/ImageComponent';
 import Editor from '../../Editor';
 import Erase from '../../commands/Erase';
 import EditorImage from '../../EditorImage';
-import { SelectionTool, uniteCommands } from '../../lib';
+import uniteCommands from '../../commands/uniteCommands';
+import SelectionTool from '../../tools/SelectionTool/SelectionTool';
 import Mat33 from '../../math/Mat33';
 import fileToBase64 from '../../util/fileToBase64';
 import { ToolbarLocalization } from '../localization';

package/src/toolbar/widgets/SelectionToolWidget.ts

@@ -1,9 +1,96 @@
+import Color4 from '../../Color4';
+import { isRestylableComponent } from '../../components/RestylableComponent';
 import Editor from '../../Editor';
+import uniteCommands from '../../commands/uniteCommands';
 import SelectionTool from '../../tools/SelectionTool/SelectionTool';
 import { EditorEventType, KeyPressEvent } from '../../types';
 import { ToolbarLocalization } from '../localization';
+import makeColorInput from '../makeColorInput';
 import ActionButtonWidget from './ActionButtonWidget';
 import BaseToolWidget from './BaseToolWidget';
+import BaseWidget from './BaseWidget';
+
+class RestyleSelectionWidget extends BaseWidget {
+	private updateFormatData: ()=>void = () => {};
+
+	public constructor(editor: Editor, private selectionTool: SelectionTool, localizationTable?: ToolbarLocalization) {
+		super(editor, 'restyle-selection', localizationTable);
+
+		// Allow showing the dropdown even if this widget isn't selected yet
+		this.container.classList.add('dropdownShowable');
+
+		this.editor.notifier.on(EditorEventType.ToolUpdated, toolEvt => {
+			if (toolEvt.kind !== EditorEventType.ToolUpdated) {
+				throw new Error('Invalid event type!');
+			}
+
+			if (toolEvt.tool === this.selectionTool) {
+				this.updateFormatData();
+			}
+		});
+	}
+
+	protected getTitle(): string {
+		return this.localizationTable.reformatSelection;
+	}
+
+	protected createIcon(){
+		return this.editor.icons.makeFormatSelectionIcon();
+	}
+
+	protected handleClick(): void {
+		this.setDropdownVisible(!this.isDropdownVisible());
+	}
+
+	protected fillDropdown(dropdown: HTMLElement): boolean {
+		const container = document.createElement('div');
+		const colorRow = document.createElement('div');
+		const colorLabel = document.createElement('label');
+		const [ colorInput, colorInputContainer, setColorInputValue ] = makeColorInput(this.editor, color => {
+			const selection = this.selectionTool.getSelection();
+
+			if (selection) {
+				const updateStyleCommands = [];
+
+				for (const elem of selection.getSelectedObjects()) {
+					if (isRestylableComponent(elem)) {
+						updateStyleCommands.push(elem.updateStyle({ color }));
+					}
+				}
+
+				const unitedCommand = uniteCommands(updateStyleCommands);
+				this.editor.dispatch(unitedCommand);
+			}
+		});
+
+		colorLabel.innerText = this.localizationTable.colorLabel;
+
+		this.updateFormatData = () => {
+			const selection = this.selectionTool.getSelection();
+			if (selection) {
+				colorInput.disabled = false;
+
+				const colors = [];
+				for (const elem of selection.getSelectedObjects()) {
+					if (isRestylableComponent(elem)) {
+						const color = elem.getStyle().color;
+						if (color) {
+							colors.push(color);
+						}
+					}
+				}
+				setColorInputValue(Color4.average(colors));
+			} else {
+				colorInput.disabled = true;
+			}
+		};
+
+		colorRow.replaceChildren(colorLabel, colorInputContainer);
+		container.replaceChildren(colorRow);
+		dropdown.replaceChildren(container);
+		return true;
+	}
+}
 
 export default class SelectionToolWidget extends BaseToolWidget {
 	public constructor(
@@ -41,15 +128,22 @@ export default class SelectionToolWidget extends BaseToolWidget {
 			},
 			localization,
 		);
+		const restyleButton = new RestyleSelectionWidget(
+			editor,
+			this.tool,
+			localization,
+		);
 
 		this.addSubWidget(resizeButton);
 		this.addSubWidget(deleteButton);
 		this.addSubWidget(duplicateButton);
+		this.addSubWidget(restyleButton);
 
 		const updateDisabled = (disabled: boolean) => {
 			resizeButton.setDisabled(disabled);
 			deleteButton.setDisabled(disabled);
 			duplicateButton.setDisabled(disabled);
+			restyleButton.setDisabled(disabled);
 		};
 		updateDisabled(true);
 
@@ -61,7 +155,7 @@ export default class SelectionToolWidget extends BaseToolWidget {
 
 			if (toolEvt.tool === this.tool) {
 				const selection = this.tool.getSelection();
-				const hasSelection = selection && selection.region.area > 0;
+				const hasSelection = selection && selection.getSelectedItemCount() > 0;
 
 				updateDisabled(!hasSelection);
 			}

package/src/tools/PanZoom.test.ts

@@ -53,7 +53,8 @@ describe('PanZoom', () => {
 		sendTouchEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(100, 0));
 
 		const updatedTranslation = editor.viewport.canvasToScreen(Vec2.zero);
-		expect(updatedTranslation.minus(origTranslation).magnitude()).toBe(100);
+		expect(updatedTranslation.minus(origTranslation).magnitude()).toBeGreaterThanOrEqual(100);
+		expect(updatedTranslation.minus(origTranslation).magnitude()).toBeLessThan(110);
 
 		await waitForTimeout(600); // ms
 		jest.useFakeTimers();

package/src/tools/PasteHandler.ts

@@ -6,8 +6,8 @@ import { Mat33 } from '../math/lib';
 import BaseTool from './BaseTool';
 import TextTool from './TextTool';
 import Color4 from '../Color4';
-import { TextStyle } from '../components/TextComponent';
 import ImageComponent from '../components/ImageComponent';
+import TextStyle from '../rendering/TextRenderingStyle';
 
 /**
  * A tool that handles paste events (e.g. as triggered by ctrl+V).

package/src/tools/Pen.ts

@@ -200,7 +200,7 @@ export default class Pen extends BaseTool {
 			return true;
 		}
 
-		if (key === 'control') {
+		if (key === 'control' || key === 'meta') {
 			this.ctrlKeyPressed = true;
 			return true;
 		}
@@ -216,7 +216,7 @@ export default class Pen extends BaseTool {
 	public onKeyUp({ key }: KeyUpEvent): boolean {
 		key = key.toLowerCase();
 
-		if (key === 'control') {
+		if (key === 'control' || key === 'meta') {
 			this.ctrlKeyPressed = false;
 			return true;
 		}

package/src/tools/SelectionTool/SelectAllShortcutHandler.ts

@@ -0,0 +1,28 @@
+import Editor from '../../Editor';
+import { KeyPressEvent } from '../../types';
+import BaseTool from '../BaseTool';
+import SelectionTool from './SelectionTool';
+
+// Handles ctrl+a: Select all
+export default class SelectAllShortcutHandler extends BaseTool {
+	public constructor(private editor: Editor) {
+		super(editor.notifier, editor.localization.selectAllTool);
+	}
+    
+	// @internal
+	public onKeyPress({ key, ctrlKey }: KeyPressEvent): boolean {
+		if (ctrlKey && key === 'a') {
+			const selectionTools = this.editor.toolController.getMatchingTools(SelectionTool);
+			
+			if (selectionTools.length > 0) {
+				const selectionTool = selectionTools[0];
+				selectionTool.setEnabled(true);
+				selectionTool.setSelection(this.editor.image.getAllElements());
+
+				return true;
+			}
+		}
+
+		return false;
+	}
+}

package/src/tools/SelectionTool/Selection.ts

@@ -121,6 +121,21 @@ export default class Selection {
 		return this.originalRegion.transformedBoundingBox(scaleAndTranslateMat);
 	}
 
+	/**
+	 * Computes and returns the bounding box of the selection without
+	 * any additional padding. Computes directly from the elements that are selected.
+	 * @internal
+	 */
+	public computeTightBoundingBox() {
+		const bbox = this.selectedElems.reduce((
+			accumulator: Rect2|null, elem: AbstractComponent
+		): Rect2 => {
+			return (accumulator ?? elem.getBBox()).union(elem.getBBox());
+		}, null);
+
+		return bbox ?? Rect2.empty;
+	}
+
 	public get regionRotation(): number {
 		return this.transform.transformVec3(Vec2.unitX).angle();
 	}
@@ -250,7 +265,7 @@ export default class Selection {
 			this.selection?.setTransform(this.fullTransform.inverse(), false);
 			this.selection?.updateUI();
 
-			await editor.asyncUnapplyCommands(this.transformCommands, updateChunkSize);
+			await editor.asyncUnapplyCommands(this.transformCommands, updateChunkSize, true);
 			this.selection?.setTransform(Mat33.identity);
 			this.selection?.recomputeRegion();
 			this.selection?.updateUI();
@@ -328,11 +343,7 @@ export default class Selection {
 	// Recompute this' region from the selected elements.
 	// Returns false if the selection is empty.
 	public recomputeRegion(): boolean {
-		const newRegion = this.selectedElems.reduce((
-			accumulator: Rect2|null, elem: AbstractComponent
-		): Rect2 => {
-			return (accumulator ?? elem.getBBox()).union(elem.getBBox());
-		}, null);
+		const newRegion = this.computeTightBoundingBox();
 
 		if (!newRegion) {
 			this.cancelSelection();

package/src/tools/SelectionTool/SelectionTool.ts

@@ -62,12 +62,13 @@ export default class SelectionTool extends BaseTool {
 	private snapSelectionToGrid() {
 		if (!this.selectionBox) throw new Error('No selection to snap!');
 
-		const topLeftOfBBox = this.selectionBox.region.topLeft;
-		const snapDistance =
-				this.editor.viewport.snapToGrid(topLeftOfBBox).minus(topLeftOfBBox);
+		// Snap the top left corner of what we have selected.
+		const topLeftOfBBox = this.selectionBox.computeTightBoundingBox().topLeft;
+		const snappedTopLeft = this.editor.viewport.snapToGrid(topLeftOfBBox);
+		const snapDelta = snappedTopLeft.minus(topLeftOfBBox);
 		
 		const oldTransform = this.selectionBox.getTransform();
-		this.selectionBox.setTransform(oldTransform.rightMul(Mat33.translation(snapDistance)));
+		this.selectionBox.setTransform(oldTransform.rightMul(Mat33.translation(snapDelta)));
 		this.selectionBox.finalizeTransform();
 	}
 
@@ -211,10 +212,10 @@ export default class SelectionTool extends BaseTool {
 		'e', 'j', 'ArrowDown',
 		'r', 'R',
 		'i', 'I', 'o', 'O',
-		'Control',
+		'Control', 'Meta',
 	];
 	public onKeyPress(event: KeyPressEvent): boolean {
-		if (event.key === 'Control') {
+		if (event.key === 'Control' || event.key === 'Meta') {
 			this.ctrlKeyPressed = true;
 			return true;
 		}
@@ -225,8 +226,7 @@ export default class SelectionTool extends BaseTool {
 			return true;
 		}
 		else if (event.key === 'a' && event.ctrlKey) {
-			// Handle ctrl+A on key up.
-			// Return early to prevent 'a' from moving the selection/view.
+			this.setSelection(this.editor.image.getAllElements());
 			return true;
 		}
 		else if (event.ctrlKey) {
@@ -334,7 +334,7 @@ export default class SelectionTool extends BaseTool {
 	}
 
 	public onKeyUp(evt: KeyUpEvent) {
-		if (evt.key === 'Control') {
+		if (evt.key === 'Control' || evt.key === 'Meta') {
 			this.ctrlKeyPressed = false;
 			return true;
 		}
@@ -350,10 +350,6 @@ export default class SelectionTool extends BaseTool {
 				});
 				return true;
 			}
-			else if (evt.key === 'a') {
-				this.setSelection(this.editor.image.getAllElements());
-				return true;
-			}
 		}
 
 		if (this.selectionBox && SelectionTool.handleableKeys.some(key => key === evt.key)) {

package/src/tools/SelectionTool/TransformMode.ts

@@ -62,7 +62,7 @@ export class ResizeTransformer {
 		//    long decimal representations => large file sizes.
 		scale = scale.map(component => Viewport.roundScaleRatio(component, 2));
 
-		if (scale.x > 0 && scale.y > 0) {
+		if (scale.x !== 0 && scale.y !== 0) {
 			const origin = this.editor.viewport.roundPoint(this.selection.preTransformRegion.topLeft);
 			this.selection.setTransform(Mat33.scaling2D(scale, origin));
 		}

package/src/tools/TextTool.ts

@@ -1,5 +1,5 @@
 import Color4 from '../Color4';
-import TextComponent, { TextStyle } from '../components/TextComponent';
+import TextComponent from '../components/TextComponent';
 import Editor from '../Editor';
 import EditorImage from '../EditorImage';
 import Rect2 from '../math/Rect2';
@@ -11,6 +11,7 @@ import BaseTool from './BaseTool';
 import { ToolLocalization } from './localization';
 import Erase from '../commands/Erase';
 import uniteCommands from '../commands/uniteCommands';
+import TextStyle from '../rendering/TextRenderingStyle';
 
 const overlayCssClass = 'textEditorOverlay';
 export default class TextTool extends BaseTool {

package/src/tools/ToolController.ts

@@ -16,6 +16,7 @@ import PasteHandler from './PasteHandler';
 import ToolbarShortcutHandler from './ToolbarShortcutHandler';
 import { makePressureSensitiveFreehandLineBuilder } from '../components/builders/PressureSensitiveFreehandLineBuilder';
 import FindTool from './FindTool';
+import SelectAllShortcutHandler from './SelectionTool/SelectAllShortcutHandler';
 
 export default class ToolController {
 	private tools: BaseTool[];
@@ -53,6 +54,7 @@ export default class ToolController {
 			new ToolSwitcherShortcut(editor),
 			new FindTool(editor),
 			new PasteHandler(editor),
+			new SelectAllShortcutHandler(editor),
 		];
 		primaryTools.forEach(tool => tool.setToolGroup(primaryToolGroup));
 		panZoomTool.setEnabled(true);

package/src/tools/lib.ts

@@ -14,6 +14,7 @@ export { default as PanZoomTool, PanZoomMode } from './PanZoom';
 export { default as PenTool, PenStyle } from './Pen';
 export { default as TextTool } from './TextTool';
 export { default as SelectionTool } from './SelectionTool/SelectionTool';
+export { default as SelectAllShortcutHandler } from './SelectionTool/SelectAllShortcutHandler';
 export { default as EraserTool } from './Eraser';
 export { default as PasteHandler } from './PasteHandler';
 

package/src/tools/localization.ts

@@ -3,6 +3,7 @@ export interface ToolLocalization {
 	keyboardPanZoom: string;
     penTool: (penId: number)=>string;
     selectionTool: string;
+	selectAllTool: string;
     eraserTool: string;
     touchPanTool: string;
     twoFingerPanZoomTool: string;
@@ -34,6 +35,7 @@ export interface ToolLocalization {
 export const defaultToolLocalization: ToolLocalization = {
 	penTool: (penId) => `Pen ${penId}`,
 	selectionTool: 'Selection',
+	selectAllTool: 'Select all shortcut',
 	eraserTool: 'Eraser',
 	touchPanTool: 'Touch panning',
 	twoFingerPanZoomTool: 'Panning and zooming',