Merge pull request #3 from mermaid-js/develop

Develop

.github/workflows/build.yml

@@ -38,13 +38,21 @@ jobs:
  - 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: Upload Test Results
+ uses: coverallsapp/github-action@v1.0.1
+ with:
+ github-token: ${{ secrets.GITHUB_TOKEN }}
+ parallel: true
 
  - name: Run E2E Tests
  run: yarn e2e
  env:
  PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
  CYPRESS_CACHE_FOLDER: .cache/Cypress
+
+ - name: Post Upload Test Results
+ uses: coverallsapp/github-action@master
+ with:
+ github-token: ${{ secrets.GITHUB_TOKEN }}
+ parallel-finished: true

cypress/helpers/util.js

@@ -26,3 +26,9 @@ export const imgSnapshotTest = (graphStr, options, api) => {
  cy.get('svg');
  cy.percySnapshot();
 };
+
+export const renderGraph = (graphStr, options, api) => {
+ const url = mermaidUrl(graphStr, options, api);
+
+ cy.visit(url);
+};

cypress/integration/other/configuration.spec.js

@@ -0,0 +1,100 @@
+import { renderGraph } from '../../helpers/util';
+/* eslint-env jest */
+describe('Configuration', () => {
+ describe('arrowMarkerAbsolute', () => {
+ it('should handle default value false of arrowMarkerAbsolute', () => {
+ renderGraph(
+ `graph 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]
+ `,
+ { }
+ );
+
+ // Check the marker-end property to make sure it is properly set to
+ // start with #
+ cy.get('.edgePath path').first().should('have.attr', 'marker-end')
+ .should('exist')
+ .and('include', 'url(#');
+ });
+ it('should handle default value false of arrowMarkerAbsolute', () => {
+ renderGraph(
+ `graph 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]
+ `,
+ { }
+ );
+
+ // Check the marker-end property to make sure it is properly set to
+ // start with #
+ cy.get('.edgePath path').first().should('have.attr', 'marker-end')
+ .should('exist')
+ .and('include', 'url(#');
+ });
+ it('should handle arrowMarkerAbsolute excplicitly set to false', () => {
+ renderGraph(
+ `graph 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]
+ `,
+ {
+ arrowMarkerAbsolute: false
+ }
+ );
+
+ // Check the marker-end property to make sure it is properly set to
+ // start with #
+ cy.get('.edgePath path').first().should('have.attr', 'marker-end')
+ .should('exist')
+ .and('include', 'url(#');
+ });
+ it('should handle arrowMarkerAbsolute excplicitly set to "false" as false', () => {
+ renderGraph(
+ `graph 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]
+ `,
+ {
+ arrowMarkerAbsolute: "false"
+ }
+ );
+
+ // Check the marker-end property to make sure it is properly set to
+ // start with #
+ cy.get('.edgePath path').first().should('have.attr', 'marker-end')
+ .should('exist')
+ .and('include', 'url(#');
+ });
+ it('should handle arrowMarkerAbsolute set to true', () => {
+ renderGraph(
+ `graph 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]
+ `,
+ {
+ arrowMarkerAbsolute: true
+ }
+ );
+
+ cy.get('.edgePath path').first().should('have.attr', 'marker-end')
+ .should('exist')
+ .and('include', 'url(http://localhost');
+ });
+ });
+});

cypress/integration/other/interaction.spec.js

@@ -16,7 +16,7 @@ describe('Interaction', () => {
  cy.viewport(1440, 1024);
  cy.visit(url);
  cy.get('body')
- .find('g#mermaid-dom-id-1Function')
+ .find('g[id="1Function"]')
  .click();
 
  cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
@@ -38,7 +38,7 @@ describe('Interaction', () => {
  cy.viewport(1440, 1024);
  cy.visit(url);
  cy.get('body')
- .find('g#mermaid-dom-id-2URL')
+ .find('g[id="2URL"]')
  .click();
 
  cy.location().should(location => {
@@ -108,7 +108,7 @@ describe('Interaction', () => {
  cy.viewport(1440, 1024);
  cy.visit(url);
  cy.get('body')
- .find('g#mermaid-dom-id-1Function')
+ .find('g[id="1Function"]')
  .click();
 
  cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
@@ -130,7 +130,7 @@ describe('Interaction', () => {
  cy.viewport(1440, 1024);
  cy.visit(url);
  cy.get('body')
- .find('g#mermaid-dom-id-2URL')
+ .find('g[id="2URL"]')
  .click();
 
  cy.location().should(location => {
@@ -200,7 +200,7 @@ describe('Interaction', () => {
  cy.viewport(1440, 1024);
  cy.visit(url);
  cy.get('body')
- .find('g#mermaid-dom-id-1Function')
+ .find('g[id="1Function"]')
  .click();
 
  cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');

cypress/integration/rendering/classDiagram.spec.js

@@ -19,6 +19,9 @@ describe('Class diagram', () => {
  Class01 : size()
  Class01 : int chimp
  Class01 : int gorilla
+ Class01 : -int privateChimp
+ Class01 : +int publicGorilla
+ Class01 : #int protectedMarmoset
  Class08 <--> C2: Cool label
  class Class10 {
  &lt;&lt;service&gt;&gt;
@@ -58,6 +61,25 @@ describe('Class diagram', () => {
  );
  cy.get('svg');
  });
+
+ it('should render a simple class diagram with different visibilities', () => {
+ imgSnapshotTest(
+ `
+ classDiagram
+ Class01 <|-- AveryLongClass : Cool
+ &lt;&lt;interface&gt;&gt; Class01
+ Class01 : -int privateMethod()
+ Class01 : +int publicMethod()
+ Class01 : #int protectedMethod()
+ Class01 : -int privateChimp
+ Class01 : +int publicGorilla
+ Class01 : #int protectedMarmoset
+ `,
+ {}
+ );
+ cy.get('svg');
+ });
+
  it('should render multiple class diagrams', () => {
  imgSnapshotTest(
  [

cypress/platform/e2e.html

@@ -4,9 +4,8 @@
  <link href="https://fonts.googleapis.com/css?family=Mansalva&display=swap" rel="stylesheet" />
  <style>
  body {
- /* font-family: 'Mansalva', cursive;
- font-family: 'Mansalva', cursive; */
- font-family: 'times';
+ /* font-family: 'Mansalva', cursive;*/
+ font-family: 'Mansalva', cursive;
  }
  /* .mermaid-main-font {
  font-family: "trebuchet ms", verdana, arial;

dist/index.html

@@ -408,9 +408,9 @@
 Class09 --|> Class07
 Class07 : equals()
 Class07 : Object[] elementData
-Class01 : size()
-Class01 : int chimp
-Class01 : int gorilla
+Class01 : #size()
+Class01 : -int chimp
+Class01 : +int gorilla
 Class08 <--> C2: Cool label
 class Class10 {
  &lt;&lt;service&gt;&gt;

package.json

@@ -78,9 +78,6 @@
  "husky": "^1.2.1",
  "identity-obj-proxy": "^3.0.0",
  "jest": "^24.9.0",
- "jest-environment-puppeteer": "^4.3.0",
- "jest-image-snapshot": "^2.11.1",
- "jest-puppeteer": "^4.3.0",
  "jison": "^0.4.18",
  "moment": "^2.23.0",
  "node-sass": "^4.12.0",

src/diagrams/class/classDiagram.spec.js

@@ -40,6 +40,21 @@ describe('class diagram, ', function() {
 
  parser.parse(str);
  });
+
+ it('should handle visibility for methods and members', function() {
+ const str =
+ 'classDiagram\n' +
+ 'class TestClass\n' +
+ 'TestClass : -int privateMember\n' +
+ 'TestClass : +int publicMember\n' +
+ 'TestClass : #int protectedMember\n' +
+ 'TestClass : -privateMethod()\n' +
+ 'TestClass : +publicMethod()\n' +
+ 'TestClass : #protectedMethod()\n';
+
+ parser.parse(str);
+ });
+
  it('should handle class definitions', function() {
  const str =
  'classDiagram\n' +

src/diagrams/class/parser/classDiagram.jison

@@ -36,7 +36,7 @@
 \s*o return 'AGGREGATION';
 \-\- return 'LINE';
 \.\. return 'DOTTED_LINE';
-":"[^#\n;]+ return 'LABEL';
+":"[^\n;]+ return 'LABEL';
 \- return 'MINUS';
 "." return 'DOT';
 \+ return 'PLUS';

src/diagrams/flowchart/flowDb.js

@@ -4,7 +4,8 @@ import { logger } from '../../logger';
 import utils from '../../utils';
 import { getConfig } from '../../config';
 
-const MERMAID_DOM_ID_PREFIX = 'mermaid-dom-id-';
+// const MERMAID_DOM_ID_PREFIX = 'mermaid-dom-id-';
+const MERMAID_DOM_ID_PREFIX = '';
 
 const config = getConfig();
 let vertices = {};

src/diagrams/flowchart/flowRenderer.js

@@ -460,8 +460,8 @@ export const draw = function(text, id) {
  subG = subGraphs[i];
 
  if (subG.title !== 'undefined') {
- const clusterRects = document.querySelectorAll('#' + id + ' #' + subG.id + ' rect');
- const clusterEl = document.querySelectorAll('#' + id + ' #' + subG.id);
+ const clusterRects = document.querySelectorAll('#' + id + ' [id="' + subG.id + '"] rect');
+ const clusterEl = document.querySelectorAll('#' + id + ' [id="' + subG.id + '"]');
 
  const xPos = clusterRects[0].x.baseVal.value;
  const yPos = clusterRects[0].y.baseVal.value;
@@ -475,7 +475,7 @@ export const draw = function(text, id) {
 
  // Add label rects for non html labels
  if (!conf.htmlLabels) {
- const labels = document.querySelectorAll('#' + id + ' .edgeLabel .label');
+ const labels = document.querySelectorAll('[id="' + id + '"] .edgeLabel .label');
  for (let k = 0; k < labels.length; k++) {
  const label = labels[k];
 

src/diagrams/flowchart/parser/flow-singlenode.spec.js

@@ -168,7 +168,7 @@ describe('[Singlenodes] when parsing', () => {
  const edges = flow.parser.yy.getEdges();
 
  expect(edges.length).toBe(0);
- expect(vert['mermaid-dom-id-1'].text).toBe('1');
+ expect(vert['1'].text).toBe('1');
  });
 
  it('should handle a single node with a single digit in a subgraph', function() {
@@ -180,7 +180,7 @@ describe('[Singlenodes] when parsing', () => {
  const edges = flow.parser.yy.getEdges();
 
  expect(edges.length).toBe(0);
- expect(vert['mermaid-dom-id-1'].text).toBe('1');
+ expect(vert['1'].text).toBe('1');
  });
 
  it('should handle a single node with alphanumerics starting on a num', function() {
@@ -191,7 +191,7 @@ describe('[Singlenodes] when parsing', () => {
  const edges = flow.parser.yy.getEdges();
 
  expect(edges.length).toBe(0);
- expect(vert['mermaid-dom-id-1id'].styles.length).toBe(0);
+ expect(vert['1id'].styles.length).toBe(0);
  });
 
  it('should handle a single node with alphanumerics containing a minus sign', function() {

src/diagrams/flowchart/parser/subgraph.spec.js

@@ -83,7 +83,7 @@ describe('when parsing subgraphs', function() {
  const subgraph = subgraphs[0];
  expect(subgraph.nodes.length).toBe(1);
  expect(subgraph.nodes[0]).toBe('A');
- expect(subgraph.id).toBe('mermaid-dom-id-1test');
+ expect(subgraph.id).toBe('1test');
  });
 
  it('should handle subgraphs1', function() {

src/diagrams/state/stateRenderer.js

@@ -92,8 +92,6 @@ export const draw = function(text, id) {
  const padding = conf.padding;
  const bounds = diagram.node().getBBox();
 
- console.warn(bounds);
-
  const width = bounds.width + padding * 2;
  const height = bounds.height + padding * 2;
 

src/mermaidAPI.js

@@ -585,23 +585,23 @@ const render = function(id, txt, cb, container) {
  .selectAll('foreignobject > *')
  .attr('xmlns', 'http://www.w3.org/1999/xhtml');
 
- let url = '';
- if (config.arrowMarkerAbsolute) {
- url =
- window.location.protocol +
- '//' +
- window.location.host +
- window.location.pathname +
- window.location.search;
- url = url.replace(/\(/g, '\\(');
- url = url.replace(/\)/g, '\\)');
- }
+ // if (config.arrowMarkerAbsolute) {
+ // url =
+ // window.location.protocol +
+ // '//' +
+ // window.location.host +
+ // window.location.pathname +
+ // window.location.search;
+ // url = url.replace(/\(/g, '\\(');
+ // url = url.replace(/\)/g, '\\)');
+ // }
 
  // Fix for when the base tag is used
- let svgCode = d3
- .select('#d' + id)
- .node()
- .innerHTML.replace(/url\(#arrowhead/g, 'url(' + url + '#arrowhead', 'g');
+ let svgCode = d3.select('#d' + id).node().innerHTML;
+
+ if (!config.arrowMarkerAbsolute || config.arrowMarkerAbsolute === 'false') {
+ svgCode = svgCode.replace(/marker-end="url\(.*?#/g, 'marker-end="url(#', 'g');
+ }
 
  svgCode = decodeEntities(svgCode);