marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-17 14:29:48 +02:00
Code Issues Packages Projects Releases Wiki Activity

Theming changes for base theme

Browse Source
This commit is contained in:
Knut Sveidqvist
2022-03-03 19:58:43 +01:00
parent 7e041dd921
commit b1fab6ffcd
5 changed files with 104 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
cypress/platform/gitgraph.html
View File

@@ -8,11 +8,11 @@
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style> <style>
body { body {
background: rgb(221, 208, 208); /* background: rgb(221, 208, 208); */
/*background:#333;*/ /*background:#333;*/
font-family: 'Arial'; font-family: 'Arial';
} }
h1 { color: white;} /* h1 { color: white;} */
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
@@ -102,7 +102,7 @@
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
}; };
mermaid.initialize({ mermaid.initialize({
theme: 'default', theme: 'base',
// arrowMarkerAbsolute: true, // arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}', // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 1, logLevel: 1,

3
src/diagrams/git/gitGraphAst.js
View File

@@ -7,9 +7,6 @@ let curBranch = 'master';
let direction = 'LR'; let direction = 'LR';
let seq = 0; let seq = 0;
/**
*
*/
function getId() { function getId() {
return random({ length: 7 }); return random({ length: 7 });
} }

39
src/diagrams/git/gitGraphRenderer.js
View File

@@ -10,6 +10,8 @@ import { getConfig } from '../../config';
let allCommitsDict = {}; let allCommitsDict = {};
let branchNum; let branchNum;
const commitType = db.commitType;
let branchPos = {}; let branchPos = {};
let commitPos = {}; let commitPos = {};
let maxPos = 0; let maxPos = 0;
@@ -111,13 +113,40 @@ const drawCommits = (svg, commits, modifyGraph) => {
// log.debug('drawCommits (commit branchPos)', commit, branchPos); // log.debug('drawCommits (commit branchPos)', commit, branchPos);
const y = branchPos[commit.branch].pos; const y = branchPos[commit.branch].pos;
console.log(commit);
// Don't draw the commits now but calculate the positioning which is used by the branmch lines etc. // Don't draw the commits now but calculate the positioning which is used by the branmch lines etc.
if (modifyGraph) { if (modifyGraph) {
const line = gBullets.append('circle'); let typeClass;
line.attr('cx', pos + 10); switch(commit.type) {
line.attr('cy', y); case commitType.NORMAL:
line.attr('r', 10); typeClass = 'commit-normal';
line.attr('class', 'commit commit-'+commit.type + ' ' + commit.id + ' commit' + branchPos[commit.branch].index); break;
case commitType.REVERSE:
typeClass = 'commit-reverse';
break;
case commitType.HIGHLIGHT:
typeClass = 'commit-highlight';
break;
case commitType.MERGE:
typeClass = 'commit-merge';
break;
default:
typeClass = 'commit-normal';
}
const circle = gBullets.append('circle');
circle.attr('cx', pos + 10);
circle.attr('cy', y);
circle.attr('r', commit.type === commitType.MERGE ? 9:10);
circle.attr('class', 'commit ' + commit.id + ' commit' + branchPos[commit.branch].index);
if(commit.type === commitType.MERGE) {
const circle2 = gBullets.append('circle');
circle2.attr('cx', pos + 10);
circle2.attr('cy', y);
circle2.attr('r', 6);
circle2.attr('class', 'commit '+typeClass + ' ' + commit.id + ' commit' + branchPos[commit.branch].index);
}
} }
commitPos[commit.id] = {x: pos + 10, y: y}; commitPos[commit.id] = {x: pos + 10, y: y};

70
src/diagrams/git/styles.js
View File

@@ -14,41 +14,47 @@ const getStyles = (options) =>
stroke-dasharray: 2; stroke-dasharray: 2;
} }
.commit-labels { font-size: 10px; } .commit-labels { font-size: 10px; }
.commit0 { stroke: ${options.fillType0}; fill: ${options.fillType0}; } .commit0 { stroke: ${options.git0}; fill: ${options.git0}; }
.commit1 { stroke: ${options.fillType1}; fill: ${options.fillType1}; } .commit1 { stroke: ${options.git1}; fill: ${options.git1}; }
.commit2 { stroke: ${options.fillType2}; fill: ${options.fillType2}; } .commit2 { stroke: ${options.git2}; fill: ${options.git2}; }
.commit3 { stroke: ${options.fillType3}; fill: ${options.fillType3}; } .commit3 { stroke: ${options.git3}; fill: ${options.git3}; }
.commit4 { stroke: ${options.fillType4}; fill: ${options.fillType4}; } .commit4 { stroke: ${options.git4}; fill: ${options.git4}; }
.commit5 { stroke: ${options.fillType5}; fill: ${options.fillType5}; } .commit5 { stroke: ${options.git5}; fill: ${options.git5}; }
.commit6 { stroke: ${options.fillType6}; fill: ${options.fillType6}; } .commit6 { stroke: ${options.git6}; fill: ${options.git6}; }
.commit7 { stroke: ${options.fillType7}; fill: ${options.fillType7}; } .commit7 { stroke: ${options.git7}; fill: ${options.git7}; }
// .branch0 { stroke: ${options.fillType0}; }
// .branch1 { stroke: ${options.fillType1}; } .commit-merge {
// .branch2 { stroke: ${options.fillType2}; } stroke: ${options.primaryColor};
// .branch3 { stroke: ${options.fillType3}; } fill: ${options.primaryColor};
// .branch4 { stroke: ${options.fillType4}; } }
// .branch5 { stroke: ${options.fillType5}; }
// .branch6 { stroke: ${options.fillType6}; } // .branch0 { stroke: ${options.git0}; }
// .branch7 { stroke: ${options.fillType7}; } // .branch1 { stroke: ${options.git1}; }
.label0 { fill: ${options.fillType0}; } // .branch2 { stroke: ${options.git2}; }
.label1 { fill: ${options.fillType1}; } // .branch3 { stroke: ${options.git3}; }
.label2 { fill: ${options.fillType2}; } // .branch4 { stroke: ${options.git4}; }
.label3 { fill: ${options.fillType3}; } // .branch5 { stroke: ${options.git5}; }
.label4 { fill: ${options.fillType4}; } // .branch6 { stroke: ${options.git6}; }
.label5 { fill: ${options.fillType5}; } // .branch7 { stroke: ${options.git7}; }
.label6 { fill: ${options.fillType6}; } .label0 { fill: ${options.git0}; }
.label7 { fill: ${options.fillType7}; } .label1 { fill: ${options.git1}; }
.label2 { fill: ${options.git2}; }
.label3 { fill: ${options.git3}; }
.label4 { fill: ${options.git4}; }
.label5 { fill: ${options.git5}; }
.label6 { fill: ${options.git6}; }
.label7 { fill: ${options.git7}; }
// .arrow { stroke : ${options.tertiaryColor}; stroke-width: 8; stroke-linecap: round; } // .arrow { stroke : ${options.tertiaryColor}; stroke-width: 8; stroke-linecap: round; }
.arrow { stroke-width: 8; stroke-linecap: round; fill: none} .arrow { stroke-width: 8; stroke-linecap: round; fill: none}
.arrow0 { stroke: ${options.fillType0}; } .arrow0 { stroke: ${options.git0}; }
.arrow1 { stroke: ${options.fillType1}; } .arrow1 { stroke: ${options.git1}; }
.arrow2 { stroke: ${options.fillType2}; } .arrow2 { stroke: ${options.git2}; }
.arrow3 { stroke: ${options.fillType3}; } .arrow3 { stroke: ${options.git3}; }
.arrow4 { stroke: ${options.fillType4}; } .arrow4 { stroke: ${options.git4}; }
.arrow5 { stroke: ${options.fillType5}; } .arrow5 { stroke: ${options.git5}; }
.arrow6 { stroke: ${options.fillType6}; } .arrow6 { stroke: ${options.git6}; }
.arrow7 { stroke: ${options.fillType7}; } .arrow7 { stroke: ${options.git7}; }
#arrowhead { fill: #990099;} #arrowhead { fill: #990099;}
.branchLabel { } .branchLabel { }
} }

29
src/themes/theme-base.js
View File

@@ -177,6 +177,35 @@ class Theme {
this.relationLabelBackground || this.relationLabelBackground ||
(this.darkMode ? darken(this.secondaryColor, 30) : this.secondaryColor); (this.darkMode ? darken(this.secondaryColor, 30) : this.secondaryColor);
this.relationLabelColor = this.relationLabelColor || this.actorTextColor; this.relationLabelColor = this.relationLabelColor || this.actorTextColor;
/* git */
this.git0 = this.git0 || this.primaryColor;
this.git1 = this.git1 || this.secondaryColor;
this.git2 = this.git2 || this.tertiaryColor;
this.git3 = this.git3 || adjust(this.primaryColor, { h: -30 });
this.git4 = this.git4 || adjust(this.primaryColor, { h: -60 });
this.git5 = this.git5 || adjust(this.primaryColor, { h: -90 });
this.git6 = this.git6 || adjust(this.primaryColor, { h: +60 });
this.git7 = this.git7 || adjust(this.primaryColor, { h: +120 });
if (this.darkMode) {
this.git0 = lighten(this.git0, 25);
this.git1 = lighten(this.git1, 25);
this.git2 = lighten(this.git2, 25);
this.git3 = lighten(this.git3, 25);
this.git4 = lighten(this.git4, 25);
this.git5 = lighten(this.git5, 25);
this.git6 = lighten(this.git6, 25);
this.git7 = lighten(this.git7, 25);
} else {
this.git0 = darken(this.git0, 25);
this.git1 = darken(this.git1, 25);
this.git2 = darken(this.git2, 25);
this.git3 = darken(this.git3, 25);
this.git4 = darken(this.git4, 25);
this.git5 = darken(this.git5, 25);
this.git6 = darken(this.git6, 25);
this.git7 = darken(this.git7, 25);
}
} }
calculate(overrides) { calculate(overrides) {
if (typeof overrides !== 'object') { if (typeof overrides !== 'object') {