From 2c9da722d6247859940019942f4faf0a17961d62 Mon Sep 17 00:00:00 2001 From: ashishj Date: Wed, 10 May 2023 20:09:39 +0200 Subject: [PATCH] #2028 basic render --- cypress/platform/knsv2.html | 5 +- .../src/diagrams/flowchart/parser/flow.jison | 2 +- .../flowchart/swimlane/swimlaneRenderer.js | 187 +++++++++++------- 3 files changed, 119 insertions(+), 75 deletions(-) diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html index 7f9928fd0..aa2e2893f 100644 --- a/cypress/platform/knsv2.html +++ b/cypress/platform/knsv2.html @@ -59,7 +59,7 @@ 
-flowchart LR
+swimlane
     subgraph "`one`"
       start -- l1 --> cat --> rat
       end
@@ -71,9 +71,6 @@ flowchart LR
       end
- monkey - dog --> cat - monkey --> cow --> diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison index b5dac9178..df4043b1b 100644 --- a/packages/mermaid/src/diagrams/flowchart/parser/flow.jison +++ b/packages/mermaid/src/diagrams/flowchart/parser/flow.jison @@ -84,7 +84,7 @@ that id. [\s\n] this.popState(); [^\s\n]* return 'CLICK'; -"swimlane" {if(yy.lex.firstGraph()){this.begin("dir");} return 'GRAPH';} +"swimlane" {if(yy.lex.firstGraph()){this.begin("dir");} return 'GRAPH';} "flowchart-elk" {if(yy.lex.firstGraph()){this.begin("dir");} return 'GRAPH';} "graph" {if(yy.lex.firstGraph()){this.begin("dir");} return 'GRAPH';} "flowchart" {if(yy.lex.firstGraph()){this.begin("dir");} return 'GRAPH';} diff --git a/packages/mermaid/src/diagrams/flowchart/swimlane/swimlaneRenderer.js b/packages/mermaid/src/diagrams/flowchart/swimlane/swimlaneRenderer.js index 828f3d326..13b269b2a 100644 --- a/packages/mermaid/src/diagrams/flowchart/swimlane/swimlaneRenderer.js +++ b/packages/mermaid/src/diagrams/flowchart/swimlane/swimlaneRenderer.js @@ -22,9 +22,48 @@ export const setConf = function (cnf) { * * @param element * @param graph + * @param layout + * @param elem + * @param conf */ -function swimlaneRender(element, graph) { - return graph; +function swimlaneRender(layout, elem, conf) { + + // draw nodes from layout.graph to element + const nodes = layout.graph.nodes(); + + // for each node, draw a rect, with a child text inside as label + for (const node of nodes) { + const nodeElem = elem.append('g'); + nodeElem.attr( + 'class', + 'swimlane-node-'+node+ + (' lane-' + node.lane) + ); + + // Create the wrapped text element + const textElem = nodeElem.append('g'); + console.log('node',node); + console.log('node.x',layout.graph.node(node).x); + console.log('node.y',layout.graph.node(node).y); + const txt = textElem + .append('text') + .text(node) + .attr('x', layout.graph.node(node).x) + .attr('y', layout.graph.node(node).y) + .attr('dy', '1em') + .attr('alignment-baseline', 'middle') + .attr('dominant-baseline', 'middle') + .attr('text-anchor', 'middle') + const bbox = txt.node().getBBox(); + + + textElem.attr('transform', 'translate(' + layout.graph.node(node).x/2 + ', ' + layout.graph.node(node).y/2 + ')'); + + } + + + + + return elem; } /** @@ -73,7 +112,11 @@ export const draw = async function (text, id, _version, diagObj) { : select('body'); const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document; - const g = setupGraphViewbox(diagObj); +// create g as a graphlib graph using setupGraph from setup-graph.js + const g = setupGraph(diagObj, id, root, doc); + + + let subG; const subGraphs = diagObj.db.getSubGraphs(); log.info('Subgraphs - ', subGraphs); @@ -93,98 +136,102 @@ export const draw = async function (text, id, _version, diagObj) { // Fetch the vertices/nodes and edges/links from the parsed graph definition const vert = diagObj.db.getVertices(); - const edges = diagObj.db.getEdges(); + // const edges = diagObj.db.getEdges(); - log.info('Edges', edges); - let i = 0; - for (i = subGraphs.length - 1; i >= 0; i--) { - // for (let i = 0; i < subGraphs.length; i++) { - subG = subGraphs[i]; + // log.info('Edges', edges); + // let i = 0; + // for (i = subGraphs.length - 1; i >= 0; i--) { + // // for (let i = 0; i < subGraphs.length; i++) { + // subG = subGraphs[i]; - selectAll('cluster').append('text'); + // selectAll('cluster').append('text'); - for (let j = 0; j < subG.nodes.length; j++) { - log.info('Setting up subgraphs', subG.nodes[j], subG.id); - g.setParent(subG.nodes[j], subG.id); - } - } - setupGraph(diagObj, id, root, doc); + // for (let j = 0; j < subG.nodes.length; j++) { + // log.info('Setting up subgraphs', subG.nodes[j], subG.id); + // g.setParent(subG.nodes[j], subG.id); + // } + // } + // setupGraph(diagObj, id, root, doc); // Add custom shapes // flowChartShapes.addToRenderV2(addShape); // Set up an SVG group so that we can translate the final graph. - const svg = root.select(`[id="${id}"]`); + // const svg = root.select(`[id="${id}"]`); + const svg = root.select('#' + id); + + svg.append('g'); // Run the renderer. This is what draws the final graph. - const element = root.select('#' + id + ' g'); + // const element = root.select('#' + id + ' g'); +console.log('diagObj',diagObj); + console.log('subGraphs', diagObj.db.getSubGraphs()); + const layout = swimlaneLayout(g, diagObj); + swimlaneRender(layout, svg, conf); + // await render(element, g, ['point', 'circle', 'cross'], 'flowchart', id); - swimlaneLayout(g, conf); - swimlaneRender(element, g, conf); - await render(element, g, ['point', 'circle', 'cross'], 'flowchart', id); - - utils.insertTitle(svg, 'flowchartTitleText', conf.titleTopMargin, diagObj.db.getDiagramTitle()); + // utils.insertTitle(svg, 'flowchartTitleText', conf.titleTopMargin, diagObj.db.getDiagramTitle()); setupGraphViewbox(g, svg, conf.diagramPadding, conf.useMaxWidth); // Index nodes - diagObj.db.indexNodes('subGraph' + i); + // diagObj.db.indexNodes('subGraph' + i); // Add label rects for non html labels - if (!conf.htmlLabels) { - const labels = doc.querySelectorAll('[id="' + id + '"] .edgeLabel .label'); - for (const label of labels) { - // Get dimensions of label - const dim = label.getBBox(); + // if (!conf.htmlLabels) { + // const labels = doc.querySelectorAll('[id="' + id + '"] .edgeLabel .label'); + // for (const label of labels) { + // // Get dimensions of label + // const dim = label.getBBox(); - const rect = doc.createElementNS('http://www.w3.org/2000/svg', 'rect'); - rect.setAttribute('rx', 0); - rect.setAttribute('ry', 0); - rect.setAttribute('width', dim.width); - rect.setAttribute('height', dim.height); + // const rect = doc.createElementNS('http://www.w3.org/2000/svg', 'rect'); + // rect.setAttribute('rx', 0); + // rect.setAttribute('ry', 0); + // rect.setAttribute('width', dim.width); + // rect.setAttribute('height', dim.height); - label.insertBefore(rect, label.firstChild); - } - } + // label.insertBefore(rect, label.firstChild); + // } + // } // If node has a link, wrap it in an anchor SVG object. - const keys = Object.keys(vert); - keys.forEach(function (key) { - const vertex = vert[key]; + // const keys = Object.keys(vert); + // keys.forEach(function (key) { + // const vertex = vert[key]; - if (vertex.link) { - const node = select('#' + id + ' [id="' + key + '"]'); - if (node) { - const link = doc.createElementNS('http://www.w3.org/2000/svg', 'a'); - link.setAttributeNS('http://www.w3.org/2000/svg', 'class', vertex.classes.join(' ')); - link.setAttributeNS('http://www.w3.org/2000/svg', 'href', vertex.link); - link.setAttributeNS('http://www.w3.org/2000/svg', 'rel', 'noopener'); - if (securityLevel === 'sandbox') { - link.setAttributeNS('http://www.w3.org/2000/svg', 'target', '_top'); - } else if (vertex.linkTarget) { - link.setAttributeNS('http://www.w3.org/2000/svg', 'target', vertex.linkTarget); - } + // if (vertex.link) { + // const node = select('#' + id + ' [id="' + key + '"]'); + // if (node) { + // const link = doc.createElementNS('http://www.w3.org/2000/svg', 'a'); + // link.setAttributeNS('http://www.w3.org/2000/svg', 'class', vertex.classes.join(' ')); + // link.setAttributeNS('http://www.w3.org/2000/svg', 'href', vertex.link); + // link.setAttributeNS('http://www.w3.org/2000/svg', 'rel', 'noopener'); + // if (securityLevel === 'sandbox') { + // link.setAttributeNS('http://www.w3.org/2000/svg', 'target', '_top'); + // } else if (vertex.linkTarget) { + // link.setAttributeNS('http://www.w3.org/2000/svg', 'target', vertex.linkTarget); + // } - const linkNode = node.insert(function () { - return link; - }, ':first-child'); + // const linkNode = node.insert(function () { + // return link; + // }, ':first-child'); - const shape = node.select('.label-container'); - if (shape) { - linkNode.append(function () { - return shape.node(); - }); - } + // const shape = node.select('.label-container'); + // if (shape) { + // linkNode.append(function () { + // return shape.node(); + // }); + // } - const label = node.select('.label'); - if (label) { - linkNode.append(function () { - return label.node(); - }); - } - } - } - }); + // const label = node.select('.label'); + // if (label) { + // linkNode.append(function () { + // return label.node(); + // }); + // } + // } + // } + //}); }; export default {