marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-19 15:30:03 +02:00
Code Issues Packages Projects Releases Wiki Activity

Different hanlding of icons for circles

Browse Source
This commit is contained in:
Knut Sveidqvist
2022-07-28 20:38:25 +02:00
parent ca3f4559ef
commit 00fe5d477d
2 changed files with 49 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
cypress/platform/knsv.html
View File

@@ -92,9 +92,11 @@ mindmap
GrandChild1 GrandChild1
GrandChild2 GrandChild2
Child3(Child 3 has a long wrapped text as well) Child3(Child 3 has a long wrapped text as well)
::icon(mdi mdi-alarm)
GrandChild3 GrandChild3
GrandChild4 GrandChild4
Child4((Child Num 4<br>with<br>wrap text)) Child4((Child Num 4<br>with<br>wrap text))
::icon(mdi mdi-alarm)
GrandChild5[With<br>icon<br>one<br>two<br>three] GrandChild5[With<br>icon<br>one<br>two<br>three]
::icon(mdi mdi-numeric-8-circle) ::icon(mdi mdi-numeric-8-circle)
GrandChild6sakdjhfkla jhklasjfh klj GrandChild6sakdjhfkla jhklasjfh klj
@@ -372,7 +374,7 @@ flowchart TD
}; };
mermaid.initialize({ mermaid.initialize({
// theme: 'dark', // theme: 'dark',
// theme: 'base', theme: 'base',
// arrowMarkerAbsolute: true, // arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}', // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
flowchart: { flowchart: {

67
src/diagrams/mindmap/svgDraw.js
View File

@@ -129,27 +129,52 @@ export const drawNode = function (elem, node, section, conf) {
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) { if (node.icon) {
node.width += 50; if (node.type === db.nodeType.CIRCLE) {
const orgHeight = node.height; node.height += 50;
node.height = Math.max(orgHeight, 60); const orgWidth = node.width;
const heightDiff = Math.abs(node.height - orgHeight); node.width += 50;
const icon = nodeElem // node.width = Math.max(orgWidth, 100);
.append('foreignObject') const widthDiff = Math.abs(node.width - orgWidth);
.attr('width', '60px') const icon = nodeElem
.attr('height', node.height) .append('foreignObject')
.attr('style', 'text-align: center;margin-top:' + heightDiff / 2 + 'px;'); .attr('height', '50px')
// .attr('x', 0) .attr('width', node.width)
// .attr('y', 0) .attr('style', 'text-align: center;');
// .attr('class', 'node-icon ' + node.icon); // .attr('x', 0)
icon // .attr('y', 0)
.append('div') // .attr('class', 'node-icon ' + node.icon);
.attr('class', 'icon-container') icon
.append('i') .append('div')
.attr('class', 'node-icon-' + section + ' ' + node.icon); .attr('class', 'icon-container')
textElem.attr( .append('i')
'transform', .attr('class', 'node-icon-' + section + ' ' + node.icon);
'translate(' + (25 + node.width / 2) + ', ' + (heightDiff / 2 + node.padding / 2) + ')' textElem.attr(
); 'transform',
'translate(' + node.width / 2 + ', ' + (node.height / 2 - 1.5 * node.padding) + ')'
);
} else {
node.width += 50;
const orgHeight = node.height;
node.height = Math.max(orgHeight, 60);
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 { } else {
textElem.attr('transform', 'translate(' + node.width / 2 + ', ' + node.padding / 2 + ')'); textElem.attr('transform', 'translate(' + node.width / 2 + ', ' + node.padding / 2 + ')');
} }