From 50f983871b5b6fddd93cbfab13d557b2f072b5f9 Mon Sep 17 00:00:00 2001
From: Adrian Hall <ade@adrian-hall.name>
Date: Tue, 17 Mar 2020 09:25:16 +0000
Subject: [PATCH] Add labels to relationships (needs further tidy up)

---
 src/diagrams/er/erRenderer.js | 65 ++++++++++++++++++++---------------
 src/mermaidAPI.js             |  6 ++++
 2 files changed, 44 insertions(+), 27 deletions(-)

diff --git a/src/diagrams/er/erRenderer.js b/src/diagrams/er/erRenderer.js
index 85e5df033..42df1bb53 100644
--- a/src/diagrams/er/erRenderer.js
+++ b/src/diagrams/er/erRenderer.js
@@ -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
  * @param svgNode the svg node that contains the diagram
@@ -142,6 +116,7 @@ const addRelationships = function(relationships, g) {
   return relationships;
 }; // addRelationships
 
+let relCnt = 0;
 /**
  * Draw a relationship using edge information from the graph
  * @param svg the svg node
@@ -149,6 +124,8 @@ const addRelationships = function(relationships, g) {
  * @param g the graph containing the edge information
  */
 const drawRelationshipFromLayout = function(svg, rel, g, insert) {
+  relCnt++;
+
   // Find the edge relating to this relationship
   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 + ')');
       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
   })
     .setGraph({
-      rankdir: 'TB',
+      rankdir: conf.layoutDirection,
       marginx: 20,
       marginy: 20,
       nodesep: 100,
diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js
index 8bfa33a0e..0731ae166 100644
--- a/src/mermaidAPI.js
+++ b/src/mermaidAPI.js
@@ -351,6 +351,12 @@ const config = {
    * The object containing configurations specific for entity relationship diagrams
    */
   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
      */