From 2a6372cabeb970dd109d2eeaaf7189b1429e4e0a Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Wed, 16 Sep 2020 20:09:02 +0200 Subject: [PATCH] #1676 Handling vertices starting with a number --- cypress/platform/knsv.html | 12 +++++++++-- src/diagrams/flowchart/flowDb.js | 23 +++++++++++++++++----- src/diagrams/flowchart/flowRenderer-v2.js | 1 + src/diagrams/flowchart/flowRenderer.js | 17 +++++++++++++--- src/diagrams/flowchart/parser/flow.spec.js | 10 ++++++++++ 5 files changed, 53 insertions(+), 10 deletions(-) diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html index 7f8afdc6c..3731155cc 100644 --- a/cypress/platform/knsv.html +++ b/cypress/platform/knsv.html @@ -23,8 +23,16 @@

info below

- graph TD - a["Haiya"]-->b + graph TB; + subgraph "number as labels"; + 1 --> 2 + end; +
+
+ flowchart TB; + subgraph "number as labels"; + 1 --> 2 + end;
%%{init: { 'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%% diff --git a/src/diagrams/flowchart/flowDb.js b/src/diagrams/flowchart/flowDb.js index d70d56433..951ce5d55 100644 --- a/src/diagrams/flowchart/flowDb.js +++ b/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)); - for (let i = 0; i < nodeList.length; i++) { - if (nodeList[i][0].match(/\d/)) nodeList[i] = MERMAID_DOM_ID_PREFIX + nodeList[i]; + if (version === 'gen-1') { + logger.warn('LOOKING UP'); + for (let i = 0; i < nodeList.length; 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, diff --git a/src/diagrams/flowchart/flowRenderer-v2.js b/src/diagrams/flowchart/flowRenderer-v2.js index 49330588f..671dc460e 100644 --- a/src/diagrams/flowchart/flowRenderer-v2.js +++ b/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; diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js index be60bf4b3..8cb1e9a11 100644 --- a/src/diagrams/flowchart/flowRenderer.js +++ b/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); diff --git a/src/diagrams/flowchart/parser/flow.spec.js b/src/diagrams/flowchart/parser/flow.spec.js index 8c844cfc4..61e56e6ce 100644 --- a/src/diagrams/flowchart/parser/flow.spec.js +++ b/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'); + }); });