mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-14 06:43:25 +08:00
Merge branch 'develop' into bug/1218_fix_link_click_events
This commit is contained in:
commit
5ea6bd5980
@ -512,7 +512,7 @@ describe('Flowchart', () => {
|
|||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('24: Keep node label text (if already defined) when a style is applied', () => {
|
it('24.1: Keep node label text (if already defined) when a style is applied', () => {
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
`graph LR
|
`graph LR
|
||||||
A(( )) -->|step 1| B(( ))
|
A(( )) -->|step 1| B(( ))
|
||||||
@ -524,8 +524,7 @@ describe('Flowchart', () => {
|
|||||||
{ flowchart: { htmlLabels: false } }
|
{ flowchart: { htmlLabels: false } }
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
it('24.2: Handle link click events (link, anchor, mailto, other protocol, script)', () => {
|
||||||
it('24: Handle link click events (link, anchor, mailto, other protocol, script)', () => {
|
|
||||||
imgSnapshotTest(
|
imgSnapshotTest(
|
||||||
`graph TB
|
`graph TB
|
||||||
TITLE["Link Click Events<br>(click the nodes below)"]
|
TITLE["Link Click Events<br>(click the nodes below)"]
|
||||||
@ -544,4 +543,36 @@ describe('Flowchart', () => {
|
|||||||
{ securityLevel: 'loose' }
|
{ securityLevel: 'loose' }
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('25: Set node text color according to style when html labels are enabled', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`graph LR
|
||||||
|
A[red<br>text] --> B(blue<br>text)
|
||||||
|
C[/red<br/>text/] --> D{blue<br/>text}
|
||||||
|
style A color:red;
|
||||||
|
style B color:blue;
|
||||||
|
style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
|
style D stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
click B "index.html#link-clicked" "link test"
|
||||||
|
click D testClick "click test"
|
||||||
|
`,
|
||||||
|
{ flowchart: { htmlLabels: true } }
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('26: Set node text color according to style when html labels are disabled', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`graph LR
|
||||||
|
A[red<br>text] --> B(blue<br>text)
|
||||||
|
C[/red<br/>text/] --> D{blue<br/>text}
|
||||||
|
style A color:red;
|
||||||
|
style B color:blue;
|
||||||
|
style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
|
style D stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
click B "index.html#link-clicked" "link test"
|
||||||
|
click D testClick "click test"
|
||||||
|
`,
|
||||||
|
{ flowchart: { htmlLabels: false } }
|
||||||
|
);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
39
cypress/platform/huge.html
Normal file
39
cypress/platform/huge.html
Normal file
File diff suppressed because one or more lines are too long
12
dist/index.html
vendored
12
dist/index.html
vendored
@ -368,6 +368,18 @@ graph TB
|
|||||||
click D "notes://do-your-thing/id" "other protocol test"
|
click D "notes://do-your-thing/id" "other protocol test"
|
||||||
click E "javascript:alert('test')" "script test"
|
click E "javascript:alert('test')" "script test"
|
||||||
</div>
|
</div>
|
||||||
|
<hr/>
|
||||||
|
<div class="mermaid">
|
||||||
|
graph LR
|
||||||
|
A[red<br>text] --> B(blue<br>text)
|
||||||
|
C[/red<br/>text/] --> D{blue<br/>text}
|
||||||
|
style A color:red;
|
||||||
|
style B color:blue;
|
||||||
|
style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
|
||||||
|
style D stroke:#0000ff,fill:#ccccff,color:#0000ff
|
||||||
|
click B "index.html#link-clicked" "link test"
|
||||||
|
click D testClick "click test"
|
||||||
|
</div>
|
||||||
|
|
||||||
<hr/>
|
<hr/>
|
||||||
|
|
||||||
|
@ -509,13 +509,13 @@ It is possible to apply specific styles such as a thicker border or a different
|
|||||||
graph LR
|
graph LR
|
||||||
id1(Start)-->id2(Stop)
|
id1(Start)-->id2(Stop)
|
||||||
style id1 fill:#f9f,stroke:#333,stroke-width:4px
|
style id1 fill:#f9f,stroke:#333,stroke-width:4px
|
||||||
style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5
|
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5, 5
|
||||||
```
|
```
|
||||||
```mermaid
|
```mermaid
|
||||||
graph LR
|
graph LR
|
||||||
id1(Start)-->id2(Stop)
|
id1(Start)-->id2(Stop)
|
||||||
style id1 fill:#f9f,stroke:#333,stroke-width:4px
|
style id1 fill:#f9f,stroke:#333,stroke-width:4px
|
||||||
style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5
|
style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5, 5
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
|
@ -7,7 +7,7 @@
|
|||||||
<meta name="description" content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.">
|
<meta name="description" content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.">
|
||||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||||
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
|
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
|
||||||
<script src="//cdn.jsdelivr.net/npm/mermaid@8.4.5/dist/mermaid.min.js"></script>
|
<script src="//cdn.jsdelivr.net/npm/mermaid@8.4.6/dist/mermaid.min.js"></script>
|
||||||
<script>
|
<script>
|
||||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||||
|
@ -87,6 +87,7 @@ export const addVertices = function(vert, g, svgId) {
|
|||||||
vertexNode.parentNode.removeChild(vertexNode);
|
vertexNode.parentNode.removeChild(vertexNode);
|
||||||
} else {
|
} else {
|
||||||
const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
|
const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
|
||||||
|
svgLabel.setAttribute('style', labelStyle.replace('color:', 'fill:'));
|
||||||
|
|
||||||
const rows = vertexText.split(/<br\s*\/?>/gi);
|
const rows = vertexText.split(/<br\s*\/?>/gi);
|
||||||
|
|
||||||
|
29
src/diagrams/flowchart/parser/flow-huge.spec.js
Normal file
29
src/diagrams/flowchart/parser/flow-huge.spec.js
Normal file
File diff suppressed because one or more lines are too long
@ -95,6 +95,8 @@ const config = {
|
|||||||
*/
|
*/
|
||||||
theme: 'default',
|
theme: 'default',
|
||||||
themeCSS: undefined,
|
themeCSS: undefined,
|
||||||
|
/* **maxTextSize** - The maximum allowed size of the users text diamgram */
|
||||||
|
maxTextSize: 50000,
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* **fontFamily** The font to be used for the rendered diagrams. Default value is \"trebuchet ms\", verdana, arial;
|
* **fontFamily** The font to be used for the rendered diagrams. Default value is \"trebuchet ms\", verdana, arial;
|
||||||
@ -460,7 +462,13 @@ export const decodeEntities = function(text) {
|
|||||||
* provided a hidden div will be inserted in the body of the page instead. The element will be removed when rendering is
|
* provided a hidden div will be inserted in the body of the page instead. The element will be removed when rendering is
|
||||||
* completed.
|
* completed.
|
||||||
*/
|
*/
|
||||||
const render = function(id, txt, cb, container) {
|
const render = function(id, _txt, cb, container) {
|
||||||
|
// Check the maximum allowed text size
|
||||||
|
let txt = _txt;
|
||||||
|
if (_txt.length > config.maxTextSize) {
|
||||||
|
txt = 'graph TB;a[Maximum text size in diagram exceeded];style a fill:#faa';
|
||||||
|
}
|
||||||
|
|
||||||
if (typeof container !== 'undefined') {
|
if (typeof container !== 'undefined') {
|
||||||
container.innerHTML = '';
|
container.innerHTML = '';
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user