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

#5237 Edge labels for ELK - mergwe

This commit is contained in:
Knut Sveidqvist 2024-05-08 14:16:04 +02:00
parent 3ff4a6910d 683695bec2
commit 32a62bede8
5 changed files with 67 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
cypress/platform/knsv2.html
View File

@ -4,7 +4,7 @@
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" /> <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link <link
rel="stylesheet" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/> />
<link <link
href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css" href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
@ -32,30 +32,25 @@
<style> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
/* background: #333; */ /* background:#333; */
font-family: 'Arial'; font-family: 'Arial';
/* font-size: 18px !important; */ /* font-size: 18px !important; */
} }
h1 { h1 {
color: grey; color: grey;
} }
.mermaid {
border: 1px solid #ddd;
margin: 10px;
}
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
.mermaid svg { .mermaid svg {
/* font-size: 18px !important; */ /* font-size: 18px !important; */
/* background-color: #efefef; */
/* background-color: #333; */ background-color: #efefef;
/* background-image: radial-gradient(#333 51%, transparent 91%), */ background-image: radial-gradient(#fff 51%, transparent 91%),
radial-gradient(#333 51%, transparent 91%); radial-gradient(#fff 51%, transparent 91%);
background-size: 20px 20px; background-size: 20px 20px;
background-position: 0 0, 10px 10px; background-position: 0 0, 10px 10px;
background-repeat: repeat; background-repeat: repeat;
border: 2px solid rgb(131, 142, 205);
} }
.malware { .malware {
position: fixed; position: fixed;
@ -73,8 +68,8 @@
font-size: 72px; font-size: 72px;
} }
/* tspan { /* tspan {
font-size: 6px !important; font-size: 6px !important;
} */ } */
</style> </style>
</head> </head>
<body> <body>
@ -165,9 +160,10 @@ flowchart
<pre id="diagram" class="mermaid2"> <pre id="diagram" class="mermaid2">
flowchart RL flowchart RL
subgraph "`one`" subgraph "`one`"
id a1 -- l1 --> a2
end a1 -- l2 --> a2
end
</pre> </pre>
<pre id="diagram" class="mermaid2"> <pre id="diagram" class="mermaid2">
flowchart RL flowchart RL

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

@ -45,6 +45,7 @@ import {
PARENT_ID, PARENT_ID,
NOTE, NOTE,
PARENT, PARENT,
CSS_EDGE_NOTE_EDGE,
} from './stateCommon.js'; } from './stateCommon.js';
import { node } from 'stylis'; import { node } from 'stylis';
@ -704,7 +705,7 @@ const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, altFlag, u
//add parent id to groupData //add parent id to groupData
groupData.id = parentNodeId; groupData.id = parentNodeId;
//add parent id to noteData //add parent id to noteData
noteData.parentId = parentId; noteData.parentId = parentNodeId;
//insert groupData //insert groupData
insertOrUpdateNode(nodes, groupData); insertOrUpdateNode(nodes, groupData);
@ -754,6 +755,9 @@ const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, altFlag, u
* @param nodeData * @param nodeData
*/ */
function insertOrUpdateNode(nodes, nodeData) { function insertOrUpdateNode(nodes, nodeData) {
if (!nodeData.id || nodeData.id === '</join></fork>') {
return;
}
const existingNodeData = nodes.find((node) => node.id === nodeData.id); const existingNodeData = nodes.find((node) => node.id === nodeData.id);
if (existingNodeData) { if (existingNodeData) {
//update the existing nodeData //update the existing nodeData

2
packages/mermaid/src/rendering-util/rendering-elements/nodes.js
View File

@ -4,6 +4,7 @@ import { stateStart } from './shapes/stateStart.ts';
import { stateEnd } from './shapes/stateEnd.ts'; import { stateEnd } from './shapes/stateEnd.ts';
import { forkJoin } from './shapes/forkJoin.ts'; import { forkJoin } from './shapes/forkJoin.ts';
import { choice } from './shapes/choice.ts'; import { choice } from './shapes/choice.ts';
import {note} from './shapes/note.ts';
import { getConfig } from '$root/diagram-api/diagramAPI.js'; import { getConfig } from '$root/diagram-api/diagramAPI.js';
const formatClass = (str) => { const formatClass = (str) => {
@ -20,6 +21,7 @@ const shapes = {
fork: forkJoin, fork: forkJoin,
join: forkJoin, join: forkJoin,
choice, choice,
note,
}; };
let nodeElems = {}; let nodeElems = {};

37
packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts Normal file
View File

@ -0,0 +1,37 @@
import { log } from '$root/logger.js';
import { labelHelper, updateNodeBounds } from './util.js';
import intersect from '../intersect/index.js';
import type { Node } from '$root/rendering-util/types.d.ts';
export const note = async (parent: SVGAElement, node: Node) => {
const useHtmlLabels = node.useHtmlLabels ;
if (!useHtmlLabels) {
node.centerLabel = true;
}
const { shapeSvg, bbox, halfPadding } = await labelHelper(
parent,
node,
'node ' + node.classes,
true
);
log.info('Classes = ', node.classes);
// add the rect
const rect = shapeSvg.insert('rect', ':first-child');
rect
.attr('rx', node.rx)
.attr('ry', node.ry)
.attr('x', -bbox.width / 2 - halfPadding)
.attr('y', -bbox.height / 2 - halfPadding)
.attr('width', bbox.width + node.padding)
.attr('height', bbox.height + node.padding);
updateNodeBounds(node, rect);
node.intersect = function (point) {
return intersect.rect(node, point);
};
return shapeSvg;
};

19
packages/mermaid/src/rendering-util/types.d.ts vendored
View File

@ -13,13 +13,15 @@ interface Node {
label?: string; label?: string;
parentId?: string; parentId?: string;
position?: string; position?: string;
styles?: string; styles?: string; // Pick one, don't need both `styles` & `style`, or have (nodeStyle + labelStyle)
classes?: string; style?: string;
classes?: string; // Pick one `classes` vs `class`
class?: string;
// Flowchart specific properties // Flowchart specific properties
labelType?: string; labelType?: string; // Always use markdown string?
domId: string; domId: string;
// Rendering specific properties for both Flowchart and State Diagram nodes // Rendering specific properties for both Flowchart and State Diagram nodes
dir?: string; dir?: string; // Only relevant for isGroup true, i.e. a sub-graph or composite state.
haveCallback?: boolean; haveCallback?: boolean;
labelStyle?: string; labelStyle?: string;
labelText?: string; labelText?: string;
@ -31,16 +33,17 @@ interface Node {
ry?: number; ry?: number;
shape?: string; shape?: string;
tooltip?: string; tooltip?: string;
type: string; type: string; // replace with isGroup: boolean, default false
width?: number; width?: number;
height?: number; height?: number;
// Specific properties for State Diagram nodes TODO remove and use generic properties // Specific properties for State Diagram nodes TODO remove and use generic properties
intersect?: (point: any) => any; intersect?: (point: any) => any;
style?: string;
class?: string; borders?: string; //Maybe have it similar to nodeStyle, labelStyle, have it as borderStyle (check the usage)
borders?: string;
useRough?: boolean; useRough?: boolean;
useHtmlLabels?: boolean;
centerLabel?: boolean;
} }
// Common properties for any edge in the system // Common properties for any edge in the system