mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-19 15:30:03 +02:00
Adding icon support
This commit is contained in:
@@ -95,9 +95,10 @@ mindmap
|
|||||||
GrandChild3
|
GrandChild3
|
||||||
GrandChild4
|
GrandChild4
|
||||||
Child4((Child Num 4<br>with<br>wrap text))
|
Child4((Child Num 4<br>with<br>wrap text))
|
||||||
GrandChild5[With icon]
|
GrandChild5[With<br>icon<br>one<br>two<br>three]
|
||||||
:::(mdi mdi-numeric-8-circle)
|
::icon(mdi mdi-numeric-8-circle)
|
||||||
GrandChild6
|
GrandChild6sakdjhfkla jhklasjfh klj
|
||||||
|
::icon(mdi mdi-numeric-8-circle)
|
||||||
Child1
|
Child1
|
||||||
GrandChild1
|
GrandChild1
|
||||||
sc1
|
sc1
|
||||||
|
@@ -21,6 +21,10 @@ const genSections = (options) => {
|
|||||||
.section-${i - 1} text {
|
.section-${i - 1} text {
|
||||||
fill: ${options['gitBranchLabel' + i]};
|
fill: ${options['gitBranchLabel' + i]};
|
||||||
}
|
}
|
||||||
|
.node-icon-${i - 1} {
|
||||||
|
font-size: 40px;
|
||||||
|
color: ${options['gitBranchLabel' + i]};
|
||||||
|
}
|
||||||
.section-edge-${i - 1}{
|
.section-edge-${i - 1}{
|
||||||
stroke: ${options['git' + i]};
|
stroke: ${options['git' + i]};
|
||||||
}
|
}
|
||||||
@@ -55,6 +59,12 @@ const getStyles = (options) =>
|
|||||||
.section-root text {
|
.section-root text {
|
||||||
fill: ${options.gitBranchLabel0};
|
fill: ${options.gitBranchLabel0};
|
||||||
}
|
}
|
||||||
|
.icon-container {
|
||||||
|
height:100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;A
|
||||||
|
}
|
||||||
|
|
||||||
`;
|
`;
|
||||||
export default getStyles;
|
export default getStyles;
|
||||||
|
@@ -128,12 +128,32 @@ export const drawNode = function (elem, node, section, conf) {
|
|||||||
const bbox = txt.node().getBBox();
|
const bbox = txt.node().getBBox();
|
||||||
node.height = bbox.height + conf.fontSize * 1.1 * 0.5 + node.padding;
|
node.height = bbox.height + conf.fontSize * 1.1 * 0.5 + node.padding;
|
||||||
node.width = bbox.width + 2 * node.padding;
|
node.width = bbox.width + 2 * node.padding;
|
||||||
|
if (node.icon) {
|
||||||
// textElem.attr('transform', 'translate(' + node.width / 2 + ', ' + node.height / 2 + ')');
|
node.width += 50;
|
||||||
textElem.attr('transform', 'translate(' + node.width / 2 + ', ' + node.padding / 2 + ')');
|
const orgHeight = node.height;
|
||||||
{
|
node.height = Math.max(orgHeight, 60);
|
||||||
/* <i class="mdi mdi-arrange-bring-to-front"></i> */
|
const heightDiff = Math.abs(node.height - orgHeight);
|
||||||
|
const icon = nodeElem
|
||||||
|
.append('foreignObject')
|
||||||
|
.attr('width', '60px')
|
||||||
|
.attr('height', node.height)
|
||||||
|
.attr('style', 'text-align: center;margin-top:' + heightDiff / 2 + 'px;');
|
||||||
|
// .attr('x', 0)
|
||||||
|
// .attr('y', 0)
|
||||||
|
// .attr('class', 'node-icon ' + node.icon);
|
||||||
|
icon
|
||||||
|
.append('div')
|
||||||
|
.attr('class', 'icon-container')
|
||||||
|
.append('i')
|
||||||
|
.attr('class', 'node-icon-' + section + ' ' + node.icon);
|
||||||
|
textElem.attr(
|
||||||
|
'transform',
|
||||||
|
'translate(' + (25 + node.width / 2) + ', ' + (heightDiff / 2 + node.padding / 2) + ')'
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
textElem.attr('transform', 'translate(' + node.width / 2 + ', ' + node.padding / 2 + ')');
|
||||||
}
|
}
|
||||||
|
|
||||||
switch (node.type) {
|
switch (node.type) {
|
||||||
case db.nodeType.DEFAULT:
|
case db.nodeType.DEFAULT:
|
||||||
defaultBkg(bkgElem, node, section, conf);
|
defaultBkg(bkgElem, node, section, conf);
|
||||||
|
Reference in New Issue
Block a user