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

Pushing fix for broken themeVariable functionality

Browse Source
This commit is contained in:
ashishj
2023-01-19 20:30:11 +01:00
parent ca22e85e55
commit be818ad57f
9 changed files with 47 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
cypress/platform/ashish2.html
View File

@@ -84,8 +84,8 @@
: The first metal objects are made in Britain.Some other nice things happen. it is a good time to be alive.
</pre>
<pre id="diagram" class="mermaid">
%%{init: { 'logLevel': 'debug', 'theme': 'default', 'timeline': {'disableMulticolor':false} } }%%
<pre id="diagram" class="mermaid2">
%%{'init': { 'logLevel': 'debug', 'theme': 'default', 'timeline': {'disableMulticolor':false} } }%%
timeline
title History of Social Media Platform
2002 : LinkedIn
@@ -97,10 +97,10 @@
2010 : Pinterest
</pre>
<pre id="diagram" class="mermaid">
%%{init: { 'logLevel': 'debug', 'theme': 'default', 'themeVariables': {
'cScale0': '#ffffff',
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'themeVariables': {
'cScale0': '#ff0000',
'cScale1': '#00ff00',
'cScale2': '#0000ff',
'cScale2': '#ff0000'
} } }%%
timeline
title History of Social Media Platform
@@ -112,6 +112,25 @@
2008s : Instagram
2010 : Pinterest
</pre>
<pre id="diagram" class="mermaid">
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
'cScale0': '#ff0000',
'cScale1': '#00ff00',
'cScale2': '#0000ff'
} } }%%
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook : Google
2005 : Youtube
2006 : Twitter
2007 : Tumblr
2008 : Instagram
2010 : Pinterest
</pre>
<pre id="diagram" class="mermaid2">
timeline
title History of Social Media Platform

3
packages/mermaid-timeline/src/mermaidUtils.ts
View File

@@ -58,8 +58,7 @@ export const injectUtils = (
_commonDb: any,
_parseDirective: any
) => {
_log.info('Mermaid utils injected into timeline-diagram');
_log.info('123 ' , _parseDirective);
_log.debug('Mermaid utils injected into timeline-diagram');
log.trace = _log.trace;
log.debug = _log.debug;
log.info = _log.info;

2
packages/mermaid-timeline/src/svgDraw.js
View File

@@ -519,7 +519,7 @@ export const drawNode = function (elem, node, fullSection, conf) {
'class',
(node.class ? node.class + ' ' : '') +
'timeline-node ' +
(section < 0 ? 'section-root' : 'section-' + section)
('section-' + section)
);
const bkgElem = nodeElem.append('g');

2
packages/mermaid-timeline/src/timelineDb.js
View File

@@ -90,7 +90,7 @@ const compileTasks = function () {
}
return allProcessed;
};
log.info('456 parseDirective',parseDirective);
export default {
clear,
getCommonDb,

38
packages/mermaid-timeline/src/timelineRenderer.ts
View File

@@ -1,8 +1,6 @@
// @ts-nocheck TODO: fix file
import { select } from 'd3';
import svgDraw from './svgDraw';
import addSVGAccessibilityFields from '../../accessibility';
import { log, getConfig, setupGraphViewbox } from './mermaidUtils';
export const setConf = function (cnf) {
@@ -17,15 +15,14 @@ export const draw = function (text, id, version, diagObj) {
//1. Fetch the configuration
const conf = getConfig();
const LEFT_MARGIN = conf.leftMargin?conf.leftMargin:50;
//log conf
log.info('conf', conf);
//2. Clear the diagram db before parsing
diagObj.db.clear();
//3. Parse the diagram text
diagObj.parser.parse(text + '\n');
log.info('timeline', diagObj.db);
log.debug('timeline', diagObj.db);
const securityLevel = conf.securityLevel;
// Handle root and Document for when rendering in sandbox mode
@@ -45,17 +42,14 @@ export const draw = function (text, id, version, diagObj) {
//4. Fetch the diagram data
const tasks = diagObj.db.getTasks();
const title = diagObj.db.getCommonDb().getDiagramTitle();
//log tasks
log.info(tasks);
log.debug('task',tasks);
//5. Initialize the diagram
svgDraw.initGraphics(svg);
// fetch Sections
const sections = diagObj.db.getSections();
// log sections
log.info(sections);
log.debug('sections', sections);
let maxSectionHeight = 0;
let maxTaskHeight = 0;
@@ -81,14 +75,14 @@ export const draw = function (text, id, version, diagObj) {
maxHeight: maxSectionHeight,
};
const sectionHeight = svgDraw.getVirtualNodeHeight(svg, sectionNode, conf);
log.info('sectionHeight before draw', sectionHeight);
log.debug('sectionHeight before draw', sectionHeight);
maxSectionHeight = Math.max(maxSectionHeight, sectionHeight +20);
});
//tasks length and maxEventCount
let maxEventCount = 0;
let maxEventLineLength = 0;
log.info('tasks.length', tasks.length);
log.debug('tasks.length', tasks.length);
//calculate max task height
// for loop till tasks.length
for (const [i, task] of tasks.entries()) {
@@ -102,7 +96,7 @@ export const draw = function (text, id, version, diagObj) {
maxHeight: maxTaskHeight,
};
const taskHeight = svgDraw.getVirtualNodeHeight(svg, taskNode, conf);
log.info('taskHeight before draw', taskHeight);
log.debug('taskHeight before draw', taskHeight);
maxTaskHeight = Math.max(maxTaskHeight, taskHeight + 20);
//calculate maxEventCount
@@ -126,8 +120,8 @@ export const draw = function (text, id, version, diagObj) {
}
log.info('maxSectionHeight before draw', maxSectionHeight);
log.info('maxTaskHeight before draw', maxTaskHeight);
log.debug('maxSectionHeight before draw', maxSectionHeight);
log.debug('maxTaskHeight before draw', maxTaskHeight);
if (sections && sections.length > 0) {
sections.forEach((section) => {
@@ -140,11 +134,10 @@ export const draw = function (text, id, version, diagObj) {
padding: 20,
maxHeight: maxSectionHeight,
};
//log section node
log.info('sectionNode', sectionNode);
log.debug('sectionNode', sectionNode);
const sectionNodeWrapper = svg.append('g');
const node = svgDraw.drawNode(sectionNodeWrapper, sectionNode, sectionNumber, conf);
log.info('sectionNode output', node);
log.debug('sectionNode output', node);
sectionNodeWrapper.attr(
'transform',
@@ -177,7 +170,7 @@ export const draw = function (text, id, version, diagObj) {
// Get BBox of the diagram
const box = svg.node().getBBox();
log.info('bounds', box);
log.debug('bounds', box);
if (title) {
svg
@@ -223,14 +216,13 @@ export const drawTasks = function (diagram, tasks, sectionColor, masterX, master
maxHeight: maxTaskHeight,
};
//log task node
log.info('taskNode', taskNode);
log.debug('taskNode', taskNode);
// create task wrapper
const taskWrapper = diagram.append('g').attr('class', 'taskWrapper');
const node = svgDraw.drawNode(taskWrapper, taskNode, sectionColor, conf);
const taskHeight = node.height;
//log task height
log.info('taskHeight after draw', taskHeight);
log.debug('taskHeight after draw', taskHeight);
taskWrapper.attr(
'transform',
`translate(${masterX}, ${masterY})`
@@ -294,7 +286,7 @@ export const drawEvents = function (diagram, events, sectionColor, masterX, mast
};
//log task node
log.info('eventNode', eventNode);
log.debug('eventNode', eventNode);
// create event wrapper
const eventWrapper = diagram.append('g').attr('class', 'eventWrapper');
const node = svgDraw.drawNode(eventWrapper, eventNode, sectionColor, conf)

2
packages/mermaid/src/diagram-api/diagramAPI.ts
View File

@@ -51,8 +51,6 @@ export const registerDiagram = (
addStylesForDiagram(id, diagram.styles);
if (diagram.injectUtils) {
console.log('parseDirective', parseDirective);
diagram.injectUtils(log, setLogLevel, getConfig, sanitizeText, setupGraphViewbox,getCommonDb(),parseDirective);
}
};

2
packages/mermaid/src/directiveUtils.ts
View File

@@ -8,7 +8,7 @@ import { directiveSanitizer } from './utils';
let currentDirective: { type?: string; args?: any } | undefined = {};
export const parseDirective = function (p: any, statement: string, context: string, type: string): void {
log.info('parseDirective is being called', statement, context, type);
log.debug('parseDirective is being called', statement, context, type);
try {
if (statement !== undefined) {
statement = statement.trim();

4
packages/mermaid/src/docs/syntax/timeline.md
View File

@@ -140,7 +140,7 @@ mermaid.initialize({
let us look at same example, where we have disabled the multiColor option.
```mermaid-example
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'timeline': {'disableMulticolor': true}}%%
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'timeline': {'disableMulticolor': true}}}%%
timeline
title History of Social Media Platform
2002 : LinkedIn
@@ -164,7 +164,7 @@ Now let's override the default values for the `cScale0` to `cScale2` variables:
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
'cScale0': '#ff0000',
'cScale1': '#00ff00',
'cScale2': '#0000ff',
'cScale2': '#0000ff'
} } }%%
timeline
title History of Social Media Platform

4
packages/mermaid/src/themes/theme-default.js
View File

@@ -122,6 +122,7 @@ class Theme {
updateColors() {
/* Color Scale */
/* Each color-set will have a background, a foreground and a border color */
this.cScale0 = this.cScale0 || this.primaryColor;
this.cScale1 = this.cScale1 || this.secondaryColor;
this.cScale2 = this.cScale2 || this.tertiaryColor;
@@ -138,10 +139,9 @@ class Theme {
this['cScalePeer' + 2] = this['cScalePeer' + 2] || darken(this.tertiaryColor, 40);
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
// Setup the peer color for the set, useful for borders
this['cScale' + i] = darken(this['cScale' + i], 10);
this['cScale' + i] = darken(this['cScale' + i], 10);
this['cScalePeer' + i] = this['cScalePeer' + i] || darken(this['cScale' + i], 25);
}
// Setup the inverted color for the set
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
this['cScaleInv' + i] = this['cScaleInv' + i] || adjust(this['cScale' + i], { h: 180 });