js-draw 0.1.2 → 0.1.5

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,92 @@ 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 fontRow = document.createElement('div');
+		const colorRow = document.createElement('div');
+
+		const fontInput = document.createElement('select');
+		const fontLabel = document.createElement('label');
+
+		const colorInput = document.createElement('input');
+		const colorLabel = document.createElement('label');
+
+		const fontsInInput = new Set();
+		const addFontToInput = (fontName: string) => {
+			const option = document.createElement('option');
+			option.value = fontName;
+			option.textContent = fontName;
+			fontInput.appendChild(option);
+			fontsInInput.add(fontName);
+		};
+
+		fontLabel.innerText = this.localizationTable.fontLabel;
+		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);
+
+		addFontToInput('monospace');
+		addFontToInput('serif');
+		addFontToInput('sans-serif');
+		fontInput.id = `${toolbarCSSPrefix}-text-font-input-${TextToolWidget.idCounter++}`;
+		fontLabel.setAttribute('for', fontInput.id);
+
+		fontInput.onchange = () => {
+			this.tool.setFontFamily(fontInput.value);
+		};
+
+		colorInput.oninput = () => {
+			this.tool.setColor(Color4.fromString(colorInput.value));
+		};
+
+		colorRow.appendChild(colorLabel);
+		colorRow.appendChild(colorInput);
+
+		fontRow.appendChild(fontLabel);
+		fontRow.appendChild(fontInput);
+
+		this.updateDropdownInputs = () => {
+			const style = this.tool.getTextStyle();
+			colorInput.value = style.renderingStyle.fill.toHexString();
+
+			if (!fontsInInput.has(style.fontFamily)) {
+				addFontToInput(style.fontFamily);
+			}
+			fontInput.value = style.fontFamily;
+		};
+		this.updateDropdownInputs();
+
+		dropdown.replaceChildren(colorRow, fontRow);
+		return true;
+	}
+}
+
 class PenWidget extends ToolbarWidget {
 	private updateInputs: ()=> void = () => {};
 
@@ -702,6 +789,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,29 @@ 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';
+	textNode.style.filter = 'drop-shadow(0px 0px 10px var(--primary-shadow-color))';
+
+	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/toolbar/localization.ts

@@ -1,6 +1,7 @@
 
 
 export interface ToolbarLocalization {
+	fontLabel: string;
 	anyDevicePanning: string;
 	touchPanning: string;
 	outlinedRectanglePen: string;
@@ -32,6 +33,7 @@ export const defaultToolbarLocalization: ToolbarLocalization = {
 	handTool: 'Pan',
 	thicknessLabel: 'Thickness: ',
 	colorLabel: 'Color: ',
+	fontLabel: 'Font: ',
 	resizeImageToSelection: 'Resize image to selection',
 	deleteSelection: 'Delete selection',
 	undo: 'Undo',

package/src/toolbar/toolbar.css

@@ -12,6 +12,9 @@
     flex-direction: row;
     justify-content: center;
 
+    /* Display above selection dialogs, etc. */
+    z-index: 1000;
+
     font-family: system-ui, -apple-system, sans-serif;
 }
 
@@ -41,13 +44,13 @@
     background-color: var(--primary-background-color);
     color: var(--primary-foreground-color);
     border: none;
-    box-shadow: 0px 0px 2px var(--primary-foreground-color);
+    box-shadow: 0px 0px 2px var(--primary-shadow-color);
 
     transition: background-color 0.25s ease, box-shadow 0.25s ease, opacity 0.3s ease;
 }
 
 .toolbar-button:hover, .toolbar-root button:not(:disabled):hover {
-    box-shadow: 0px 2px 4px var(--primary-foreground-color);
+    box-shadow: 0px 2px 4px var(--primary-shadow-color);
 }
 
 .toolbar-root button:disabled {
@@ -90,7 +93,7 @@
     /* Prevent overlap/being displayed under the undo/redo buttons */
     z-index: 2;
     background-color: var(--primary-background-color);
-    box-shadow: 0px 3px 3px var(--primary-foreground-color);
+    box-shadow: 0px 3px 3px var(--primary-shadow-color);
 }
 
 .toolbar-buttonGroup {

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,229 @@
+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;
+	private textRotation: number;
+
+	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())
+			).rightMul(
+				Mat33.zRotation(this.textRotation)
+			);
+			
+			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 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 ?? '';
+		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`;
+		this.textInputElem.style.top = `${textScreenPos.y}px`;
+		this.textInputElem.style.margin = '0';
+
+		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)`;
+		this.textInputElem.style.transformOrigin = 'top left';
+	}
+
+	private startTextInput(textCanvasPos: Vec2, initialText: string) {
+		this.flushInput();
+
+		this.textInputElem = document.createElement('input');
+		this.textInputElem.value = initialText;
+		this.textTargetPosition = textCanvasPos;
+		this.textRotation = -this.editor.viewport.getRotationAngle();
+		this.updateTextInput();
+
+		this.textInputElem.oninput = () => {
+			if (this.textInputElem) {
+				this.textInputElem.size = this.textInputElem?.value.length || 10;
+			}
+		};
+		this.textInputElem.onblur = () => {
+			// Don't remove the input within the context of a blur event handler.
+			// Doing so causes errors.
+			setTimeout(() => this.flushInput(), 0);
+		};
+		this.textInputElem.onkeyup = (evt) => {
+			if (evt.key === 'Enter') {
+				this.flushInput();
+				this.editor.focus();
+			} else if (evt.key === 'Escape') {
+				// Cancel input.
+				this.textInputElem?.remove();
+				this.textInputElem = null;
+				this.editor.focus();
+			}
+		};
+
+		this.textEditOverlay.replaceChildren(this.textInputElem);
+		setTimeout(() => this.textInputElem?.focus(), 0);
+	}
+
+	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;
+	}
+
+	public onGestureCancel(): void {
+		this.flushInput();
+		this.editor.focus();
+	}
+
+	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`,