From be818ad57f45cbaa3969ffa4509290e5081b70b4 Mon Sep 17 00:00:00 2001 From: ashishj Date: Thu, 19 Jan 2023 20:30:11 +0100 Subject: [PATCH] Pushing fix for broken themeVariable functionality --- cypress/platform/ashish2.html | 29 +++++++++++--- packages/mermaid-timeline/src/mermaidUtils.ts | 3 +- packages/mermaid-timeline/src/svgDraw.js | 2 +- packages/mermaid-timeline/src/timelineDb.js | 2 +- .../mermaid-timeline/src/timelineRenderer.ts | 38 ++++++++----------- .../mermaid/src/diagram-api/diagramAPI.ts | 2 - packages/mermaid/src/directiveUtils.ts | 2 +- packages/mermaid/src/docs/syntax/timeline.md | 4 +- packages/mermaid/src/themes/theme-default.js | 4 +- 9 files changed, 47 insertions(+), 39 deletions(-) diff --git a/cypress/platform/ashish2.html b/cypress/platform/ashish2.html index f77f95606..c6dfdc6b0 100644 --- a/cypress/platform/ashish2.html +++ b/cypress/platform/ashish2.html @@ -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. - 
-      %%{init: { 'logLevel': 'debug', 'theme': 'default', 'timeline': {'disableMulticolor':false} } }%%
+    
+      %%{'init': { 'logLevel': 'debug', 'theme': 'default', 'timeline': {'disableMulticolor':false} } }%%
  timeline
         title History of Social Media Platform
           2002 : LinkedIn
@@ -97,10 +97,10 @@
           2010 : Pinterest
     

     
-      %%{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
     

+
+    
+          %%{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
+
+    

+
     
  timeline
         title History of Social Media Platform
diff --git a/packages/mermaid-timeline/src/mermaidUtils.ts b/packages/mermaid-timeline/src/mermaidUtils.ts
index af3f97571..b733507ed 100644
--- a/packages/mermaid-timeline/src/mermaidUtils.ts
+++ b/packages/mermaid-timeline/src/mermaidUtils.ts
@@ -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;
diff --git a/packages/mermaid-timeline/src/svgDraw.js b/packages/mermaid-timeline/src/svgDraw.js
index bed0e2942..88f90401c 100644
--- a/packages/mermaid-timeline/src/svgDraw.js
+++ b/packages/mermaid-timeline/src/svgDraw.js
@@ -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');
 
diff --git a/packages/mermaid-timeline/src/timelineDb.js b/packages/mermaid-timeline/src/timelineDb.js
index e5de2aee3..b92715fe9 100644
--- a/packages/mermaid-timeline/src/timelineDb.js
+++ b/packages/mermaid-timeline/src/timelineDb.js
@@ -90,7 +90,7 @@ const compileTasks = function () {
   }
   return allProcessed;
 };
-log.info('456 parseDirective',parseDirective);
+
 export default {
   clear,
   getCommonDb,
diff --git a/packages/mermaid-timeline/src/timelineRenderer.ts b/packages/mermaid-timeline/src/timelineRenderer.ts
index 5ed6c554e..86a83f674 100644
--- a/packages/mermaid-timeline/src/timelineRenderer.ts
+++ b/packages/mermaid-timeline/src/timelineRenderer.ts
@@ -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)
diff --git a/packages/mermaid/src/diagram-api/diagramAPI.ts b/packages/mermaid/src/diagram-api/diagramAPI.ts
index 574e72fbc..69c4d8110 100644
--- a/packages/mermaid/src/diagram-api/diagramAPI.ts
+++ b/packages/mermaid/src/diagram-api/diagramAPI.ts
@@ -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);
   }
 };
diff --git a/packages/mermaid/src/directiveUtils.ts b/packages/mermaid/src/directiveUtils.ts
index 79888daf9..677647d44 100644
--- a/packages/mermaid/src/directiveUtils.ts
+++ b/packages/mermaid/src/directiveUtils.ts
@@ -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();
diff --git a/packages/mermaid/src/docs/syntax/timeline.md b/packages/mermaid/src/docs/syntax/timeline.md
index 3438b4542..44b72bd79 100644
--- a/packages/mermaid/src/docs/syntax/timeline.md
+++ b/packages/mermaid/src/docs/syntax/timeline.md
@@ -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
diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js
index 969551ee6..4fb898040 100644
--- a/packages/mermaid/src/themes/theme-default.js
+++ b/packages/mermaid/src/themes/theme-default.js
@@ -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 });