Merge pull request #3075 from mermaid-js/3074_access
Separation between title and accessibility title (sometimes)
This commit is contained in:
commit
1148039c6b
|
@ -30,7 +30,54 @@
|
|||
|
||||
|
||||
|
||||
<div class="mermaid" style="width: 50%;">
|
||||
<div class="mermaid2" style="width: 50%;">
|
||||
journey
|
||||
title Adding journey diagram functionality to mermaid
|
||||
accTitle: Adding acc journey diagram functionality to mermaid
|
||||
accDescr {
|
||||
My multi-line description
|
||||
of the diagram
|
||||
}
|
||||
section Order from website
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 50%;">
|
||||
pie
|
||||
accTitle: My Pie Chart Accessibility Title
|
||||
accDescr: My Pie Chart Accessibility Description
|
||||
|
||||
title Key elements in Product X
|
||||
"Calcium" : 42.96
|
||||
"Potassium" : 50.05
|
||||
"Magnesium" : 10.01
|
||||
"Iron" : 5
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 50%;">
|
||||
gitGraph
|
||||
accTitle: My Gitgraph Accessibility Title
|
||||
accDescr: My Gitgraph Accessibility Description
|
||||
|
||||
commit
|
||||
commit
|
||||
branch develop
|
||||
checkout develop
|
||||
commit
|
||||
commit
|
||||
checkout main
|
||||
merge develop
|
||||
commit
|
||||
commit
|
||||
</div>
|
||||
<div class="mermaid" style="width: 50%;">
|
||||
sequenceDiagram
|
||||
title: My Sequence Diagram Title
|
||||
accTitle: My Acc Sequence Diagram
|
||||
accDescr: My Sequence Diagram Description
|
||||
|
||||
Alice->>John: Hello John, how are you?
|
||||
John-->>Alice: Great!
|
||||
Alice-)John: See you later!
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 50%;">
|
||||
graph TD
|
||||
A -->|000| B
|
||||
B -->|111| C
|
||||
|
@ -38,18 +85,23 @@ graph TD
|
|||
linkStyle 1 stroke:#ff3,stroke-width:4px,color:red;
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 100%;">
|
||||
journey
|
||||
title My working day
|
||||
section Go to work
|
||||
Make tea: 5: Me
|
||||
Go upstairs: 3: Me
|
||||
Do work: 1: Me, Cat
|
||||
section Go home
|
||||
Go downstairs: 5: Me
|
||||
Sit down: 5: Me
|
||||
journey
|
||||
accTitle: My User Journey Diagram
|
||||
accDescr: My User Journey Diagram Description
|
||||
|
||||
title My working day
|
||||
section Go to work
|
||||
Make tea: 5: Me
|
||||
Go upstairs: 3: Me
|
||||
Do work: 1: Me, Cat
|
||||
section Go home
|
||||
Go downstairs: 5: Me
|
||||
Sit down: 5: Me
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 100%;">
|
||||
requirementDiagram
|
||||
accTitle: My req Diagram
|
||||
accDescr: My req Diagram Description
|
||||
|
||||
requirement test_req {
|
||||
id: 1
|
||||
|
@ -89,6 +141,8 @@ requirementDiagram
|
|||
</div>
|
||||
<div class="mermaid2" style="width: 100%;">
|
||||
erDiagram
|
||||
accTitle: My er Diagram
|
||||
accDescr: My er Diagram Description
|
||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
CUSTOMER ||--o{ INVOICE : "liable for"
|
||||
|
@ -100,12 +154,16 @@ requirementDiagram
|
|||
</div>
|
||||
<div class="mermaid2" style="width: 100%;">
|
||||
graph TB
|
||||
accTitle: My flowchart
|
||||
accDescr: My flowchart Description
|
||||
subgraph One
|
||||
a1-->a2-->a3
|
||||
end
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 100%;">
|
||||
gantt
|
||||
accTitle: My gantt chart
|
||||
accDescr: My my gantt chart Description
|
||||
dateFormat YYYY-MM-DD
|
||||
axisFormat %d/%m
|
||||
title Adding GANTT diagram to mermaid
|
||||
|
@ -146,6 +204,8 @@ requirementDiagram
|
|||
</div>
|
||||
<div class="mermaid2" style="width: 100%;">
|
||||
classDiagram
|
||||
accTitle: My class diagram
|
||||
accDescr: My class diagram Description
|
||||
Class01 <|-- AveryLongClass : Cool
|
||||
Class09 --> C2 : Where am i?
|
||||
Class09 --* C3
|
||||
|
@ -162,6 +222,8 @@ class Class10 {
|
|||
</div>
|
||||
<div class="mermaid2" style="width: 100%;">
|
||||
stateDiagram
|
||||
accTitle: Apa
|
||||
accDescr: One that can climb better then any man
|
||||
[*] --> S1
|
||||
state "Some long name" as S1
|
||||
</div>
|
||||
|
|
|
@ -9,9 +9,9 @@ This is the API to be used when optionally handling the integration with the web
|
|||
using the default integration provided by mermaid.js.
|
||||
|
||||
The core of this api is the [**render**][2] function which, given a graph
|
||||
definition as text, renders the graph/diagram and returns an SVG element for the graph.
|
||||
definition as text, renders the graph/diagram and returns an svg element for the graph.
|
||||
|
||||
It is is then up to the user of the API to make use of the SVG, either insert it somewhere in the
|
||||
It is is then up to the user of the API to make use of the svg, either insert it somewhere in the
|
||||
page or do something completely different.
|
||||
|
||||
In addition to the render function, a number of behavioral configuration options are available.
|
||||
|
@ -1012,7 +1012,7 @@ Pushes in a directive to the configuration
|
|||
|
||||
## render
|
||||
|
||||
Function that renders an SVG with a graph from a chart definition. Usage example below.
|
||||
Function that renders an svg with a graph from a chart definition. Usage example below.
|
||||
|
||||
```javascript
|
||||
mermaidAPI.initialize({
|
||||
|
@ -1031,7 +1031,7 @@ $(function () {
|
|||
|
||||
- `id` **any** The id of the element to be rendered
|
||||
- `_txt` **any** The graph definition
|
||||
- `cb` **any** Callback which is called after rendering is finished with the SVG code as inparam.
|
||||
- `cb` **any** Callback which is called after rendering is finished with the svg code as inparam.
|
||||
- `container` **any** Selector to element in which a div with the graph temporarily will be
|
||||
inserted. In one is provided a hidden div will be inserted in the body of the page instead. The
|
||||
element will be removed when rendering is completed.
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
/**
|
||||
* This method will add a basic title and description element to a chart. The yy parser will need to
|
||||
* respond to getTitle and getAccDescription, where the title is the title element on the chart,
|
||||
* respond to getAccTitle and getAccDescription, where the title is the title element on the chart,
|
||||
* which is generally not displayed and the accDescription is the description element on the chart,
|
||||
* which is never displayed.
|
||||
*
|
||||
|
@ -15,7 +15,7 @@ export default function addSVGAccessibilityFields(yy_parser, svg, id) {
|
|||
return;
|
||||
}
|
||||
|
||||
let title_string = yy_parser.getTitle();
|
||||
let title_string = yy_parser.getAccTitle();
|
||||
let description = yy_parser.getAccDescription();
|
||||
svg.attr('role', 'img').attr('aria-labelledby', 'chart-title-' + id + ' chart-desc-' + id);
|
||||
svg
|
||||
|
|
|
@ -1,20 +1,22 @@
|
|||
import { sanitizeText as _sanitizeText } from './diagrams/common/common';
|
||||
import { getConfig } from './config';
|
||||
let title = '';
|
||||
let diagramTitle = '';
|
||||
let description = '';
|
||||
const sanitizeText = (txt) => _sanitizeText(txt, getConfig());
|
||||
|
||||
export const clear = function () {
|
||||
title = '';
|
||||
description = '';
|
||||
diagramTitle = '';
|
||||
};
|
||||
|
||||
export const setAccTitle = function (txt) {
|
||||
title = sanitizeText(txt).replace(/^\s+/g, '');
|
||||
};
|
||||
|
||||
export const getTitle = function () {
|
||||
return title;
|
||||
export const getAccTitle = function () {
|
||||
return title || diagramTitle;
|
||||
};
|
||||
|
||||
export const setAccDescription = function (txt) {
|
||||
|
@ -25,9 +27,19 @@ export const getAccDescription = function () {
|
|||
return description;
|
||||
};
|
||||
|
||||
export const setDiagramTitle = function (txt) {
|
||||
diagramTitle = sanitizeText(txt);
|
||||
};
|
||||
|
||||
export const getDiagramTitle = function () {
|
||||
return diagramTitle;
|
||||
};
|
||||
|
||||
export default {
|
||||
setAccTitle,
|
||||
getTitle,
|
||||
getAccTitle,
|
||||
setDiagramTitle,
|
||||
getDiagramTitle: getDiagramTitle,
|
||||
getAccDescription,
|
||||
setAccDescription,
|
||||
clear,
|
||||
|
|
|
@ -6,7 +6,7 @@ import utils from '../../utils';
|
|||
import mermaidAPI from '../../mermaidAPI';
|
||||
import {
|
||||
setAccTitle,
|
||||
getTitle,
|
||||
getAccTitle,
|
||||
getAccDescription,
|
||||
setAccDescription,
|
||||
clear as commonClear,
|
||||
|
@ -356,7 +356,7 @@ const setDirection = (dir) => {
|
|||
export default {
|
||||
parseDirective,
|
||||
setAccTitle,
|
||||
getTitle,
|
||||
getAccTitle,
|
||||
getAccDescription,
|
||||
setAccDescription,
|
||||
getConfig: () => configApi.getConfig().class,
|
||||
|
|
|
@ -550,7 +550,7 @@ foo()
|
|||
`;
|
||||
|
||||
parser.parse(str);
|
||||
expect(parser.yy.getTitle()).toBe('My Title');
|
||||
expect(parser.yy.getAccTitle()).toBe('My Title');
|
||||
expect(parser.yy.getAccDescription()).toBe('My Description');
|
||||
});
|
||||
it('should handle accTitle and multiline accDescr', function () {
|
||||
|
@ -565,7 +565,7 @@ foo()
|
|||
`;
|
||||
|
||||
parser.parse(str);
|
||||
expect(parser.yy.getTitle()).toBe('My Title');
|
||||
expect(parser.yy.getAccTitle()).toBe('My Title');
|
||||
expect(parser.yy.getAccDescription()).toBe('This is mu multi\nline description');
|
||||
});
|
||||
|
||||
|
|
|
@ -4,7 +4,7 @@ import * as configApi from '../../config';
|
|||
import common from '../common/common';
|
||||
import {
|
||||
setAccTitle,
|
||||
getTitle,
|
||||
getAccTitle,
|
||||
getAccDescription,
|
||||
setAccDescription,
|
||||
clear as commonClear,
|
||||
|
@ -94,7 +94,7 @@ export default {
|
|||
getRelationships,
|
||||
clear,
|
||||
setAccTitle,
|
||||
getTitle,
|
||||
getAccTitle,
|
||||
setAccDescription,
|
||||
getAccDescription,
|
||||
};
|
||||
|
|
|
@ -191,7 +191,7 @@ describe('when parsing ER diagram it...', function () {
|
|||
accDescr: this graph is about stuff
|
||||
${line1}`
|
||||
);
|
||||
expect(erDb.getTitle()).toBe('graph title');
|
||||
expect(erDb.getAccTitle()).toBe('graph title');
|
||||
expect(erDb.getAccDescription()).toBe('this graph is about stuff');
|
||||
});
|
||||
|
||||
|
@ -207,7 +207,7 @@ describe('when parsing ER diagram it...', function () {
|
|||
}\n
|
||||
${line1}`
|
||||
);
|
||||
expect(erDb.getTitle()).toBe('graph title');
|
||||
expect(erDb.getAccTitle()).toBe('graph title');
|
||||
expect(erDb.getAccDescription()).toBe('this graph is about stuff');
|
||||
});
|
||||
|
||||
|
|
|
@ -6,7 +6,7 @@ import mermaidAPI from '../../mermaidAPI';
|
|||
import { log } from '../../logger';
|
||||
import {
|
||||
setAccTitle,
|
||||
getTitle,
|
||||
getAccTitle,
|
||||
getAccDescription,
|
||||
setAccDescription,
|
||||
clear as commonClear,
|
||||
|
@ -747,7 +747,7 @@ export default {
|
|||
parseDirective,
|
||||
defaultConfig: () => configApi.defaultConfig.flowchart,
|
||||
setAccTitle,
|
||||
getTitle,
|
||||
getAccTitle,
|
||||
getAccDescription,
|
||||
setAccDescription,
|
||||
addVertex,
|
||||
|
|
|
@ -168,7 +168,7 @@ describe('parsing a flow chart', function () {
|
|||
`;
|
||||
|
||||
flow.parser.parse(flowChart);
|
||||
expect(flow.parser.yy.getTitle()).toBe('Big decisions');
|
||||
expect(flow.parser.yy.getAccTitle()).toBe('Big decisions');
|
||||
expect(flow.parser.yy.getAccDescription()).toBe('Flow chart of the decision making process');
|
||||
});
|
||||
it('should add accTitle and a multi line accDescr to flow chart', function () {
|
||||
|
@ -187,7 +187,7 @@ describe('parsing a flow chart', function () {
|
|||
`;
|
||||
|
||||
flow.parser.parse(flowChart);
|
||||
expect(flow.parser.yy.getTitle()).toBe('Big decisions');
|
||||
expect(flow.parser.yy.getAccTitle()).toBe('Big decisions');
|
||||
expect(flow.parser.yy.getAccDescription()).toBe(
|
||||
`Flow chart of the decision making process
|
||||
with a second line`
|
||||
|
|
|
@ -7,10 +7,12 @@ import mermaidAPI from '../../mermaidAPI';
|
|||
import common from '../common/common';
|
||||
import {
|
||||
setAccTitle,
|
||||
getTitle,
|
||||
getAccTitle,
|
||||
getAccDescription,
|
||||
setAccDescription,
|
||||
clear as commonClear,
|
||||
setDiagramTitle,
|
||||
getDiagramTitle,
|
||||
} from '../../commonDb';
|
||||
|
||||
let dateFormat = '';
|
||||
|
@ -642,7 +644,9 @@ export default {
|
|||
setTodayMarker,
|
||||
getTodayMarker,
|
||||
setAccTitle,
|
||||
getTitle,
|
||||
getAccTitle,
|
||||
setDiagramTitle,
|
||||
getDiagramTitle,
|
||||
setAccDescription,
|
||||
getAccDescription,
|
||||
addSection,
|
||||
|
|
|
@ -31,7 +31,7 @@ describe('when using the ganttDb', function () {
|
|||
it.each`
|
||||
fn | expected
|
||||
${'getTasks'} | ${[]}
|
||||
${'getTitle'} | ${''}
|
||||
${'getAccTitle'} | ${''}
|
||||
${'getAccDescription'} | ${''}
|
||||
${'getDateFormat'} | ${''}
|
||||
${'getAxisFormat'} | ${''}
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import moment from 'moment-mini';
|
||||
import { log } from '../../logger';
|
||||
import {
|
||||
select,
|
||||
scaleTime,
|
||||
|
@ -19,11 +20,9 @@ import addSVGAccessibilityFields from '../../accessibility';
|
|||
|
||||
parser.yy = ganttDb;
|
||||
export const setConf = function () {
|
||||
// const keys = Object.keys(cnf);
|
||||
// keys.forEach(function(key) {
|
||||
// conf[key] = cnf[key];
|
||||
// });
|
||||
log.debug('Something is calling, setConf, remove the call');
|
||||
};
|
||||
|
||||
let w;
|
||||
export const draw = function (text, id) {
|
||||
const conf = getConfig().gantt;
|
||||
|
@ -110,7 +109,7 @@ export const draw = function (text, id) {
|
|||
|
||||
svg
|
||||
.append('text')
|
||||
.text(parser.yy.getTitle())
|
||||
.text(parser.yy.getAccTitle())
|
||||
.attr('x', w / 2)
|
||||
.attr('y', conf.titleTopMargin)
|
||||
.attr('class', 'titleText');
|
||||
|
|
|
@ -128,7 +128,7 @@ statement
|
|||
| excludes {yy.setExcludes($1.substr(9));$$=$1.substr(9);}
|
||||
| includes {yy.setIncludes($1.substr(9));$$=$1.substr(9);}
|
||||
| todayMarker {yy.setTodayMarker($1.substr(12));$$=$1.substr(12);}
|
||||
| title {yy.setAccTitle($1.substr(6));$$=$1.substr(6);}
|
||||
| title {yy.setDiagramTitle($1.substr(6));$$=$1.substr(6);}
|
||||
| acc_title acc_title_value { $$=$2.trim();yy.setAccTitle($$); }
|
||||
| acc_descr acc_descr_value { $$=$2.trim();yy.setAccDescription($$); }
|
||||
| acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); } | section {yy.addSection($1.substr(8));$$=$1.substr(8);}
|
||||
|
|
|
@ -169,7 +169,7 @@ describe('when parsing a gantt diagram it', function () {
|
|||
|
||||
parser.parse(ganttString);
|
||||
|
||||
expect(ganttDb.getTitle()).toBe(expectedTitle);
|
||||
expect(ganttDb.getAccTitle()).toBe(expectedTitle);
|
||||
expect(ganttDb.getAccDescription()).toBe(expectedAccDescription);
|
||||
});
|
||||
it('should allow for a accessibility title and multiline description (accDescr)', function () {
|
||||
|
@ -187,7 +187,7 @@ row2`;
|
|||
|
||||
parser.parse(ganttString);
|
||||
|
||||
expect(ganttDb.getTitle()).toBe(expectedTitle);
|
||||
expect(ganttDb.getAccTitle()).toBe(expectedTitle);
|
||||
expect(ganttDb.getAccDescription()).toBe(expectedAccDescription);
|
||||
});
|
||||
});
|
||||
|
|
|
@ -6,7 +6,7 @@ import { getConfig } from '../../config';
|
|||
import common from '../common/common';
|
||||
import {
|
||||
setAccTitle,
|
||||
getTitle,
|
||||
getAccTitle,
|
||||
getAccDescription,
|
||||
setAccDescription,
|
||||
clear as commonClear,
|
||||
|
@ -413,7 +413,7 @@ export default {
|
|||
getDirection,
|
||||
getHead,
|
||||
setAccTitle,
|
||||
getTitle,
|
||||
getAccTitle,
|
||||
getAccDescription,
|
||||
setAccDescription,
|
||||
commitType,
|
||||
|
|
|
@ -660,7 +660,7 @@ describe('when parsing a gitGraph', function () {
|
|||
commit
|
||||
`;
|
||||
parser.parse(str);
|
||||
expect(parser.yy.getTitle()).toBe('This is a title');
|
||||
expect(parser.yy.getAccTitle()).toBe('This is a title');
|
||||
expect(parser.yy.getAccDescription()).toBe('This is a description');
|
||||
});
|
||||
it('should handle a title and a multiline description (accDescr)', () => {
|
||||
|
@ -673,7 +673,7 @@ describe('when parsing a gitGraph', function () {
|
|||
commit
|
||||
`;
|
||||
parser.parse(str);
|
||||
expect(parser.yy.getTitle()).toBe('This is a title');
|
||||
expect(parser.yy.getAccTitle()).toBe('This is a title');
|
||||
expect(parser.yy.getAccDescription()).toBe('This is a description\nusing multiple lines');
|
||||
});
|
||||
});
|
||||
|
|
|
@ -69,7 +69,7 @@ line
|
|||
statement
|
||||
:
|
||||
| txt value { yy.addSection($1,yy.cleanupValue($2)); }
|
||||
| title title_value { $$=$2.trim();yy.setPieTitle($$); }
|
||||
| title title_value { $$=$2.trim();yy.setDiagramTitle($$); }
|
||||
| acc_title acc_title_value { $$=$2.trim();yy.setAccTitle($$); }
|
||||
| acc_descr acc_descr_value { $$=$2.trim();yy.setAccDescription($$); }
|
||||
| acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); } | section {yy.addSection($1.substr(8));$$=$1.substr(8);}
|
||||
|
|
|
@ -56,7 +56,7 @@ pie
|
|||
"bat" : 40
|
||||
`);
|
||||
const sections = pieDb.getSections();
|
||||
const title = pieDb.getPieTitle();
|
||||
const title = pieDb.getDiagramTitle();
|
||||
const section1 = sections['ash'];
|
||||
expect(section1).toBe(60);
|
||||
expect(title).toBe('a 60/40 pie');
|
||||
|
@ -69,7 +69,7 @@ pie
|
|||
`);
|
||||
|
||||
const sections = pieDb.getSections();
|
||||
const title = pieDb.getPieTitle();
|
||||
const title = pieDb.getDiagramTitle();
|
||||
const description = pieDb.getAccDescription();
|
||||
const section1 = sections['ash'];
|
||||
expect(section1).toBe(60);
|
||||
|
@ -85,7 +85,7 @@ pie
|
|||
`);
|
||||
|
||||
const sections = pieDb.getSections();
|
||||
const title = pieDb.getPieTitle();
|
||||
const title = pieDb.getDiagramTitle();
|
||||
const description = pieDb.getAccDescription();
|
||||
const section1 = sections['ash'];
|
||||
expect(section1).toBe(60);
|
||||
|
@ -103,7 +103,7 @@ pie
|
|||
`);
|
||||
|
||||
const sections = pieDb.getSections();
|
||||
const title = pieDb.getPieTitle();
|
||||
const title = pieDb.getDiagramTitle();
|
||||
const description = pieDb.getAccDescription();
|
||||
const section1 = sections['ash'];
|
||||
expect(section1).toBe(60);
|
||||
|
|
|
@ -4,7 +4,9 @@ import * as configApi from '../../config';
|
|||
import common from '../common/common';
|
||||
import {
|
||||
setAccTitle,
|
||||
getTitle,
|
||||
getAccTitle,
|
||||
setDiagramTitle,
|
||||
getDiagramTitle,
|
||||
getAccDescription,
|
||||
setAccDescription,
|
||||
clear as commonClear,
|
||||
|
@ -52,15 +54,6 @@ const clear = function () {
|
|||
commonClear();
|
||||
};
|
||||
|
||||
export const setPieTitle = function (txt) {
|
||||
let sanitizedText = common.sanitizeText(txt, configApi.getConfig());
|
||||
title = sanitizedText;
|
||||
};
|
||||
|
||||
export const getPieTitle = function () {
|
||||
return title;
|
||||
};
|
||||
|
||||
export default {
|
||||
parseDirective,
|
||||
getConfig: () => configApi.getConfig().pie,
|
||||
|
@ -69,9 +62,9 @@ export default {
|
|||
cleanupValue,
|
||||
clear,
|
||||
setAccTitle,
|
||||
getTitle,
|
||||
setPieTitle,
|
||||
getPieTitle,
|
||||
getAccTitle,
|
||||
setDiagramTitle,
|
||||
getDiagramTitle,
|
||||
setShowData,
|
||||
getShowData,
|
||||
getAccDescription,
|
||||
|
|
|
@ -136,7 +136,7 @@ export const draw = (txt, id) => {
|
|||
|
||||
svg
|
||||
.append('text')
|
||||
.text(parser.yy.getPieTitle())
|
||||
.text(parser.yy.getDiagramTitle())
|
||||
.attr('x', 0)
|
||||
.attr('y', -(height - 50) / 2)
|
||||
.attr('class', 'pieTitleText');
|
||||
|
|
|
@ -86,7 +86,7 @@ describe('when parsing requirement diagram it...', function () {
|
|||
|
||||
reqDiagram.parser.parse(doc);
|
||||
|
||||
expect(requirementDb.getTitle()).toBe(expectedTitle);
|
||||
expect(requirementDb.getAccTitle()).toBe(expectedTitle);
|
||||
expect(requirementDb.getAccDescription()).toBe(expectedAccDescription);
|
||||
});
|
||||
|
||||
|
@ -107,7 +107,7 @@ line 2`;
|
|||
|
||||
reqDiagram.parser.parse(doc);
|
||||
|
||||
expect(requirementDb.getTitle()).toBe(expectedTitle);
|
||||
expect(requirementDb.getAccTitle()).toBe(expectedTitle);
|
||||
expect(requirementDb.getAccDescription()).toBe(expectedAccDescription);
|
||||
});
|
||||
|
||||
|
|
|
@ -4,7 +4,7 @@ import mermaidAPI from '../../mermaidAPI';
|
|||
import common from '../common/common';
|
||||
import {
|
||||
setAccTitle,
|
||||
getTitle,
|
||||
getAccTitle,
|
||||
getAccDescription,
|
||||
setAccDescription,
|
||||
clear as commonClear,
|
||||
|
@ -163,7 +163,7 @@ export default {
|
|||
setNewReqRisk,
|
||||
setNewReqVerifyMethod,
|
||||
setAccTitle,
|
||||
getTitle,
|
||||
getAccTitle,
|
||||
setAccDescription,
|
||||
getAccDescription,
|
||||
|
||||
|
|
|
@ -4,7 +4,9 @@ import { log } from '../../logger';
|
|||
import { sanitizeText } from '../common/common';
|
||||
import {
|
||||
setAccTitle,
|
||||
getTitle,
|
||||
getAccTitle,
|
||||
setDiagramTitle,
|
||||
getDiagramTitle,
|
||||
getAccDescription,
|
||||
setAccDescription,
|
||||
clear as commonClear,
|
||||
|
@ -331,15 +333,6 @@ export const getActorProperty = function (actor, key) {
|
|||
return undefined;
|
||||
};
|
||||
|
||||
export const setDiagramTitle = function (txt) {
|
||||
let sanitizedText = sanitizeText(txt, configApi.getConfig());
|
||||
diagramTitle = sanitizedText;
|
||||
};
|
||||
|
||||
export const getDiagramTitle = function () {
|
||||
return diagramTitle;
|
||||
};
|
||||
|
||||
export const apply = function (param) {
|
||||
if (param instanceof Array) {
|
||||
param.forEach(function (item) {
|
||||
|
@ -450,8 +443,9 @@ export default {
|
|||
getActor,
|
||||
getActorKeys,
|
||||
getActorProperty,
|
||||
getTitle,
|
||||
getAccTitle,
|
||||
getDiagramTitle,
|
||||
setDiagramTitle,
|
||||
parseDirective,
|
||||
getConfig: () => configApi.getConfig().sequence,
|
||||
clear,
|
||||
|
@ -461,7 +455,6 @@ export default {
|
|||
PLACEMENT,
|
||||
addNote,
|
||||
setAccTitle,
|
||||
setDiagramTitle,
|
||||
apply,
|
||||
setAccDescription,
|
||||
getAccDescription,
|
||||
|
|
|
@ -119,7 +119,7 @@ Alice->Bob:Hello Bob, how are you?
|
|||
|
||||
mermaidAPI.parse(str);
|
||||
expect(parser.yy.getDiagramTitle()).toBe('Diagram Title');
|
||||
expect(parser.yy.getTitle()).toBe('This is the title');
|
||||
expect(parser.yy.getAccTitle()).toBe('This is the title');
|
||||
expect(parser.yy.getAccDescription()).toBe('Accessibility Description');
|
||||
const messages = parser.yy.getMessages();
|
||||
});
|
||||
|
@ -135,7 +135,7 @@ Alice->Bob:Hello Bob, how are you?
|
|||
`;
|
||||
|
||||
mermaidAPI.parse(str);
|
||||
expect(parser.yy.getTitle()).toBe('This is the title');
|
||||
expect(parser.yy.getAccTitle()).toBe('This is the title');
|
||||
expect(parser.yy.getAccDescription()).toBe('Accessibility\nDescription');
|
||||
const messages = parser.yy.getMessages();
|
||||
});
|
||||
|
|
|
@ -5,7 +5,7 @@ import common from '../common/common';
|
|||
import * as configApi from '../../config';
|
||||
import {
|
||||
setAccTitle,
|
||||
getTitle,
|
||||
getAccTitle,
|
||||
getAccDescription,
|
||||
setAccDescription,
|
||||
clear as commonClear,
|
||||
|
@ -92,7 +92,7 @@ const extract = (_doc) => {
|
|||
// doc = root;
|
||||
// }
|
||||
log.info(doc);
|
||||
clear();
|
||||
clear(true);
|
||||
|
||||
log.info('Extract', doc);
|
||||
|
||||
|
@ -171,7 +171,7 @@ export const addState = function (id, type, doc, descr, note) {
|
|||
}
|
||||
};
|
||||
|
||||
export const clear = function () {
|
||||
export const clear = function (saveCommon) {
|
||||
documents = {
|
||||
root: newDoc(),
|
||||
};
|
||||
|
@ -182,7 +182,9 @@ export const clear = function () {
|
|||
startCnt = 0;
|
||||
endCnt = 0; // eslint-disable-line
|
||||
classes = [];
|
||||
commonClear();
|
||||
if (!saveCommon) {
|
||||
commonClear();
|
||||
}
|
||||
};
|
||||
|
||||
export const getState = function (id) {
|
||||
|
@ -283,7 +285,6 @@ export default {
|
|||
addRelation,
|
||||
getDividerId,
|
||||
setDirection,
|
||||
// addDescription,
|
||||
cleanupLabel,
|
||||
lineType,
|
||||
relationType,
|
||||
|
@ -293,7 +294,7 @@ export default {
|
|||
getRootDocV2,
|
||||
extract,
|
||||
trimColon,
|
||||
getTitle,
|
||||
getAccTitle,
|
||||
setAccTitle,
|
||||
getAccDescription,
|
||||
setAccDescription,
|
||||
|
|
|
@ -48,7 +48,7 @@ describe('state diagram, ', function () {
|
|||
`;
|
||||
|
||||
parser.parse(str);
|
||||
const title = stateDb.getTitle();
|
||||
const title = stateDb.getAccTitle();
|
||||
expect(title).toBe('a simple title of the diagram');
|
||||
});
|
||||
it('simple with directive', function () {
|
||||
|
|
|
@ -63,7 +63,7 @@ describe('state diagram, ', function () {
|
|||
`;
|
||||
|
||||
parser.parse(str);
|
||||
const title = stateDb.getTitle();
|
||||
const title = stateDb.getAccTitle();
|
||||
expect(title).toBe('a simple title of the diagram');
|
||||
});
|
||||
it('simple with directive', function () {
|
||||
|
|
|
@ -3,7 +3,9 @@ import * as configApi from '../../config';
|
|||
import common from '../common/common';
|
||||
import {
|
||||
setAccTitle,
|
||||
getTitle,
|
||||
getAccTitle,
|
||||
setDiagramTitle,
|
||||
getDiagramTitle,
|
||||
getAccDescription,
|
||||
setAccDescription,
|
||||
clear as commonClear,
|
||||
|
@ -126,8 +128,10 @@ export default {
|
|||
parseDirective,
|
||||
getConfig: () => configApi.getConfig().journey,
|
||||
clear,
|
||||
setDiagramTitle,
|
||||
getDiagramTitle,
|
||||
setAccTitle,
|
||||
getTitle,
|
||||
getAccTitle,
|
||||
setAccDescription,
|
||||
getAccDescription,
|
||||
addSection,
|
||||
|
|
|
@ -16,7 +16,7 @@ describe('when using the journeyDb', function () {
|
|||
it.each`
|
||||
fn | expected
|
||||
${'getTasks'} | ${[]}
|
||||
${'getTitle'} | ${''}
|
||||
${'getAccTitle'} | ${''}
|
||||
${'getSections'} | ${[]}
|
||||
${'getActors'} | ${[]}
|
||||
`('should clear $fn', ({ fn, expected }) => {
|
||||
|
@ -34,7 +34,7 @@ describe('when using the journeyDb', function () {
|
|||
it.each`
|
||||
fn | expected
|
||||
${'getTasks'} | ${[]}
|
||||
${'getTitle'} | ${''}
|
||||
${'getAccTitle'} | ${''}
|
||||
${'getAccDescription'} | ${''}
|
||||
${'getSections'} | ${[]}
|
||||
`('should clear $fn', ({ fn, expected }) => {
|
||||
|
@ -52,7 +52,7 @@ describe('when using the journeyDb', function () {
|
|||
journeyDb.addSection('Do shopping');
|
||||
journeyDb.addTask('Go shopping', ':5:Mum');
|
||||
|
||||
expect(journeyDb.getTitle()).toEqual('Shopping');
|
||||
expect(journeyDb.getAccTitle()).toEqual('Shopping');
|
||||
expect(journeyDb.getAccDescription()).toEqual('A user journey for family shopping');
|
||||
expect(journeyDb.getTasks()).toEqual([
|
||||
{
|
||||
|
|
|
@ -74,7 +74,7 @@ export const draw = function (text, id) {
|
|||
svgDraw.initGraphics(diagram);
|
||||
|
||||
const tasks = parser.yy.getTasks();
|
||||
const title = parser.yy.getTitle();
|
||||
const title = parser.yy.getDiagramTitle();
|
||||
|
||||
const actorNames = parser.yy.getActors();
|
||||
for (let member in actors) delete actors[member];
|
||||
|
|
|
@ -73,7 +73,7 @@ directive
|
|||
;
|
||||
|
||||
statement
|
||||
: title {yy.setAccTitle($1.substr(6));$$=$1.substr(6);}
|
||||
: title {yy.setDiagramTitle($1.substr(6));$$=$1.substr(6);}
|
||||
| acc_title acc_title_value { $$=$2.trim();yy.setAccTitle($$); }
|
||||
| acc_descr acc_descr_value { $$=$2.trim();yy.setAccDescription($$); }
|
||||
| acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); }
|
||||
|
|
|
@ -36,11 +36,13 @@ describe('when parsing a journey diagram it', function () {
|
|||
family shopping
|
||||
}` +
|
||||
'title Adding journey diagram functionality to mermaid\n' +
|
||||
'accTitle: Adding acc journey diagram functionality to mermaid\n' +
|
||||
'section Order from website';
|
||||
|
||||
expect(parserFnConstructor(str)).not.toThrow();
|
||||
expect(journeyDb.getAccDescription()).toBe('A user journey for\nfamily shopping');
|
||||
expect(journeyDb.getTitle()).toBe('Adding journey diagram functionality to mermaid');
|
||||
expect(journeyDb.getDiagramTitle()).toBe('Adding journey diagram functionality to mermaid');
|
||||
expect(journeyDb.getAccTitle()).toBe('Adding acc journey diagram functionality to mermaid');
|
||||
});
|
||||
it('it should handle an accessibility title (accDescr)', function () {
|
||||
const str = `journey
|
||||
|
@ -49,7 +51,7 @@ describe('when parsing a journey diagram it', function () {
|
|||
|
||||
expect(parserFnConstructor(str)).not.toThrow();
|
||||
expect(journeyDb.getAccDescription()).toBe('');
|
||||
expect(journeyDb.getTitle()).toBe('The title');
|
||||
expect(journeyDb.getAccTitle()).toBe('The title');
|
||||
});
|
||||
|
||||
it('should handle a section definition', function () {
|
||||
|
|
Loading…
Reference in New Issue