mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-15 21:39:40 +02:00
Correct positioning for class title
This commit is contained in:
@@ -22,6 +22,12 @@
|
|||||||
<h1>info below</h1>
|
<h1>info below</h1>
|
||||||
<div class="mermaid" style="width: 100%; height: 20%;">
|
<div class="mermaid" style="width: 100%; height: 20%;">
|
||||||
classDiagram-v2
|
classDiagram-v2
|
||||||
|
class BankAccount{
|
||||||
|
+String owner
|
||||||
|
+BigDecimal balance
|
||||||
|
+deposit(amount) bool
|
||||||
|
+withdrawl(amount) int
|
||||||
|
}
|
||||||
classA --|> classB : Inheritance
|
classA --|> classB : Inheritance
|
||||||
classC --* classD : Composition
|
classC --* classD : Composition
|
||||||
classE --o classF : Aggregation
|
classE --o classF : Aggregation
|
||||||
|
@@ -625,9 +625,14 @@ const class_box = (parent, node) => {
|
|||||||
verticalPos = interfaceBBox.height + rowPadding;
|
verticalPos = interfaceBBox.height + rowPadding;
|
||||||
}
|
}
|
||||||
// Positin the class title label
|
// Positin the class title label
|
||||||
|
let diffX = (maxWidth - classTitleBBox.width) / 2;
|
||||||
select(classTitleLabel).attr(
|
select(classTitleLabel).attr(
|
||||||
'transform',
|
'transform',
|
||||||
'translate( ' + -maxWidth + node.padding / 2 + ', ' + ((-1 * maxHeight) / 2 + verticalPos) + ')'
|
'translate( ' +
|
||||||
|
((-1 * maxWidth) / 2 + diffX) +
|
||||||
|
', ' +
|
||||||
|
((-1 * maxHeight) / 2 + verticalPos) +
|
||||||
|
')'
|
||||||
);
|
);
|
||||||
verticalPos += classTitleBBox.height + rowPadding;
|
verticalPos += classTitleBBox.height + rowPadding;
|
||||||
|
|
||||||
|
@@ -10,6 +10,16 @@ const getStyles = options =>
|
|||||||
font-weight: bolder;
|
font-weight: bolder;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.node rect,
|
||||||
|
.node circle,
|
||||||
|
.node ellipse,
|
||||||
|
.node polygon,
|
||||||
|
.node path {
|
||||||
|
fill: ${options.mainBkg};
|
||||||
|
stroke: ${options.nodeBorder};
|
||||||
|
stroke-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.divider {
|
.divider {
|
||||||
stroke: ${options.nodeBorder};
|
stroke: ${options.nodeBorder};
|
||||||
|
Reference in New Issue
Block a user