From c08f927d603139f2619e71df47eda2801cf7164d Mon Sep 17 00:00:00 2001 From: itsalam Date: Fri, 15 Sep 2023 13:17:13 -0700 Subject: [PATCH 1/7] Fixed styling for lines for ELK flowchart --- .../rendering/flowchart-elk.spec.js | 40 +++++++++++++++++++ .../flowchart/elk/flowRenderer-elk.js | 13 ++++-- .../flowchart/elk/flowchart-elk-definition.ts | 2 +- 3 files changed, 51 insertions(+), 4 deletions(-) diff --git a/cypress/integration/rendering/flowchart-elk.spec.js b/cypress/integration/rendering/flowchart-elk.spec.js index 221806b073..be60735d45 100644 --- a/cypress/integration/rendering/flowchart-elk.spec.js +++ b/cypress/integration/rendering/flowchart-elk.spec.js @@ -844,3 +844,43 @@ 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`, + { 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', () => { + const titleString = 'Test Title'; + 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'); + 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'); + }); + }); +}) diff --git a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js index e45739524e..10cf860722 100644 --- a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js +++ b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js @@ -4,6 +4,7 @@ import insertMarkers from '../../../dagre-wrapper/markers.js'; import { insertEdgeLabel } from '../../../dagre-wrapper/edges.js'; import { findCommonAncestor } from './render-utils.js'; import { labelHelper } from '../../../dagre-wrapper/shapes/util.js'; +import utils from '../../../utils.js'; import { getConfig } from '../../../config.js'; import { log } from '../../../logger.js'; import { setupGraphViewbox } from '../../../setupGraphViewbox.js'; @@ -756,6 +757,12 @@ const insertEdge = function (edgesEl, edge, edgeData, diagObj, parentLookupDb, i .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); + } + }); + log.info(edgePath); const edgeG = edgesEl.insert('g').attr('class', 'edgeLabel'); const edgeWithLabel = select(edgeG.node().appendChild(edge.labelEl)); const box = edgeWithLabel.node().firstChild.getBoundingClientRect(); @@ -805,6 +812,7 @@ const insertChildren = (nodeArray, parentLookupDb) => { 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'); @@ -816,8 +824,7 @@ export const draw = async function (text, id, _version, diagObj) { 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, @@ -845,7 +852,6 @@ export const draw = async function (text, id, _version, diagObj) { 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 @@ -861,6 +867,7 @@ export const draw = async function (text, id, _version, diagObj) { const svg = root.select(`[id="${id}"]`); + utils.insertTitle(svg, 'flowchartTitleText', conf.titleTopMargin, diagObj.db.getDiagramTitle()); // Define the supported markers for the diagram const markers = ['point', 'circle', 'cross']; diff --git a/packages/mermaid/src/diagrams/flowchart/elk/flowchart-elk-definition.ts b/packages/mermaid/src/diagrams/flowchart/elk/flowchart-elk-definition.ts index 9855c73899..4e907c18af 100644 --- a/packages/mermaid/src/diagrams/flowchart/elk/flowchart-elk-definition.ts +++ b/packages/mermaid/src/diagrams/flowchart/elk/flowchart-elk-definition.ts @@ -1,7 +1,7 @@ // @ts-ignore: JISON typing missing import parser from '../parser/flow.jison'; -import * as db from '../flowDb.js'; +import db from '../flowDb.js'; import renderer from './flowRenderer-elk.js'; import styles from './styles.js'; From 5e966d60b07fc01a59b4d104b3e8aa16815d8092 Mon Sep 17 00:00:00 2001 From: itsalam Date: Tue, 19 Sep 2023 10:10:27 -0700 Subject: [PATCH 2/7] Centered Title function and changed rendering order for Elk flowchart to find Boundingbox --- packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js | 1 + packages/mermaid/src/utils.ts | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js index 10cf860722..ec9ae6af0b 100644 --- a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js +++ b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js @@ -949,6 +949,7 @@ export const draw = async function (text, id, _version, diagObj) { 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); diff --git a/packages/mermaid/src/utils.ts b/packages/mermaid/src/utils.ts index e706ef1227..d6f16a08aa 100644 --- a/packages/mermaid/src/utils.ts +++ b/packages/mermaid/src/utils.ts @@ -829,7 +829,7 @@ export const insertTitle = ( parent .append('text') .text(title) - .attr('x', bounds.x + bounds.width / 2) + .attr('x', '50%') .attr('y', -titleTopMargin) .attr('class', cssClass); }; From 55fac29b3e2eb5bdccedee4a79510a4a875c30f5 Mon Sep 17 00:00:00 2001 From: itsalam Date: Tue, 19 Sep 2023 10:40:14 -0700 Subject: [PATCH 3/7] fixed title bounds calculation, removed extra title from merging issues --- packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js | 2 -- packages/mermaid/src/utils.ts | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js index ec9ae6af0b..c049786958 100644 --- a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js +++ b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js @@ -866,8 +866,6 @@ export const draw = async function (text, id, _version, diagObj) { const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document; const svg = root.select(`[id="${id}"]`); - - utils.insertTitle(svg, 'flowchartTitleText', conf.titleTopMargin, diagObj.db.getDiagramTitle()); // Define the supported markers for the diagram const markers = ['point', 'circle', 'cross']; diff --git a/packages/mermaid/src/utils.ts b/packages/mermaid/src/utils.ts index d6f16a08aa..e706ef1227 100644 --- a/packages/mermaid/src/utils.ts +++ b/packages/mermaid/src/utils.ts @@ -829,7 +829,7 @@ export const insertTitle = ( parent .append('text') .text(title) - .attr('x', '50%') + .attr('x', bounds.x + bounds.width / 2) .attr('y', -titleTopMargin) .attr('class', cssClass); }; From 6d2904cff16adff66bd1a995a7ff43a01b671dcc Mon Sep 17 00:00:00 2001 From: Vincent Lam Date: Tue, 24 Oct 2023 16:52:44 -0700 Subject: [PATCH 4/7] Added linting --- cypress/integration/rendering/flowchart-elk.spec.js | 8 +++----- .../src/diagrams/flowchart/elk/flowRenderer-elk.js | 2 +- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/cypress/integration/rendering/flowchart-elk.spec.js b/cypress/integration/rendering/flowchart-elk.spec.js index be60735d45..b18690441b 100644 --- a/cypress/integration/rendering/flowchart-elk.spec.js +++ b/cypress/integration/rendering/flowchart-elk.spec.js @@ -846,7 +846,6 @@ end }); describe('Title and arrow styling #4813', () => { - it('should render a flowchart with title', () => { const titleString = 'Test Title'; renderGraph( @@ -855,10 +854,9 @@ describe('Title and arrow styling #4813', () => { --- flowchart LR A-->B`, - { flowchart: { defaultRenderer: "elk" } } + { flowchart: { defaultRenderer: 'elk' } } ); cy.get('svg').should((svg) => { - const title = svg[0].querySelector('text'); expect(title.textContent).to.contain(titleString); }); @@ -873,7 +871,7 @@ describe('Title and arrow styling #4813', () => { B-.-oC C==xD D ~~~ A`, - { flowchart: { defaultRenderer: "elk" } } + { flowchart: { defaultRenderer: 'elk' } } ); cy.get('svg').should((svg) => { const edges = svg[0].querySelectorAll('.edges path'); @@ -883,4 +881,4 @@ describe('Title and arrow styling #4813', () => { expect(edges[3]).to.have.css('stroke-width', '1.5px'); }); }); -}) +}); diff --git a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js index c049786958..45eaadcb00 100644 --- a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js +++ b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js @@ -758,7 +758,7 @@ const insertEdge = function (edgesEl, edge, edgeData, diagObj, parentLookupDb, i .attr('class', 'path ' + edgeData.classes) .attr('fill', 'none'); Object.entries(edgeData).forEach(([key, value]) => { - if (key !== 'classes'){ + if (key !== 'classes') { edgePath.attr(key, value); } }); From 26ed8196643bef1fb465e39c2947ffbbc0edcba0 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sat, 23 Mar 2024 14:34:46 +0530 Subject: [PATCH 5/7] fix: ELK diagram remove re-parsing --- packages/mermaid-flowchart-elk/src/diagram-definition.ts | 2 +- packages/mermaid-flowchart-elk/src/flowRenderer-elk.js | 6 ------ 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/packages/mermaid-flowchart-elk/src/diagram-definition.ts b/packages/mermaid-flowchart-elk/src/diagram-definition.ts index a4e678dcc3..4a6b5b0766 100644 --- a/packages/mermaid-flowchart-elk/src/diagram-definition.ts +++ b/packages/mermaid-flowchart-elk/src/diagram-definition.ts @@ -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'; diff --git a/packages/mermaid-flowchart-elk/src/flowRenderer-elk.js b/packages/mermaid-flowchart-elk/src/flowRenderer-elk.js index 00b6ff2f80..ea6b9af750 100644 --- a/packages/mermaid-flowchart-elk/src/flowRenderer-elk.js +++ b/packages/mermaid-flowchart-elk/src/flowRenderer-elk.js @@ -708,15 +708,9 @@ const insertChildren = (nodeArray, parentLookupDb) => { */ 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', From 100123b43e19ee3e3af98afd4d09bd5e1219a2ad Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Sat, 23 Mar 2024 15:07:21 +0530 Subject: [PATCH 6/7] chore: Add example page link in index --- cypress/integration/rendering/flowchart-elk.spec.js | 1 - demos/dev/example.html | 2 ++ demos/index.html | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/cypress/integration/rendering/flowchart-elk.spec.js b/cypress/integration/rendering/flowchart-elk.spec.js index b18690441b..2314e61798 100644 --- a/cypress/integration/rendering/flowchart-elk.spec.js +++ b/cypress/integration/rendering/flowchart-elk.spec.js @@ -863,7 +863,6 @@ describe('Title and arrow styling #4813', () => { }); it('Render with stylized arrows', () => { - const titleString = 'Test Title'; renderGraph( ` flowchart LR diff --git a/demos/dev/example.html b/demos/dev/example.html index 4ece7efa8b..27d31e177a 100644 --- a/demos/dev/example.html +++ b/demos/dev/example.html @@ -39,6 +39,8 @@