Merge pull request #1084 from mermaid-js/bug/1078_handling_of_arrowMarkerAbsolute

Bug/1078 handling of arrow marker absolute

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/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: 'Mansalva', cursive; */
+        font-family: 'Mansalva', cursive;
-        font-family: 'times';
       }
       /* .mermaid-main-font {
         font-family: "trebuchet ms", verdana, arial;

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 clusterRects = document.querySelectorAll('#' + id + ' [id="' + subG.id + '"] rect');
-      const clusterEl = document.querySelectorAll('#' + id + ' #' + subG.id);
+      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) {
-  if (config.arrowMarkerAbsolute) {
+  //   url =
-    url =
+  //     window.location.protocol +
-      window.location.protocol +
+  //     '//' +
-      '//' +
+  //     window.location.host +
-      window.location.host +
+  //     window.location.pathname +
-      window.location.pathname +
+  //     window.location.search;
-      window.location.search;
+  //   url = url.replace(/\(/g, '\\(');
-    url = url.replace(/\(/g, '\\(');
+  //   url = url.replace(/\)/g, '\\)');
-    url = url.replace(/\)/g, '\\)');
+  // }
-  }
 
   // Fix for when the base tag is used
-  let svgCode = d3
+  let svgCode = d3.select('#d' + id).node().innerHTML;
-    .select('#d' + id)
+
-    .node()
+  if (!config.arrowMarkerAbsolute || config.arrowMarkerAbsolute === 'false') {
-    .innerHTML.replace(/url\(#arrowhead/g, 'url(' + url + '#arrowhead', 'g');
+    svgCode = svgCode.replace(/marker-end="url\(.*?#/g, 'marker-end="url(#', 'g');
+  }
 
   svgCode = decodeEntities(svgCode);