Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed styling for lines for ELK flowchart #4844

Merged
39 changes: 39 additions & 0 deletions cypress/integration/rendering/flowchart-elk.spec.js
Original file line number Diff line number Diff line change
@@ -844,3 +844,42 @@ end
});
});
});

describe('Title and arrow styling #4813', () => {
it('should render a flowchart with title', () => {
const titleString = 'Test Title';
renderGraph(
`---
title: ${titleString}
---
flowchart LR
A-->B
A-->C`,
{ flowchart: { defaultRenderer: 'elk' } }
);
cy.get('svg').should((svg) => {
const title = svg[0].querySelector('text');
expect(title.textContent).to.contain(titleString);
});
});

it('Render with stylized arrows', () => {
renderGraph(
`
flowchart LR
A-->B
B-.-oC
C==xD
D ~~~ A`,
{ flowchart: { defaultRenderer: 'elk' } }
);
cy.get('svg').should((svg) => {
const edges = svg[0].querySelectorAll('.edges path');
console.log(edges);
expect(edges[0]).to.have.attr('pattern', 'solid');
expect(edges[1]).to.have.attr('pattern', 'dotted');
expect(edges[2]).to.have.css('stroke-width', '3.5px');
expect(edges[3]).to.have.css('stroke-width', '1.5px');
});
});
});
2 changes: 1 addition & 1 deletion packages/mermaid-flowchart-elk/src/diagram-definition.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// @ts-ignore: JISON typing missing
import parser from '../../mermaid/src/diagrams/flowchart/parser/flow.jison';
import * as db from '../../mermaid/src/diagrams/flowchart/flowDb.js';
import db from '../../mermaid/src/diagrams/flowchart/flowDb.js';
import styles from '../../mermaid/src/diagrams/flowchart/styles.js';
import renderer from './flowRenderer-elk.js';

19 changes: 9 additions & 10 deletions packages/mermaid-flowchart-elk/src/flowRenderer-elk.js
Original file line number Diff line number Diff line change
@@ -6,6 +6,7 @@
import { labelHelper } from '../../mermaid/src/dagre-wrapper/shapes/util.js';
import { getConfig } from '../../mermaid/src/config.js';
import { log } from '../../mermaid/src/logger.js';
import utils from '../../mermaid/src/utils.js';
import { setupGraphViewbox } from '../../mermaid/src/setupGraphViewbox.js';
import common from '../../mermaid/src/diagrams/common/common.js';
import { interpolateToCurve, getStylesFromArray } from '../../mermaid/src/utils.js';
@@ -63,7 +64,7 @@
let vertexText = vertex.text !== undefined ? vertex.text : vertex.id;

// We create a SVG label, either by delegating to addHtmlLabel or manually
let vertexNode;

Check warning on line 67 in packages/mermaid-flowchart-elk/src/flowRenderer-elk.js

GitHub Actions / lint

'vertexNode' is defined but never used
const labelData = { width: 0, height: 0 };

const ports = [
@@ -187,7 +188,7 @@
nodeEl = await insertNode(nodes, node, vertex.dir);
boundingBox = nodeEl.node().getBBox();
} else {
const svgLabel = doc.createElementNS('http://www.w3.org/2000/svg', 'text');

Check warning on line 191 in packages/mermaid-flowchart-elk/src/flowRenderer-elk.js

GitHub Actions / lint

'svgLabel' is assigned a value but never used
// svgLabel.setAttribute('style', styles.labelStyle.replace('color:', 'fill:'));
// const rows = vertexText.split(common.lineBreakRegex);
// for (const row of rows) {
@@ -393,7 +394,7 @@
* Add edges to graph based on parsed graph definition
*
* @param {object} edges The edges to add to the graph
* @param {object} g The graph object

Check warning on line 397 in packages/mermaid-flowchart-elk/src/flowRenderer-elk.js

GitHub Actions / lint

Expected @param names to be "edges, diagObj, graph, svg". Got "edges, g, cy, diagObj, graph, svg"
* @param cy
* @param diagObj
* @param graph
@@ -655,6 +656,11 @@
.attr('d', curve(points))
.attr('class', 'path ' + edgeData.classes)
.attr('fill', 'none');
Object.entries(edgeData).forEach(([key, value]) => {
if (key !== 'classes') {
edgePath.attr(key, value);
}
});
const edgeG = edgesEl.insert('g').attr('class', 'edgeLabel');
const edgeWithLabel = select(edgeG.node().appendChild(edge.labelEl));
const box = edgeWithLabel.node().firstChild.getBoundingClientRect();
@@ -671,7 +677,7 @@
/**
* Recursive function that iterates over an array of nodes and inserts the children of each node.
* It also recursively populates the inserts the children of the children and so on.
* @param {*} graph

Check warning on line 680 in packages/mermaid-flowchart-elk/src/flowRenderer-elk.js

GitHub Actions / lint

Expected @param names to be "nodeArray, parentLookupDb". Got "graph, nodeArray, parentLookupDb"
* @param nodeArray
* @param parentLookupDb
*/
@@ -702,21 +708,15 @@
*/

export const draw = async function (text, id, _version, diagObj) {
// Add temporary render element
diagObj.db.clear();
const { securityLevel, flowchart: conf } = getConfig();
nodeDb = {};
portPos = {};
diagObj.db.setGen('gen-2');
// Parse the graph definition
diagObj.parser.parse(text);

const renderEl = select('body').append('div').attr('style', 'height:400px').attr('id', 'cy');
let graph = {
id: 'root',
layoutOptions: {
'elk.hierarchyHandling': 'INCLUDE_CHILDREN',
'org.eclipse.elk.padding': '[top=100, left=100, bottom=110, right=110]',
'elk.layered.spacing.edgeNodeBetweenLayers': '30',
'elk.layered.spacing.edgeNodeBetweenLayers': conf?.nodeSpacing ? `${conf.nodeSpacing}` : '30',
// 'elk.layered.mergeEdges': 'true',
'elk.direction': 'DOWN',
// 'elk.ports.sameLayerEdges': true,
@@ -744,7 +744,6 @@
graph.layoutOptions['elk.direction'] = 'LEFT';
break;
}
const { securityLevel, flowchart: conf } = getConfig();

// Find the root dom node to ne used in rendering
// Handle root and document for when rendering in sandbox mode
@@ -759,7 +758,6 @@
const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;

const svg = root.select(`[id="${id}"]`);

// Define the supported markers for the diagram
const markers = ['point', 'circle', 'cross'];

@@ -841,6 +839,7 @@
log.info('after layout', JSON.stringify(graph, null, 2));
const g = await elk.layout(graph);
drawNodes(0, 0, g.children, svg, subGraphsEl, diagObj, 0);
utils.insertTitle(svg, 'flowchartTitleText', conf.titleTopMargin, diagObj.db.getDiagramTitle());
log.info('after layout', g);
g.edges?.map((edge) => {
insertEdge(edgesEl, edge, edge.edgeData, diagObj, parentLookupDb, id);
Loading