js-draw 0.1.1 → 0.1.4

package/src/tools/TextTool.ts

@@ -0,0 +1,225 @@
+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 viewport = this.editor.viewport;
+		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`;
+		this.textInputElem.style.top = `${textScreenPos.y}px`;
+		this.textInputElem.style.margin = '0';
+
+		const rotation = 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.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,13 +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 {
-	TouchPanZoom,
 	Pen,
 	Selection,
 	Eraser,
 	PanZoom,
+	Text,
 	UndoRedoShortcut,
 }
 
@@ -25,7 +26,7 @@ export default class ToolController {
 
 	public constructor(editor: Editor, localization: ToolLocalization) {
 		const primaryToolEnabledGroup = new ToolEnabledGroup();
-		const touchPanZoom = new PanZoom(editor, PanZoomMode.OneFingerGestures, localization.touchPanTool);
+		const panZoomTool = new PanZoom(editor, PanZoomMode.TwoFingerTouchGestures | PanZoomMode.RightClickDrags, localization.touchPanTool);
 		const primaryPenTool = new Pen(editor, localization.penTool(1), { color: Color4.purple, thickness: 16 });
 		const primaryTools = [
 			new SelectionTool(editor, localization.selectionTool),
@@ -37,15 +38,16 @@ 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 = [
-			touchPanZoom,
+			panZoomTool,
 			...primaryTools,
-			new PanZoom(editor, PanZoomMode.TwoFingerGestures | PanZoomMode.AnyDevice, localization.twoFingerPanZoomTool),
 			new UndoRedoShortcut(editor),
 		];
 		primaryTools.forEach(tool => tool.setToolGroup(primaryToolEnabledGroup));
-		touchPanZoom.setEnabled(false);
+		panZoomTool.setEnabled(true);
 		primaryPenTool.setEnabled(true);
 
 		editor.notifier.on(EditorEventType.ToolEnabled, event => {

package/src/tools/localization.ts

@@ -1,11 +1,14 @@
 
 export interface ToolLocalization {
+	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;
@@ -18,6 +21,10 @@ export const defaultToolLocalization: ToolLocalization = {
 	touchPanTool: 'Touch Panning',
 	twoFingerPanZoomTool: 'Panning and Zooming',
 	undoRedoTool: 'Undo/Redo',
+	rightClickDragPanTool: 'Right-click drag',
+
+	textTool: 'Text',
+	enterTextToInsert: 'Text to insert',
 
 	toolEnabledAnnouncement: (toolName) => `${toolName} enabled`,
 	toolDisabledAnnouncement: (toolName) => `${toolName} disabled`,