js-draw 0.6.0 → 0.7.0

package/src/toolbar/IconProvider.ts

@@ -8,7 +8,7 @@ import Pen from '../tools/Pen';
 import { StrokeDataPoint } from '../types';
 import Viewport from '../Viewport';
 
-
+type IconType = SVGSVGElement|HTMLImageElement;
 
 const svgNamespace = 'http://www.w3.org/2000/svg';
 const iconColorFill = `
@@ -36,13 +36,13 @@ const checkerboardPatternRef = 'url(#checkerboard)';
 // Extend this class and override methods to customize icons.
 export default class IconProvider {
 	
-	public makeUndoIcon() {
+	public makeUndoIcon(): IconType {
 		return this.makeRedoIcon(true);
 	}
 
 	// @param mirror - reflect across the x-axis @internal
 	// @returns a redo icon.
-	public makeRedoIcon(mirror: boolean = false) {
+	public makeRedoIcon(mirror: boolean = false): IconType {
 		const icon = document.createElementNS(svgNamespace, 'svg');
 		icon.innerHTML = `
 			<style>
@@ -65,7 +65,7 @@ export default class IconProvider {
 		return icon;
 	}
 	
-	public makeDropdownIcon() {
+	public makeDropdownIcon(): IconType {
 		const icon = document.createElementNS(svgNamespace, 'svg');
 		icon.innerHTML = `
 		<g>
@@ -79,7 +79,7 @@ export default class IconProvider {
 		return icon;
 	}
 	
-	public makeEraserIcon() {
+	public makeEraserIcon(): IconType {
 		const icon = document.createElementNS(svgNamespace, 'svg');
 	
 		// Draw an eraser-like shape
@@ -96,7 +96,7 @@ export default class IconProvider {
 		return icon;
 	}
 	
-	public makeSelectionIcon() {
+	public makeSelectionIcon(): IconType {
 		const icon = document.createElementNS(svgNamespace, 'svg');
 	
 		// Draw a cursor-like shape
@@ -111,12 +111,16 @@ export default class IconProvider {
 		return icon;
 	}
 	
+	/**
+	 * @param pathData - SVG path data (e.g. `m10,10l30,30z`)
+	 * @param fill - A valid CSS color (e.g. `var(--icon-color)` or `#f0f`). This can be `none`.
+	 */
 	protected makeIconFromPath(
 		pathData: string,
 		fill: string = 'var(--icon-color)', 
 		strokeColor: string = 'none',
 		strokeWidth: string = '0px',
-	) {
+	): IconType {
 		const icon = document.createElementNS(svgNamespace, 'svg');
 		const path = document.createElementNS(svgNamespace, 'path');
 		path.setAttribute('d', pathData);
@@ -129,7 +133,7 @@ export default class IconProvider {
 		return icon;
 	}
 	
-	public makeHandToolIcon() {
+	public makeHandToolIcon(): IconType {
 		const fill = 'none';
 		const strokeColor = 'var(--icon-color)';
 		const strokeWidth = '3';
@@ -158,7 +162,7 @@ export default class IconProvider {
 		`, fill, strokeColor, strokeWidth);
 	}
 	
-	public makeTouchPanningIcon() {
+	public makeTouchPanningIcon(): IconType {
 		const fill = 'none';
 		const strokeColor = 'var(--icon-color)';
 		const strokeWidth = '3';
@@ -192,7 +196,7 @@ export default class IconProvider {
 		`, fill, strokeColor, strokeWidth);
 	}
 	
-	public makeAllDevicePanningIcon() {
+	public makeAllDevicePanningIcon(): IconType {
 		const fill = 'none';
 		const strokeColor = 'var(--icon-color)';
 		const strokeWidth = '3';
@@ -248,7 +252,7 @@ export default class IconProvider {
 		`, fill, strokeColor, strokeWidth);
 	}
 	
-	public makeZoomIcon = () => {
+	public makeZoomIcon(): IconType {
 		const icon = document.createElementNS(svgNamespace, 'svg');
 		icon.setAttribute('viewBox', '0 0 100 100');
 	
@@ -270,9 +274,9 @@ export default class IconProvider {
 		addTextNode('-', 70, 75);
 	
 		return icon;
-	};
+	}
 	
-	public makeTextIcon(textStyle: TextStyle) {
+	public makeTextIcon(textStyle: TextStyle): IconType {
 		const icon = document.createElementNS(svgNamespace, 'svg');
 		icon.setAttribute('viewBox', '0 0 100 100');
 	
@@ -295,7 +299,7 @@ export default class IconProvider {
 		return icon;
 	}
 	
-	public makePenIcon(tipThickness: number, color: string|Color4) {
+	public makePenIcon(tipThickness: number, color: string|Color4): IconType {
 		if (color instanceof Color4) {
 			color = color.toHexString();
 		}
@@ -334,7 +338,7 @@ export default class IconProvider {
 		return icon;
 	}
 	
-	public makeIconFromFactory(pen: Pen, factory: ComponentBuilderFactory) {
+	public makeIconFromFactory(pen: Pen, factory: ComponentBuilderFactory): IconType {
 		const toolThickness = pen.getThickness();
 	
 		const nowTime = (new Date()).getTime();
@@ -365,7 +369,7 @@ export default class IconProvider {
 		return icon;
 	}
 	
-	public makePipetteIcon(color?: Color4) {
+	public makePipetteIcon(color?: Color4): IconType {
 		const icon = document.createElementNS(svgNamespace, 'svg');
 		const pipette = document.createElementNS(svgNamespace, 'path');
 	
@@ -419,7 +423,7 @@ export default class IconProvider {
 		return icon;
 	}
 	
-	public makeResizeViewportIcon() {
+	public makeResizeViewportIcon(): IconType {
 		return this.makeIconFromPath(`
 			M 75 5 75 10 90 10 90 25 95 25 95 5 75 5 z
 			M 15 15 15 30 20 30 20 20 30 20 30 15 15 15 z
@@ -432,14 +436,14 @@ export default class IconProvider {
 		`);
 	}
 	
-	public makeDuplicateSelectionIcon() {
+	public makeDuplicateSelectionIcon(): IconType {
 		return this.makeIconFromPath(`
 			M 45,10 45,55 90,55 90,10 45,10 z
 			M 10,25 10,90 70,90 70,60 40,60 40,25 10,25 z 
 		`);
 	}
 	
-	public makeDeleteSelectionIcon() {
+	public makeDeleteSelectionIcon(): IconType {
 		const strokeWidth = '5px';
 		const strokeColor = 'var(--icon-color)';
 		const fillColor = 'none';
@@ -450,7 +454,7 @@ export default class IconProvider {
 		`, fillColor, strokeColor, strokeWidth);
 	}
 
-	public makeSaveIcon() {
+	public makeSaveIcon(): IconType {
 		const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
 		svg.innerHTML = `
 			<style>

package/src/toolbar/widgets/PenToolWidget.ts

@@ -105,12 +105,16 @@ export default class PenToolWidget extends BaseToolWidget {
 		objectSelectLabel.innerText = this.localizationTable.selectObjectType;
 		objectSelectLabel.setAttribute('for', objectTypeSelect.id);
 
+		// Use a logarithmic scale for thicknessInput (finer control over thinner strokewidths.)
+		const inverseThicknessInputFn = (t: number) => Math.log10(t);
+		const thicknessInputFn = (t: number) => 10**t;
+
 		thicknessInput.type = 'range';
-		thicknessInput.min = '2';
-		thicknessInput.max = '20';
-		thicknessInput.step = '1';
+		thicknessInput.min = `${inverseThicknessInputFn(2)}`;
+		thicknessInput.max = `${inverseThicknessInputFn(400)}`;
+		thicknessInput.step = '0.1';
 		thicknessInput.oninput = () => {
-			this.tool.setThickness(parseFloat(thicknessInput.value) ** 2);
+			this.tool.setThickness(thicknessInputFn(parseFloat(thicknessInput.value)));
 		};
 		thicknessRow.appendChild(thicknessLabel);
 		thicknessRow.appendChild(thicknessInput);
@@ -142,7 +146,7 @@ export default class PenToolWidget extends BaseToolWidget {
 
 		this.updateInputs = () => {
 			colorInput.value = this.tool.getColor().toHexString();
-			thicknessInput.value = Math.sqrt(this.tool.getThickness()).toString();
+			thicknessInput.value = inverseThicknessInputFn(this.tool.getThickness()).toString();
 
 			objectTypeSelect.replaceChildren();
 			for (let i = 0; i < this.penTypes.length; i ++) {

package/src/tools/PasteHandler.ts

@@ -8,7 +8,7 @@ import { AbstractComponent, TextComponent } from '../components/lib';
 import { Command, uniteCommands } from '../commands/lib';
 import SVGLoader from '../SVGLoader';
 import { PasteEvent } from '../types';
-import { Mat33, Rect2, Vec2 } from '../math/lib';
+import { Mat33, Rect2 } from '../math/lib';
 import BaseTool from './BaseTool';
 import EditorImage from '../EditorImage';
 import SelectionTool from './SelectionTool/SelectionTool';
@@ -125,29 +125,7 @@ export default class PasteHandler extends BaseTool {
 		const pastedTextStyle: TextStyle = textTools[0]?.getTextStyle() ?? defaultTextStyle;
 
 		const lines = text.split('\n');
-		let lastComponent: TextComponent|null = null;
-		const components: TextComponent[] = [];
-
-		for (const line of lines) {
-			let position = Vec2.zero;
-			if (lastComponent) {
-				const lineMargin = Math.floor(pastedTextStyle.size);
-				position = lastComponent.getBBox().bottomLeft.plus(Vec2.unitY.times(lineMargin));
-			}
-
-			const component = new TextComponent([ line ], Mat33.translation(position), pastedTextStyle);
-			components.push(component);
-			lastComponent = component;
-		}
-
-		if (components.length === 1) {
-			await this.addComponentsFromPaste([ components[0] ]);
-		} else {
-			// Wrap the existing `TextComponent`s --- dragging one component should drag all.
-			await this.addComponentsFromPaste([
-				new TextComponent(components, Mat33.identity, pastedTextStyle)
-			]);
-		}
+		await this.addComponentsFromPaste([ TextComponent.fromLines(lines, Mat33.identity, pastedTextStyle) ]);
 	}
 
 	private async doImagePaste(dataURL: string) {

package/src/tools/TextTool.ts

@@ -1,23 +1,29 @@
 import Color4 from '../Color4';
-import Text, { TextStyle } from '../components/Text';
+import TextComponent, { TextStyle } from '../components/Text';
 import Editor from '../Editor';
 import EditorImage from '../EditorImage';
+import Rect2 from '../math/Rect2';
 import Mat33 from '../math/Mat33';
 import { Vec2 } from '../math/Vec2';
 import { PointerDevice } from '../Pointer';
 import { EditorEventType, PointerEvt } from '../types';
 import BaseTool from './BaseTool';
 import { ToolLocalization } from './localization';
+import Erase from '../commands/Erase';
+import uniteCommands from '../commands/uniteCommands';
 
 const overlayCssClass = 'textEditorOverlay';
 export default class TextTool extends BaseTool {
 	private textStyle: TextStyle;
 
 	private textEditOverlay: HTMLElement;
-	private textInputElem: HTMLInputElement|null = null;
+	private textInputElem: HTMLTextAreaElement|null = null;
 	private textTargetPosition: Vec2|null = null;
 	private textMeasuringCtx: CanvasRenderingContext2D|null = null;
 	private textRotation: number;
+	private textScale: Vec2 = Vec2.of(1, 1);
+
+	private removeExistingCommand: Erase|null = null;
 
 	public constructor(private editor: Editor, description: string, private localizationTable: ToolLocalization) {
 		super(editor.notifier, description);
@@ -37,10 +43,18 @@ export default class TextTool extends BaseTool {
 				overflow: visible;
 			}
 
-			.${overlayCssClass} input {
+			.${overlayCssClass} textarea {
 				background-color: rgba(0, 0, 0, 0);
+
+				white-space: pre;
+
+				padding: 0;
+				margin: 0;
 				border: none;
 				padding: 0;
+
+				min-width: 100px;
+				min-height: 1.1em;
 			}
 		`);
 		this.editor.createHTMLOverlay(this.textEditOverlay);
@@ -50,7 +64,7 @@ export default class TextTool extends BaseTool {
 	private getTextAscent(text: string, style: TextStyle): number {
 		this.textMeasuringCtx ??= document.createElement('canvas').getContext('2d');
 		if (this.textMeasuringCtx) {
-			Text.applyTextStyles(this.textMeasuringCtx, style);
+			TextComponent.applyTextStyles(this.textMeasuringCtx, style);
 			return this.textMeasuringCtx.measureText(text).actualBoundingBoxAscent;
 		}
 
@@ -60,7 +74,7 @@ export default class TextTool extends BaseTool {
 
 	private flushInput() {
 		if (this.textInputElem && this.textTargetPosition) {
-			const content = this.textInputElem.value;
+			const content = this.textInputElem.value.trimEnd();
 			this.textInputElem.remove();
 			this.textInputElem = null;
 
@@ -70,23 +84,33 @@ export default class TextTool extends BaseTool {
 
 			const textTransform = Mat33.translation(
 				this.textTargetPosition
+			).rightMul(
+				this.getTextScaleMatrix()
 			).rightMul(
 				Mat33.scaling2D(this.editor.viewport.getSizeOfPixelOnCanvas())
 			).rightMul(
 				Mat33.zRotation(this.textRotation)
 			);
 			
-			const textComponent = new Text(
-				[ content ],
-				textTransform,
-				this.textStyle,
-			);
+			const textComponent = TextComponent.fromLines(content.split('\n'), textTransform, this.textStyle);
 
 			const action = EditorImage.addElement(textComponent);
-			this.editor.dispatch(action);
+			if (this.removeExistingCommand) {
+				// Unapply so that `removeExistingCommand` can be added to the undo stack.
+				this.removeExistingCommand.unapply(this.editor);
+	
+				this.editor.dispatch(uniteCommands([ this.removeExistingCommand, action ]));
+				this.removeExistingCommand = null;
+			} else {
+				this.editor.dispatch(action);
+			}
 		}
 	}
 
+	private getTextScaleMatrix() {
+		return Mat33.scaling2D(this.textScale.times(1/this.editor.viewport.getSizeOfPixelOnCanvas()));
+	}
+
 	private updateTextInput() {
 		if (!this.textInputElem || !this.textTargetPosition) {
 			this.textInputElem?.remove();
@@ -95,7 +119,6 @@ export default class TextTool extends BaseTool {
 
 		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 ?? '';
@@ -108,24 +131,31 @@ export default class TextTool extends BaseTool {
 		this.textInputElem.style.top = `${textScreenPos.y}px`;
 		this.textInputElem.style.margin = '0';
 
+		this.textInputElem.style.width = `${this.textInputElem.scrollWidth}px`;
+		this.textInputElem.style.height = `${this.textInputElem.scrollHeight}px`;
+
 		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)`;
+		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';
 	}
 
 	private startTextInput(textCanvasPos: Vec2, initialText: string) {
 		this.flushInput();
 
-		this.textInputElem = document.createElement('input');
+		this.textInputElem = document.createElement('textarea');
 		this.textInputElem.value = initialText;
+		this.textInputElem.style.display = 'inline-block';
 		this.textTargetPosition = textCanvasPos;
 		this.textRotation = -this.editor.viewport.getRotationAngle();
+		this.textScale = Vec2.of(1, 1).times(this.editor.viewport.getSizeOfPixelOnCanvas());
 		this.updateTextInput();
 
 		this.textInputElem.oninput = () => {
 			if (this.textInputElem) {
-				this.textInputElem.size = this.textInputElem?.value.length || 10;
+				this.textInputElem.style.width = `${this.textInputElem.scrollWidth}px`;
+				this.textInputElem.style.height = `${this.textInputElem.scrollHeight}px`;
 			}
 		};
 		this.textInputElem.onblur = () => {
@@ -134,7 +164,7 @@ export default class TextTool extends BaseTool {
 			setTimeout(() => this.flushInput(), 0);
 		};
 		this.textInputElem.onkeyup = (evt) => {
-			if (evt.key === 'Enter') {
+			if (evt.key === 'Enter' && !evt.shiftKey) {
 				this.flushInput();
 				this.editor.focus();
 			} else if (evt.key === 'Escape') {
@@ -142,6 +172,9 @@ export default class TextTool extends BaseTool {
 				this.textInputElem?.remove();
 				this.textInputElem = null;
 				this.editor.focus();
+
+				this.removeExistingCommand?.unapply(this.editor);
+				this.removeExistingCommand = null;
 			}
 		};
 
@@ -165,7 +198,33 @@ export default class TextTool extends BaseTool {
 		}
 
 		if (allPointers.length === 1) {
-			this.startTextInput(current.canvasPos, '');
+
+			// Are we clicking on a text node?
+			const canvasPos = current.canvasPos;
+			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[];
+
+			if (targetTextNodes.length > 0) {
+				const targetNode = targetTextNodes[targetTextNodes.length - 1];
+				this.setTextStyle(targetNode.getTextStyle());
+
+				// Create and temporarily apply removeExistingCommand.
+				this.removeExistingCommand = new Erase([ targetNode ]);
+				this.removeExistingCommand.apply(this.editor);
+
+				this.startTextInput(targetNode.getBaselinePos(), targetNode.getText());
+
+				const transform = targetNode.getTransform();
+				this.textRotation = transform.transformVec3(Vec2.unitX).angle();
+				const scaleFactor = transform.transformVec3(Vec2.unitX).magnitude();
+				this.textScale = Vec2.of(1, 1).times(scaleFactor);
+				this.updateTextInput();
+			} else {
+				this.removeExistingCommand = null;
+				this.startTextInput(current.canvasPos, '');
+			}
 			return true;
 		}
 
@@ -224,4 +283,10 @@ export default class TextTool extends BaseTool {
 	public getTextStyle(): TextStyle {
 		return this.textStyle;
 	}
+
+	private setTextStyle(style: TextStyle) {
+		// Copy the style — we may change parts of it.
+		this.textStyle = {...style};
+		this.dispatchUpdateEvent();
+	}
 }