mort
/
uni


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
<style>
	body {
		margin: 0px;
		padding: 0px;
	}

	canvas {
		position: absolute;
	}

	* {
		white-space: nowrap;
	}

	class,
	Object {
		-moz-user-select: none;
		-ms-user-select: none;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		user-select: none;
		vertical-align: top;
		border-radius: 20px;
		border: 1px solid #333;
		display: inline-block;
		padding: 20px;
		margin: 10px;
		margin-top: 30px;
		min-width: 250px;
		cursor: pointer;
	}
	class {
		border-style: dashed;
	}
	class>name,
	object>name {
		position: absolute;
		margin-top: -40px;
		margin-left: 5px;
	}
	class>prop,
	object>prop {
		margin-bottom: 20px;
		width: 200px;
		display: block;
	}
	class>prop>name,
	class>prop>val,
	class>prop>type,
	object>prop>name,
	object>prop>val,
	object>prop>type {
		display: block;
		text-align: right;
	}
	class>prop>val,
	object>prop>val {
		border: 1px solid #333;
		height: 24px;
		line-height: 24px;
		text-align: center;
	}

	class>method,
	object>method {
		margin-bottom: 20px;
		display: block;
	}
	class>method:last-child,
	object>method:last-child {
		margin-bottom: 0px;
	}
	class>method>name,
	object>method>name {
		display: block;
		border-bottom: 1px solid #000;
		margin-left: -20px;
		margin-bottom: -1px;
	}
	class>method>name>.spacer,
	object>method>name>.spacer {
		width: 20px;
		display: inline-block;
	}
	class>method>name>.pre,
	class>method>name>.post,
	class>method>name>.args,
	object>method>name>.pre,
	object>method>name>.post,
	object>method>name>.args {
		font-weight: bold;
	}
	class>method>name>.pre,
	object>method>name>.pre {
		color: green;
	}
	class>method>name>.args,
	object>method>name>.args {
		color: #2ea2cc;
	}
	class>method>name>.post,
	object>method>name>.post {
		color: blue;
	}
	class>method>bod,
	object>method>bod {
		display: block;
		border: 1px solid #000;
		padding: 5px;
		white-space: pre-wrap;
	}
</style>
	</head>
	<body>


<class name="Markasykler">
	<prop name="stasjoner" type="Stasjon[]">
		<arrow to="stasjon1"></arrow>
		<arrow to="stasjon2"></arrow>
	</prop>

	<prop name="sykler" type="Sykkel[]">
		<arrow to="sykkel1"></arrow>
	</prop>

	<prop name="kunder" type="Kunde[]">
		<arrow to="kunde1"></arrow>
	</prop>
</class>

<object name="stasjon1" class="Stasjon">
	<prop name="sykler" type="Sykkel[]">
		<arrow to="sykkel1"></arrow>
		<arrow to="sykkel2"></arrow>
	</prop>
</object>

<object name="sykkel1" class="Sykkel">
	<prop name="id" val="1" type="int"></prop>
	<prop name="stasjon" type="Stasjon"><arrow to="stasjon1"></arrow></prop>
	<prop name="kunde" type="Kunde"><arrow to="kunde1"></arrow></prop>
	<prop name="sykkelType" val="Terreng" type="SykkelType"></prop>
	<prop name="startTid" val="2016-05-05 16:00" type="DateTime"></prop>
	<prop name="sluttTid" val="null" type="DateTime"></prop>
</object>

<object name="sykkel2" class="Sykkel">
	<prop name="id" val="2" type="int"></prop>
	<prop name="stasjon" type="Stasjon"><arrow to="stasjon1"></arrow></prop>
	<prop name="kunde" val="null" type="Kunde"></prop>
	<prop name="sykkelType" val="Terreng" type="SykkelType"></prop>
	<prop name="startTid" val="null" type="DateTime"></prop>
	<prop name="sluttTid" val="null" type="DateTime"></prop>
</object>

<object name="kunde1" class="Kunde">
	<prop name="kundenr" val="1" type="int"></prop>
	<prop name="sykkel" type="Sykkel"><arrow to="sykkel1"></arrow></prop>
	<prop name="navn" val="Alice" type="String"></prop>
	<prop name="email" val="alice@example.com" type="String"></prop>
	<prop name="telefonnr" val="55555555" type="String"></prop>
</object>

<object name="stasjon2" class="Stasjon">
	<prop name="sykler" type="Sykkel[]"></prop>
</object>


<script>
	window.scrollTo(0, 0);

	var defaultPos = {
	};

	document.addEventListener("dragstart", function(evt) {
		evt.preventDefault();
	});

	function draggable(elem) {
		var pos;
		if (localStorage[elem.id]) {
			pos = JSON.parse(localStorage[elem.id]);
		} else {
			pos = defaultPos[elem.id] || { x: 0, y: 0 };
		}

		function updatePos() {
			elem.style.top = pos.y+"px";
			elem.style.left = pos.x+"px";
			elem.style.position = "absolute";
			drawArrows();
		}
		setTimeout(updatePos, 10);

		var mx, my = 0;
		elem.addEventListener("mousedown", function(evt) {
			mx = evt.clientX;
			my = evt.clientY;
		});

		elem.addEventListener("mousemove", function(evt) {
			if (evt.buttons !== 1)
				return;

			pos.x += evt.clientX - mx;
			pos.y += evt.clientY - my;
			mx = evt.clientX;
			my = evt.clientY;
			updatePos();
		});

		elem.addEventListener("mouseup", function() {
			localStorage[elem.id] = JSON.stringify(pos);
		});
	}

	function htents(str) {
		if (!str)
			return "";
		return str
			.replace(/&/g, "&amp;")
			.replace(/</g, "&lt;")
			.replace(/>/g, "&gt;")
			.replace(/{{/g, "&lt;")
			.replace(/}}/g, "&gt;")
			.replace(/^\t\t/gm, "")
			.trim();
	}

	function attr(elem, attr, noescape) {
		if (noescape)
			return elem.getAttribute(attr);
		else
			return htents(elem.getAttribute(attr));
	}

	function elemPos(elem) {
		var rect = elem.getBoundingClientRect();
		return {
			mid: {
				x: rect.left + (rect.width / 2),
				y: rect.top + (rect.height / 2)
			},
			top: rect.top,
			bot: rect.top + rect.height,
			left: rect.left,
			right: rect.right
		};
	}

/*
	function drawArrow(ctx, fromx, fromy, tox, toy){
		var headlen = 10;   // length of head in pixels
		var angle = Math.atan2(toy-fromy,tox-fromx);
		ctx.beginPath();
		ctx.moveTo(fromx, fromy);
		ctx.lineTo(tox, toy);
		ctx.lineTo(tox-headlen*Math.cos(angle-Math.PI/6),toy-headlen*Math.sin(angle-Math.PI/6));
		ctx.moveTo(tox, toy);
		ctx.lineTo(tox-headlen*Math.cos(angle+Math.PI/6),toy-headlen*Math.sin(angle+Math.PI/6));
		ctx.closePath();
		ctx.stroke();
	}
*/

	function drawArrow(ctx, fromx, fromy, tox, toy) {
		var midx = fromx + ((tox - fromx) / 1.5);
		var midy = fromy;

		// Start
		ctx.beginPath();
		ctx.moveTo(fromx, fromy);

		// Line
		ctx.lineTo(midx, midy);
		ctx.lineTo(tox, toy);

		// Arrow
		var angle = Math.atan2(toy - midy, tox - midx);
		var headlen = 20;
		ctx.lineTo(tox-headlen*Math.cos(angle-Math.PI/6),toy-headlen*Math.sin(angle-Math.PI/6));
		ctx.moveTo(tox, toy);
		ctx.lineTo(tox-headlen*Math.cos(angle+Math.PI/6),toy-headlen*Math.sin(angle+Math.PI/6));

		// Close
		ctx.closePath();
		ctx.stroke();
	}

	//setup classes
	var classes = document.querySelectorAll("class");
	for (var i in classes) {
		if (!classes.hasOwnProperty(i)) continue;
		var c = classes[i];
		c.id = attr(c, "name", true);

		var eName = document.createElement("name");
		eName.innerHTML = "Klassedatastruktur <b>"+attr(c, "name")+"</b>";
		c.insertBefore(eName, c.firstChild);
	}

	//setup objects
	var objects = document.querySelectorAll("object");
	for (var i in objects) {
		if (!objects.hasOwnProperty(i)) continue;
		var obj = objects[i];
		obj.id = attr(obj, "name", true);

		var eName = document.createElement("name");
		eName.innerHTML =
			"Objekt av klassen <b>"+attr(obj, "class")+"</b>";
		obj.insertBefore(eName, obj.firstChild);
	}

	//setup props
	var props = document.querySelectorAll("prop");
	for (var i in props) {
		if (!props.hasOwnProperty(i)) continue;
		var prop = props[i];

		var eName = document.createElement("name");
		eName.innerHTML = "Navn: <b>"+attr(prop, "name")+"</b>";
		prop.appendChild(eName);

		var eVal = document.createElement("val");
		eVal.innerHTML = attr(prop, "val");
		prop.appendChild(eVal);

		var eType = document.createElement("type");
		eType.innerHTML = "Type: <b>"+attr(prop, "type")+"</b>";
		prop.appendChild(eType);
	}

	//setup methods
	var meths = document.querySelectorAll("method");
	for (var i in meths) {
		if (!meths.hasOwnProperty(i)) continue;
		var meth = meths[i];

		var body = htents(meth.innerHTML);
		meth.innerHTML = "";

		var eName = document.createElement("name");
		eName.innerHTML = "<span class='spacer'></span>"+
			" <span class='pre'>"+attr(meth, "pre")+"</span>"+
			" <span class='main'>"+attr(meth, "name")+"</span>"+
			"(<span class='args'>"+attr(meth, "args")+"</span>)"+
			" <span class='post'>"+attr(meth, "post")+"</span>";
		meth.appendChild(eName);

		var eBody = document.createElement("bod");
		eBody.innerHTML = body;
		meth.appendChild(eBody);
	}

	//create canvas
	var canvas = document.createElement("canvas");
	document.body.insertBefore(canvas, document.body.firstChild);
	var ctx = canvas.getContext("2d");

	//draw arrows
	function drawArrows() {
		canvas.height = window.innerHeight * 2;
		canvas.width = window.innerWidth * 2;
		var arrows = document.querySelectorAll("arrow");
		for (var i in arrows) {
			if (!arrows.hasOwnProperty(i)) continue;
			var arrow = arrows[i];

			var from = elemPos(arrow.parentNode);
			try {
				var to = elemPos(document.getElementById(arrow.getAttribute("to")));
			} catch (err) {
				console.log(err.toString());
				console.log(arrow);
				continue;
			}

			var fx, fy, tx, ty;
			fx = from.mid.x;
			fy = from.mid.y;
			if (from.mid.x > to.mid.x)
				tx = to.right;
			else
				tx = to.left;
			if (from.mid.y > to.mid.y)
				ty = to.bot;
			else
				ty = to.top;

			drawArrow(ctx, fx, fy, tx, ty);
		}
	}
	drawArrows();

	//draggable
	var draggables = document.querySelectorAll("class, object");
	for (var i in draggables) {
		if (!draggables.hasOwnProperty(i)) continue;
		draggable(draggables[i]);
	}
</script>
	</body>
</html>