Directives slight rework, utils enhancements, mermaidAPI enhancements, SequenceDiagram tweaks

cypress/integration/rendering/sequencediagram.spec.js

@@ -126,6 +126,29 @@ context('Sequence diagram', () => {
         participant A as Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
         A->>Bob: Hola
         Bob-->A: Pasten !
+      `,
+        {logLevel: 0}
+      );
+    });
+    it('should wrap (inline) long actor descriptions', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        participant A as wrap:Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+        A->>Bob: Hola
+        Bob-->A: Pasten !
+      `,
+        {logLevel: 0}
+      );
+    });
+    it('should wrap (directive) long actor descriptions', () => {
+      imgSnapshotTest(
+        `
+        %%{init: {'config': {'wrapEnabled': true }}}%%
+        sequenceDiagram
+        participant A as Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+        A->>Bob: Hola
+        Bob-->A: Pasten !
       `,
         {}
       );
@@ -141,6 +164,17 @@ context('Sequence diagram', () => {
         {}
       );
     });
+    it('should render long notes wrapped (inline) left of actor', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        Alice->>Bob: Hola
+        Note left of Alice:wrap: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+        Bob->>Alice: I'm short though
+      `,
+        {}
+      );
+    });
     it('should render long notes right of actor', () => {
       imgSnapshotTest(
         `
@@ -152,6 +186,17 @@ context('Sequence diagram', () => {
         {}
       );
     });
+    it('should render long notes wrapped (inline) right of actor', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        Alice->>Bob: Hola
+        Note right of Alice:wrap: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+        Bob->>Alice: I'm short though
+      `,
+        {}
+      );
+    });
     it('should render long notes over actor', () => {
       imgSnapshotTest(
         `
@@ -163,6 +208,17 @@ context('Sequence diagram', () => {
         {}
       );
     });
+    it('should render long notes wrapped (inline) over actor', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        Alice->>Bob: Hola
+        Note over Alice:wrap: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+        Bob->>Alice: I'm short though
+      `,
+        {}
+      );
+    });
     it('should render long messages from an actor to the left to one to the right', () => {
       imgSnapshotTest(
         `
@@ -173,6 +229,16 @@ context('Sequence diagram', () => {
         {}
       );
     });
+    it('should render long messages wrapped (inline) from an actor to the left to one to the right', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        Alice->>Bob:wrap:Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+        Bob->>Alice: I'm short though
+      `,
+        {}
+      );
+    });
     it('should render long messages from an actor to the right to one to the left', () => {
       imgSnapshotTest(
         `
@@ -183,6 +249,16 @@ context('Sequence diagram', () => {
         {}
       );
     });
+    it('should render long messages wrapped (inline) from an actor to the right to one to the left', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        Alice->>Bob: I'm short
+        Bob->>Alice:wrap: Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
+      `,
+        {}
+      );
+    });
   });
   context('background rects', () => {
     it('should render a single and nested rects', () => {
@@ -216,6 +292,69 @@ context('Sequence diagram', () => {
         {}
       );
     });
+    it('should render a single and nested opt with long test overflowing', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+          participant A
+          participant B
+          participant C
+          participant D
+          participant E
+          participant G
+
+          A ->>+ B: Task 1
+          opt this is an opt with a long title that will overflow
+            B ->>+ C: Task 2
+            C -->>- B: Return
+          end
+
+          A ->> D: Task 3
+          opt this is another opt with a long title that will overflow
+            D ->>+ E: Task 4
+            opt this is a nested opt with a long title that will overflow
+            E ->>+ G: Task 5
+            G -->>- E: Return
+            end
+            E ->> E: Task 6
+          end
+          D -->> A: Complete
+      `,
+        {}
+      );
+    });
+    it('should render a single and nested opt with long test wrapping', () => {
+      imgSnapshotTest(
+        `
+        %%{init: { 'config': { 'wrapEnabled': true } } }%%
+        sequenceDiagram
+          participant A
+          participant B
+          participant C
+          participant D
+          participant E
+          participant G
+
+          A ->>+ B: Task 1
+          opt this is an opt with a long title that will overflow
+            B ->>+ C: Task 2
+            C -->>- B: Return
+          end
+
+          A ->> D: Task 3
+          opt this is another opt with a long title that will overflow
+            D ->>+ E: Task 4
+            opt this is a nested opt with a long title that will overflow
+            E ->>+ G: Task 5
+            G -->>- E: Return
+            end
+            E ->> E: Task 6
+          end
+          D -->> A: Complete
+      `,
+        {}
+      );
+    });
     it('should render rect around and inside loops', () => {
       imgSnapshotTest(
         `
@@ -327,13 +466,50 @@ context('Sequence diagram', () => {
         {}
       );
     });
+    it('should render dark theme from init directive and configure font size 24 font', () => {
+      imgSnapshotTest(
+        `
+        %%{init: {'theme': 'dark', 'config': {'fontSize': 24}}}%%
+        sequenceDiagram
+        Alice->>John: Hello John, how are you?
+        Alice->>John: John, can you hear me?
+        John-->>Alice: Hi Alice, I can hear you!
+        John-->>Alice: I feel great!
+      `,
+        {}
+      );
+    });
+    it('should render with wrapping enabled', () => {
+      imgSnapshotTest(
+        `
+        %%{init: { 'config': { 'wrapEnabled': true }}}%%
+        sequenceDiagram
+        participant A as Alice, the talkative one
+        A->>John: Hello John, how are you today? I'm feeling quite verbose today.
+        A->>John: John, can you hear me? If you are not available, we can talk later.
+        John-->>A: Hi Alice, I can hear you! I was finishing up an important meeting.
+        John-->>A: I feel great! I was not ignoring you. I am sorry you had to wait for a response.
+      `,
+        {}
+      );
+    });
+    it('should render with an init directive', () => {
+      imgSnapshotTest(
+`%%{init: { "theme": "dark", 'config': { "fontFamily": "Menlo", "fontSize": 18, "fontWeight": 400, "wrapEnabled": true }}}%%
+          sequenceDiagram
+          Alice->>Bob: Hello Bob, how are you? If you are not available right now, I can leave you a message. Please get back to me as soon as you can!
+          Note left of Alice: Bob thinks
+          Bob->>Alice: Fine!`,
+        {}
+      )
+    });
   });
   context('directives', () => {
       it('should overide config with directive settings', () => {
       imgSnapshotTest(
         `
+        %%{init: { "sequence": { "mirrorActors": true }}}%%
         sequenceDiagram
-        %%{config: { "mirrorActors": true} }%%
         Alice->>Bob: I'm short
         note left of Alice: config set to mirrorActors: false<br/>directive set to mirrorActors: true
         Bob->>Alice: Short as well
@@ -344,6 +520,7 @@ context('Sequence diagram', () => {
       it('should overide config with directive settings', () => {
       imgSnapshotTest(
         `
+        %%{init: { "sequence": { "mirrorActors": false }}}%%
         sequenceDiagram
         %%{config: { "mirrorActors": false} }%%
         Alice->>Bob: I'm short

docs/mermaidAPI.md

@@ -454,12 +454,11 @@ mermaidAPI.initialize({
 ### Parameters
 
 -   `id`  the id of the element to be rendered
--   `_txt`  
+-   `_txt`  the graph definition
 -   `cb`  callback which is called after rendering is finished with the svg code as inparam.
 -   `container`  selector to element in which a div with the graph temporarily will be inserted. In one is
     provided a hidden div will be inserted in the body of the page instead. The element will be removed when rendering is
     completed.
--   `txt`  the graph definition
 
 ## 
 

src/config.js

@@ -1,47 +1,19 @@
-// import { logger } from './logger';
-let config = {};
-
-const setConf = function(cnf) {
-  // console.log('config::setConf', cnf);
-  // Top level initially mermaid, gflow, sequenceDiagram and gantt
-  const lvl1Keys = Object.keys(cnf);
-  for (let i = 0; i < lvl1Keys.length; i++) {
-    if (typeof cnf[lvl1Keys[i]] === 'object' && cnf[lvl1Keys[i]] != null) {
-      const lvl2Keys = Object.keys(cnf[lvl1Keys[i]]);
-
-      for (let j = 0; j < lvl2Keys.length; j++) {
-        // logger.debug('Setting conf ', lvl1Keys[i], '-', lvl2Keys[j]);
-        if (typeof config[lvl1Keys[i]] === 'undefined') {
-          config[lvl1Keys[i]] = {};
-        }
-        // logger.debug(
-        //   'Setting config: ' +
-        //     lvl1Keys[i] +
-        //     ' ' +
-        //     lvl2Keys[j] +
-        //     ' to ' +
-        //     cnf[lvl1Keys[i]][lvl2Keys[j]]
-        // );
-        config[lvl1Keys[i]][lvl2Keys[j]] = cnf[lvl1Keys[i]][lvl2Keys[j]];
-      }
-    } else {
-      // logger.debug('Setting config: ' + lvl1Keys[i] + ' to ' + cnf[lvl1Keys[i]]);
-      config[lvl1Keys[i]] = cnf[lvl1Keys[i]];
-    }
-  }
-  // console.log('config::setConf done', config);
-};
+import { assignWithDepth } from './utils';
+const config = {};
 
 export const setConfig = conf => {
-  setConf(conf);
+  assignWithDepth(config, conf);
 };
 export const getConfig = () => config;
 
+export const reset = conf => {
+  Object.keys(config).forEach(key => delete config[key]);
+  assignWithDepth(config, conf, { clobber: true });
+};
+
 const configApi = {
   setConfig,
-  getConfig
-  // get conf() {
-  //   return config;
-  // }
+  getConfig,
+  reset
 };
 export default configApi;