create Group type, remove empty g in svg

docs/config/setup/modules/mermaidAPI.md

@@ -96,15 +96,15 @@ mermaid.initialize(config);
 
 #### Defined in
 
-[mermaidAPI.ts:669](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L669)
+[mermaidAPI.ts:668](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L668)
 
 ## Functions
 
-### appendDivSvgG
+### appendDivSvg
 
-▸ **appendDivSvgG**(`parentRoot`, `id`, `enclosingDivId`, `divStyle?`, `svgXlink?`): `any`
+▸ **appendDivSvg**(`parentRoot`, `id`, `enclosingDivId`, `divStyle?`, `svgXlink?`): `any`
 
-Append an enclosing div, then svg, then g (group) to the d3 parentRoot. Set attributes.
+Append an enclosing div, then svg to the d3 parentRoot. Set attributes.
 Only set the style attribute on the enclosing div if divStyle is given.
 Only set the xmlns:xlink attribute on svg if svgXlink is given.
 Return the last node appended
@@ -320,4 +320,4 @@ Remove any existing elements from the given document
 
 #### Defined in
 
-[mermaidAPI.ts:360](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L360)
+[mermaidAPI.ts:359](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L359)

packages/mermaid/src/diagram-api/types.ts

@@ -83,4 +83,6 @@ export type HTML = d3.Selection<HTMLIFrameElement, unknown, Element | null, unkn
 
 export type SVG = d3.Selection<SVGSVGElement, unknown, Element | null, unknown>;
 
+export type Group = d3.Selection<SVGGElement, unknown, Element | null, unknown>;
+
 export type DiagramStylesProvider = (options?: any) => string;

packages/mermaid/src/diagrams/info/infoRenderer.ts

@@ -1,6 +1,6 @@
 import { log } from '../../logger.js';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
-import type { DrawDefinition, SVG } from '../../diagram-api/types.js';
+import type { DrawDefinition, Group, SVG } from '../../diagram-api/types.js';
 import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
 
 /**
@@ -11,24 +11,20 @@ import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
  * @param version - MermaidJS version.
  */
 const draw: DrawDefinition = (text, id, version) => {
-  try {
-    log.debug('rendering info diagram\n' + text);
+  log.debug('rendering info diagram\n' + text);
 
-    const svg: SVG = selectSvgElement(id);
-    configureSvgSize(svg, 100, 400, true);
+  const svg: SVG = selectSvgElement(id);
+  configureSvgSize(svg, 100, 400, true);
 
-    svg
-      .append('g')
-      .append('text')
-      .attr('x', 100)
-      .attr('y', 40)
-      .attr('class', 'version')
-      .attr('font-size', 32)
-      .style('text-anchor', 'middle')
-      .text(`v${version}`);
-  } catch (e) {
-    log.error('error while rendering info diagram', e);
-  }
+  const group: Group = svg.append('g');
+  group
+    .append('text')
+    .attr('x', 100)
+    .attr('y', 40)
+    .attr('class', 'version')
+    .attr('font-size', 32)
+    .style('text-anchor', 'middle')
+    .text(`v${version}`);
 };
 
 export const renderer = { draw };

packages/mermaid/src/mermaidAPI.spec.ts

@@ -42,7 +42,7 @@ import {
   decodeEntities,
   createCssStyles,
   createUserStyles,
-  appendDivSvgG,
+  appendDivSvg,
   cleanUpSvgCode,
   putIntoIFrame,
 } from './mermaidAPI.js';
@@ -233,46 +233,46 @@ describe('mermaidAPI', () => {
     const svg_attr_spy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
 
     it('appends a div node', () => {
-      appendDivSvgG(fauxParentNode, 'theId', 'dtheId');
+      appendDivSvg(fauxParentNode, 'theId', 'dtheId');
       expect(parent_append_spy).toHaveBeenCalledWith('div');
       expect(div_append_spy).toHaveBeenCalledWith('svg');
     });
     it('the id for the div is "d" with the id appended', () => {
-      appendDivSvgG(fauxParentNode, 'theId', 'dtheId');
+      appendDivSvg(fauxParentNode, 'theId', 'dtheId');
       expect(div_attr_spy).toHaveBeenCalledWith('id', 'dtheId');
     });
 
     it('sets the style for the div if one is given', () => {
-      appendDivSvgG(fauxParentNode, 'theId', 'dtheId', 'given div style', 'given x link');
+      appendDivSvg(fauxParentNode, 'theId', 'dtheId', 'given div style', 'given x link');
       expect(div_attr_spy).toHaveBeenCalledWith('style', 'given div style');
     });
 
     it('appends a svg node to the div node', () => {
-      appendDivSvgG(fauxParentNode, 'theId', 'dtheId');
+      appendDivSvg(fauxParentNode, 'theId', 'dtheId');
       expect(div_attr_spy).toHaveBeenCalledWith('id', 'dtheId');
     });
     it('sets the svg width to 100%', () => {
-      appendDivSvgG(fauxParentNode, 'theId', 'dtheId');
+      appendDivSvg(fauxParentNode, 'theId', 'dtheId');
       expect(svg_attr_spy).toHaveBeenCalledWith('width', '100%');
     });
     it('the svg id is the id', () => {
-      appendDivSvgG(fauxParentNode, 'theId', 'dtheId');
+      appendDivSvg(fauxParentNode, 'theId', 'dtheId');
       expect(svg_attr_spy).toHaveBeenCalledWith('id', 'theId');
     });
     it('the svg xml namespace is the 2000 standard', () => {
-      appendDivSvgG(fauxParentNode, 'theId', 'dtheId');
+      appendDivSvg(fauxParentNode, 'theId', 'dtheId');
       expect(svg_attr_spy).toHaveBeenCalledWith('xmlns', 'http://www.w3.org/2000/svg');
     });
     it('sets the  svg xlink if one is given', () => {
-      appendDivSvgG(fauxParentNode, 'theId', 'dtheId', 'div style', 'given x link');
+      appendDivSvg(fauxParentNode, 'theId', 'dtheId', 'div style', 'given x link');
       expect(svg_attr_spy).toHaveBeenCalledWith('xmlns:xlink', 'given x link');
     });
     it('appends a g (group) node to the svg node', () => {
-      appendDivSvgG(fauxParentNode, 'theId', 'dtheId');
+      appendDivSvg(fauxParentNode, 'theId', 'dtheId');
       expect(svg_append_spy).toHaveBeenCalledWith('g');
     });
     it('returns the given parentRoot d3 nodes', () => {
-      expect(appendDivSvgG(fauxParentNode, 'theId', 'dtheId')).toEqual(fauxParentNode);
+      expect(appendDivSvg(fauxParentNode, 'theId', 'dtheId')).toEqual(fauxParentNode);
     });
   });
 

packages/mermaid/src/mermaidAPI.ts

@@ -295,7 +295,7 @@ export const putIntoIFrame = (svgCode = '', svgElement?: D3Element): string => {
 };
 
 /**
- * Append an enclosing div, then svg, then g (group) to the d3 parentRoot. Set attributes.
+ * Append an enclosing div, then svg to the d3 parentRoot. Set attributes.
  * Only set the style attribute on the enclosing div if divStyle is given.
  * Only set the xmlns:xlink attribute on svg if svgXlink is given.
  * Return the last node appended
@@ -307,7 +307,7 @@ export const putIntoIFrame = (svgCode = '', svgElement?: D3Element): string => {
  * @param svgXlink - if given, the link to set the new svg element to
  * @returns - returns the parentRoot that had nodes appended
  */
-export const appendDivSvgG = (
+export const appendDivSvg = (
   parentRoot: D3Element,
   id: string,
   enclosingDivId: string,
@@ -329,7 +329,6 @@ export const appendDivSvgG = (
     svgNode.attr('xmlns:xlink', svgXlink);
   }
 
-  svgNode.append('g');
   return parentRoot;
 };
 
@@ -440,7 +439,7 @@ const render = async function (
     } else {
       root = select(svgContainingElement);
     }
-    appendDivSvgG(root, id, enclosingDivID, `font-family: ${fontFamily}`, XMLNS_XLINK_STD);
+    appendDivSvg(root, id, enclosingDivID, `font-family: ${fontFamily}`, XMLNS_XLINK_STD);
   } else {
     // No svgContainingElement was provided
 
@@ -459,7 +458,7 @@ const render = async function (
       root = select('body');
     }
 
-    appendDivSvgG(root, id, enclosingDivID);
+    appendDivSvg(root, id, enclosingDivID);
   }
 
   text = encodeEntities(text);