From 2a10143406d4b46b08674e6ae810179ebfed0780 Mon Sep 17 00:00:00 2001 From: omkarht Date: Wed, 7 May 2025 20:47:15 +0530 Subject: [PATCH] Fix: Adjust ER diagram row height calculation and layout rendering --- demos/er-multiline.html | 222 ++++++++++++++++++ .../rendering-elements/shapes/erBox.ts | 26 +- 2 files changed, 236 insertions(+), 12 deletions(-) create mode 100644 demos/er-multiline.html diff --git a/demos/er-multiline.html b/demos/er-multiline.html new file mode 100644 index 000000000..e85b320aa --- /dev/null +++ b/demos/er-multiline.html @@ -0,0 +1,222 @@ + + + + + + + + + + + + + + + + + + + +
+ 
+              erDiagram
+              CAR ||--o{ NAMED-DRIVER : allows
+              CAR ::: Pine {
+                  string registrationNumber PK "Primary Key
Unique registration number"
+                  string make "Car make
e.g., Toyota"
+                  string model "Model of the car
e.g., Corolla"
+                  string[] parts "List of parts
Stored as array"
+              }
+              PERSON ||--o{ NAMED-DRIVER : is
+              PERSON ::: someclass {
+                  string driversLicense PK "The license #
Primary Key"
+                  string(99) firstName "Only 99 characters 
are allowed 
 e.g., Smith"
+                  string lastName "Last name of person
e.g., Smith"
+                  string phone UK "Unique phone number
Used for contact"
+                  int age "Age of the person
Must be numeric"
+              }
+              NAMED-DRIVER {
+                  string carRegistrationNumber PK, FK, UK, PK "Foreign key to CAR
Also part of PK"
+                  string driverLicence PK, FK "Foreign key to PERSON
Also part of PK"
+              }
+              MANUFACTURER only one to zero or more CAR : makesx      
+
+
+ 
+                  erDiagram
+                  _**testẽζ➕Ø😀㌕ぼ**_ {
+                    *__List~List~int~~sdfds__* **driversLicense** PK "***The l😀icense #***"
+                    string last*Name*
+                    string __phone__ UK
+                    *string(99)~T~~~~~~* firstName "Only __99__ 
characters are a
llowed dsfsdfsdfsdfs"
+                  int _age_
+                  }
+
+
+ + + + 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 af1e9945a..23c6fb091 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/erBox.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/erBox.ts @@ -89,6 +89,7 @@ export async function erBox(parent: D3Selection nameBBox.height += TEXT_PADDING; let yOffset = 0; const yOffsets = []; + const rows = []; let maxTypeWidth = 0; let maxNameWidth = 0; let maxKeysWidth = 0; @@ -137,12 +138,12 @@ export async function erBox(parent: D3Selection ); maxCommentWidth = Math.max(maxCommentWidth, commentBBox.width + PADDING); - yOffset += + const rowHeight = Math.max(typeBBox.height, nameBBox.height, keysBBox.height, commentBBox.height) + TEXT_PADDING; - yOffsets.push(yOffset); + rows.push({ yOffset, rowHeight }); + yOffset += rowHeight; } - yOffsets.pop(); let totalWidthSections = 4; if (maxKeysWidth <= PADDING) { @@ -185,8 +186,12 @@ export async function erBox(parent: D3Selection options.fillStyle = 'solid'; } + let totalShapeBBoxHeight = 0; + if (rows.length > 0) { + totalShapeBBoxHeight = rows.reduce((sum, row) => sum + (row?.rowHeight ?? 0), 0); + } const w = Math.max(shapeBBox.width + PADDING * 2, node?.width || 0, maxWidth); - const h = Math.max(shapeBBox.height + (yOffsets[0] || yOffset) + TEXT_PADDING, node?.height || 0); + const h = Math.max((totalShapeBBoxHeight ?? 0) + nameBBox.height, node?.height || 0); const x = -w / 2; const y = -h / 2; @@ -232,13 +237,10 @@ export async function erBox(parent: D3Selection yOffsets.push(0); // Draw row rects - for (const [i, yOffset] of yOffsets.entries()) { - if (i === 0 && yOffsets.length > 1) { - continue; - // Skip first row - } - const isEven = i % 2 === 0 && yOffset !== 0; - const roughRect = rc.rectangle(x, nameBBox.height + y + yOffset, w, nameBBox.height, { + for (const [i, row] of rows.entries()) { + const contentRowIndex = i + 1; // Adjusted index to skip the header (name) row + const isEven = contentRowIndex % 2 === 0 && row.yOffset !== 0; + const roughRect = rc.rectangle(x, nameBBox.height + y + row?.yOffset, w, row?.rowHeight, { ...options, fill: isEven ? rowEven : rowOdd, stroke: nodeBorder, @@ -246,7 +248,7 @@ export async function erBox(parent: D3Selection shapeSvg .insert(() => roughRect, 'g.label') .attr('style', cssStyles!.join('')) - .attr('class', `row-rect-${i % 2 === 0 ? 'even' : 'odd'}`); + .attr('class', `row-rect-${isEven ? 'even' : 'odd'}`); } // Draw divider lines