From 882ba03fcbe28f5a9aff4a4d52ba742fab2a1a2f Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Thu, 3 Feb 2022 19:54:24 +0100 Subject: [PATCH] fix: handling diagram width in sandbox mode --- cypress/platform/knsv.html | 31 ++++++++++++++----------------- src/dagre-wrapper/nodes.js | 4 +++- src/diagrams/class/classDb.js | 2 +- src/mermaidAPI.js | 2 +- 4 files changed, 19 insertions(+), 20 deletions(-) diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html index 15e5dcc615..0ecd9d9dcd 100644 --- a/cypress/platform/knsv.html +++ b/cypress/platform/knsv.html @@ -14,6 +14,7 @@ font-family: 'Arial'; /* font-size: 18px !important; */ width: 100%; + display: flex; } h1 { color: grey;} .mermaid2,.mermaid3 { @@ -25,7 +26,7 @@ -
+
pie title Pets adopted by volunteers "Dogs" : 386 "Cats" : 85 @@ -63,7 +64,7 @@ commit merge newbranch
-
+
sequenceDiagram participant a as Alice participant j as John @@ -75,8 +76,7 @@ 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! -
+ j-->>a: Great!
journey title My working day @@ -144,21 +144,13 @@ a1-->a2-->a3 end
-
- flowchart TB - Function-->URL +
+ flowchart LR + Function-->URL-->A-->B-->C click Function clickByFlow "Add a div" click URL "https://mermaid-js.github.io/mermaid/#/" "Visit mermaid docs" _blank
- 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" -
-
gantt dateFormat YYYY-MM-DD axisFormat %d/%m @@ -264,7 +256,12 @@ 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 @@ logLevel: 0, fontSize: 18, curve: 'cardinal', - securityLevel: 'sandbox', + // securityLevel: 'sandbox', // themeVariables: {relationLabelColor: 'red'} }); function callback() { diff --git a/src/dagre-wrapper/nodes.js b/src/dagre-wrapper/nodes.js index 3123ce3bb0..cb25f7fc0c 100644 --- a/src/dagre-wrapper/nodes.js +++ b/src/dagre-wrapper/nodes.js @@ -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); diff --git a/src/diagrams/class/classDb.js b/src/diagrams/class/classDb.js index f2fc015e3d..abfb58a176 100644 --- a/src/diagrams/class/classDb.js +++ b/src/diagrams/class/classDb.js @@ -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'; } diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js index c87075a596..e7285d7c3b 100755 --- a/src/mermaidAPI.js +++ b/src/mermaidAPI.js @@ -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 = `