#1676 Handling vertices starting with a number

cypress/platform/knsv.html

@@ -23,8 +23,16 @@
     <h1>info below</h1>
     <div class="flex">
       <div class="mermaid" style="width: 50%; height: 400px;">
-      graph TD
+      graph TB;
-        a["<strong>Haiya</strong>"]-->b
+        subgraph "number as labels";
+          1 --> 2
+        end;
+      </div>
+      <div class="mermaid" style="width: 50%; height: 400px;">
+      flowchart TB;
+        subgraph "number as labels";
+          1 --> 2
+        end;
       </div>
       <div class="mermaid2" style="width: 50%; height: 20%;">
         %%{init: { 'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%

src/diagrams/flowchart/flowDb.js

@@ -3,8 +3,8 @@ import utils from '../../utils';
 import * as configApi from '../../config';
 import common from '../common/common';
 import mermaidAPI from '../../mermaidAPI';
+import { logger } from '../../logger';
 
-// const MERMAID_DOM_ID_PREFIX = 'mermaid-dom-id-';
 const MERMAID_DOM_ID_PREFIX = 'flowchart-';
 let vertexCounter = 0;
 let config = configApi.getConfig();
@@ -17,6 +17,9 @@ let tooltips = {};
 let subCount = 0;
 let firstGraphFlag = true;
 let direction;
+
+let version; // As in graph
+
 // Functions to be run after graph rendering
 let funs = [];
 
@@ -36,6 +39,7 @@ export const lookUpDomId = function(id) {
       return vertices[veritceKeys[i]].domId;
     }
   }
+  return id;
 };
 
 /**
@@ -383,7 +387,7 @@ funs.push(setupToolTips);
 /**
  * Clears the internal graph db so that a new graph can be parsed.
  */
-export const clear = function() {
+export const clear = function(ver) {
   vertices = {};
   classes = {};
   edges = [];
@@ -394,6 +398,10 @@ export const clear = function() {
   subCount = 0;
   tooltips = [];
   firstGraphFlag = true;
+  version = ver || 'gen-1';
+};
+export const setGen = ver => {
+  version = ver || 'gen-1';
 };
 /**
  *
@@ -407,6 +415,7 @@ export const defaultStyle = function() {
  * Clears the internal graph db so that a new graph can be parsed.
  */
 export const addSubGraph = function(_id, list, _title) {
+  // logger.warn('addSubgraph', _id, list, _title);
   let id = _id.trim();
   let title = _title;
   if (_id === _title && _title.match(/\s/)) {
@@ -432,12 +441,15 @@ export const addSubGraph = function(_id, list, _title) {
   let nodeList = [];
 
   nodeList = uniq(nodeList.concat.apply(nodeList, list));
+  if (version === 'gen-1') {
+    logger.warn('LOOKING UP');
     for (let i = 0; i < nodeList.length; i++) {
-    if (nodeList[i][0].match(/\d/)) nodeList[i] = MERMAID_DOM_ID_PREFIX + nodeList[i];
+      nodeList[i] = lookUpDomId(nodeList[i]);
+    }
   }
 
   id = id || 'subGraph' + subCount;
-  if (id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
+  // if (id[0].match(/\d/)) id = lookUpDomId(id);
   title = title || '';
   title = common.sanitizeText(title, config);
   subCount = subCount + 1;
@@ -675,6 +687,7 @@ export default {
   getEdges,
   getClasses,
   clear,
+  setGen,
   defaultStyle,
   addSubGraph,
   getDepthFirstPos,

src/diagrams/flowchart/flowRenderer-v2.js

@@ -335,6 +335,7 @@ export const getClasses = function(text) {
 export const draw = function(text, id) {
   logger.info('Drawing flowchart');
   flowDb.clear();
+  flowDb.setGen('gen-2');
   const parser = flow.parser;
   parser.yy = flowDb;
 

src/diagrams/flowchart/flowRenderer.js

@@ -133,7 +133,8 @@ export const addVertices = function(vert, g, svgId) {
         _shape = 'rect';
     }
     // Add the node
-    g.setNode(vertex.id, {
+    logger.warn('Adding node', vertex.id, vertex.domId);
+    g.setNode(flowDb.lookUpDomId(vertex.id), {
       labelType: 'svg',
       labelStyle: styles.labelStyle,
       shape: _shape,
@@ -247,7 +248,7 @@ export const addEdges = function(edges, g) {
     edgeData.minlen = edge.length || 1;
 
     // Add the edge to the graph
-    g.setEdge(edge.start, edge.end, edgeData, cnt);
+    g.setEdge(flowDb.lookUpDomId(edge.start), flowDb.lookUpDomId(edge.end), edgeData, cnt);
   });
 };
 
@@ -278,6 +279,7 @@ export const getClasses = function(text) {
 export const draw = function(text, id) {
   logger.info('Drawing flowchart');
   flowDb.clear();
+  flowDb.setGen('gen-1');
   const parser = flow.parser;
   parser.yy = flowDb;
 
@@ -323,6 +325,7 @@ export const draw = function(text, id) {
 
   // Fetch the verices/nodes and edges/links from the parsed graph definition
   const vert = flowDb.getVertices();
+  logger.warn('Get vertices', vert);
 
   const edges = flowDb.getEdges();
 
@@ -333,7 +336,13 @@ export const draw = function(text, id) {
     selectAll('cluster').append('text');
 
     for (let j = 0; j < subG.nodes.length; j++) {
-      g.setParent(subG.nodes[j], subG.id);
+      logger.warn(
+        'Setting subgraph',
+        subG.nodes[j],
+        flowDb.lookUpDomId(subG.nodes[j]),
+        flowDb.lookUpDomId(subG.id)
+      );
+      g.setParent(flowDb.lookUpDomId(subG.nodes[j]), flowDb.lookUpDomId(subG.id));
     }
   }
   addVertices(vert, g, id);
@@ -388,6 +397,8 @@ export const draw = function(text, id) {
   const svg = select(`[id="${id}"]`);
   svg.attr('xmlns:xlink', 'http://www.w3.org/1999/xlink');
 
+  logger.warn(g);
+
   // Run the renderer. This is what draws the final graph.
   const element = select('#' + id + ' g');
   render(element, g);

src/diagrams/flowchart/parser/flow.spec.js

@@ -136,4 +136,14 @@ describe('when parsing ', function() {
     const classes = flow.parser.yy.getClasses();
     expect(vertices['A'].id).toBe('A');
   });
+  it('should be possible to use numbers as labels', function() {
+    let statement = '';
+
+    statement = statement + 'graph TB;subgraph "number as labels";1;end;';
+    const res = flow.parser.parse(statement);
+    const vertices = flow.parser.yy.getVertices();
+    console.log(vertices);
+    const classes = flow.parser.yy.getClasses();
+    expect(vertices['1'].id).toBe('1');
+  });
 });