Merge afd189d into e461b57

mermaid-js · Nov 19, 2019 · 9563629 · 9563629
2 parents e461b57 + afd189d
commit 9563629
Show file tree

Hide file tree

Showing 7 changed files with 1,027 additions and 876 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -0,0 +1,50 @@
+name: Build
+
+on: [push, pull_request]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [10.x, 12.x]
+    steps:
+    - uses: actions/checkout@v1
+
+    - name: Setup Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+
+    - name: Install Yarn
+      run: npm i yarn --global
+
+    - name: Cache Node Modules
+      uses: actions/cache@v1
+      with:
+        path: .cache
+        key: ${{ runner.OS }}-build-${{ hashFiles('**/yarn.lock') }}
+
+    - name: Install Packages
+      run: |
+        yarn config set cache-folder $GITHUB_WORKSPACE/.cache/yarn
+        yarn install --frozen-lockfile
+      env:
+        CYPRESS_CACHE_FOLDER: ../../.cache/Cypress
+
+    - name: Run Build
+      run: yarn build
+
+    - name: Run Unit Tests
+      run: |
+        yarn test --coverage
+        cat ./coverage/lcov.info | ./node_modules/.bin/coveralls
+      env:
+        COVERALLS_SERVICE_NAME: ${{ secrets.COVERALLS_SERVICE_NAME }}
+        COVERALLS_REPO_TOKEN: ${{ secrets.COVERALLS_REPO_TOKEN }}
+
+    - name: Run E2E Tests
+      run: yarn e2e
+      env:
+        PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+        CYPRESS_CACHE_FOLDER: .cache/Cypress
diff --git a/cypress/integration/rendering/classDiagram.spec.js b/cypress/integration/rendering/classDiagram.spec.js
@@ -58,4 +58,56 @@ describe('Class diagram', () => {
     );
     cy.get('svg');
   });
+  it('should render multiple class diagrams', () => {
+    imgSnapshotTest(
+      [
+      `
+    classDiagram
+      Class01 "1" <|--|> "*" AveryLongClass : Cool
+      &lt;&lt;interface&gt;&gt; Class01
+      Class03 "1" *-- "*" Class04
+      Class05 "1" o-- "many" Class06
+      Class07 "1" .. "*" Class08
+      Class09 "1" --> "*" C2 : Where am i?
+      Class09 "*" --* "*" C3
+      Class09 "1" --|> "1" Class07
+      Class07  : equals()
+      Class07  : Object[] elementData
+      Class01  : size()
+      Class01  : int chimp
+      Class01  : int gorilla
+      Class08 "1" <--> "*" C2: Cool label
+      class Class10 {
+        &lt;&lt;service&gt;&gt;
+        int id
+        test()
+      }
+      `,
+      `
+    classDiagram
+      Class01 "1" <|--|> "*" AveryLongClass : Cool
+      &lt;&lt;interface&gt;&gt; Class01
+      Class03 "1" *-- "*" Class04
+      Class05 "1" o-- "many" Class06
+      Class07 "1" .. "*" Class08
+      Class09 "1" --> "*" C2 : Where am i?
+      Class09 "*" --* "*" C3
+      Class09 "1" --|> "1" Class07
+      Class07  : equals()
+      Class07  : Object[] elementData
+      Class01  : size()
+      Class01  : int chimp
+      Class01  : int gorilla
+      Class08 "1" <--> "*" C2: Cool label
+      class Class10 {
+        &lt;&lt;service&gt;&gt;
+        int id
+        test()
+      }
+      `,
+      ],
+      {}
+    );
+    cy.get('svg');
+  });
 });
diff --git a/cypress/platform/viewer.js b/cypress/platform/viewer.js
@@ -14,11 +14,22 @@ const contentLoaded = function() {
     const graphObj = JSON.parse(Base64.decode(graphBase64));
     // const graph = 'hello'
     console.log(graphObj);
-    const div = document.createElement('div');
-    div.id = 'block';
-    div.className = 'mermaid';
-    div.innerHTML = graphObj.code;
-    document.getElementsByTagName('body')[0].appendChild(div);
+    if (Array.isArray(graphObj.code)) {
+      const numCodes = graphObj.code.length;
+      for (let i = 0; i < numCodes; i++) {
+        const div = document.createElement('div');
+        div.id = 'block' + i;
+        div.className = 'mermaid';
+        div.innerHTML = graphObj.code[i];
+        document.getElementsByTagName('body')[0].appendChild(div);
+      }
+    } else {
+      const div = document.createElement('div');
+      div.id = 'block';
+      div.className = 'mermaid';
+      div.innerHTML = graphObj.code;
+      document.getElementsByTagName('body')[0].appendChild(div);
+    }
     global.mermaid.initialize(graphObj.mermaid);
     // console.log('graphObj.mermaid', graphObj.mermaid)
     global.mermaid.init();
@@ -31,23 +42,52 @@ const contentLoadedApi = function() {
     const graphBase64 = document.location.href.substr(pos);
     const graphObj = JSON.parse(Base64.decode(graphBase64));
     // const graph = 'hello'
-    const div = document.createElement('div');
-    div.id = 'block';
-    div.className = 'mermaid';
-    // div.innerHTML = graphObj.code
-    document.getElementsByTagName('body')[0].appendChild(div);
-    global.mermaid.initialize(graphObj.mermaid);
+    if (Array.isArray(graphObj.code)) {
+      const numCodes = graphObj.code.length;
+      const divs = [];
+      let div;
+      for (let i = 0; i < numCodes; i++) {
+        div = document.createElement('div');
+        div.id = 'block' + i;
+        div.className = 'mermaid';
+        // div.innerHTML = graphObj.code
+        document.getElementsByTagName('body')[0].appendChild(div);
+        divs[i] = div;
+      }
+
+      global.mermaid.initialize(graphObj.mermaid);
+
+      for (let i = 0; i < numCodes; i++) {
+        mermaid2.render(
+          'newid' + i,
+          graphObj.code[i],
+          (svgCode, bindFunctions) => {
+            div.innerHTML = svgCode;
+
+            bindFunctions(div);
+          },
+          divs[i]
+        );
+      }
+    } else {
+      const div = document.createElement('div');
+      div.id = 'block';
+      div.className = 'mermaid';
+      // div.innerHTML = graphObj.code
+      document.getElementsByTagName('body')[0].appendChild(div);
+      global.mermaid.initialize(graphObj.mermaid);
 
-    mermaid2.render(
-      'newid',
-      graphObj.code,
-      (svgCode, bindFunctions) => {
-        div.innerHTML = svgCode;
+      mermaid2.render(
+        'newid',
+        graphObj.code,
+        (svgCode, bindFunctions) => {
+          div.innerHTML = svgCode;
 
-        bindFunctions(div);
-      },
-      div
-    );
+          if (bindFunctions) bindFunctions(div);
+        },
+        div
+      );
+    }
   }
 };
 

diff --git a/docs/flowchart.md b/docs/flowchart.md
@@ -123,6 +123,28 @@ graph LR
     id1{{This is the text in the box}}
 ```
 
+### Parallelogram
+
+```
+graph TD
+    id1[/This is the text in the box/]
+```
+```mermaid
+graph TD
+    id1[/This is the text in the box/]
+```
+
+### Parallelogram alt
+
+```
+graph TD
+    id1[\This is the text in the box\]
+```
+```mermaid
+graph TD
+    id1[\This is the text in the box\]
+```
+
 ### Trapezoid
 
 ```

diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
     "e2e": "start-server-and-test dev http://localhost:9000/ cypress",
     "e2e-upd": "yarn lint && jest e2e -u --config e2e/jest.config.js",
     "dev": "webpack-dev-server --config webpack.config.e2e.js",
-    "test": "yarn lint && jest src",
+    "test": "yarn lint && jest src/.*",
     "test:watch": "jest --watch src",
     "prepublishOnly": "yarn build && yarn release && yarn test && yarn e2e",
     "prepush": "yarn test"
@@ -77,10 +77,7 @@
     "cypress": "3.4.0",
     "husky": "^1.2.1",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^23.6.0",
-    "jest-environment-puppeteer": "^4.2.0",
-    "jest-image-snapshot": "^2.8.2",
-    "jest-puppeteer": "^4.2.0",
+    "jest": "^24.9.0",
     "jison": "^0.4.18",
     "moment": "^2.23.0",
     "node-sass": "^4.12.0",

diff --git a/src/diagrams/class/classRenderer.js b/src/diagrams/class/classRenderer.js
@@ -8,7 +8,7 @@ import { parser } from './parser/classDiagram';
 
 parser.yy = classDb;
 
-const idCache = {};
+let idCache = {};
 
 let classCnt = 0;
 const conf = {
@@ -136,7 +136,6 @@ const insertMarkers = function(elem) {
 };
 
 let edgeCount = 0;
-let total = 0;
 const drawEdge = function(elem, path, relation) {
   const getRelationType = function(type) {
     switch (type) {
@@ -291,7 +290,7 @@ const drawClass = function(elem, classDef) {
     }
   };
 
-  const id = 'classId' + (classCnt % total);
+  const id = 'classId' + classCnt;
   const classInfo = {
     id: id,
     label: classDef.id,
@@ -411,6 +410,7 @@ export const setConf = function(cnf) {
  * @param id
  */
 export const draw = function(text, id) {
+  idCache = {};
   parser.yy.clear();
   parser.parse(text);
 
@@ -437,7 +437,6 @@ export const draw = function(text, id) {
 
   const classes = classDb.getClasses();
   const keys = Object.keys(classes);
-  total = keys.length;
   for (let i = 0; i < keys.length; i++) {
     const classDef = classes[keys[i]];
     const node = drawClass(diagram, classDef);