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

Add accDescription field to state diagrams

Browse Source
This commit is contained in:
Tali Herzka 2022-04-07 21:35:13 +00:00 committed by GitHub
parent 0c5252594e
commit 49409241bc
12 changed files with 506 additions and 275 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
demos/index.html
View File

@ -680,6 +680,7 @@
<div class="mermaid">
stateDiagram
accDescription This is a state diagram showing one state
State1
</div>

42
demos/state.html Normal file
View File

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
<style>
div.mermaid {
/* font-family: 'trebuchet ms', verdana, arial; */
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<body>
<div class="mermaid">
stateDiagram
accDescription This is an accessible description
State1
</div>
<script src="./mermaid.js"></script>
<script>
mermaid.initialize({
theme: 'forest',
// themeCSS: '.node rect { fill: red; }',
logLevel: 3,
securityLevel: 'loose',
flowchart: { curve: 'basis' },
gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50 },
// sequenceDiagram: { actorMargin: 300 } // deprecated
});
</script>
</body>
</html>

347
dist/mermaid.core.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/mermaid.core.js.map vendored
View File

File diff suppressed because one or more lines are too long

347
dist/mermaid.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/mermaid.js.map vendored
View File

File diff suppressed because one or more lines are too long

5
src/accessibility.js
View File

@ -12,7 +12,10 @@ export default function addSVGAccessibilityFields(yy_parser, svg, id) {
if (typeof svg.insert == 'undefined') {
return;
}
let title_string = yy_parser.getTitle();
let title_string = ''
if (yy_parser.getTitle !== undefined) {
title_string = yy_parser.getTitle();
};
let description = yy_parser.getAccDescription();
svg.attr('role', 'img').attr('aria-labelledby', 'chart-title-' + id + ' chart-desc-' + id);
svg

5
src/diagrams/state/parser/stateDiagram.jison
View File

@ -20,6 +20,7 @@
%x STATE_ID
%x ALIAS
%x SCALE
%x accDescription
%x NOTE
%x NOTE_ID
%x NOTE_TEXT
@ -58,6 +59,9 @@
<SCALE>\d+ return 'WIDTH';
<SCALE>\s+"width" {this.popState();}
accDescription { this.begin("accDescription");return 'accDescription'; }
<accDescription>(?!\n|;|#)*[^\n]* { this.popState(); return "description_value"; }
<INITIAL,struct>"state"\s+ { /*console.log('Starting STATE zxzx'+yy.getDirection());*/this.pushState('STATE'); }
<STATE>.*"<<fork>>" {this.popState();yytext=yytext.slice(0,-8).trim(); /*console.warn('Fork Fork: ',yytext);*/return 'FORK';}
<STATE>.*"<<join>>" {this.popState();yytext=yytext.slice(0,-8).trim();/*console.warn('Fork Join: ',yytext);*/return 'JOIN';}
@ -193,6 +197,7 @@ statement
| note NOTE_TEXT AS ID
| directive
| direction
| accDescription description_value { $$=$2.trim();yy.setAccDescription($$); }
;
directive

12
src/diagrams/state/stateDb.js
View File

@ -115,6 +115,16 @@ let startCnt = 0;
let endCnt = 0; // eslint-disable-line
// let stateCnt = 0;
let description = '';
const setAccDescription = function (txt) {
description = txt;
};
const getAccDescription = function () {
return description;
};
/**
* Function called by parser when a node definition has been found.
*
@ -280,4 +290,6 @@ export default {
getRootDocV2,
extract,
trimColon,
getAccDescription,
setAccDescription,
};

14
src/diagrams/state/stateDiagram.spec.js
View File

@ -24,6 +24,20 @@ describe('state diagram, ', function () {
`;
parser.parse(str);
const description = stateDb.getAccDescription();
expect(description).toBe('');
});
it.only('simple with accDescription', function () {
const str = `stateDiagram\n
accDescription a simple description of the diagram
State1 : this is another string
[*] --> State1
State1 --> [*]
`;
parser.parse(str);
const description = stateDb.getAccDescription();
expect(description).toBe('a simple description of the diagram');
});
it('simple with directive', function () {
const str = `%%{init: {'logLevel': 0 }}%%

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

@ -7,6 +7,7 @@ import { render } from '../../dagre-wrapper/index.js';
import { log } from '../../logger';
import { configureSvgSize } from '../../utils';
import common from '../common/common';
import addSVGAccessibilityFields from '../../accessibility';
const conf = {};
export const setConf = function (cnf) {
@ -336,6 +337,7 @@ export const draw = function (text, id) {
label.insertBefore(rect, label.firstChild);
// }
}
addSVGAccessibilityFields(parser.yy, svg, id);
};
export default {

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

@ -9,6 +9,7 @@ import { parser } from './parser/stateDiagram';
import { drawState, addTitleAndBox, drawEdge } from './shapes';
import { getConfig } from '../../config';
import { configureSvgSize } from '../../utils';
import addSVGAccessibilityFields from '../../accessibility';
parser.yy = stateDb;
@ -97,6 +98,7 @@ export const draw = function (text, id) {
'viewBox',
`${bounds.x - conf.padding} ${bounds.y - conf.padding} ` + width + ' ' + height
);
addSVGAccessibilityFields(parser.yy, diagram, id);
};
const getLabelWidth = (text) => {
return text ? text.length * conf.fontSizeFactor : 1;