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

Pausing POC

Browse Source
This commit is contained in:
Knut Sveidqvist
2022-09-14 10:27:30 +02:00
parent d851cc63bf
commit be5d9bd623
5 changed files with 173 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
cypress/platform/cyto.html
View File

@@ -46,9 +46,15 @@
<div id="cy"></div>
<pre class="mermaid" style="width: 50%">
flowchart TD
id1 --> id2--> id3[Iam number 3]--> id4--> id5 --> id1
id1 --> id2--> id3[I am number 3 and I<br/>am a gigantic node<br/>am a gigantic node<br/>am a gigantic node<br/>am a gigantic node<br/>am a gigantic node]--> id4--> id5 --> id1
id5 --> id4
id5 --> id4
</pre>
<pre class="mermaid2" style="width: 50%">
flowchart TD
id1 --> id2--> id3
id2 --> id1
</pre>
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {

1
package.json
View File

@@ -64,6 +64,7 @@
},
"dependencies": {
"@braintree/sanitize-url": "^6.0.0",
"cytoscape": "^3.23.0",
"d3": "^7.0.0",
"dagre": "^0.8.5",
"dagre-d3": "^0.6.4",

295
src/diagrams/flowchart/flowRenderer-v3.js
View File

@@ -382,161 +382,162 @@ export const getClasses = function (text, diagObj) {
*/
export const draw = function (text, id, _version, diagObj) {
const cy = cytoscape({
// styleEnabled: false,
// animate: false,
// ready: function () {
// log.info('Ready', this);
// },
container: document.getElementById('cy'), // container to render in
elements: [
// list of graph elements to start with
// { // node a
// data: { id: 'a' }
return new Promise(function (resolve, reject) {
const cy = cytoscape({
// styleEnabled: false,
// animate: false,
// ready: function () {
// log.info('Ready', this);
// },
// { // node b
// data: { id: 'b' }
// },
// { // edge ab
// data: { id: 'ab', source: 'a', target: 'b' }
// }
],
container: document.getElementById('cy'), // container to render in
style: [
// the stylesheet for the graph
{
selector: 'node',
style: {
'background-color': '#666',
label: 'data(labelText)',
elements: [
// list of graph elements to start with
// { // node a
// data: { id: 'a' }
// },
// { // node b
// data: { id: 'b' }
// },
// { // edge ab
// data: { id: 'ab', source: 'a', target: 'b' }
// }
],
style: [
// the stylesheet for the graph
{
selector: 'node',
style: {
'background-color': '#666',
label: 'data(labelText)',
},
},
},
{
selector: 'edge',
style: {
width: 3,
'line-color': '#ccc',
'target-arrow-color': '#ccc',
'target-arrow-shape': 'triangle',
'curve-style': 'bezier',
label: 'data(id)',
{
selector: 'edge',
style: {
width: 3,
'line-color': '#ccc',
'target-arrow-color': '#ccc',
'target-arrow-shape': 'triangle',
'curve-style': 'bezier',
label: 'data(id)',
},
},
],
layout: {
name: 'breadthfirst',
rows: 1,
},
],
layout: {
name: 'breadthfirst',
rows: 1,
},
});
log.info('Drawing flowchart using v3 renderer');
// Fetch the default direction, use TD if none was found
let dir = diagObj.db.getDirection();
if (typeof dir === 'undefined') {
dir = 'TD';
}
const { securityLevel, flowchart: conf } = getConfig();
// const nodeSpacing = conf.nodeSpacing || 50;
// const rankSpacing = conf.rankSpacing || 50;
// Handle root and document for when rendering in sandbox 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;
const c = cytoscape({
// name: 'cose',
name: 'cose',
container: null,
layout: {
boundingBox: {
x1: 0,
y1: 0,
w: 200,
h: 200,
},
},
headless: true,
styleEnabled: false,
animate: false,
ready: function () {
log.info('Ready', this);
},
});
const svg = root.select(`[id="${id}"]`);
const edgesEl = svg.insert('g').attr('class', 'edges edgePath');
// Fetch the vertices/nodes and edges/links from the parsed graph definition
const vert = diagObj.db.getVertices();
addVertices(vert, cy, id, root, doc, diagObj);
// c.style();
// Make cytoscape care about the dimensisions of the nodes
cy.nodes().forEach(function (n) {
n.layoutDimensions = () => {
const boundingBox = n.data().boundingBox;
return { w: boundingBox.width, h: boundingBox.height };
};
});
const edges = diagObj.db.getEdges();
addEdges(edges, cy, diagObj);
cy.layout({
// name: 'grid',
name: 'circle',
// name: 'cose'
}).run();
cy.nodes().map((node, id) => {
const data = node.data();
log.info(
'Position: (',
node.position().x,
', ',
node.position().y,
')',
node.layoutDimensions()
);
data.el.attr('transform', `translate(${node.position().x}, ${node.position().y})`);
});
cy.edges().map((edge, id) => {
const data = edge.data();
if (edge[0]._private.bodyBounds) {
const bounds = edge[0]._private.bodyBounds;
log.info(
id,
// 'x:',
// edge.controlPoints(),
// 'y:',
edge[0]._private
// 'w:',
// edge.boundingbox().w,
// 'h:',
// edge.boundingbox().h,
// edge.midPoint()
);
// data.el.attr('transform', `translate(${node.position().x}, ${node.position().y})`);
edgesEl
.insert('line')
.attr('x1', bounds.x1)
.attr('y1', bounds.y1)
.attr('x2', bounds.x2)
.attr('y2', bounds.y2)
.attr('class', 'path');
});
log.info('Drawing flowchart using v3 renderer');
// Fetch the default direction, use TD if none was found
let dir = diagObj.db.getDirection();
if (typeof dir === 'undefined') {
dir = 'TD';
}
const { securityLevel, flowchart: conf } = getConfig();
// const nodeSpacing = conf.nodeSpacing || 50;
// const rankSpacing = conf.rankSpacing || 50;
// Handle root and document for when rendering in sandbox 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;
const svg = root.select(`[id="${id}"]`);
const edgesEl = svg.insert('g').attr('class', 'edges edgePath');
// Fetch the vertices/nodes and edges/links from the parsed graph definition
const vert = diagObj.db.getVertices();
addVertices(vert, cy, id, root, doc, diagObj);
// c.style();
// Make cytoscape care about the dimensisions of the nodes
cy.nodes().forEach(function (n) {
n.layoutDimensions = () => {
const boundingBox = n.data().boundingBox;
return { w: boundingBox.width, h: boundingBox.height };
};
});
const edges = diagObj.db.getEdges();
addEdges(edges, cy, diagObj);
cy.layout({
// name: 'grid',
// name: 'circle',
name: 'cose',
// name: 'breadthfirst',
headless: true,
styleEnabled: false,
animate: false,
}).run();
log.info('Positions', cy.nodes().positions());
window.cy = cy;
cy.ready((e) => {
log.info('Ready', e);
setTimeout(() => {
cy.nodes().map((node, id) => {
const data = node.data();
log.info('Position: (', node.position().x, ', ', node.position().y, ')', data);
data.el.attr('transform', `translate(${node.position().x}, ${node.position().y})`);
// document
// .querySelector(`[id="${data.domId}"]`)
// .setAttribute('transform', `translate(${node.position().x}, ${node.position().y})`);
log.info('Id = ', data.domId, svg.select(`[id="${data.domId}"]`), data.el.node());
});
cy.edges().map((edge, id) => {
const data = edge.data();
if (edge[0]._private.bodyBounds) {
const bounds = edge[0]._private.rscratch;
log.info(
id,
// 'x:',
// edge.controlPoints(),
// 'y:',
edge[0]._private.rscratch
// 'w:',
// edge.boundingbox().w,
// 'h:',
// edge.boundingbox().h,
// edge.midPoint()
);
// data.el.attr('transform', `translate(${node.position().x}, ${node.position().y})`);
// edgesEl
// .insert('line')
// .attr('x1', bounds.startX)
// .attr('y1', bounds.startY)
// .attr('x2', bounds.endX)
// .attr('y2', bounds.endY)
// .attr('class', 'path');
edgesEl
.insert('path')
// Todo use regular line function
.attr(
'd',
`M ${bounds.startX},${bounds.startY} L ${bounds.midX},${bounds.midY} L${bounds.endX},${bounds.endY} `
)
.attr('class', 'path')
.attr('fill', 'none');
}
});
log.info(cy.json());
setupGraphViewbox({}, svg, conf.diagramPadding, conf.useMaxWidth);
resolve();
}, 500);
});
});
log.info(cy.json());
setupGraphViewbox({}, svg, conf.diagramPadding, conf.useMaxWidth);
};
export default {

6
src/mermaidAPI.ts
View File

@@ -118,12 +118,12 @@ export const decodeEntities = function (text: string): string {
* element will be removed when rendering is completed.
* @returns {void}
*/
const render = function (
const render = async function (
id: string,
text: string,
cb: (svgCode: string, bindFunctions?: (element: Element) => void) => void,
container?: Element
): void {
): Promise<void> {
configApi.reset();
text = text.replace(/\r\n?/g, '\n'); // parser problems on CRLF ignore all CR and leave LF;;
const graphInit = utils.detectInit(text);
@@ -299,7 +299,7 @@ const render = function (
svg.insertBefore(style1, firstChild);
try {
diag.renderer.draw(text, id, pkg.version, diag);
await diag.renderer.draw(text, id, pkg.version, diag);
} catch (e) {
errorRenderer.draw(id, pkg.version);
throw e;

13
yarn.lock
View File

@@ -4750,6 +4750,14 @@ cypress@9.7.0:
untildify "^4.0.0"
yauzl "^2.10.0"
cytoscape@^3.23.0:
version "3.23.0"
resolved "https://registry.yarnpkg.com/cytoscape/-/cytoscape-3.23.0.tgz#054ee05a6d0aa3b4f139382bbf2f4e5226df3c6d"
integrity sha512-gRZqJj/1kiAVPkrVFvz/GccxsXhF3Qwpptl32gKKypO4IlqnKBjTOu+HbXtEggSGzC5KCaHp3/F7GgENrtsFkA==
dependencies:
heap "^0.2.6"
lodash "^4.17.21"
"d3-array@2 - 3", "d3-array@2.10.0 - 3", "d3-array@2.5.0 - 3", d3-array@3:
version "3.1.1"
resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-3.1.1.tgz#7797eb53ead6b9083c75a45a681e93fc41bc468c"
@@ -6828,6 +6836,11 @@ he@^1.1.0:
resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
heap@^0.2.6:
version "0.2.7"
resolved "https://registry.yarnpkg.com/heap/-/heap-0.2.7.tgz#1e6adf711d3f27ce35a81fe3b7bd576c2260a8fc"
integrity sha512-2bsegYkkHO+h/9MGbn6KWcE45cHZgPANo5LXF7EvWdT0yT2EguSVO1nDgU5c8+ZOPwp2vMNa7YFsJhVcDR9Sdg==
highlight.js@^10.5.0:
version "10.7.3"
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531"