#3561 Adding cScale0-11 etc and usage of the colors from the mindmap diagram

packages/mermaid-example-diagram/src/exampleDiagramRenderer.js

@@ -1,6 +1,6 @@
 /** Created by knut on 14-12-11. */
 import { select } from 'd3';
-import { log, getConfig } from './mermaidUtils';
+import { log, getConfig, setupGraphViewbox } from './mermaidUtils';
 
 /**
  * Draws a an info picture in the tag with id: id based on the graph definition in text.
@@ -10,10 +10,11 @@ import { log, getConfig } from './mermaidUtils';
  * @param {any} version
  * @param diagObj
  */
-export const draw = (text, id, version, diagObj) => {
+export const draw = (text, id, version) => {
   try {
-    log.debug('Rendering info diagram\n' + text);
-
+    const conf = getConfig();
+    log.debug('Rendering example diagram\n' + text, 'Conf: ');
+    const THEME_COLOR_LIMIT = getConfig().themeVariables.THEME_COLOR_LIMIT;
     const securityLevel = getConfig().securityLevel;
     // Handle root and Document for when rendering in sanbox mode
     let sandboxElement;
@@ -25,14 +26,34 @@ export const draw = (text, id, version, diagObj) => {
         ? select(sandboxElement.nodes()[0].contentDocument.body)
         : select('body');
 
-    // Parse the graph definition
-    // parser.parse(text);
-    // log.debug('Parsed info diagram');
-    // Fetch the default direction, use TD if none was found
     const svg = root.select('#' + id);
 
     const g = svg.append('g');
 
+    let i;
+    for (i = 0; i < THEME_COLOR_LIMIT; i++) {
+      const section = g.append('g').attr('class', 'section-' + i);
+      section
+        .append('rect')
+        .attr('x', (i % 5) * 110)
+        .attr('y', Math.floor(i / 5) * 90 + 60)
+        .attr('width', 100)
+        .attr('height', 60);
+      section
+        .append('rect')
+        .attr('x', (i % 5) * 110)
+        .attr('y', Math.floor(i / 5) * 90 + 120)
+        .attr('class', 'inverted')
+        .attr('width', 100)
+        .attr('height', 20);
+      section
+        .append('text', 'section-' + i)
+        .text('Section ' + i)
+        .attr('x', (i % 5) * 110 + 15)
+        .attr('y', Math.floor(i / 5) * 90 + 95)
+        .attr('class', 'section-text-' + i);
+    }
+
     g.append('text') // text label for the x axis
       .attr('x', 100)
       .attr('y', 40)
@@ -41,9 +62,8 @@ export const draw = (text, id, version, diagObj) => {
       .style('text-anchor', 'middle')
       .text('v ' + version);
 
-    svg.attr('height', 100);
-    svg.attr('width', 400);
-    // svg.attr('viewBox', '0 0 300 150');
+    // Setup the view box and size of the svg element
+    setupGraphViewbox(undefined, svg, conf.mindmap.padding, conf.mindmap.useMaxWidth);
   } catch (e) {
     log.error('Error while rendering info diagram');
     log.error(e.message);

packages/mermaid-example-diagram/src/mermaidUtils.ts

@@ -19,7 +19,6 @@ export const log: Record<keyof typeof LEVELS, typeof console.log> = {
   error: warning,
   fatal: warning,
 };
-
 export let setLogLevel: (level: keyof typeof LEVELS | number | string) => void;
 export let getConfig: () => object;
 export let sanitizeText: (str: string) => string;

packages/mermaid-example-diagram/src/styles.js

@@ -1,3 +1,29 @@
-const getStyles = () => ``;
+import { darken, lighten, isDark } from 'khroma';
 
+const genSections = (options) => {
+  let sections = '';
+
+  for (let i = 0; i < options.THEME_COLOR_LIMIT; i++) {
+    sections += `
+    .section-${i} rect  {
+      fill: ${options['cScale' + i]};
+      stroke: ${options['cScalePeer' + i]};
+      stroke-width: 4;
+    }
+    .section-${i} rect.inverted  {
+      fill: ${options['cScaleInv' + i]};
+    }
+    .section-${i} text {
+     fill: ${options['cScaleLabel' + i]};
+    }
+
+    `;
+  }
+  return sections;
+};
+
+const getStyles = (options) =>
+  `
+  ${genSections(options)}
+`;
 export default getStyles;