Commit 1f06543a authored by Pavel Nepke's avatar Pavel Nepke
Browse files

#18, bendable transitions

parent 7b6760f4
Pipeline #4306 passed with stage
in 40 seconds
......@@ -7,6 +7,7 @@ let graph : Schema = {
let r = 50;
let i = 1, j = 1;
let mousedownNode = null;
let mousedownTransition = null;
let svg = d3.select("#graph-container").append("svg")
.attr("width", "100%")
......@@ -50,10 +51,17 @@ svg.on("mousemove", function() {
render();
}
if(mousedownTransition != null){
const [x, y] = d3.mouse(this);
mousedownTransition.offset = {x: x, y: y};
render();
}
});
svg.on('mouseup', function() {
mousedownNode = null;
mousedownTransition = null;
arrow.style("display", "none");
render();
});
......@@ -76,7 +84,8 @@ function render() {
from: `${state.id}`,
to: `${state.id}`,
label: "edge"+j,
visible: true
visible: true,
offset: null
};
j++;
graph.transitions.push(newTransition);
......@@ -95,7 +104,8 @@ function render() {
from: `${mousedownNode.id}`,
to: `${state.id}`,
label: "edge"+j,
visible: true
visible: true,
offset: null
};
j++;
graph.transitions.push(newTransition);
......@@ -123,6 +133,9 @@ function render() {
let tgroup = transition.enter()
.append("g")
.classed("transition", true)
.on("mousedown", transition => {
mousedownTransition = transition;
})
.on("click", function(d) {
if(d3.event.ctrlKey) {
graph.transitions.splice(graph.transitions.indexOf(d), 1);
......@@ -142,6 +155,8 @@ function render() {
let xDiff = to.x - from.x;
let yDiff = to.y - from.y;
let arrowLength = Math.sqrt(xDiff*xDiff + yDiff*yDiff);
let t = 0.5;
if(from == to){
d.loop = true;
let x = r * Math.cos(-Math.PI/4);
......@@ -157,6 +172,15 @@ function render() {
let a = Math.atan((from.y-to.y) / (to.x-from.x));
let x = r * Math.cos(a);
let y = r * Math.sin(a);
if(d.offset != null){
let startX = from.x+x;
let startY = from.y-y;
let endX = to.x-x;
let endY = to.y+y;
let controlX = d.offset.x/(2*t*(1-t))-startX*t/(2*(1-t))-endX*(1-t)/(2*t);
let controlY = d.offset.y/(2*t*(1-t))-startY*t/(2*(1-t))-endY*(1-t)/(2*t);
return `M ${startX},${startY} Q ${controlX},${controlY} ${endX},${endY}`;
}
return `M ${from.x+x},${from.y-y} L ${to.x-x},${to.y+y}`;
}
// Q2
......@@ -164,13 +188,32 @@ function render() {
let a = Math.atan((to.y-from.y) / (to.x-from.x));
let x = r * Math.cos(a);
let y = r * Math.sin(a);
return `M ${from.x+x},${from.y+y} L ${to.x-x},${to.y-y}`;
if(d.offset != null){
let startX = from.x+x;
let startY = from.y+y;
let endX = to.x-x;
let endY = to.y-y;
let controlX = d.offset.x/(2*t*(1-t))-startX*t/(2*(1-t))-endX*(1-t)/(2*t);
let controlY = d.offset.y/(2*t*(1-t))-startY*t/(2*(1-t))-endY*(1-t)/(2*t);
return `M ${startX},${startY} Q ${controlX},${controlY} ${endX},${endY}`;
}
return `M ${from.x+x},${from.y+y} L ${to.x-x},${to.y-y}`;
}
// Q3
if(to.y >= from.y && to.x <= from.x){
let a = Math.atan((to.y-from.y) / (from.x-to.x));
let x = r * Math.cos(a);
let y = r * Math.sin(a);
if(d.offset != null) {
let startX = from.x-x;
let startY = from.y+y;
let endX = to.x+x;
let endY = to.y-y;
let controlX = d.offset.x/(2*t*(1-t))-startX*t/(2*(1-t))-endX*(1-t)/(2*t);
let controlY = d.offset.y/(2*t*(1-t))-startY*t/(2*(1-t))-endY*(1-t)/(2*t);
return `M ${startX},${startY} Q ${controlX},${controlY} ${endX},${endY}`;
}
return `M ${from.x-x},${from.y+y} L ${to.x+x},${to.y-y}`;
}
// Q4
......@@ -178,6 +221,15 @@ function render() {
let a = Math.atan((from.y-to.y) / (from.x-to.x));
let x = r * Math.cos(a);
let y = r * Math.sin(a);
if(d.offset != null) {
let startX = from.x-x;
let startY = from.y-y;
let endX = to.x+x;
let endY = to.y+y;
let controlX = d.offset.x/(2*t*(1-t))-startX*t/(2*(1-t))-endX*(1-t)/(2*t);
let controlY = d.offset.y/(2*t*(1-t))-startY*t/(2*(1-t))-endY*(1-t)/(2*t);
return `M ${startX},${startY} Q ${controlX},${controlY} ${endX},${endY}`;
}
return `M ${from.x-x},${from.y-y} L ${to.x+x},${to.y+y}`;
}
});
......@@ -193,15 +245,14 @@ function render() {
let to = graph.nodes.find((s) => s.id==d.to);
if(d.loop){ return from.x; }
let x = to.x - from.x;
return from.x + 0.5*x;
return (d.offset==null) ? (from.x + 0.5*x) : d.offset.x;
})
.attr("y", (d : any) => {
let from = graph.nodes.find((s) => s.id==d.from);
let to = graph.nodes.find((s) => s.id==d.to);
if(d.loop){ return from.y-140; }
let y = to.y - from.y;
let yoff = d.yoff || 0;
return from.y + 0.5*y - 20;
return (d.offset==null) ? (from.y + 0.5*y - 20) : (d.offset.y-30);
});
transition.exit().remove();
......
......@@ -9,6 +9,7 @@ interface Schema {
label: string,
from: string,
to: string,
visible: boolean
visible: boolean,
offset: object
}[]
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment