Adding icon support

This commit is contained in:
Knut Sveidqvist
2022-07-27 18:40:44 +02:00
parent 82a480d924
commit 1a205aeccc
3 changed files with 39 additions and 8 deletions

View File

@@ -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

View File

@@ -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;

View File

@@ -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);