Debugging - TileInvalidtions: Use the same section instead of rapidly…

… deleting / adding new ones.

Signed-off-by: Gökay Şatır <[email protected]>
Change-Id: I8ea85ff191b7dcb1681925c97f582987d1893fdf

browser/src/canvas/sections/InvalidationRectangleSection.ts

@@ -11,50 +11,85 @@
  */
 
 const sectionName = 'TileInvalidationRectangle';
-let counter = 0; // Unique counter.
-let sectionCount = 0;
 
 class InvalidationRectangleSection extends CanvasSectionObject {
 	name: string = sectionName;
-	documentObject: boolean = true;
+
+	/*
+		We don't want visibility issues.
+		Since there will be more than one rectangles in this section, position property (thus document section) is not useful anymore.
+	*/
+	windowSection: boolean = true;
 	showSection: boolean = true;
 	zIndex: number = L.CSections.DefaultForDocumentObjects.zIndex;
 	drawingOrder: number = L.CSections.DefaultForDocumentObjects.drawingOrder;
 	processingOrder: number =
 		L.CSections.DefaultForDocumentObjects.processingOrder;
+	interactable: boolean = false;
 
 	constructor() {
 		super();
+		this.sectionProperties.rectangleList = [];
+	}
+
+	addRectangle(x: number, y: number, width: number, height: number) {
+		const rectangleList: Array<any> = this.sectionProperties
+			.rectangleList as Array<any>;
 
-		this.name += ' ' + counter;
-		counter += 1;
-		sectionCount++;
+		if (rectangleList.length === 5) rectangleList.pop();
 
-		this.sectionProperties.deletionTimeout = null;
+		rectangleList.unshift([x, y, width, height]);
 	}
 
 	onDraw(
 		frameCount?: number,
 		elapsedTime?: number,
 		subsetBounds?: Bounds,
 	): void {
-		if (
-			!this.sectionProperties.deletionTimeout &&
-			(sectionCount > 1 || !app.map._docLayer._debug.tileInvalidationsOn)
-		)
-			this.deleteThisSection();
-
-		this.context.globalAlpha = 0.5;
+		const rectangleList: Array<any> = this.sectionProperties
+			.rectangleList as Array<any>;
 		this.context.strokeStyle = 'red';
-		this.context.strokeRect(0, 0, this.size[0], this.size[1]);
+
+		const anchor: number[] = this.containerObject.getDocumentAnchor();
+		const xDiff = anchor[0] - this.documentTopLeft[0];
+		const yDiff = anchor[1] - this.documentTopLeft[1];
+
+		for (let i = 0; i < rectangleList.length; i++) {
+			this.context.globalAlpha = 1 - 0.15 * i;
+			this.context.strokeRect(
+				xDiff + rectangleList[i][0],
+				yDiff + rectangleList[i][1],
+				rectangleList[i][2],
+				rectangleList[i][3],
+			);
+		}
 		this.context.globalAlpha = 1;
 	}
 
-	deleteThisSection() {
-		sectionCount--;
-		this.sectionProperties.deletionTimeout = setTimeout(() => {
+	checkDeletion() {
+		if (this.sectionProperties.rectangleList.length > 0) {
+			this.sectionProperties.rectangleList.pop();
+			setTimeout(() => {
+				this.checkDeletion();
+			}, 1000);
+		} else {
 			app.sectionContainer.removeSection(this.name);
-		}, 1000);
+		}
+	}
+
+	private static getSection(): InvalidationRectangleSection {
+		let section: InvalidationRectangleSection;
+		if (app.sectionContainer.doesSectionExist(sectionName))
+			section = app.sectionContainer.getSectionWithName(sectionName);
+		else {
+			section = new InvalidationRectangleSection();
+			app.sectionContainer.addSection(section);
+			setTimeout(() => {
+				section.checkDeletion();
+			}, 2000); // Start the cycle.
+		}
+
+		return section;
 	}
 
 	public static setRectangle(
@@ -63,10 +98,7 @@ class InvalidationRectangleSection extends CanvasSectionObject {
 		width: number,
 		height: number,
 	) {
-		const section = new InvalidationRectangleSection();
-		app.sectionContainer.addSection(section);
-		section.size[0] = width;
-		section.size[1] = height;
-		section.setPosition(x, y);
+		const section = this.getSection();
+		section.addRectangle(x, y, width, height);
 	}
 }