js-draw 0.1.11 → 0.1.12

package/src/{geometry → math}/Vec3.ts

@@ -115,9 +115,9 @@ export default class Vec3 {
 	}
 
 	// Returns a vector with each component acted on by [fn]
-	public map(fn: (component: number)=> number): Vec3 {
+	public map(fn: (component: number, index: number)=> number): Vec3 {
 		return Vec3.of(
-			fn(this.x), fn(this.y), fn(this.z)
+			fn(this.x, 0), fn(this.y, 1), fn(this.z, 2)
 		);
 	}
 

package/src/math/rounding.test.ts

@@ -0,0 +1,40 @@
+import { toRoundedString, toStringOfSamePrecision } from './rounding';
+
+describe('toRoundedString', () => {
+	it('should round up numbers endings similar to .999999999999999', () => {
+		expect(toRoundedString(0.999999999)).toBe('1');
+		expect(toRoundedString(0.899999999)).toBe('.9');
+		expect(toRoundedString(9.999999999)).toBe('10');
+		expect(toRoundedString(-10.999999999)).toBe('-11');
+	});
+
+	it('should round up numbers similar to 10.999999998', () => {
+		expect(toRoundedString(10.999999998)).toBe('11');
+	});
+
+	// Handling this creates situations with potential error:
+	//it('should round strings with multiple digits after the ending decimal points', () => {
+	//	expect(toRoundedString(292.2 - 292.8)).toBe('-0.6');
+	//});
+
+	it('should round down strings ending endings similar to .00000001', () => {
+		expect(toRoundedString(10.00000001)).toBe('10');
+	});
+});
+
+it('toStringOfSamePrecision', () => {
+	expect(toStringOfSamePrecision(1.23456, '1.12')).toBe('1.23');
+	expect(toStringOfSamePrecision(1.23456, '1.1')).toBe('1.2');
+	expect(toStringOfSamePrecision(1.23456, '1.1', '5.32')).toBe('1.23');
+	expect(toStringOfSamePrecision(-1.23456, '1.1', '5.32')).toBe('-1.23');
+	expect(toStringOfSamePrecision(-1.99999, '1.1', '5.32')).toBe('-2');
+	expect(toStringOfSamePrecision(1.99999, '1.1', '5.32')).toBe('2');
+	expect(toStringOfSamePrecision(1.89999, '1.1', '5.32')).toBe('1.9');
+	expect(toStringOfSamePrecision(9.99999999, '-1.1234')).toBe('10');
+	expect(toStringOfSamePrecision(9.999999998999996, '100')).toBe('10');
+	expect(toStringOfSamePrecision(0.000012345, '0.000012')).toBe('.000012');
+	expect(toStringOfSamePrecision(0.000012645, '.000012')).toBe('.000013');
+	expect(toStringOfSamePrecision(-0.09999999999999432, '291.3')).toBe('-.1');
+	expect(toStringOfSamePrecision(-0.9999999999999432, '291.3')).toBe('-1');
+	expect(toStringOfSamePrecision(9998.9, '.1', '-11')).toBe('9998.9');
+});

package/src/math/rounding.ts

@@ -0,0 +1,145 @@
+// Clean up stringified numbers
+const cleanUpNumber = (text: string) => {
+	// Regular expression substitions can be somewhat expensive. Only do them
+	// if necessary.
+	const lastChar = text.charAt(text.length - 1);
+	if (lastChar === '0' || lastChar === '.') {
+		// Remove trailing zeroes
+		text = text.replace(/([.]\d*[^0]+)0+$/, '$1');
+		text = text.replace(/[.]0+$/, '.');
+
+		// Remove trailing period
+		text = text.replace(/[.]$/, '');
+
+		if (text === '-0') {
+			return '0';
+		}
+	}
+
+	const firstChar = text.charAt(0);
+	if (firstChar === '0' || firstChar === '-') {
+		// Remove unnecessary leading zeroes.
+		text = text.replace(/^(0+)[.]/, '.');
+		text = text.replace(/^-(0+)[.]/, '-.');
+	}
+
+	return text;
+};
+
+export const toRoundedString = (num: number): string => {
+	// Try to remove rounding errors. If the number ends in at least three/four zeroes
+	// (or nines) just one or two digits, it's probably a rounding error.
+	const fixRoundingUpExp = /^([-]?\d*\.\d{3,})0{4,}\d{1,2}$/;
+	const hasRoundingDownExp = /^([-]?)(\d*)\.(\d{3,}9{4,})\d{1,2}$/;
+
+	let text = num.toString(10);
+	if (text.indexOf('.') === -1) {
+		return text;
+	}
+
+	const roundingDownMatch = hasRoundingDownExp.exec(text);
+	if (roundingDownMatch) {
+		const negativeSign = roundingDownMatch[1];
+		const postDecimalString = roundingDownMatch[3];
+		const lastDigit = parseInt(postDecimalString.charAt(postDecimalString.length - 1), 10);
+		const postDecimal = parseInt(postDecimalString, 10);
+		const preDecimal = parseInt(roundingDownMatch[2], 10);
+
+		const origPostDecimalString = roundingDownMatch[3];
+
+		let newPostDecimal = (postDecimal + 10 - lastDigit).toString();
+		let carry = 0;
+		if (newPostDecimal.length > postDecimal.toString().length) {
+			// Left-shift
+			newPostDecimal = newPostDecimal.substring(1);
+			carry = 1;
+		}
+
+		// parseInt(...).toString() removes leading zeroes. Add them back.
+		while (newPostDecimal.length < origPostDecimalString.length) {
+			newPostDecimal = carry.toString(10) + newPostDecimal;
+			carry = 0;
+		}
+
+		text = `${negativeSign + (preDecimal + carry).toString()}.${newPostDecimal}`;
+	}
+
+	text = text.replace(fixRoundingUpExp, '$1');
+
+	return cleanUpNumber(text);
+};
+
+const numberExp = /^([-]?)(\d*)[.](\d+)$/;
+export const getLenAfterDecimal = (numberAsString: string) => {
+	const numberMatch = numberExp.exec(numberAsString);
+	if (!numberMatch) {
+		// If not a match, either the number is exponential notation (or is something
+		// like NaN or Infinity)
+		if (numberAsString.search(/[eE]/) !== -1 || /^[a-zA-Z]+$/.exec(numberAsString)) {
+			return -1;
+		// Or it has no decimal point
+		} else {
+			return 0;
+		}
+	}
+
+	const afterDecimalLen = numberMatch[3].length;
+	return afterDecimalLen;
+};
+
+// [reference] should be a string representation of a base-10 number (no exponential (e.g. 10e10))
+export const toStringOfSamePrecision = (num: number, ...references: string[]): string => {
+	const text = num.toString(10);
+	const textMatch = numberExp.exec(text);
+	if (!textMatch) {
+		return text;
+	}
+
+	let decimalPlaces = -1;
+	for (const reference of references) {
+		decimalPlaces = Math.max(getLenAfterDecimal(reference), decimalPlaces);
+	}
+
+	if (decimalPlaces === -1) {
+		return toRoundedString(num);
+	}
+
+	// Make text's after decimal length match [afterDecimalLen].
+	let postDecimal = textMatch[3].substring(0, decimalPlaces);
+	let preDecimal = textMatch[2];
+	const nextDigit = textMatch[3].charAt(decimalPlaces);
+
+	if (nextDigit !== '') {
+		const asNumber = parseInt(nextDigit, 10);
+		if (asNumber >= 5) {
+			// Don't attempt to parseInt() an empty string.
+			if (postDecimal.length > 0) {
+				const leadingZeroMatch = /^(0+)(\d*)$/.exec(postDecimal);
+
+				let leadingZeroes = '';
+				let postLeading = postDecimal;
+				if (leadingZeroMatch) {
+					leadingZeroes = leadingZeroMatch[1];
+					postLeading = leadingZeroMatch[2];
+				}
+
+				postDecimal = (parseInt(postDecimal) + 1).toString();
+
+				// If postDecimal got longer, remove leading zeroes if possible
+				if (postDecimal.length > postLeading.length && leadingZeroes.length > 0) {
+					leadingZeroes = leadingZeroes.substring(1);
+				}
+
+				postDecimal = leadingZeroes + postDecimal;
+			}
+
+			if (postDecimal.length === 0 || postDecimal.length > decimalPlaces) {
+				preDecimal = (parseInt(preDecimal) + 1).toString();
+				postDecimal = postDecimal.substring(1);
+			}
+		}
+	}
+
+	const negativeSign = textMatch[1];
+	return cleanUpNumber(`${negativeSign}${preDecimal}.${postDecimal}`);
+};

package/src/rendering/Display.ts

@@ -3,7 +3,7 @@ import CanvasRenderer from './renderers/CanvasRenderer';
 import { Editor } from '../Editor';
 import { EditorEventType } from '../types';
 import DummyRenderer from './renderers/DummyRenderer';
-import { Point2, Vec2 } from '../geometry/Vec2';
+import { Point2, Vec2 } from '../math/Vec2';
 import RenderingCache from './caching/RenderingCache';
 import TextOnlyRenderer from './renderers/TextOnlyRenderer';
 import Color4 from '../Color4';
@@ -18,6 +18,7 @@ export default class Display {
 	private dryInkRenderer: AbstractRenderer;
 	private wetInkRenderer: AbstractRenderer;
 	private textRenderer: TextOnlyRenderer;
+	private textRerenderOutput: HTMLElement|null = null;
 	private cache: RenderingCache;
 	private resizeSurfacesCallback?: ()=> void;
 	private flattenCallback?: ()=> void;
@@ -59,10 +60,10 @@ export default class Display {
 				return this.dryInkRenderer.canRenderFromWithoutDataLoss(renderer);
 			},
 			blockResolution: cacheBlockResolution,
-			cacheSize: 500 * 500 * 4 * 200,
+			cacheSize: 500 * 500 * 4 * 220,
 			maxScale: 1.5,
-			minComponentsPerCache: 50,
-			minComponentsToUseCache: 120,
+			minComponentsPerCache: 45,
+			minComponentsToUseCache: 105,
 		});
 
 		this.editor.notifier.on(EditorEventType.DisplayResized, event => {
@@ -158,19 +159,26 @@ export default class Display {
 		rerenderButton.classList.add('rerenderButton');
 		rerenderButton.innerText = this.editor.localization.rerenderAsText;
 
-		const rerenderOutput = document.createElement('div');
-		rerenderOutput.ariaLive = 'polite';
+		this.textRerenderOutput = document.createElement('div');
+		this.textRerenderOutput.setAttribute('aria-live', 'polite');
 
 		rerenderButton.onclick = () => {
-			this.textRenderer.clear();
-			this.editor.image.render(this.textRenderer, this.editor.viewport);
-			rerenderOutput.innerText = this.textRenderer.getDescription();
+			this.rerenderAsText();
 		};
 
-		textRendererOutputContainer.replaceChildren(rerenderButton, rerenderOutput);
+		textRendererOutputContainer.replaceChildren(rerenderButton, this.textRerenderOutput);
 		this.editor.createHTMLOverlay(textRendererOutputContainer);
 	}
 
+	public rerenderAsText() {
+		this.textRenderer.clear();
+		this.editor.image.render(this.textRenderer, this.editor.viewport);
+		
+		if (this.textRerenderOutput) {
+			this.textRerenderOutput.innerText = this.textRenderer.getDescription();
+		}
+	}
+
 	// Clears the drawing surfaces and otherwise prepares for a rerender.
 	public startRerender(): AbstractRenderer {
 		this.resizeSurfacesCallback?.();

package/src/rendering/caching/CacheRecord.test.ts

@@ -1,7 +1,7 @@
 /* @jest-environment jsdom */
 
-import Rect2 from '../../geometry/Rect2';
-import { Vec2 } from '../../geometry/Vec2';
+import Rect2 from '../../math/Rect2';
+import { Vec2 } from '../../math/Vec2';
 import CacheRecord from './CacheRecord';
 import { createCache } from './testUtils';
 

package/src/rendering/caching/CacheRecord.ts

@@ -1,5 +1,5 @@
-import Mat33 from '../../geometry/Mat33';
-import Rect2 from '../../geometry/Rect2';
+import Mat33 from '../../math/Mat33';
+import Rect2 from '../../math/Rect2';
 import AbstractRenderer from '../renderers/AbstractRenderer';
 import { BeforeDeallocCallback, CacheState } from './types';
 

package/src/rendering/caching/CacheRecordManager.ts

@@ -1,6 +1,6 @@
 import { BeforeDeallocCallback, PartialCacheState } from './types';
 import CacheRecord from './CacheRecord';
-import Rect2 from '../../geometry/Rect2';
+import Rect2 from '../../math/Rect2';
 
 
 export class CacheRecordManager {

package/src/rendering/caching/RenderingCache.test.ts

@@ -3,11 +3,11 @@
 import DummyRenderer from '../renderers/DummyRenderer';
 import { createCache } from './testUtils';
 import Stroke from '../../components/Stroke';
-import Path from '../../geometry/Path';
+import Path from '../../math/Path';
 import Color4 from '../../Color4';
 import EditorImage from '../../EditorImage';
 import Viewport from '../../Viewport';
-import Mat33 from '../../geometry/Mat33';
+import Mat33 from '../../math/Mat33';
 
 describe('RenderingCache', () => {
 	const testPath = Path.fromString('M0,0 l100,500 l-20,20 L-100,-100');
@@ -35,7 +35,7 @@ describe('RenderingCache', () => {
 		expect(lastRenderer).not.toBeNull();
 		expect(lastRenderer!.renderedPathCount).toBe(1);
 
-		editor.dispatch(new Viewport.ViewportTransform(Mat33.scaling2D(0.1)));
+		editor.dispatch(Viewport.transformBy(Mat33.scaling2D(0.1)));
 		editor.image.renderWithCache(screenRenderer, cache, editor.viewport);
 		expect(allocdRenderers).toBe(1);
 		expect(lastRenderer!.renderedPathCount).toBe(1);

package/src/rendering/caching/RenderingCache.ts

@@ -1,5 +1,5 @@
 import { ImageNode } from '../../EditorImage';
-import Rect2 from '../../geometry/Rect2';
+import Rect2 from '../../math/Rect2';
 import Viewport from '../../Viewport';
 import AbstractRenderer from '../renderers/AbstractRenderer';
 import RenderingCacheNode from './RenderingCacheNode';

package/src/rendering/caching/RenderingCacheNode.ts

@@ -3,7 +3,7 @@
 
 import Color4 from '../../Color4';
 import { ImageNode, sortLeavesByZIndex } from '../../EditorImage';
-import Rect2 from '../../geometry/Rect2';
+import Rect2 from '../../math/Rect2';
 import Viewport from '../../Viewport';
 import AbstractRenderer from '../renderers/AbstractRenderer';
 import CacheRecord from './CacheRecord';
@@ -151,12 +151,15 @@ export default class RenderingCacheNode {
 		return result;
 	}
 
-	private renderingIsUpToDate(sortedIds: number[]) {
-		if (this.cachedRenderer === null || sortedIds.length !== this.renderedIds.length) {
+	// Returns true iff all elems of this.renderedIds are in sortedIds.
+	// sortedIds should be sorted by z-index (or some other order, so long as they are
+	// sorted by the same thing as this.renderedIds.)
+	private allRenderedIdsIn(sortedIds: number[]) {
+		if (this.renderedIds.length > sortedIds.length) {
 			return false;
 		}
 
-		for (let i = 0; i < sortedIds.length; i++) {
+		for (let i = 0; i < this.renderedIds.length; i++) {
 			if (sortedIds[i] !== this.renderedIds[i]) {
 				return false;
 			}
@@ -165,6 +168,14 @@ export default class RenderingCacheNode {
 		return true;
 	}
 
+	private renderingIsUpToDate(sortedIds: number[]) {
+		if (this.cachedRenderer === null || sortedIds.length !== this.renderedIds.length) {
+			return false;
+		}
+
+		return this.allRenderedIdsIn(sortedIds);
+	}
+
 	// Render all [items] within [viewport]
 	public renderItems(screenRenderer: AbstractRenderer, items: ImageNode[], viewport: Viewport) {
 		if (
@@ -238,8 +249,7 @@ export default class RenderingCacheNode {
 				}
 
 				// Is it worth it to render the items?
-				// TODO: Replace this with something performace based.
-				// TODO: Determine whether it is 'worth it' to cache this depending on rendering time.
+				// TODO: Consider replacing this with something performace based.
 				if (leavesByIds.length > this.cacheState.props.minComponentsPerCache) {
 					let fullRerenderNeeded = true;
 					if (!this.cachedRenderer) {
@@ -247,7 +257,7 @@ export default class RenderingCacheNode {
 							this.region,
 							() => this.onRegionDealloc()
 						);
-					} else if (leavesByIds.length > this.renderedIds.length && this.renderedMaxZIndex !== null) {
+					} else if (leavesByIds.length > this.renderedIds.length && this.allRenderedIdsIn(leafIds) && this.renderedMaxZIndex !== null) {
 						// We often don't need to do a full re-render even if something's changed.
 						// Check whether we can just draw on top of the existing cache.
 						const newLeaves = [];
@@ -287,6 +297,12 @@ export default class RenderingCacheNode {
 								screenRenderer.drawRect(this.region, viewport.getSizeOfPixelOnCanvas(), { fill: Color4.clay });
 							}
 						}
+					} else if (debugMode) {
+						console.log('Decided on a full re-render. Reason: At least one of the following is false:',
+							'\n leafIds.length > this.renderedIds.length: ', leafIds.length > this.renderedIds.length,
+							'\n this.allRenderedIdsIn(leafIds): ', this.allRenderedIdsIn(leafIds),
+							'\n this.renderedMaxZIndex !== null: ', this.renderedMaxZIndex !== null,
+							'\n\nthis.rerenderedIds: ', this.renderedIds, ', leafIds: ', leafIds);
 					}
 
 					if (fullRerenderNeeded) {

package/src/rendering/caching/testUtils.ts

@@ -1,4 +1,4 @@
-import { Vec2 } from '../../geometry/Vec2';
+import { Vec2 } from '../../math/Vec2';
 import DummyRenderer from '../renderers/DummyRenderer';
 import createEditor from '../../testing/createEditor';
 import AbstractRenderer from '../renderers/AbstractRenderer';

package/src/rendering/caching/types.ts

@@ -1,4 +1,4 @@
-import { Vec2 } from '../../geometry/Vec2';
+import { Vec2 } from '../../math/Vec2';
 import AbstractRenderer from '../renderers/AbstractRenderer';
 import { CacheRecordManager } from './CacheRecordManager';
 

package/src/rendering/localization.ts

@@ -1,10 +1,14 @@
 
 export interface TextRendererLocalization {
+	pathNodeCount(pathCount: number): string;
+	textNodeCount(nodeCount: number): string;
     textNode(content: string): string;
     rerenderAsText: string;
 }
 
 export const defaultTextRendererLocalization: TextRendererLocalization = {
+	pathNodeCount: (count: number) => `There are ${count} visible path objects.`,
+	textNodeCount: (count: number) => `There are ${count} visible text nodes.`,
 	textNode: (content: string) => `Text: ${content}`,
 	rerenderAsText: 'Re-render as text',
 };

package/src/rendering/renderers/AbstractRenderer.ts

@@ -1,9 +1,9 @@
 import { LoadSaveDataTable } from '../../components/AbstractComponent';
 import { TextStyle } from '../../components/Text';
-import Mat33 from '../../geometry/Mat33';
-import Path, { PathCommand, PathCommandType } from '../../geometry/Path';
-import Rect2 from '../../geometry/Rect2';
-import { Point2, Vec2 } from '../../geometry/Vec2';
+import Mat33 from '../../math/Mat33';
+import Path, { PathCommand, PathCommandType } from '../../math/Path';
+import Rect2 from '../../math/Rect2';
+import { Point2, Vec2 } from '../../math/Vec2';
 import Viewport from '../../Viewport';
 import RenderingStyle, { stylesEqual } from '../RenderingStyle';
 

package/src/rendering/renderers/CanvasRenderer.ts

@@ -1,9 +1,9 @@
 import Color4 from '../../Color4';
 import Text, { TextStyle } from '../../components/Text';
-import Mat33 from '../../geometry/Mat33';
-import Rect2 from '../../geometry/Rect2';
-import { Point2, Vec2 } from '../../geometry/Vec2';
-import Vec3 from '../../geometry/Vec3';
+import Mat33 from '../../math/Mat33';
+import Rect2 from '../../math/Rect2';
+import { Point2, Vec2 } from '../../math/Vec2';
+import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
 import AbstractRenderer, { RenderablePathSpec } from './AbstractRenderer';

package/src/rendering/renderers/DummyRenderer.test.ts

@@ -1,7 +1,7 @@
 
 import EventDispatcher from '../../EventDispatcher';
-import Mat33 from '../../geometry/Mat33';
-import { Vec2 } from '../../geometry/Vec2';
+import Mat33 from '../../math/Mat33';
+import { Vec2 } from '../../math/Vec2';
 import Viewport from '../../Viewport';
 import DummyRenderer from './DummyRenderer';
 

package/src/rendering/renderers/DummyRenderer.ts

@@ -1,10 +1,10 @@
 // Renderer that outputs nothing. Useful for automated tests.
 
 import { TextStyle } from '../../components/Text';
-import Mat33 from '../../geometry/Mat33';
-import Rect2 from '../../geometry/Rect2';
-import { Point2, Vec2 } from '../../geometry/Vec2';
-import Vec3 from '../../geometry/Vec3';
+import Mat33 from '../../math/Mat33';
+import Rect2 from '../../math/Rect2';
+import { Point2, Vec2 } from '../../math/Vec2';
+import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
 import AbstractRenderer from './AbstractRenderer';

package/src/rendering/renderers/SVGRenderer.ts

@@ -1,10 +1,11 @@
 
 import { LoadSaveDataTable } from '../../components/AbstractComponent';
 import { TextStyle } from '../../components/Text';
-import Mat33 from '../../geometry/Mat33';
-import Path, { PathCommand, PathCommandType } from '../../geometry/Path';
-import Rect2 from '../../geometry/Rect2';
-import { Point2, Vec2 } from '../../geometry/Vec2';
+import Mat33 from '../../math/Mat33';
+import Path, { PathCommand, PathCommandType } from '../../math/Path';
+import Rect2 from '../../math/Rect2';
+import { toRoundedString } from '../../math/rounding';
+import { Point2, Vec2 } from '../../math/Vec2';
 import { svgAttributesDataKey, SVGLoaderUnknownAttribute, SVGLoaderUnknownStyleAttribute, svgStyleAttributesDataKey } from '../../SVGLoader';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
@@ -113,6 +114,9 @@ export default class SVGRenderer extends AbstractRenderer {
 	public drawText(text: string, transform: Mat33, style: TextStyle): void {
 		transform = this.getCanvasToScreenTransform().rightMul(transform);
 
+		const translation = transform.transformVec2(Vec2.zero);
+		transform = transform.rightMul(Mat33.translation(translation.times(-1)));
+
 		const textElem = document.createElementNS(svgNameSpace, 'text');
 		textElem.appendChild(document.createTextNode(text));
 		textElem.style.transform = `matrix(
@@ -125,6 +129,8 @@ export default class SVGRenderer extends AbstractRenderer {
 		textElem.style.fontWeight = style.fontWeight ?? '';
 		textElem.style.fontSize = style.size + 'px';
 		textElem.style.fill = style.renderingStyle.fill.toHexString();
+		textElem.setAttribute('x', `${toRoundedString(translation.x)}`);
+		textElem.setAttribute('y', `${toRoundedString(translation.y)}`);
 
 		if (style.renderingStyle.stroke) {
 			const strokeStyle = style.renderingStyle.stroke;

package/src/rendering/renderers/TextOnlyRenderer.ts

@@ -1,8 +1,8 @@
 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 Mat33 from '../../math/Mat33';
+import Rect2 from '../../math/Rect2';
+import { Vec2 } from '../../math/Vec2';
+import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import { TextRendererLocalization } from '../localization';
 import RenderingStyle from '../RenderingStyle';
@@ -12,6 +12,9 @@ import AbstractRenderer from './AbstractRenderer';
 
 export default class TextOnlyRenderer extends AbstractRenderer {
 	private descriptionBuilder: string[] = [];
+	private pathCount: number = 0;
+	private textNodeCount: number = 0;
+
 	public constructor(viewport: Viewport, private localizationTable: TextRendererLocalization) {
 		super(viewport);
 	}
@@ -23,15 +26,22 @@ export default class TextOnlyRenderer extends AbstractRenderer {
 
 	public clear(): void {
 		this.descriptionBuilder = [];
+		this.pathCount = 0;
+		this.textNodeCount = 0;
 	}
 
 	public getDescription(): string {
-		return this.descriptionBuilder.join('\n');
+		return [
+			this.localizationTable.pathNodeCount(this.pathCount),
+			this.localizationTable.textNodeCount(this.textNodeCount),
+			...this.descriptionBuilder
+		].join('\n');
 	}
 
 	protected beginPath(_startPoint: Vec3): void {
 	}
 	protected endPath(_style: RenderingStyle): void {
+		this.pathCount ++;
 	}
 	protected lineTo(_point: Vec3): void {
 	}
@@ -43,9 +53,10 @@ export default class TextOnlyRenderer extends AbstractRenderer {
 	}
 	public drawText(text: string, _transform: Mat33, _style: TextStyle): void {
 		this.descriptionBuilder.push(this.localizationTable.textNode(text));
+		this.textNodeCount ++;
 	}
 	public isTooSmallToRender(rect: Rect2): boolean {
-		return rect.maxDimension < 10 / this.getSizeOfCanvasPixelOnScreen();
+		return rect.maxDimension < 15 / this.getSizeOfCanvasPixelOnScreen();
 	}
 	public drawPoints(..._points: Vec3[]): void {
 	}