Minor tidy up
This commit is contained in:
parent
1e498eccb6
commit
2d3b02df6a
|
@ -8,6 +8,12 @@ import { logger } from '../../logger';
|
||||||
import erMarkers from './erMarkers';
|
import erMarkers from './erMarkers';
|
||||||
|
|
||||||
const conf = {};
|
const conf = {};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Allows the top-level API module to inject config specific to this renderer,
|
||||||
|
* storing it in the local conf object. Note that generic config still needs to be
|
||||||
|
* retrieved using getConfig() imported from the config module
|
||||||
|
*/
|
||||||
export const setConf = function(cnf) {
|
export const setConf = function(cnf) {
|
||||||
const keys = Object.keys(cnf);
|
const keys = Object.keys(cnf);
|
||||||
for (let i = 0; i < keys.length; i++) {
|
for (let i = 0; i < keys.length; i++) {
|
||||||
|
@ -44,10 +50,11 @@ const addEntities = function(entities, g) {
|
||||||
/**
|
/**
|
||||||
* 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
|
||||||
* @param entities the entities to be drawn
|
* @param entities The entities to be drawn
|
||||||
* @param g the dagre graph that contains the vertex and edge definitions post-layout
|
* @param g The graph that contains the vertex and edge definitions post-layout
|
||||||
|
* @return The first entity that was inserted
|
||||||
*/
|
*/
|
||||||
const drawEntities = function(svgNode, entities, svgId, graph) {
|
const drawEntities = function(svgNode, entities, graph) {
|
||||||
const keys = Object.keys(entities);
|
const keys = Object.keys(entities);
|
||||||
let firstOne;
|
let firstOne;
|
||||||
|
|
||||||
|
@ -59,7 +66,7 @@ const drawEntities = function(svgNode, entities, svgId, graph) {
|
||||||
|
|
||||||
// Label the entity - this is done first so that we can get the bounding box
|
// Label the entity - this is done first so that we can get the bounding box
|
||||||
// which then determines the size of the rectangle
|
// which then determines the size of the rectangle
|
||||||
const textId = 'entity-' + id + '-' + svgId;
|
const textId = 'entity-' + id;
|
||||||
const textNode = groupNode
|
const textNode = groupNode
|
||||||
.append('text')
|
.append('text')
|
||||||
.attr('id', textId)
|
.attr('id', textId)
|
||||||
|
@ -92,20 +99,17 @@ const drawEntities = function(svgNode, entities, svgId, graph) {
|
||||||
const rectBBox = rectNode.node().getBBox();
|
const rectBBox = rectNode.node().getBBox();
|
||||||
|
|
||||||
// Add the entity to the graph
|
// Add the entity to the graph
|
||||||
// TODO: revisit this - need to understand properly
|
|
||||||
graph.setNode(id, {
|
graph.setNode(id, {
|
||||||
labelType: 'svg',
|
|
||||||
width: rectBBox.width,
|
width: rectBBox.width,
|
||||||
height: rectBBox.height,
|
height: rectBBox.height,
|
||||||
shape: 'rect',
|
shape: 'rect',
|
||||||
label: document.createElementNS('http://www.w3.org/2000/svg', 'text'),
|
|
||||||
id: id
|
id: id
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
return firstOne;
|
return firstOne;
|
||||||
}; // drawEntities
|
}; // drawEntities
|
||||||
|
|
||||||
const adjustEntities = function(svgNode, entities, graph) {
|
const adjustEntities = function(svgNode, graph) {
|
||||||
graph.nodes().forEach(function(v) {
|
graph.nodes().forEach(function(v) {
|
||||||
if (typeof v !== 'undefined' && typeof graph.node(v) !== 'undefined') {
|
if (typeof v !== 'undefined' && typeof graph.node(v) !== 'undefined') {
|
||||||
d3.select('#' + v).attr(
|
d3.select('#' + v).attr(
|
||||||
|
@ -138,24 +142,14 @@ const addRelationships = function(relationships, g) {
|
||||||
return relationships;
|
return relationships;
|
||||||
}; // addRelationships
|
}; // addRelationships
|
||||||
|
|
||||||
/**
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
const drawRelationships = function(diagram, relationships, g, insertId) {
|
|
||||||
relationships.forEach(function(rel) {
|
|
||||||
drawRelationshipFromLayout(diagram, rel, g, insertId);
|
|
||||||
});
|
|
||||||
}; // drawRelationships
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Draw a relationship using edge information from the graph
|
* Draw a relationship using edge information from the graph
|
||||||
* @param diagram the svg node
|
* @param svg the svg node
|
||||||
* @param rel the relationship to draw in the svg
|
* @param rel the relationship to draw in the svg
|
||||||
* @param g the graph containing the edge information
|
* @param g the graph containing the edge information
|
||||||
*/
|
*/
|
||||||
const drawRelationshipFromLayout = function(diagram, rel, g, insert) {
|
const drawRelationshipFromLayout = function(svg, rel, g, insert) {
|
||||||
// Find the edge relating to this relationship
|
// Find the edge relating to this relationship
|
||||||
//const edge = g.edge({ v: rel.entityA, w: rel.entityB });
|
|
||||||
const edge = g.edge(rel.entityA, rel.entityB, getEdgeName(rel));
|
const edge = g.edge(rel.entityA, rel.entityB, getEdgeName(rel));
|
||||||
|
|
||||||
// Get a function that will generate the line path
|
// Get a function that will generate the line path
|
||||||
|
@ -170,7 +164,7 @@ const drawRelationshipFromLayout = function(diagram, rel, g, insert) {
|
||||||
.curve(d3.curveBasis);
|
.curve(d3.curveBasis);
|
||||||
|
|
||||||
// Insert the line at the right place
|
// Insert the line at the right place
|
||||||
const svgPath = diagram
|
const svgPath = svg
|
||||||
.insert('path', '#' + insert)
|
.insert('path', '#' + insert)
|
||||||
.attr('d', lineFunction(edge.points))
|
.attr('d', lineFunction(edge.points))
|
||||||
.attr('stroke', conf.stroke)
|
.attr('stroke', conf.stroke)
|
||||||
|
@ -347,7 +341,7 @@ export const draw = function(text, id) {
|
||||||
compound: false
|
compound: false
|
||||||
})
|
})
|
||||||
.setGraph({
|
.setGraph({
|
||||||
rankdir: 'LR',
|
rankdir: 'TB',
|
||||||
marginx: 20,
|
marginx: 20,
|
||||||
marginy: 20,
|
marginy: 20,
|
||||||
nodesep: 100,
|
nodesep: 100,
|
||||||
|
@ -357,20 +351,24 @@ export const draw = function(text, id) {
|
||||||
return {};
|
return {};
|
||||||
});
|
});
|
||||||
|
|
||||||
const entities = erDb.getEntities();
|
// Draw the entities (at 0,0), returning the first svg node that got
|
||||||
const firstEntity = drawEntities(svg, entities, id, g);
|
// inserted - this represents the insertion point for relationship paths
|
||||||
|
const firstEntity = drawEntities(svg, erDb.getEntities(), g);
|
||||||
|
|
||||||
//addEntities(erDb.getEntities(), g);
|
// TODO: externalise the addition of entities to the graph - it's a bit 'buried' in the above
|
||||||
|
|
||||||
|
// Add all the relationships to the graph
|
||||||
const relationships = addRelationships(erDb.getRelationships(), g);
|
const relationships = addRelationships(erDb.getRelationships(), g);
|
||||||
|
|
||||||
dagre.layout(g); // Node and edge positions will be updated
|
dagre.layout(g); // Node and edge positions will be updated
|
||||||
|
|
||||||
adjustEntities(svg, entities, g);
|
// Adjust the positions of the entities so that they adhere to the layout
|
||||||
|
adjustEntities(svg, g);
|
||||||
|
|
||||||
// Draw the relationships first because their markers need to be
|
// Draw the relationships
|
||||||
// clipped by the entity boxes
|
relationships.forEach(function(rel) {
|
||||||
drawRelationships(svg, relationships, g, firstEntity);
|
drawRelationshipFromLayout(svg, rel, g, firstEntity);
|
||||||
//drawEntities(svg, entities, id);
|
});
|
||||||
|
|
||||||
const padding = 8; // TODO: move this to config
|
const padding = 8; // TODO: move this to config
|
||||||
|
|
||||||
|
|
|
@ -10,7 +10,7 @@
|
||||||
<string>["] { this.popState(); }
|
<string>["] { this.popState(); }
|
||||||
<string>[^"]* { return 'STR'; }
|
<string>[^"]* { return 'STR'; }
|
||||||
"erDiagram" return 'ER_DIAGRAM';
|
"erDiagram" return 'ER_DIAGRAM';
|
||||||
[A-Za-z][A-Za-z0-9]* return 'ALPHANUM';
|
[A-Za-z][A-Za-z0-9\-]* return 'ALPHANUM';
|
||||||
\>\?\-\?\< return 'ZERO_OR_MORE_TO_ZERO_OR_MORE';
|
\>\?\-\?\< return 'ZERO_OR_MORE_TO_ZERO_OR_MORE';
|
||||||
\>\?\-\!\< return 'ZERO_OR_MORE_TO_ONE_OR_MORE';
|
\>\?\-\!\< return 'ZERO_OR_MORE_TO_ONE_OR_MORE';
|
||||||
\>\!\-\!\< return 'ONE_OR_MORE_TO_ONE_OR_MORE';
|
\>\!\-\!\< return 'ONE_OR_MORE_TO_ONE_OR_MORE';
|
||||||
|
|
Loading…
Reference in New Issue