parent
4a7b82b2f8
commit
0d773e28b7
@ -0,0 +1,102 @@ |
|||||||
|
$button-color: rgb(147, 146, 146); |
||||||
|
$main-color: rgb(240, 141, 25); |
||||||
|
|
||||||
|
*{ |
||||||
|
margin:0; |
||||||
|
padding: 0; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
body{ |
||||||
|
font-family: Roboto; |
||||||
|
|
||||||
|
} |
||||||
|
main{ |
||||||
|
position: relative; |
||||||
|
height: 100vh; |
||||||
|
|
||||||
|
#infobar{ |
||||||
|
position: absolute; |
||||||
|
top:0; |
||||||
|
width: 100%; |
||||||
|
padding: 0.4em; |
||||||
|
background-color: rgba(232, 9, 9, 0.4); |
||||||
|
border: 4px solid rgba(232, 9, 9, 0.8); |
||||||
|
text-align: center; |
||||||
|
font-weight: bold; |
||||||
|
font-size: 1.8em; |
||||||
|
z-index: 1; |
||||||
|
transform: translateY(-100%); |
||||||
|
transition: transform 1s; |
||||||
|
&.active{ |
||||||
|
transform: translateY(0%); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.canvas{ |
||||||
|
background-color: lightgrey; |
||||||
|
position: relative; |
||||||
|
height: 100%; |
||||||
|
|
||||||
|
input{ |
||||||
|
position: absolute; |
||||||
|
border: none; |
||||||
|
padding: 0.6em 1em; |
||||||
|
width: 50px; |
||||||
|
transform: translateX(-50%) translateY(-50%); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
nav, footer{ |
||||||
|
display: flex; |
||||||
|
position: absolute; |
||||||
|
top: 1em; |
||||||
|
left: 1em; |
||||||
|
opacity: 0.9; |
||||||
|
|
||||||
|
button{ |
||||||
|
display: block; |
||||||
|
background-color: $button-color; |
||||||
|
border: none; |
||||||
|
border-radius: 1em; |
||||||
|
padding: 1em 1em; |
||||||
|
min-width: 8em; |
||||||
|
margin: 0.4em; |
||||||
|
color: black; |
||||||
|
border: solid 2px darken($button-color, 50); |
||||||
|
box-shadow: 2px 2px 8px rgba(0,0,0,0.5); |
||||||
|
|
||||||
|
&:focus { |
||||||
|
outline: none; |
||||||
|
} |
||||||
|
&::-moz-focus-inner { |
||||||
|
border: 0; |
||||||
|
} |
||||||
|
&:hover{ |
||||||
|
background-color: lighten($button-color, 10); |
||||||
|
border-color: darken($button-color, 100); |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
&.active{ |
||||||
|
background-color: $main-color; |
||||||
|
} |
||||||
|
h1{ |
||||||
|
text-align: center; |
||||||
|
font-size: 1.4em; |
||||||
|
font-weight: normal; |
||||||
|
|
||||||
|
white-space: nowrap |
||||||
|
} |
||||||
|
img{ |
||||||
|
display: block; |
||||||
|
margin: 0 auto 0.5em auto; |
||||||
|
width: 2em; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
footer{ |
||||||
|
top: auto; |
||||||
|
left: auto; |
||||||
|
bottom: 1em; |
||||||
|
right: 1em; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1 @@ |
|||||||
|
*{margin:0;padding:0;box-sizing:border-box}body{font-family:Roboto}main{position:relative;height:100vh}main #infobar{position:absolute;top:0;width:100%;padding:0.4em;background-color:rgba(232,9,9,0.4);border:4px solid rgba(232,9,9,0.8);text-align:center;font-weight:bold;font-size:1.8em;z-index:1;transform:translateY(-100%);transition:transform 1s}main #infobar.active{transform:translateY(0%)}main .canvas{background-color:lightgrey;position:relative;height:100%}main .canvas input{position:absolute;border:none;padding:0.6em 1em;width:50px;transform:translateX(-50%) translateY(-50%)}main nav,main footer{display:flex;position:absolute;top:1em;left:1em;opacity:0.9}main nav button,main footer button{display:block;background-color:#939292;border:none;border-radius:1em;padding:1em 1em;min-width:8em;margin:0.4em;color:black;border:solid 2px #131313;box-shadow:2px 2px 8px rgba(0,0,0,0.5)}main nav button:focus,main footer button:focus{outline:none}main nav button::-moz-focus-inner,main footer button::-moz-focus-inner{border:0}main nav button:hover,main footer button:hover{background-color:#acacac;border-color:#000;cursor:pointer}main nav button.active,main footer button.active{background-color:#f08d19}main nav button h1,main footer button h1{text-align:center;font-size:1.4em;font-weight:normal;white-space:nowrap}main nav button img,main footer button img{display:block;margin:0 auto 0.5em auto;width:2em}main footer{top:auto;left:auto;bottom:1em;right:1em} |
||||||
Binary file not shown.
|
After Width: | Height: | Size: 774 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,12 @@ |
|||||||
|
@font-face { |
||||||
|
font-family: 'Roboto-Regular'; |
||||||
|
src: url('Roboto-Regular.eot'); |
||||||
|
src: url('Roboto-Regular.eot?#iefix') format('embedded-opentype'), |
||||||
|
url('Roboto-Regular.svg#Roboto-Regular') format('svg'), |
||||||
|
url('Roboto-Regular.ttf') format('truetype'), |
||||||
|
url('Roboto-Regular.woff') format('woff'), |
||||||
|
url('Roboto-Regular.woff2') format('woff2'); |
||||||
|
font-weight: normal; |
||||||
|
font-style: normal; |
||||||
|
} |
||||||
|
|
||||||
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
@ -0,0 +1,436 @@ |
|||||||
|
const canvas = document.getElementById("canvas"); |
||||||
|
|
||||||
|
// Layouts
|
||||||
|
var width = canvas.offsetWidth; |
||||||
|
var height = canvas.offsetHeight; |
||||||
|
|
||||||
|
const node_size = 55; |
||||||
|
|
||||||
|
var stage = new Konva.Stage({ |
||||||
|
container: canvas, |
||||||
|
width: width, |
||||||
|
height: height |
||||||
|
}); |
||||||
|
|
||||||
|
const node_layout = { |
||||||
|
radius: node_size, |
||||||
|
fill: 'white', |
||||||
|
stroke: 'black', |
||||||
|
strokeWidth: 2, |
||||||
|
shadowColor: 'black', |
||||||
|
shadowBlur: 10, |
||||||
|
shadowOffset: { |
||||||
|
x: 2, |
||||||
|
y: 2 |
||||||
|
}, |
||||||
|
shadowOpacity: 0.3, |
||||||
|
}; |
||||||
|
|
||||||
|
const node_text_layout = { |
||||||
|
x: 1 - node_size, |
||||||
|
y: 2 - node_size, |
||||||
|
text: name, |
||||||
|
fontSize: 22, |
||||||
|
width: 2 * node_size-1, |
||||||
|
height: 2 * node_size-1, |
||||||
|
fontFamily: 'Roboto', |
||||||
|
fill: 'black', |
||||||
|
verticalAlign: 'middle', |
||||||
|
align: 'center' |
||||||
|
}; |
||||||
|
|
||||||
|
const edge_layout = { |
||||||
|
stroke: 'black', |
||||||
|
strokeWidth: 3, |
||||||
|
} |
||||||
|
|
||||||
|
const edge_text_layout = { |
||||||
|
fontSize: 22, |
||||||
|
width: 2 * node_size, |
||||||
|
height: 2 * node_size, |
||||||
|
fontFamily: 'Roboto', |
||||||
|
fill: 'black', |
||||||
|
verticalAlign: 'middle', |
||||||
|
align: 'center' |
||||||
|
}; |
||||||
|
|
||||||
|
//-----------------------------------------------------------------------------
|
||||||
|
//-------------------------------Init------------------------------------------
|
||||||
|
//-----------------------------------------------------------------------------
|
||||||
|
var edge_layer = new Konva.Layer(); |
||||||
|
var node_layer = new Konva.Layer(); |
||||||
|
|
||||||
|
var konva_edges = []; |
||||||
|
var konva_nodes = []; |
||||||
|
var graph_copy = {}; |
||||||
|
|
||||||
|
var state = "idle"; |
||||||
|
|
||||||
|
// selected nodes
|
||||||
|
var selected = []; |
||||||
|
var path_elements = []; |
||||||
|
|
||||||
|
// (additions) auto layout
|
||||||
|
var auto_layout = false; |
||||||
|
|
||||||
|
function initialisation(){ |
||||||
|
stage.add(edge_layer); |
||||||
|
stage.add(node_layer); |
||||||
|
|
||||||
|
// avoid flickering
|
||||||
|
edge_layer.hide(); |
||||||
|
|
||||||
|
// draw initial graph
|
||||||
|
for (id in nodes) { |
||||||
|
draw_new_node(nodes[id], node_size + Math.random() * (width - 2 * node_size), node_size + Math.random() * (height - 2 * node_size)); |
||||||
|
} |
||||||
|
for (id in edges) { |
||||||
|
draw_new_edge(edges[id]); |
||||||
|
} |
||||||
|
|
||||||
|
// (additions) auto layout
|
||||||
|
|
||||||
|
if ( sessionStorage.getItem("auto_layout") !== null) { |
||||||
|
// Restore the contents of the text field
|
||||||
|
auto_layout = (sessionStorage.getItem("auto_layout") == 'true'); |
||||||
|
if (auto_layout){ |
||||||
|
document.querySelector("[data-activeon=auto_layout]").classList.add("active"); |
||||||
|
} |
||||||
|
} |
||||||
|
// Precalculate a good graph presentation
|
||||||
|
for (var i = 0; i < 1000; i++) { |
||||||
|
force_directed_graph(); |
||||||
|
} |
||||||
|
node_layer.draw(); |
||||||
|
|
||||||
|
|
||||||
|
edge_layer.show(); |
||||||
|
|
||||||
|
} |
||||||
|
initialisation(); |
||||||
|
//-----------------------------------------------------------------------------
|
||||||
|
//------------------------------utils------------------------------------------
|
||||||
|
//-----------------------------------------------------------------------------
|
||||||
|
function sort(array) { |
||||||
|
return array.sort(function(a, b) { |
||||||
|
return a - b; |
||||||
|
}) |
||||||
|
} |
||||||
|
//-----------------------------------------------------------------------------
|
||||||
|
//---------------------------draw methods--------------------------------------
|
||||||
|
//-----------------------------------------------------------------------------
|
||||||
|
function draw_new_node(name, x, y) { |
||||||
|
const pos = { |
||||||
|
x: x, |
||||||
|
y: y |
||||||
|
}; |
||||||
|
let group = new Konva.Group({ |
||||||
|
...pos, |
||||||
|
draggable: true, |
||||||
|
dragBoundFunc: function(pos) { |
||||||
|
return { |
||||||
|
x: sort([node_size, pos.x, width - node_size])[1], |
||||||
|
y: sort([node_size, pos.y, height - node_size])[1], |
||||||
|
}; |
||||||
|
}, |
||||||
|
id: name |
||||||
|
}); |
||||||
|
let box = new Konva.Circle(node_layout); |
||||||
|
let simpleText = new Konva.Text({...node_text_layout, text: name}); |
||||||
|
group.add(box); |
||||||
|
group.add(simpleText); |
||||||
|
group.on("click", on_node_click); |
||||||
|
group.on('dragstart', function() { |
||||||
|
group.attrs.dragging = true; |
||||||
|
}); |
||||||
|
group.on('dragend', function() { |
||||||
|
group.attrs.dragging = false; |
||||||
|
}); |
||||||
|
group.on('mouseover', function() { |
||||||
|
document.body.style.cursor = 'pointer'; |
||||||
|
}); |
||||||
|
group.on('mouseout', function() { |
||||||
|
document.body.style.cursor = 'default'; |
||||||
|
}); |
||||||
|
graph_copy[name] = []; |
||||||
|
konva_nodes.push(group); |
||||||
|
|
||||||
|
node_layer.add(group); |
||||||
|
node_layer.draw(); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
function draw_new_edge(edge) { |
||||||
|
let start_node = stage.findOne('#' + edge["start"]); |
||||||
|
let end_node = stage.findOne('#' + edge["end"]); |
||||||
|
let weight = edge["weight"]; |
||||||
|
let group = new Konva.Group({ |
||||||
|
start_node: start_node, |
||||||
|
end_node: end_node, |
||||||
|
weight: weight, |
||||||
|
id: edge["start"]+edge["end"] |
||||||
|
}); |
||||||
|
let line = new Konva.Line(edge_layout); |
||||||
|
let simpleText = new Konva.Text({...edge_text_layout, text: weight}); |
||||||
|
|
||||||
|
graph_copy[edge["start"]].push(edge["end"]); |
||||||
|
graph_copy[edge["end"]].push(edge["start"]); |
||||||
|
|
||||||
|
group.add(line); |
||||||
|
group.add(simpleText); |
||||||
|
konva_edges.push(group); |
||||||
|
update_edge(group); |
||||||
|
|
||||||
|
edge_layer.add(group); |
||||||
|
edge_layer.draw(); |
||||||
|
|
||||||
|
return group; |
||||||
|
} |
||||||
|
|
||||||
|
function update_edge(konva_edge) { |
||||||
|
let line = konva_edge.children[0]; |
||||||
|
let text = konva_edge.children[1]; |
||||||
|
let start_node = konva_edge.attrs.start_node; |
||||||
|
let end_node = konva_edge.attrs.end_node; |
||||||
|
let size = 15+text.text().length*15; |
||||||
|
let line_length = Math.sqrt((start_node.getX() - end_node.getX()) ** 2 + (start_node.getY() - end_node.getY()) ** 2) - size; |
||||||
|
line.points([start_node.getX(), start_node.getY(), end_node.getX(), end_node.getY()]); |
||||||
|
line.dash([line_length / 2, size, line_length / 2]); |
||||||
|
text.x((start_node.getX() + end_node.getX()) / 2 - node_size); |
||||||
|
text.y((start_node.getY() + end_node.getY()) / 2 - node_size), |
||||||
|
|
||||||
|
edge_layer.draw(); |
||||||
|
} |
||||||
|
|
||||||
|
function reset_node_style(){ |
||||||
|
for (let id in konva_nodes) { |
||||||
|
konva_nodes[id].children[0].strokeWidth(node_layout.strokeWidth); |
||||||
|
konva_nodes[id].children[0].stroke("black"); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function reset_edge_style(){ |
||||||
|
for (let id in konva_edges) { |
||||||
|
konva_edges[id].children[0].strokeWidth(edge_layout.strokeWidth); |
||||||
|
konva_edges[id].children[0].stroke("black"); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function draw_selected_nodes() { |
||||||
|
reset_node_style(); |
||||||
|
reset_edge_style(); |
||||||
|
for (let id in selected) { |
||||||
|
selected[id].children[0].strokeWidth(node_layout.strokeWidth + 1); |
||||||
|
selected[id].children[0].stroke("rgb(240, 141, 25)"); |
||||||
|
} |
||||||
|
node_layer.draw(); |
||||||
|
} |
||||||
|
|
||||||
|
function draw_path(path){ |
||||||
|
let path_elements = []; |
||||||
|
for (let id in path){ |
||||||
|
path_elements.push(stage.findOne("#"+path[id])); |
||||||
|
if (id == 0) { |
||||||
|
continue |
||||||
|
} |
||||||
|
let current_edge = stage.findOne("#"+path[id-1]+path[id]); |
||||||
|
if (current_edge){ |
||||||
|
path_elements.push(current_edge); |
||||||
|
}else{ |
||||||
|
path_elements.push(stage.findOne("#"+path[id]+path[id-1])); |
||||||
|
} |
||||||
|
} |
||||||
|
reset_node_style(); |
||||||
|
reset_edge_style(); |
||||||
|
for (let id in path_elements) { |
||||||
|
path_elements[id].children[0].strokeWidth(node_layout.strokeWidth + 1); |
||||||
|
path_elements[id].children[0].stroke("rgb(240, 141, 25)"); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function on_node_click(e) { |
||||||
|
e.cancelBubble = true; |
||||||
|
// let mousePos = stage.getPointerPosition();
|
||||||
|
let idx = selected.indexOf(this); |
||||||
|
if (idx >= 0) { |
||||||
|
selected.splice(idx, 1); |
||||||
|
} else if (selected.length < 2) { |
||||||
|
selected.push(this); |
||||||
|
} else { |
||||||
|
selected.shift(); |
||||||
|
selected.push(this); |
||||||
|
} |
||||||
|
draw_selected_nodes(); |
||||||
|
}; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function create_node(){ |
||||||
|
if (state != "create_node"){ |
||||||
|
state = "create_node"; |
||||||
|
// let mousePos = stage.getPointerPosition();
|
||||||
|
let pos = {x: width/2, y: height/2}; |
||||||
|
create_input(pos.x, pos.y).then(function(text) { |
||||||
|
draw_new_node(text, pos.x, pos.y); |
||||||
|
state = "idle"; |
||||||
|
}, function(){state = "idle"}); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
function create_edge() { |
||||||
|
if (selected.length < 2) { |
||||||
|
show_error("Select at least 2 nodes."); |
||||||
|
return; |
||||||
|
} |
||||||
|
let x = (selected[0].getX() + selected[1].getX()) / 2; |
||||||
|
let y = (selected[0].getY() + selected[1].getY()) / 2; |
||||||
|
create_input(x, y).then(function(text) { |
||||||
|
draw_new_edge({ |
||||||
|
"start": selected[0].children[1].text(), |
||||||
|
"end": selected[1].children[1].text(), |
||||||
|
"weight": text |
||||||
|
}); |
||||||
|
selected = []; |
||||||
|
draw_selected_nodes(); |
||||||
|
},function(){}); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
function create_input(x, y) { |
||||||
|
return new Promise(function(resolve, reject) { |
||||||
|
var input = document.createElement("input"); |
||||||
|
input.setAttribute("type", "text"); |
||||||
|
input.style.left = x + "px"; |
||||||
|
input.style.top = y + "px"; |
||||||
|
canvas.appendChild(input); |
||||||
|
input.focus(); |
||||||
|
stage.listening(false); |
||||||
|
window.addEventListener("keyup", function(event) { |
||||||
|
if (event.key === "Escape") { |
||||||
|
input.remove(); |
||||||
|
stage.listening(true); |
||||||
|
reject(); |
||||||
|
} |
||||||
|
}); |
||||||
|
input.addEventListener("keyup", function(event) { |
||||||
|
if (event.key === "Enter") { |
||||||
|
resolve(input.value); |
||||||
|
input.remove(); |
||||||
|
stage.listening(true); |
||||||
|
} |
||||||
|
}); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
function find_path(){ |
||||||
|
draw_path(elem); |
||||||
|
} |
||||||
|
|
||||||
|
function update_edges(edges) { |
||||||
|
for (id in edges) { |
||||||
|
update_edge(edges[id]); |
||||||
|
} |
||||||
|
} |
||||||
|
node_layer.on('beforeDraw', function() { |
||||||
|
update_edges(konva_edges); |
||||||
|
}); |
||||||
|
|
||||||
|
// adapt the stage on any window resize
|
||||||
|
function fitStageIntoParentContainer() { |
||||||
|
width = canvas.offsetWidth; |
||||||
|
height = canvas.offsetHeight; |
||||||
|
stage.width(canvas.offsetWidth); |
||||||
|
stage.height(canvas.offsetHeight); |
||||||
|
stage.draw(); |
||||||
|
} |
||||||
|
window.addEventListener('resize', fitStageIntoParentContainer); |
||||||
|
|
||||||
|
//-----------------------------------------------------------------------------
|
||||||
|
//---------------------(additions) auto layout---------------------------------
|
||||||
|
//-----------------------------------------------------------------------------
|
||||||
|
|
||||||
|
function toggle_auto_layout() { |
||||||
|
auto_layout = !auto_layout; |
||||||
|
document.querySelector("[data-activeon=auto_layout]").classList.toggle("active"); |
||||||
|
sessionStorage.setItem("auto_layout", auto_layout); |
||||||
|
} |
||||||
|
|
||||||
|
function normalize(vec) { |
||||||
|
let l = Math.sqrt(vec[0]**2+vec[1]**2); |
||||||
|
return [vec[0]/l,vec[1]/l]; |
||||||
|
} |
||||||
|
|
||||||
|
function in_edges(start_node, end_node){ |
||||||
|
let idx = graph_copy[start_node.attrs.id].indexOf(end_node.attrs.id); |
||||||
|
if (idx < 0){ |
||||||
|
return false; |
||||||
|
} |
||||||
|
return true; |
||||||
|
} |
||||||
|
|
||||||
|
function force_directed_graph(spring_length = 300, step = 0.004){ |
||||||
|
for (var idx in konva_nodes){ |
||||||
|
if (konva_nodes[idx].attrs.dragging){ |
||||||
|
continue |
||||||
|
} |
||||||
|
var x1 = konva_nodes[idx].getX(); |
||||||
|
var y1 = konva_nodes[idx].getY(); |
||||||
|
|
||||||
|
var rep = [0,0]; |
||||||
|
var attr = [0,0]; |
||||||
|
for (let jdx in konva_nodes){ |
||||||
|
if (idx == jdx){ |
||||||
|
continue; |
||||||
|
} |
||||||
|
|
||||||
|
let x2 = konva_nodes[jdx].getX(); |
||||||
|
let y2 = konva_nodes[jdx].getY(); |
||||||
|
let dir = normalize([x2-x1,y2-y1]); |
||||||
|
let dist = ((x1-x2)**2+(y1-y2)**2); |
||||||
|
if (in_edges(konva_nodes[idx], konva_nodes[jdx])){ |
||||||
|
let f = (dist/spring_length); |
||||||
|
attr[0] += f*dir[0]; |
||||||
|
attr[1] += f*dir[1]; |
||||||
|
} |
||||||
|
let f = (spring_length**2/Math.sqrt(dist)); |
||||||
|
rep[0] -= f*dir[0]; |
||||||
|
rep[1] -= f*dir[1]; |
||||||
|
} |
||||||
|
let new_x = x1+step*(rep[0]+attr[0]); |
||||||
|
let new_y = y1+step*(rep[1]+attr[1]); |
||||||
|
if (new_x < 2*node_size) { |
||||||
|
new_x += 10*step*((2*node_size-new_x)); |
||||||
|
} else if (new_x > width-2*node_size) { |
||||||
|
new_x += 10*step*((width-2*node_size-new_x)); |
||||||
|
} |
||||||
|
if (new_y < 2*node_size) { |
||||||
|
new_y += 10*step*((2*node_size-new_y)); |
||||||
|
} else if (new_y > height-2*node_size) { |
||||||
|
new_y += 10*step*((height-2*node_size-new_y)); |
||||||
|
} |
||||||
|
konva_nodes[idx].x(new_x); |
||||||
|
konva_nodes[idx].y(new_y); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
var anim = new Konva.Animation(function(frame) { |
||||||
|
if (auto_layout) { |
||||||
|
const spring_length = 300; |
||||||
|
const step = 0.00025*frame.timeDiff; |
||||||
|
force_directed_graph(spring_length, step) |
||||||
|
} |
||||||
|
}, node_layer); |
||||||
|
anim.start(); |
||||||
|
|
||||||
|
|
||||||
|
function show_error(msg){ |
||||||
|
let infobar = document.querySelector("#infobar"); |
||||||
|
infobar.innerHTML = msg; |
||||||
|
infobar.classList.add("active"); |
||||||
|
window.setTimeout(function(){ infobar.classList.remove("active"); }, 4000); |
||||||
|
} |
||||||
|
|
||||||
|
// bug: this avoids glitches
|
||||||
|
window.onfocus = function () {auto_layout = true;}; |
||||||
|
window.onblur = function () {auto_layout = false;}; |
||||||
@ -0,0 +1,61 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="de" dir="ltr"> |
||||||
|
<head> |
||||||
|
<meta charset="utf-8"> |
||||||
|
<title>Assignment</title> |
||||||
|
<link rel="stylesheet" href="{{ url_for('static', filename='fonts/roboto.css') }}"> |
||||||
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.min.css') }}"> |
||||||
|
<script src="https://unpkg.com/konva@4.0.7/konva.min.js"></script> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<main> |
||||||
|
<div id="infobar">You have to select at least 2 nodes</div> |
||||||
|
<div id="canvas" class="canvas"></div> |
||||||
|
<nav> |
||||||
|
<button type="button" onclick="create_node()"> |
||||||
|
<img src="{{ url_for('static', filename='imgs/plus.svg') }}"> |
||||||
|
<h1>Create</h1> |
||||||
|
</button> |
||||||
|
<button type="button" onclick="create_edge()"> |
||||||
|
<img src="{{ url_for('static', filename='imgs/drawing.svg') }}"> |
||||||
|
<h1>Connect</h1> |
||||||
|
</button> |
||||||
|
<button type="button" onclick="find_path()"> |
||||||
|
<img src="{{ url_for('static', filename='imgs/share.svg') }}"> |
||||||
|
<h1>Find Path</h1> |
||||||
|
</button> |
||||||
|
</nav> |
||||||
|
<footer> |
||||||
|
<button type="button" data-activeon="auto_layout" onclick="toggle_auto_layout()"> |
||||||
|
<h1>Automatic Layout</h1> |
||||||
|
</button> |
||||||
|
</footer> |
||||||
|
</main> |
||||||
|
<script> |
||||||
|
var nodes = ["Aachen", "Berlin", "Chemnitz", "Dresden", "Essen"] |
||||||
|
var edges = [{ |
||||||
|
"start": "Aachen", |
||||||
|
"end": "Berlin", |
||||||
|
"weight": 800 |
||||||
|
},{ |
||||||
|
"start": "Dresden", |
||||||
|
"end": "Berlin", |
||||||
|
"weight": 800 |
||||||
|
},{ |
||||||
|
"start": "Essen", |
||||||
|
"end": "Berlin", |
||||||
|
"weight": 800 |
||||||
|
}, { |
||||||
|
"start": "Chemnitz", |
||||||
|
"end": "Dresden", |
||||||
|
"weight": 5 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"start": "Chemnitz", |
||||||
|
"end": "Berlin", |
||||||
|
"weight": 5 |
||||||
|
}] |
||||||
|
</script> |
||||||
|
<script src="{{ url_for('static', filename='js/canvas.js')}}"></script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -1,13 +0,0 @@ |
|||||||
<!DOCTYPE html> |
|
||||||
<html lang="de" dir="ltr"> |
|
||||||
<head> |
|
||||||
<meta charset="utf-8"> |
|
||||||
<title>Assignment</title> |
|
||||||
</head> |
|
||||||
<body> |
|
||||||
<p><b>nodes:</b> {{ nodes }}</p> |
|
||||||
<p><b>edges:</b> {{ edges }}</p> |
|
||||||
<div ></div> |
|
||||||
<script src="{{ url_for('static', filename='js/canvas.js')}}"></script> |
|
||||||
</body> |
|
||||||
</html> |
|
||||||
Loading…
Reference in new issue