marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-18 06:49:47 +02:00
Code Issues Packages 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
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"> <div class="mermaid">
stateDiagram stateDiagram
accDescription This is a state diagram showing one state
State1 State1
</div> </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') { if (typeof svg.insert == 'undefined') {
return; 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(); let description = yy_parser.getAccDescription();
svg.attr('role', 'img').attr('aria-labelledby', 'chart-title-' + id + ' chart-desc-' + id); svg.attr('role', 'img').attr('aria-labelledby', 'chart-title-' + id + ' chart-desc-' + id);
svg svg

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

@@ -20,6 +20,7 @@
%x STATE_ID %x STATE_ID
%x ALIAS %x ALIAS
%x SCALE %x SCALE
%x accDescription
%x NOTE %x NOTE
%x NOTE_ID %x NOTE_ID
%x NOTE_TEXT %x NOTE_TEXT
@@ -58,6 +59,9 @@
<SCALE>\d+ return 'WIDTH'; <SCALE>\d+ return 'WIDTH';
<SCALE>\s+"width" {this.popState();} <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'); } <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>.*"<<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';} <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 | note NOTE_TEXT AS ID
| directive | directive
| direction | direction
| accDescription description_value { $$=$2.trim();yy.setAccDescription($$); }
; ;
directive directive

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

@@ -115,6 +115,16 @@ let startCnt = 0;
let endCnt = 0; // eslint-disable-line let endCnt = 0; // eslint-disable-line
// let stateCnt = 0; // 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. * Function called by parser when a node definition has been found.
* *
@@ -280,4 +290,6 @@ export default {
getRootDocV2, getRootDocV2,
extract, extract,
trimColon, trimColon,
getAccDescription,
setAccDescription,
}; };

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

@@ -24,6 +24,20 @@ describe('state diagram, ', function () {
`; `;
parser.parse(str); 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 () { it('simple with directive', function () {
const str = `%%{init: {'logLevel': 0 }}%% 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 { log } from '../../logger';
import { configureSvgSize } from '../../utils'; import { configureSvgSize } from '../../utils';
import common from '../common/common'; import common from '../common/common';
import addSVGAccessibilityFields from '../../accessibility';
const conf = {}; const conf = {};
export const setConf = function (cnf) { export const setConf = function (cnf) {
@@ -336,6 +337,7 @@ export const draw = function (text, id) {
label.insertBefore(rect, label.firstChild); label.insertBefore(rect, label.firstChild);
// } // }
} }
addSVGAccessibilityFields(parser.yy, svg, id);
}; };
export default { 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 { drawState, addTitleAndBox, drawEdge } from './shapes';
import { getConfig } from '../../config'; import { getConfig } from '../../config';
import { configureSvgSize } from '../../utils'; import { configureSvgSize } from '../../utils';
import addSVGAccessibilityFields from '../../accessibility';
parser.yy = stateDb; parser.yy = stateDb;
@@ -97,6 +98,7 @@ export const draw = function (text, id) {
'viewBox', 'viewBox',
`${bounds.x - conf.padding} ${bounds.y - conf.padding} ` + width + ' ' + height `${bounds.x - conf.padding} ${bounds.y - conf.padding} ` + width + ' ' + height
); );
addSVGAccessibilityFields(parser.yy, diagram, id);
}; };
const getLabelWidth = (text) => { const getLabelWidth = (text) => {
return text ? text.length * conf.fontSizeFactor : 1; return text ? text.length * conf.fontSizeFactor : 1;