js-draw 0.1.2 → 0.1.3

package/src/rendering/renderers/DummyRenderer.ts

@@ -1,5 +1,6 @@
 // Renderer that outputs nothing. Useful for automated tests.
 
+import { TextStyle } from '../../components/Text';
 import Mat33 from '../../geometry/Mat33';
 import Rect2 from '../../geometry/Rect2';
 import { Point2, Vec2 } from '../../geometry/Vec2';
@@ -14,6 +15,7 @@ export default class DummyRenderer extends AbstractRenderer {
 	public lastFillStyle: RenderingStyle|null = null;
 	public lastPoint: Point2|null = null;
 	public objectNestingLevel: number = 0;
+	public lastText: string|null = null;
 
 	// List of points drawn since the last clear.
 	public pointBuffer: Point2[] = [];
@@ -40,6 +42,7 @@ export default class DummyRenderer extends AbstractRenderer {
 		this.clearedCount ++;
 		this.renderedPathCount = 0;
 		this.pointBuffer = [];
+		this.lastText = null;
 
 		// Ensure all objects finished rendering
 		if (this.objectNestingLevel > 0) {
@@ -88,6 +91,11 @@ export default class DummyRenderer extends AbstractRenderer {
 		// As such, it is unlikely to be the target of automated tests.
 	}
 
+
+	public drawText(text: string, _transform: Mat33, _style: TextStyle): void {
+		this.lastText = text;
+	}
+
 	public startObject(boundingBox: Rect2, _clip: boolean) {
 		super.startObject(boundingBox);
 

package/src/rendering/renderers/SVGRenderer.ts

@@ -1,9 +1,11 @@
 
 import { LoadSaveDataTable } from '../../components/AbstractComponent';
+import { TextStyle } from '../../components/Text';
+import Mat33 from '../../geometry/Mat33';
 import Path, { PathCommand, PathCommandType } from '../../geometry/Path';
 import Rect2 from '../../geometry/Rect2';
 import { Point2, Vec2 } from '../../geometry/Vec2';
-import { svgAttributesDataKey, SVGLoaderUnknownAttribute } from '../../SVGLoader';
+import { svgAttributesDataKey, SVGLoaderUnknownAttribute, SVGLoaderUnknownStyleAttribute, svgStyleAttributesDataKey } from '../../SVGLoader';
 import Viewport from '../../Viewport';
 import AbstractRenderer, { RenderingStyle } from './AbstractRenderer';
 
@@ -107,6 +109,32 @@ export default class SVGRenderer extends AbstractRenderer {
 		this.objectElems?.push(pathElem);
 	}
 
+	public drawText(text: string, transform: Mat33, style: TextStyle): void {
+		transform = this.getCanvasToScreenTransform().rightMul(transform);
+
+		const textElem = document.createElementNS(svgNameSpace, 'text');
+		textElem.appendChild(document.createTextNode(text));
+		textElem.style.transform = `matrix(
+			${transform.a1}, ${transform.b1},
+			${transform.a2}, ${transform.b2},
+			${transform.a3}, ${transform.b3}
+		)`;
+		textElem.style.fontFamily = style.fontFamily;
+		textElem.style.fontVariant = style.fontVariant ?? '';
+		textElem.style.fontWeight = style.fontWeight ?? '';
+		textElem.style.fontSize = style.size + 'px';
+		textElem.style.fill = style.renderingStyle.fill.toHexString();
+
+		if (style.renderingStyle.stroke) {
+			const strokeStyle = style.renderingStyle.stroke;
+			textElem.style.stroke = strokeStyle.color.toHexString();
+			textElem.style.strokeWidth = strokeStyle.width + 'px';
+		}
+
+		this.elem.appendChild(textElem);
+		this.objectElems?.push(textElem);
+	}
+
 	public startObject(boundingBox: Rect2) {
 		super.startObject(boundingBox);
 
@@ -127,12 +155,19 @@ export default class SVGRenderer extends AbstractRenderer {
 			// Restore any attributes unsupported by the app.
 			for (const elem of this.objectElems ?? []) {
 				const attrs = loaderData[svgAttributesDataKey] as SVGLoaderUnknownAttribute[]|undefined;
+				const styleAttrs = loaderData[svgStyleAttributesDataKey] as SVGLoaderUnknownStyleAttribute[]|undefined;
 
 				if (attrs) {
 					for (const [ attr, value ] of attrs) {
 						elem.setAttribute(attr, value);
 					}
 				}
+
+				if (styleAttrs) {
+					for (const attr of styleAttrs) {
+						elem.style.setProperty(attr.key, attr.value, attr.priority);
+					}
+				}
 			}
 		}
 	}

package/src/testing/loadExpectExtensions.ts

@@ -15,10 +15,7 @@ export const loadExpectExtensions = () => {
 			return {
 				pass,
 				message: () => {
-					if (pass) {
-						return `Expected ${expected} not to .eq ${actual}. Options(${eqArgs})`;
-					}
-					return `Expected ${expected} to .eq ${actual}. Options(${eqArgs})`;
+					return `Expected ${pass ? '!' : ''}(${actual}).eq(${expected}). Options(${eqArgs})`;
 				},
 			};
 		},

package/src/toolbar/HTMLToolbar.ts

@@ -15,10 +15,11 @@ import { makeLineBuilder } from '../components/builders/LineBuilder';
 import { makeFilledRectangleBuilder, makeOutlinedRectangleBuilder } from '../components/builders/RectangleBuilder';
 import { defaultToolbarLocalization, ToolbarLocalization } from './localization';
 import { ActionButtonIcon } from './types';
-import { makeDropdownIcon, makeEraserIcon, makeIconFromFactory, makePenIcon, makeRedoIcon, makeSelectionIcon, makeHandToolIcon, makeUndoIcon } from './icons';
+import { makeDropdownIcon, makeEraserIcon, makeIconFromFactory, makePenIcon, makeRedoIcon, makeSelectionIcon, makeHandToolIcon, makeUndoIcon, makeTextIcon } from './icons';
 import PanZoom, { PanZoomMode } from '../tools/PanZoom';
 import Mat33 from '../geometry/Mat33';
 import Viewport from '../Viewport';
+import TextTool from '../tools/TextTool';
 
 
 const toolbarCSSPrefix = 'toolbar-';
@@ -403,6 +404,60 @@ class HandToolWidget extends ToolbarWidget {
 	}
 }
 
+class TextToolWidget extends ToolbarWidget {
+	private updateDropdownInputs: (()=>void)|null = null;
+	public constructor(editor: Editor, private tool: TextTool, localization: ToolbarLocalization) {
+		super(editor, tool, localization);
+
+		editor.notifier.on(EditorEventType.ToolUpdated, evt => {
+			if (evt.kind === EditorEventType.ToolUpdated && evt.tool === tool) {
+				this.updateIcon();
+				this.updateDropdownInputs?.();
+			}
+		});
+	}
+
+	protected getTitle(): string {
+		return this.targetTool.description;
+	}
+
+	protected createIcon(): Element {
+		const textStyle = this.tool.getTextStyle();
+		return makeTextIcon(textStyle);
+	}
+
+	private static idCounter: number = 0;
+	protected fillDropdown(dropdown: HTMLElement): boolean {
+		const colorRow = document.createElement('div');
+		const colorInput = document.createElement('input');
+		const colorLabel = document.createElement('label');
+
+		colorLabel.innerText = this.localizationTable.colorLabel;
+
+		colorInput.classList.add('coloris_input');
+		colorInput.type = 'button';
+		colorInput.id = `${toolbarCSSPrefix}-text-color-input-${TextToolWidget.idCounter++}`;
+		colorLabel.setAttribute('for', colorInput.id);
+
+		colorInput.oninput = () => {
+			this.tool.setColor(Color4.fromString(colorInput.value));
+		};
+
+		colorRow.appendChild(colorLabel);
+		colorRow.appendChild(colorInput);
+
+		this.updateDropdownInputs = () => {
+			const style = this.tool.getTextStyle();
+			colorInput.value = style.renderingStyle.fill.toHexString();
+		};
+		this.updateDropdownInputs();
+
+		dropdown.appendChild(colorRow);
+
+		return true;
+	}
+}
+
 class PenWidget extends ToolbarWidget {
 	private updateInputs: ()=> void = () => {};
 
@@ -702,6 +757,14 @@ export default class HTMLToolbar {
 			(new SelectionWidget(this.editor, tool, this.localizationTable)).addTo(this.container);
 		}
 
+		for (const tool of toolController.getMatchingTools(ToolType.Text)) {
+			if (!(tool instanceof TextTool)) {
+				throw new Error('All text tools must have kind === ToolType.Text');
+			}
+	
+			(new TextToolWidget(this.editor, tool, this.localizationTable)).addTo(this.container);
+		}
+
 		for (const tool of toolController.getMatchingTools(ToolType.PanZoom)) {
 			if (!(tool instanceof PanZoom)) {
 				throw new Error('All SelectionTools must have kind === ToolType.PanZoom');

package/src/toolbar/icons.ts

@@ -1,4 +1,5 @@
 import { ComponentBuilderFactory } from '../components/builders/types';
+import { TextStyle } from '../components/Text';
 import EventDispatcher from '../EventDispatcher';
 import { Vec2 } from '../geometry/Vec2';
 import SVGRenderer from '../rendering/renderers/SVGRenderer';
@@ -126,6 +127,28 @@ export const makeHandToolIcon = () => {
 	return icon;
 };
 
+export const makeTextIcon = (textStyle: TextStyle) => {
+	const icon = document.createElementNS(svgNamespace, 'svg');
+	icon.setAttribute('viewBox', '0 0 100 100');
+
+	const textNode = document.createElementNS(svgNamespace, 'text');
+	textNode.appendChild(document.createTextNode('T'));
+
+	textNode.style.fontFamily = textStyle.fontFamily;
+	textNode.style.fontWeight = textStyle.fontWeight ?? '';
+	textNode.style.fontVariant = textStyle.fontVariant ?? '';
+	textNode.style.fill = textStyle.renderingStyle.fill.toHexString();
+
+	textNode.style.textAnchor = 'middle';
+	textNode.setAttribute('x', '50');
+	textNode.setAttribute('y', '75');
+	textNode.style.fontSize = '65px';
+
+	icon.appendChild(textNode);
+
+	return icon;
+};
+
 export const makePenIcon = (tipThickness: number, color: string) => {
 	const icon = document.createElementNS(svgNamespace, 'svg');
 	icon.setAttribute('viewBox', '0 0 100 100');

package/src/tools/SelectionTool.ts

@@ -494,7 +494,7 @@ export default class SelectionTool extends BaseTool {
 			);
 
 			const selectionRect = this.selectionBox.region;
-			this.editor.viewport.zoomTo(selectionRect).apply(this.editor);
+			this.editor.viewport.zoomTo(selectionRect, false).apply(this.editor);
 		}
 	}
 

package/src/tools/TextTool.ts

@@ -0,0 +1,206 @@
+import Color4 from '../Color4';
+import Text, { TextStyle } from '../components/Text';
+import Editor from '../Editor';
+import EditorImage from '../EditorImage';
+import Mat33 from '../geometry/Mat33';
+import { Vec2 } from '../geometry/Vec2';
+import { PointerDevice } from '../Pointer';
+import { EditorEventType, PointerEvt } from '../types';
+import BaseTool from './BaseTool';
+import { ToolLocalization } from './localization';
+import { ToolType } from './ToolController';
+
+const overlayCssClass = 'textEditorOverlay';
+export default class TextTool extends BaseTool {
+	public kind: ToolType = ToolType.Text;
+	private textStyle: TextStyle;
+
+	private textEditOverlay: HTMLElement;
+	private textInputElem: HTMLInputElement|null = null;
+	private textTargetPosition: Vec2|null = null;
+	private textMeasuringCtx: CanvasRenderingContext2D|null = null;
+
+	public constructor(private editor: Editor, description: string, private localizationTable: ToolLocalization) {
+		super(editor.notifier, description);
+		this.textStyle = {
+			size: 32,
+			fontFamily: 'sans-serif',
+			renderingStyle: {
+				fill: Color4.purple,
+			},
+		};
+
+		this.textEditOverlay = document.createElement('div');
+		this.textEditOverlay.classList.add(overlayCssClass);
+		this.editor.addStyleSheet(`
+			.${overlayCssClass} {
+				height: 0;
+				overflow: visible;
+			}
+
+			.${overlayCssClass} input {
+				background-color: rgba(0, 0, 0, 0);
+				border: none;
+				padding: 0;
+			}
+		`);
+		this.editor.createHTMLOverlay(this.textEditOverlay);
+		this.editor.notifier.on(EditorEventType.ViewportChanged, () => this.updateTextInput());
+	}
+
+	private getTextAscent(text: string, style: TextStyle): number {
+		this.textMeasuringCtx ??= document.createElement('canvas').getContext('2d');
+		if (this.textMeasuringCtx) {
+			Text.applyTextStyles(this.textMeasuringCtx, style);
+			return this.textMeasuringCtx.measureText(text).actualBoundingBoxAscent;
+		}
+
+		// Estimate
+		return style.size * 2 / 3;
+	}
+
+	private flushInput() {
+		if (this.textInputElem && this.textTargetPosition) {
+			const content = this.textInputElem.value;
+			this.textInputElem.remove();
+			this.textInputElem = null;
+
+			if (content === '') {
+				return;
+			}
+
+			const textTransform = Mat33.translation(
+				this.textTargetPosition
+			).rightMul(
+				Mat33.scaling2D(this.editor.viewport.getSizeOfPixelOnCanvas())
+			);
+			
+			const textComponent = new Text(
+				[ content ],
+				textTransform,
+				this.textStyle,
+			);
+
+			const action = new EditorImage.AddElementCommand(textComponent);
+			this.editor.dispatch(action);
+		}
+	}
+
+	private updateTextInput() {
+		if (!this.textInputElem || !this.textTargetPosition) {
+			this.textInputElem?.remove();
+			return;
+		}
+
+		const textScreenPos = this.editor.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 ?? '';
+		this.textInputElem.style.fontWeight = this.textStyle.fontWeight ?? '';
+		this.textInputElem.style.fontSize = `${this.textStyle.size}px`;
+		this.textInputElem.style.color = this.textStyle.renderingStyle.fill.toHexString();
+
+		this.textInputElem.style.position = 'relative';
+		this.textInputElem.style.left = `${textScreenPos.x}px`;
+		const ascent = this.getTextAscent(this.textInputElem.value || 'W', this.textStyle);
+		this.textInputElem.style.top = `${textScreenPos.y - ascent}px`;
+	}
+
+	private startTextInput(textCanvasPos: Vec2, initialText: string) {
+		this.flushInput();
+
+		this.textInputElem = document.createElement('input');
+		this.textInputElem.value = initialText;
+		this.textTargetPosition = textCanvasPos;
+		this.updateTextInput();
+
+		this.textInputElem.oninput = () => {
+			if (this.textInputElem) {
+				this.textInputElem.size = this.textInputElem?.value.length || 10;
+			}
+		};
+		this.textInputElem.onblur = () => {
+			this.flushInput();
+		};
+		this.textInputElem.onkeyup = (evt) => {
+			if (evt.key === 'Enter') {
+				this.flushInput();
+			}
+		};
+
+		this.textEditOverlay.replaceChildren(this.textInputElem);
+		setTimeout(() => this.textInputElem!.focus(), 100);
+	}
+
+	public setEnabled(enabled: boolean) {
+		super.setEnabled(enabled);
+
+		if (!enabled) {
+			this.flushInput();
+		}
+
+		this.textEditOverlay.style.display = enabled ? 'block' : 'none';
+	}
+
+	public onPointerDown({ current, allPointers }: PointerEvt): boolean {
+		if (current.device === PointerDevice.Eraser) {
+			return false;
+		}
+
+		if (allPointers.length === 1) {
+			this.startTextInput(current.canvasPos, '');
+			return true;
+		}
+
+		return false;
+	}
+
+	private dispatchUpdateEvent() {
+		this.updateTextInput();
+		this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
+			kind: EditorEventType.ToolUpdated,
+			tool: this,
+		});
+	}
+
+	public setFontFamily(fontFamily: string) {
+		if (fontFamily !== this.textStyle.fontFamily) {
+			this.textStyle = {
+				...this.textStyle,
+				fontFamily: fontFamily,
+			};
+
+			this.dispatchUpdateEvent();
+		}
+	}
+
+	public setColor(color: Color4) {
+		if (!color.eq(this.textStyle.renderingStyle.fill)) {
+			this.textStyle = {
+				...this.textStyle,
+				renderingStyle: {
+					...this.textStyle.renderingStyle,
+					fill: color,
+				},
+			};
+
+			this.dispatchUpdateEvent();
+		}
+	}
+
+	public setFontSize(size: number) {
+		if (size !== this.textStyle.size) {
+			this.textStyle = {
+				...this.textStyle,
+				size,
+			};
+
+			this.dispatchUpdateEvent();
+		}
+	}
+
+	public getTextStyle(): TextStyle {
+		return this.textStyle;
+	}
+}

package/src/tools/ToolController.ts

@@ -9,12 +9,14 @@ import SelectionTool from './SelectionTool';
 import Color4 from '../Color4';
 import { ToolLocalization } from './localization';
 import UndoRedoShortcut from './UndoRedoShortcut';
+import TextTool from './TextTool';
 
 export enum ToolType {
 	Pen,
 	Selection,
 	Eraser,
 	PanZoom,
+	Text,
 	UndoRedoShortcut,
 }
 
@@ -36,6 +38,8 @@ export default class ToolController {
 
 			// Highlighter-like pen with width=64
 			new Pen(editor, localization.penTool(3), { color: Color4.ofRGBA(1, 1, 0, 0.5), thickness: 64 }),
+
+			new TextTool(editor, localization.textTool, localization),
 		];
 		this.tools = [
 			panZoomTool,

package/src/tools/localization.ts

@@ -1,12 +1,14 @@
 
 export interface ToolLocalization {
-	RightClickDragPanTool: string;
+	rightClickDragPanTool: string;
     penTool: (penId: number)=>string;
     selectionTool: string;
     eraserTool: string;
     touchPanTool: string;
     twoFingerPanZoomTool: string;
     undoRedoTool: string;
+	textTool: string;
+	enterTextToInsert: string;
 
     toolEnabledAnnouncement: (toolName: string) => string;
     toolDisabledAnnouncement: (toolName: string) => string;
@@ -19,7 +21,10 @@ export const defaultToolLocalization: ToolLocalization = {
 	touchPanTool: 'Touch Panning',
 	twoFingerPanZoomTool: 'Panning and Zooming',
 	undoRedoTool: 'Undo/Redo',
-	RightClickDragPanTool: 'Right-click drag',
+	rightClickDragPanTool: 'Right-click drag',
+
+	textTool: 'Text',
+	enterTextToInsert: 'Text to insert',
 
 	toolEnabledAnnouncement: (toolName) => `${toolName} enabled`,
 	toolDisabledAnnouncement: (toolName) => `${toolName} disabled`,