import * as Diagramming from '@mindfusion/diagramming';
import * as Drawing from '@mindfusion/drawing';

namespace StressTest {

	const ShapeNode = Diagramming.ShapeNode;
	const GlassEffect = Diagramming.GlassEffect;
	const Alignment = Diagramming.Alignment;
	const Rect = Drawing.Rect;

	// create a DiagramView component that wraps the "diagram" canvas
	let diagramView = Diagramming.DiagramView.create(<HTMLCanvasElement>document.getElementById("diagram"));

	function generateDiagram() {
		var total = 10000;
		var rowSize = Math.sqrt(total);
		var size = 20;
		var dist = 30;

		var diagram = new Diagramming.Diagram();

		diagram.defaultShape = Diagramming.Shapes.Rectangle();
		diagram.linkHeadShapeSize = 2;
		diagram.validityChecks = false;
		diagram.autoResize = Diagramming.AutoResize.None;

		var diagSize = rowSize * dist;
		diagram.bounds = new Rect(
			0, 0, diagSize, diagSize);

		var x = diagram.bounds.x;
		var y = diagram.bounds.y;
		for (var i = 0; i < total; i++) {
			var node = diagram.factory.createShapeNode(x, y, size, size);
			node.text = i.toString();
			if (x > diagram.bounds.x) {
				diagram.factory.createDiagramLink(
					diagram.nodes[i - 1], diagram.nodes[i]);
			}

			x += dist;
			if (x >= diagram.bounds.right()) {
				x = diagram.bounds.x;
				y += dist;
			}
		}

		diagram.enableSpatialIndex = true;
		diagramView.diagram = diagram;
	}

	document.getElementById("bGenerate").addEventListener("click", () => {
		generateDiagram();
	});
}