marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-14 17:54:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: adding new security level sandbox, sequence diagram update

Browse Source
This commit is contained in:
Knut Sveidqvist
2022-01-21 18:15:18 +01:00
parent 06834eb383
commit cbe2ce41c1
6 changed files with 31 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
cypress/platform/knsv.html
View File

@@ -25,13 +25,14 @@
</style> </style>
</head> </head>
<body> <body>
<div id="apa" style="background: aliceblue; width: 150px; height: 75px;">APA</div>
<div class="mermaid2" style="width: 100%;"> <div class="mermaid2" style="width: 100%;">
pie title Pets adopted by volunteers pie title Pets adopted by volunteers
"Dogs" : 386 "Dogs" : 386
"Cats" : 85 "Cats" : 85
"Rats" : 15 "Rats" : 15
</div> </div>
<div class="mermaid" style="width: 100%;"> <div class="mermaid2" style="width: 100%;">
gantt gantt
dateFormat :YYYY-MM-DD dateFormat :YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid title Adding GANTT diagram functionality to mermaid
@@ -81,6 +82,20 @@ commit
commit commit
merge newbranch merge newbranch
</div> </div>
<div class="mermaid" style="width: 100%;">
sequenceDiagram
participant a as Alice
participant j as John
note right of a: Hello world!
properties a: {"class": "internal-service-actor", "type": "@clock"}
properties j: {"class": "external-service-actor", "type": "@computer"}
links a: {"Repo": "https://www.contoso.com/repo", "Swagger": "https://www.contoso.com/swagger"}
links j: {"Repo": "https://www.contoso.com/repo"}
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>
<div class="mermaid2" style="width: 100%;"> <div class="mermaid2" style="width: 100%;">
journey journey
title My working day title My working day
@@ -198,7 +213,7 @@ requirementDiagram
}, },
// gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false }, sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
// sequenceDiagram: { actorMargin: 300 } // deprecated // sequenceDiagram: { actorMargin: 300, forceMenus: false }, // deprecated
// fontFamily: '"times", sans-serif', // fontFamily: '"times", sans-serif',
// fontFamily: 'courier', // fontFamily: 'courier',
state: { state: {
@@ -209,7 +224,7 @@ requirementDiagram
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() {

BIN
cypress/screenshots/other/rerender.spec.js/Rerendering -- should be able to render after an error has occured (failed).png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 52 KiB

BIN
cypress/screenshots/rendering/sequencediagram.spec.js/Sequence diagram -- svg size -- should render a sequence diagram when useMaxWidth is false (failed).png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 166 KiB

After

Width:  |  Height:  |  Size: 166 KiB

BIN
cypress/screenshots/rendering/sequencediagram.spec.js/Sequence diagram -- svg size -- should render a sequence diagram when useMaxWidth is true (default) (failed).png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 162 KiB

After

Width:  |  Height:  |  Size: 162 KiB

15
src/diagrams/sequence/sequenceRenderer.js
View File

@@ -452,13 +452,20 @@ export const drawActors = function (diagram, actors, actorKeys, verticalPos) {
bounds.bumpVerticalPos(maxHeight); bounds.bumpVerticalPos(maxHeight);
}; };
export const drawActorsPopup = function (diagram, actors, actorKeys) { export const drawActorsPopup = function (diagram, actors, actorKeys, doc) {
var maxHeight = 0; var maxHeight = 0;
var maxWidth = 0; var maxWidth = 0;
for (let i = 0; i < actorKeys.length; i++) { for (let i = 0; i < actorKeys.length; i++) {
const actor = actors[actorKeys[i]]; const actor = actors[actorKeys[i]];
const minMenuWidth = getRequiredPopupWidth(actor); const minMenuWidth = getRequiredPopupWidth(actor);
var menuDimensions = svgDraw.drawPopup(diagram, actor, minMenuWidth, conf, conf.forceMenus); var menuDimensions = svgDraw.drawPopup(
diagram,
actor,
minMenuWidth,
conf,
conf.forceMenus,
doc
);
if (menuDimensions.height > maxHeight) { if (menuDimensions.height > maxHeight) {
maxHeight = menuDimensions.height; maxHeight = menuDimensions.height;
} }
@@ -557,7 +564,7 @@ export const draw = function (text, id) {
bounds.init(); bounds.init();
log.debug(`C:${JSON.stringify(conf, null, 2)}`); log.debug(`C:${JSON.stringify(conf, null, 2)}`);
const diagram = select(`[id="${id}"]`); const diagram = root.select(`[id="${id}"]`);
// Fetch data from the parsing // Fetch data from the parsing
const actors = parser.yy.getActors(); const actors = parser.yy.getActors();
@@ -745,7 +752,7 @@ export const draw = function (text, id) {
} }
// only draw popups for the top row of actors. // only draw popups for the top row of actors.
var requiredBoxSize = drawActorsPopup(diagram, actors, actorKeys); var requiredBoxSize = drawActorsPopup(diagram, actors, actorKeys, doc);
const { bounds: box } = bounds.getBounds(); const { bounds: box } = bounds.getBounds();

2
src/diagrams/sequence/svgDraw.js
View File

@@ -30,6 +30,8 @@ export const drawRect = function (elem, rectData) {
const addPopupInteraction = (id, actorCnt) => { const addPopupInteraction = (id, actorCnt) => {
addFunction(() => { addFunction(() => {
const arr = document.querySelectorAll(id); const arr = document.querySelectorAll(id);
// This will be the case when running in sandboxed mode
if (arr.length === 0) return;
arr[0].addEventListener('mouseover', function () { arr[0].addEventListener('mouseover', function () {
popupMenuUpFunc('actor' + actorCnt + '_popup'); popupMenuUpFunc('actor' + actorCnt + '_popup');
}); });