|
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, "&")
- .replace(/</g, "<")
- .replace(/>/g, ">")
- .replace(/{{/g, "<")
- .replace(/}}/g, ">")
- .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>
|