From 061045016fc4eed8da1dd9c95369b8c0adbd76bc Mon Sep 17 00:00:00 2001 From: Adrian Hall Date: Sat, 7 Mar 2020 11:05:56 +0000 Subject: [PATCH] Minor tidy up of prototype code --- src/diagrams/er/erRenderer.js | 135 ++++++++++++++++++---------------- 1 file changed, 71 insertions(+), 64 deletions(-) diff --git a/src/diagrams/er/erRenderer.js b/src/diagrams/er/erRenderer.js index 1a6368e1d..15eeb6499 100644 --- a/src/diagrams/er/erRenderer.js +++ b/src/diagrams/er/erRenderer.js @@ -21,28 +21,15 @@ export const setConf = function(cnf) { */ const addEntities = function(entities, g) { const keys = Object.keys(entities); - //const fontFamily = getConfig().fontFamily; keys.forEach(function(id) { const entity = entities[id]; - const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - // Add the text content (the entity id) - /* - const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan'); - tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve'); - tspan.setAttribute('dy', '1em'); - tspan.setAttribute('x', '1'); - tspan.textContent = id; - tspan.setAttribute('style', 'font-family: monospace'); - svgLabel.appendChild(tspan); - */ g.setNode(entity, { labelType: 'svg', width: 100, height: 75, - //labelStyle: labelStyle, shape: 'rect', label: svgLabel, id: entity @@ -56,7 +43,7 @@ const addEntities = function(entities, g) { * @param entities the entities to be drawn * @param g the dagre graph that contains the vertex and edge definitions post-layout */ -const drawEntities = function(diagram, entities, g) { +const drawEntities = function(diagram, entities, g, svgId) { // For each vertex in the graph: // - append the text label centred in the right place // - get it's bounding box and calculate the size of the enclosing rectangle @@ -66,12 +53,14 @@ const drawEntities = function(diagram, entities, g) { console.debug('Handling node ', v); // Get the centre co-ordinate of the node so that we can centre the entity name - let centre = { x: g.node(v).x, y: g.node(v).y }; + const centre = { x: g.node(v).x, y: g.node(v).y }; // Label the entity - this is done first so that we can get the bounding box // which then determines the size of the rectangle - let textNode = diagram + const textId = 'entity-' + v + '-' + svgId; + const textNode = diagram .append('text') + .attr('id', textId) .attr('x', centre.x) .attr('y', centre.y) .attr('dominant-baseline', 'middle') @@ -79,19 +68,19 @@ const drawEntities = function(diagram, entities, g) { .attr('style', 'font-family: ' + getConfig().fontFamily) .text(v); - let textBBox = textNode.node().getBBox(); - let entityWidth = Math.max(conf.minEntityWidth, textBBox.width + conf.entityPadding * 2); - let entityHeight = Math.max(conf.minEntityHeight, textBBox.height + conf.entityPadding * 2); + const textBBox = textNode.node().getBBox(); + const entityWidth = Math.max(conf.minEntityWidth, textBBox.width + conf.entityPadding * 2); + const entityHeight = Math.max(conf.minEntityHeight, textBBox.height + conf.entityPadding * 2); // Add info to the node so that we can retrieve it later when drawing relationships g.node(v).width = entityWidth; g.node(v).height = entityHeight; - // Draw the rectangle - let rectX = centre.x - entityWidth / 2; - let rectY = centre.y - entityHeight / 2; + // Draw the rectangle - insert it before the text so that the text is not obscured + const rectX = centre.x - entityWidth / 2; + const rectY = centre.y - entityHeight / 2; diagram - .insert('rect') + .insert('rect', '#' + textId) .attr('fill', conf.fill) .attr('fill-opacity', conf.fillOpacity) .attr('stroke', conf.stroke) @@ -99,18 +88,6 @@ const drawEntities = function(diagram, entities, g) { .attr('y', rectY) .attr('width', entityWidth) .attr('height', entityHeight); - - // TODO: Revisit - // Bit of a hack - we're adding the text AGAIN because - // the rectangle is filled to obscure the lines that go to the centre! - diagram - .append('text') - .attr('x', centre.x) - .attr('y', centre.y) - .attr('dominant-baseline', 'middle') - .attr('text-anchor', 'middle') - .attr('style', 'font-family: ' + getConfig().fontFamily) - .text(v); }); }; // drawEntities @@ -118,7 +95,7 @@ const addRelationships = function(relationships, g) { relationships.forEach(function(r) { g.setEdge(r.entityA, r.entityB, { relationship: r }); }); -}; +}; // addRelationships const drawRelationships = function(diagram, relationships, g) { relationships.forEach(function(rel) { @@ -231,35 +208,66 @@ const getToes = function(relationship, fromPoint, toPoint, distance) { const toeXDelta = toeYDelta * Math.abs(gradient); if (gradient > 0) { - if (fromPoint.x < toPoint.x) { - // Scenario A - + const topToe = function(point) { return { - to: { - top: { - x: toPoint.x + toeXDelta, - y: toPoint.y - toeYDelta - }, - bottom: { - x: toPoint.x - toeXDelta, - y: toPoint.y + toeYDelta - } - }, - from: { - top: { - x: fromPoint.x + toeXDelta, - y: fromPoint.y - toeYDelta - }, - bottom: { - x: fromPoint.x - toeXDelta, - y: fromPoint.y + toeYDelta - } - } + x: point.x + toeXDelta, + y: point.y - toeYDelta }; - } else { - // Scenario E - } + }; + + const bottomToe = function(point) { + return { + x: point.x - toeXDelta, + y: point.y + toeYDelta + }; + }; + + const lower = { + top: fromPoint.x < toPoint.x ? topToe(toPoint) : topToe(fromPoint), + bottom: fromPoint.x < toPoint.x ? bottomToe(toPoint) : bottomToe(fromPoint) + }; + + const upper = { + top: fromPoint.x < toPoint.x ? topToe(fromPoint) : topToe(toPoint), + bottom: fromPoint.x < toPoint.x ? bottomToe(fromPoint) : bottomToe(toPoint) + }; + + return { + to: fromPoint.x < toPoint.x ? lower : upper, + from: fromPoint.x < toPoint.x ? upper : lower + }; } + + /* + if (fromPoint.x < toPoint.x) { + // Scenario A + + return { + to: { + top: { + x: toPoint.x + toeXDelta, + y: toPoint.y - toeYDelta + }, + bottom: { + x: toPoint.x - toeXDelta, + y: toPoint.y + toeYDelta + } + }, + from: { + top: { + x: fromPoint.x + toeXDelta, + y: fromPoint.y - toeYDelta + }, + bottom: { + x: fromPoint.x - toeXDelta, + y: fromPoint.y + toeYDelta + } + } + }; + } else { + // Scenario E + } + */ }; // getToes const getJoints = function(relationship, fromPoint, toPoint, distance) { @@ -445,7 +453,7 @@ export const draw = function(text, id) { drawRelationships(diagram, relationships, g); drawFeet(diagram, relationships, g); - drawEntities(diagram, entities, g); + drawEntities(diagram, entities, g, id); const padding = 8; @@ -473,6 +481,5 @@ export const draw = function(text, id) { export default { setConf, - //addEntities, draw };