From a73b291c4f279be72fdf5d1fd2d58913a0dad409 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Sat, 22 Jan 2022 11:47:03 +0100 Subject: [PATCH] fix: setting width of iframe to size of the diagram --- cypress/platform/click_security_sandbox.html | 170 +++++++++++++++++++ cypress/platform/knsv.html | 26 +-- src/mermaidAPI.js | 14 +- 3 files changed, 186 insertions(+), 24 deletions(-) create mode 100644 cypress/platform/click_security_sandbox.html diff --git a/cypress/platform/click_security_sandbox.html b/cypress/platform/click_security_sandbox.html new file mode 100644 index 000000000..275fea640 --- /dev/null +++ b/cypress/platform/click_security_sandbox.html @@ -0,0 +1,170 @@ + + + + + + Mermaid Quick Test Page + + + + +
+
+ graph TB + Function-->URL + click Function clickByFlow "Add a div" + click URL "http://localhost:9000/webpackUsage.html" "Visit mermaid docs" +
+
+ graph TB + 1Function--->2URL + click 1Function clickByFlow "Add a div" + click 2URL "http://localhost:9000/webpackUsage.html" "Visit mermaid docs" +
+
+ flowchart TB + Function-->URL + click Function clickByFlow "Add a div" + click URL "http://localhost:9000/webpackUsage.html" "Visit mermaid docs" _self +
+
+ flowchart TB + 1Function--->2URL + click 1Function clickByFlow "Add a div" + click 2URL "http://localhost:9000/webpackUsage.html" "Visit mermaid docs" _self +
+ +
+ classDiagram + class ShapeLink + link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link" + class ShapeCallback + callback ShapeCallback "clickByClass" "This is a tooltip for a callback" +
+
+ classDiagram-v2 + class ShapeLink2 + link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link" + class ShapeCallback2 + callback ShapeCallback2 "clickByClass" "This is a tooltip for a callback" +
+ +
+ +
+ gantt + dateFormat YYYY-MM-DD + axisFormat %d/%m + title Adding GANTT diagram to mermaid + excludes weekdays 2014-01-10 + + section A section + Completed task :done, des1, 2014-01-06,2014-01-08 + Active task :active, des2, 2014-01-09, 3d + Future task : des3, after des2, 5d + Future task2 : des4, after des3, 5d + + section Critical tasks + Completed task in the critical line :crit, done, 2014-01-06,24h + Implement parser and jison :crit, done, after des1, 2d + Create tests for parser :crit, active, 3d + Future task in critical line :crit, 5d + Create tests for renderer :2d + Add to mermaid :1d + + section Documentation + Describe gantt syntax :active, a1, after des1, 3d + Add gantt diagram to demo page :after a1 , 20h + Add another diagram to demo page :doc1, after a1 , 48h + + section Clickable + Visit mermaidjs :active, cl1, 2014-01-07,2014-01-10 + Calling a Callback (look at the console log) :cl2, after cl1, 3d + Calling a Callback with args :cl3, after cl1, 3d + + click cl1 href "http://localhost:9000/webpackUsage.html" + click cl2 call clickByGantt() + click cl3 call clickByGantt("test1", test2, test3) + + section Last section + Describe gantt syntax :after doc1, 3d + Add gantt diagram to demo page : 20h + Add another diagram to demo page : 48h +
+
+
+ graph TB + FunctionArg-->URL + click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div" + click URL "http://localhost:9000/webpackUsage.html" "Visit mermaid docs" +
+
+ flowchart TB + FunctionArg-->URL + click FunctionArg call clickByFlowArg(ARGUMENT) "Add a div" + click URL "http://localhost:9000/webpackUsage.html" "Visit mermaid docs" +
+ +
+ classDiagram + class ShapeLink + link ShapeLink "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link" + class ShapeCallback + click ShapeCallback call clickByClass(123) "This is a tooltip for a callback" +
+ +
+ classDiagram-v2 + class ShapeLink2 + link ShapeLink2 "http://localhost:9000/webpackUsage.html" "This is a tooltip for a link" + class ShapeCallback2 + click ShapeCallback2 call clickByClass(123) "This is a tooltip for a callback" +
+ +
+ + + + + diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html index 2f65939d2..070fe5dc6 100644 --- a/cypress/platform/knsv.html +++ b/cypress/platform/knsv.html @@ -32,34 +32,16 @@ pie title Pets adopted by volunteers "Cats" : 85 "Rats" : 15 -
+
gantt - dateFormat :YYYY-MM-DD title Adding GANTT diagram functionality to mermaid excludes :excludes the named dates/days from being included in a charted task.. - section A section - Completed task :done, des1, 2014-01-06,2014-01-08 - Active task :active, des2, 2014-01-09, 3d + section Screening + Lexplore :active, des1, 2023-01-06,2023-01-08 + H4 :active, des2, 2024-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d - section Critical tasks - Completed task in the critical line :crit, done, 2014-01-06,24h - Implement parser and jison :crit, done, after des1, 2d - Create tests for parser :crit, active, 3d - Future task in critical line :crit, 5d - Create tests for renderer :2d - Add to mermaid :1d - - section Documentation - Describe gantt syntax :active, a1, after des1, 3d - Add gantt diagram to demo page :after a1 , 20h - Add another diagram to demo page :doc1, after a1 , 48h - - section Last section - Describe gantt syntax :after doc1, 3d - Add gantt diagram to demo page :20h - Add another diagram to demo page :48h
info diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js index eb3a0182e..835f4b82a 100755 --- a/src/mermaidAPI.js +++ b/src/mermaidAPI.js @@ -244,6 +244,7 @@ const render = function (id, _txt, cb, container) { .attr('sandbox', ''); // const iframeBody = ; root = select(iframe.nodes()[0].contentDocument.body); + root.node().style.margin = 0; } else { root = select('body'); } @@ -263,6 +264,7 @@ const render = function (id, _txt, cb, container) { .attr('sandbox', ''); // const iframeBody = ; root = select(iframe.nodes()[0].contentDocument.body); + root.node().style.margin = 0; } else { root = select(container); } @@ -493,6 +495,7 @@ const render = function (id, _txt, cb, container) { // Fix for when the base tag is used let svgCode = root.select('#d' + id).node().innerHTML; + log.debug('cnf.arrowMarkerAbsolute', cnf.arrowMarkerAbsolute); if ( (!cnf.arrowMarkerAbsolute || cnf.arrowMarkerAbsolute === 'false') && @@ -527,8 +530,15 @@ const render = function (id, _txt, cb, container) { // svgCode = ``; - svgCode = ``;