marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-30 05:36:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: handling diagram width in sandbox mode

Browse Source
This commit is contained in:
Knut Sveidqvist
2022-02-03 19:54:24 +01:00
parent 46cdacfdc7
commit 882ba03fcb
4 changed files with 19 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
cypress/platform/knsv.html
View File

@@ -14,6 +14,7 @@
font-family: 'Arial'; font-family: 'Arial';
/* font-size: 18px !important; */ /* font-size: 18px !important; */
width: 100%; width: 100%;
display: flex;
} }
h1 { color: grey;} h1 { color: grey;}
.mermaid2,.mermaid3 { .mermaid2,.mermaid3 {
@@ -25,7 +26,7 @@
</style> </style>
</head> </head>
<body> <body>
<div class="mermaid2" style="width: 100%;"> <div class="mermaid2" style="width: 50%;">
pie title Pets adopted by volunteers pie title Pets adopted by volunteers
"Dogs" : 386 "Dogs" : 386
"Cats" : 85 "Cats" : 85
@@ -63,7 +64,7 @@ commit
commit commit
merge newbranch merge newbranch
</div> </div>
<div class="mermaid2" style="width: 100%;"> <div class="mermaid" style="width: 50%;">
sequenceDiagram sequenceDiagram
participant a as Alice participant a as Alice
participant j as John participant j as John
@@ -75,8 +76,7 @@ sequenceDiagram
links a: {"Dashboard": "https://www.contoso.com/dashboard", "On-Call": "https://www.contoso.com/oncall"} links a: {"Dashboard": "https://www.contoso.com/dashboard", "On-Call": "https://www.contoso.com/oncall"}
link a: Contacts @ https://contacts.contoso.com/?contact=alice@contoso.com link a: Contacts @ https://contacts.contoso.com/?contact=alice@contoso.com
a->>j: Hello John, how are you? a->>j: Hello John, how are you?
j-->>a: Great! j-->>a: Great! </div>
</div>
<div class="mermaid2" style="width: 100%;"> <div class="mermaid2" style="width: 100%;">
journey journey
title My working day title My working day
@@ -144,21 +144,13 @@ requirementDiagram
a1-->a2-->a3 a1-->a2-->a3
end end
</div> </div>
<div class="mermaid2" style="width: 100%;"> <div class="mermaid" style="width: 50%;">
flowchart TB flowchart LR
Function-->URL Function-->URL-->A-->B-->C
click Function clickByFlow "Add a div" click Function clickByFlow "Add a div"
click URL "https://mermaid-js.github.io/mermaid/#/" "Visit <strong>mermaid docs</strong>" _blank click URL "https://mermaid-js.github.io/mermaid/#/" "Visit <strong>mermaid docs</strong>" _blank
</div> </div>
<div class="mermaid2" style="width: 100%;"> <div class="mermaid2" style="width: 100%;">
classDiagram-v2
class Test
class ShapeLink
link ShapeLink "https://mermaid-js.github.io/mermaid/#/" "This is a tooltip for a link"
class ShapeCallback
callback ShapeCallback "clickByClass" "This is a tooltip for a callback"
</div>
<div class="mermaid" style="width: 100%;">
gantt gantt
dateFormat YYYY-MM-DD dateFormat YYYY-MM-DD
axisFormat %d/%m axisFormat %d/%m
@@ -264,7 +256,12 @@ class Class10 {
htmlLabels: true, htmlLabels: true,
}, },
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false }, sequence: {
actorFontFamily: 'courier',
actorMargin: 50,
showSequenceNumbers: false,
// forceMenus: true,
},
// sequenceDiagram: { actorMargin: 300, forceMenus: false }, // deprecated // sequenceDiagram: { actorMargin: 300, forceMenus: false }, // deprecated
// fontFamily: '"times", sans-serif', // fontFamily: '"times", sans-serif',
// fontFamily: 'courier', // fontFamily: 'courier',
@@ -276,7 +273,7 @@ class Class10 {
logLevel: 0, logLevel: 0,
fontSize: 18, fontSize: 18,
curve: 'cardinal', curve: 'cardinal',
securityLevel: 'sandbox', // securityLevel: 'sandbox',
// themeVariables: {relationLabelColor: 'red'} // themeVariables: {relationLabelColor: 'red'}
}); });
function callback() { function callback() {

4
src/dagre-wrapper/nodes.js
View File

@@ -6,7 +6,9 @@ import intersect from './intersect/index.js';
import createLabel from './createLabel'; import createLabel from './createLabel';
import note from './shapes/note'; import note from './shapes/note';
import { parseMember } from '../diagrams/class/svgDraw'; import { parseMember } from '../diagrams/class/svgDraw';
import { evaluate } from '../diagrams/common/common'; import { evaluate, sanitizeText as sanitize } from '../diagrams/common/common';
const sanitizeText = (txt) => sanitize(txt, getConfig());
const question = (parent, node) => { const question = (parent, node) => {
const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true); const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);

2
src/diagrams/class/classDb.js
View File

@@ -216,7 +216,7 @@ export const setLink = function (ids, linkStr, target) {
if (config.securityLevel === 'sandbox') { if (config.securityLevel === 'sandbox') {
classes[id].linkTarget = '_top'; classes[id].linkTarget = '_top';
} else if (typeof target === 'string') { } else if (typeof target === 'string') {
classes[id].linkTarget = target; classes[id].linkTarget = sanitizeText(target);
} else { } else {
classes[id].linkTarget = '_blank'; classes[id].linkTarget = '_blank';
} }

2
src/mermaidAPI.js
View File

@@ -528,7 +528,7 @@ const render = function (id, _txt, cb, container) {
let width = '100%'; let width = '100%';
let height = '100%'; let height = '100%';
if (svgEl) { if (svgEl) {
width = svgEl.viewBox.baseVal.width + 'px'; // width = svgEl.viewBox.baseVal.width + 'px';
height = svgEl.viewBox.baseVal.height + 'px'; height = svgEl.viewBox.baseVal.height + 'px';
} }
svgCode = `<iframe style="width:${width};height:${height};border:0;margin:0;" src="data:text/html;base64,${btoa( svgCode = `<iframe style="width:${width};height:${height};border:0;margin:0;" src="data:text/html;base64,${btoa(