#5237 Edge labels for ELK - mergwe
This commit is contained in:
commit
32a62bede8
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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 = {};
|
||||||
|
|
|
@ -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;
|
||||||
|
};
|
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue