Add labels to relationships (needs further tidy up)
This commit is contained in:
parent
2d3b02df6a
commit
50f983871b
|
@ -21,32 +21,6 @@ export const setConf = function(cnf) {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
|
||||||
* Function that adds the entities as vertices in the graph prior to laying out
|
|
||||||
* @param entities The entities to be added to the graph
|
|
||||||
* @param g The graph that is to be drawn
|
|
||||||
* @returns {Object} The object containing all the entities as properties
|
|
||||||
*/
|
|
||||||
/*
|
|
||||||
const addEntities = function(entities, g) {
|
|
||||||
const keys = Object.keys(entities);
|
|
||||||
|
|
||||||
keys.forEach(function(id) {
|
|
||||||
const entity = entities[id];
|
|
||||||
const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
|
|
||||||
|
|
||||||
g.setNode(entity, {
|
|
||||||
labelType: 'svg',
|
|
||||||
width: 100,
|
|
||||||
height: 75,
|
|
||||||
shape: 'rect',
|
|
||||||
label: svgLabel,
|
|
||||||
id: entity
|
|
||||||
});
|
|
||||||
});
|
|
||||||
return entities;
|
|
||||||
};
|
|
||||||
*/
|
|
||||||
/**
|
/**
|
||||||
* Use D3 to construct the svg elements for the entities
|
* Use D3 to construct the svg elements for the entities
|
||||||
* @param svgNode the svg node that contains the diagram
|
* @param svgNode the svg node that contains the diagram
|
||||||
|
@ -142,6 +116,7 @@ const addRelationships = function(relationships, g) {
|
||||||
return relationships;
|
return relationships;
|
||||||
}; // addRelationships
|
}; // addRelationships
|
||||||
|
|
||||||
|
let relCnt = 0;
|
||||||
/**
|
/**
|
||||||
* Draw a relationship using edge information from the graph
|
* Draw a relationship using edge information from the graph
|
||||||
* @param svg the svg node
|
* @param svg the svg node
|
||||||
|
@ -149,6 +124,8 @@ const addRelationships = function(relationships, g) {
|
||||||
* @param g the graph containing the edge information
|
* @param g the graph containing the edge information
|
||||||
*/
|
*/
|
||||||
const drawRelationshipFromLayout = function(svg, rel, g, insert) {
|
const drawRelationshipFromLayout = function(svg, rel, g, insert) {
|
||||||
|
relCnt++;
|
||||||
|
|
||||||
// Find the edge relating to this relationship
|
// Find the edge relating to this relationship
|
||||||
const edge = g.edge(rel.entityA, rel.entityB, getEdgeName(rel));
|
const edge = g.edge(rel.entityA, rel.entityB, getEdgeName(rel));
|
||||||
|
|
||||||
|
@ -287,6 +264,40 @@ const drawRelationshipFromLayout = function(svg, rel, g, insert) {
|
||||||
svgPath.attr('marker-end', 'url(' + url + '#' + erMarkers.ERMarkers.ONE_OR_MORE_END + ')');
|
svgPath.attr('marker-end', 'url(' + url + '#' + erMarkers.ERMarkers.ONE_OR_MORE_END + ')');
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Now label the relationship
|
||||||
|
|
||||||
|
// Find the half-way point
|
||||||
|
const len = svgPath.node().getTotalLength();
|
||||||
|
const labelPoint = svgPath.node().getPointAtLength(len * 0.5);
|
||||||
|
|
||||||
|
// Append a text node containing the label
|
||||||
|
const labelId = 'rel' + relCnt;
|
||||||
|
|
||||||
|
const labelNode = svg
|
||||||
|
.append('text')
|
||||||
|
.attr('id', labelId)
|
||||||
|
.attr('x', labelPoint.x)
|
||||||
|
.attr('y', labelPoint.y)
|
||||||
|
.attr('text-anchor', 'middle')
|
||||||
|
.attr('dominant-baseline', 'middle')
|
||||||
|
.attr('style', 'font-family: ' + getConfig().fontFamily + '; font-size: ' + conf.fontSize)
|
||||||
|
.text(rel.roleA);
|
||||||
|
|
||||||
|
// Figure out how big the opaque 'container' rectangle needs to be
|
||||||
|
const labelBBox = labelNode.node().getBBox();
|
||||||
|
|
||||||
|
// Insert the opaque rectangle in front of the text label
|
||||||
|
svg
|
||||||
|
.insert('rect', '#' + labelId)
|
||||||
|
.attr('x', labelPoint.x - labelBBox.width / 2)
|
||||||
|
.attr('y', labelPoint.y - labelBBox.height / 2)
|
||||||
|
.attr('width', labelBBox.width)
|
||||||
|
.attr('height', labelBBox.height)
|
||||||
|
.attr('fill', 'white')
|
||||||
|
.attr('fill-opacity', '85%');
|
||||||
|
|
||||||
|
return;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -341,7 +352,7 @@ export const draw = function(text, id) {
|
||||||
compound: false
|
compound: false
|
||||||
})
|
})
|
||||||
.setGraph({
|
.setGraph({
|
||||||
rankdir: 'TB',
|
rankdir: conf.layoutDirection,
|
||||||
marginx: 20,
|
marginx: 20,
|
||||||
marginy: 20,
|
marginy: 20,
|
||||||
nodesep: 100,
|
nodesep: 100,
|
||||||
|
|
|
@ -351,6 +351,12 @@ const config = {
|
||||||
* The object containing configurations specific for entity relationship diagrams
|
* The object containing configurations specific for entity relationship diagrams
|
||||||
*/
|
*/
|
||||||
er: {
|
er: {
|
||||||
|
/**
|
||||||
|
* Directional bias for layout of entities. Can be either 'TB', 'BT', 'LR', or 'RL',
|
||||||
|
* where T = top, B = bottom, L = left, and R = right.
|
||||||
|
*/
|
||||||
|
layoutDirection: 'TB',
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The mimimum width of an entity box
|
* The mimimum width of an entity box
|
||||||
*/
|
*/
|
||||||
|
|
Loading…
Reference in New Issue