marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-15 05:19:58 +02:00
Code Issues Packages Projects Releases Wiki Activity

#1676 Fix for additonal usecases for flowchart

Browse Source
This commit is contained in:
Ashish Jain
2020-09-16 21:53:17 +02:00
parent c679d18888
commit a26c9fca1e
4 changed files with 77 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,44 +1,89 @@
/* eslint-env jest */
describe('Interaction', () => {
describe('Interaction - security level loose', () => {
it('should handle a click on a node with a bound function', () => {
it('Graph: should handle a click on a node with a bound function', () => {
const url = 'http://localhost:9000/click_security_loose.html';
cy.viewport(1440, 1024);
cy.visit(url);
cy.get('body')
.find('g#Function')
.find('g#flowchart-Function-2')
.click();
cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
});
it('should handle a click on a node with a bound function where the node starts with a number', () => {
it('Graph: should handle a click on a node with a bound function where the node starts with a number', () => {
const url = 'http://localhost:9000/click_security_loose.html';
cy.viewport(1440, 1024);
cy.visit(url);
cy.get('body')
.find('g[id="1Function"]')
.find('g[id="flowchart-1Function-6"]')
.click();
cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
});
it('should handle a click on a node with a bound url', () => {
it('Graph: should handle a click on a node with a bound url', () => {
const url = 'http://localhost:9000/click_security_loose.html';
cy.viewport(1440, 1024);
cy.visit(url);
cy.get('body')
.find('g#URL')
.find('#flowchart-URL-3')
.click();
cy.location().should(location => {
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
});
});
it('should handle a click on a node with a bound url where the node starts with a number', () => {
it('Graph: should handle a click on a node with a bound url where the node starts with a number', () => {
const url = 'http://localhost:9000/click_security_loose.html';
cy.viewport(1440, 1024);
cy.visit(url);
cy.get('body')
.find('g[id="2URL"]')
.find('g[id="flowchart-2URL-7"]')
.click();
cy.location().should(location => {
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
});
});
it('Flowchart-v2: should handle a click on a node with a bound function', () => {
const url = 'http://localhost:9000/click_security_loose.html';
cy.viewport(1440, 1024);
cy.visit(url);
cy.get('body')
.find('g#flowchart-Function-10')
.click();
cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
});
it('Flowchart-v2: should handle a click on a node with a bound function where the node starts with a number', () => {
const url = 'http://localhost:9000/click_security_loose.html';
cy.viewport(1440, 1024);
cy.visit(url);
cy.get('body')
.find('g[id="flowchart-1Function-14"]')
.click();
cy.get('.created-by-click').should('have.text', 'Clicked By Flow');
});
it('Flowchart-v2: should handle a click on a node with a bound url', () => {
const url = 'http://localhost:9000/click_security_loose.html';
cy.viewport(1440, 1024);
cy.visit(url);
cy.get('body')
.find('#flowchart-URL-11')
.click();
cy.location().should(location => {
expect(location.href).to.eq('http://localhost:9000/webpackUsage.html');
});
});
it('Flowchart-v2: should handle a click on a node with a bound url where the node starts with a number', () => {
const url = 'http://localhost:9000/click_security_loose.html';
cy.viewport(1440, 1024);
cy.visit(url);
cy.get('body')
.find('g[id="flowchart-2URL-15"]')
.click();
cy.location().should(location => {
@@ -120,7 +165,7 @@ describe('Interaction', () => {
cy.viewport(1440, 1024);
cy.visit(url);
cy.get('body')
.find('g#Function')
.find('g#flowchart-Function-2')
.click();
cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
@@ -130,7 +175,7 @@ describe('Interaction', () => {
cy.viewport(1440, 1024);
cy.visit(url);
cy.get('body')
.find('g[id="1Function"]')
.find('g[id="flowchart-1Function-6"]')
.click();
cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
@@ -140,7 +185,7 @@ describe('Interaction', () => {
cy.viewport(1440, 1024);
cy.visit(url);
cy.get('body')
.find('g#URL')
.find('g#flowchart-URL-3')
.click();
cy.location().should(location => {
@@ -152,7 +197,7 @@ describe('Interaction', () => {
cy.viewport(1440, 1024);
cy.visit(url);
cy.get('body')
.find('g[id="2URL"]')
.find('g[id="flowchart-2URL-7"]')
.click();
cy.location().should(location => {
@@ -208,31 +253,31 @@ describe('Interaction', () => {
describe('Interaction - security level other, missspelling', () => {
it('should handle a click on a node with a bound function', () => {
const url = 'http://localhost:9000/click_security_strict.html';
const url = 'http://localhost:9000/click_security_other.html';
cy.viewport(1440, 1024);
cy.visit(url);
cy.get('body')
.find('g#Function')
.find('g#flowchart-Function-2')
.click();
cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
});
it('should handle a click on a node with a bound function where the node starts with a number', () => {
const url = 'http://localhost:9000/click_security_strict.html';
const url = 'http://localhost:9000/click_security_other.html';
cy.viewport(1440, 1024);
cy.visit(url);
cy.get('body')
.find('g[id="1Function"]')
.find('g[id="flowchart-1Function-6"]')
.click();
cy.get('.created-by-click').should('not.have.text', 'Clicked By Flow');
});
it('should handle a click on a node with a bound url', () => {
const url = 'http://localhost:9000/click_security_strict.html';
const url = 'http://localhost:9000/click_security_other.html';
cy.viewport(1440, 1024);
cy.visit(url);
cy.get('body')
.find('g#URL')
.find('g#flowchart-URL-3')
.click();
cy.location().should(location => {
@@ -241,7 +286,7 @@ describe('Interaction', () => {
});
it('should handle a click on a task with a bound function', () => {
const url = 'http://localhost:9000/click_security_strict.html';
const url = 'http://localhost:9000/click_security_other.html';
cy.viewport(1440, 1024);
cy.visit(url);
cy.get('body')
@@ -251,7 +296,7 @@ describe('Interaction', () => {
cy.get('.created-by-gant-click').should('not.have.text', 'Clicked By Gant cl2');
});
it('should handle a click on a task with a bound function', () => {
const url = 'http://localhost:9000/click_security_strict.html';
const url = 'http://localhost:9000/click_security_other.html';
cy.viewport(1440, 1024);
cy.visit(url);
cy.get('body')

4
cypress/platform/click_security_loose.html
View File

@@ -29,13 +29,13 @@
flowchart TB
Function-->URL
click Function clickByFlow "Add a div"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
click URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
</div>
<div id="FirstLine" class="mermaid">
flowchart TB
1Function--->2URL
click 1Function clickByFlow "Add a div"
click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>"
click 2URL "http://localhost:9000/webpackUsage.html" "Visit <strong>mermaid docs</strong>" _self
</div>
<div id="FirstLine" class="mermaid">

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

@@ -226,7 +226,7 @@ export const setDirection = function(dir) {
*/
export const setClass = function(ids, className) {
ids.split(',').forEach(function(_id) {
let id = _id;
let id = version === 'gen-1' ? lookUpDomId(_id) : _id;
// if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
if (typeof vertices[id] !== 'undefined') {
vertices[id].classes.push(className);
@@ -241,7 +241,7 @@ export const setClass = function(ids, className) {
const setTooltip = function(ids, tooltip) {
ids.split(',').forEach(function(id) {
if (typeof tooltip !== 'undefined') {
tooltips[id] = common.sanitizeText(tooltip, config);
tooltips[version === 'gen-1' ? lookUpDomId(id) : id] = common.sanitizeText(tooltip, config);
}
});
};
@@ -280,8 +280,6 @@ const setClickFun = function(id, functionName) {
*/
export const setLink = function(ids, linkStr, tooltip, target) {
ids.split(',').forEach(function(id) {
// let domId = lookUpDomId(id);
// if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
if (typeof vertices[id] !== 'undefined') {
vertices[id].link = utils.formatUrl(linkStr, config);
vertices[id].linkTarget = target;

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

@@ -143,7 +143,7 @@ export const addVertices = function(vert, g, svgId) {
ry: radious,
class: classStr,
style: styles.style,
id: vertex.id
id: flowDb.lookUpDomId(vertex.id)
});
});
};
@@ -425,10 +425,13 @@ export const draw = function(text, id) {
// reposition labels
for (i = 0; i < subGraphs.length; i++) {
subG = subGraphs[i];
if (subG.title !== 'undefined') {
const clusterRects = document.querySelectorAll('#' + id + ' [id="' + subG.id + '"] rect');
const clusterEl = document.querySelectorAll('#' + id + ' [id="' + subG.id + '"]');
const clusterRects = document.querySelectorAll(
'#' + id + ' [id="' + flowDb.lookUpDomId(subG.id) + '"] rect'
);
const clusterEl = document.querySelectorAll(
'#' + id + ' [id="' + flowDb.lookUpDomId(subG.id) + '"]'
);
const xPos = clusterRects[0].x.baseVal.value;
const yPos = clusterRects[0].y.baseVal.value;
@@ -470,7 +473,7 @@ export const draw = function(text, id) {
const vertex = vert[key];
if (vertex.link) {
const node = select('#' + id + ' [id="' + key + '"]');
const node = select('#' + id + ' [id="' + flowDb.lookUpDomId(key) + '"]');
if (node) {
const link = document.createElementNS('http://www.w3.org/2000/svg', 'a');
link.setAttributeNS('http://www.w3.org/2000/svg', 'class', vertex.classes.join(' '));