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

feat: adding new security level sandbox, sequence diagram update

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
cypress/platform/knsv.html
View File

@ -25,13 +25,14 @@
</style>
</head>
<body>
<div id="apa" style="background: aliceblue; width: 150px; height: 75px;">APA</div>
<div class="mermaid2" style="width: 100%;">
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 15
</div>
<div class="mermaid" style="width: 100%;">
<div class="mermaid2" style="width: 100%;">
gantt
dateFormat :YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
@ -81,6 +82,20 @@ commit
commit
merge newbranch
</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%;">
journey
title My working day
@ -198,7 +213,7 @@ requirementDiagram
},
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
// sequenceDiagram: { actorMargin: 300 } // deprecated
// sequenceDiagram: { actorMargin: 300, forceMenus: false }, // deprecated
// fontFamily: '"times", sans-serif',
// fontFamily: 'courier',
state: {
@ -209,7 +224,7 @@ requirementDiagram
logLevel: 0,
fontSize: 18,
curve: 'cardinal',
// securityLevel: 'sandbox',
securityLevel: 'sandbox',
// themeVariables: {relationLabelColor: 'red'}
});
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);
};
export const drawActorsPopup = function (diagram, actors, actorKeys) {
export const drawActorsPopup = function (diagram, actors, actorKeys, doc) {
var maxHeight = 0;
var maxWidth = 0;
for (let i = 0; i < actorKeys.length; i++) {
const actor = actors[actorKeys[i]];
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) {
maxHeight = menuDimensions.height;
}
@ -557,7 +564,7 @@ export const draw = function (text, id) {
bounds.init();
log.debug(`C:${JSON.stringify(conf, null, 2)}`);
const diagram = select(`[id="${id}"]`);
const diagram = root.select(`[id="${id}"]`);
// Fetch data from the parsing
const actors = parser.yy.getActors();
@ -745,7 +752,7 @@ export const draw = function (text, id) {
}
// 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();

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

@ -30,6 +30,8 @@ export const drawRect = function (elem, rectData) {
const addPopupInteraction = (id, actorCnt) => {
addFunction(() => {
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 () {
popupMenuUpFunc('actor' + actorCnt + '_popup');
});