Draft of edge rendering
This commit is contained in:
parent
8e5e212c49
commit
15f1cdf3aa
|
@ -43,6 +43,16 @@ journey
|
|||
Sit down: 5: Mee
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 50%;">
|
||||
mindmap
|
||||
root[
|
||||
The root where the things
|
||||
hap<br/>
|
||||
hap<br/>
|
||||
pen!
|
||||
]
|
||||
Child1
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 50%;">
|
||||
mindmap
|
||||
root[
|
||||
The root where the things
|
||||
|
|
|
@ -19,8 +19,25 @@ function drawNodes(svg, mindmap, conf) {
|
|||
}
|
||||
}
|
||||
|
||||
/** @param {any} svg The svg element to draw the diagram onto */
|
||||
function drawEdges() {}
|
||||
/**
|
||||
* @param {any} svg The svg element to draw the diagram onto
|
||||
* @param edgesElem
|
||||
* @param mindmap
|
||||
* @param parent
|
||||
* @param depth
|
||||
* @param section
|
||||
* @param conf
|
||||
*/
|
||||
function drawEdges(edgesElem, mindmap, parent, depth, section, conf) {
|
||||
if (parent) {
|
||||
svgDraw.drawEdge(edgesElem, mindmap, parent, depth, conf);
|
||||
}
|
||||
if (mindmap.children) {
|
||||
mindmap.children.forEach((child, index) => {
|
||||
drawEdges(edgesElem, child, mindmap, depth + 1, section < 0 ? index : section, conf);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param mindmap
|
||||
|
@ -232,6 +249,8 @@ export const draw = (text, id, version, diagObj) => {
|
|||
// Draw the graph and start with drawing the nodes without proper position
|
||||
// this gives us the size of the nodes and we can set the positions later
|
||||
|
||||
const edgesElem = svg.append('g');
|
||||
edgesElem.attr('class', 'mindmap-edges');
|
||||
const nodesElem = svg.append('g');
|
||||
nodesElem.attr('class', 'mindmap-nodes');
|
||||
drawNodes(nodesElem, mm, conf);
|
||||
|
@ -243,8 +262,7 @@ export const draw = (text, id, version, diagObj) => {
|
|||
console.log(positionedMindmap);
|
||||
|
||||
// After this we can draw, first the edges and the then nodes with the correct position
|
||||
// drawEdges(svg, mm, conf);
|
||||
|
||||
drawEdges(edgesElem, positionedMindmap, null, 0, conf);
|
||||
positionNodes(positionedMindmap, conf);
|
||||
|
||||
// Setup the view box and size of the svg element
|
||||
|
|
|
@ -99,6 +99,19 @@ export const drawNode = function (elem, node, conf) {
|
|||
db.setElementForId(node.id, nodeElem);
|
||||
return node.height;
|
||||
};
|
||||
|
||||
export const drawEdge = function drawEdge(edgesElem, mindmap, parent, depth, conf) {
|
||||
edgesElem
|
||||
.append('line')
|
||||
.attr('x1', parent.x)
|
||||
.attr('y1', parent.y + parent.height / 2)
|
||||
.attr('x2', mindmap.x)
|
||||
.attr('y2', mindmap.y + mindmap.height / 2)
|
||||
.attr('stroke', '#88f')
|
||||
.attr('stroke-width', 15 - depth * 3)
|
||||
.attr('class', 'edge ');
|
||||
};
|
||||
|
||||
export const positionNode = function (node, conf) {
|
||||
const nodeElem = db.getElementById(node.id);
|
||||
|
||||
|
@ -107,4 +120,5 @@ export const positionNode = function (node, conf) {
|
|||
// Position the node to its coordinate
|
||||
nodeElem.attr('transform', 'translate(' + x + ',' + y + ')');
|
||||
};
|
||||
export default { drawNode, positionNode };
|
||||
|
||||
export default { drawNode, positionNode, drawEdge };
|
||||
|
|
Loading…
Reference in New Issue