marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-24 01:39:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'develop' into 1542_take_two

Browse Source
This commit is contained in:
Ashish Jain
2020-08-13 18:27:37 +02:00
parent 61993a032a 9223173ef2
commit 28bc87b873
58 changed files with 2489 additions and 1466 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/config.js
View File

@@ -20,22 +20,18 @@ export const updateCurrentConfig = (siteCfg, _directives) => {
const d = _directives[i];
sanitize(d);
cfg = assignWithDepth(cfg, d);
if (d.themeVariables) {
themeVariables = d.themeVariables;
if (d.theme) {
cfg.themeVariables = theme[cfg.theme].getThemeVariables(d.themeVariables);
}
}
if (cfg.theme && theme[cfg.theme]) {
// console.warn('cfg beeing updated main bkg', themeVariables, cfg.theme);
const variables = theme[cfg.theme].getThemeVariables(themeVariables);
// console.warn('cfg beeing updated 2 main bkg', variables.mainBkg);
let tVars = assignWithDepth({}, cfg.themeVariables);
tVars = assignWithDepth(tVars, themeVariables);
const variables = theme[cfg.theme].getThemeVariables(tVars);
cfg.themeVariables = variables;
}
// else {
// console.warn('cfg not beeing updated main bkg', themeVariables, cfg.theme);
// }
currentConfig = cfg;
// console.warn('cfg updated main bkg', cfg.sequence);
return cfg;
};
/**
@@ -53,23 +49,20 @@ export const updateCurrentConfig = (siteCfg, _directives) => {
* @returns {*} - the siteConfig
*/
export const setSiteConfig = conf => {
// siteConfig = { ...defaultConfig, ...conf };
console.warn('Setting site config');
siteConfig = assignWithDepth({}, defaultConfig);
siteConfig = assignWithDepth(siteConfig, conf);
if (conf.theme) {
siteConfig.themeVariables = theme[conf.theme].getThemeVariables(conf.themeVariables);
}
currentConfig = updateCurrentConfig(siteConfig, directives);
return siteConfig;
};
export const updateSiteConfig = conf => {
// Object.keys(conf).forEach(key => {
// const manipulator = manipulators[key];
// conf[key] = manipulator ? manipulator(conf[key]) : conf[key];
// });
siteConfig = assignWithDepth(siteConfig, conf);
console.log('updateSiteConfig', siteConfig);
updateCurrentConfig(siteConfig, directives);
// assignWithDesetpth(currentConfig, conf, { clobber: true });
// // Set theme variables if user has set the theme option
// assignWithDepth(siteConfig, conf);
return siteConfig;
};
@@ -161,27 +154,10 @@ export const addDirective = directive => {
*
**Notes :
(default: current siteConfig ) (optional, default `getSiteConfig()`)
* @param conf - the base currentConfig to reset to (default: current siteConfig )
* @param conf the base currentConfig to reset to (default: current siteConfig ) (optional, default `getSiteConfig()`)
*/
export const reset = () => {
// Object.keys(siteConfig).forEach(key => delete siteConfig[key]);
// Object.keys(currentConfig).forEach(key => delete currentConfig[key]);
// assignWithDepth(siteConfig, conf, { clobber: true });
// assignWithDepth(currentConfig, conf, { clobber: true });
// Replace current config with siteConfig
directives = [];
// console.warn(siteConfig.sequence);
updateCurrentConfig(siteConfig, directives);
};
// const configApi = Object.freeze({
// sanitize,
// setSiteConfig,
// getSiteConfig,
// setConfig,
// getConfig,
// reset,
// defaultConfig
// });
// export default configApi;

2
src/dagre-wrapper/intersect/intersect-node.js
View File

@@ -1,6 +1,6 @@
module.exports = intersectNode;
function intersectNode(node, point) {
console.info('Intersect Node');
// console.info('Intersect Node');
return node.intersect(point);
}

2
src/dagre-wrapper/intersect/intersect-polygon.js
View File

@@ -44,7 +44,7 @@ function intersectPolygon(node, polyPoints, point) {
}
if (!intersections.length) {
console.log('NO INTERSECTION FOUND, RETURN NODE CENTER', node);
// console.log('NO INTERSECTION FOUND, RETURN NODE CENTER', node);
return node;
}

2
src/diagrams/class/classDb.js
View File

@@ -26,6 +26,7 @@ const splitClassNameAndType = function(id) {
if (id.indexOf('~') > 0) {
let split = id.split('~');
className = split[0];
genericType = split[1];
}
@@ -51,6 +52,7 @@ export const addClass = function(id) {
annotations: [],
domId: MERMAID_DOM_ID_PREFIX + classId.className + '-' + classCounter
};
classCounter++;
};

60
src/diagrams/class/classDiagram-styles.spec.js Normal file
View File

@@ -0,0 +1,60 @@
/* eslint-env jasmine */
import { parser } from './parser/classDiagram';
import classDb from './classDb';
describe('class diagram, ', function() {
describe('when parsing data from a classDiagram it', function() {
beforeEach(function() {
parser.yy = classDb;
parser.yy.clear();
});
it('should be possible to apply a css class to a class directly', function() {
const str = 'classDiagram\n' + 'class Class01:::exClass';
parser.parse(str);
expect(parser.yy.getClass('Class01').cssClasses[0]).toBe('exClass');
});
it('should be possible to apply a css class to a class directly with struct', function () {
const str =
'classDiagram\n' +
'class Class1:::exClass {\n' +
'int : test\n' +
'string : foo\n' +
'test()\n' +
'foo()\n' +
'}';
parser.parse(str);
const testClass = parser.yy.getClass('Class1');
expect(testClass.cssClasses[0]).toBe('exClass');
});
it('should be possible to apply a css class to a class with relations', function() {
const str = 'classDiagram\n' + 'Class01 <|-- Class02\ncssClass "Class01" exClass';
parser.parse(str);
expect(parser.yy.getClass('Class01').cssClasses[0]).toBe('exClass');
});
it('should be possible to apply a cssClass to a class', function() {
const str = 'classDiagram\n' + 'class Class01\n cssClass "Class01" exClass';
parser.parse(str);
expect(parser.yy.getClass('Class01').cssClasses[0]).toBe('exClass');
});
it('should be possible to apply a cssClass to a comma separated list of classes', function() {
const str = 'classDiagram\n' + 'class Class01\n class Class02\n cssClass "Class01,Class02" exClass';
parser.parse(str);
expect(parser.yy.getClass('Class01').cssClasses[0]).toBe('exClass');
expect(parser.yy.getClass('Class02').cssClasses[0]).toBe('exClass');
});
});
});

29
src/diagrams/class/parser/classDiagram.jison
View File

@@ -14,7 +14,7 @@
<type_directive>":" { this.popState(); this.begin('arg_directive'); return ':'; }
<type_directive,arg_directive>\}\%\% { this.popState(); this.popState(); return 'close_directive'; }
<arg_directive>((?:(?!\}\%\%).|\n)*) return 'arg_directive';
\%\%(?!\{)*[^\n]*(\r?\n)+ /* skip comments */
\%\%(?!\{)*[^\n]*(\r?\n?)+ /* skip comments */
\%\%[^\n]*(\r?\n)* /* skip comments */
(\r?\n)+ return 'NEWLINE';
\s+ /* skip whitespace */
@@ -27,10 +27,8 @@
<struct>[\n] /* nothing */
<struct>[^{}\n]* { /*console.log('lex-member: ' + yytext);*/ return "MEMBER";}
"class" return 'CLASS';
//"click" return 'CLICK';
"cssClass" return 'CSSCLASS';
"callback" return 'CALLBACK';
"link" return 'LINK';
"<<" return 'ANNOTATION_START';
@@ -51,7 +49,8 @@
\s*o return 'AGGREGATION';
\-\- return 'LINE';
\.\. return 'DOTTED_LINE';
":"[^\n;]+ return 'LABEL';
":"{1}[^:\n;]+ return 'LABEL';
":"{3} return 'STYLE_SEPARATOR';
\- return 'MINUS';
"." return 'DOT';
\+ return 'PLUS';
@@ -177,8 +176,8 @@ statements
;
className
: alphaNumToken className { $$=$1+$2; }
| alphaNumToken { $$=$1; }
: alphaNumToken { $$=$1; }
| alphaNumToken className { $$=$1+$2; }
| alphaNumToken GENERICTYPE className { $$=$1+'~'+$2+$3; }
| alphaNumToken GENERICTYPE { $$=$1+'~'+$2; }
;
@@ -190,12 +189,15 @@ statement
| methodStatement
| annotationStatement
| clickStatement
| cssClassStatement
| directive
;
classStatement
: CLASS className {yy.addClass($2);}
| CLASS className STYLE_SEPARATOR alphaNumToken {yy.addClass($2);yy.setCssClass($2, $4);}
| CLASS className STRUCT_START members STRUCT_STOP {/*console.log($2,JSON.stringify($4));*/yy.addClass($2);yy.addMembers($2,$4);}
| CLASS className STYLE_SEPARATOR alphaNumToken STRUCT_START members STRUCT_STOP {yy.addClass($2);yy.setCssClass($2, $4);yy.addMembers($2,$6);}
;
annotationStatement
@@ -241,10 +243,14 @@ lineType
;
clickStatement
: CALLBACK className STR {$$ = $1;yy.setClickEvent($2, $3, undefined);}
| CALLBACK className STR STR {$$ = $1;yy.setClickEvent($2, $3, $4);}
| LINK className STR {$$ = $1;yy.setLink($2, $3, undefined);}
| LINK className STR STR {$$ = $1;yy.setLink($2, $3, $4);}
: CALLBACK className STR {$$ = $1;yy.setClickEvent($2, $3, undefined);}
| CALLBACK className STR STR {$$ = $1;yy.setClickEvent($2, $3, $4);}
| LINK className STR {$$ = $1;yy.setLink($2, $3, undefined);}
| LINK className STR STR {$$ = $1;yy.setLink($2, $3, $4);}
;
cssClassStatement
: CSSCLASS STR alphaNumToken {yy.setCssClass($2, $3);}
;
commentToken : textToken | graphCodeTokens ;
@@ -254,4 +260,5 @@ textToken : textNoTagsToken | TAGSTART | TAGEND | '==' | '--' | PCT | DEFA
textNoTagsToken: alphaNumToken | SPACE | MINUS | keywords ;
alphaNumToken : UNICODE_TEXT | NUM | ALPHA;
%%

8
src/diagrams/class/styles.js
View File

@@ -31,7 +31,7 @@ g.clickable {
}
g.classGroup rect {
fill: ${options.nodeBkg};
fill: ${options.mainBkg};
stroke: ${options.nodeBorder};
}
@@ -43,7 +43,7 @@ g.classGroup line {
.classLabel .box {
stroke: none;
stroke-width: 0;
fill: ${options.nodeBkg};
fill: ${options.mainBkg};
opacity: 0.5;
}
@@ -99,13 +99,13 @@ g.classGroup line {
}
#aggregationStart, .aggregation {
fill: ${options.nodeBkg} !important;
fill: ${options.mainBkg} !important;
stroke: ${options.lineColor} !important;
stroke-width: 1;
}
#aggregationEnd, .aggregation {
fill: ${options.nodeBkg} !important;
fill: ${options.mainBkg} !important;
stroke: ${options.lineColor} !important;
stroke-width: 1;
}

16
src/diagrams/class/svgDraw.js
View File

@@ -147,11 +147,6 @@ export const drawEdge = function(elem, path, relation, conf) {
export const drawClass = function(elem, classDef, conf) {
logger.info('Rendering class ' + classDef);
let cssClassStr = 'classGroup ';
if (classDef.cssClasses.length > 0) {
cssClassStr = cssClassStr + classDef.cssClasses.join(' ');
}
const id = classDef.id;
const classInfo = {
id: id,
@@ -164,7 +159,7 @@ export const drawClass = function(elem, classDef, conf) {
const g = elem
.append('g')
.attr('id', lookUpDomId(id))
.attr('class', cssClassStr);
.attr('class', 'classGroup');
// add title
let title;
@@ -249,12 +244,19 @@ export const drawClass = function(elem, classDef, conf) {
});
const classBox = g.node().getBBox();
var cssClassStr = ' ';
if (classDef.cssClasses.length > 0) {
cssClassStr = cssClassStr + classDef.cssClasses.join(' ');
}
const rect = g
.insert('rect', ':first-child')
.attr('x', 0)
.attr('y', 0)
.attr('width', classBox.width + 2 * conf.padding)
.attr('height', classBox.height + conf.padding + 0.5 * conf.dividerMargin);
.attr('height', classBox.height + conf.padding + 0.5 * conf.dividerMargin)
.attr('class', cssClassStr);
const rectWidth = rect.node().getBBox().width;

2
src/diagrams/er/styles.js
View File

@@ -7,7 +7,7 @@ const getStyles = options =>
.relationshipLabelBox {
fill: ${options.tertiaryColor};
opacity: 0.3;
opacity: 0.7;
background-color: ${options.tertiaryColor};
rect {
opacity: 0.5;

3
src/diagrams/flowchart/flowDb.js
View File

@@ -252,12 +252,13 @@ const setClickFun = function(_id, functionName) {
* @param linkStr URL to create a link for
* @param tooltip Tooltip for the clickable element
*/
export const setLink = function(ids, linkStr, tooltip) {
export const setLink = function(ids, linkStr, tooltip, target) {
ids.split(',').forEach(function(_id) {
let id = _id;
if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
if (typeof vertices[id] !== 'undefined') {
vertices[id].link = utils.formatUrl(linkStr, config);
vertices[id].linkTarget = target;
}
});
setTooltip(ids, tooltip);

5
src/diagrams/flowchart/flowRenderer-v2.js
View File

@@ -468,7 +468,7 @@ export const draw = function(text, id) {
rect.setAttribute('ry', 0);
rect.setAttribute('width', dim.width);
rect.setAttribute('height', dim.height);
rect.setAttribute('style', 'fill:#e8e8e8;');
// rect.setAttribute('style', 'fill:#e8e8e8;');
label.insertBefore(rect, label.firstChild);
}
@@ -486,6 +486,9 @@ export const draw = function(text, id) {
link.setAttributeNS('http://www.w3.org/2000/svg', 'class', vertex.classes.join(' '));
link.setAttributeNS('http://www.w3.org/2000/svg', 'href', vertex.link);
link.setAttributeNS('http://www.w3.org/2000/svg', 'rel', 'noopener');
if (vertex.linkTarget) {
link.setAttributeNS('http://www.w3.org/2000/svg', 'target', vertex.linkTarget);
}
const linkNode = node.insert(function() {
return link;

5
src/diagrams/flowchart/flowRenderer.js
View File

@@ -451,7 +451,7 @@ export const draw = function(text, id) {
rect.setAttribute('ry', 0);
rect.setAttribute('width', dim.width);
rect.setAttribute('height', dim.height);
rect.setAttribute('style', 'fill:#e8e8e8;');
// rect.setAttribute('style', 'fill:#e8e8e8;');
label.insertBefore(rect, label.firstChild);
}
@@ -469,6 +469,9 @@ export const draw = function(text, id) {
link.setAttributeNS('http://www.w3.org/2000/svg', 'class', vertex.classes.join(' '));
link.setAttributeNS('http://www.w3.org/2000/svg', 'href', vertex.link);
link.setAttributeNS('http://www.w3.org/2000/svg', 'rel', 'noopener');
if (vertex.linkTarget) {
link.setAttributeNS('http://www.w3.org/2000/svg', 'target', vertex.linkTarget);
}
const linkNode = node.insert(function() {
return link;

24
src/diagrams/flowchart/parser/flow-interactions.spec.js
View File

@@ -39,7 +39,7 @@ describe('[Interactions] when parsing', () => {
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
expect(flowDb.setLink).toHaveBeenCalledWith('A', 'click.html', undefined);
expect(flowDb.setLink).toHaveBeenCalledWith('A', 'click.html', undefined, undefined);
});
it('should handle interaction - click to a link with tooltip', function() {
@@ -49,6 +49,26 @@ describe('[Interactions] when parsing', () => {
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
expect(flowDb.setLink).toHaveBeenCalledWith('A', 'click.html', 'tooltip');
expect(flowDb.setLink).toHaveBeenCalledWith('A', 'click.html', 'tooltip', undefined);
});
it('should handle interaction - click to a link with target', function() {
spyOn(flowDb, 'setLink');
const res = flow.parser.parse('graph TD\nA-->B\nclick A "click.html" _blank');
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
expect(flowDb.setLink).toHaveBeenCalledWith('A', 'click.html', undefined, '_blank');
});
it('should handle interaction - click to a link with tooltip and target', function() {
spyOn(flowDb, 'setLink');
const res = flow.parser.parse('graph TD\nA-->B\nclick A "click.html" "tooltip" _blank');
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
expect(flowDb.setLink).toHaveBeenCalledWith('A', 'click.html', 'tooltip', '_blank');
});
});

16
src/diagrams/flowchart/parser/flow.jison
View File

@@ -36,6 +36,12 @@
"flowchart" {if(yy.lex.firstGraph()){this.begin("dir");} return 'GRAPH';}
"subgraph" return 'subgraph';
"end"\b\s* return 'end';
"_self" return 'LINK_TARGET';
"_blank" return 'LINK_TARGET';
"_parent" return 'LINK_TARGET';
"_top" return 'LINK_TARGET';
<dir>(\r?\n)*\s*\n { this.popState(); return 'NODIR'; }
<dir>\s*"LR" { this.popState(); return 'DIR'; }
<dir>\s*"RL" { this.popState(); return 'DIR'; }
@@ -439,10 +445,12 @@ classStatement:CLASS SPACE alphaNum SPACE alphaNum
;
clickStatement
: CLICK SPACE alphaNum SPACE alphaNum {$$ = $1;yy.setClickEvent($3, $5, undefined);}
| CLICK SPACE alphaNum SPACE alphaNum SPACE STR {$$ = $1;yy.setClickEvent($3, $5, $7) ;}
| CLICK SPACE alphaNum SPACE STR {$$ = $1;yy.setLink($3, $5, undefined);}
| CLICK SPACE alphaNum SPACE STR SPACE STR {$$ = $1;yy.setLink($3, $5, $7 );}
: CLICK SPACE alphaNum SPACE alphaNum {$$ = $1;yy.setClickEvent($3, $5, undefined);}
| CLICK SPACE alphaNum SPACE alphaNum SPACE STR {$$ = $1;yy.setClickEvent($3, $5, $7) ;}
| CLICK SPACE alphaNum SPACE STR {$$ = $1;yy.setLink($3, $5, undefined, undefined);}
| CLICK SPACE alphaNum SPACE STR SPACE STR {$$ = $1;yy.setLink($3, $5, $7, undefined );}
| CLICK SPACE alphaNum SPACE STR SPACE LINK_TARGET {$$ = $1;yy.setLink($3, $5, undefined, $7 );}
| CLICK SPACE alphaNum SPACE STR SPACE STR SPACE LINK_TARGET {$$ = $1;yy.setLink($3, $5, $7, $9 );}
;
styleStatement:STYLE SPACE alphaNum SPACE stylesOpt

8
src/diagrams/flowchart/styles.js
View File

@@ -1,11 +1,11 @@
const getStyles = options =>
`.label {
font-family: ${options.fontFamily};
color: ${options.textColor};
color: ${options.nodeTextColor || options.textColor};
}
.label text {
fill: ${options.textColor};
fill: ${options.nodeTextColor || options.textColor};
}
.node rect,
@@ -43,6 +43,8 @@ const getStyles = options =>
background-color: ${options.edgeLabelBackground};
rect {
opacity: 0.5;
background-color: ${options.edgeLabelBackground};
fill: ${options.edgeLabelBackground};
}
text-align: center;
}
@@ -64,7 +66,7 @@ const getStyles = options =>
padding: 2px;
font-family: ${options.fontFamily};
font-size: 12px;
background: ${options.secondBkg};
background: ${options.tertiaryColor};
border: 1px solid ${options.border2};
border-radius: 2px;
pointer-events: none;

27
src/diagrams/state/shapes.js
View File

@@ -14,8 +14,9 @@ import { logger } from '../../logger';
export const drawStartState = g =>
g
.append('circle')
.style('stroke', 'black')
.style('fill', 'black')
// .style('stroke', 'black')
// .style('fill', 'black')
.attr('class', 'start-state')
.attr('r', getConfig().state.sizeUnit)
.attr('cx', getConfig().state.padding + getConfig().state.sizeUnit)
.attr('cy', getConfig().state.padding + getConfig().state.sizeUnit);
@@ -241,8 +242,9 @@ export const addTitleAndBox = (g, stateDef, altBkg) => {
const drawEndState = g => {
g.append('circle')
.style('stroke', 'black')
.style('fill', 'white')
// .style('stroke', 'black')
// .style('fill', 'white')
.attr('class', 'end-state-outer')
.attr('r', getConfig().state.sizeUnit + getConfig().state.miniPadding)
.attr(
'cx',
@@ -253,13 +255,16 @@ const drawEndState = g => {
getConfig().state.padding + getConfig().state.sizeUnit + getConfig().state.miniPadding
);
return g
.append('circle')
.style('stroke', 'black')
.style('fill', 'black')
.attr('r', getConfig().state.sizeUnit)
.attr('cx', getConfig().state.padding + getConfig().state.sizeUnit + 2)
.attr('cy', getConfig().state.padding + getConfig().state.sizeUnit + 2);
return (
g
.append('circle')
// .style('stroke', 'black')
// .style('fill', 'black')
.attr('class', 'end-state-inner')
.attr('r', getConfig().state.sizeUnit)
.attr('cx', getConfig().state.padding + getConfig().state.sizeUnit + 2)
.attr('cy', getConfig().state.padding + getConfig().state.sizeUnit + 2)
);
};
const drawForkJoinState = (g, stateDef) => {
let width = getConfig().state.forkWidth;

18
src/diagrams/state/styles.js
View File

@@ -18,7 +18,7 @@ g.stateGroup .state-title {
}
g.stateGroup rect {
fill: ${options.nodeBkg};
fill: ${options.mainBkg};
stroke: ${options.nodeBorder};
}
@@ -57,17 +57,20 @@ g.stateGroup line {
.stateLabel .box {
stroke: none;
stroke-width: 0;
fill: ${options.nodeBkg};
fill: ${options.mainBkg};
opacity: 0.5;
}
.edgeLabel .label rect {
fill: ${options.tertiaryColor};
opacity: 0.2;
opacity: 0.5;
}
.edgeLabel .label text {
fill: ${options.tertiaryTextColor};
}
.label div .edgeLabel {
color: ${options.tertiaryTextColor};
}
.stateLabel text {
fill: ${options.labelColor};
@@ -78,7 +81,7 @@ g.stateGroup line {
}
.node circle.state-start {
fill: ${options.primaryBorderColor};
fill: ${options.lineColor};
stroke: black;
}
.node circle.state-end {
@@ -86,6 +89,11 @@ g.stateGroup line {
stroke: ${options.background};
stroke-width: 1.5
}
.end-state-inner {
fill: ${options.background};
// stroke: ${options.background};
stroke-width: 1.5
}
.node rect {
fill: ${options.mainBkg};
@@ -97,7 +105,7 @@ g.stateGroup line {
}
.statediagram-cluster rect {
fill: ${options.nodeBkg};
fill: ${options.mainBkg};
stroke: ${options.nodeBorder};
stroke-width: 1px;
}

5
src/diagrams/user-journey/styles.js
View File

@@ -68,9 +68,6 @@ const getStyles = options =>
}
.cluster rect {
fill: ${options.secondBkg};
stroke: ${options.clusterBorder};
stroke-width: 1px;
}
.cluster text {
@@ -85,7 +82,7 @@ const getStyles = options =>
font-family: 'trebuchet ms', verdana, arial;
font-family: var(--mermaid-font-family);
font-size: 12px;
background: ${options.secondBkg};
background: ${options.tertiaryColor};
border: 1px solid ${options.border2};
border-radius: 2px;
pointer-events: none;

4
src/mermaid.js
View File

@@ -31,7 +31,7 @@ import utils from './utils';
*/
const init = function() {
const conf = mermaidAPI.getConfig();
console.log('Starting rendering diagrams (init) - mermaid.init', conf);
// console.log('Starting rendering diagrams (init) - mermaid.init', conf);
let nodes;
if (arguments.length >= 2) {
/*! sequence config was passed as #1 */
@@ -129,7 +129,7 @@ const init = function() {
};
const initialize = function(config) {
mermaidAPI.reset();
// mermaidAPI.reset();
if (typeof config.mermaid !== 'undefined') {
if (typeof config.mermaid.startOnLoad !== 'undefined') {
mermaid.startOnLoad = config.mermaid.startOnLoad;

6
src/mermaidAPI.js
View File

@@ -220,7 +220,7 @@ const render = function(id, _txt, cb, container) {
// console.warn('Render fetching config');
const cnf = configApi.getConfig();
// console.warn('Render with config after adding new directives', cnf.themeVariables.mainBkg);
console.warn('Render with config after adding new directives', cnf.themeVariables.primaryColor);
// Check the maximum allowed text size
if (_txt.length > cnf.maxTextSize) {
txt = 'graph TB;a[Maximum text size in diagram exceeded];style a fill:#faa';
@@ -552,7 +552,7 @@ function reinitialize() {
}
function initialize(options) {
logger.debug(`mermaidAPI.initialize: v${pkg.version} ${options}`);
console.warn(`mermaidAPI.initialize: v${pkg.version} `, options);
// Set default options
if (options && options.theme && theme[options.theme]) {
@@ -581,7 +581,7 @@ const mermaidAPI = Object.freeze({
getSiteConfig: configApi.getSiteConfig,
updateSiteConfig: configApi.updateSiteConfig,
reset: () => {
console.warn('reset');
// console.warn('reset');
configApi.reset();
// const siteConfig = configApi.getSiteConfig();
// updateRendererConfigs(siteConfig);

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

@@ -1,133 +1,131 @@
import { darken, lighten, adjust, invert } from 'khroma';
const mkBorder = (col, darkMode) =>
darkMode ? adjust(col, { s: -40, l: 10 }) : adjust(col, { s: -40, l: -10 });
import { mkBorder } from './theme-helpers';
class Theme {
constructor() {
/** # Base variables */
/** * background - used to know what the background color is of the diagram. This is used for deducing colors for istance line color. Defaulr value is #f4f4f4. */
this.background = '#f4f4f4';
// this.background = '#0c0c0c';
/** * darkMode -In darkMode the color generation deduces other colors from the primary colors */
this.darkMode = false;
// this.background = '#0c0c0c';
// this.darkMode = true;
this.primaryColor = '#fff4dd';
// this.background = '#0c0c0c';
// this.primaryColor = '#1f1f00';
this.noteBkgColor = '#fff5ad';
this.noteTextColor = '#333';
// dark
// this.primaryColor = '#034694';
// this.primaryColor = '#f2ee7e';
// this.primaryColor = '#9f33be';
this.primaryColor = '#f0fff0';
// this.primaryColor = '#f0fff0';
// this.primaryColor = '#fa255e';
// this.primaryColor = '#ECECFF';
// this.secondaryColor = '#c39ea0';
// this.tertiaryColor = '#f8e5e5';
this.secondaryColor = '#dfdfde';
this.tertiaryColor = '#CCCCFF';
// this.secondaryColor = '#dfdfde';
// this.tertiaryColor = '#CCCCFF';
this.border1 = '#9370DB';
this.arrowheadColor = '#333333';
this.fontFamily = '"trebuchet ms", verdana, arial';
this.fontSize = '16px';
this.textColor = '#333';
this.updateColors();
this.relationColor = '#000';
// this.updateColors();
}
updateColors() {
this.secondBkg = this.tertiaryColor;
// The || is to make sure that if the variable has been defiend by a user override that value is to be used
/* Main */
this.secondaryColor = adjust(this.primaryColor, { h: 120 });
this.tertiaryColor = adjust(this.primaryColor, { h: -160 });
console.warn('primary color', this.primaryColor, 'tertiary - color', this.tertiaryColor);
this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);
this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);
this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);
this.noteBorderColor = mkBorder(this.noteBkgColor, this.darkMode);
this.primaryTextColor = this.primaryTextColor || (this.darkMode ? '#ddd' : '#333'); // invert(this.primaryColor);
this.secondaryColor = this.secondaryColor || adjust(this.primaryColor, { h: -120 });
this.tertiaryColor = this.tertiaryColor || adjust(this.primaryColor, { h: 180, l: 5 });
this.primaryTextColor = invert(this.primaryColor);
this.secondaryTextColor = invert(this.secondaryColor);
this.tertiaryTextColor = invert(this.tertiaryColor);
this.lineColor = invert(this.background);
this.textColor = invert(this.background);
this.primaryBorderColor = this.primaryBorderColor || mkBorder(this.primaryColor, this.darkMode);
this.secondaryBorderColor =
this.secondaryBorderColor || mkBorder(this.secondaryColor, this.darkMode);
this.tertiaryBorderColor =
this.tertiaryBorderColor || mkBorder(this.tertiaryColor, this.darkMode);
this.noteBorderColor = this.noteBorderColor || mkBorder(this.noteBkgColor, this.darkMode);
this.secondaryTextColor = this.secondaryTextColor || invert(this.secondaryColor);
this.tertiaryTextColor = this.tertiaryTextColor || invert(this.tertiaryColor);
this.lineColor = this.lineColor || invert(this.background);
this.textColor = this.textColor || this.primaryTextColor;
/* Flowchart variables */
this.nodeBkg = this.primaryColor;
this.mainBkg = this.primaryColor;
// console.warn('main bkg ', this.mainBkg);
this.nodeBorder = this.primaryBorderColor;
this.clusterBkg = this.tertiaryColor;
this.clusterBorder = this.tertiaryBorderColor;
this.defaultLinkColor = this.lineColor;
this.titleColor = this.tertiaryTextColor;
this.edgeLabelBackground = this.labelBackground;
this.nodeBkg = this.nodeBkg || this.primaryColor;
this.mainBkg = this.mainBkg || this.primaryColor;
this.nodeBorder = this.nodeBorder || this.primaryBorderColor;
this.clusterBkg = this.clusterBkg || this.tertiaryColor;
this.clusterBorder = this.clusterBorder || this.tertiaryBorderColor;
this.defaultLinkColor = this.defaultLinkColor || this.lineColor;
this.titleColor = this.titleColor || this.tertiaryTextColor;
this.edgeLabelBackground =
this.edgeLabelBackground || this.darkMode
? darken(this.secondaryColor, 30)
: this.secondaryColor;
this.nodeTextColor = this.nodeTextColor || this.primaryTextColor;
/* Sequence Diagram variables */
// this.actorBorder = lighten(this.border1, 0.5);
this.actorBorder = this.primaryBorderColor;
this.actorBkg = this.mainBkg;
this.actorTextColor = this.primaryTextColor;
this.actorLineColor = 'grey';
this.labelBoxBkgColor = this.actorBkg;
this.signalColor = this.textColor;
this.signalTextColor = this.textColor;
this.labelBoxBorderColor = this.actorBorder;
this.labelTextColor = this.actorTextColor;
this.loopTextColor = this.actorTextColor;
// this.noteTextColor = this.actorTextColor;
this.activationBorderColor = darken(this.secondaryColor, 10);
this.activationBkgColor = this.secondaryColor;
this.sequenceNumberColor = 'white';
this.actorBorder = this.actorBorder || this.primaryBorderColor;
this.actorBkg = this.actorBkg || this.mainBkg;
this.actorTextColor = this.actorTextColor || this.primaryTextColor;
this.actorLineColor = this.actorLineColor || 'grey';
this.labelBoxBkgColor = this.labelBoxBkgColor || this.actorBkg;
this.signalColor = this.signalColor || this.textColor;
this.signalTextColor = this.signalTextColor || this.textColor;
this.labelBoxBorderColor = this.labelBoxBorderColor || this.actorBorder;
this.labelTextColor = this.labelTextColor || this.actorTextColor;
this.loopTextColor = this.loopTextColor || this.actorTextColor;
this.activationBorderColor = this.activationBorderColor || darken(this.secondaryColor, 10);
this.activationBkgColor = this.activationBkgColor || this.secondaryColor;
this.sequenceNumberColor = this.sequenceNumberColor || invert(this.lineColor);
/* Gantt chart variables */
this.sectionBkgColor = this.tertiaryColor;
this.altSectionBkgColor = 'white';
this.sectionBkgColor = this.secondaryColor;
this.sectionBkgColor2 = this.tertiaryColor;
this.altSectionBkgColor = 'white';
this.sectionBkgColor2 = this.primaryColor;
this.taskBorderColor = this.primaryBorderColor;
this.taskBkgColor = this.primaryColor;
this.activeTaskBorderColor = this.primaryColor;
this.activeTaskBkgColor = lighten(this.primaryColor, 23);
this.gridColor = 'lightgrey';
this.doneTaskBkgColor = 'lightgrey';
this.doneTaskBorderColor = 'grey';
this.critBorderColor = '#ff8888';
this.critBkgColor = 'red';
this.todayLineColor = 'red';
this.taskTextColor = this.textColor;
this.taskTextOutsideColor = this.textColor;
this.taskTextLightColor = this.textColor;
this.taskTextColor = this.primaryTextColor;
this.taskTextDarkColor = this.textColor;
this.taskTextOutsideColor = 'calculated';
this.taskTextClickableColor = '#003163';
/* state colors */
this.labelColor = this.primaryTextColor;
this.altBackground = this.tertiaryColor;
this.errorBkgColor = '#552222';
this.errorTextColor = '#552222';
this.sectionBkgColor = this.sectionBkgColor || this.tertiaryColor;
this.altSectionBkgColor = this.altSectionBkgColor || 'white';
this.sectionBkgColor = this.sectionBkgColor || this.secondaryColor;
this.sectionBkgColor2 = this.sectionBkgColor2 || this.primaryColor;
this.taskBorderColor = this.taskBorderColor || this.primaryBorderColor;
this.taskBkgColor = this.taskBkgColor || this.primaryColor;
this.activeTaskBorderColor = this.activeTaskBorderColor || this.primaryColor;
this.activeTaskBkgColor = this.activeTaskBkgColor || lighten(this.primaryColor, 23);
this.gridColor = this.gridColor || 'lightgrey';
this.doneTaskBkgColor = this.doneTaskBkgColor || 'lightgrey';
this.doneTaskBorderColor = this.doneTaskBorderColor || 'grey';
this.critBorderColor = this.critBorderColor || '#ff8888';
this.critBkgColor = this.critBkgColor || 'red';
this.todayLineColor = this.todayLineColor || 'red';
this.taskTextColor = this.taskTextColor || this.textColor;
this.taskTextOutsideColor = this.taskTextOutsideColor || this.textColor;
this.taskTextLightColor = this.taskTextLightColor || this.textColor;
this.taskTextColor = this.taskTextColor || this.primaryTextColor;
this.taskTextDarkColor = this.taskTextDarkColor || this.textColor;
this.taskTextClickableColor = this.taskTextClickableColor || '#003163';
/* state colors */
this.labelColor = this.labelColor || this.primaryTextColor;
this.altBackground = this.altBackground || this.tertiaryColor;
this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
/* class */
this.classText = this.textColor;
this.classText = this.classText || this.textColor;
/* user-journey */
this.fillType0 = this.primaryColor;
this.fillType1 = this.secondaryColor;
this.fillType2 = adjust(this.primaryColor, { h: 64 });
this.fillType3 = adjust(this.secondaryColor, { h: 64 });
this.fillType4 = adjust(this.primaryColor, { h: -64 });
this.fillType5 = adjust(this.secondaryColor, { h: -64 });
this.fillType6 = adjust(this.primaryColor, { h: 128 });
this.fillType7 = adjust(this.secondaryColor, { h: 128 });
this.fillType0 = this.fillType0 || this.primaryColor;
this.fillType1 = this.fillType1 || this.secondaryColor;
this.fillType2 = this.fillType2 || adjust(this.primaryColor, { h: 64 });
this.fillType3 = this.fillType3 || adjust(this.secondaryColor, { h: 64 });
this.fillType4 = this.fillType4 || adjust(this.primaryColor, { h: -64 });
this.fillType5 = this.fillType5 || adjust(this.secondaryColor, { h: -64 });
this.fillType6 = this.fillType6 || adjust(this.primaryColor, { h: 128 });
this.fillType7 = this.fillType7 || adjust(this.secondaryColor, { h: 128 });
}
calculate(overrides) {
if (typeof overrides !== 'object') {

15
src/themes/theme-dark.js
View File

@@ -1,10 +1,21 @@
import { invert, lighten, darken, rgba, adjust } from 'khroma';
import { mkBorder } from './theme-helpers';
class Theme {
constructor() {
this.background = '#333';
this.primaryColor = '#1f2020';
this.secondaryColor = lighten(this.primaryColor, 16);
this.tertiaryColor = adjust(this.primaryColor, { h: -160 });
this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);
this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);
this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);
this.primaryTextColor = invert(this.primaryColor);
this.secondaryTextColor = invert(this.secondaryColor);
this.tertiaryTextColor = invert(this.tertiaryColor);
this.lineColor = invert(this.background);
this.textColor = invert(this.background);
this.mainBkg = '#1f2020';
this.secondBkg = 'calculated';
this.mainContrastColor = 'lightgrey';
@@ -127,7 +138,7 @@ class Theme {
this.fillType6 = adjust(this.primaryColor, { h: 128 });
this.fillType7 = adjust(this.secondaryColor, { h: 128 });
/* class */
this.classText = this.nodeBorder;
this.classText = this.primaryTextColor;
}
calculate(overrides) {
if (typeof overrides !== 'object') {

20
src/themes/theme-default.js
View File

@@ -1,10 +1,26 @@
import { lighten, rgba, adjust } from 'khroma';
import { invert, lighten, rgba, adjust } from 'khroma';
import { mkBorder } from './theme-helpers';
class Theme {
constructor() {
/* Base variables */
this.background = '#f4f4f4';
this.primaryColor = '#ECECFF';
this.secondaryColor = adjust(this.primaryColor, { h: 120 });
this.secondaryColor = '#ffffde';
this.tertiaryColor = adjust(this.primaryColor, { h: -160 });
this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);
this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);
this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);
// this.noteBorderColor = mkBorder(this.noteBkgColor, this.darkMode);
this.primaryTextColor = invert(this.primaryColor);
this.secondaryTextColor = invert(this.secondaryColor);
this.tertiaryTextColor = invert(this.tertiaryColor);
this.lineColor = invert(this.background);
this.textColor = invert(this.background);
this.background = 'white';
this.mainBkg = '#ECECFF';
this.secondBkg = '#ffffde';
@@ -124,7 +140,7 @@ class Theme {
/* state colors */
/* class */
this.classText = this.nodeBorder;
this.classText = this.primaryTextColor;
/* journey */
this.fillType0 = this.primaryColor;
this.fillType1 = this.secondaryColor;

17
src/themes/theme-forest.js
View File

@@ -1,7 +1,9 @@
import { darken, adjust } from 'khroma';
import { darken, lighten, adjust, invert } from 'khroma';
import { mkBorder } from './theme-helpers';
class Theme {
constructor() {
/* Base vales */
this.background = '#f4f4f4';
this.primaryColor = '#cde498';
this.secondaryColor = '#cdffb2';
this.background = 'white';
@@ -14,8 +16,17 @@ class Theme {
this.fontFamily = '"trebuchet ms", verdana, arial';
this.fontSize = '16px';
/* Flowchart variables */
this.tertiaryColor = lighten('#cde498', 10);
this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);
this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);
this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);
this.primaryTextColor = invert(this.primaryColor);
this.secondaryTextColor = invert(this.secondaryColor);
this.tertiaryTextColor = invert(this.primaryColor);
this.lineColor = invert(this.background);
this.textColor = invert(this.background);
/* Flowchart variables */
this.nodeBkg = 'calculated';
this.nodeBorder = 'calculated';
this.clusterBkg = 'calculated';
@@ -99,7 +110,7 @@ class Theme {
/* state colors */
/* class */
this.classText = this.nodeBorder;
this.classText = this.primaryTextColor;
/* journey */
this.fillType0 = this.primaryColor;
this.fillType1 = this.secondaryColor;

4
src/themes/theme-helpers.js Normal file
View File

@@ -0,0 +1,4 @@
import { adjust } from 'khroma';
export const mkBorder = (col, darkMode) =>
darkMode ? adjust(col, { s: -40, l: 10 }) : adjust(col, { s: -40, l: -10 });

23
src/themes/theme-neutral.js
View File

@@ -1,4 +1,5 @@
import { darken, lighten, adjust } from 'khroma';
import { invert, darken, lighten, adjust } from 'khroma';
import { mkBorder } from './theme-helpers';
// const Color = require ( 'khroma/dist/color' ).default
// Color.format.hex.stringify(Color.parse('hsl(210, 66.6666666667%, 95%)')); // => "#EAF2FB"
@@ -8,7 +9,23 @@ class Theme {
this.primaryColor = '#eee';
this.contrast = '#26a';
this.secondaryColor = lighten(this.contrast, 55);
this.background = 'white';
this.background = '#ffffff';
// this.secondaryColor = adjust(this.primaryColor, { h: 120 });
this.tertiaryColor = adjust(this.primaryColor, { h: -160 });
console.warn('primary color', this.primaryColor, 'tertiary - color', this.tertiaryColor);
this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);
this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);
this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);
// this.noteBorderColor = mkBorder(this.noteBkgColor, this.darkMode);
this.primaryTextColor = invert(this.primaryColor);
this.secondaryTextColor = invert(this.secondaryColor);
this.tertiaryTextColor = invert(this.tertiaryColor);
this.lineColor = invert(this.background);
this.textColor = invert(this.background);
this.altBackground = lighten(this.contrast, 55);
this.mainBkg = '#eee';
this.secondBkg = 'calculated';
this.lineColor = '#666';
@@ -131,7 +148,7 @@ class Theme {
/* state colors */
/* class */
this.classText = this.nodeBorder;
this.classText = this.primaryTextColor;
/* journey */
this.fillType0 = this.primaryColor;
this.fillType1 = this.secondaryColor;