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

namespace StockShapes
{
	const Shape = Diagramming.Shape;
	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"));
	let diagram = diagramView.diagram;
	diagram.linkHeadShapeSize = 2;

	diagram.shapeBrush = "#c0c0c0";
	diagram.nodeEffects.push(new GlassEffect());

	let i = 0;
	let size = 20;
	let perLine = 8;


	// enum all predefined shapes
	let shapes = Shape.shapes;
	for (let shapeId in shapes)
	{
		// skip some arrowhead shapes that aren't that useful as node shapes
		let shape = shapes[shapeId];
		if (!shape.params.outline) continue;
		if (shapeId == "RevWithCirc") continue;
		if (shapeId == "DoubleArrow") continue;
		if (shapeId == "CenteredCircle") continue;

		// create a node of this shape
		let node = new ShapeNode(diagram);
		node.shape = Shape.fromId(shapeId);
		node.pen = "Black";
		node.bounds = new Rect(
			(i % perLine) * (size + 10) + 8,
			Math.floor(i / perLine) * (size + 20) + 8,
			size, size);

		// add line breaks for longer labels
		var text = shapeId;
		if (text.match("^Bpmn") ||
			text.match("^External") ||
			text.match("^Message") ||
			text.match("^Microform") ||
			text.match("^Offpage"))
		{
			text = text.replace(/([A-Z])/g, "\n$1");
			text = text.substring(1);
		}
		// add label below the node
		var label = node.addLabel(text);
		label.setEdgePosition(
			2, // bottom edge
			0, // no horizontal offset
			1); // vertical offset
		label.verticalAlign = Alignment.Near;
		label.horizontalAlign = Alignment.Center;

		diagram.addItem(node);

		i = i + 1;
	}

	diagram.resizeToFitItems(10);
}