Fixes for rendering tests

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/helpers/util.js

@@ -42,7 +42,8 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) =>
   if (!options.fontSize) {
     options.fontSize = '16px';
   }
-  const useAppli = Cypress.env('useAppli');
+  // const useAppli = Cypress.env('useAppli');
+  const useAppli = false;
   const branch = Cypress.env('codeBranch');
   cy.log('Hello ' + useAppli ? 'Appli' : 'image-snapshot');
   const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');

cypress/integration/rendering/sequencediagram.spec.js

@@ -80,7 +80,7 @@ context('Sequence diagram', () => {
         loop Loopy
             Bob->>Alice: Pasten
         end      `,
-      {}
+      { wrap: true }
     );
   });
   context('font settings', () => {

cypress/platform/knsv.html

@@ -64,7 +64,7 @@ journey
        commit
        commit
 </div>
-<div class="mermaid" style="width: 50%;">
+<div class="mermaid2" style="width: 50%;">
    sequenceDiagram
       title: My Sequence Diagram Title
       accTitle: My Acc Sequence Diagram
@@ -218,20 +218,41 @@ class Class10 {
 }
       </div>
       <div class="mermaid" style="width: 100%;">
-graph LR
+%%{init: {'config': {'wrap': true }}}%%
-      A[[subroutine shape test]]
+        sequenceDiagram
-      A -->|Get money| B[[Go shopping]]
+        participant A as Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
-      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?]]
+        A->>Bob: Hola
-      C -->|One| D[[Laptop]]
+        Bob-->A: Pasten !
-      C -->|Two| E[[iPhone]]
-      C -->|Three| F[[Car<br/>wroom wroom]]
-      click A "index.html#link-clicked" "link test"
-      click B testClick "click test"
-      classDef someclass fill:#f96;
-      class A someclass;
-      class C someclass;
       </div>
       <div class="mermaid2" style="width: 100%;">
+      gitGraph
+       commit id: "ZERO"
+       branch develop
+       commit id:"A"
+       checkout main
+       commit id:"ONE"
+       checkout develop
+       commit id:"B"
+       branch featureA
+       commit id:"FIX"
+       commit id: "FIX-2"
+       checkout main
+       commit id:"TWO"
+       cherry-pick id:"A"
+       commit id:"THREE"
+       cherry-pick id:"FIX"
+       checkout develop
+       commit id:"C"
+       merge featureA
+       </div>
+       <div class="mermaid2" style="width: 100%;">
+flowchart TD
+      A[Christmas] -->|Get money| B(Go shopping)
+      B --> C{Let me think}
+      C -->|One| D[Laptop]
+      C -->|Two| E[iPhone]
+      C -->|Three| F[fa:fa-car Car]
+      </div>     <div class="mermaid2" style="width: 100%;">
         classDiagram
           Animal "1" <|-- Duck
           Animal <|-- Fish
@@ -292,7 +313,8 @@ graph LR
     htmlLabels: true,
   },
   sequence: {
-    mirrorActors: false,
+    // mirrorActors: false,'
+    wrap: false,
   },
         // gantt: { axisFormat: '%m/%d/%Y' },
   //       sequence: {
@@ -315,6 +337,7 @@ graph LR
         curve: 'cardinal',
         // securityLevel: 'sandbox',
         // themeVariables: {relationLabelColor: 'red'}
+        wrap: true,
       });
       function callback() {
   alert('It worked');

docs/Setup.md

@@ -1429,15 +1429,6 @@ function _Default value: At default, will mirror Global Config_
 
 Returns **[object][5]** The siteConfig
 
-## parse
-
-### Parameters
-
--   `text`  
--   `dia`  
-
-Returns **any** 
-
 ## getSiteConfig
 
 ## getSiteConfig
@@ -1480,21 +1471,6 @@ Returns **any** The currentConfig merged with the sanitized conf
 
 Returns **any** The currentConfig
 
-## sanitize
-
-## sanitize
-
-| Function | Description                            | Type        | Values |
-| -------- | -------------------------------------- | ----------- | ------ |
-| sanitize | Sets the siteConfig to desired values. | Put Request | None   |
-
-Ensures options parameter does not attempt to override siteConfig secure keys **Notes**: modifies
-options in-place
-
-### Parameters
-
--   `options` **any** The potential setConfig parameter
-
 ## render
 
 Function that renders an svg with a graph from a chart definition. Usage example below.
@@ -1523,6 +1499,21 @@ $(function () {
 
 Returns **any** 
 
+## sanitize
+
+## sanitize
+
+| Function | Description                            | Type        | Values |
+| -------- | -------------------------------------- | ----------- | ------ |
+| sanitize | Sets the siteConfig to desired values. | Put Request | None   |
+
+Ensures options parameter does not attempt to override siteConfig secure keys **Notes**: modifies
+options in-place
+
+### Parameters
+
+-   `options` **any** The potential setConfig parameter
+
 ## addDirective
 
 Pushes in a directive to the configuration
@@ -1533,6 +1524,8 @@ Pushes in a directive to the configuration
 
 ## reset
 
+## reset
+
 | Function | Description                  | Type        | Required | Values |
 | -------- | ---------------------------- | ----------- | -------- | ------ |
 | reset    | Resets currentConfig to conf | Put Request | Required | None   |

src/diagram-api/diagram-orchestration.js

@@ -19,13 +19,14 @@ import gitGraphDetector from '../diagrams/git/gitGraphDetector';
 //   mindmapRenderer,
 //   mindmapDetector
 // );
-registerDiagram(
+const addDiagrams = () => {
-  'gitGraph',
+  registerDiagram(
-  gitGraphParser,
+    'gitGraph',
-  gitGraphDb,
+    gitGraphParser,
-  gitGraphRenderer,
+    gitGraphDb,
-  undefined,
+    gitGraphRenderer,
-  gitGraphDetector
+    undefined,
-);
+    gitGraphDetector
-const apa = { apa: 1 };
+  );
-export default apa;
+};
+export default addDiagrams;

src/diagram-api/diagramAPI.js

@@ -79,7 +79,7 @@ const diagrams = {
       flowDb.setGen('gen-1');
     },
   },
-  flowchartV2: {
+  'flowchart-v2': {
     db: flowDb,
     renderer: flowRendererV2,
     parser: flowParser,

src/diagrams/sequence/sequenceDb.js

@@ -19,7 +19,7 @@ const notes = [];
 let diagramTitle = '';
 let description = '';
 let sequenceNumbersEnabled = false;
-let wrapEnabled = false;
+let wrapEnabled;
 
 export const parseDirective = function (statement, context, type) {
   mermaidAPI.parseDirective(this, statement, context, type);

src/diagrams/sequence/svgDraw.js

@@ -847,9 +847,12 @@ const _drawTextCandidateFunc = (function () {
   function byTspan(content, g, x, y, width, height, textAttrs, conf) {
     const { actorFontSize, actorFontFamily, actorFontWeight } = conf;
 
+    let _actorFontSize =
+      actorFontSize && actorFontSize.replace ? actorFontSize.replace('px', '') : actorFontSize;
+
     const lines = content.split(common.lineBreakRegex);
     for (let i = 0; i < lines.length; i++) {
-      const dy = i * actorFontSize - (actorFontSize * (lines.length - 1)) / 2;
+      const dy = i * _actorFontSize - (_actorFontSize * (lines.length - 1)) / 2;
       const text = g
         .append('text')
         .attr('x', x + width / 2)

src/mermaidAPI.js

@@ -19,7 +19,7 @@ import { select } from 'd3';
 import { compile, serialize, stringify } from 'stylis';
 import pkg from '../package.json';
 import * as configApi from './config';
-import apa from './diagram-api/diagram-orchestration';
+import addDiagrams from './diagram-api/diagram-orchestration';
 import classDb from './diagrams/class/classDb';
 import flowDb from './diagrams/flowchart/flowDb';
 import flowRenderer from './diagrams/flowchart/flowRenderer';
@@ -515,6 +515,7 @@ function initialize(options) {
 
   updateRendererConfigs(config);
   setLogLevel(config.logLevel);
+  addDiagrams();
 }
 
 const mermaidAPI = Object.freeze({