js-draw 0.5.0 → 0.7.0

package/src/toolbar/widgets/PenToolWidget.ts

@@ -7,7 +7,6 @@ import Editor from '../../Editor';
 import Pen from '../../tools/Pen';
 import { EditorEventType, KeyPressEvent } from '../../types';
 import { toolbarCSSPrefix } from '../HTMLToolbar';
-import { makeIconFromFactory, makePenIcon } from '../icons';
 import { ToolbarLocalization } from '../localization';
 import makeColorInput from '../makeColorInput';
 import BaseToolWidget from './BaseToolWidget';
@@ -77,10 +76,10 @@ export default class PenToolWidget extends BaseToolWidget {
 			// Use a square-root scale to prevent the pen's tip from overflowing.
 			const scale = Math.round(Math.sqrt(this.tool.getThickness()) * 4);
 			const color = this.tool.getColor();
-			return makePenIcon(scale, color.toHexString());
+			return this.editor.icons.makePenIcon(scale, color.toHexString());
 		} else {
 			const strokeFactory = this.tool.getStrokeFactory();
-			return makeIconFromFactory(this.tool, strokeFactory);
+			return this.editor.icons.makeIconFromFactory(this.tool, strokeFactory);
 		}
 	}
 
@@ -106,12 +105,16 @@ export default class PenToolWidget extends BaseToolWidget {
 		objectSelectLabel.innerText = this.localizationTable.selectObjectType;
 		objectSelectLabel.setAttribute('for', objectTypeSelect.id);
 
+		// Use a logarithmic scale for thicknessInput (finer control over thinner strokewidths.)
+		const inverseThicknessInputFn = (t: number) => Math.log10(t);
+		const thicknessInputFn = (t: number) => 10**t;
+
 		thicknessInput.type = 'range';
-		thicknessInput.min = '2';
-		thicknessInput.max = '20';
-		thicknessInput.step = '1';
+		thicknessInput.min = `${inverseThicknessInputFn(2)}`;
+		thicknessInput.max = `${inverseThicknessInputFn(400)}`;
+		thicknessInput.step = '0.1';
 		thicknessInput.oninput = () => {
-			this.tool.setThickness(parseFloat(thicknessInput.value) ** 2);
+			this.tool.setThickness(thicknessInputFn(parseFloat(thicknessInput.value)));
 		};
 		thicknessRow.appendChild(thicknessLabel);
 		thicknessRow.appendChild(thicknessInput);
@@ -143,7 +146,7 @@ export default class PenToolWidget extends BaseToolWidget {
 
 		this.updateInputs = () => {
 			colorInput.value = this.tool.getColor().toHexString();
-			thicknessInput.value = Math.sqrt(this.tool.getThickness()).toString();
+			thicknessInput.value = inverseThicknessInputFn(this.tool.getThickness()).toString();
 
 			objectTypeSelect.replaceChildren();
 			for (let i = 0; i < this.penTypes.length; i ++) {

package/src/toolbar/widgets/SelectionToolWidget.ts

@@ -1,7 +1,6 @@
 import Editor from '../../Editor';
 import SelectionTool from '../../tools/SelectionTool/SelectionTool';
-import { EditorEventType } from '../../types';
-import { makeDeleteSelectionIcon, makeDuplicateSelectionIcon, makeResizeViewportIcon, makeSelectionIcon } from '../icons';
+import { EditorEventType, KeyPressEvent } from '../../types';
 import { ToolbarLocalization } from '../localization';
 import ActionButtonWidget from './ActionButtonWidget';
 import BaseToolWidget from './BaseToolWidget';
@@ -14,16 +13,15 @@ export default class SelectionToolWidget extends BaseToolWidget {
 
 		const resizeButton = new ActionButtonWidget(
 			editor, localization,
-			makeResizeViewportIcon,
+			() => editor.icons.makeResizeViewportIcon(),
 			this.localizationTable.resizeImageToSelection,
 			() => {
-				const selection = this.tool.getSelection();
-				this.editor.dispatch(this.editor.setImportExportRect(selection!.region));
+				this.resizeImageToSelection();
 			},
 		);
 		const deleteButton = new ActionButtonWidget(
 			editor, localization,
-			makeDeleteSelectionIcon,
+			() => editor.icons.makeDeleteSelectionIcon(),
 			this.localizationTable.deleteSelection,
 			() => {
 				const selection = this.tool.getSelection();
@@ -33,7 +31,7 @@ export default class SelectionToolWidget extends BaseToolWidget {
 		);
 		const duplicateButton = new ActionButtonWidget(
 			editor, localization,
-			makeDuplicateSelectionIcon,
+			() => editor.icons.makeDuplicateSelectionIcon(),
 			this.localizationTable.duplicateSelection,
 			() => {
 				const selection = this.tool.getSelection();
@@ -67,11 +65,29 @@ export default class SelectionToolWidget extends BaseToolWidget {
 		});
 	}
 
+	private resizeImageToSelection() {
+		const selection = this.tool.getSelection();
+		if (selection) {
+			this.editor.dispatch(this.editor.setImportExportRect(selection.region));
+		}
+	}
+
+	protected onKeyPress(event: KeyPressEvent): boolean {
+		// Resize image to selection:
+		// Other keys are handled directly by the selection tool.
+		if (event.ctrlKey && event.key === 'r') {
+			this.resizeImageToSelection();
+			return true;
+		}
+
+		return false;
+	}
+
 	protected getTitle(): string {
 		return this.localizationTable.select;
 	}
 
 	protected createIcon(): Element {
-		return makeSelectionIcon();
+		return this.editor.icons.makeSelectionIcon();
 	}
 }

package/src/toolbar/widgets/TextToolWidget.ts

@@ -2,7 +2,6 @@ import Editor from '../../Editor';
 import TextTool from '../../tools/TextTool';
 import { EditorEventType } from '../../types';
 import { toolbarCSSPrefix } from '../HTMLToolbar';
-import { makeTextIcon } from '../icons';
 import { ToolbarLocalization } from '../localization';
 import makeColorInput from '../makeColorInput';
 import BaseToolWidget from './BaseToolWidget';
@@ -26,7 +25,7 @@ export default class TextToolWidget extends BaseToolWidget {
 
 	protected createIcon(): Element {
 		const textStyle = this.tool.getTextStyle();
-		return makeTextIcon(textStyle);
+		return this.editor.icons.makeTextIcon(textStyle);
 	}
 
 	private static idCounter: number = 0;

package/src/tools/PanZoom.ts

@@ -182,10 +182,13 @@ export default class PanZoom extends BaseTool {
 		return true;
 	}
 
-	public onKeyPress({ key }: KeyPressEvent): boolean {
+	public onKeyPress({ key, ctrlKey, altKey }: KeyPressEvent): boolean {
 		if (!(this.mode & PanZoomMode.Keyboard)) {
 			return false;
 		}
+		if (ctrlKey || altKey) {
+			return false;
+		}
 
 		// No need to keep the same the transform for keyboard events.
 		this.transform = Viewport.transformBy(Mat33.identity);

package/src/tools/PasteHandler.ts

@@ -8,7 +8,7 @@ import { AbstractComponent, TextComponent } from '../components/lib';
 import { Command, uniteCommands } from '../commands/lib';
 import SVGLoader from '../SVGLoader';
 import { PasteEvent } from '../types';
-import { Mat33, Rect2, Vec2 } from '../math/lib';
+import { Mat33, Rect2 } from '../math/lib';
 import BaseTool from './BaseTool';
 import EditorImage from '../EditorImage';
 import SelectionTool from './SelectionTool/SelectionTool';
@@ -125,29 +125,7 @@ export default class PasteHandler extends BaseTool {
 		const pastedTextStyle: TextStyle = textTools[0]?.getTextStyle() ?? defaultTextStyle;
 
 		const lines = text.split('\n');
-		let lastComponent: TextComponent|null = null;
-		const components: TextComponent[] = [];
-
-		for (const line of lines) {
-			let position = Vec2.zero;
-			if (lastComponent) {
-				const lineMargin = Math.floor(pastedTextStyle.size);
-				position = lastComponent.getBBox().bottomLeft.plus(Vec2.unitY.times(lineMargin));
-			}
-
-			const component = new TextComponent([ line ], Mat33.translation(position), pastedTextStyle);
-			components.push(component);
-			lastComponent = component;
-		}
-
-		if (components.length === 1) {
-			await this.addComponentsFromPaste([ components[0] ]);
-		} else {
-			// Wrap the existing `TextComponent`s --- dragging one component should drag all.
-			await this.addComponentsFromPaste([
-				new TextComponent(components, Mat33.identity, pastedTextStyle)
-			]);
-		}
+		await this.addComponentsFromPaste([ TextComponent.fromLines(lines, Mat33.identity, pastedTextStyle) ]);
 	}
 
 	private async doImagePaste(dataURL: string) {

package/src/tools/SelectionTool/SelectionTool.css

@@ -3,6 +3,7 @@
     background-color: var(--secondary-background-color);
     opacity: 0.5;
     overflow: visible;
+    position: absolute;
 }
 
 .selection-tool-handle {

package/src/tools/SelectionTool/SelectionTool.test.ts

@@ -100,4 +100,44 @@ describe('SelectionTool', () => {
 		editor.sendKeyboardEvent(InputEvtType.KeyUpEvent, 'a');
 		expect(editor.viewport.visibleRect.containsPoint(selection.region.center)).toBe(true);
 	});
+
+	it('shift+click should expand an existing selection', () => {
+		const { addTestStrokeCommand: stroke1Command } = createSquareStroke(50);
+		const { addTestStrokeCommand: stroke2Command } = createSquareStroke(500);
+
+		const editor = createEditor();
+		editor.dispatch(stroke1Command);
+		editor.dispatch(stroke2Command);
+
+		// Select the first stroke
+		const selectionTool = getSelectionTool(editor);
+		selectionTool.setEnabled(true);
+
+		// Select the smaller rectangle
+		editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(40, 40));
+		editor.sendPenEvent(InputEvtType.PointerUpEvt, Vec2.of(100, 100));
+
+		expect(selectionTool.getSelectedObjects()).toHaveLength(1);
+
+		// Shift key down.
+		editor.sendKeyboardEvent(InputEvtType.KeyPressEvent, 'Shift');
+
+		// Select the larger stroke.
+		editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(200, 200));
+		editor.sendPenEvent(InputEvtType.PointerUpEvt, Vec2.of(600, 600));
+
+		expect(selectionTool.getSelectedObjects()).toHaveLength(2);
+
+		editor.sendKeyboardEvent(InputEvtType.KeyUpEvent, 'Shift');
+
+		// Select the larger stroke without shift pressed
+		editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(200, 200));
+		editor.sendPenEvent(InputEvtType.PointerUpEvt, Vec2.of(600, 600));
+		expect(selectionTool.getSelectedObjects()).toHaveLength(1);
+
+		// Select nothing
+		editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(200, 200));
+		editor.sendPenEvent(InputEvtType.PointerUpEvt, Vec2.of(201, 201));
+		expect(selectionTool.getSelectedObjects()).toHaveLength(0);
+	});
 });

package/src/tools/SelectionTool/SelectionTool.ts

@@ -23,6 +23,9 @@ export default class SelectionTool extends BaseTool {
 	private selectionBox: Selection|null;
 	private lastEvtTarget: EventTarget|null = null;
 
+	private expandingSelectionBox: boolean = false;
+	private shiftKeyPressed: boolean = false;
+
 	public constructor(private editor: Editor, description: string) {
 		super(editor.notifier, description);
 
@@ -50,8 +53,11 @@ export default class SelectionTool extends BaseTool {
 		this.selectionBox = new Selection(
 			selectionStartPos, this.editor
 		);
-		// Remove any previous selection rects
-		this.handleOverlay.replaceChildren();
+
+		if (!this.expandingSelectionBox) {
+			// Remove any previous selection rects
+			this.prevSelectionBox?.cancelSelection();
+		}
 		this.selectionBox.addTo(this.handleOverlay);
 	}
 
@@ -60,7 +66,11 @@ export default class SelectionTool extends BaseTool {
 		if (event.allPointers.length === 1 && event.current.isPrimary) {
 			if (this.lastEvtTarget && this.selectionBox?.onDragStart(event.current, this.lastEvtTarget)) {
 				this.selectionBoxHandlingEvt = true;
-			} else {
+				this.expandingSelectionBox = false;
+			}
+			else {
+				// Shift key: Combine the new and old selection boxes at the end of the gesture.
+				this.expandingSelectionBox = this.shiftKeyPressed;
 				this.makeSelectionBox(event.current.canvasPos);
 			}
 
@@ -99,6 +109,7 @@ export default class SelectionTool extends BaseTool {
 		}
 	}
 
+	// Called after a gestureCancel and a pointerUp
 	private onGestureEnd() {
 		this.lastEvtTarget = null;
 
@@ -127,7 +138,19 @@ export default class SelectionTool extends BaseTool {
 		if (!this.selectionBox) return;
 
 		this.selectionBox.setToPoint(event.current.canvasPos);
-		this.onGestureEnd();
+
+		// Were we expanding the previous selection?
+		if (this.expandingSelectionBox && this.prevSelectionBox) {
+			// If so, finish expanding.
+			this.expandingSelectionBox = false;
+			this.selectionBox.resolveToObjects();
+			this.setSelection([
+				...this.selectionBox.getSelectedObjects(),
+				...this.prevSelectionBox.getSelectedObjects(),
+			]);
+		} else {
+			this.onGestureEnd();
+		}
 	}
 
 	public onGestureCancel(): void {
@@ -139,6 +162,8 @@ export default class SelectionTool extends BaseTool {
 			this.selectionBox = this.prevSelectionBox;
 			this.selectionBox?.addTo(this.handleOverlay);
 		}
+
+		this.expandingSelectionBox = false;
 	}
 
 	private static handleableKeys = [
@@ -150,6 +175,26 @@ export default class SelectionTool extends BaseTool {
 		'i', 'I', 'o', 'O',
 	];
 	public onKeyPress(event: KeyPressEvent): boolean {
+		if (this.selectionBox && event.ctrlKey && event.key === 'd') {
+			// Handle duplication on key up — we don't want to accidentally duplicate
+			// many times.
+			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.
+			return true;
+		}
+		else if (event.ctrlKey) {
+			// Don't transform the selection with, for example, ctrl+i.
+			// Pass it to another tool, if apliccable.
+			return false;
+		}
+		else if (event.key === 'Shift') {
+			this.shiftKeyPressed = true;
+			return true;
+		}
+
 		let rotationSteps = 0;
 		let xTranslateSteps = 0;
 		let yTranslateSteps = 0;
@@ -245,6 +290,21 @@ export default class SelectionTool extends BaseTool {
 	}
 
 	public onKeyUp(evt: KeyUpEvent) {
+		if (evt.key === 'Shift') {
+			this.shiftKeyPressed = false;
+			return true;
+		}
+		else if (evt.ctrlKey) {
+			if (this.selectionBox && evt.key === 'd') {
+				this.editor.dispatch(this.selectionBox.duplicateSelectedObjects());
+				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)) {
 			this.selectionBox.finalizeTransform();
 			return true;
@@ -307,11 +367,20 @@ export default class SelectionTool extends BaseTool {
 	}
 
 	// Get the object responsible for displaying this' selection.
+	// @internal
 	public getSelection(): Selection|null {
 		return this.selectionBox;
 	}
 
+	public getSelectedObjects(): AbstractComponent[] {
+		return this.selectionBox?.getSelectedObjects() ?? [];
+	}
+
+	// Select the given `objects`. Any non-selectable objects in `objects` are ignored.
 	public setSelection(objects: AbstractComponent[]) {
+		// Only select selectable objects.
+		objects = objects.filter(obj => obj.isSelectable());
+
 		let bbox: Rect2|null = null;
 		for (const object of objects) {
 			if (bbox) {

package/src/tools/TextTool.ts

@@ -1,23 +1,29 @@
 import Color4 from '../Color4';
-import Text, { TextStyle } from '../components/Text';
+import TextComponent, { TextStyle } from '../components/Text';
 import Editor from '../Editor';
 import EditorImage from '../EditorImage';
+import Rect2 from '../math/Rect2';
 import Mat33 from '../math/Mat33';
 import { Vec2 } from '../math/Vec2';
 import { PointerDevice } from '../Pointer';
 import { EditorEventType, PointerEvt } from '../types';
 import BaseTool from './BaseTool';
 import { ToolLocalization } from './localization';
+import Erase from '../commands/Erase';
+import uniteCommands from '../commands/uniteCommands';
 
 const overlayCssClass = 'textEditorOverlay';
 export default class TextTool extends BaseTool {
 	private textStyle: TextStyle;
 
 	private textEditOverlay: HTMLElement;
-	private textInputElem: HTMLInputElement|null = null;
+	private textInputElem: HTMLTextAreaElement|null = null;
 	private textTargetPosition: Vec2|null = null;
 	private textMeasuringCtx: CanvasRenderingContext2D|null = null;
 	private textRotation: number;
+	private textScale: Vec2 = Vec2.of(1, 1);
+
+	private removeExistingCommand: Erase|null = null;
 
 	public constructor(private editor: Editor, description: string, private localizationTable: ToolLocalization) {
 		super(editor.notifier, description);
@@ -37,10 +43,18 @@ export default class TextTool extends BaseTool {
 				overflow: visible;
 			}
 
-			.${overlayCssClass} input {
+			.${overlayCssClass} textarea {
 				background-color: rgba(0, 0, 0, 0);
+
+				white-space: pre;
+
+				padding: 0;
+				margin: 0;
 				border: none;
 				padding: 0;
+
+				min-width: 100px;
+				min-height: 1.1em;
 			}
 		`);
 		this.editor.createHTMLOverlay(this.textEditOverlay);
@@ -50,7 +64,7 @@ export default class TextTool extends BaseTool {
 	private getTextAscent(text: string, style: TextStyle): number {
 		this.textMeasuringCtx ??= document.createElement('canvas').getContext('2d');
 		if (this.textMeasuringCtx) {
-			Text.applyTextStyles(this.textMeasuringCtx, style);
+			TextComponent.applyTextStyles(this.textMeasuringCtx, style);
 			return this.textMeasuringCtx.measureText(text).actualBoundingBoxAscent;
 		}
 
@@ -60,7 +74,7 @@ export default class TextTool extends BaseTool {
 
 	private flushInput() {
 		if (this.textInputElem && this.textTargetPosition) {
-			const content = this.textInputElem.value;
+			const content = this.textInputElem.value.trimEnd();
 			this.textInputElem.remove();
 			this.textInputElem = null;
 
@@ -70,23 +84,33 @@ export default class TextTool extends BaseTool {
 
 			const textTransform = Mat33.translation(
 				this.textTargetPosition
+			).rightMul(
+				this.getTextScaleMatrix()
 			).rightMul(
 				Mat33.scaling2D(this.editor.viewport.getSizeOfPixelOnCanvas())
 			).rightMul(
 				Mat33.zRotation(this.textRotation)
 			);
 			
-			const textComponent = new Text(
-				[ content ],
-				textTransform,
-				this.textStyle,
-			);
+			const textComponent = TextComponent.fromLines(content.split('\n'), textTransform, this.textStyle);
 
 			const action = EditorImage.addElement(textComponent);
-			this.editor.dispatch(action);
+			if (this.removeExistingCommand) {
+				// Unapply so that `removeExistingCommand` can be added to the undo stack.
+				this.removeExistingCommand.unapply(this.editor);
+	
+				this.editor.dispatch(uniteCommands([ this.removeExistingCommand, action ]));
+				this.removeExistingCommand = null;
+			} else {
+				this.editor.dispatch(action);
+			}
 		}
 	}
 
+	private getTextScaleMatrix() {
+		return Mat33.scaling2D(this.textScale.times(1/this.editor.viewport.getSizeOfPixelOnCanvas()));
+	}
+
 	private updateTextInput() {
 		if (!this.textInputElem || !this.textTargetPosition) {
 			this.textInputElem?.remove();
@@ -95,7 +119,6 @@ export default class TextTool extends BaseTool {
 
 		const viewport = this.editor.viewport;
 		const textScreenPos = viewport.canvasToScreen(this.textTargetPosition);
-		this.textInputElem.type = 'text';
 		this.textInputElem.placeholder = this.localizationTable.enterTextToInsert;
 		this.textInputElem.style.fontFamily = this.textStyle.fontFamily;
 		this.textInputElem.style.fontVariant = this.textStyle.fontVariant ?? '';
@@ -108,24 +131,31 @@ export default class TextTool extends BaseTool {
 		this.textInputElem.style.top = `${textScreenPos.y}px`;
 		this.textInputElem.style.margin = '0';
 
+		this.textInputElem.style.width = `${this.textInputElem.scrollWidth}px`;
+		this.textInputElem.style.height = `${this.textInputElem.scrollHeight}px`;
+
 		const rotation = this.textRotation + viewport.getRotationAngle();
 		const ascent = this.getTextAscent(this.textInputElem.value || 'W', this.textStyle);
-		this.textInputElem.style.transform = `rotate(${rotation * 180 / Math.PI}deg) translate(0, ${-ascent}px)`;
+		const scale: Mat33 = this.getTextScaleMatrix();
+		this.textInputElem.style.transform = `${scale.toCSSMatrix()} rotate(${rotation * 180 / Math.PI}deg) translate(0, ${-ascent}px)`;
 		this.textInputElem.style.transformOrigin = 'top left';
 	}
 
 	private startTextInput(textCanvasPos: Vec2, initialText: string) {
 		this.flushInput();
 
-		this.textInputElem = document.createElement('input');
+		this.textInputElem = document.createElement('textarea');
 		this.textInputElem.value = initialText;
+		this.textInputElem.style.display = 'inline-block';
 		this.textTargetPosition = textCanvasPos;
 		this.textRotation = -this.editor.viewport.getRotationAngle();
+		this.textScale = Vec2.of(1, 1).times(this.editor.viewport.getSizeOfPixelOnCanvas());
 		this.updateTextInput();
 
 		this.textInputElem.oninput = () => {
 			if (this.textInputElem) {
-				this.textInputElem.size = this.textInputElem?.value.length || 10;
+				this.textInputElem.style.width = `${this.textInputElem.scrollWidth}px`;
+				this.textInputElem.style.height = `${this.textInputElem.scrollHeight}px`;
 			}
 		};
 		this.textInputElem.onblur = () => {
@@ -134,7 +164,7 @@ export default class TextTool extends BaseTool {
 			setTimeout(() => this.flushInput(), 0);
 		};
 		this.textInputElem.onkeyup = (evt) => {
-			if (evt.key === 'Enter') {
+			if (evt.key === 'Enter' && !evt.shiftKey) {
 				this.flushInput();
 				this.editor.focus();
 			} else if (evt.key === 'Escape') {
@@ -142,6 +172,9 @@ export default class TextTool extends BaseTool {
 				this.textInputElem?.remove();
 				this.textInputElem = null;
 				this.editor.focus();
+
+				this.removeExistingCommand?.unapply(this.editor);
+				this.removeExistingCommand = null;
 			}
 		};
 
@@ -165,7 +198,33 @@ export default class TextTool extends BaseTool {
 		}
 
 		if (allPointers.length === 1) {
-			this.startTextInput(current.canvasPos, '');
+
+			// Are we clicking on a text node?
+			const canvasPos = current.canvasPos;
+			const halfTestRegionSize = Vec2.of(2.5, 2.5).times(this.editor.viewport.getSizeOfPixelOnCanvas());
+			const testRegion = Rect2.fromCorners(canvasPos.minus(halfTestRegionSize), canvasPos.plus(halfTestRegionSize));
+			const targetNodes = this.editor.image.getElementsIntersectingRegion(testRegion);
+			const targetTextNodes = targetNodes.filter(node => node instanceof TextComponent) as TextComponent[];
+
+			if (targetTextNodes.length > 0) {
+				const targetNode = targetTextNodes[targetTextNodes.length - 1];
+				this.setTextStyle(targetNode.getTextStyle());
+
+				// Create and temporarily apply removeExistingCommand.
+				this.removeExistingCommand = new Erase([ targetNode ]);
+				this.removeExistingCommand.apply(this.editor);
+
+				this.startTextInput(targetNode.getBaselinePos(), targetNode.getText());
+
+				const transform = targetNode.getTransform();
+				this.textRotation = transform.transformVec3(Vec2.unitX).angle();
+				const scaleFactor = transform.transformVec3(Vec2.unitX).magnitude();
+				this.textScale = Vec2.of(1, 1).times(scaleFactor);
+				this.updateTextInput();
+			} else {
+				this.removeExistingCommand = null;
+				this.startTextInput(current.canvasPos, '');
+			}
 			return true;
 		}
 
@@ -224,4 +283,10 @@ export default class TextTool extends BaseTool {
 	public getTextStyle(): TextStyle {
 		return this.textStyle;
 	}
+
+	private setTextStyle(style: TextStyle) {
+		// Copy the style — we may change parts of it.
+		this.textStyle = {...style};
+		this.dispatchUpdateEvent();
+	}
 }

package/src/tools/ToolController.ts

@@ -39,6 +39,7 @@ export default class ToolController {
 			new Eraser(editor, localization.eraserTool),
 			new SelectionTool(editor, localization.selectionTool),
 			new TextTool(editor, localization.textTool, localization),
+			new PanZoom(editor, PanZoomMode.SinglePointerGestures, localization.anyDevicePanning)
 		];
 		this.tools = [
 			new PipetteTool(editor, localization.pipetteTool),

package/src/tools/localization.ts

@@ -15,6 +15,8 @@ export interface ToolLocalization {
 	changeTool: string;
 	pasteHandler: string;
 
+	anyDevicePanning: string;
+
 	copied: (count: number, description: string) => string;
 	pasted: (count: number, description: string) => string;
 
@@ -38,6 +40,8 @@ export const defaultToolLocalization: ToolLocalization = {
 	changeTool: 'Change tool',
 	pasteHandler: 'Copy paste handler',
 
+	anyDevicePanning: 'Any device panning',
+
 	copied: (count: number, description: string) => `Copied ${count} ${description}`,
 	pasted: (count: number, description: string) => `Pasted ${count} ${description}`,
 

package/typedoc.json

@@ -3,7 +3,11 @@
 		"./src/"
 	],
 	"exclude": [
-		"**/*.test.ts"
+		"**/*.test.ts",
+		"node_modules/**",
+		"dist/",
+		"dist-test/",
+		"src/testing/"
 	],
 	"excludePrivate": true,
 	"excludeInternal": true,

package/dist/src/toolbar/icons.d.ts

@@ -1,20 +0,0 @@
-import Color4 from '../Color4';
-import { ComponentBuilderFactory } from '../components/builders/types';
-import { TextStyle } from '../components/Text';
-import Pen from '../tools/Pen';
-export declare const makeUndoIcon: () => SVGSVGElement;
-export declare const makeRedoIcon: (mirror?: boolean) => SVGSVGElement;
-export declare const makeDropdownIcon: () => SVGSVGElement;
-export declare const makeEraserIcon: () => SVGSVGElement;
-export declare const makeSelectionIcon: () => SVGSVGElement;
-export declare const makeHandToolIcon: () => SVGSVGElement;
-export declare const makeTouchPanningIcon: () => SVGSVGElement;
-export declare const makeAllDevicePanningIcon: () => SVGSVGElement;
-export declare const makeZoomIcon: () => SVGSVGElement;
-export declare const makeTextIcon: (textStyle: TextStyle) => SVGSVGElement;
-export declare const makePenIcon: (tipThickness: number, color: string | Color4) => SVGSVGElement;
-export declare const makeIconFromFactory: (pen: Pen, factory: ComponentBuilderFactory) => SVGSVGElement;
-export declare const makePipetteIcon: (color?: Color4) => SVGSVGElement;
-export declare const makeResizeViewportIcon: () => SVGSVGElement;
-export declare const makeDuplicateSelectionIcon: () => SVGSVGElement;
-export declare const makeDeleteSelectionIcon: () => SVGSVGElement;