Merge pull request #2913 from lindseywild/feat/flowchart-accessibility

feat: adds title and description to flowchart
This commit is contained in:
Knut Sveidqvist 2022-04-12 07:09:10 +02:00 committed by GitHub
commit 4f833db2d0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 88 additions and 26 deletions

View File

@ -40,6 +40,8 @@ __The following are some examples of the diagrams, charts and graphs that can be
```
flowchart LR
title Example flow chart
accDescripton Flow chart showing examples of node usage
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
@ -47,6 +49,8 @@ C -->|Two| E[Result 2]
```
```mermaid
flowchart LR
title Example flow chart
accDescripton Flow chart showing examples of node usage
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]

View File

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mermaid Quick Test Page</title>
<title>Mermaid Quick Flowchart Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
<style>
div.mermaid {
@ -220,6 +220,8 @@
<h3>graph</h3>
<div class="mermaid">
graph TD
title What to buy
accDescription Options of what to buy with Christmas money
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me thinksssssx<br/>sssssssssssssssssssuuu<br />tttsssssssssssssssssssssss}
C -->|One| D[Laptop]
@ -230,8 +232,8 @@
<h3>flowchart</h3>
<div class="mermaid">
flowchart TD
title Christmas
accDescription Get money
title What to buy
accDescription Options of what to buy with Christmas money
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me thinksssssx<br/>sssssssssssssssssssuuu<br />tttsssssssssssssssssssssss}
C -->|One| D[Laptop]

View File

@ -872,4 +872,4 @@
</script>
</body>
</html>
</html>

View File

@ -17,16 +17,36 @@ let tooltips = {};
let subCount = 0;
let firstGraphFlag = true;
let direction;
let title = 'Flow chart';
let description = '';
let version; // As in graph
// Functions to be run after graph rendering
let funs = [];
const sanitizeText = (txt) => common.sanitizeText(txt, config);
export const parseDirective = function (statement, context, type) {
mermaidAPI.parseDirective(this, statement, context, type);
};
const setTitle = function (txt) {
title = sanitizeText(txt);
};
const getTitle = function () {
return title;
};
const setAccDescription = function (txt) {
description = sanitizeText(txt);
};
const getAccDescription = function () {
return description;
};
/**
* Function to lookup domId from id in the graph definition.
*
@ -77,7 +97,7 @@ export const addVertex = function (_id, text, type, style, classes, dir, props =
vertexCounter++;
if (typeof text !== 'undefined') {
config = configApi.getConfig();
txt = common.sanitizeText(text.trim(), config);
txt = sanitizeText(text.trim());
// strip quotes if string starts and ends with a quote
if (txt[0] === '"' && txt[txt.length - 1] === '"') {
@ -132,7 +152,7 @@ export const addSingleLink = function (_start, _end, type, linktext) {
linktext = type.text;
if (typeof linktext !== 'undefined') {
edge.text = common.sanitizeText(linktext.trim(), config);
edge.text = sanitizeText(linktext.trim());
// strip quotes if string starts and exnds with a quote
if (edge.text[0] === '"' && edge.text[edge.text.length - 1] === '"') {
@ -255,7 +275,7 @@ export const setClass = function (ids, className) {
const setTooltip = function (ids, tooltip) {
ids.split(',').forEach(function (id) {
if (typeof tooltip !== 'undefined') {
tooltips[version === 'gen-1' ? lookUpDomId(id) : id] = common.sanitizeText(tooltip, config);
tooltips[version === 'gen-1' ? lookUpDomId(id) : id] = sanitizeText(tooltip);
}
});
};
@ -488,7 +508,7 @@ export const addSubGraph = function (_id, list, _title) {
id = id || 'subGraph' + subCount;
// if (id[0].match(/\d/)) id = lookUpDomId(id);
title = title || '';
title = common.sanitizeText(title, config);
title = sanitizeText(title);
subCount = subCount + 1;
const subGraph = { id: id, nodes: nodeList, title: title.trim(), classes: [], dir };
@ -736,6 +756,10 @@ const makeUniq = (sg, allSubgraphs) => {
export default {
parseDirective,
defaultConfig: () => configApi.defaultConfig.flowchart,
setTitle,
getTitle,
getAccDescription,
setAccDescription,
addVertex,
lookUpDomId,
addLink,

View File

@ -10,6 +10,7 @@ import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';
import { log } from '../../logger';
import common, { evaluate } from '../common/common';
import { interpolateToCurve, getStylesFromArray, configureSvgSize } from '../../utils';
import addSVGAccessibilityFields from '../../accessibility';
const conf = {};
export const setConf = function (cnf) {
@ -181,7 +182,7 @@ export const addVertices = function (vert, g, svgId, root, doc) {
};
/**
* Add edges to graph based on parsed graph defninition
* Add edges to graph based on parsed graph definition
*
* @param {object} edges The edges to add to the graph
* @param {object} g The graph object
@ -380,7 +381,7 @@ export const draw = function (text, id) {
const rankSpacing = conf.rankSpacing || 50;
const securityLevel = getConfig().securityLevel;
// Handle root and ocument for when rendering in sanbox mode
// Handle root and document for when rendering in sandbox mode
let sandboxElement;
if (securityLevel === 'sandbox') {
sandboxElement = select('#i' + id);
@ -416,7 +417,7 @@ export const draw = function (text, id) {
flowDb.addVertex(subG.id, subG.title, 'group', undefined, subG.classes, subG.dir);
}
// Fetch the verices/nodes and edges/links from the parsed graph definition
// Fetch the vertices/nodes and edges/links from the parsed graph definition
const vert = flowDb.getVertices();
const edges = flowDb.getEdges();
@ -444,6 +445,9 @@ export const draw = function (text, id) {
const svg = root.select(`[id="${id}"]`);
svg.attr('xmlns:xlink', 'http://www.w3.org/1999/xlink');
// Adds title and description to the flow chart
addSVGAccessibilityFields(parser.yy, svg, id);
// Run the renderer. This is what draws the final graph.
const element = root.select('#' + id + ' g');
render(element, g, ['point', 'circle', 'cross'], 'flowchart', id);

View File

@ -11,6 +11,7 @@ import { log } from '../../logger';
import common, { evaluate } from '../common/common';
import { interpolateToCurve, getStylesFromArray, configureSvgSize } from '../../utils';
import flowChartShapes from './flowChartShapes';
import addSVGAccessibilityFields from '../../accessibility';
const conf = {};
export const setConf = function (cnf) {
@ -158,7 +159,7 @@ export const addVertices = function (vert, g, svgId, root, _doc) {
};
/**
* Add edges to graph based on parsed graph defninition
* Add edges to graph based on parsed graph definition
*
* @param {object} edges The edges to add to the graph
* @param {object} g The graph object
@ -350,7 +351,7 @@ export const draw = function (text, id) {
flowDb.addVertex(subG.id, subG.title, 'group', undefined, subG.classes);
}
// Fetch the verices/nodes and edges/links from the parsed graph definition
// Fetch the vertices/nodes and edges/links from the parsed graph definition
const vert = flowDb.getVertices();
log.warn('Get vertices', vert);
@ -426,6 +427,9 @@ export const draw = function (text, id) {
log.warn(g);
// Adds title and description to the flow chart
addSVGAccessibilityFields(parser.yy, svg, id);
// Run the renderer. This is what draws the final graph.
const element = root.select('#' + id + ' g');
render(element, g);

View File

@ -7,6 +7,8 @@
/* lexical grammar */
%lex
%x string
%x title
%x accDescription
%x dir
%x vertex
%x click
@ -26,6 +28,10 @@
<arg_directive>((?:(?!\}\%\%).|\n)*) return 'arg_directive';
\%\%(?!\{)[^\n]* /* skip comments */
[^\}]\%\%[^\n]* /* skip comments */
title { this.begin("title");return 'title'; }
<title>(?!\n|;|#)*[^\n]* { this.popState(); return "title_value"; }
accDescription { this.begin("accDescription");return 'accDescription'; }
<accDescription>(?!\n|;|#)*[^\n]* { this.popState(); return "description_value"; }
["] this.begin("string");
<string>["] this.popState();
<string>[^"]* return "STR";
@ -337,6 +343,8 @@ statement
| subgraph separator document end
{$$=yy.addSubGraph(undefined,$3,undefined);}
| direction
| title title_value { $$=$2.trim();yy.setTitle($$); }
| accDescription description_value { $$=$2.trim();yy.setAccDescription($$); }
;
separator: NEWLINE | SEMI | EOF ;

View File

@ -6,13 +6,13 @@ setConfig({
securityLevel: 'strict',
});
describe('when parsing ', function () {
describe('parsing a flow chart', function () {
beforeEach(function () {
flow.parser.yy = flowDb;
flow.parser.yy.clear();
});
it('it should handle a trailing whitespaces after statememnts', function () {
it('should handle a trailing whitespaces after statememnts', function () {
const res = flow.parser.parse('graph TD;\n\n\n %% Comment\n A-->B; \n B-->C;');
const vert = flow.parser.yy.getVertices();
@ -80,47 +80,47 @@ describe('when parsing ', function () {
flow.parser.yy.clear();
};
it("it should be able to parse a '.'", function () {
it("should be able to parse a '.'", function () {
charTest('.');
charTest('Start 103a.a1');
});
// it('it should be able to parse text containing \'_\'', function () {
// it('should be able to parse text containing \'_\'', function () {
// charTest('_')
// })
it("it should be able to parse a ':'", function () {
it("should be able to parse a ':'", function () {
charTest(':');
});
it("it should be able to parse a ','", function () {
it("should be able to parse a ','", function () {
charTest(',');
});
it("it should be able to parse text containing '-'", function () {
it("should be able to parse text containing '-'", function () {
charTest('a-b');
});
it("it should be able to parse a '+'", function () {
it("should be able to parse a '+'", function () {
charTest('+');
});
it("it should be able to parse a '*'", function () {
it("should be able to parse a '*'", function () {
charTest('*');
});
it("it should be able to parse a '<'", function () {
it("should be able to parse a '<'", function () {
charTest('<', '&lt;');
});
// it("it should be able to parse a '>'", function() {
// it("should be able to parse a '>'", function() {
// charTest('>', '&gt;');
// });
// it("it should be able to parse a '='", function() {
// it("should be able to parse a '='", function() {
// charTest('=', '&equals;');
// });
it("it should be able to parse a '&'", function () {
it("should be able to parse a '&'", function () {
charTest('&');
});
});
@ -146,6 +146,7 @@ describe('when parsing ', function () {
const classes = flow.parser.yy.getClasses();
expect(vertices['A'].id).toBe('A');
});
it('should be possible to use numbers as labels', function () {
let statement = '';
@ -155,4 +156,19 @@ describe('when parsing ', function () {
const classes = flow.parser.yy.getClasses();
expect(vertices['1'].id).toBe('1');
});
it('should add title and description to flow chart', function () {
const flowChart = `graph LR
title Big decisions
accDescription Flow chart of the decision making process
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
`;
flow.parser.parse(flowChart);
expect(flow.parser.yy.getTitle()).toBe('Big decisions');
expect(flow.parser.yy.getAccDescription()).toBe('Flow chart of the decision making process');
});
});