diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html index 72df620e6..ba71a135c 100644 --- a/cypress/platform/knsv.html +++ b/cypress/platform/knsv.html @@ -95,9 +95,10 @@ mindmap GrandChild3 GrandChild4 Child4((Child Num 4
with
wrap text)) - GrandChild5[With icon] - :::(mdi mdi-numeric-8-circle) - GrandChild6 + GrandChild5[With
icon
one
two
three] + ::icon(mdi mdi-numeric-8-circle) + GrandChild6sakdjhfkla jhklasjfh klj + ::icon(mdi mdi-numeric-8-circle) Child1 GrandChild1 sc1 diff --git a/src/diagrams/mindmap/styles.js b/src/diagrams/mindmap/styles.js index 86d9fe621..1472c44d8 100644 --- a/src/diagrams/mindmap/styles.js +++ b/src/diagrams/mindmap/styles.js @@ -21,6 +21,10 @@ const genSections = (options) => { .section-${i - 1} text { fill: ${options['gitBranchLabel' + i]}; } + .node-icon-${i - 1} { + font-size: 40px; + color: ${options['gitBranchLabel' + i]}; + } .section-edge-${i - 1}{ stroke: ${options['git' + i]}; } @@ -55,6 +59,12 @@ const getStyles = (options) => .section-root text { fill: ${options.gitBranchLabel0}; } + .icon-container { + height:100%; + display: flex; + justify-content: center; + align-items: center;A + } `; export default getStyles; diff --git a/src/diagrams/mindmap/svgDraw.js b/src/diagrams/mindmap/svgDraw.js index a4ce77b82..f887fa469 100644 --- a/src/diagrams/mindmap/svgDraw.js +++ b/src/diagrams/mindmap/svgDraw.js @@ -128,12 +128,32 @@ export const drawNode = function (elem, node, section, conf) { const bbox = txt.node().getBBox(); node.height = bbox.height + conf.fontSize * 1.1 * 0.5 + node.padding; node.width = bbox.width + 2 * node.padding; - - // textElem.attr('transform', 'translate(' + node.width / 2 + ', ' + node.height / 2 + ')'); - textElem.attr('transform', 'translate(' + node.width / 2 + ', ' + node.padding / 2 + ')'); - { - /* */ + if (node.icon) { + 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 { + textElem.attr('transform', 'translate(' + node.width / 2 + ', ' + node.padding / 2 + ')'); } + switch (node.type) { case db.nodeType.DEFAULT: defaultBkg(bkgElem, node, section, conf);