diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html index 803daa224d..9b7f25f6fd 100644 --- a/cypress/platform/knsv2.html +++ b/cypress/platform/knsv2.html @@ -14,9 +14,20 @@ href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet" /> - - - + + + + + 
 stateDiagram-v2
-    stateId
-
+    Chimp --> Gorilla
+    Chimp --> Bonobo
@@ -469,7 +465,8 @@ // }); mermaid.initialize({ flowchart: { titleTopMargin: 10 }, - fontFamily: 'Kalam', + /* fontFamily: 'Kalam', */ + fontFamily: 'Caveat', sequence: { actorFontFamily: 'courier', noteFontFamily: 'courier', diff --git a/packages/mermaid/src/diagrams/state/stateDb.js b/packages/mermaid/src/diagrams/state/stateDb.js index 93e8bc8abc..ff366b15b5 100644 --- a/packages/mermaid/src/diagrams/state/stateDb.js +++ b/packages/mermaid/src/diagrams/state/stateDb.js @@ -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: {} }; diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts b/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts index f8fd190198..2632ffd27b 100644 --- a/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts +++ b/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts @@ -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; diff --git a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js index f3ae0a6f46..002e4a0935 100644 --- a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js +++ b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js @@ -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, diff --git a/packages/mermaid/src/rendering-util/layout-algorithms/elk/index.js b/packages/mermaid/src/rendering-util/layout-algorithms/elk/index.js index b141065d73..c52124249c 100644 --- a/packages/mermaid/src/rendering-util/layout-algorithms/elk/index.js +++ b/packages/mermaid/src/rendering-util/layout-algorithms/elk/index.js @@ -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); diff --git a/packages/mermaid/src/rendering-util/render.js b/packages/mermaid/src/rendering-util/render.js index fe205d156b..937146f965 100644 --- a/packages/mermaid/src/rendering-util/render.js +++ b/packages/mermaid/src/rendering-util/render.js @@ -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': { diff --git a/packages/mermaid/src/rendering-util/rendering-elements/createLabel.js b/packages/mermaid/src/rendering-util/rendering-elements/createLabel.js index 24bc143071..c018c46e53 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/createLabel.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/createLabel.js @@ -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'); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js index 4aa3e52f53..b805c961f6 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js @@ -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) diff --git a/packages/mermaid/src/rendering-util/rendering-elements/intersect/intersect-rect.js b/packages/mermaid/src/rendering-util/rendering-elements/intersect/intersect-rect.js index daf6b5eea0..13c5967775 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/intersect/intersect-rect.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/intersect/intersect-rect.js @@ -1,4 +1,5 @@ const intersectRect = (node, point) => { + console.log('intersect.rect abc88', node, point); var x = node.x; var y = node.y;