From 09bf54f9aff79e98700bcb88826a53c94311c169 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Thu, 7 Nov 2019 19:14:06 +0100
Subject: [PATCH] #1038 Updated prefix for the internal dom id

---
 .../integration/rendering/flowchart.spec.js   | 21 +++++++++++++++++++
 src/diagrams/flowchart/flowDb.js              | 18 +++++++++-------
 2 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js
index a44b87bf7..5cf75f53e 100644
--- a/cypress/integration/rendering/flowchart.spec.js
+++ b/cypress/integration/rendering/flowchart.spec.js
@@ -356,4 +356,25 @@ describe('Flowcart', () => {
       }
     );
   });
+  it('13: should render hexagons', () => {
+    imgSnapshotTest(
+      `
+      graph TD
+        A[Christmas] -->|Get money| B(Go shopping)
+        B --> C{{Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?}}
+        C -->|One| D[Laptop]
+        C -->|Two| E[iPhone]
+        C -->|Three| F[Car]
+        click A "index.html#link-clicked" "link test"
+        click B testClick "click test"
+        classDef someclass fill:#f96;
+        class A someclass;
+      `,
+      {
+        listUrl: false,
+        listId: 'color styling',
+        logLevel: 0
+      }
+    );
+  });
 });
diff --git a/src/diagrams/flowchart/flowDb.js b/src/diagrams/flowchart/flowDb.js
index 825cac842..214e12edc 100644
--- a/src/diagrams/flowchart/flowDb.js
+++ b/src/diagrams/flowchart/flowDb.js
@@ -4,6 +4,8 @@ import { logger } from '../../logger';
 import utils from '../../utils';
 import { getConfig } from '../../config';
 
+const MERMAID_DOM_ID_PREFIX = 'mermaid-dom-id';
+
 const config = getConfig();
 let vertices = {};
 let edges = [];
@@ -48,7 +50,7 @@ export const addVertex = function(_id, text, type, style, classes) {
     return;
   }
 
-  if (id[0].match(/\d/)) id = 's' + id;
+  if (id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
 
   if (typeof vertices[id] === 'undefined') {
     vertices[id] = { id: id, styles: [], classes: [] };
@@ -96,8 +98,8 @@ export const addVertex = function(_id, text, type, style, classes) {
 export const addLink = function(_start, _end, type, linktext) {
   let start = _start;
   let end = _end;
-  if (start[0].match(/\d/)) start = 's' + start;
-  if (end[0].match(/\d/)) end = 's' + end;
+  if (start[0].match(/\d/)) start = MERMAID_DOM_ID_PREFIX + start;
+  if (end[0].match(/\d/)) end = MERMAID_DOM_ID_PREFIX + end;
   logger.info('Got edge...', start, end);
 
   const edge = { start: start, end: end, type: undefined, text: '' };
@@ -194,7 +196,7 @@ export const setDirection = function(dir) {
 export const setClass = function(ids, className) {
   ids.split(',').forEach(function(_id) {
     let id = _id;
-    if (_id[0].match(/\d/)) id = 's' + id;
+    if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
     if (typeof vertices[id] !== 'undefined') {
       vertices[id].classes.push(className);
     }
@@ -215,7 +217,7 @@ const setTooltip = function(ids, tooltip) {
 
 const setClickFun = function(_id, functionName) {
   let id = _id;
-  if (_id[0].match(/\d/)) id = 's' + id;
+  if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
   if (config.securityLevel !== 'loose') {
     return;
   }
@@ -247,7 +249,7 @@ const setClickFun = function(_id, functionName) {
 export const setLink = function(ids, linkStr, tooltip) {
   ids.split(',').forEach(function(_id) {
     let id = _id;
-    if (_id[0].match(/\d/)) id = 's' + id;
+    if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
     if (typeof vertices[id] !== 'undefined') {
       if (config.securityLevel !== 'loose') {
         vertices[id].link = sanitizeUrl(linkStr); // .replace(/javascript:.*/g, '')
@@ -406,11 +408,11 @@ export const addSubGraph = function(_id, list, _title) {
 
   nodeList = uniq(nodeList.concat.apply(nodeList, list));
   for (let i = 0; i < nodeList.length; i++) {
-    if (nodeList[i][0].match(/\d/)) nodeList[i] = 's' + nodeList[i];
+    if (nodeList[i][0].match(/\d/)) nodeList[i] = MERMAID_DOM_ID_PREFIX + nodeList[i];
   }
 
   id = id || 'subGraph' + subCount;
-  if (id[0].match(/\d/)) id = 's' + id;
+  if (id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
   title = title || '';
   title = sanitize(title);
   subCount = subCount + 1;