Thorkim Family Farm

by padhg

HTML

<script src="https://cdn.rawgit.com/konvajs/konva/0.11.1/konva.min.js"></script>
<div id="container">Initializing Konva...</div>

CSS

body {
  padding: 0;
  margin: 0;
}

div {
  height: 100vh;
  width: 100vw;
}

JavaScript

var mapScaleFactor, roomSize, showLabels, squareLayer, lineLayer, labelLayer, roomsGroup, connectors;

mapScaleFactor = 2;
roomSize = 8 * mapScaleFactor;
showLabels = false;
squareLayer = new Konva.Layer();
lineLayer = new Konva.Layer();
labelLayer = new Konva.Layer();
roomsGroup = new Konva.Group();
connectors = [];

function drawLines() {
	for (var key in connectors) {
		var connector = connectors[key];

		// set start and end rooms
		var start = roomsGroup.find("#" + connector.start)[0];
		var startx = start.getAbsolutePosition().x;
		var starty = start.getAbsolutePosition().y;
		var end = roomsGroup.find("#" + connector.end)[0];
		var endx = end.getAbsolutePosition().x;
		var endy = end.getAbsolutePosition().y;
		var offset = roomSize / 2;

		// draw a line from the center of the starting room to the center of the ending room
		connector.line.setPoints([startx + offset, starty + offset, endx + offset, endy + offset]);
	}

	lineLayer.draw();
}

function drawLineLabels() {
	if (!showLabels)
		return;

	for (var key in connectors) {
		var connector = connectors[key];

		// set start and end rooms
		var start = roomsGroup.find("#" + connector.start)[0];
		var startx = start.getAbsolutePosition().x;
		var starty = start.getAbsolutePosition().y;
		var end = roomsGroup.find("#" + connector.end)[0];
		var endx = end.getAbsolutePosition().x;
		var endy = end.getAbsolutePosition().y;

		var drawStartToEndLabel = typeof connector.startToEndLabel !== 'undefined';
		var drawEndToStartLabel = typeof connector.endToStartLabel !== 'undefined';
		var x = (startx + endx + roomSize) / 2;
		var y = (starty + endy + roomSize) / 2;

		if (drawStartToEndLabel || drawEndToStartLabel) {
			// math to draw labels at the same angle as the line
			var dx = startx - endx;
			var dy = starty - endy;
			var angle = Math.atan2(dy, dx) * 180 / Math.PI;

			// label path from start to end
			if (drawStartToEndLabel) {
				connector.startToEndLabel.position({
					x: x,
					y:...