diff --git a/eslint.config.js b/eslint.config.js index ed703ea71..8b4807bc5 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -109,6 +109,7 @@ export default tseslint.config( '@typescript-eslint/no-unsafe-member-access': 'off', '@typescript-eslint/no-unsafe-return': 'off', '@typescript-eslint/only-throw-error': 'warn', + '@typescript-eslint/prefer-nullish-coalescing': 'warn', '@typescript-eslint/prefer-promise-reject-errors': 'warn', // END 'json/*': ['error', 'allowComments'], diff --git a/packages/mermaid-layout-elk/src/render.ts b/packages/mermaid-layout-elk/src/render.ts index ead157a04..79bd9bbf0 100644 --- a/packages/mermaid-layout-elk/src/render.ts +++ b/packages/mermaid-layout-elk/src/render.ts @@ -144,7 +144,7 @@ const drawNodes = (relX, relY, nodeArray, svg, subgraphsEl, depth) => { } }); nodeArray.forEach(function (node) { - if (node && node.isGroup) { + if (node?.isGroup) { drawNodes(relX + node.x, relY + node.y, node.children, svg, subgraphsEl, depth + 1); } }); diff --git a/packages/mermaid/src/rendering-util/createText.ts b/packages/mermaid/src/rendering-util/createText.ts index 6ee2bf921..d3428f019 100644 --- a/packages/mermaid/src/rendering-util/createText.ts +++ b/packages/mermaid/src/rendering-util/createText.ts @@ -231,10 +231,10 @@ export const createText = async ( structuredText, text ? addSvgBackground : false ); - if (style.match('stroke:')) style = style.replace('stroke:', 'lineColor:'); + if (/stroke:/.exec(style)) {style = style.replace('stroke:', 'lineColor:');} select(svgLabel) .select('text') - .attr('style', style.replace(/color\:/g, 'fill:')); + .attr('style', style.replace(/color:/g, 'fill:')); // svgLabel.setAttribute('style', style); return svgLabel; } 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 c5855849b..80ab33eb3 100644 --- a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js +++ b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js @@ -69,7 +69,7 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit } } log.info('(Insert) Node XXX' + v + ': ' + JSON.stringify(graph.node(v))); - if (node && node.clusterNode) { + if (node?.clusterNode) { // const children = graph.children(v); log.info('Cluster identified XBX', v, node.width, graph.node(v)); @@ -217,7 +217,7 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit ' height: ', node.height ); - if (node && node.clusterNode) { + if (node?.clusterNode) { const parentId = graph.parent(v); // Adjust for padding when on root level node.y += subGraphTitleTotalMargin; 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 ac834b8f5..883fbdc89 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 @@ -437,7 +437,7 @@ export const extractor = (graph, depth) => { const graphSettings = graph.graph(); let dir = graphSettings.rankdir === 'TB' ? 'LR' : 'TB'; - if (clusterDb[node] && clusterDb[node].clusterData && clusterDb[node].clusterData.dir) { + if (clusterDb[node]?.clusterData?.dir) { dir = clusterDb[node].clusterData.dir; log.warn('Fixing dir', clusterDb[node].clusterData.dir, dir); } diff --git a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js index 6b06eb139..aa273c380 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js @@ -224,7 +224,6 @@ const roundedWithTitle = async (parent, node) => { const y = node.y - height / 2; node.width = width; const innerY = node.y - node.height / 2 - halfPadding + bbox.height + 2; - const look = siteConfig.look; // add the rect let rect; @@ -290,12 +289,11 @@ const roundedWithTitle = async (parent, node) => { return { cluster: shapeSvg, labelBBox: bbox }; }; -const divider = async (parent, node) => { +const divider = (parent, node) => { const siteConfig = getConfig(); const { themeVariables, handdrawnSeed } = siteConfig; - const { altBackground, compositeBackground, compositeTitleBackground, nodeBorder } = - themeVariables; + const { compositeTitleBackground, nodeBorder } = themeVariables; // Add outer g element const shapeSvg = parent @@ -307,11 +305,7 @@ const divider = async (parent, node) => { // add the rect const outerRectG = shapeSvg.insert('g', ':first-child'); - // Create the label and insert it after the rect - let innerRect = shapeSvg.append('rect'); - const padding = 0 * node.padding; - const halfPadding = padding / 2; const width = node.width + padding; @@ -322,12 +316,10 @@ const divider = async (parent, node) => { const x = node.x - width / 2; const y = node.y - height / 2; node.width = width; - const look = siteConfig.look; // add the rect let rect; if (node.look === 'handdrawn') { - const isAlt = node.cssClasses.includes('statediagram-cluster-alt'); const rc = rough.svg(shapeSvg); const roughOuterNode = node.rx || node.ry @@ -368,53 +360,6 @@ const divider = async (parent, node) => { return { cluster: shapeSvg, labelBBox: {} }; }; -const dividerOrg = (parent, node) => { - console.log('Divider node IPI', node); - const { handdrawnSeed } = getConfig(); - // Add outer g element - const shapeSvg = parent.insert('g').attr('class', node.cssClasses).attr('id', node.id); - - // add the rect - let rect; - - const padding = 0 * node.padding; - const halfPadding = padding / 2; - - const x = node.x - node.width / 2 - node.padding; - const y = node.y - node.height / 2 + node.padding; - const width = node.width + padding; - const height = node.height + padding; - if (node.look === 'handdrawn') { - const rc = rough.svg(shapeSvg); - const roughNode = rc.rectangle(x, y, width, height, { - fill: 'lightgrey', - roughness: 0.5, - strokeLineDash: [5], - seed: handdrawnSeed, - }); - - rect = shapeSvg.insert(() => roughNode); - } else { - rect = shapeSvg.insert('rect', ':first-child'); - // center the rect around its coordinate - rect - .attr('class', 'divider') - .attr('x', x) - .attr('y', y) - .attr('width', width) - .attr('height', height); - } - const rectBox = rect.node().getBBox(); - node.width = rectBox.width; - node.height = rectBox.height - node.padding; - node.diff = 0; //-node.padding / 2; - node.offsetY = 0; - node.intersect = function (point) { - return intersectRect(node, point); - }; - - return { cluster: shapeSvg, labelBBox: { width: 0, height: 0 } }; -}; const squareRect = rect; const shapes = { rect,