js-draw 0.9.2 → 0.9.3

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/TextTool.ts

@@ -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();