diff --git a/packages/mermaid/src/diagrams/er/erDb.ts b/packages/mermaid/src/diagrams/er/erDb.ts index 5e9ba20b6..95f2210b7 100644 --- a/packages/mermaid/src/diagrams/er/erDb.ts +++ b/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, diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js index 649686c0c..1bee271e0 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js +++ b/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); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/erBox.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/erBox.ts index 26aae412b..567197a5a 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/erBox.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/erBox.ts @@ -228,7 +228,7 @@ export async function erBox(parent: D3Selection 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 @@ -236,7 +236,7 @@ export async function erBox(parent: D3Selection 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 diff --git a/packages/mermaid/src/themes/theme-base.js b/packages/mermaid/src/themes/theme-base.js index 6e572ea5f..1f858275f 100644 --- a/packages/mermaid/src/themes/theme-base.js +++ b/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; diff --git a/packages/mermaid/src/themes/theme-dark.js b/packages/mermaid/src/themes/theme-dark.js index cf223d989..a0df8d4f3 100644 --- a/packages/mermaid/src/themes/theme-dark.js +++ b/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'; diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js index e0023758e..78f20a475 100644 --- a/packages/mermaid/src/themes/theme-default.js +++ b/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(); diff --git a/packages/mermaid/src/themes/theme-forest.js b/packages/mermaid/src/themes/theme-forest.js index 97c0682f3..34d965201 100644 --- a/packages/mermaid/src/themes/theme-forest.js +++ b/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; diff --git a/packages/mermaid/src/themes/theme-neutral.js b/packages/mermaid/src/themes/theme-neutral.js index 4a622cbcc..8b7f34ed8 100644 --- a/packages/mermaid/src/themes/theme-neutral.js +++ b/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';