js-draw 0.1.0 → 0.1.3

package/src/geometry/Mat33.test.ts

@@ -141,4 +141,48 @@ describe('Mat33 tests', () => {
 			fullTransformInverse.transformVec2(fullTransform.transformVec2(Vec2.unitX))
 		).objEq(Vec2.unitX, fuzz);
 	});
+
+	it('should convert CSS matrix(...) strings to matricies', () => {
+		// From MDN:
+		// 		⎡ a c e ⎤
+		// 		⎢ b d f ⎥  =  matrix(a,b,c,d,e,f)
+		// 		⎣ 0 0 1 ⎦
+		const identity = Mat33.fromCSSMatrix('matrix(1, 0, 0, 1, 0, 0)');
+		expect(identity).objEq(Mat33.identity);
+		expect(Mat33.fromCSSMatrix('matrix(1, 2, 3, 4, 5, 6)')).objEq(new Mat33(
+			1, 3, 5,
+			2, 4, 6,
+			0, 0, 1,
+		));
+		expect(Mat33.fromCSSMatrix('matrix(1e2, 2, 3, 4, 5, 6)')).objEq(new Mat33(
+			1e2, 3, 5,
+			2, 4, 6,
+			0, 0, 1,
+		));
+		expect(Mat33.fromCSSMatrix('matrix(1.6, 2, .3, 4, 5, 6)')).objEq(new Mat33(
+			1.6, .3, 5,
+			2, 4, 6,
+			0, 0, 1,
+		));
+		expect(Mat33.fromCSSMatrix('matrix(-1, 2, 3.E-2, 4, -5.123, -6.5)')).objEq(new Mat33(
+			-1, 0.03, -5.123,
+			2, 4, -6.5,
+			0, 0, 1,
+		));
+		expect(Mat33.fromCSSMatrix('matrix(1.6,\n\t2, .3, 4, 5, 6)')).objEq(new Mat33(
+			1.6, .3, 5,
+			2, 4, 6,
+			0, 0, 1,
+		));
+		expect(Mat33.fromCSSMatrix('matrix(1.6,2, .3E-2, 4, 5, 6)')).objEq(new Mat33(
+			1.6, 3e-3, 5,
+			2, 4, 6,
+			0, 0, 1,
+		));
+		expect(Mat33.fromCSSMatrix('matrix(-1, 2e6,	3E-2,-5.123, -6.5e-1, 0.01)')).objEq(new Mat33(
+			-1, 	3E-2,  	-6.5e-1,
+			2e6,	-5.123,	0.01,
+			0,  	0,     	1,
+		));
+	});
 });

package/src/geometry/Mat33.ts

@@ -268,4 +268,45 @@ export default class Mat33 {
 		// Translate such that [center] goes to (0, 0)
 		return result.rightMul(Mat33.translation(center.times(-1)));
 	}
+
+	// Converts a CSS-form matrix(a, b, c, d, e, f) to a Mat33.
+	public static fromCSSMatrix(cssString: string): Mat33 {
+		if (cssString === '' || cssString === 'none') {
+			return Mat33.identity;
+		}
+
+		const numberExp = '([-]?\\d*(?:\\.\\d*)?(?:[eE][-]?\\d+)?)';
+		const numberSepExp = '[, \\t\\n]';
+		const regExpSource = `^\\s*matrix\\s*\\(${
+			[
+				// According to MDN, matrix(a,b,c,d,e,f) has form:
+				// 		⎡ a c e ⎤
+				// 		⎢ b d f ⎥
+				// 		⎣ 0 0 1 ⎦
+				numberExp, numberExp, numberExp, // a, c, e
+				numberExp, numberExp, numberExp, // b, d, f
+			].join(`${numberSepExp}+`)
+		}${numberSepExp}*\\)\\s*$`;
+		const matrixExp = new RegExp(regExpSource, 'i');
+		const match = matrixExp.exec(cssString);
+
+		if (!match) {
+			throw new Error(`Unsupported transformation: ${cssString}`);
+		}
+
+		const matrixData = match.slice(1).map(entry => parseFloat(entry));
+		const a = matrixData[0];
+		const b = matrixData[1];
+		const c = matrixData[2];
+		const d = matrixData[3];
+		const e = matrixData[4];
+		const f = matrixData[5];
+
+		const transform = new Mat33(
+			a, c, e,
+			b, d, f,
+			0, 0, 1
+		);
+		return transform;
+	}
 }

package/src/geometry/Path.fromString.test.ts

@@ -90,15 +90,38 @@ describe('Path.fromString', () => {
 		]);
 	});
 
+	it('should break compoents at -s', () => {
+		const path = Path.fromString('m1-1 L-1-1-3-4-5-6,5-1');
+		expect(path.parts.length).toBe(4);
+		expect(path.parts).toMatchObject([
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(-1, -1),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(-3, -4),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(-5, -6),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(5, -1),
+			},
+		]);
+	});
+
 	it('should properly handle cubic Bézier curves', () => {
-		const path = Path.fromString('c1,1 0,-3 4 5 C1,1 0.1, 0.1 0, 0');
+		const path = Path.fromString('m1,1 c1,1 0-3 4 5 C1,1 0.1, 0.1 0, 0');
 		expect(path.parts.length).toBe(2);
 		expect(path.parts).toMatchObject([
 			{
 				kind: PathCommandType.CubicBezierTo,
-				controlPoint1: Vec2.of(1, 1),
+				controlPoint1: Vec2.of(2, 2),
 				controlPoint2: Vec2.of(1, -2),
-				endPoint: Vec2.of(5, 3),
+				endPoint: Vec2.of(5, 6),
 			},
 			{
 				kind: PathCommandType.CubicBezierTo,
@@ -120,7 +143,7 @@ describe('Path.fromString', () => {
 			{
 				kind: PathCommandType.QuadraticBezierTo,
 				controlPoint: Vec2.of(1, 1),
-				endPoint: Vec2.of(-2, -3),
+				endPoint: Vec2.of(-1, -1),
 			},
 			{
 				kind: PathCommandType.QuadraticBezierTo,
@@ -130,4 +153,71 @@ describe('Path.fromString', () => {
 		]);
 		expect(path.startPoint).toMatchObject(Vec2.of(1, 1));
 	});
+
+	it('should correctly handle a command followed by multiple sets of arguments', () => {
+		// Commands followed by multiple sets of arguments, for example,
+		//  l 5,10 5,4 3,2,
+		// should be interpreted as multiple commands. Our example, is therefore equivalent to,
+		//  l 5,10 l 5,4 l 3,2
+		
+		const path = Path.fromString(`
+			L5,10 1,1
+			 2,2 -3,-1
+			q 1,2 1,1
+			  -1,-1 -3,-4
+			h -4 -1
+			V 3 5 1
+		`);
+		expect(path.parts).toMatchObject([
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(1, 1),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(2, 2),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(-3, -1),
+			},
+
+			// q 1,2 1,1    -1,-1 -3,-4
+			{
+				kind: PathCommandType.QuadraticBezierTo,
+				controlPoint: Vec2.of(-2, 1),
+				endPoint: Vec2.of(-2, 0),
+			},
+			{
+				kind: PathCommandType.QuadraticBezierTo,
+				controlPoint: Vec2.of(-3, -1),
+				endPoint: Vec2.of(-5, -4),
+			},
+
+			// h -4 -1
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(-9, -4),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(-10, -4),
+			},
+
+			// V 3 5 1
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(-10, 3),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(-10, 5),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(-10, 1),
+			},
+		]);
+		expect(path.startPoint).toMatchObject(Vec2.of(5, 10));
+	});
 });

package/src/geometry/Path.toString.test.ts

@@ -19,14 +19,18 @@ describe('Path.toString', () => {
 	});
 
 	it('should fix rounding errors', () => {
-		const path = new Path(Vec2.of(0.10000001, 0.19999999), [
+		const path = new Path(Vec2.of(0.100000001, 0.199999999), [
 			{
 				kind: PathCommandType.QuadraticBezierTo,
 				controlPoint: Vec2.of(9999, -10.999999995),
-				endPoint: Vec2.of(0.000300001, 1.40000002),
+				endPoint: Vec2.of(0.000300001, 1.400000002),
 			},
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(184.00482359999998, 1)
+			}
 		]);
-		expect(path.toString()).toBe('M0.1,0.2Q9999,-11 0.0003,1.4');
+		expect(path.toString()).toBe('M0.1,0.2Q9999,-11 0.0003,1.4L184.0048236,1');
 	});
 
 	it('should not remove trailing zeroes before decimal points', () => {

package/src/geometry/Path.ts

@@ -303,6 +303,8 @@ export default class Path {
 				const postDecimal = parseInt(roundingDownMatch[3], 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) {
@@ -310,13 +312,21 @@ export default class Path {
 					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');
 
 			// Remove trailing zeroes
-			text = text.replace(/([.][^0]*)0+$/, '$1');
+			text = text.replace(/([.]\d*[^0]+)0+$/, '$1');
+			text = text.replace(/[.]0+$/, '.');
 
 			// Remove trailing period
 			return text.replace(/[.]$/, '');
@@ -371,6 +381,7 @@ export default class Path {
 
 		let lastPos: Point2 = Vec2.zero;
 		let firstPos: Point2|null = null;
+		let startPos: Point2|null = null;
 		let isFirstCommand: boolean = true;
 		const commands: PathCommand[] = [];
 
@@ -413,19 +424,67 @@ export default class Path {
 				endPoint,
 			});
 		};
+		const commandArgCounts: Record<string, number> = {
+			'm': 1,
+			'l': 1,
+			'c': 3,
+			'q': 2,
+			'z': 0,
+			'h': 1,
+			'v': 1,
+		};
 
 		// Each command: Command character followed by anything that isn't a command character
-		const commandExp = /([MmZzLlHhVvCcSsQqTtAa])\s*([^a-zA-Z]*)/g;
+		const commandExp = /([MZLHVCSQTA])\s*([^MZLHVCSQTA]*)/ig;
 		let current;
 		while ((current = commandExp.exec(pathString)) !== null) {
-			const argParts = current[2].trim().split(/[^0-9.-]/).filter(
+			const argParts = current[2].trim().split(/[^0-9Ee.-]/).filter(
 				part => part.length > 0
-			);
-			const numericArgs = argParts.map(arg => parseFloat(arg));
+			).reduce((accumualtor: string[], current: string): string[] => {
+				// As of 09/2022, iOS Safari doesn't support support lookbehind in regular
+				// expressions. As such, we need an alternative.
+				// Because '-' can be used as a path separator, unless preceeded by an 'e' (as in 1e-5),
+				// we need special cases:
+				current = current.replace(/([^eE])[-]/g, '$1 -');
+				const parts = current.split(' -');
+				if (parts[0] !== '') {
+					accumualtor.push(parts[0]);
+				}
+				accumualtor.push(...parts.slice(1).map(part => `-${part}`));
+				return accumualtor;
+			}, []);
+
+			let numericArgs = argParts.map(arg => parseFloat(arg));
+
+			let commandChar = current[1].toLowerCase();
+			let uppercaseCommand = current[1] !== commandChar;
+
+			// Convert commands that don't take points into commands that do.
+			if (commandChar === 'v' || commandChar === 'h') {
+				numericArgs = numericArgs.reduce((accumulator: number[], current: number): number[] => {
+					if (commandChar === 'v') {
+						return accumulator.concat(uppercaseCommand ? lastPos.x : 0, current);
+					} else {
+						return accumulator.concat(current, uppercaseCommand ? lastPos.y : 0);
+					}
+				}, []);
+				commandChar = 'l';
+			} else if (commandChar === 'z') {
+				if (firstPos) {
+					numericArgs = [ firstPos.x, firstPos.y ];
+					firstPos = lastPos;
+				} else {
+					continue;
+				}
+
+				// 'z' always acts like an uppercase lineTo(startPos)
+				uppercaseCommand = true;
+				commandChar = 'l';
+			}
+
 
-			const commandChar = current[1];
-			const uppercaseCommand = commandChar !== commandChar.toLowerCase();
-			const args = numericArgs.reduce((
+			const commandArgCount: number = commandArgCounts[commandChar] ?? 0;
+			const allArgs = numericArgs.reduce((
 				accumulator: Point2[], current, index, parts
 			): Point2[] => {
 				if (index % 2 !== 0) {
@@ -435,82 +494,65 @@ export default class Path {
 				} else {
 					return accumulator;
 				}
-			}, []).map((coordinate: Vec2): Point2 => {
+			}, []).map((coordinate, index): Point2 => {
 				// Lowercase commands are relative, uppercase commands use absolute
 				// positioning
+				let newPos;
 				if (uppercaseCommand) {
-					lastPos = coordinate;
-					return coordinate;
+					newPos = coordinate;
 				} else {
-					lastPos = lastPos.plus(coordinate);
-					return lastPos;
+					newPos = lastPos.plus(coordinate);
 				}
-			});
-
-			let expectedPointArgCount;
 
-			switch (commandChar.toLowerCase()) {
-			case 'm':
-				expectedPointArgCount = 1;
-				moveTo(args[0]);
-				break;
-			case 'l':
-				expectedPointArgCount = 1;
-				lineTo(args[0]);
-				break;
-			case 'z':
-				expectedPointArgCount = 0;
-				// firstPos can be null if the stroke data is just 'z'.
-				if (firstPos) {
-					lineTo(firstPos);
+				if ((index + 1) % commandArgCount === 0) {
+					lastPos = newPos;
 				}
-				break;
-			case 'c':
-				expectedPointArgCount = 3;
-				cubicBezierTo(args[0], args[1], args[2]);
-				break;
-			case 'q':
-				expectedPointArgCount = 2;
-				quadraticBeierTo(args[0], args[1]);
-				break;
-
-			// Horizontal line
-			case 'h':
-				expectedPointArgCount = 0;
 
-				if (uppercaseCommand) {
-					lineTo(Vec2.of(numericArgs[0], lastPos.y));
-				} else {
-					lineTo(lastPos.plus(Vec2.of(numericArgs[0], 0)));
-				}
-				break;
+				return newPos;
+			});
+	
+			if (allArgs.length % commandArgCount !== 0) {
+				throw new Error([
+					`Incorrect number of arguments: got ${JSON.stringify(allArgs)} with a length of ${allArgs.length} ≠ ${commandArgCount}k, k ∈ ℤ.`,
+					`The number of arguments to ${commandChar} must be a multiple of ${commandArgCount}!`,
+					`Command: ${current[0]}`,
+				].join('\n'));
+			}
 
-			// Vertical line
-			case 'v':
-				expectedPointArgCount = 0;
+			for (let argPos = 0; argPos < allArgs.length; argPos += commandArgCount) {
+				const args = allArgs.slice(argPos, argPos + commandArgCount);
 
-				if (uppercaseCommand) {
-					lineTo(Vec2.of(lastPos.x, numericArgs[1]));
-				} else {
-					lineTo(lastPos.plus(Vec2.of(0, numericArgs[1])));
+				switch (commandChar.toLowerCase()) {
+				case 'm':
+					if (argPos === 0) {
+						moveTo(args[0]);
+					} else {
+						lineTo(args[0]);
+					}
+					break;
+				case 'l':
+					lineTo(args[0]);
+					break;
+				case 'c':
+					cubicBezierTo(args[0], args[1], args[2]);
+					break;
+				case 'q':
+					quadraticBeierTo(args[0], args[1]);
+					break;
+				default:
+					throw new Error(`Unknown path command ${commandChar}`);
 				}
-				break;
-			default:
-				throw new Error(`Unknown path command ${commandChar}`);
-			}
 
-			if (args.length !== expectedPointArgCount) {
-				throw new Error(`
-					Incorrect number of arguments: got ${JSON.stringify(args)} with a length of ${args.length} ≠ ${expectedPointArgCount}.
-				`.trim());
+				isFirstCommand = false;
 			}
 
-			if (args.length > 0) {
-				firstPos ??= args[0];
+			if (allArgs.length > 0) {
+				firstPos ??= allArgs[0];
+				startPos ??= firstPos;
+				lastPos = allArgs[allArgs.length - 1];
 			}
-			isFirstCommand = false;
 		}
 
-		return new Path(firstPos ?? Vec2.zero, commands);
+		return new Path(startPos ?? Vec2.zero, commands);
 	}
 }

package/src/geometry/Rect2.test.ts

@@ -148,4 +148,13 @@ describe('Rect2', () => {
 			expect(Rect2.empty.divideIntoGrid(1000, 10000).length).toBe(1);
 		});
 	});
+
+	it('division of rectangle', () => {
+		expect(new Rect2(0, 0, 2, 1).divideIntoGrid(2, 2)).toMatchObject(
+			[
+				new Rect2(0, 0, 1, 0.5), new Rect2(1, 0, 1, 0.5),
+				new Rect2(0, 0.5, 1, 0.5), new Rect2(1, 0.5, 1, 0.5),
+			]
+		);
+	});
 });

package/src/geometry/Rect2.ts

@@ -67,22 +67,39 @@ export default class Rect2 {
 	}
 
 	public intersects(other: Rect2): boolean {
-		return this.intersection(other) !== null;
+		// Project along x/y axes.
+		const thisMinX = this.x;
+		const thisMaxX = thisMinX + this.w;
+		const otherMinX = other.x;
+		const otherMaxX = other.x + other.w;
+
+		if (thisMaxX < otherMinX || thisMinX > otherMaxX) {
+			return false;
+		}
+
+
+		const thisMinY = this.y;
+		const thisMaxY = thisMinY + this.h;
+		const otherMinY = other.y;
+		const otherMaxY = other.y + other.h;
+
+		if (thisMaxY < otherMinY || thisMinY > otherMaxY) {
+			return false;
+		}
+
+		return true;
 	}
 
 	// Returns the overlap of this and [other], or null, if no such
 	//          overlap exists
 	public intersection(other: Rect2): Rect2|null {
-		const topLeft = this.topLeft.zip(other.topLeft, Math.max);
-		const bottomRight = this.bottomRight.zip(other.bottomRight, Math.min);
-
-		// The intersection can't be outside of this rectangle
-		if (!this.containsPoint(topLeft) || !this.containsPoint(bottomRight)) {
-			return null;
-		} else if (!other.containsPoint(topLeft) || !other.containsPoint(bottomRight)) {
+		if (!this.intersects(other)) {
 			return null;
 		}
 
+		const topLeft = this.topLeft.zip(other.topLeft, Math.max);
+		const bottomRight = this.bottomRight.zip(other.bottomRight, Math.min);
+
 		return Rect2.fromCorners(topLeft, bottomRight);
 	}
 
@@ -167,6 +184,14 @@ export default class Rect2 {
 		return this.topLeft.plus(Vec2.of(0, this.h));
 	}
 
+	public get width() {
+		return this.w;
+	}
+
+	public get height() {
+		return this.h;
+	}
+
 	// Returns edges in the order
 	// [ rightEdge, topEdge, leftEdge, bottomEdge ]
 	public getEdges(): LineSegment2[] {

package/src/rendering/Display.ts

@@ -31,7 +31,7 @@ export default class Display {
 			throw new Error(`Unknown rendering mode, ${mode}!`);
 		}
 
-		const cacheBlockResolution = Vec2.of(500, 500);
+		const cacheBlockResolution = Vec2.of(600, 600);
 		this.cache = new RenderingCache({
 			createRenderer: () => {
 				if (mode === RenderingMode.DummyRenderer) {
@@ -54,8 +54,9 @@ export default class Display {
 			},
 			blockResolution: cacheBlockResolution,
 			cacheSize: 500 * 500 * 4 * 200,
-			maxScale: 1.4,
-			minComponentsPerCache: 10,
+			maxScale: 1.5,
+			minComponentsPerCache: 50,
+			minComponentsToUseCache: 120,
 		});
 
 		this.editor.notifier.on(EditorEventType.DisplayResized, event => {

package/src/rendering/caching/CacheRecord.ts

@@ -21,7 +21,7 @@ export default class CacheRecord {
 	}
 
 	public startRender(): AbstractRenderer {
-		this.lastUsedCycle = this.cacheState.currentRenderingCycle++;
+		this.lastUsedCycle = this.cacheState.currentRenderingCycle;
 		if (!this.allocd) {
 			throw new Error('Only alloc\'d canvases can be rendered to');
 		}
@@ -45,6 +45,7 @@ export default class CacheRecord {
 		}
 		this.allocd = true;
 		this.onBeforeDeallocCallback = newDeallocCallback;
+		this.lastUsedCycle = this.cacheState.currentRenderingCycle;
 	}
 
 	public getLastUsedCycle(): number {

package/src/rendering/caching/CacheRecordManager.ts

@@ -39,17 +39,7 @@ export class CacheRecordManager {
 
 	// Returns null if there are no cache records. Returns an unalloc'd record if one exists.
 	private getLeastRecentlyUsedRecord(): CacheRecord|null {
-		let lruSoFar: CacheRecord|null = null;
-		for (const rec of this.cacheRecords) {
-			if (!rec.isAllocd()) {
-				return rec;
-			}
-
-			if (!lruSoFar || rec.getLastUsedCycle() < lruSoFar.getLastUsedCycle()) {
-				lruSoFar = rec;
-			}
-		}
-
-		return lruSoFar;
+		this.cacheRecords.sort((a, b) => a.getLastUsedCycle() - b.getLastUsedCycle());
+		return this.cacheRecords[0];
 	}
 }

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

@@ -10,7 +10,7 @@ import Viewport from '../../Viewport';
 import Mat33 from '../../geometry/Mat33';
 
 describe('RenderingCache', () => {
-	const testPath = Path.fromString('M0,0 l100,500 l-20,20');
+	const testPath = Path.fromString('M0,0 l100,500 l-20,20 L-100,-100');
 	const testStroke = new Stroke([ testPath.toRenderable({ fill: Color4.purple }) ]);
 
 	it('should create a root node large enough to contain the viewport', () => {

package/src/rendering/caching/RenderingCache.ts

@@ -37,11 +37,12 @@ export default class RenderingCache {
 		}
 
 		if (!this.rootNode) {
-			// Ensure that the node is just big enough to contain the entire viewport.
-			const rootNodeSize = visibleRect.maxDimension;
+			// Adjust the node so that it has the correct aspect ratio
+			const res = this.partialSharedState.props.blockResolution;
+
 			const topLeft = visibleRect.topLeft;
 			this.rootNode = new RenderingCacheNode(
-				new Rect2(topLeft.x, topLeft.y, rootNodeSize, rootNodeSize),
+				new Rect2(topLeft.x, topLeft.y, res.x, res.y),
 				this.getSharedState()
 			);
 		}
@@ -51,6 +52,12 @@ export default class RenderingCache {
 		}
 
 		this.rootNode = this.rootNode!.smallestChildContaining(visibleRect) ?? this.rootNode;
-        this.rootNode!.renderItems(screenRenderer, [ image ], viewport);
+
+		const visibleLeaves = image.getLeavesIntersectingRegion(viewport.visibleRect, rect => screenRenderer.isTooSmallToRender(rect));
+		if (visibleLeaves.length > this.partialSharedState.props.minComponentsToUseCache) {
+			this.rootNode!.renderItems(screenRenderer, [ image ], viewport);
+		} else {
+			image.render(screenRenderer, visibleRect);
+		}
 	}
 }