+
mindmap
root[
The root where the things
@@ -365,7 +365,7 @@ flowchart TD
};
mermaid.initialize({
// theme: 'dark',
- theme: 'neutral',
+ // theme: 'base',
// arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
flowchart: {
diff --git a/src/Diagram.js b/src/Diagram.js
index a87ed42fb..0f914411f 100644
--- a/src/Diagram.js
+++ b/src/Diagram.js
@@ -32,6 +32,7 @@ class Diagram {
const error = { str, hash };
throw error;
};
+ this.db.clear();
this.parser.parse(this.txt);
}
parse(text) {
diff --git a/src/diagrams/mindmap/mindmapDb.js b/src/diagrams/mindmap/mindmapDb.js
index 64fdbb0f9..54fee3cdd 100644
--- a/src/diagrams/mindmap/mindmapDb.js
+++ b/src/diagrams/mindmap/mindmapDb.js
@@ -98,6 +98,22 @@ export const decorateNode = (decoration) => {
node.class = sanitizeText(decoration.class);
}
};
+
+const type2Str = (type) => {
+ switch (type) {
+ case nodeType.DEFAULT:
+ return 'no-border';
+ case nodeType.RECT:
+ return 'rect';
+ case nodeType.ROUNDED_RECT:
+ return 'rounded-rect';
+ case nodeType.CIRCLE:
+ return 'circle';
+ default:
+ return 'no-border';
+ }
+};
+
export default {
getMindmap,
addNode,
@@ -109,5 +125,6 @@ export default {
getElementById: (id) => elements[id],
// getNodeById: (id) => nodes.find((node) => node.id === id),
getNodeById: (id) => nodes[id],
+ type2Str,
// parseError
};
diff --git a/src/diagrams/mindmap/styles.js b/src/diagrams/mindmap/styles.js
index 51436d6d7..9e3a9208f 100644
--- a/src/diagrams/mindmap/styles.js
+++ b/src/diagrams/mindmap/styles.js
@@ -1,9 +1,21 @@
+import { darken, lighten, adjust, invert, isDark } from 'khroma';
+
const genSections = (options) => {
let sections = '';
+
+ for (let i = 0; i < 8; i++) {
+ options['lineColor' + i] = options['lineColor' + i] || options['gitBranchLabel' + i];
+ if (isDark(options['lineColor' + i])) {
+ options['lineColor' + i] = lighten(options['lineColor' + i], 30);
+ } else {
+ options['lineColor' + i] = darken(options['lineColor' + i], 30);
+ }
+ }
+
for (let i = 1; i < 8; i++) {
const sw = '' + (17 - 3 * i);
sections += `
- .section-${i - 1} rect {
+ .section-${i - 1} rect, .section-${i - 1} path {
fill: ${options['git' + i]};
}
.section-${i - 1} text {
@@ -15,6 +27,10 @@ const genSections = (options) => {
.edge-depth-${i - 1}{
stroke-width: ${sw};
}
+ .section-${i - 1} line {
+ stroke: ${options['lineColor' + i]} ;
+ stroke-width: 3;
+ }
`;
}
return sections;
@@ -26,7 +42,7 @@ const getStyles = (options) =>
stroke-width: 3;
}
${genSections(options)}
- .section-root rect {
+ .section-root rect, .section-root path {
fill: ${options.git0};
}
.section-root text {
diff --git a/src/diagrams/mindmap/svgDraw.js b/src/diagrams/mindmap/svgDraw.js
index 6182348df..0af410dbe 100644
--- a/src/diagrams/mindmap/svgDraw.js
+++ b/src/diagrams/mindmap/svgDraw.js
@@ -48,6 +48,37 @@ function wrap(text, width) {
}
});
}
+
+const defaultBkg = function (elem, node, section, conf) {
+ const rd = 5;
+ const r = elem
+ .append('path')
+ .attr('id', 'node-' + node.id)
+ .attr('class', 'node-bkg node-' + db.type2Str(node.type))
+ .attr(
+ 'd',
+ `M0 ${node.height - rd} v${-node.height + 2 * rd} q0,-5 5,-5 h${
+ node.width - 2 * rd
+ } q5,0 5,5 v${node.height - rd} H0 Z`
+ );
+
+ elem
+ .append('line')
+ .attr('class', 'node-line-' + section)
+ .attr('x1', 0)
+ .attr('y1', node.height)
+ .attr('x2', node.width)
+ .attr('y2', node.height);
+};
+const rectBkg = function (elem, node, section, conf) {
+ const r = elem
+ .append('rect')
+ .attr('id', 'node-' + node.id)
+ .attr('class', 'node-bkg node-' + db.type2Str(node.type))
+ .attr('height', node.height)
+ .attr('width', node.width);
+};
+
/**
* @param {object} elem The D3 dom element in which the node is to be added
* @param {object} node The node to be added
@@ -61,29 +92,10 @@ export const drawNode = function (elem, node, section, conf) {
'class',
'mindmap-node ' + (section === -1 ? 'section-root' : 'section-' + section)
);
+ const bkgElem = nodeElem.append('g');
- const rect = {
- fill: '#EDF2AE',
- stroke: '#666',
- width: node.width,
- anchor: 'start',
- height: 100,
- rx: 3,
- ry: 3,
- };
-
- const r = nodeElem
- .append('rect')
- // .attr('width', node.width)
- // .attr('fill', section === -1 ? rect.fill : section2Color(section))
- // .attr('stroke', section === -1 ? rect.stroke : 0)
- .attr('rx', rect.rx)
- .attr('ry', rect.ry)
- .attr('id', 'node-' + node.id)
- .attr('class', 'node-bkg ');
-
+ // Create the wrapped text element
const textElem = nodeElem.append('g');
-
const txt = textElem
.append('text')
.text(node.descr)
@@ -95,10 +107,28 @@ export const drawNode = function (elem, node, section, conf) {
const bbox = txt.node().getBBox();
node.height = bbox.height + conf.fontSize * 1.1 * 0.5;
node.width = bbox.width + conf.fontSize * 1.1 * 0.5;
- r.attr('height', node.height).attr('width', node.width);
+
textElem.attr('transform', 'translate(' + node.width / 2 + ', ' + 0 + ')');
+
+ switch (node.type) {
+ case db.nodeType.DEFAULT:
+ defaultBkg(bkgElem, node, section, conf);
+ break;
+ case db.nodeType.ROUNDED_RECT:
+ rectBkg(bkgElem, node, section, conf);
+ break;
+ case db.nodeType.RECT:
+ rectBkg(bkgElem, node, section, conf);
+ break;
+ case db.nodeType.CIRCLE:
+ rectBkg(bkgElem, node, section, conf);
+ break;
+ default:
+ // defaultBkg(bkgElem, node, section, conf);
+ }
+
// Position the node to its coordinate
- if (node.x || node.y) {
+ if (typeof node.x !== 'undefined' && typeof node.y !== 'undefined') {
nodeElem.attr('transform', 'translate(' + node.x + ',' + node.y + ')');
}
db.setElementForId(node.id, nodeElem);