From eeccf1c56b25ff582952d1dc83db36b36d237fa4 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knut.sveidqvist@ipiccolo.com>
Date: Sat, 22 Jan 2022 13:29:54 +0100
Subject: [PATCH] fix: handling rerender in sandbox mode fixing tests

---
 docs/Setup.md                             | 69 +++++------------------
 package.json                              |  2 +-
 src/diagrams/flowchart/flowRenderer.js    |  7 ++-
 src/diagrams/sequence/sequenceRenderer.js |  3 +-
 4 files changed, 22 insertions(+), 59 deletions(-)

diff --git a/docs/Setup.md b/docs/Setup.md
index 70e7fdaeb..6c15869bc 100644
--- a/docs/Setup.md
+++ b/docs/Setup.md
@@ -1057,6 +1057,10 @@ Returns **any**
 
 -   `conf` **any** 
 
+## reinitialize
+
+To be removed
+
 ## initialize
 
 ### Parameters
@@ -1069,61 +1073,16 @@ Returns **any**
 
 ```html
 <script>
-  var config = {
-    theme: 'default',
-    logLevel: 'fatal',
-    securityLevel: 'strict',
-    startOnLoad: true,
-    arrowMarkerAbsolute: false,
-
-    er: {
-      diagramPadding: 20,
-      layoutDirection: 'TB',
-      minEntityWidth: 100,
-      minEntityHeight: 75,
-      entityPadding: 15,
-      stroke: 'gray',
-      fill: 'honeydew',
-      fontSize: 12,
-      useMaxWidth: true,
-    },
-    flowchart: {
-      diagramPadding: 8,
-      htmlLabels: true,
-      curve: 'basis',
-    },
-    sequence: {
-      diagramMarginX: 50,
-      diagramMarginY: 10,
-      actorMargin: 50,
-      width: 150,
-      height: 65,
-      boxMargin: 10,
-      boxTextMargin: 5,
-      noteMargin: 10,
-      messageMargin: 35,
-      messageAlign: 'center',
-      mirrorActors: true,
-      bottomMarginAdj: 1,
-      useMaxWidth: true,
-      rightAngles: false,
-      showSequenceNumbers: false,
-    },
-    gantt: {
-      titleTopMargin: 25,
-      barHeight: 20,
-      barGap: 4,
-      topPadding: 50,
-      leftPadding: 75,
-      gridLineStartPadding: 35,
-      fontSize: 11,
-      fontFamily: '"Open-Sans", "sans-serif"',
-      numberSectionStyles: 4,
-      axisFormat: '%Y-%m-%d',
-      topAxis: false,
-    },
-  };
-  mermaid.initialize(config);
+  var config = { theme: 'default', logLevel: 'fatal', securityLevel: 'strict', startOnLoad: true,
+  arrowMarkerAbsolute: false, er: { diagramPadding: 20, layoutDirection: 'TB', minEntityWidth: 100,
+  minEntityHeight: 75, entityPadding: 15, stroke: 'gray', fill: 'honeydew', fontSize: 12, useMaxWidth:
+true, }, flowchart: { diagramPadding: 8, htmlLabels: true, curve: 'basis', }, sequence: {
+  diagramMarginX: 50, diagramMarginY: 10, actorMargin: 50, width: 150, height: 65, boxMargin: 10,
+  boxTextMargin: 5, noteMargin: 10, messageMargin: 35, messageAlign: 'center', mirrorActors: true,
+  bottomMarginAdj: 1, useMaxWidth: true, rightAngles: false, showSequenceNumbers: false, }, gantt: {
+  titleTopMargin: 25, barHeight: 20, barGap: 4, topPadding: 50, leftPadding: 75, gridLineStartPadding:
+35, fontSize: 11, fontFamily: '"Open-Sans", "sans-serif"', numberSectionStyles: 4, axisFormat:
+'%Y-%m-%d', topAxis: false, }, }; mermaid.initialize(config);
 </script>
 ```
 
diff --git a/package.json b/package.json
index dc675342a..2e8c29124 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "8.13.10",
+  "version": "8.14.0-rc1",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "main": "dist/mermaid.core.js",
   "module": "dist/mermaid.esm.min.mjs",
diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js
index 72f4a9085..1d5aaed89 100644
--- a/src/diagrams/flowchart/flowRenderer.js
+++ b/src/diagrams/flowchart/flowRenderer.js
@@ -28,10 +28,13 @@ export const setConf = function (cnf) {
  * @param svgId
  * @param root
  * @param doc
+ * @param _doc
  */
-export const addVertices = function (vert, g, svgId, root, doc) {
+export const addVertices = function (vert, g, svgId, root, _doc) {
   const securityLevel = getConfig().securityLevel;
-  const svg = root.select(`[id="${svgId}"]`);
+
+  const svg = !root ? select(`[id="${svgId}"]`) : root.select(`[id="${svgId}"]`);
+  const doc = !_doc ? document : _doc;
   const keys = Object.keys(vert);
 
   // Iterate through each item in the vertex object (containing all the vertices found) in the graph definition
diff --git a/src/diagrams/sequence/sequenceRenderer.js b/src/diagrams/sequence/sequenceRenderer.js
index 178e10f5b..138ca7c6b 100644
--- a/src/diagrams/sequence/sequenceRenderer.js
+++ b/src/diagrams/sequence/sequenceRenderer.js
@@ -564,7 +564,8 @@ export const draw = function (text, id) {
   bounds.init();
   log.debug(`C:${JSON.stringify(conf, null, 2)}`);
 
-  const diagram = root.select(`[id="${id}"]`);
+  const diagram =
+    securityLevel === 'sandbox' ? root.select(`[id="${id}"]`) : select(`[id="${id}"]`);
 
   // Fetch data from the parsing
   const actors = parser.yy.getActors();