GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

#5237 First elk iteration

Browse Source
This commit is contained in:
Knut Sveidqvist 2024-05-03 12:02:19 +02:00
parent 703c25a6e2
commit 913b29dbcb
9 changed files with 64 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
cypress/platform/knsv2.html
View File

@ -14,9 +14,20 @@
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap" rel="stylesheet"> <link
href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
rel="stylesheet"
/>
<style> <style>
body { body {
@ -58,28 +69,13 @@
/* tspan { /* tspan {
font-size: 6px !important; font-size: 6px !important;
} */ } */
<style class="style-fonts">
@font-face {
font-family: "Virgil";
src: url("https://excalidraw.com/Virgil.woff2");
}
@font-face {
font-family: "Cascadia";
src: url("https://excalidraw.com/Cascadia.woff2");
}
@font-face {
font-family: "Assistant";
src: url("https://excalidraw.com/Assistant-Regular.woff2");
}
</style>
</style> </style>
</head> </head>
<body> <body>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
stateDiagram-v2 stateDiagram-v2
stateId Chimp --> Gorilla
Chimp --> Bonobo
</pre </pre
> >
@ -469,7 +465,8 @@ mindmap
// }); // });
mermaid.initialize({ mermaid.initialize({
flowchart: { titleTopMargin: 10 }, flowchart: { titleTopMargin: 10 },
fontFamily: 'Kalam', /* fontFamily: 'Kalam', */
fontFamily: 'Caveat',
sequence: { sequence: {
actorFontFamily: 'courier', actorFontFamily: 'courier',
noteFontFamily: 'courier', noteFontFamily: 'courier',

9
packages/mermaid/src/diagrams/state/stateDb.js
View File

@ -575,7 +575,7 @@ const trimColon = (str) => (str && str[0] === ':' ? str.substr(1).trim() : str.t
const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, altFlag, useRough) => { const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, altFlag, useRough) => {
console.log( console.log(
'parent, parsedItemm, diagramStates, nodes, edges, altFlag, useRough:', 'abc88 parent, parsedItemm, diagramStates, nodes, edges, altFlag, useRough:',
parent, parent,
parsedItem, parsedItem,
diagramStates, diagramStates,
@ -716,9 +716,7 @@ const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, altFlag, u
//add parent id to noteData //add parent id to noteData
noteData.parentId = parentId; noteData.parentId = parentId;
nodes.push(groupData); nodes.push(groupData, noteData, nodeData);
nodes.push(noteData);
nodes.push(nodeData);
let from = itemId; let from = itemId;
let to = noteData.id; let to = noteData.id;
@ -741,6 +739,7 @@ const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, altFlag, u
labelpos: G_EDGE_LABELPOS, labelpos: G_EDGE_LABELPOS,
labelType: G_EDGE_LABELTYPE, labelType: G_EDGE_LABELTYPE,
thickness: G_EDGE_THICKNESS, thickness: G_EDGE_THICKNESS,
useRough,
}); });
} else { } else {
nodes.push(nodeData); nodes.push(nodeData);
@ -836,7 +835,7 @@ export const getData = () => {
extract(getRootDocV2()); extract(getRootDocV2());
const diagramStates = getStates(); const diagramStates = getStates();
const useRough = false; const useRough = true;
dataFetcher(undefined, getRootDocV2(), diagramStates, nodes, edges, true, useRough); dataFetcher(undefined, getRootDocV2(), diagramStates, nodes, edges, true, useRough);
return { nodes, edges, other: {} }; return { nodes, edges, other: {} };

3
packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts
View File

@ -88,8 +88,7 @@ export const draw = async function (text: string, id: string, _version: string,
data4Layout.type = diag.type; data4Layout.type = diag.type;
data4Layout.layoutAlgorithm = 'dagre-wrapper'; data4Layout.layoutAlgorithm = 'dagre-wrapper';
//data4Layout.layoutAlgorithm = 'elk'; // data4Layout.layoutAlgorithm = 'elk';
data4Layout.skin = 'roughjs';
data4Layout.direction = DIR; data4Layout.direction = DIR;
data4Layout.nodeSpacing = conf.nodeSpacing || 50; data4Layout.nodeSpacing = conf.nodeSpacing || 50;
data4Layout.rankSpacing = conf.rankSpacing || 50; data4Layout.rankSpacing = conf.rankSpacing || 50;

1
packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
View File

@ -173,7 +173,6 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster, sit
}; };
export const render = async (data4Layout, svg, element) => { export const render = async (data4Layout, svg, element) => {
console.warn('HERERERERERER');
// Create the input mermaid.graph // Create the input mermaid.graph
const graph = new graphlib.Graph({ const graph = new graphlib.Graph({
multigraph: true, multigraph: true,

20
packages/mermaid/src/rendering-util/layout-algorithms/elk/index.js
View File

@ -306,7 +306,7 @@ export const addEdges = function (dataForLayout, graph, svg) {
// } // }
edges.forEach(function (edge) { edges.forEach(function (edge) {
console.log('edge abc78', edge.id); console.log('edge abc88', edge);
// Identify Link // Identify Link
const linkIdBase = edge.id; // 'L-' + edge.start + '-' + edge.end; const linkIdBase = edge.id; // 'L-' + edge.start + '-' + edge.end;
// count the links from+to the same node to give unique id // count the links from+to the same node to give unique id
@ -429,6 +429,7 @@ export const addEdges = function (dataForLayout, graph, svg) {
// Add the edge to the graph // Add the edge to the graph
graph.edges.push({ graph.edges.push({
id: 'e' + edge.start + edge.end, id: 'e' + edge.start + edge.end,
...edge,
sources: [source], sources: [source],
targets: [target], targets: [target],
sourceId, sourceId,
@ -515,6 +516,8 @@ export const render = async (data4Layout, svg, element) => {
const parentLookupDb = {}; const parentLookupDb = {};
graph = await addVertices(svg, data4Layout, parentLookupDb, graph); graph = await addVertices(svg, data4Layout, parentLookupDb, graph);
console.log('graph', graph, data4Layout);
// Add the nodes and edges to the graph // Add the nodes and edges to the graph
// data4Layout.nodes.forEach((node) => { // data4Layout.nodes.forEach((node) => {
// graph.setNode(node.id, { ...node }); // graph.setNode(node.id, { ...node });
@ -600,6 +603,21 @@ export const render = async (data4Layout, svg, element) => {
console.log('after layout', g); console.log('after layout', g);
g.edges?.map((edge) => { g.edges?.map((edge) => {
// (elem, edge, clusterDb, diagramType, graph, id) // (elem, edge, clusterDb, diagramType, graph, id)
edge.start = nodeDb[edge.sources[0]];
edge.end = nodeDb[edge.targets[0]];
const offset = { x: 0, y: 0 };
const src = edge.sections[0].startPoint;
const dest = edge.sections[0].endPoint;
const segments = edge.sections[0].bendPoints ? edge.sections[0].bendPoints : [];
const segPoints = segments.map((segment) => {
return { x: segment.x + offset.x, y: segment.y + offset.y };
});
edge.points = [
{ x: src.x + offset.x, y: src.y + offset.y },
...segPoints,
{ x: dest.x + offset.x, y: dest.y + offset.y },
];
insertEdge(edgesEl, edge, clusterDb, data4Layout.type, g, data4Layout.diagramId); insertEdge(edgesEl, edge, clusterDb, data4Layout.type, g, data4Layout.diagramId);
}); });
// setupGraphViewbox({}, svg, conf.diagramPadding, conf.useMaxWidth); // setupGraphViewbox({}, svg, conf.diagramPadding, conf.useMaxWidth);

3
packages/mermaid/src/rendering-util/render.js
View File

@ -1,10 +1,7 @@
export const render = async (data4Layout, svg, element) => { export const render = async (data4Layout, svg, element) => {
switch (data4Layout.layoutAlgorithm) { switch (data4Layout.layoutAlgorithm) {
case 'dagre-wrapper': { case 'dagre-wrapper': {
// const layoutRenderer = await import('../dagre-wrapper/index-refactored.js');
const layoutRenderer = await import('./layout-algorithms/dagre/index.js'); const layoutRenderer = await import('./layout-algorithms/dagre/index.js');
return layoutRenderer.render(data4Layout, svg, element); return layoutRenderer.render(data4Layout, svg, element);
} }
case 'elk': { case 'elk': {

1
packages/mermaid/src/rendering-util/rendering-elements/createLabel.js
View File

@ -36,6 +36,7 @@ function addHtmlLabel(node) {
applyStyle(div, node.labelStyle); applyStyle(div, node.labelStyle);
div.style('display', 'inline-block'); div.style('display', 'inline-block');
div.style('padding-right', '1px');
// Fix for firefox // Fix for firefox
div.style('white-space', 'nowrap'); div.style('white-space', 'nowrap');
div.attr('xmlns', 'http://www.w3.org/1999/xhtml'); div.attr('xmlns', 'http://www.w3.org/1999/xhtml');

34
packages/mermaid/src/rendering-util/rendering-elements/edges.js
View File

@ -382,18 +382,21 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, graph, i
const tail = edge.start; const tail = edge.start;
var head = edge.end; var head = edge.end;
log.info('abc88 InsertEdge: ', edge); log.info('abc88 InsertEdge: ', points);
if (head.intersect && tail.intersect) { if (head.intersect && tail.intersect) {
points = points.slice(1, edge.points.length - 1); log.info('abc88 InsertEdge: 0.5', points);
points.unshift(tail.intersect(points[0])); // points = points.slice(1, edge.points.length - 1);
log.info( log.info('abc88 InsertEdge: 0.7', points);
'Last point', // points.unshift(tail.intersect(points[0]));
points[points.length - 1], // log.info(
head, // 'Last point abc88',
head.intersect(points[points.length - 1]) // points[points.length - 1],
); // head,
points.push(head.intersect(points[points.length - 1])); // head.intersect(points[points.length - 1])
// );
// points.push(head.intersect(points[points.length - 1]));
} }
log.info('abc88 InsertEdge 2: ', points);
if (edge.toCluster) { if (edge.toCluster) {
log.info('to cluster abc88', clusterDb[edge.toCluster]); log.info('to cluster abc88', clusterDb[edge.toCluster]);
points = cutPathAtIntersect(edge.points, clusterDb[edge.toCluster].node); points = cutPathAtIntersect(edge.points, clusterDb[edge.toCluster].node);
@ -436,7 +439,7 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, graph, i
strokeClasses = 'edge-thickness-thick'; strokeClasses = 'edge-thickness-thick';
break; break;
default: default:
strokeClasses = ''; strokeClasses = 'edge-thickness-normal';
} }
switch (edge.pattern) { switch (edge.pattern) {
case 'solid': case 'solid':
@ -448,6 +451,8 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, graph, i
case 'dashed': case 'dashed':
strokeClasses += ' edge-pattern-dashed'; strokeClasses += ' edge-pattern-dashed';
break; break;
default:
strokeClasses += ' edge-pattern-solid';
} }
let useRough = edge.useRough; let useRough = edge.useRough;
let svgPath; let svgPath;
@ -460,8 +465,9 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, graph, i
if (useRough) { if (useRough) {
const rc = rough.svg(elem); const rc = rough.svg(elem);
const svgPathNode = rc.curve(pointArr, { stroke: 'green' }); const svgPathNode = rc.curve(pointArr, { roughness: 0.5, stroke: 'green' });
console.log('svgPathNode', svgPathNode); console.log('svgPathNode abc88', svgPathNode);
strokeClasses += ' transition';
// const svgPath2 = elem // const svgPath2 = elem
// .append('path') // .append('path')
// .attr('d', lineFunction(lineData)) // .attr('d', lineFunction(lineData))
@ -469,7 +475,7 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, graph, i
// .attr('class', ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : '')) // .attr('class', ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : ''))
// .attr('style', edge.style); // .attr('style', edge.style);
// console.log('svgPath2', svgPath2.node()); console.log('svgPath2 abc88', strokeClasses + (edge.classes ? ' ' + edge.classes : ''));
svgPath = select(svgPathNode) svgPath = select(svgPathNode)
.select('path') .select('path')
.attr('id', edge.id) .attr('id', edge.id)

1
packages/mermaid/src/rendering-util/rendering-elements/intersect/intersect-rect.js
View File

@ -1,4 +1,5 @@
const intersectRect = (node, point) => { const intersectRect = (node, point) => {
console.log('intersect.rect abc88', node, point);
var x = node.x; var x = node.x;
var y = node.y; var y = node.y;