js-draw 0.15.1 → 0.15.2

package/src/components/ImageBackground.ts

@@ -0,0 +1,167 @@
+import Color4 from '../Color4';
+import Editor from '../Editor';
+import EditorImage, { EditorImageEventType } from '../EditorImage';
+import { DispatcherEventListener } from '../EventDispatcher';
+import SerializableCommand from '../commands/SerializableCommand';
+import LineSegment2 from '../math/LineSegment2';
+import Mat33 from '../math/Mat33';
+import Rect2 from '../math/Rect2';
+import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
+import AbstractComponent from './AbstractComponent';
+import { ImageComponentLocalization } from './localization';
+import RestyleableComponent, { ComponentStyle, createRestyleComponentCommand } from './RestylableComponent';
+
+export enum BackgroundType {
+	SolidColor,
+	None,
+}
+
+export const imageBackgroundCSSClassName = 'js-draw-image-background';
+
+// Represents the background of an image in the editor.
+export default class ImageBackground extends AbstractComponent implements RestyleableComponent {
+	protected contentBBox: Rect2;
+	private viewportSizeChangeListener: DispatcherEventListener|null = null;
+
+	// eslint-disable-next-line @typescript-eslint/prefer-as-const
+	readonly isRestylableComponent: true = true;
+
+	public constructor(
+		private backgroundType: BackgroundType, private mainColor: Color4
+	) {
+		super('image-background', 0);
+		this.contentBBox = Rect2.empty;
+	}
+	
+	public getStyle(): ComponentStyle {
+		let color: Color4|undefined = this.mainColor;
+
+		if (this.backgroundType === BackgroundType.None) {
+			color = undefined;
+		}
+
+		return {
+			color,
+		};
+	}
+
+	public updateStyle(style: ComponentStyle): SerializableCommand {
+		return createRestyleComponentCommand(this.getStyle(), style, this);
+	}
+
+	// @internal
+	public forceStyle(style: ComponentStyle, _editor: Editor | null): void {
+		const fill = style.color;
+
+		if (!fill) {
+			return;
+		}
+
+		this.mainColor = fill;
+		if (fill.eq(Color4.transparent)) {
+			this.backgroundType = BackgroundType.None;
+		} else {
+			this.backgroundType = BackgroundType.SolidColor;
+		}
+	}
+
+	public onAddToImage(image: EditorImage) {
+		if (this.viewportSizeChangeListener) {
+			console.warn('onAddToImage called when background is already in an image');
+			this.onRemoveFromImage();
+		}
+
+		this.viewportSizeChangeListener = image.notifier.on(
+			EditorImageEventType.ExportViewportChanged, () => {
+				this.recomputeBBox(image);
+			});
+		this.recomputeBBox(image);
+	}
+
+	public onRemoveFromImage(): void {
+		this.viewportSizeChangeListener?.remove();
+		this.viewportSizeChangeListener = null;
+	}
+
+	private recomputeBBox(image: EditorImage) {
+		const importExportRect = image.getImportExportViewport().visibleRect;
+		if (!this.contentBBox.eq(importExportRect)) {
+			this.contentBBox = importExportRect;
+
+			// Re-render this if already added to the EditorImage.
+			image.queueRerenderOf(this);
+		}
+	}
+
+	public render(canvas: AbstractRenderer, visibleRect?: Rect2) {
+		if (this.backgroundType === BackgroundType.None) {
+			return;
+		}
+		canvas.startObject(this.contentBBox);
+
+		if (this.backgroundType === BackgroundType.SolidColor) {
+			// If the rectangle for this region contains the visible rect,
+			// we can fill the entire visible rectangle (which may be more efficient than
+			// filling the entire region for this.)
+			if (visibleRect) {
+				const intersection = visibleRect.intersection(this.contentBBox);
+				if (intersection) {
+					canvas.fillRect(intersection, this.mainColor);
+				}
+			} else {
+				canvas.fillRect(this.contentBBox, this.mainColor);
+			}
+		}
+
+		canvas.endObject(this.getLoadSaveData(), [ imageBackgroundCSSClassName ]);
+	}
+
+	public intersects(lineSegment: LineSegment2): boolean {
+		return this.contentBBox.getEdges().some(edge => edge.intersects(lineSegment));
+	}
+
+	public isSelectable(): boolean {
+		return false;
+	}
+
+	protected serializeToJSON() {
+		return {
+			mainColor: this.mainColor.toHexString(),
+			backgroundType: this.backgroundType,
+		};
+	}
+
+	protected applyTransformation(_affineTransfm: Mat33) {
+		// Do nothing — it doesn't make sense to transform the background.
+	}
+
+	public description(localizationTable: ImageComponentLocalization) {
+		if (this.backgroundType === BackgroundType.SolidColor) {
+			return localizationTable.filledBackgroundWithColor(this.mainColor.toString());
+		} else {
+			return localizationTable.emptyBackground;
+		}
+	}
+
+	protected createClone(): AbstractComponent {
+		return new ImageBackground(this.backgroundType, this.mainColor);
+	}
+
+	// @internal
+	public static deserializeFromJSON(json: any) {
+		if (typeof json === 'string') {
+			json = JSON.parse(json);
+		}
+
+		if (typeof json.mainColor !== 'string') {
+			throw new Error('Error deserializing — mainColor must be of type string.');
+		}
+
+		const backgroundType = json.backgroundType === BackgroundType.SolidColor ? BackgroundType.SolidColor : BackgroundType.None;
+		const mainColor = Color4.fromHex(json.mainColor);
+
+		return new ImageBackground(backgroundType, mainColor);
+	}
+}
+
+AbstractComponent.registerComponent('image-background', ImageBackground.deserializeFromJSON);

package/src/components/ImageComponent.ts

@@ -88,7 +88,9 @@ export default class ImageComponent extends AbstractComponent {
 	}
 
 	public render(canvas: AbstractRenderer, _visibleRect?: Rect2): void {
+		canvas.startObject(this.contentBBox);
 		canvas.drawImage(this.image);
+		canvas.endObject(this.getLoadSaveData());
 	}
 
 	public getProportionalRenderingTime(): number {

package/src/components/builders/ArrowBuilder.ts

@@ -1,4 +1,4 @@
-import { PathCommandType } from '../../math/Path';
+import Path, { PathCommandType } from '../../math/Path';
 import Rect2 from '../../math/Rect2';
 import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
@@ -7,14 +7,14 @@ import AbstractComponent from '../AbstractComponent';
 import Stroke from '../Stroke';
 import { ComponentBuilder, ComponentBuilderFactory } from './types';
 
-export const makeArrowBuilder: ComponentBuilderFactory = (initialPoint: StrokeDataPoint, _viewport: Viewport) => {
-	return new ArrowBuilder(initialPoint);
+export const makeArrowBuilder: ComponentBuilderFactory = (initialPoint: StrokeDataPoint, viewport: Viewport) => {
+	return new ArrowBuilder(initialPoint, viewport);
 };
 
 export default class ArrowBuilder implements ComponentBuilder {
 	private endPoint: StrokeDataPoint;
 
-	public constructor(private readonly startPoint: StrokeDataPoint) {
+	public constructor(private readonly startPoint: StrokeDataPoint, private readonly viewport: Viewport) {
 		this.endPoint = startPoint;
 	}
 
@@ -28,10 +28,10 @@ export default class ArrowBuilder implements ComponentBuilder {
 	}
 
 	private buildPreview(): Stroke {
-		const startPoint = this.startPoint.pos;
+		const lineStartPoint = this.startPoint.pos;
 		const endPoint = this.endPoint.pos;
-		const toEnd = endPoint.minus(startPoint).normalized();
-		const arrowLength = endPoint.minus(startPoint).length();
+		const toEnd = endPoint.minus(lineStartPoint).normalized();
+		const arrowLength = endPoint.minus(lineStartPoint).length();
 
 		// Ensure that the arrow tip is smaller than the arrow.
 		const arrowTipSize = Math.min(this.getLineWidth(), arrowLength / 2);
@@ -45,42 +45,45 @@ export default class ArrowBuilder implements ComponentBuilder {
 		const scaledStartNormal = lineNormal.times(startSize);
 		const scaledBaseNormal = lineNormal.times(endSize);
 
+		const path = new Path(arrowTipBase.minus(scaledBaseNormal), [
+			// Stem
+			{
+				kind: PathCommandType.LineTo,
+				point: lineStartPoint.minus(scaledStartNormal),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: lineStartPoint.plus(scaledStartNormal),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: arrowTipBase.plus(scaledBaseNormal),
+			},
+
+			// Head
+			{
+				kind: PathCommandType.LineTo,
+				point: arrowTipBase.plus(lineNormal.times(arrowTipSize).plus(scaledBaseNormal)),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: endPoint.plus(toEnd.times(endSize)),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: arrowTipBase.plus(lineNormal.times(-arrowTipSize).minus(scaledBaseNormal)),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: arrowTipBase.minus(scaledBaseNormal),
+			},
+		// Round all points in the arrow (to remove unnecessary decimal places)
+		]).mapPoints(point => this.viewport.roundPoint(point));
+
 		const preview = new Stroke([
 			{
-				startPoint: arrowTipBase.minus(scaledBaseNormal),
-				commands: [
-					// Stem
-					{
-						kind: PathCommandType.LineTo,
-						point: startPoint.minus(scaledStartNormal),
-					},
-					{
-						kind: PathCommandType.LineTo,
-						point: startPoint.plus(scaledStartNormal),
-					},
-					{
-						kind: PathCommandType.LineTo,
-						point: arrowTipBase.plus(scaledBaseNormal),
-					},
-
-					// Head
-					{
-						kind: PathCommandType.LineTo,
-						point: arrowTipBase.plus(lineNormal.times(arrowTipSize).plus(scaledBaseNormal))
-					},
-					{
-						kind: PathCommandType.LineTo,
-						point: endPoint.plus(toEnd.times(endSize)),
-					},
-					{
-						kind: PathCommandType.LineTo,
-						point: arrowTipBase.plus(lineNormal.times(-arrowTipSize).minus(scaledBaseNormal)),
-					},
-					{
-						kind: PathCommandType.LineTo,
-						point: arrowTipBase.minus(scaledBaseNormal),
-					},
-				],
+				startPoint: path.startPoint,
+				commands: path.parts,
 				style: {
 					fill: this.startPoint.color,
 				}

package/src/components/builders/LineBuilder.ts

@@ -1,4 +1,4 @@
-import { PathCommandType } from '../../math/Path';
+import Path, { PathCommandType } from '../../math/Path';
 import Rect2 from '../../math/Rect2';
 import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
@@ -7,14 +7,14 @@ import AbstractComponent from '../AbstractComponent';
 import Stroke from '../Stroke';
 import { ComponentBuilder, ComponentBuilderFactory } from './types';
 
-export const makeLineBuilder: ComponentBuilderFactory = (initialPoint: StrokeDataPoint, _viewport: Viewport) => {
-	return new LineBuilder(initialPoint);
+export const makeLineBuilder: ComponentBuilderFactory = (initialPoint: StrokeDataPoint, viewport: Viewport) => {
+	return new LineBuilder(initialPoint, viewport);
 };
 
 export default class LineBuilder implements ComponentBuilder {
 	private endPoint: StrokeDataPoint;
 
-	public constructor(private readonly startPoint: StrokeDataPoint) {
+	public constructor(private readonly startPoint: StrokeDataPoint, private readonly viewport: Viewport) {
 		this.endPoint = startPoint;
 	}
 
@@ -35,31 +35,29 @@ export default class LineBuilder implements ComponentBuilder {
 		const scaledStartNormal = lineNormal.times(startSize);
 		const scaledEndNormal = lineNormal.times(endSize);
 
-		const preview = new Stroke([
+		const strokeStartPoint = startPoint.minus(scaledStartNormal);
+
+		const path = new Path(strokeStartPoint, [
+			{
+				kind: PathCommandType.LineTo,
+				point: startPoint.plus(scaledStartNormal),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: endPoint.plus(scaledEndNormal),
+			},
 			{
-				startPoint: startPoint.minus(scaledStartNormal),
-				commands: [
-					{
-						kind: PathCommandType.LineTo,
-						point: startPoint.plus(scaledStartNormal),
-					},
-					{
-						kind: PathCommandType.LineTo,
-						point: endPoint.plus(scaledEndNormal),
-					},
-					{
-						kind: PathCommandType.LineTo,
-						point: endPoint.minus(scaledEndNormal),
-					},
-					{
-						kind: PathCommandType.LineTo,
-						point: startPoint.minus(scaledStartNormal),
-					},
-				],
-				style: {
-					fill: this.startPoint.color,
-				}
-			}
+				kind: PathCommandType.LineTo,
+				point: endPoint.minus(scaledEndNormal),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: startPoint.minus(scaledStartNormal),
+			},
+		]).mapPoints(point => this.viewport.roundPoint(point));
+
+		const preview = new Stroke([
+			path.toRenderable({ fill: this.startPoint.color })
 		]);
 
 		return preview;

package/src/components/builders/RectangleBuilder.ts

@@ -49,7 +49,7 @@ export default class RectangleBuilder implements ComponentBuilder {
 		).transformedBy(
 			// Rotate the canvas rectangle so that its rotation matches the screen
 			rotationMat
-		);
+		).mapPoints(point => this.viewport.roundPoint(point));
 
 		const preview = new Stroke([
 			path.toRenderable({

package/src/components/lib.ts

@@ -9,6 +9,7 @@ import Stroke from './Stroke';
 import TextComponent from './TextComponent';
 import ImageComponent from './ImageComponent';
 import RestyleableComponent, { createRestyleComponentCommand } from './RestylableComponent';
+import ImageBackground from './ImageBackground';
 
 export {
 	Stroke,
@@ -18,5 +19,6 @@ export {
 
 	TextComponent,
 	Stroke as StrokeComponent,
+	ImageBackground as BackgroundComponent,
 	ImageComponent,
 };

package/src/components/localization.ts

@@ -4,6 +4,8 @@ export interface ImageComponentLocalization {
 	imageNode: (description: string)=> string;
 	stroke: string;
     svgObject: string;
+	emptyBackground: string;
+	filledBackgroundWithColor: (color: string)=> string;
 
 	restyledElements: string;
 }
@@ -13,6 +15,8 @@ export const defaultComponentLocalization: ImageComponentLocalization = {
 	stroke: 'Stroke',
 	svgObject: 'SVG Object',
 	restyledElements: 'Restyled elements',
+	emptyBackground: 'Empty background',
+	filledBackgroundWithColor: (color) => `Filled background (${color})`,
 	text: (text) => `Text object: ${text}`,
 	imageNode: (description: string) => `Image: ${description}`,
 };

package/src/math/Mat33.test.ts

@@ -72,7 +72,7 @@ describe('Mat33 tests', () => {
 	});
 
 	it('90 degree z-rotation matricies should rotate 90 degrees counter clockwise', () => {
-		const fuzz = 0.01;
+		const fuzz = 0.001;
 
 		const M = Mat33.zRotation(Math.PI / 2);
 		const rotated = M.transformVec2(Vec2.unitX);
@@ -80,6 +80,18 @@ describe('Mat33 tests', () => {
 		expect(M.transformVec2(rotated)).objEq(Vec2.unitX.times(-1), fuzz);
 	});
 
+	it('z-rotation matricies should preserve the given origin', () => {
+		const testPairs: Array<[number, Vec2]> = [
+			[ Math.PI / 2, Vec2.zero ],
+			[ -Math.PI / 2, Vec2.zero ],
+			[ -Math.PI / 2, Vec2.of(10, 10) ],
+		];
+
+		for (const [ angle, center ] of testPairs) {
+			expect(Mat33.zRotation(angle, center).transformVec2(center)).objEq(center);
+		}
+	});
+
 	it('translation matricies should translate Vec2s', () => {
 		const fuzz = 0.01;
 
@@ -140,6 +152,13 @@ describe('Mat33 tests', () => {
 		).objEq(Vec2.unitX, fuzz);
 	});
 
+	it('z-rotation should preserve given origin', () => {
+		const rotationOrigin = Vec2.of(75.16363373235318, 104.29870408043762);
+		const angle = 6.205048847547065;
+
+		expect(Mat33.zRotation(angle, rotationOrigin).transformVec2(rotationOrigin)).objEq(rotationOrigin);
+	});
+
 	it('should correctly apply a mapping to all components', () => {
 		expect(
 			new Mat33(

package/src/math/Mat33.ts

@@ -240,11 +240,49 @@ export default class Mat33 {
 	}
 
 	public toString(): string {
-		return `
-⎡ ${this.a1},\t ${this.a2},\t ${this.a3}\t ⎤
-⎢ ${this.b1},\t ${this.b2},\t ${this.b3}\t ⎥
-⎣ ${this.c1},\t ${this.c2},\t ${this.c3}\t ⎦
-		`.trimEnd().trimStart();
+		let result = '';
+		const maxColumnLens = [ 0, 0, 0 ];
+
+		// Determine the longest item in each column so we can pad the others to that
+		// length.
+		for (const row of this.rows) {
+			for (let i = 0; i < 3; i++) {
+				maxColumnLens[i] = Math.max(maxColumnLens[0], `${row.at(i)}`.length);
+			}
+		}
+
+		for (let i = 0; i < 3; i++) {
+			if (i === 0) {
+				result += '⎡ ';
+			} else if (i === 1) {
+				result += '⎢ ';
+			} else {
+				result += '⎣ ';
+			}
+
+			// Add each component of the ith row (after padding it)
+			for (let j = 0; j < 3; j++) {
+				const val = this.rows[i].at(j).toString();
+
+				let padding = '';
+				for (let i = val.length; i < maxColumnLens[j]; i++) {
+					padding += ' ';
+				}
+
+				result += val + ', ' + padding;
+			}
+
+			if (i === 0) {
+				result += ' ⎤';
+			} else if (i === 1) {
+				result += ' ⎥';
+			} else {
+				result += ' ⎦';
+			}
+			result += '\n';
+		}
+
+		return result.trimEnd();
 	}
 
 	/**
@@ -302,6 +340,10 @@ export default class Mat33 {
 	}
 
 	public static zRotation(radians: number, center: Point2 = Vec2.zero): Mat33 {
+		if (radians === 0) {
+			return Mat33.identity;
+		}
+
 		const cos = Math.cos(radians);
 		const sin = Math.sin(radians);
 

package/src/math/Path.ts

@@ -209,39 +209,42 @@ export default class Path {
 		return result;
 	}
 
+	private static mapPathCommand(part: PathCommand, mapping: (point: Point2)=> Point2): PathCommand {
+		switch (part.kind) {
+		case PathCommandType.MoveTo:
+		case PathCommandType.LineTo:
+			return {
+				kind: part.kind,
+				point: mapping(part.point),
+			};
+			break;
+		case PathCommandType.CubicBezierTo:
+			return {
+				kind: part.kind,
+				controlPoint1: mapping(part.controlPoint1),
+				controlPoint2: mapping(part.controlPoint2),
+				endPoint: mapping(part.endPoint),
+			};
+			break;
+		case PathCommandType.QuadraticBezierTo:
+			return {
+				kind: part.kind,
+				controlPoint: mapping(part.controlPoint),
+				endPoint: mapping(part.endPoint),
+			};
+			break;
+		}
+
+		const exhaustivenessCheck: never = part;
+		return exhaustivenessCheck;
+	}
+
 	public mapPoints(mapping: (point: Point2)=>Point2): Path {
 		const startPoint = mapping(this.startPoint);
 		const newParts: PathCommand[] = [];
 
-		let exhaustivenessCheck: never;
 		for (const part of this.parts) {
-			switch (part.kind) {
-			case PathCommandType.MoveTo:
-			case PathCommandType.LineTo:
-				newParts.push({
-					kind: part.kind,
-					point: mapping(part.point),
-				});
-				break;
-			case PathCommandType.CubicBezierTo:
-				newParts.push({
-					kind: part.kind,
-					controlPoint1: mapping(part.controlPoint1),
-					controlPoint2: mapping(part.controlPoint2),
-					endPoint: mapping(part.endPoint),
-				});
-				break;
-			case PathCommandType.QuadraticBezierTo:
-				newParts.push({
-					kind: part.kind,
-					controlPoint: mapping(part.controlPoint),
-					endPoint: mapping(part.endPoint),
-				});
-				break;
-			default:
-				exhaustivenessCheck = part;
-				return exhaustivenessCheck;
-			}
+			newParts.push(Path.mapPathCommand(part, mapping));
 		}
 
 		return new Path(startPoint, newParts);
@@ -431,6 +434,62 @@ export default class Path {
 		};
 	}
 
+	/**
+	 * @returns a Path that, when rendered, looks roughly equivalent to the given path.
+	 */
+	public static visualEquivalent(renderablePath: RenderablePathSpec, visibleRect: Rect2): RenderablePathSpec {
+		const path = Path.fromRenderable(renderablePath);
+		const strokeWidth = renderablePath.style.stroke?.width ?? 0;
+		const onlyStroked = strokeWidth > 0 && renderablePath.style.fill.a === 0;
+
+		// Scale the expanded rect --- the visual equivalent is only close for huge strokes.
+		const expandedRect = visibleRect.grownBy(strokeWidth)
+			.transformedBoundingBox(Mat33.scaling2D(2, visibleRect.center));
+
+		// TODO: Handle simplifying very small paths.
+		if (expandedRect.containsRect(path.bbox.grownBy(strokeWidth))) {
+			return renderablePath;
+		}
+		const parts: PathCommand[] = [];
+		let startPoint = path.startPoint;
+
+		for (const part of path.parts) {
+			const partBBox = Path.computeBBoxForSegment(startPoint, part).grownBy(strokeWidth);
+			let endPoint;
+
+			if (part.kind === PathCommandType.LineTo || part.kind === PathCommandType.MoveTo) {
+				endPoint = part.point;
+			} else {
+				endPoint = part.endPoint;
+			}
+
+			const intersectsVisible = partBBox.intersects(visibleRect);
+
+			if (intersectsVisible) {
+				// TODO: Can we trim parts of paths that intersect the visible rectangle?
+				parts.push(part);
+			} else if (onlyStroked || part.kind === PathCommandType.MoveTo) {
+				// We're stroking (not filling) and the path doesn't intersect the bounding box.
+				// Don't draw it, but preserve the endpoints.
+				parts.push({
+					kind: PathCommandType.MoveTo,
+					point: endPoint,
+				});
+			}
+			else {
+				// Otherwise, we may be filling. Try to roughly preserve the filled region.
+				parts.push({
+					kind: PathCommandType.LineTo,
+					point: endPoint,
+				});
+			}
+
+			startPoint = endPoint;
+		}
+
+		return new Path(path.startPoint, parts).toRenderable(renderablePath.style);
+	}
+
 	private cachedStringVersion: string|null = null;
 
 	public toString(useNonAbsCommands?: boolean): string {

package/src/math/Vec3.test.ts

@@ -31,6 +31,10 @@ describe('Vec3', () => {
 		expect(Vec3.zero.orthog().dot(Vec3.zero)).toBe(0);
 	});
 
+	it('.minus should return the difference between two vectors', () => {
+		expect(Vec3.of(1, 2, 3).minus(Vec3.of(4, 5, 6))).objEq(Vec3.of(1 - 4, 2 - 5, 3 - 6));
+	});
+
 	it('.orthog should return a unit vector', () => {
 		expect(Vec3.zero.orthog().magnitude()).toBe(1);
 		expect(Vec3.unitZ.orthog().magnitude()).toBe(1);

package/src/math/Vec3.ts

@@ -77,7 +77,7 @@ export default class Vec3 {
 	}
 
 	public minus(v: Vec3): Vec3 {
-		return this.plus(v.times(-1));
+		return Vec3.of(this.x - v.x, this.y - v.y, this.z - v.z);
 	}
 
 	public dot(other: Vec3): number {

package/src/rendering/Display.ts

@@ -74,7 +74,7 @@ export default class Display {
 			},
 			blockResolution: cacheBlockResolution,
 			cacheSize: 600 * 600 * 4 * 90,
-			maxScale: 1.4,
+			maxScale: 1.3,
 
 			// Require about 20 strokes with 4 parts each to cache an image in one of the
 			// parts of the cache grid.