mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-14 06:43:25 +08:00
#5237 First elk iteration
This commit is contained in:
Knut Sveidqvist
parent
703c25a6e2
commit
913b29dbcb
@ -14,9 +14,20 @@
|
||||
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<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 rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<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=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>
|
||||
body {
|
||||
@ -58,28 +69,13 @@
|
||||
/* tspan {
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<pre id="diagram" class="mermaid">
|
||||
stateDiagram-v2
|
||||
stateId
|
||||
|
||||
Chimp --> Gorilla
|
||||
Chimp --> Bonobo
|
||||
|
||||
</pre
|
||||
>
|
||||
@ -469,7 +465,8 @@ mindmap
|
||||
// });
|
||||
mermaid.initialize({
|
||||
flowchart: { titleTopMargin: 10 },
|
||||
fontFamily: 'Kalam',
|
||||
/* fontFamily: 'Kalam', */
|
||||
fontFamily: 'Caveat',
|
||||
sequence: {
|
||||
actorFontFamily: 'courier',
|
||||
noteFontFamily: 'courier',
|
||||
|
||||
@ -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) => {
|
||||
console.log(
|
||||
'parent, parsedItemm, diagramStates, nodes, edges, altFlag, useRough:',
|
||||
'abc88 parent, parsedItemm, diagramStates, nodes, edges, altFlag, useRough:',
|
||||
parent,
|
||||
parsedItem,
|
||||
diagramStates,
|
||||
@ -716,9 +716,7 @@ const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, altFlag, u
|
||||
//add parent id to noteData
|
||||
noteData.parentId = parentId;
|
||||
|
||||
nodes.push(groupData);
|
||||
nodes.push(noteData);
|
||||
nodes.push(nodeData);
|
||||
nodes.push(groupData, noteData, nodeData);
|
||||
|
||||
let from = itemId;
|
||||
let to = noteData.id;
|
||||
@ -741,6 +739,7 @@ const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, altFlag, u
|
||||
labelpos: G_EDGE_LABELPOS,
|
||||
labelType: G_EDGE_LABELTYPE,
|
||||
thickness: G_EDGE_THICKNESS,
|
||||
useRough,
|
||||
});
|
||||
} else {
|
||||
nodes.push(nodeData);
|
||||
@ -836,7 +835,7 @@ export const getData = () => {
|
||||
extract(getRootDocV2());
|
||||
const diagramStates = getStates();
|
||||
|
||||
const useRough = false;
|
||||
const useRough = true;
|
||||
dataFetcher(undefined, getRootDocV2(), diagramStates, nodes, edges, true, useRough);
|
||||
|
||||
return { nodes, edges, other: {} };
|
||||
|
||||
@ -88,8 +88,7 @@ export const draw = async function (text: string, id: string, _version: string,
|
||||
|
||||
data4Layout.type = diag.type;
|
||||
data4Layout.layoutAlgorithm = 'dagre-wrapper';
|
||||
//data4Layout.layoutAlgorithm = 'elk';
|
||||
data4Layout.skin = 'roughjs';
|
||||
// data4Layout.layoutAlgorithm = 'elk';
|
||||
data4Layout.direction = DIR;
|
||||
data4Layout.nodeSpacing = conf.nodeSpacing || 50;
|
||||
data4Layout.rankSpacing = conf.rankSpacing || 50;
|
||||
|
||||
@ -173,7 +173,6 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster, sit
|
||||
};
|
||||
|
||||
export const render = async (data4Layout, svg, element) => {
|
||||
console.warn('HERERERERERER');
|
||||
// Create the input mermaid.graph
|
||||
const graph = new graphlib.Graph({
|
||||
multigraph: true,
|
||||
|
||||
@ -306,7 +306,7 @@ export const addEdges = function (dataForLayout, graph, svg) {
|
||||
// }
|
||||
|
||||
edges.forEach(function (edge) {
|
||||
console.log('edge abc78', edge.id);
|
||||
console.log('edge abc88', edge);
|
||||
// Identify Link
|
||||
const linkIdBase = edge.id; // 'L-' + edge.start + '-' + edge.end;
|
||||
// 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
|
||||
graph.edges.push({
|
||||
id: 'e' + edge.start + edge.end,
|
||||
...edge,
|
||||
sources: [source],
|
||||
targets: [target],
|
||||
sourceId,
|
||||
@ -515,6 +516,8 @@ export const render = async (data4Layout, svg, element) => {
|
||||
const parentLookupDb = {};
|
||||
graph = await addVertices(svg, data4Layout, parentLookupDb, graph);
|
||||
|
||||
console.log('graph', graph, data4Layout);
|
||||
|
||||
// Add the nodes and edges to the graph
|
||||
// data4Layout.nodes.forEach((node) => {
|
||||
// graph.setNode(node.id, { ...node });
|
||||
@ -600,6 +603,21 @@ export const render = async (data4Layout, svg, element) => {
|
||||
console.log('after layout', g);
|
||||
g.edges?.map((edge) => {
|
||||
// (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);
|
||||
});
|
||||
// setupGraphViewbox({}, svg, conf.diagramPadding, conf.useMaxWidth);
|
||||
|
||||
@ -1,10 +1,7 @@
|
||||
export const render = async (data4Layout, svg, element) => {
|
||||
switch (data4Layout.layoutAlgorithm) {
|
||||
case 'dagre-wrapper': {
|
||||
// const layoutRenderer = await import('../dagre-wrapper/index-refactored.js');
|
||||
|
||||
const layoutRenderer = await import('./layout-algorithms/dagre/index.js');
|
||||
|
||||
return layoutRenderer.render(data4Layout, svg, element);
|
||||
}
|
||||
case 'elk': {
|
||||
|
||||
@ -36,6 +36,7 @@ function addHtmlLabel(node) {
|
||||
|
||||
applyStyle(div, node.labelStyle);
|
||||
div.style('display', 'inline-block');
|
||||
div.style('padding-right', '1px');
|
||||
// Fix for firefox
|
||||
div.style('white-space', 'nowrap');
|
||||
div.attr('xmlns', 'http://www.w3.org/1999/xhtml');
|
||||
|
||||
@ -382,18 +382,21 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, graph, i
|
||||
const tail = edge.start;
|
||||
var head = edge.end;
|
||||
|
||||
log.info('abc88 InsertEdge: ', edge);
|
||||
log.info('abc88 InsertEdge: ', points);
|
||||
if (head.intersect && tail.intersect) {
|
||||
points = points.slice(1, edge.points.length - 1);
|
||||
points.unshift(tail.intersect(points[0]));
|
||||
log.info(
|
||||
'Last point',
|
||||
points[points.length - 1],
|
||||
head,
|
||||
head.intersect(points[points.length - 1])
|
||||
);
|
||||
points.push(head.intersect(points[points.length - 1]));
|
||||
log.info('abc88 InsertEdge: 0.5', points);
|
||||
// points = points.slice(1, edge.points.length - 1);
|
||||
log.info('abc88 InsertEdge: 0.7', points);
|
||||
// points.unshift(tail.intersect(points[0]));
|
||||
// log.info(
|
||||
// 'Last point abc88',
|
||||
// points[points.length - 1],
|
||||
// head,
|
||||
// head.intersect(points[points.length - 1])
|
||||
// );
|
||||
// points.push(head.intersect(points[points.length - 1]));
|
||||
}
|
||||
log.info('abc88 InsertEdge 2: ', points);
|
||||
if (edge.toCluster) {
|
||||
log.info('to cluster abc88', clusterDb[edge.toCluster]);
|
||||
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';
|
||||
break;
|
||||
default:
|
||||
strokeClasses = '';
|
||||
strokeClasses = 'edge-thickness-normal';
|
||||
}
|
||||
switch (edge.pattern) {
|
||||
case 'solid':
|
||||
@ -448,6 +451,8 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, graph, i
|
||||
case 'dashed':
|
||||
strokeClasses += ' edge-pattern-dashed';
|
||||
break;
|
||||
default:
|
||||
strokeClasses += ' edge-pattern-solid';
|
||||
}
|
||||
let useRough = edge.useRough;
|
||||
let svgPath;
|
||||
@ -460,8 +465,9 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, graph, i
|
||||
|
||||
if (useRough) {
|
||||
const rc = rough.svg(elem);
|
||||
const svgPathNode = rc.curve(pointArr, { stroke: 'green' });
|
||||
console.log('svgPathNode', svgPathNode);
|
||||
const svgPathNode = rc.curve(pointArr, { roughness: 0.5, stroke: 'green' });
|
||||
console.log('svgPathNode abc88', svgPathNode);
|
||||
strokeClasses += ' transition';
|
||||
// const svgPath2 = elem
|
||||
// .append('path')
|
||||
// .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('style', edge.style);
|
||||
|
||||
// console.log('svgPath2', svgPath2.node());
|
||||
console.log('svgPath2 abc88', strokeClasses + (edge.classes ? ' ' + edge.classes : ''));
|
||||
svgPath = select(svgPathNode)
|
||||
.select('path')
|
||||
.attr('id', edge.id)
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
const intersectRect = (node, point) => {
|
||||
console.log('intersect.rect abc88', node, point);
|
||||
var x = node.x;
|
||||
var y = node.y;
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user