GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-14 06:43:25 +08:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
Bug/1078 handling of arrow marker absolute
This commit is contained in:
Knut Sveidqvist 2019-11-20 21:50:50 +01:00 committed by GitHub
commit ad2802d8e8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 137 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
cypress/helpers/util.js
View File

@ -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);
};

100
cypress/integration/other/configuration.spec.js Normal file
View File

@ -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');
});
});
});

10
cypress/integration/other/interaction.spec.js
View File

@ -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');

5
cypress/platform/e2e.html
View File

@ -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;

3
src/diagrams/flowchart/flowDb.js
View File

@ -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 = {};

6
src/diagrams/flowchart/flowRenderer.js
View File

@ -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];

6
src/diagrams/flowchart/parser/flow-singlenode.spec.js
View File

@ -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() {

2
src/diagrams/flowchart/parser/subgraph.spec.js
View File

@ -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() {

2
src/diagrams/state/stateRenderer.js
View File

@ -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;

30
src/mermaidAPI.js
View File

@ -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);