js-draw 0.9.1 → 0.9.3

package/src/components/builders/FreehandLineBuilder.ts

@@ -55,7 +55,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 			fill: Color4.transparent,
 			stroke: {
 				color: this.startPoint.color,
-				width: this.averageWidth,
+				width: this.roundDistance(this.averageWidth),
 			}
 		};
 	}
@@ -107,16 +107,26 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		return this.previewStroke()!;
 	}
 
-	private roundPoint(point: Point2): Point2 {
+	private getMinFit(): number {
 		let minFit = Math.min(this.minFitAllowed, this.averageWidth / 2);
 
 		if (minFit < 1e-10) {
 			minFit = this.minFitAllowed;
 		}
+		
+		return minFit;
+	}
 
+	private roundPoint(point: Point2): Point2 {
+		const minFit = this.getMinFit();
 		return Viewport.roundPoint(point, minFit);
 	}
 
+	private roundDistance(dist: number): number {
+		const minFit = this.getMinFit();
+		return Viewport.roundPoint(dist, minFit);
+	}
+
 	private curveToPathCommands(curve: Curve|null): PathCommand[] {
 		// Case where no points have been added
 		if (!curve) {

package/src/components/lib.ts

@@ -6,7 +6,7 @@ export { default as StrokeSmoother, Curve as StrokeSmootherCurve } from './util/
 export * from './AbstractComponent';
 export { default as AbstractComponent } from './AbstractComponent';
 import Stroke from './Stroke';
-import TextComponent from './Text';
+import TextComponent from './TextComponent';
 import ImageComponent from './ImageComponent';
 
 export {

package/src/rendering/renderers/AbstractRenderer.ts

@@ -1,5 +1,5 @@
 import { LoadSaveDataTable } from '../../components/AbstractComponent';
-import { TextStyle } from '../../components/Text';
+import { TextStyle } from '../../components/TextComponent';
 import Mat33 from '../../math/Mat33';
 import Path, { PathCommand, PathCommandType } from '../../math/Path';
 import Rect2 from '../../math/Rect2';

package/src/rendering/renderers/CanvasRenderer.ts

@@ -1,5 +1,5 @@
 import Color4 from '../../Color4';
-import TextComponent, { TextStyle } from '../../components/Text';
+import TextComponent, { TextStyle } from '../../components/TextComponent';
 import Mat33 from '../../math/Mat33';
 import Rect2 from '../../math/Rect2';
 import { Point2, Vec2 } from '../../math/Vec2';

package/src/rendering/renderers/DummyRenderer.ts

@@ -1,6 +1,6 @@
 // Renderer that outputs nothing. Useful for automated tests.
 
-import { TextStyle } from '../../components/Text';
+import { TextStyle } from '../../components/TextComponent';
 import Mat33 from '../../math/Mat33';
 import Rect2 from '../../math/Rect2';
 import { Point2, Vec2 } from '../../math/Vec2';

package/src/rendering/renderers/SVGRenderer.ts

@@ -1,6 +1,6 @@
 
 import { LoadSaveDataTable } from '../../components/AbstractComponent';
-import { TextStyle } from '../../components/Text';
+import { TextStyle } from '../../components/TextComponent';
 import Mat33 from '../../math/Mat33';
 import Path from '../../math/Path';
 import Rect2 from '../../math/Rect2';
@@ -102,7 +102,7 @@ export default class SVGRenderer extends AbstractRenderer {
 
 		if (style.stroke) {
 			pathElem.setAttribute('stroke', style.stroke.color.toHexString());
-			pathElem.setAttribute('stroke-width', style.stroke.width.toString());
+			pathElem.setAttribute('stroke-width', toRoundedString(style.stroke.width));
 		}
 
 		this.elem.appendChild(pathElem);

package/src/rendering/renderers/TextOnlyRenderer.ts

@@ -1,4 +1,4 @@
-import { TextStyle } from '../../components/Text';
+import { TextStyle } from '../../components/TextComponent';
 import Mat33 from '../../math/Mat33';
 import Rect2 from '../../math/Rect2';
 import { Vec2 } from '../../math/Vec2';
@@ -34,8 +34,8 @@ export default class TextOnlyRenderer extends AbstractRenderer {
 	public getDescription(): string {
 		return [
 			this.localizationTable.pathNodeCount(this.pathCount),
-			...(this.textNodeCount > 0 ? this.localizationTable.textNodeCount(this.textNodeCount) : []),
-			...(this.imageNodeCount > 0 ? this.localizationTable.imageNodeCount(this.imageNodeCount) : []),
+			...(this.textNodeCount > 0 ? [this.localizationTable.textNodeCount(this.textNodeCount)] : []),
+			...(this.imageNodeCount > 0 ? [this.localizationTable.imageNodeCount(this.imageNodeCount)] : []),
 			...this.descriptionBuilder
 		].join('\n');
 	}

package/src/toolbar/IconProvider.ts

@@ -1,6 +1,6 @@
 import Color4 from '../Color4';
 import { ComponentBuilderFactory } from '../components/builders/types';
-import { TextStyle } from '../components/Text';
+import { TextStyle } from '../components/TextComponent';
 import EventDispatcher from '../EventDispatcher';
 import { Vec2 } from '../math/Vec2';
 import SVGRenderer from '../rendering/renderers/SVGRenderer';

package/src/toolbar/localization.ts

@@ -2,6 +2,7 @@
 
 export interface ToolbarLocalization {
 	fontLabel: string;
+	textSize: string;
 	touchPanning: string;
 	lockRotation: string;
 	outlinedRectanglePen: string;
@@ -44,6 +45,7 @@ export const defaultToolbarLocalization: ToolbarLocalization = {
 	thicknessLabel: 'Thickness: ',
 	colorLabel: 'Color: ',
 	fontLabel: 'Font: ',
+	textSize: 'Size: ',
 	resizeImageToSelection: 'Resize image to selection',
 	deleteSelection: 'Delete selection',
 	duplicateSelection: 'Duplicate selection',

package/src/toolbar/widgets/TextToolWidget.ts

@@ -34,10 +34,14 @@ export default class TextToolWidget extends BaseToolWidget {
 	protected fillDropdown(dropdown: HTMLElement): boolean {
 		const fontRow = document.createElement('div');
 		const colorRow = document.createElement('div');
+		const sizeRow = document.createElement('div');
 
 		const fontInput = document.createElement('select');
 		const fontLabel = document.createElement('label');
 
+		const sizeInput = document.createElement('input');
+		const sizeLabel = document.createElement('label');
+
 		const [ colorInput, colorInputContainer, setColorInputValue ] = makeColorInput(this.editor, color => {
 			this.tool.setColor(color);
 		});
@@ -52,12 +56,20 @@ export default class TextToolWidget extends BaseToolWidget {
 			fontsInInput.add(fontName);
 		};
 
+		sizeInput.setAttribute('type', 'number');
+		sizeInput.min = '1';
+		sizeInput.max = '128';
+
 		fontLabel.innerText = this.localizationTable.fontLabel;
 		colorLabel.innerText = this.localizationTable.colorLabel;
+		sizeLabel.innerText = this.localizationTable.textSize;
 
 		colorInput.id = `${toolbarCSSPrefix}-text-color-input-${TextToolWidget.idCounter++}`;
 		colorLabel.setAttribute('for', colorInput.id);
 
+		sizeInput.id = `${toolbarCSSPrefix}-text-size-input-${TextToolWidget.idCounter++}`;
+		sizeLabel.setAttribute('for', sizeInput.id);
+
 		addFontToInput('monospace');
 		addFontToInput('serif');
 		addFontToInput('sans-serif');
@@ -68,12 +80,22 @@ export default class TextToolWidget extends BaseToolWidget {
 			this.tool.setFontFamily(fontInput.value);
 		};
 
+		sizeInput.onchange = () => {
+			const size = parseInt(sizeInput.value);
+			if (!isNaN(size) && size > 0) {
+				this.tool.setFontSize(size);
+			}
+		};
+
 		colorRow.appendChild(colorLabel);
 		colorRow.appendChild(colorInputContainer);
 
 		fontRow.appendChild(fontLabel);
 		fontRow.appendChild(fontInput);
 
+		sizeRow.appendChild(sizeLabel);
+		sizeRow.appendChild(sizeInput);
+
 		this.updateDropdownInputs = () => {
 			const style = this.tool.getTextStyle();
 			setColorInputValue(style.renderingStyle.fill);
@@ -82,10 +104,11 @@ export default class TextToolWidget extends BaseToolWidget {
 				addFontToInput(style.fontFamily);
 			}
 			fontInput.value = style.fontFamily;
+			sizeInput.value = `${style.size}`;
 		};
 		this.updateDropdownInputs();
 
-		dropdown.replaceChildren(colorRow, fontRow);
+		dropdown.replaceChildren(colorRow, sizeRow, fontRow);
 		return true;
 	}
 
@@ -96,6 +119,7 @@ export default class TextToolWidget extends BaseToolWidget {
 			...super.serializeState(),
 
 			fontFamily: textStyle.fontFamily,
+			textSize: textStyle.size,
 			color: textStyle.renderingStyle.fill.toHexString(),
 		};
 	}
@@ -109,6 +133,10 @@ export default class TextToolWidget extends BaseToolWidget {
 			this.tool.setColor(Color4.fromHex(state.color));
 		}
 
+		if (state.textSize && typeof(state.textSize) === 'number') {
+			this.tool.setFontSize(state.textSize);
+		}
+
 		super.deserializeFrom(state);
 	}
 }

package/src/tools/FindTool.css

@@ -0,0 +1,7 @@
+
+.find-tool-overlay {
+    /* Show at the bottom of the screen. */
+    order: -1;
+
+    position: absolute;
+}

package/src/tools/FindTool.ts

@@ -0,0 +1,151 @@
+// Displays a find dialog that allows the user to search for and focus text. 
+//
+// @packageDocumentation
+
+import Editor from '../Editor';
+import TextComponent from '../components/TextComponent';
+import Rect2 from '../math/Rect2';
+import { KeyPressEvent } from '../types';
+import BaseTool from './BaseTool';
+
+export const cssPrefix = 'find-tool';
+
+export default class FindTool extends BaseTool {
+	private overlay: HTMLElement;
+	private searchInput: HTMLInputElement;
+	private currentMatchIdx: number = 0;
+
+	public constructor(private editor: Editor) {
+		super(editor.notifier, editor.localization.findLabel);
+
+		this.overlay = document.createElement('div');
+		this.fillOverlay();
+		editor.createHTMLOverlay(this.overlay);
+
+		this.overlay.style.display = 'none';
+		this.overlay.classList.add(`${cssPrefix}-overlay`);
+	}
+
+	private getMatches(searchFor: string): Rect2[] {
+		searchFor = searchFor.toLocaleLowerCase();
+		const allTextComponents = this.editor.image.getAllElements()
+			.filter(
+				elem => elem instanceof TextComponent
+			) as TextComponent[];
+		
+		const matches = allTextComponents.filter(
+			text => text.getText().toLocaleLowerCase().indexOf(searchFor) !== -1
+		);
+
+		return matches.map(match => match.getBBox());
+	}
+
+	private focusCurrentMatch() {
+		const matches = this.getMatches(this.searchInput.value);
+		let matchIdx = this.currentMatchIdx % matches.length;
+
+		if (matchIdx < 0) {
+			matchIdx = matches.length + matchIdx;
+		}
+
+		if (matchIdx < matches.length) {
+			this.editor.dispatch(this.editor.viewport.zoomTo(matches[matchIdx], true, true));
+			this.editor.announceForAccessibility(
+				this.editor.localization.focusedFoundText(matchIdx + 1, matches.length)
+			);
+		}
+	}
+
+	private toNextMatch() {
+		this.currentMatchIdx ++;
+		this.focusCurrentMatch();
+	}
+
+	private toPrevMatch() {
+		this.currentMatchIdx --;
+		this.focusCurrentMatch();
+	}
+
+	private fillOverlay() {
+		const label = document.createElement('label');
+		this.searchInput = document.createElement('input');
+		const nextBtn = document.createElement('button');
+		const closeBtn = document.createElement('button');
+
+		// Math.random() ensures that the ID is unique (to allow us to refer to it
+		// with an htmlFor).
+		this.searchInput.setAttribute('id', `${cssPrefix}-searchInput-${Math.random()}`);
+		label.htmlFor = this.searchInput.getAttribute('id')!;
+
+		label.innerText = this.editor.localization.findLabel;
+		nextBtn.innerText = this.editor.localization.toNextMatch;
+		closeBtn.innerText = this.editor.localization.closeFindDialog;
+
+		this.searchInput.onkeydown = (ev: KeyboardEvent) => {
+			if (ev.key === 'Enter') {
+				if (ev.shiftKey) {
+					this.toPrevMatch();
+				} else {
+					this.toNextMatch();
+				}
+			}
+			else if (ev.key === 'Escape') {
+				this.setVisible(false);
+			}
+			else if (ev.key === 'f' && ev.ctrlKey) {
+				ev.preventDefault();
+				this.toggleVisible();
+			}
+		};
+
+		nextBtn.onclick = () => {
+			this.toNextMatch();
+		};
+		
+		closeBtn.onclick = () => {
+			this.setVisible(false);
+		};
+
+		this.overlay.replaceChildren(label, this.searchInput, nextBtn, closeBtn);
+	}
+
+	private isVisible() {
+		return this.overlay.style.display !== 'none';
+	}
+
+	private setVisible(visible: boolean) {
+		if (visible !== this.isVisible()) {
+			this.overlay.style.display = visible ? 'block' : 'none';
+
+			if (visible) {
+				this.searchInput.focus();
+				this.editor.announceForAccessibility(this.editor.localization.findDialogShown);
+			} else {
+				this.editor.focus();
+				this.editor.announceForAccessibility(this.editor.localization.findDialogHidden);
+			}
+		}
+	}
+
+	private toggleVisible() {
+		this.setVisible(!this.isVisible());
+	}
+
+	public onKeyPress(event: KeyPressEvent): boolean {
+		if (event.ctrlKey && event.key === 'f') {
+			this.toggleVisible();
+
+			return true;
+		}
+
+		return false;
+	}
+
+	public setEnabled(enabled: boolean) {
+		super.setEnabled(enabled);
+
+		if (enabled) {
+			this.setVisible(false);
+		}
+	}
+}

package/src/tools/PasteHandler.ts

@@ -14,7 +14,7 @@ import EditorImage from '../EditorImage';
 import SelectionTool from './SelectionTool/SelectionTool';
 import TextTool from './TextTool';
 import Color4 from '../Color4';
-import { TextStyle } from '../components/Text';
+import { TextStyle } from '../components/TextComponent';
 import ImageComponent from '../components/ImageComponent';
 import Viewport from '../Viewport';
 

package/src/tools/SelectionTool/Selection.ts

@@ -170,7 +170,7 @@ export default class Selection {
 		});
 
 		const fullTransform = this.transform;
-		const currentTransfmCommands = this.computeTransformCommands();
+		const selectedElems = this.selectedElems;
 
 		// Reset for the next drag
 		this.transformCommands = [];
@@ -179,43 +179,84 @@ export default class Selection {
 
 		// Make the commands undo-able
 		this.editor.dispatch(new Selection.ApplyTransformationCommand(
-			this, currentTransfmCommands, fullTransform
+			this, selectedElems, fullTransform
 		));
 	}
 
 	static {
-		SerializableCommand.register('selection-tool-transform', (json: any, editor) => {
+		SerializableCommand.register('selection-tool-transform', (json: any, _editor) => {
 			// The selection box is lost when serializing/deserializing. No need to store box rotation
 			const fullTransform: Mat33 = new Mat33(...(json.transform as Mat33Array));
-			const commands = (json.commands as any[]).map(data => SerializableCommand.deserialize(data, editor));
+			const elemIds: string[] = (json.elems as any[] ?? []);
 
-			return new this.ApplyTransformationCommand(null, commands, fullTransform);
+			return new this.ApplyTransformationCommand(null, elemIds, fullTransform);
 		});
 	}
 
 	private static ApplyTransformationCommand = class extends SerializableCommand {
+		private transformCommands: Command[];
+		private selectedElemIds: string[];
+
 		public constructor(
 			private selection: Selection|null,
-			private currentTransfmCommands: SerializableCommand[],
+
+			// If a `string[]`, selectedElems is a list of element IDs.
+			selectedElems: AbstractComponent[]|string[],
+
+			// Full transformation used to transform elements.
 			private fullTransform: Mat33,
 		) {
 			super('selection-tool-transform');
+
+			const isIDList = (arr: AbstractComponent[]|string[]): arr is string[] => {
+				return typeof arr[0] === 'string';
+			};
+
+			// If a list of element IDs,
+			if (isIDList(selectedElems)) {
+				this.selectedElemIds = selectedElems as string[];
+			} else {
+				this.selectedElemIds = (selectedElems as AbstractComponent[]).map(elem => elem.getId());
+				this.transformCommands = selectedElems.map(elem => {
+					return elem.transformBy(this.fullTransform);
+				});
+			}
+		}
+
+		private resolveToElems(editor: Editor) {
+			if (this.transformCommands) {
+				return;
+			}
+
+			this.transformCommands = this.selectedElemIds.map(id => {
+				const elem = editor.image.lookupElement(id);
+
+				if (!elem) {
+					throw new Error(`Unable to find element with ID, ${id}.`);
+				}
+				
+				return elem.transformBy(this.fullTransform);
+			});
 		}
 
 		public async apply(editor: Editor) {
+			this.resolveToElems(editor);
+
 			this.selection?.setTransform(this.fullTransform, false);
 			this.selection?.updateUI();
-			await editor.asyncApplyCommands(this.currentTransfmCommands, updateChunkSize);
+			await editor.asyncApplyCommands(this.transformCommands, updateChunkSize);
 			this.selection?.setTransform(Mat33.identity, false);
 			this.selection?.recomputeRegion();
 			this.selection?.updateUI();
 		}
 
 		public async unapply(editor: Editor) {
+			this.resolveToElems(editor);
+
 			this.selection?.setTransform(this.fullTransform.inverse(), false);
 			this.selection?.updateUI();
 
-			await editor.asyncUnapplyCommands(this.currentTransfmCommands, updateChunkSize);
+			await editor.asyncUnapplyCommands(this.transformCommands, updateChunkSize);
 			this.selection?.setTransform(Mat33.identity);
 			this.selection?.recomputeRegion();
 			this.selection?.updateUI();
@@ -223,13 +264,13 @@ export default class Selection {
 
 		protected serializeToJSON() {
 			return {
-				commands: this.currentTransfmCommands.map(command => command.serialize()),
+				elems: this.selectedElemIds,
 				transform: this.fullTransform.toArray(),
 			};
 		}
 
 		public description(_editor: Editor, localizationTable: EditorLocalization) {
-			return localizationTable.transformedElements(this.currentTransfmCommands.length);
+			return localizationTable.transformedElements(this.selectedElemIds.length);
 		}
 	};
 

package/src/tools/SelectionTool/SelectionTool.ts

@@ -12,7 +12,7 @@ import Viewport from '../../Viewport';
 import BaseTool from '../BaseTool';
 import SVGRenderer from '../../rendering/renderers/SVGRenderer';
 import Selection from './Selection';
-import TextComponent from '../../components/Text';
+import TextComponent from '../../components/TextComponent';
 
 export const cssPrefix = 'selection-tool-';
 

package/src/tools/TextTool.ts

@@ -1,5 +1,5 @@
 import Color4 from '../Color4';
-import TextComponent, { TextStyle } from '../components/Text';
+import TextComponent, { TextStyle } from '../components/TextComponent';
 import Editor from '../Editor';
 import EditorImage from '../EditorImage';
 import Rect2 from '../math/Rect2';
@@ -135,8 +135,11 @@ export default class TextTool extends BaseTool {
 		this.textInputElem.style.width = `${this.textInputElem.scrollWidth}px`;
 		this.textInputElem.style.height = `${this.textInputElem.scrollHeight}px`;
 
+		// Get the ascent based on the font, using a character that is tall in most fonts.
+		const tallCharacter = '⎢';
+		const ascent = this.getTextAscent(tallCharacter, this.textStyle);
+
 		const rotation = this.textRotation + viewport.getRotationAngle();
-		const ascent = this.getTextAscent(this.textInputElem.value || 'W', this.textStyle);
 		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';
@@ -208,7 +211,12 @@ export default class TextTool extends BaseTool {
 			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[];
+			let targetTextNodes = targetNodes.filter(node => node instanceof TextComponent) as TextComponent[];
+
+			// Don't try to edit text nodes that contain the viewport (this allows us
+			// to zoom in on text nodes and add text on top of them.)
+			const visibleRect = this.editor.viewport.visibleRect;
+			targetTextNodes = targetTextNodes.filter(node => !node.getBBox().containsRect(visibleRect));
 
 			// End any TextNodes we're currently editing.
 			this.flushInput();

package/src/tools/ToolController.ts

@@ -15,6 +15,7 @@ import ToolSwitcherShortcut from './ToolSwitcherShortcut';
 import PasteHandler from './PasteHandler';
 import ToolbarShortcutHandler from './ToolbarShortcutHandler';
 import { makePressureSensitiveFreehandLineBuilder } from '../components/builders/PressureSensitiveFreehandLineBuilder';
+import FindTool from './FindTool';
 
 export default class ToolController {
 	private tools: BaseTool[];
@@ -50,6 +51,7 @@ export default class ToolController {
 			new UndoRedoShortcut(editor),
 			new ToolbarShortcutHandler(editor),
 			new ToolSwitcherShortcut(editor),
+			new FindTool(editor),
 			new PasteHandler(editor),
 		];
 		primaryTools.forEach(tool => tool.setToolGroup(primaryToolGroup));

package/src/tools/localization.ts

@@ -15,6 +15,13 @@ export interface ToolLocalization {
 	changeTool: string;
 	pasteHandler: string;
 
+	findLabel: string;
+	toNextMatch: string;
+	closeFindDialog: string;
+	findDialogShown: string;
+	findDialogHidden: string;
+	focusedFoundText: (currentMatchNumber: number, totalMatches: number)=> string;
+
 	anyDevicePanning: string;
 
 	copied: (count: number, description: string) => string;
@@ -40,6 +47,13 @@ export const defaultToolLocalization: ToolLocalization = {
 	changeTool: 'Change tool',
 	pasteHandler: 'Copy paste handler',
 
+	findLabel: 'Find',
+	toNextMatch: 'Next',
+	closeFindDialog: 'Close',
+	findDialogShown: 'Find dialog shown',
+	findDialogHidden: 'Find dialog hidden',
+	focusedFoundText: (matchIdx: number, totalMatches: number) => `Viewing match ${matchIdx} of ${totalMatches}`,
+
 	anyDevicePanning: 'Any device panning',
 
 	copied: (count: number, description: string) => `Copied ${count} ${description}`,