Added support for row odd/even in different themes

Author: ashishjain0512

packages/mermaid/src/diagrams/er/erDb.ts

@@ -224,6 +224,7 @@ export class ErDB implements DiagramDB {
           counter: count++,
         }),
         type: 'normal',
+        curve: 'basis',
         start: relationship.entityA,
         end: relationship.entityB,
         label: relationship.roleA,

packages/mermaid/src/rendering-util/rendering-elements/edges.js

@@ -5,7 +5,8 @@ import { createText } from '../createText.js';
 import utils from '../../utils.js';
 import { getLineFunctionsWithOffset } from '../../utils/lineWithOffset.js';
 import { getSubGraphTitleMargins } from '../../utils/subGraphTitleMargins.js';
-import { curveBasis, line, select } from 'd3';
+
+import { curveBasis, curveLinear, curveCardinal, line, select } from 'd3';
 import rough from 'roughjs';
 import createLabel from './createLabel.js';
 import { addEdgeMarkers } from './edgeMarker.ts';
@@ -472,8 +473,19 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
   let lineData = points.filter((p) => !Number.isNaN(p.y));
   lineData = fixCorners(lineData);
   let curve = curveBasis;
-  if (edge.curve) {
-    curve = edge.curve;
+  curve = curveLinear;
+  switch (edge.curve) {
+    case 'linear':
+      curve = curveLinear;
+      break;
+    case 'basis':
+      curve = curveBasis;
+      break;
+    case 'cardinal':
+      curve = curveCardinal;
+      break;
+    default:
+      curve = curveBasis;
   }
 
   const { x, y } = getLineFunctionsWithOffset(edge);

packages/mermaid/src/rendering-util/rendering-elements/shapes/erBox.ts

@@ -228,15 +228,15 @@ export async function erBox<T extends SVGGraphicsElement>(parent: D3Selection<T>
   const rect = shapeSvg.insert(() => roughRect, ':first-child').attr('style', cssStyles!.join(''));
 
   const { themeVariables } = getConfig();
-  const { secondaryColor, tertiaryColor, nodeBorder } = themeVariables;
+  const { rowEven, rowOdd, nodeBorder } = themeVariables;
 
   yOffsets.push(0);
   // Draw row rects
   for (const [i, yOffset] of yOffsets.entries()) {
     const isEven = i % 2 === 0 && yOffset !== 0;
     const roughRect = rc.rectangle(x, nameBBox.height + y + yOffset, w, nameBBox.height, {
       ...options,
-      fill: isEven ? tertiaryColor : secondaryColor,
+      fill: isEven ? rowEven : rowOdd,
       stroke: nodeBorder,
     });
     shapeSvg

packages/mermaid/src/themes/theme-base.js

@@ -110,6 +110,16 @@ class Theme {
     this.personBorder = this.personBorder || this.primaryBorderColor;
     this.personBkg = this.personBkg || this.mainBkg;
 
+    /* ER diagram */
+
+    if (this.darkMode) {
+      this.rowOdd = this.rowOdd || darken(this.mainBkg, 5) || '#ffffff';
+      this.rowEven = this.rowEven || darken(this.mainBkg, 10);
+    } else {
+      this.rowOdd = this.rowOdd || lighten(this.mainBkg, 75) || '#ffffff';
+      this.rowEven = this.rowEven || lighten(this.mainBkg, 5);
+    }
+
     /* state colors */
     this.transitionColor = this.transitionColor || this.lineColor;
     this.transitionLabelColor = this.transitionLabelColor || this.textColor;

packages/mermaid/src/themes/theme-dark.js

@@ -91,6 +91,10 @@ class Theme {
     this.archGroupBorderColor = this.primaryBorderColor;
     this.archGroupBorderWidth = '2px';
 
+    /* Entity Relationship variables */
+    this.rowOdd = this.rowOdd || lighten(this.mainBkg, 5) || '#ffffff';
+    this.rowEven = this.rowEven || darken(this.mainBkg, 10);
+
     /* state colors */
     this.labelColor = 'calculated';
 

packages/mermaid/src/themes/theme-default.js

@@ -119,6 +119,10 @@ class Theme {
     this.archGroupBorderColor = this.primaryBorderColor;
     this.archGroupBorderWidth = '2px';
 
+    /* Entity Relationship variables */
+    this.rowOdd = 'calculated';
+    this.rowEven = 'calculated';
+
     /* state colors */
     this.labelColor = 'black';
     this.errorBkgColor = '#552222';
@@ -205,6 +209,9 @@ class Theme {
     this.archEdgeColor = this.lineColor;
     this.archEdgeArrowColor = this.lineColor;
 
+    /* Entity Relationship variables */
+    this.rowOdd = this.rowOdd || lighten(this.primaryColor, 75) || '#ffffff';
+    this.rowEven = this.rowEven || lighten(this.primaryColor, 1);
     /* state colors */
     this.transitionColor = this.transitionColor || this.lineColor;
     this.transitionLabelColor = this.transitionLabelColor || this.textColor;
@@ -373,6 +380,13 @@ class Theme {
     /* -------------------------------------------------- */
   }
   calculate(overrides) {
+    // for all keys in this object, if it is 'calculated' then set it to undefined
+    Object.keys(this).forEach((k) => {
+      if (this[k] === 'calculated') {
+        this[k] = undefined;
+      }
+    });
+
     if (typeof overrides !== 'object') {
       // Calculate colors form base colors
       this.updateColors();

packages/mermaid/src/themes/theme-forest.js

@@ -173,6 +173,10 @@ class Theme {
     this.archEdgeColor = this.lineColor;
     this.archEdgeArrowColor = this.lineColor;
 
+    /* ER diagram */
+    this.rowOdd = this.rowOdd || lighten(this.mainBkg, 75) || '#ffffff';
+    this.rowEven = this.rowEven || lighten(this.mainBkg, 20);
+
     /* state colors */
     this.transitionColor = this.transitionColor || this.lineColor;
     this.transitionLabelColor = this.transitionLabelColor || this.textColor;

packages/mermaid/src/themes/theme-neutral.js

@@ -105,6 +105,10 @@ class Theme {
     this.archGroupBorderColor = this.primaryBorderColor;
     this.archGroupBorderWidth = '2px';
 
+    /* ER diagram */
+    this.rowOdd = this.rowOdd || lighten(this.mainBkg, 75) || '#ffffff';
+    this.rowEven = this.rowEven || '#f4f4f4';
+
     /* state colors */
     this.labelColor = 'black';