js-draw 0.1.3 → 0.1.6

package/src/components/Text.ts

@@ -23,12 +23,16 @@ export default class Text extends AbstractComponent {
 	}
 
 	public static applyTextStyles(ctx: CanvasRenderingContext2D, style: TextStyle) {
+		// Quote the font family if necessary.
+		const fontFamily = style.fontFamily.match(/\s/) ? style.fontFamily.replace(/["]/g, '\\"') : style.fontFamily;
+
 		ctx.font =	[
 			(style.size ?? 12) + 'px',
 			style.fontWeight ?? '',
-			`"${style.fontFamily.replace(/["]/g, '\\"')}"`,
+			`${fontFamily}`,
 			style.fontWeight
 		].join(' ');
+
 		ctx.textAlign = 'left';
 	}
 

package/src/localization.ts

@@ -1,10 +1,11 @@
 import { CommandLocalization, defaultCommandLocalization } from './commands/localization';
 import { defaultComponentLocalization, ImageComponentLocalization } from './components/localization';
+import { defaultTextRendererLocalization, TextRendererLocalization } from './rendering/localization';
 import { defaultToolbarLocalization, ToolbarLocalization } from './toolbar/localization';
 import { defaultToolLocalization, ToolLocalization } from './tools/localization';
 
 
-export interface EditorLocalization extends ToolbarLocalization, ToolLocalization, CommandLocalization, ImageComponentLocalization {
+export interface EditorLocalization extends ToolbarLocalization, ToolLocalization, CommandLocalization, ImageComponentLocalization, TextRendererLocalization {
 	undoAnnouncement: (actionDescription: string)=> string;
 	redoAnnouncement: (actionDescription: string)=> string;
 	doneLoading: string;
@@ -17,6 +18,7 @@ export const defaultEditorLocalization: EditorLocalization = {
 	...defaultToolLocalization,
 	...defaultCommandLocalization,
 	...defaultComponentLocalization,
+	...defaultTextRendererLocalization,
 	loading: (percentage: number) => `Loading ${percentage}%...`,
 	imageEditor: 'Image Editor',
 	doneLoading: 'Done loading',

package/src/rendering/Display.ts

@@ -5,6 +5,7 @@ import { EditorEventType } from '../types';
 import DummyRenderer from './renderers/DummyRenderer';
 import { Vec2 } from '../geometry/Vec2';
 import RenderingCache from './caching/RenderingCache';
+import TextOnlyRenderer from './renderers/TextOnlyRenderer';
 
 export enum RenderingMode {
 	DummyRenderer,
@@ -15,6 +16,7 @@ export enum RenderingMode {
 export default class Display {
 	private dryInkRenderer: AbstractRenderer;
 	private wetInkRenderer: AbstractRenderer;
+	private textRenderer: TextOnlyRenderer;
 	private cache: RenderingCache;
 	private resizeSurfacesCallback?: ()=> void;
 	private flattenCallback?: ()=> void;
@@ -31,6 +33,9 @@ export default class Display {
 			throw new Error(`Unknown rendering mode, ${mode}!`);
 		}
 
+		this.textRenderer = new TextOnlyRenderer(editor.viewport, editor.localization);
+		this.initializeTextRendering();
+
 		const cacheBlockResolution = Vec2.of(600, 600);
 		this.cache = new RenderingCache({
 			createRenderer: () => {
@@ -129,6 +134,27 @@ export default class Display {
 		};
 	}
 
+	private initializeTextRendering() {
+		const textRendererOutputContainer = document.createElement('div');
+		textRendererOutputContainer.classList.add('textRendererOutputContainer');
+
+		const rerenderButton = document.createElement('button');
+		rerenderButton.classList.add('rerenderButton');
+		rerenderButton.innerText = this.editor.localization.rerenderAsText;
+
+		const rerenderOutput = document.createElement('div');
+		rerenderOutput.ariaLive = 'polite';
+
+		rerenderButton.onclick = () => {
+			this.textRenderer.clear();
+			this.editor.image.render(this.textRenderer, this.editor.viewport);
+			rerenderOutput.innerText = this.textRenderer.getDescription();
+		};
+
+		textRendererOutputContainer.replaceChildren(rerenderButton, rerenderOutput);
+		this.editor.createHTMLOverlay(textRendererOutputContainer);
+	}
+
 	// Clears the drawing surfaces and otherwise prepares for a rerender.
 	public startRerender(): AbstractRenderer {
 		this.resizeSurfacesCallback?.();

package/src/rendering/localization.ts

@@ -0,0 +1,10 @@
+
+export interface TextRendererLocalization {
+    textNode(content: string): string;
+    rerenderAsText: string;
+}
+
+export const defaultTextRendererLocalization: TextRendererLocalization = {
+	textNode: (content: string) => `Text: ${content}`,
+	rerenderAsText: 'Re-render as text',
+};

package/src/rendering/renderers/TextOnlyRenderer.ts

@@ -0,0 +1,51 @@
+import { TextStyle } from '../../components/Text';
+import Mat33 from '../../geometry/Mat33';
+import Rect2 from '../../geometry/Rect2';
+import { Vec2 } from '../../geometry/Vec2';
+import Vec3 from '../../geometry/Vec3';
+import Viewport from '../../Viewport';
+import { TextRendererLocalization } from '../localization';
+import AbstractRenderer, { RenderingStyle } from './AbstractRenderer';
+
+// Outputs a description of what was rendered.
+
+export default class TextOnlyRenderer extends AbstractRenderer {
+	private descriptionBuilder: string[] = [];
+	public constructor(viewport: Viewport, private localizationTable: TextRendererLocalization) {
+		super(viewport);
+	}
+
+	public displaySize(): Vec3 {
+		// We don't have a graphical display, export a reasonable size.
+		return Vec2.of(500, 500);
+	}
+
+	public clear(): void {
+		this.descriptionBuilder = [];
+	}
+
+	public getDescription(): string {
+		return this.descriptionBuilder.join('\n');
+	}
+
+	protected beginPath(_startPoint: Vec3): void {
+	}
+	protected endPath(_style: RenderingStyle): void {
+	}
+	protected lineTo(_point: Vec3): void {
+	}
+	protected moveTo(_point: Vec3): void {
+	}
+	protected traceCubicBezierCurve(_p1: Vec3, _p2: Vec3, _p3: Vec3): void {
+	}
+	protected traceQuadraticBezierCurve(_controlPoint: Vec3, _endPoint: Vec3): void {
+	}
+	public drawText(text: string, _transform: Mat33, _style: TextStyle): void {
+		this.descriptionBuilder.push(this.localizationTable.textNode(text));
+	}
+	public isTooSmallToRender(rect: Rect2): boolean {
+		return rect.maxDimension < 10 / this.getSizeOfCanvasPixelOnScreen();
+	}
+	public drawPoints(..._points: Vec3[]): void {
+	}
+}

package/src/toolbar/HTMLToolbar.ts

@@ -428,10 +428,25 @@ class TextToolWidget extends ToolbarWidget {
 
 	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');
@@ -439,6 +454,16 @@ class TextToolWidget extends ToolbarWidget {
 		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));
 		};
@@ -446,14 +471,21 @@ class TextToolWidget extends ToolbarWidget {
 		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.appendChild(colorRow);
-
+		dropdown.replaceChildren(colorRow, fontRow);
 		return true;
 	}
 }

package/src/toolbar/icons.ts

@@ -143,6 +143,7 @@ export const makeTextIcon = (textStyle: TextStyle) => {
 	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);
 

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: 2;
+
     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/TextTool.ts

@@ -19,6 +19,7 @@ export default class TextTool extends BaseTool {
 	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);
@@ -73,6 +74,8 @@ export default class TextTool extends BaseTool {
 				this.textTargetPosition
 			).rightMul(
 				Mat33.scaling2D(this.editor.viewport.getSizeOfPixelOnCanvas())
+			).rightMul(
+				Mat33.zRotation(this.textRotation)
 			);
 			
 			const textComponent = new Text(
@@ -92,7 +95,8 @@ export default class TextTool extends BaseTool {
 			return;
 		}
 
-		const textScreenPos = this.editor.viewport.canvasToScreen(this.textTargetPosition);
+		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;
@@ -103,8 +107,13 @@ export default class TextTool extends BaseTool {
 
 		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.top = `${textScreenPos.y - ascent}px`;
+		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) {
@@ -113,6 +122,7 @@ export default class TextTool extends BaseTool {
 		this.textInputElem = document.createElement('input');
 		this.textInputElem.value = initialText;
 		this.textTargetPosition = textCanvasPos;
+		this.textRotation = -this.editor.viewport.getRotationAngle();
 		this.updateTextInput();
 
 		this.textInputElem.oninput = () => {
@@ -121,16 +131,24 @@ export default class TextTool extends BaseTool {
 			}
 		};
 		this.textInputElem.onblur = () => {
-			this.flushInput();
+			// 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(), 100);
+		setTimeout(() => this.textInputElem?.focus(), 0);
 	}
 
 	public setEnabled(enabled: boolean) {
@@ -156,6 +174,11 @@ export default class TextTool extends BaseTool {
 		return false;
 	}
 
+	public onGestureCancel(): void {
+		this.flushInput();
+		this.editor.focus();
+	}
+
 	private dispatchUpdateEvent() {
 		this.updateTextInput();
 		this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {