marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-30 17:44:08 +01:00
Code Issues Packages Projects Releases Wiki Activity

#3561 Adding cScale0-11 etc and usage of the colors from the mindmap diagram

Browse Source
This commit is contained in:
Knut Sveidqvist
2022-10-03 14:51:13 +02:00
parent 05a594a492
commit 8ee321fd7b
11 changed files with 300 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/mermaid-mindmap/src/styles.js
View File

@@ -3,8 +3,8 @@ import { darken, lighten, isDark } from 'khroma';
const genSections = (options) => {
let sections = '';
for (let i = 0; i < 8; i++) {
options['lineColor' + i] = options['lineColor' + i] || options['gitInv' + i];
for (let i = 0; i < options.THEME_COLOR_LIMIT; i++) {
options['lineColor' + i] = options['lineColor' + i] || options['cScaleInv' + i];
if (isDark(options['lineColor' + i])) {
options['lineColor' + i] = lighten(options['lineColor' + i], 20);
} else {
@@ -12,25 +12,25 @@ const genSections = (options) => {
}
}
for (let i = 0; i < 8; i++) {
for (let i = 0; i < options.THEME_COLOR_LIMIT; i++) {
const sw = '' + (17 - 3 * i);
sections += `
.section-${i - 1} rect, .section-${i - 1} path, .section-${i - 1} circle, .section-${
i - 1
} path {
fill: ${options['git' + i]};
fill: ${options['cScale' + i]};
}
.section-${i - 1} text {
fill: ${options['gitBranchLabel' + i]};
fill: ${options['cScaleLabel' + i]};
// fill: ${options['gitInv' + i]};
}
.node-icon-${i - 1} {
font-size: 40px;
color: ${options['gitBranchLabel' + i]};
color: ${options['cScaleLabel' + i]};
// color: ${options['gitInv' + i]};
}
.section-edge-${i - 1}{
stroke: ${options['git' + i]};
stroke: ${options['cScale' + i]};
}
.edge-depth-${i - 1}{
stroke-width: ${sw};

10
packages/mermaid-mindmap/src/svgDraw.js
View File

@@ -1,5 +1,6 @@
import { select } from 'd3';
import * as db from './mindmapDb';
const MAX_SECTIONS = 12;
/**
* @param {string} text The text to be wrapped
@@ -159,17 +160,19 @@ const roundedRectBkg = function (elem, node) {
* @param {object} elem The D3 dom element in which the node is to be added
* @param {object} node The node to be added
* @param section
* @param fullSection
* @param {object} conf The configuration object
* @returns {number} The height nodes dom element
*/
export const drawNode = function (elem, node, section, conf) {
export const drawNode = function (elem, node, fullSection, conf) {
const section = (fullSection % MAX_SECTIONS) - 1;
const nodeElem = elem.append('g');
node.section = section;
nodeElem.attr(
'class',
(node.class ? node.class + ' ' : '') +
'mindmap-node ' +
(section === -1 ? 'section-root' : 'section-' + section)
(section < 0 ? 'section-root' : 'section-' + section)
);
const bkgElem = nodeElem.append('g');
@@ -260,7 +263,8 @@ export const drawNode = function (elem, node, section, conf) {
return node.height;
};
export const drawEdge = function drawEdge(edgesElem, mindmap, parent, depth, section) {
export const drawEdge = function drawEdge(edgesElem, mindmap, parent, depth, fullSection) {
const section = (fullSection % MAX_SECTIONS) - 1;
const sx = parent.x + parent.width / 2;
const sy = parent.y + parent.height / 2;
const ex = mindmap.x + mindmap.width / 2;