From 9981d3fc8bfb7e5c6ba3773376e7233f3a3dfd43 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Wed, 12 Jun 2024 08:48:06 +0200 Subject: [PATCH 01/13] Support for config option elk.mergeEdges --- packages/mermaid-layout-elk/src/render.ts | 2 +- packages/mermaid/src/config.type.ts | 2 +- .../mermaid/src/rendering-util/rendering-elements/clusters.js | 1 - packages/mermaid/src/schemas/config.schema.yaml | 2 +- 4 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/mermaid-layout-elk/src/render.ts b/packages/mermaid-layout-elk/src/render.ts index 379cffefd..bb2e9559c 100644 --- a/packages/mermaid-layout-elk/src/render.ts +++ b/packages/mermaid-layout-elk/src/render.ts @@ -465,7 +465,7 @@ export const render = async (data4Layout, svg, element, algorithm) => { 'elk.hierarchyHandling': 'INCLUDE_CHILDREN', 'elk.algorithm': algorithm, 'nodePlacement.strategy': data4Layout.config['elk.nodePlacement.strategy'], - 'elk.layered.mergeEdges': data4Layout.config.mergeEdges, + 'elk.layered.mergeEdges': data4Layout.config['elk.mergeEdges'], 'elk.direction': 'DOWN', 'spacing.baseValue': 30, // 'spacing.nodeNode': 40, diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 4749d7c70..be69ce455 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -89,7 +89,7 @@ export interface MermaidConfig { */ maxEdges?: number; /** - * Elk specific option that allows edge egdes to share path where it convenient. It can make for pretty diagrams but can also make it harder to read the diagram. + * Elk specific option that allows egdes to share path where it convenient. It can make for pretty diagrams but can also make it harder to read the diagram. * */ 'elk.mergeEdges'?: boolean; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js index 2a197993a..b314bc137 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js @@ -70,7 +70,6 @@ const rect = (parent, node) => { stroke: clusterBorder, fillWeight: 3, seed: handdrawnSeed, - stroke: clusterBorder, }); const roughNode = rc.path(createRoundedRectPathD(x, y, totalWidth, totalHeight, 0), options); // console.log('Rough node insert CXC', roughNode); diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index 53c747573..381337f10 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -102,7 +102,7 @@ properties: minimum: 0 elk.mergeEdges: description: | - Elk specific option that allows edge egdes to share path where it convenient. It can make for pretty diagrams but can also make it harder to read the diagram. + Elk specific option that allows egdes to share path where it convenient. It can make for pretty diagrams but can also make it harder to read the diagram. type: boolean default: false elk.nodePlacement.strategy: From 50394e7af11897ce168cb52bfa71343c606cc383 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Wed, 12 Jun 2024 09:45:26 +0200 Subject: [PATCH 02/13] 5237 Lint fixes --- .../mermaid/src/diagrams/flowchart/flowDb.ts | 49 +++++++++---------- .../flowchart/flowRenderer-v3-unified.ts | 19 ++----- .../dagre/mermaid-graphlib.js | 2 +- .../rendering-elements/clusters.js | 2 +- .../rendering-elements/edges.js | 4 +- .../rendering-elements/markers.js | 4 +- .../rendering-elements/shapes/circle.ts | 2 +- .../rendering-elements/shapes/cylinder.ts | 12 +---- .../rendering-elements/shapes/doubleCircle.ts | 2 +- .../rendering-elements/shapes/drawRect.ts | 3 +- .../rendering-elements/shapes/hexagon.ts | 11 +---- .../shapes/insertPolygonShape.ts | 6 --- .../shapes/invertedTrapezoid.ts | 10 +--- .../rendering-elements/shapes/leanLeft.ts | 10 +--- .../rendering-elements/shapes/leanRight.ts | 10 +--- .../rendering-elements/shapes/question.ts | 9 +--- .../shapes/rectLeftInvArrow.ts | 10 +--- .../rendering-elements/shapes/stadium.ts | 2 +- .../rendering-elements/shapes/subroutine.ts | 2 +- .../rendering-elements/shapes/trapezoid.ts | 8 --- .../mermaid/src/rendering-util/types.d.ts | 3 +- 21 files changed, 47 insertions(+), 133 deletions(-) diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.ts b/packages/mermaid/src/diagrams/flowchart/flowDb.ts index b2c38efe8..01a33120c 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.ts +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.ts @@ -768,7 +768,25 @@ const getTypeFromVertex = (vertex: FlowVertex) => { }; const findNode = (nodes: Node[], id: string) => nodes.find((node) => node.id === id); +const destructEdgeType = (type: string | undefined) => { + let arrowTypeStart = 'none'; + let arrowTypeEnd = 'arrow_point'; + switch (type) { + case 'arrow_point': + case 'arrow_circle': + case 'arrow_cross': + arrowTypeEnd = type; + break; + case 'double_arrow_point': + case 'double_arrow_circle': + case 'double_arrow_cross': + arrowTypeStart = type.replace('double_', ''); + arrowTypeEnd = arrowTypeStart; + break; + } + return { arrowTypeStart, arrowTypeEnd }; +}; const addNodeFromVertex = ( vertex: FlowVertex, nodes: Node[], @@ -776,7 +794,7 @@ const addNodeFromVertex = ( subGraphDB: Map, config: any, useRough: boolean -): Node => { +) => { let parentId = parentDB.get(vertex.id); let isGroup = subGraphDB.get(vertex.id) || false; @@ -793,7 +811,6 @@ const addNodeFromVertex = ( shape: getTypeFromVertex(vertex), dir: vertex.dir, domId: vertex.domId, - type: isGroup ? 'group' : undefined, isGroup, useRough, }); @@ -805,8 +822,6 @@ export const getData = () => { const nodes: Node[] = []; const edges: Edge[] = []; - // extract(getRootDocV2()); - // const diagramStates = getStates(); const useRough = config.look === 'handdrawn'; const subGraphs = getSubGraphs(); log.info('Subgraphs - APA12', subGraphs); @@ -831,26 +846,19 @@ export const getData = () => { cssClasses: '', shape: 'rect', dir: subGraph.dir, - domId: subGraph.domId, - type: 'group', isGroup: true, useRough, }); } - console.log('APA12 nodes - 1', nodes.length); const n = getVertices(); n.forEach((vertex) => { const node = addNodeFromVertex(vertex, nodes, parentDB, subGraphDB, config, useRough); - if (node) { - nodes.push(node); - } }); - console.log('APA12 nodes', nodes.length); - const e = getEdges(); e.forEach((rawEdge, index) => { + const { arrowTypeStart, arrowTypeEnd } = destructEdgeType(rawEdge.type); const edge: Edge = { id: getEdgeId(rawEdge.start, rawEdge.end, { counter: index, prefix: 'edge' }), start: rawEdge.start, @@ -858,30 +866,19 @@ export const getData = () => { type: rawEdge.type || 'normal', label: rawEdge.text, labelpos: 'c', - // labelStyle: '', - // cssStyles: rawEdge.styles.join(' '), thickness: rawEdge.stroke, minlen: rawEdge.length, classes: 'edge-thickness-normal edge-pattern-solid flowchart-link', - arrowhead: 'none', - arrowTypeEnd: 'arrow_point', - // arrowTypeEnd: 'arrow_barb', + arrowTypeStart, + arrowTypeEnd, arrowheadStyle: 'fill: #333', - // stroke: rawEdge.pattern, pattern: rawEdge.stroke, - // shape: getTypeFromVertex(rawEdge), - // dir: rawEdge.dir, - // domId: verawEdgertex.domId, - // rawEdge: undefined, - // isGroup: false, useRough, }; - // console.log('rawEdge SPLIT', rawEdge, index); + console.log('rawEdge SPLIT', rawEdge, index); edges.push(edge); }); - //const useRough = config.look === 'handdrawn'; - return { nodes, edges, other: {}, config }; }; diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts index 1d6b353d6..35d687f9b 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts +++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts @@ -36,26 +36,13 @@ export const draw = async function (text: string, id: string, _version: string, // The getData method provided in all supported diagrams is used to extract the data from the parsed structure // into the Layout data format - console.log('Before getData: '); + log.debug('Before getData: '); const data4Layout = diag.db.getData() as LayoutData; - console.log('Data: ', data4Layout); + log.debug('Data: ', data4Layout); // Create the root SVG - the element is the div containing the SVG element const { element, svg } = getDiagramElements(id, securityLevel); - // // For some diagrams this call is not needed, but in the state diagram it is - // await insertElementsForSize(element, data4Layout); - - // console.log('data4Layout:', data4Layout); - - // // Now we have layout data with real sizes, we can perform the layout - // const data4Rendering = doLayout(data4Layout, id, _version, 'dagre-wrapper'); - - // // The performRender method provided in all supported diagrams is used to render the data - // performRender(data4Rendering); - data4Layout.type = diag.type; - // data4Layout.layoutAlgorithm = 'dagre-wrapper'; - // data4Layout.layoutAlgorithm = 'elk'; data4Layout.layoutAlgorithm = layout; data4Layout.direction = DIR; data4Layout.nodeSpacing = conf?.nodeSpacing || 50; @@ -63,7 +50,7 @@ export const draw = async function (text: string, id: string, _version: string, data4Layout.markers = ['point', 'circle', 'cross']; data4Layout.diagramId = id; - console.log('REF1:', data4Layout); + log.debug('REF1:', data4Layout); await render(data4Layout, svg, element); const padding = 8; utils.insertTitle( diff --git a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.js b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.js index 3699827a1..959bb0edd 100644 --- a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.js +++ b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.js @@ -162,7 +162,7 @@ const findCommonEdges = (graph, id1, id2) => { return { v: edge.v, w: edge.w }; }); const result = edges1Prim.filter((edgeIn1) => { - return edges2Prim.filter((edge) => edgeIn1.v === edge.v && edgeIn1.w === edge.w).length > 0; + return edges2Prim.some((edge) => edgeIn1.v === edge.v && edgeIn1.w === edge.w); }); return result; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js index b314bc137..19a71308d 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js @@ -75,7 +75,7 @@ const rect = (parent, node) => { // console.log('Rough node insert CXC', roughNode); rect = shapeSvg.insert(() => { - console.log('Rough node insert CXC', roughNode); + log.debug('Rough node insert CXC', roughNode); return roughNode; }, ':first-child'); } else { diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js index b1db4f355..bdf20a966 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js @@ -443,7 +443,7 @@ const fixCorners = function (lineData) { const a = Math.sqrt(2) * 2; let newCornerPoint = { x: cornerPoint.x, y: cornerPoint.y }; if (Math.abs(nextPoint.x - prevPoint.x) > 10 && Math.abs(nextPoint.y - prevPoint.y) >= 10) { - console.log( + log.debug( 'Corner point fixing', Math.abs(nextPoint.x - prevPoint.x), Math.abs(nextPoint.y - prevPoint.y) @@ -461,7 +461,7 @@ const fixCorners = function (lineData) { }; } } else { - console.log( + log.debug( 'Corner point skipping fixing', Math.abs(nextPoint.x - prevPoint.x), Math.abs(nextPoint.y - prevPoint.y) diff --git a/packages/mermaid/src/rendering-util/rendering-elements/markers.js b/packages/mermaid/src/rendering-util/rendering-elements/markers.js index 00d45e47d..0b0972a8a 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/markers.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/markers.js @@ -178,8 +178,8 @@ const point = (elem, type, id) => { .attr('refX', 4.5) .attr('refY', 5) .attr('markerUnits', 'userSpaceOnUse') - .attr('markerWidth', 11) - .attr('markerHeight', 11) + .attr('markerWidth', 8) + .attr('markerHeight', 8) .attr('orient', 'auto') .append('path') .attr('d', 'M 0 5 L 10 10 L 10 0 z') diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts index 48054cce3..a77525b65 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts @@ -18,7 +18,7 @@ export const circle = async (parent: SVGAElement, node: Node): Promise { const { cssStyles, useRough } = node; if (useRough) { - // @ts-ignore + // @ts-ignore - rough is not typed const rc = rough.svg(shapeSvg); const outerPathData = createOuterCylinderPathD(0, 0, w, h, rx, ry); const innerPathData = createInnerCylinderPathD(0, ry, w, h, rx, ry); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/doubleCircle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/doubleCircle.ts index d3bda9c86..096b3ded1 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/doubleCircle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/doubleCircle.ts @@ -21,7 +21,7 @@ export const doublecircle = async (parent: SVGAElement, node: Node): Promise { return [ `M${x + size / 2},${y}`, @@ -41,7 +34,7 @@ export const question = async (parent: SVGAElement, node: Node): Promise { return [ `M${x - height / 2},${y}`, @@ -45,7 +37,7 @@ export const rect_left_inv_arrow = async ( const { cssStyles, useRough } = node; if (useRough) { - // @ts-ignore + // @ts-ignore - rough is not typed const rc = rough.svg(shapeSvg); const options = userNodeOverrides(node, {}); const pathData = createPolygonPathD(0, 0, w, h); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts index 102e49069..67531da5e 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts @@ -60,7 +60,7 @@ export const stadium = async (parent: SVGAElement, node: Node) => { let rect; const { cssStyles, useRough } = node; if (useRough) { - // @ts-ignore + // @ts-ignore - rough is not typed const rc = rough.svg(shapeSvg); const options = userNodeOverrides(node, {}); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts index 4046cfcc9..b2fbdebb2 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts @@ -55,7 +55,7 @@ export const subroutine = async (parent: SVGAElement, node: Node) => { ]; if (useRough) { - // @ts-ignore + // @ts-ignore - rough is not typed const rc = rough.svg(shapeSvg); const options = userNodeOverrides(node, {}); const pathData = createSubroutinePathD(-w / 2, -h / 2, w, h); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts index 1a6a2d1c2..22a68de3c 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts @@ -6,14 +6,6 @@ import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shape import rough from 'roughjs'; import { insertPolygonShape } from './insertPolygonShape.js'; -/** - * Creates an SVG path for a trapezoid shape. - * @param {number} x - The x coordinate of the top-left corner. - * @param {number} y - The y coordinate of the top-left corner. - * @param {number} width - The width of the shape. - * @param {number} height - The height of the shape. - * @returns {string} The path data for the trapezoid shape. - */ export const createTrapezoidPathD = ( x: number, y: number, diff --git a/packages/mermaid/src/rendering-util/types.d.ts b/packages/mermaid/src/rendering-util/types.d.ts index d8d127c42..3d7e70a07 100644 --- a/packages/mermaid/src/rendering-util/types.d.ts +++ b/packages/mermaid/src/rendering-util/types.d.ts @@ -27,7 +27,8 @@ interface Node { // Flowchart specific properties labelType?: string; // REMOVE? Always use markdown string, need to check for KaTeX - ⏳ wait with this one - domId: string; + + domId?: string; // When you create the node in the getData function you do not have the domId yet // Rendering specific properties for both Flowchart and State Diagram nodes dir?: string; // Only relevant for isGroup true, i.e. a sub-graph or composite state. haveCallback?: boolean; From d895a625652eefe04c3ea55b8eef27973fa62c12 Mon Sep 17 00:00:00 2001 From: Ashish Jain Date: Wed, 12 Jun 2024 11:05:26 +0200 Subject: [PATCH 03/13] #5237 Make getData to use global nodes and edges --- .../mermaid/src/diagrams/state/stateDb.js | 25 +++++++++---------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/packages/mermaid/src/diagrams/state/stateDb.js b/packages/mermaid/src/diagrams/state/stateDb.js index f6bddf0ea..e2f643af3 100644 --- a/packages/mermaid/src/diagrams/state/stateDb.js +++ b/packages/mermaid/src/diagrams/state/stateDb.js @@ -71,6 +71,9 @@ function newClassesList() { return new Map(); } +let nodes = []; +let edges = []; + let direction = DEFAULT_DIAGRAM_DIRECTION; let rootDoc = []; let classes = newClassesList(); // style classes defined by a classDef @@ -222,6 +225,13 @@ const extract = (_doc) => { break; } }); + + const diagramStates = getStates(); + const config = getConfig(); + const useRough = config.look === 'handdrawn'; + const look = config.look; + resetDataFetching(); + dataFetcher(undefined, getRootDocV2(), diagramStates, nodes, edges, true, useRough, look); }; /** @@ -306,6 +316,8 @@ export const addState = function ( }; export const clear = function (saveCommon) { + nodes = []; + edges = []; documents = { root: newDoc(), }; @@ -571,20 +583,7 @@ const setDirection = (dir) => { const trimColon = (str) => (str && str[0] === ':' ? str.substr(1).trim() : str.trim()); export const getData = () => { - const nodes = []; - const edges = []; - - // for (const key in currentDocument.states) { - // if (currentDocument.states.hasOwnProperty(key)) { - // nodes.push({...currentDocument.states[key]}); - // } - // } - const diagramStates = getStates(); const config = getConfig(); - const useRough = config.look === 'handdrawn'; - const look = config.look; - resetDataFetching(); - dataFetcher(undefined, getRootDocV2(), diagramStates, nodes, edges, true, useRough, look); return { nodes, edges, other: {}, config }; }; From 913dbee2e74136037841a9348af95a43f71a29ac Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Wed, 12 Jun 2024 11:34:13 +0200 Subject: [PATCH 04/13] 5237 Subgraph handling --- .../src/rendering-util/layout-algorithms/dagre/index.js | 7 ++++--- .../src/rendering-util/rendering-elements/clusters.js | 6 ++++++ 2 files changed, 10 insertions(+), 3 deletions(-) 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 f8becf61e..018af02fd 100644 --- a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js +++ b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js @@ -183,11 +183,12 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit const halfPadding = node?.padding / 2 || 0; const labelHeight = node?.labelBBox?.height || 0; const offsetY = labelHeight - halfPadding || 0; - node.y += offsetY / 2 + 2; + node.y += offsetY + (parent?.offsetY / 2 || 4); + node.offsetY = offsetY; insertCluster(clusters, node); // A cluster in the non-recursive way - log.info( + console.log( 'A tainted cluster node with children XBX', v, node.id, @@ -204,7 +205,6 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit node.y += (parent?.offsetY || 0) / 2; log.info( 'A regular node XBX - using the padding', - v, node.id, 'parent', node.parentId, @@ -216,6 +216,7 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit node.offsetY, 'parent', parent, + parent?.offsetY, node ); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js index 19a71308d..b66d44987 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js @@ -209,6 +209,12 @@ const roundedWithTitle = (parent, node) => { node.diff = -node.padding / 2; } + // if (node.id === 'Apa0') { + // console.log('XBX here', node); + // node.y += 10; + // } else { + // console.log('XBX there', node); + // } const x = node.x - width / 2 - halfPadding; const y = node.y - node.height / 2 - halfPadding; const innerY = node.y - node.height / 2 - halfPadding + bbox.height - 1; From 36e4fcfdfe56606a1c1ea793106f4fed75368fc3 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Wed, 12 Jun 2024 11:36:15 +0200 Subject: [PATCH 05/13] 5237 Subgraph handling --- .../src/rendering-util/layout-algorithms/dagre/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 018af02fd..3e8d35ccb 100644 --- a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js +++ b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js @@ -183,8 +183,8 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit const halfPadding = node?.padding / 2 || 0; const labelHeight = node?.labelBBox?.height || 0; const offsetY = labelHeight - halfPadding || 0; - node.y += offsetY + (parent?.offsetY / 2 || 4); - node.offsetY = offsetY; + node.y += offsetY + (parent?.offsetY / 2 || 0); + // node.offsetY = offsetY; insertCluster(clusters, node); // A cluster in the non-recursive way From 29e73ed2dc5fbaba6d88d2dddee50b9c745b1cd5 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Wed, 12 Jun 2024 11:46:32 +0200 Subject: [PATCH 06/13] Verisons --- packages/mermaid-layout-elk/package.json | 2 +- packages/mermaid/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mermaid-layout-elk/package.json b/packages/mermaid-layout-elk/package.json index bef3dee6a..b1d0eb93d 100644 --- a/packages/mermaid-layout-elk/package.json +++ b/packages/mermaid-layout-elk/package.json @@ -1,6 +1,6 @@ { "name": "@mermaid-chart/layout-elk", - "version": "0.0.1", + "version": "0.0.2", "description": "ELK layout engine for mermaid", "module": "dist/mermaid-layout-elk.core.mjs", "types": "dist/packages/mermaid-layout-elk/src/index.d.ts", diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index 064774c4c..08cc19845 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -1,6 +1,6 @@ { "name": "@mermaid-chart/mermaid", - "version": "11.0.0-beta.12", + "version": "11.0.0-beta.14", "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "type": "module", "module": "./dist/mermaid.core.mjs", From 1b5bd999e2911345ca7f02e1de3a8a6b37ddc0dc Mon Sep 17 00:00:00 2001 From: Per Brolin Date: Wed, 12 Jun 2024 12:10:20 +0200 Subject: [PATCH 07/13] 5237 Replaced useRough by look --- .../mermaid/src/diagrams/flowchart/flowDb.ts | 9 ++++----- .../mermaid/src/diagrams/state/dataFetcher.js | 18 +++++------------- packages/mermaid/src/diagrams/state/stateDb.js | 3 +-- .../rendering-elements/clusters.js | 7 +++---- .../rendering-util/rendering-elements/edges.js | 3 +-- .../rendering-elements/shapes/choice.ts | 2 +- .../rendering-elements/shapes/circle.ts | 4 ++-- .../rendering-elements/shapes/cylinder.ts | 4 ++-- .../rendering-elements/shapes/doubleCircle.ts | 4 ++-- .../rendering-elements/shapes/drawRect.ts | 4 ++-- .../rendering-elements/shapes/forkJoin.ts | 2 +- .../rendering-elements/shapes/hexagon.ts | 4 ++-- .../shapes/invertedTrapezoid.ts | 4 ++-- .../rendering-elements/shapes/leanLeft.ts | 4 ++-- .../rendering-elements/shapes/leanRight.ts | 4 ++-- .../rendering-elements/shapes/note.ts | 4 ++-- .../rendering-elements/shapes/question.ts | 4 ++-- .../shapes/rectLeftInvArrow.ts | 4 ++-- .../rendering-elements/shapes/stadium.ts | 4 ++-- .../rendering-elements/shapes/stateEnd.ts | 2 +- .../rendering-elements/shapes/stateStart.ts | 2 +- .../rendering-elements/shapes/subroutine.ts | 4 ++-- .../rendering-elements/shapes/trapezoid.ts | 4 ++-- packages/mermaid/src/rendering-util/types.d.ts | 5 +++-- 24 files changed, 49 insertions(+), 60 deletions(-) diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.ts b/packages/mermaid/src/diagrams/flowchart/flowDb.ts index 01a33120c..0faa5c048 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.ts +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.ts @@ -793,7 +793,7 @@ const addNodeFromVertex = ( parentDB: Map, subGraphDB: Map, config: any, - useRough: boolean + look: string ) => { let parentId = parentDB.get(vertex.id); let isGroup = subGraphDB.get(vertex.id) || false; @@ -812,7 +812,7 @@ const addNodeFromVertex = ( dir: vertex.dir, domId: vertex.domId, isGroup, - useRough, + look, }); } }; @@ -822,7 +822,6 @@ export const getData = () => { const nodes: Node[] = []; const edges: Edge[] = []; - const useRough = config.look === 'handdrawn'; const subGraphs = getSubGraphs(); log.info('Subgraphs - APA12', subGraphs); const parentDB = new Map(); @@ -847,7 +846,7 @@ export const getData = () => { shape: 'rect', dir: subGraph.dir, isGroup: true, - useRough, + look: config.look, }); } @@ -873,7 +872,7 @@ export const getData = () => { arrowTypeEnd, arrowheadStyle: 'fill: #333', pattern: rawEdge.stroke, - useRough, + look: config.look, }; console.log('rawEdge SPLIT', rawEdge, index); edges.push(edge); diff --git a/packages/mermaid/src/diagrams/state/dataFetcher.js b/packages/mermaid/src/diagrams/state/dataFetcher.js index 3bdf1abe0..2f0edb7a7 100644 --- a/packages/mermaid/src/diagrams/state/dataFetcher.js +++ b/packages/mermaid/src/diagrams/state/dataFetcher.js @@ -54,16 +54,16 @@ export function stateDomId(itemId = '', counter = 0, type = '', typeSpacer = DOM return `${DOMID_STATE}-${itemId}${typeStr}-${counter}`; } -const setupDoc = (parentParsedItem, doc, diagramStates, nodes, edges, altFlag, useRough, look) => { +const setupDoc = (parentParsedItem, doc, diagramStates, nodes, edges, altFlag, look) => { // graphItemCount = 0; log.trace('items', doc); doc.forEach((item) => { switch (item.stmt) { case STMT_STATE: - dataFetcher(parentParsedItem, item, diagramStates, nodes, edges, altFlag, useRough, look); + dataFetcher(parentParsedItem, item, diagramStates, nodes, edges, altFlag, look); break; case DEFAULT_STATE_TYPE: - dataFetcher(parentParsedItem, item, diagramStates, nodes, edges, altFlag, useRough, look); + dataFetcher(parentParsedItem, item, diagramStates, nodes, edges, altFlag, look); break; case STMT_RELATION: { @@ -73,8 +73,7 @@ const setupDoc = (parentParsedItem, doc, diagramStates, nodes, edges, altFlag, u diagramStates, nodes, edges, - altFlag, - useRough, + altFlag,, look ); dataFetcher( @@ -84,7 +83,6 @@ const setupDoc = (parentParsedItem, doc, diagramStates, nodes, edges, altFlag, u nodes, edges, altFlag, - useRough, look ); const edgeData = { @@ -101,7 +99,6 @@ const setupDoc = (parentParsedItem, doc, diagramStates, nodes, edges, altFlag, u labelType: G_EDGE_LABELTYPE, thickness: G_EDGE_THICKNESS, classes: CSS_EDGE, - useRough, look, }; edges.push(edgeData); @@ -232,7 +229,6 @@ export const dataFetcher = ( nodes, edges, altFlag, - useRough, look ) => { const itemId = parsedItem.id; @@ -324,7 +320,6 @@ export const dataFetcher = ( padding: 8, rx: 10, ry: 10, - useRough, look, }; @@ -354,7 +349,6 @@ export const dataFetcher = ( type: newNode.type, isGroup: newNode.type === 'group', padding: 0, //getConfig().flowchart.padding - useRough, look, position: parsedItem.note.position, }; @@ -369,7 +363,6 @@ export const dataFetcher = ( type: 'group', isGroup: true, padding: 16, //getConfig().flowchart.padding - useRough, look, position: parsedItem.note.position, }; @@ -410,7 +403,6 @@ export const dataFetcher = ( labelpos: G_EDGE_LABELPOS, labelType: G_EDGE_LABELTYPE, thickness: G_EDGE_THICKNESS, - useRough, look, }); } else { @@ -419,7 +411,7 @@ export const dataFetcher = ( } if (parsedItem.doc) { log.trace('Adding nodes children '); - setupDoc(parsedItem, parsedItem.doc, diagramStates, nodes, edges, !altFlag, useRough, look); + setupDoc(parsedItem, parsedItem.doc, diagramStates, nodes, edges, !altFlag, look); } }; diff --git a/packages/mermaid/src/diagrams/state/stateDb.js b/packages/mermaid/src/diagrams/state/stateDb.js index e2f643af3..d4de32889 100644 --- a/packages/mermaid/src/diagrams/state/stateDb.js +++ b/packages/mermaid/src/diagrams/state/stateDb.js @@ -228,10 +228,9 @@ const extract = (_doc) => { const diagramStates = getStates(); const config = getConfig(); - const useRough = config.look === 'handdrawn'; const look = config.look; resetDataFetching(); - dataFetcher(undefined, getRootDocV2(), diagramStates, nodes, edges, true, useRough, look); + dataFetcher(undefined, getRootDocV2(), diagramStates, nodes, edges, true, look); }; /** diff --git a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js index b66d44987..2bbb13c62 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js @@ -15,7 +15,6 @@ const rect = (parent, node) => { const siteConfig = getConfig(); const { themeVariables, handdrawnSeed } = siteConfig; const { clusterBkg, clusterBorder } = themeVariables; - let { useRough } = node; // Add outer g element const shapeSvg = parent.insert('g').attr('class', 'cluster').attr('id', node.id); @@ -60,7 +59,7 @@ const rect = (parent, node) => { log.trace('Data ', node, JSON.stringify(node)); let rect; - if (useRough) { + if (node.look === 'handdrawn') { // @ts-ignore TODO: Fix rough typings const rc = rough.svg(shapeSvg); const options = userNodeOverrides(node, { @@ -223,7 +222,7 @@ const roundedWithTitle = (parent, node) => { // add the rect let rect; - if (node.useRough) { + if (node.look === 'handdrawn') { const isAlt = node.cssClasses.includes('statediagram-cluster-alt'); const rc = rough.svg(shapeSvg); const roughOuterNode = @@ -305,7 +304,7 @@ const divider = (parent, node) => { const y = node.y - node.height / 2; const width = node.width + padding; const height = node.height + padding; - if (node.useRough) { + if (node.look === 'handdrawn') { const rc = rough.svg(shapeSvg); const roughNode = rc.rectangle(x, y, width, height, { fill: 'lightgrey', diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js index bdf20a966..b802c2ca8 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js @@ -592,11 +592,10 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod default: strokeClasses += ' edge-pattern-solid'; } - let useRough = edge.useRough; let svgPath; let path = ''; let linePath = lineFunction(lineData); - if (useRough) { + if (edge.look === 'handdrawn') { const rc = rough.svg(elem); const ld = Object.assign([], lineData); // const svgPathNode = rc.path(lineFunction(ld.splice(0, ld.length-1)), { diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts index 8248f3ddd..809b543ed 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts @@ -22,7 +22,7 @@ export const choice = (parent: SVG, node: Node) => { ]; let choice; - if (node.useRough) { + if (node.look === 'handdrawn') { // @ts-ignore TODO: Fix rough typings const rc = rough.svg(shapeSvg); const pointArr = points.map(function (d) { diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts index a77525b65..17b555bbe 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts @@ -15,9 +15,9 @@ export const circle = async (parent: SVGAElement, node: Node): Promise { const h = bbox.height + ry + node.padding; let cylinder: d3.Selection; - const { cssStyles, useRough } = node; + const { cssStyles } = node; - if (useRough) { + if (node.look === 'handdrawn') { // @ts-ignore - rough is not typed const rc = rough.svg(shapeSvg); const outerPathData = createOuterCylinderPathD(0, 0, w, h, rx, ry); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/doubleCircle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/doubleCircle.ts index 096b3ded1..fa6182c32 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/doubleCircle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/doubleCircle.ts @@ -18,9 +18,9 @@ export const doublecircle = async (parent: SVGAElement, node: Node): Promise { const y = (-1 * height) / 2; let shape; - if (node.useRough) { + if (node.look === 'handdrawn') { // @ts-ignore TODO: Fix rough typings const rc = rough.svg(shapeSvg); const roughNode = rc.rectangle(x, y, width, height, solidStateFill(lineColor)); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts index 00737a49e..07f5e9c6a 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts @@ -47,9 +47,9 @@ export const hexagon = async (parent: SVGAElement, node: Node): Promise; - const { cssStyles, useRough } = node; + const { cssStyles } = node; - if (useRough) { + if (node.look === 'handdrawn') { // @ts-ignore - rough is not typed const rc = rough.svg(shapeSvg); const options = userNodeOverrides(node, {}); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts index f7753ba07..f53fbf92c 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts @@ -35,9 +35,9 @@ export const inv_trapezoid = async (parent: SVGAElement, node: Node): Promise; - const { cssStyles, useRough } = node; + const { cssStyles } = node; - if (useRough) { + if (node.look === 'handdrawn') { // @ts-ignore - rough is not typed const rc = rough.svg(shapeSvg); const options = userNodeOverrides(node, {}); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts index 6c8a0451f..06a408a93 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts @@ -34,9 +34,9 @@ export const lean_left = async (parent: SVGAElement, node: Node): Promise; - const { cssStyles, useRough } = node; + const { cssStyles } = node; - if (useRough) { + if (node.look === 'handdrawn') { // @ts-ignore - rough is not typed const rc = rough.svg(shapeSvg); const options = userNodeOverrides(node, {}); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts index 61f14dc4a..c2a5aac70 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts @@ -34,9 +34,9 @@ export const lean_right = async (parent: SVGAElement, node: Node): Promise; - const { cssStyles, useRough } = node; + const { cssStyles } = node; - if (useRough) { + if (node.look === 'handdrawn') { // @ts-ignore - rough is not typed const rc = rough.svg(shapeSvg); const options = userNodeOverrides(node, {}); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts index 5843f558b..79c7129a1 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts @@ -21,14 +21,14 @@ export const note = async (parent: SVGAElement, node: Node) => { ); log.info('Classes = ', node.cssClasses); - const { cssStyles, useRough } = node; + const { cssStyles } = node; let rect; const totalWidth = bbox.width + node.padding; const totalHeight = bbox.height + node.padding; const x = -bbox.width / 2 - halfPadding; const y = -bbox.height / 2 - halfPadding; - if (useRough) { + if (node.look === 'handdrawn') { // add the rect // @ts-ignore TODO: Fix rough typings const rc = rough.svg(shapeSvg); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts index 4c971a651..df87648c5 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts @@ -31,9 +31,9 @@ export const question = async (parent: SVGAElement, node: Node): Promise; - const { cssStyles, useRough } = node; + const { cssStyles } = node; - if (useRough) { + if (node.look === 'handdrawn') { // @ts-ignore - rough is not typed const rc = rough.svg(shapeSvg); const options = userNodeOverrides(node, {}); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts index 9b743d89d..a5d0b733c 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts @@ -34,9 +34,9 @@ export const rect_left_inv_arrow = async ( ]; let polygon; - const { cssStyles, useRough } = node; + const { cssStyles } = node; - if (useRough) { + if (node.look === 'handdrawn') { // @ts-ignore - rough is not typed const rc = rough.svg(shapeSvg); const options = userNodeOverrides(node, {}); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts index 67531da5e..4adf9d474 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts @@ -58,8 +58,8 @@ export const stadium = async (parent: SVGAElement, node: Node) => { const w = bbox.width + h / 4 + node.padding; let rect; - const { cssStyles, useRough } = node; - if (useRough) { + const { cssStyles } = node; + if (node.look === 'handdrawn') { // @ts-ignore - rough is not typed const rc = rough.svg(shapeSvg); const options = userNodeOverrides(node, {}); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts index 5f93d7a41..4d4d21d86 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts @@ -17,7 +17,7 @@ export const stateEnd = (parent: SVG, node: Node) => { let circle; let innerCircle; - if (node.useRough) { + if (node.look === 'handdrawn') { // @ts-ignore TODO: Fix rough typings const rc = rough.svg(shapeSvg); const roughNode = rc.circle(0, 0, 14, { ...solidStateFill(lineColor), roughness: 0.5 }); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts index c045266fd..575e7d2b0 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts @@ -17,7 +17,7 @@ export const stateStart = (parent: SVG, node: Node) => { .attr('id', node.domId || node.id); let circle; - if (node.useRough) { + if (node.look === 'handdrawn') { // @ts-ignore TODO: Fix rough typings const rc = rough.svg(shapeSvg); const roughNode = rc.circle(0, 0, 14, solidStateFill(lineColor)); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts index b2fbdebb2..cecd0d8b6 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts @@ -40,7 +40,7 @@ export const subroutine = async (parent: SVGAElement, node: Node) => { const x = -bbox.width / 2 - halfPadding; const y = -bbox.height / 2 - halfPadding; let rect; - const { cssStyles, useRough } = node; + const { cssStyles } = node; const points = [ { x: 0, y: 0 }, { x: w, y: 0 }, @@ -54,7 +54,7 @@ export const subroutine = async (parent: SVGAElement, node: Node) => { { x: -8, y: 0 }, ]; - if (useRough) { + if (node.look === 'handdrawn') { // @ts-ignore - rough is not typed const rc = rough.svg(shapeSvg); const options = userNodeOverrides(node, {}); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts index 22a68de3c..1677ef8cf 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts @@ -34,9 +34,9 @@ export const trapezoid = async (parent: SVGAElement, node: Node): Promise; - const { cssStyles, useRough } = node; + const { cssStyles } = node; - if (useRough) { + if (node.look === 'handdrawn') { console.log('Trapezoid: Inside use useRough'); // @ts-ignore const rc = rough.svg(shapeSvg); diff --git a/packages/mermaid/src/rendering-util/types.d.ts b/packages/mermaid/src/rendering-util/types.d.ts index 3d7e70a07..e1f16737b 100644 --- a/packages/mermaid/src/rendering-util/types.d.ts +++ b/packages/mermaid/src/rendering-util/types.d.ts @@ -47,7 +47,6 @@ interface Node { rx?: number; // Used for rounded corners in Rect, Ellipse, etc.Maybe it to specialized RectNode, EllipseNode, etc. ry?: number; - useRough?: boolean; useHtmlLabels?: boolean; centerLabel?: boolean; //keep for now. //Candidate for removal, maybe rely on labelStyle or a specific property labelPosition: Top, Center, Bottom @@ -62,6 +61,8 @@ interface Node { // Flowchart specific properties x?: number; y?: number; + + look?: string; } // Common properties for any edge in the system @@ -92,7 +93,7 @@ interface Edge { minlen?: number; pattern?: string; thickness?: 'normal' | 'thick' | 'invisible'; - useRough?: boolean; + look?: string; } interface RectOptions { From f19a9d021f5974db1536085aac4c03c71cfd19c7 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Wed, 12 Jun 2024 12:25:41 +0200 Subject: [PATCH 08/13] 5237 Removed a comma --- .../mermaid/src/diagrams/state/dataFetcher.js | 30 ++----------------- 1 file changed, 3 insertions(+), 27 deletions(-) diff --git a/packages/mermaid/src/diagrams/state/dataFetcher.js b/packages/mermaid/src/diagrams/state/dataFetcher.js index 2f0edb7a7..613fd8779 100644 --- a/packages/mermaid/src/diagrams/state/dataFetcher.js +++ b/packages/mermaid/src/diagrams/state/dataFetcher.js @@ -67,24 +67,8 @@ const setupDoc = (parentParsedItem, doc, diagramStates, nodes, edges, altFlag, l break; case STMT_RELATION: { - dataFetcher( - parentParsedItem, - item.state1, - diagramStates, - nodes, - edges, - altFlag,, - look - ); - dataFetcher( - parentParsedItem, - item.state2, - diagramStates, - nodes, - edges, - altFlag, - look - ); + dataFetcher(parentParsedItem, item.state1, diagramStates, nodes, edges, altFlag, look); + dataFetcher(parentParsedItem, item.state2, diagramStates, nodes, edges, altFlag, look); const edgeData = { id: 'edge' + graphItemCount, start: item.state1.id, @@ -222,15 +206,7 @@ function getClassesFromDbInfo(dbInfoItem) { } } } -export const dataFetcher = ( - parent, - parsedItem, - diagramStates, - nodes, - edges, - altFlag, - look -) => { +export const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, altFlag, look) => { const itemId = parsedItem.id; const classStr = getClassesFromDbInfo(diagramStates.get(itemId)); From a35152843fdbf57ba7317a1dfb3141c69724c435 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Wed, 12 Jun 2024 12:35:53 +0200 Subject: [PATCH 09/13] #5237 Handling remaining references to useRough --- cypress/platform/knsv2.html | 46 ++++++++++++++++--- packages/mermaid/src/config.type.ts | 2 +- .../mermaid/src/diagrams/flowchart/flowDb.ts | 2 +- .../rendering-elements/shapes/trapezoid.ts | 2 +- .../rendering-elements/shapes/util.js | 2 +- .../mermaid/src/schemas/config.schema.yaml | 1 - 6 files changed, 43 insertions(+), 12 deletions(-) diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html index 260d540d3..9c91100bb 100644 --- a/cypress/platform/knsv2.html +++ b/cypress/platform/knsv2.html @@ -85,7 +85,7 @@ end Apa --> C - 
+    
 flowchart LR
 subgraph Apa["Apa"]
     B["This is B"]
@@ -95,7 +95,7 @@ end
     Apa --> C
       

-    
+    
 flowchart RL
 subgraph Apa["Apa"]
   subgraph Gorilla
@@ -107,7 +107,7 @@ end
     Gorilla --> C
       

-    
+    
 flowchart LR
 subgraph Apa["Apa"]
   subgraph Gorilla
@@ -154,6 +154,32 @@ flowchart LR
     Apa --- C
     A --x C
 
+    
+---
+config:
+  look: neo
+  theme: neo
+  layout: elk
+  elk.mergeEdges: true
+  themeVariables: {}
+---
+%% 'elk.stress',
+%% 'elk.force'
+%%'elk.mrtree'
+%% 'elk.sporeOverlap
+stateDiagram
+  direction TB
+  A --> B
+  A --> C
+  A --> D
+  A --> E
+  A --> F
+  state F {
+    Another
+  }
+  Another --> A
+
+
       

     
@@ -180,6 +206,12 @@ flowchart LR
 
       

+    
+      %%{init: {"layout": "elk", "mergeEdges": true} }%%
+flowchart
+      A --> B(This is B)
+      

     
       %%{init: {"layout": "elk", "mergeEdges": false, "elk.nodePlacement.strategy": "SIMPLE"} }%%
       stateDiagram
@@ -200,7 +232,7 @@ flowchart LR
     if_state --> True : if n >= 0
       

-    
+    
       %%{init: {"layout": "dagre", "mergeEdges": true} }%%
 stateDiagram
   direction TB
@@ -221,7 +253,7 @@ State T1 {
     }
       

-    
+    
       %%{init: {"layouts": "elk2", "mergeEdges": true} }%%
       stateDiagram
       State S1 {
@@ -231,7 +263,7 @@ State T1 {
   S1 --> S2
       

-    
+    
       %%{init: {"layout": "elk", "mergeEdges": true} }%%
 stateDiagram
 State T1 {
@@ -241,7 +273,7 @@ State T1 {
     }
       

-    
+    
       %%{init: {"layout": "elk", "mergeEdges": true} }%%
 stateDiagram
   [*] --> T1
diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index be69ce455..afe636144 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -68,7 +68,7 @@ export interface MermaidConfig {
    * Defines which main look to use for the diagram.
    *
    */
-  look?: 'classic' | 'handdrawn' | 'slick';
+  look?: 'classic' | 'handdrawn';
   /**
    * Defines the seed to be used when using handdrawn look. This is important for the automated tests as they will always find differences without the seed. The default value is 0 which gives a random seed.
    *
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.ts b/packages/mermaid/src/diagrams/flowchart/flowDb.ts
index 0faa5c048..b24fc8805 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.ts
@@ -852,7 +852,7 @@ export const getData = () => {
 
   const n = getVertices();
   n.forEach((vertex) => {
-    const node = addNodeFromVertex(vertex, nodes, parentDB, subGraphDB, config, useRough);
+    const node = addNodeFromVertex(vertex, nodes, parentDB, subGraphDB, config, config.look);
   });
 
   const e = getEdges();
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts
index 1677ef8cf..eb25dc52a 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts
@@ -37,7 +37,7 @@ export const trapezoid = async (parent: SVGAElement, node: Node): Promise
-  (node.useRough ? 'rough-node' : 'node') + ' ' + node.cssClasses + ' ' + (extra || '');
+  (node.look === 'handdrawn' ? 'rough-node' : 'node') + ' ' + node.cssClasses + ' ' + (extra || '');
diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml
index 381337f10..107a0e2ec 100644
--- a/packages/mermaid/src/schemas/config.schema.yaml
+++ b/packages/mermaid/src/schemas/config.schema.yaml
@@ -78,7 +78,6 @@ properties:
     enum:
       - classic
       - handdrawn
-      - slick
     default: 'classic'
   handdrawnSeed:
     description: |

From 0dd6db67e89422ec725dcdb69bdfbf8b677f0205 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist 
Date: Wed, 12 Jun 2024 13:49:37 +0200
Subject: [PATCH 10/13] Fix for paddings in square rect

---
 .../src/rendering-util/rendering-elements/shapes/squareRect.ts  | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/squareRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/squareRect.ts
index 8946b141c..8daeaec7a 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/squareRect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/squareRect.ts
@@ -6,6 +6,8 @@ export const squareRect = async (parent: SVGAElement, node: Node) => {
     rx: 0,
     ry: 0,
     classes: '',
+    labelPaddingX: (node?.padding || 0) * 2,
+    labelPaddingY: (node?.padding || 0) * 1,
   } as RectOptions;
   return drawRect(parent, node, options);
 };

From 183b83b1ffe396fdecf72ac79cb3b1efd828e709 Mon Sep 17 00:00:00 2001
From: Ashish Jain 
Date: Wed, 12 Jun 2024 14:33:22 +0200
Subject: [PATCH 11/13] Adding data-et and data-id for cluster in
 rendering-util

---
 .../src/rendering-util/rendering-elements/clusters.js      | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
index a9cbcb59f..51c32019c 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
@@ -177,7 +177,12 @@ const roundedWithTitle = (parent, node) => {
     themeVariables;
 
   // Add outer g element
-  const shapeSvg = parent.insert('g').attr('class', node.cssClasses).attr('id', node.id);
+  const shapeSvg = parent
+    .insert('g')
+    .attr('class', node.cssClasses)
+    .attr('id', node.id)
+    .attr('data-et', 'node')
+    .attr('data-id', node.id);
 
   // add the rect
   const outerRectG = shapeSvg.insert('g', ':first-child');

From 8ff462f01cc8b20d569326baecffd6e618824217 Mon Sep 17 00:00:00 2001
From: Ashish Jain 
Date: Wed, 12 Jun 2024 14:34:14 +0200
Subject: [PATCH 12/13] Updated version

---
 packages/mermaid/package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index 08cc19845..6bdfa7e4e 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mermaid-chart/mermaid",
-  "version": "11.0.0-beta.14",
+  "version": "11.0.0-beta.15",
   "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
   "module": "./dist/mermaid.core.mjs",
@@ -137,4 +137,4 @@
     "README.md"
   ],
   "sideEffects": false
-}
\ No newline at end of file
+}

From 67cf57ae4f7cdc35fb1172f59eeee05c6fc26d05 Mon Sep 17 00:00:00 2001
From: Ashish Jain 
Date: Wed, 12 Jun 2024 14:45:54 +0200
Subject: [PATCH 13/13] added logging for config

---
 packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts b/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts
index a0b9f92ef..8d3421ed0 100644
--- a/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts
+++ b/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts
@@ -46,6 +46,7 @@ export const draw = async function (
 ) {
   log.info('REF0:', positions);
   log.info('Drawing state diagram (v2)', id);
+  log.info('Diagram Configuration:', getConfig());
   const { securityLevel, state: conf, layout } = getConfig();
   // Extracting the data from the parsed structure into a more usable form
   // Not related to the refactoring, but this is the first step in the rendering process