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

feat: adding new security level sandbox, diagram updates

Browse Source
This commit is contained in:
Knut Sveidqvist
2022-01-21 17:17:31 +01:00
parent 413816783d
commit 06834eb383
19 changed files with 399 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/diagrams/state/stateRenderer.js
View File

@@ -46,12 +46,24 @@ const insertMarkers = function (elem) {
*/
export const draw = function (text, id) {
conf = getConfig().state;
const securityLevel = getConfig().securityLevel;
// Handle root and ocument for when rendering in sanbox mode
let sandboxElement;
if (securityLevel === 'sandbox') {
sandboxElement = select('#i' + id);
}
const root =
securityLevel === 'sandbox'
? select(sandboxElement.nodes()[0].contentDocument.body)
: select('body');
const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
parser.yy.clear();
parser.parse(text);
log.debug('Rendering diagram ' + text);
// Fetch the default direction, use TD if none was found
const diagram = select(`[id='${id}']`);
const diagram = root.select(`[id='${id}']`);
insertMarkers(diagram);
// Layout graph, Create a new directed graph
@@ -69,7 +81,7 @@ export const draw = function (text, id) {
});
const rootDoc = stateDb.getRootDoc();
renderDoc(rootDoc, diagram, undefined, false);
renderDoc(rootDoc, diagram, undefined, false, root, doc);
const padding = conf.padding;
const bounds = diagram.node().getBBox();
@@ -90,7 +102,7 @@ const getLabelWidth = (text) => {
return text ? text.length * conf.fontSizeFactor : 1;
};
const renderDoc = (doc, diagram, parentId, altBkg) => {
const renderDoc = (doc, diagram, parentId, altBkg, root, domDocument) => {
// Layout graph, Create a new directed graph
const graph = new graphlib.Graph({
compound: true,
@@ -159,7 +171,7 @@ const renderDoc = (doc, diagram, parentId, altBkg) => {
let node;
if (stateDef.doc) {
let sub = diagram.append('g').attr('id', stateDef.id).attr('class', 'stateGroup');
node = renderDoc(stateDef.doc, sub, stateDef.id, !altBkg);
node = renderDoc(stateDef.doc, sub, stateDef.id, !altBkg, root, domDocument);
if (first) {
// first = false;
@@ -234,21 +246,22 @@ const renderDoc = (doc, diagram, parentId, altBkg) => {
graph.nodes().forEach(function (v) {
if (typeof v !== 'undefined' && typeof graph.node(v) !== 'undefined') {
log.warn('Node ' + v + ': ' + JSON.stringify(graph.node(v)));
select('#' + svgElem.id + ' #' + v).attr(
'transform',
'translate(' +
(graph.node(v).x - graph.node(v).width / 2) +
',' +
(graph.node(v).y +
(transformationLog[v] ? transformationLog[v].y : 0) -
graph.node(v).height / 2) +
' )'
);
select('#' + svgElem.id + ' #' + v).attr(
'data-x-shift',
graph.node(v).x - graph.node(v).width / 2
);
const dividers = document.querySelectorAll('#' + svgElem.id + ' #' + v + ' .divider');
root
.select('#' + svgElem.id + ' #' + v)
.attr(
'transform',
'translate(' +
(graph.node(v).x - graph.node(v).width / 2) +
',' +
(graph.node(v).y +
(transformationLog[v] ? transformationLog[v].y : 0) -
graph.node(v).height / 2) +
' )'
);
root
.select('#' + svgElem.id + ' #' + v)
.attr('data-x-shift', graph.node(v).x - graph.node(v).width / 2);
const dividers = domDocument.querySelectorAll('#' + svgElem.id + ' #' + v + ' .divider');
dividers.forEach((divider) => {
const parent = divider.parentElement;
let pWidth = 0;