From 03d71829c61bc288ddcd010832a2301385682798 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Wed, 27 Jul 2022 09:43:25 +0200 Subject: [PATCH] Adding default node form --- cypress/platform/knsv.html | 4 +- src/Diagram.js | 1 + src/diagrams/mindmap/mindmapDb.js | 17 +++++++ src/diagrams/mindmap/styles.js | 20 +++++++- src/diagrams/mindmap/svgDraw.js | 76 +++++++++++++++++++++---------- 5 files changed, 91 insertions(+), 27 deletions(-) diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html index 0cfb1f6e3..8041b8b19 100644 --- a/cypress/platform/knsv.html +++ b/cypress/platform/knsv.html @@ -79,7 +79,7 @@ mindmap sc3 GrandChild2 -
+
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);