#1295 Drawing edges between nodes
This commit is contained in:
parent
aa32d454c9
commit
1b64af143e
|
@ -36,10 +36,16 @@
|
|||
<div class="mermaid" style="width: 100%; height: 100%">
|
||||
graph TB
|
||||
A[apan klättrar]-- i träd -->B
|
||||
subgraph Test
|
||||
B
|
||||
end
|
||||
</div>
|
||||
<div class="mermaid" style="width: 100%; height: 100%">
|
||||
flowchart TB
|
||||
A[apan klättrar]-- i träd -->B
|
||||
subgraph Test
|
||||
B
|
||||
end
|
||||
</div>
|
||||
</div>
|
||||
<script src="./mermaid.js"></script>
|
||||
|
|
|
@ -34,18 +34,18 @@ export const positionEdgeLabel = edge => {
|
|||
el.attr('transform', 'translate(' + edge.x + ', ' + edge.y + ')');
|
||||
};
|
||||
|
||||
const getRelationType = function(type) {
|
||||
switch (type) {
|
||||
case stateDb.relationType.AGGREGATION:
|
||||
return 'aggregation';
|
||||
case stateDb.relationType.EXTENSION:
|
||||
return 'extension';
|
||||
case stateDb.relationType.COMPOSITION:
|
||||
return 'composition';
|
||||
case stateDb.relationType.DEPENDENCY:
|
||||
return 'dependency';
|
||||
}
|
||||
};
|
||||
// const getRelationType = function(type) {
|
||||
// switch (type) {
|
||||
// case stateDb.relationType.AGGREGATION:
|
||||
// return 'aggregation';
|
||||
// case stateDb.relationType.EXTENSION:
|
||||
// return 'extension';
|
||||
// case stateDb.relationType.COMPOSITION:
|
||||
// return 'composition';
|
||||
// case stateDb.relationType.DEPENDENCY:
|
||||
// return 'dependency';
|
||||
// }
|
||||
// };
|
||||
|
||||
export const insertEdge = function(elem, edge) {
|
||||
// The data for our line
|
||||
|
|
|
@ -7,7 +7,7 @@ import { logger } from '../logger';
|
|||
export const render = (elem, graph) => {
|
||||
insertMarkers(elem);
|
||||
|
||||
const clusters = elem.insert('g').attr('class', 'clusters');
|
||||
const clusters = elem.insert('g').attr('class', 'clusters'); // eslint-disable-line
|
||||
const edgePaths = elem.insert('g').attr('class', 'edgePaths');
|
||||
const edgeLabels = elem.insert('g').attr('class', 'edgeLabels');
|
||||
const nodes = elem.insert('g').attr('class', 'nodes');
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
var intersectEllipse = require("./intersect-ellipse");
|
||||
|
||||
module.exports = intersectCircle;
|
||||
import intersectEllipse from './intersect-ellipse';
|
||||
|
||||
function intersectCircle(node, rx, point) {
|
||||
return intersectEllipse(node, rx, rx, point);
|
||||
}
|
||||
|
||||
export default intersectCircle;
|
||||
|
|
|
@ -1,5 +1,3 @@
|
|||
module.exports = intersectEllipse;
|
||||
|
||||
function intersectEllipse(node, rx, ry, point) {
|
||||
// Formulae from: http://mathworld.wolfram.com/Ellipse-LineIntersection.html
|
||||
|
||||
|
@ -11,15 +9,16 @@ function intersectEllipse(node, rx, ry, point) {
|
|||
|
||||
var det = Math.sqrt(rx * rx * py * py + ry * ry * px * px);
|
||||
|
||||
var dx = Math.abs(rx * ry * px / det);
|
||||
var dx = Math.abs((rx * ry * px) / det);
|
||||
if (point.x < cx) {
|
||||
dx = -dx;
|
||||
}
|
||||
var dy = Math.abs(rx * ry * py / det);
|
||||
var dy = Math.abs((rx * ry * py) / det);
|
||||
if (point.y < cy) {
|
||||
dy = -dy;
|
||||
}
|
||||
|
||||
return {x: cx + dx, y: cy + dy};
|
||||
return { x: cx + dx, y: cy + dy };
|
||||
}
|
||||
|
||||
export default intersectEllipse;
|
||||
|
|
|
@ -1,5 +1,3 @@
|
|||
module.exports = intersectLine;
|
||||
|
||||
/*
|
||||
* Returns the point at which two lines, p and q, intersect or returns
|
||||
* undefined if they do not intersect.
|
||||
|
@ -9,7 +7,7 @@ function intersectLine(p1, p2, q1, q2) {
|
|||
// p7 and p473.
|
||||
|
||||
var a1, a2, b1, b2, c1, c2;
|
||||
var r1, r2 , r3, r4;
|
||||
var r1, r2, r3, r4;
|
||||
var denom, offset, num;
|
||||
var x, y;
|
||||
|
||||
|
@ -17,36 +15,36 @@ function intersectLine(p1, p2, q1, q2) {
|
|||
// b1 y + c1 = 0.
|
||||
a1 = p2.y - p1.y;
|
||||
b1 = p1.x - p2.x;
|
||||
c1 = (p2.x * p1.y) - (p1.x * p2.y);
|
||||
c1 = p2.x * p1.y - p1.x * p2.y;
|
||||
|
||||
// Compute r3 and r4.
|
||||
r3 = ((a1 * q1.x) + (b1 * q1.y) + c1);
|
||||
r4 = ((a1 * q2.x) + (b1 * q2.y) + c1);
|
||||
r3 = a1 * q1.x + b1 * q1.y + c1;
|
||||
r4 = a1 * q2.x + b1 * q2.y + c1;
|
||||
|
||||
// Check signs of r3 and r4. If both point 3 and point 4 lie on
|
||||
// same side of line 1, the line segments do not intersect.
|
||||
if ((r3 !== 0) && (r4 !== 0) && sameSign(r3, r4)) {
|
||||
if (r3 !== 0 && r4 !== 0 && sameSign(r3, r4)) {
|
||||
return /*DONT_INTERSECT*/;
|
||||
}
|
||||
|
||||
// Compute a2, b2, c2 where line joining points 3 and 4 is G(x,y) = a2 x + b2 y + c2 = 0
|
||||
a2 = q2.y - q1.y;
|
||||
b2 = q1.x - q2.x;
|
||||
c2 = (q2.x * q1.y) - (q1.x * q2.y);
|
||||
c2 = q2.x * q1.y - q1.x * q2.y;
|
||||
|
||||
// Compute r1 and r2
|
||||
r1 = (a2 * p1.x) + (b2 * p1.y) + c2;
|
||||
r2 = (a2 * p2.x) + (b2 * p2.y) + c2;
|
||||
r1 = a2 * p1.x + b2 * p1.y + c2;
|
||||
r2 = a2 * p2.x + b2 * p2.y + c2;
|
||||
|
||||
// Check signs of r1 and r2. If both point 1 and point 2 lie
|
||||
// on same side of second line segment, the line segments do
|
||||
// not intersect.
|
||||
if ((r1 !== 0) && (r2 !== 0) && (sameSign(r1, r2))) {
|
||||
if (r1 !== 0 && r2 !== 0 && sameSign(r1, r2)) {
|
||||
return /*DONT_INTERSECT*/;
|
||||
}
|
||||
|
||||
// Line segments intersect: compute intersection point.
|
||||
denom = (a1 * b2) - (a2 * b1);
|
||||
denom = a1 * b2 - a2 * b1;
|
||||
if (denom === 0) {
|
||||
return /*COLLINEAR*/;
|
||||
}
|
||||
|
@ -56,11 +54,11 @@ function intersectLine(p1, p2, q1, q2) {
|
|||
// The denom/2 is to get rounding instead of truncating. It
|
||||
// is added or subtracted to the numerator, depending upon the
|
||||
// sign of the numerator.
|
||||
num = (b1 * c2) - (b2 * c1);
|
||||
x = (num < 0) ? ((num - offset) / denom) : ((num + offset) / denom);
|
||||
num = b1 * c2 - b2 * c1;
|
||||
x = num < 0 ? (num - offset) / denom : (num + offset) / denom;
|
||||
|
||||
num = (a2 * c1) - (a1 * c2);
|
||||
y = (num < 0) ? ((num - offset) / denom) : ((num + offset) / denom);
|
||||
num = a2 * c1 - a1 * c2;
|
||||
y = num < 0 ? (num - offset) / denom : (num + offset) / denom;
|
||||
|
||||
return { x: x, y: y };
|
||||
}
|
||||
|
@ -68,3 +66,5 @@ function intersectLine(p1, p2, q1, q2) {
|
|||
function sameSign(r1, r2) {
|
||||
return r1 * r2 > 0;
|
||||
}
|
||||
|
||||
export default intersectLine;
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
/* eslint "no-console": off */
|
||||
|
||||
var intersectLine = require("./intersect-line");
|
||||
import intersectLine from './intersect-line';
|
||||
|
||||
module.exports = intersectPolygon;
|
||||
export default intersectPolygon;
|
||||
|
||||
/*
|
||||
* Returns the point ({x, y}) at which the point argument intersects with the
|
||||
|
@ -22,20 +22,24 @@ function intersectPolygon(node, polyPoints, point) {
|
|||
});
|
||||
|
||||
var left = x1 - node.width / 2 - minX;
|
||||
var top = y1 - node.height / 2 - minY;
|
||||
var top = y1 - node.height / 2 - minY;
|
||||
|
||||
for (var i = 0; i < polyPoints.length; i++) {
|
||||
var p1 = polyPoints[i];
|
||||
var p2 = polyPoints[i < polyPoints.length - 1 ? i + 1 : 0];
|
||||
var intersect = intersectLine(node, point,
|
||||
{x: left + p1.x, y: top + p1.y}, {x: left + p2.x, y: top + p2.y});
|
||||
var intersect = intersectLine(
|
||||
node,
|
||||
point,
|
||||
{ x: left + p1.x, y: top + p1.y },
|
||||
{ x: left + p2.x, y: top + p2.y }
|
||||
);
|
||||
if (intersect) {
|
||||
intersections.push(intersect);
|
||||
}
|
||||
}
|
||||
|
||||
if (!intersections.length) {
|
||||
console.log("NO INTERSECTION FOUND, RETURN NODE CENTER", node);
|
||||
console.log('NO INTERSECTION FOUND, RETURN NODE CENTER', node);
|
||||
return node;
|
||||
}
|
||||
|
||||
|
@ -50,7 +54,7 @@ function intersectPolygon(node, polyPoints, point) {
|
|||
var qdy = q.y - point.y;
|
||||
var distq = Math.sqrt(qdx * qdx + qdy * qdy);
|
||||
|
||||
return (distp < distq) ? -1 : (distp === distq ? 0 : 1);
|
||||
return distp < distq ? -1 : distp === distq ? 0 : 1;
|
||||
});
|
||||
}
|
||||
return intersections[0];
|
||||
|
|
|
@ -6,11 +6,10 @@ import flowDb from './flowDb';
|
|||
import flow from './parser/flow';
|
||||
import { getConfig } from '../../config';
|
||||
|
||||
import { render, addShape } from '../../dagre-wrapper/index.js';
|
||||
import { render } from '../../dagre-wrapper/index.js';
|
||||
import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';
|
||||
import { logger } from '../../logger';
|
||||
import { interpolateToCurve, getStylesFromArray } from '../../utils';
|
||||
import flowChartShapes from './flowChartShapes';
|
||||
|
||||
const conf = {};
|
||||
export const setConf = function(cnf) {
|
||||
|
|
|
@ -1,42 +0,0 @@
|
|||
import dagre from 'dagre';
|
||||
import graphlib from 'graphlib';
|
||||
|
||||
// Create a new directed graph
|
||||
var g = new dagre.graphlib.Graph({ compound: true });
|
||||
|
||||
// Set an object for the graph label
|
||||
g.setGraph({});
|
||||
|
||||
// Default to assigning a new object as a label for each new edge.
|
||||
g.setDefaultEdgeLabel(function() {
|
||||
return {};
|
||||
});
|
||||
|
||||
// Add nodes to the graph. The first argument is the node id. The second is
|
||||
// metadata about the node. In this case we're going to add labels to each of
|
||||
// our nodes.
|
||||
g.setNode('root', { label: 'Cluster' });
|
||||
g.setNode('kspacey', { label: 'Kevin Spacey', width: 144, height: 100, x: 200 });
|
||||
// g.setParent('kspacey', 'root');
|
||||
g.setNode('swilliams', { label: 'Saul Williams', width: 160, height: 100 });
|
||||
// g.setNode('bpitt', { label: 'Brad Pitt', width: 108, height: 100 });
|
||||
// g.setNode('hford', { label: 'Harrison Ford', width: 168, height: 100 });
|
||||
// g.setNode('lwilson', { label: 'Luke Wilson', width: 144, height: 100 });
|
||||
// g.setNode('kbacon', { label: 'Kevin Bacon', width: 121, height: 100 });
|
||||
|
||||
// Add edges to the graph.
|
||||
g.setEdge('kspacey', 'swilliams');
|
||||
g.setEdge('swilliams');
|
||||
// g.setEdge('swilliams', 'kbacon');
|
||||
// g.setEdge('bpitt', 'kbacon');
|
||||
// g.setEdge('hford', 'lwilson');
|
||||
// g.setEdge('lwilson', 'kbacon');
|
||||
|
||||
dagre.layout(g);
|
||||
|
||||
g.nodes().forEach(function(v) {
|
||||
console.log('Node ' + v + ': ' + JSON.stringify(g.node(v)));
|
||||
});
|
||||
g.edges().forEach(function(e) {
|
||||
console.log('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(g.edge(e)));
|
||||
});
|
Loading…
Reference in New Issue