You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
436 lines
12 KiB
436 lines
12 KiB
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;};
|
|
|