mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: handling diagram width in sandbox mode

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
Show Stats 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-size: 18px !important; */
width: 100%;
display: flex;
}
h1 { color: grey;}
.mermaid2,.mermaid3 {
@ -25,7 +26,7 @@
</style>
</head>
<body>
<div class="mermaid2" style="width: 100%;">
<div class="mermaid2" style="width: 50%;">
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
@ -63,7 +64,7 @@ commit
commit
merge newbranch
</div>
<div class="mermaid2" style="width: 100%;">
<div class="mermaid" style="width: 50%;">
sequenceDiagram
participant a as Alice
participant j as John
@ -75,8 +76,7 @@ sequenceDiagram
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
a->>j: Hello John, how are you?
j-->>a: Great!
</div>
j-->>a: Great! </div>
<div class="mermaid2" style="width: 100%;">
journey
title My working day
@ -144,21 +144,13 @@ requirementDiagram
a1-->a2-->a3
end
</div>
<div class="mermaid2" style="width: 100%;">
flowchart TB
Function-->URL
<div class="mermaid" style="width: 50%;">
flowchart LR
Function-->URL-->A-->B-->C
click Function clickByFlow "Add a div"
click URL "https://mermaid-js.github.io/mermaid/#/" "Visit <strong>mermaid docs</strong>" _blank
</div>
<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
dateFormat YYYY-MM-DD
axisFormat %d/%m
@ -264,7 +256,12 @@ class Class10 {
htmlLabels: true,
},
// 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
// fontFamily: '"times", sans-serif',
// fontFamily: 'courier',
@ -276,7 +273,7 @@ class Class10 {
logLevel: 0,
fontSize: 18,
curve: 'cardinal',
securityLevel: 'sandbox',
// securityLevel: 'sandbox',
// themeVariables: {relationLabelColor: 'red'}
});
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 note from './shapes/note';
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 { 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') {
classes[id].linkTarget = '_top';
} else if (typeof target === 'string') {
classes[id].linkTarget = target;
classes[id].linkTarget = sanitizeText(target);
} else {
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 height = '100%';
if (svgEl) {
width = svgEl.viewBox.baseVal.width + 'px';
// width = svgEl.viewBox.baseVal.width + 'px';
height = svgEl.viewBox.baseVal.height + 'px';
}
svgCode = `<iframe style="width:${width};height:${height};border:0;margin:0;" src="data:text/html;base64,${btoa(