mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-28 07:03:17 +08:00
Theming changes for base theme
This commit is contained in:
Knut Sveidqvist
parent
7e041dd921
commit
b1fab6ffcd
@ -8,11 +8,11 @@
|
||||
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
background: rgb(221, 208, 208);
|
||||
/* background: rgb(221, 208, 208); */
|
||||
/*background:#333;*/
|
||||
font-family: 'Arial';
|
||||
}
|
||||
h1 { color: white;}
|
||||
/* h1 { color: white;} */
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
@ -102,7 +102,7 @@
|
||||
// console.error('Mermaid error: ', err);
|
||||
};
|
||||
mermaid.initialize({
|
||||
theme: 'default',
|
||||
theme: 'base',
|
||||
// arrowMarkerAbsolute: true,
|
||||
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
|
||||
logLevel: 1,
|
||||
|
||||
@ -7,9 +7,6 @@ let curBranch = 'master';
|
||||
let direction = 'LR';
|
||||
let seq = 0;
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
function getId() {
|
||||
return random({ length: 7 });
|
||||
}
|
||||
|
||||
@ -10,6 +10,8 @@ import { getConfig } from '../../config';
|
||||
let allCommitsDict = {};
|
||||
let branchNum;
|
||||
|
||||
const commitType = db.commitType;
|
||||
|
||||
let branchPos = {};
|
||||
let commitPos = {};
|
||||
let maxPos = 0;
|
||||
@ -111,13 +113,40 @@ const drawCommits = (svg, commits, modifyGraph) => {
|
||||
// log.debug('drawCommits (commit branchPos)', commit, branchPos);
|
||||
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.
|
||||
if (modifyGraph) {
|
||||
const line = gBullets.append('circle');
|
||||
line.attr('cx', pos + 10);
|
||||
line.attr('cy', y);
|
||||
line.attr('r', 10);
|
||||
line.attr('class', 'commit commit-'+commit.type + ' ' + commit.id + ' commit' + branchPos[commit.branch].index);
|
||||
let typeClass;
|
||||
switch(commit.type) {
|
||||
case commitType.NORMAL:
|
||||
typeClass = 'commit-normal';
|
||||
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};
|
||||
|
||||
|
||||
@ -14,41 +14,47 @@ const getStyles = (options) =>
|
||||
stroke-dasharray: 2;
|
||||
}
|
||||
.commit-labels { font-size: 10px; }
|
||||
.commit0 { stroke: ${options.fillType0}; fill: ${options.fillType0}; }
|
||||
.commit1 { stroke: ${options.fillType1}; fill: ${options.fillType1}; }
|
||||
.commit2 { stroke: ${options.fillType2}; fill: ${options.fillType2}; }
|
||||
.commit3 { stroke: ${options.fillType3}; fill: ${options.fillType3}; }
|
||||
.commit4 { stroke: ${options.fillType4}; fill: ${options.fillType4}; }
|
||||
.commit5 { stroke: ${options.fillType5}; fill: ${options.fillType5}; }
|
||||
.commit6 { stroke: ${options.fillType6}; fill: ${options.fillType6}; }
|
||||
.commit7 { stroke: ${options.fillType7}; fill: ${options.fillType7}; }
|
||||
// .branch0 { stroke: ${options.fillType0}; }
|
||||
// .branch1 { stroke: ${options.fillType1}; }
|
||||
// .branch2 { stroke: ${options.fillType2}; }
|
||||
// .branch3 { stroke: ${options.fillType3}; }
|
||||
// .branch4 { stroke: ${options.fillType4}; }
|
||||
// .branch5 { stroke: ${options.fillType5}; }
|
||||
// .branch6 { stroke: ${options.fillType6}; }
|
||||
// .branch7 { stroke: ${options.fillType7}; }
|
||||
.label0 { fill: ${options.fillType0}; }
|
||||
.label1 { fill: ${options.fillType1}; }
|
||||
.label2 { fill: ${options.fillType2}; }
|
||||
.label3 { fill: ${options.fillType3}; }
|
||||
.label4 { fill: ${options.fillType4}; }
|
||||
.label5 { fill: ${options.fillType5}; }
|
||||
.label6 { fill: ${options.fillType6}; }
|
||||
.label7 { fill: ${options.fillType7}; }
|
||||
.commit0 { stroke: ${options.git0}; fill: ${options.git0}; }
|
||||
.commit1 { stroke: ${options.git1}; fill: ${options.git1}; }
|
||||
.commit2 { stroke: ${options.git2}; fill: ${options.git2}; }
|
||||
.commit3 { stroke: ${options.git3}; fill: ${options.git3}; }
|
||||
.commit4 { stroke: ${options.git4}; fill: ${options.git4}; }
|
||||
.commit5 { stroke: ${options.git5}; fill: ${options.git5}; }
|
||||
.commit6 { stroke: ${options.git6}; fill: ${options.git6}; }
|
||||
.commit7 { stroke: ${options.git7}; fill: ${options.git7}; }
|
||||
|
||||
.commit-merge {
|
||||
stroke: ${options.primaryColor};
|
||||
fill: ${options.primaryColor};
|
||||
}
|
||||
|
||||
// .branch0 { stroke: ${options.git0}; }
|
||||
// .branch1 { stroke: ${options.git1}; }
|
||||
// .branch2 { stroke: ${options.git2}; }
|
||||
// .branch3 { stroke: ${options.git3}; }
|
||||
// .branch4 { stroke: ${options.git4}; }
|
||||
// .branch5 { stroke: ${options.git5}; }
|
||||
// .branch6 { stroke: ${options.git6}; }
|
||||
// .branch7 { stroke: ${options.git7}; }
|
||||
.label0 { fill: ${options.git0}; }
|
||||
.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-width: 8; stroke-linecap: round; fill: none}
|
||||
.arrow0 { stroke: ${options.fillType0}; }
|
||||
.arrow1 { stroke: ${options.fillType1}; }
|
||||
.arrow2 { stroke: ${options.fillType2}; }
|
||||
.arrow3 { stroke: ${options.fillType3}; }
|
||||
.arrow4 { stroke: ${options.fillType4}; }
|
||||
.arrow5 { stroke: ${options.fillType5}; }
|
||||
.arrow6 { stroke: ${options.fillType6}; }
|
||||
.arrow7 { stroke: ${options.fillType7}; }
|
||||
.arrow0 { stroke: ${options.git0}; }
|
||||
.arrow1 { stroke: ${options.git1}; }
|
||||
.arrow2 { stroke: ${options.git2}; }
|
||||
.arrow3 { stroke: ${options.git3}; }
|
||||
.arrow4 { stroke: ${options.git4}; }
|
||||
.arrow5 { stroke: ${options.git5}; }
|
||||
.arrow6 { stroke: ${options.git6}; }
|
||||
.arrow7 { stroke: ${options.git7}; }
|
||||
#arrowhead { fill: #990099;}
|
||||
.branchLabel { }
|
||||
}
|
||||
|
||||
@ -177,6 +177,35 @@ class Theme {
|
||||
this.relationLabelBackground ||
|
||||
(this.darkMode ? darken(this.secondaryColor, 30) : this.secondaryColor);
|
||||
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) {
|
||||
if (typeof overrides !== 'object') {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user