Removing the redundant element in the render function

mermaid-js · Aug 22, 2024 · 47ac57b · 47ac57b
1 parent f1c066b
commit 47ac57b
Show file tree

Hide file tree

Showing 8 changed files with 8,236 additions and 10,409 deletions.
diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
@@ -84,17 +84,20 @@
     <div class="flex">
       <pre id="diagram" class="mermaid">
 ---
-config:
-  look: handDrawn
-  layout: elk
-  elk:
+  title: hello2
+  config:
+    look: handDrawn
+    layout: elk
+    elk:
         nodePlacementStrategy: BRANDES_KOEPF
 ---
-flowchart TB
-    %% A --> C
-    B -- sdf sdf --> C{"Evaluate"}
-    C --> n4["salkdfjh akljd lkasdjf lkashj lksjadf klasdh"]
-    C --> F
+flowchart LR
+  A[Start] --Some text--> B(Continue)
+  B --> C{Evaluate}
+  C -- One --> D[Option 1]
+  C -- Two --> E[Option 2]
+  C -- Three --> F[fa:fa-car Option 3]
+
 
 
 </pre

diff --git a/packages/mermaid-layout-elk/src/render.ts b/packages/mermaid-layout-elk/src/render.ts
@@ -6,7 +6,6 @@ import { type TreeData, findCommonAncestor } from './find-common-ancestor.js';
 export const render = async (
   data4Layout: LayoutData,
   svg: SVG,
-  element: any,
   {
     common,
     getConfig,
@@ -739,7 +738,7 @@ export const render = async (
 
   // @ts-ignore - ELK is not typed
   const elk = new ELK();
-
+  const element = svg.select('g');
   // Add the arrowheads to the svg
   insertMarkers(element, data4Layout.markers, data4Layout.type, data4Layout.diagramId);
 

diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts
@@ -2,7 +2,7 @@ import { select } from 'd3';
 import { getConfig } from '../../diagram-api/diagramAPI.js';
 import type { DiagramStyleClassDef } from '../../diagram-api/types.js';
 import { log } from '../../logger.js';
-import { getDiagramElements } from '../../rendering-util/insertElementsForSize.js';
+import { getDiagramElement } from '../../rendering-util/insertElementsForSize.js';
 import { getRegisteredLayoutAlgorithm, render } from '../../rendering-util/render.js';
 import { setupViewPortForSVG } from '../../rendering-util/setupViewPortForSVG.js';
 import type { LayoutData } from '../../rendering-util/types.js';
@@ -35,8 +35,8 @@ export const draw = async function (text: string, id: string, _version: string,
   log.debug('Before getData: ');
   const data4Layout = diag.db.getData() as LayoutData;
   log.debug('Data: ', data4Layout);
-  // Create the root SVG - the element is the div containing the SVG element
-  const { element, svg } = getDiagramElements(id, securityLevel);
+  // Create the root SVG
+  const svg = getDiagramElement(id, securityLevel);
   const direction = getDirection();
 
   data4Layout.type = diag.type;
@@ -53,7 +53,7 @@ export const draw = async function (text: string, id: string, _version: string,
 
   data4Layout.diagramId = id;
   log.debug('REF1:', data4Layout);
-  await render(data4Layout, svg, element);
+  await render(data4Layout, svg);
   const padding = data4Layout.config.flowchart?.padding ?? 8;
   utils.insertTitle(
     svg,

diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts b/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts
@@ -1,7 +1,7 @@
 import { getConfig } from '../../diagram-api/diagramAPI.js';
 import type { DiagramStyleClassDef } from '../../diagram-api/types.js';
 import { log } from '../../logger.js';
-import { getDiagramElements } from '../../rendering-util/insertElementsForSize.js';
+import { getDiagramElement } from '../../rendering-util/insertElementsForSize.js';
 import { render } from '../../rendering-util/render.js';
 import { setupViewPortForSVG } from '../../rendering-util/setupViewPortForSVG.js';
 import type { LayoutData } from '../../rendering-util/types.js';
@@ -55,7 +55,7 @@ export const draw = async function (text: string, id: string, _version: string,
   const data4Layout = diag.db.getData() as LayoutData;
 
   // Create the root SVG - the element is the div containing the SVG element
-  const { element, svg } = getDiagramElements(id, securityLevel);
+  const svg = getDiagramElement(id, securityLevel);
 
   data4Layout.type = diag.type;
   data4Layout.layoutAlgorithm = layout;
@@ -67,10 +67,10 @@ export const draw = async function (text: string, id: string, _version: string,
   data4Layout.markers = ['barb'];
   data4Layout.diagramId = id;
   // console.log('REF1:', data4Layout);
-  await render(data4Layout, svg, element);
+  await render(data4Layout, svg);
   const padding = 8;
   utils.insertTitle(
-    element,
+    svg,
     'statediagramTitleText',
     conf?.titleTopMargin ?? 25,
     diag.db.getDiagramTitle()

diff --git a/packages/mermaid/src/rendering-util/insertElementsForSize.js b/packages/mermaid/src/rendering-util/insertElementsForSize.js
@@ -1,7 +1,7 @@
 import { select } from 'd3';
 import { insertNode } from '../dagre-wrapper/nodes.js';
 
-export const getDiagramElements = (id, securityLevel) => {
+export const getDiagramElement = (id, securityLevel) => {
   let sandboxElement;
   if (securityLevel === 'sandbox') {
     sandboxElement = select('#i' + id);
@@ -15,9 +15,7 @@ export const getDiagramElements = (id, securityLevel) => {
 
   // Run the renderer. This is what draws the final graph.
 
-  // @ts-ignore todo: fix this
-  const element = root.select('#' + id + ' g');
-  return { svg, element };
+  return svg;
 };
 
 export function insertElementsForSize(el, data) {

diff --git a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
@@ -268,7 +268,7 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit
   return { elem, diff };
 };
 
-export const render = async (data4Layout, svg, element) => {
+export const render = async (data4Layout, svg) => {
   const graph = new graphlib.Graph({
     multigraph: true,
     compound: true,
@@ -289,7 +289,7 @@ export const render = async (data4Layout, svg, element) => {
     .setDefaultEdgeLabel(function () {
       return {};
     });
-
+  const element = svg.select('g');
   insertMarkers(element, data4Layout.markers, data4Layout.type, data4Layout.diagramId);
   clearNodes();
   clearEdges();

diff --git a/packages/mermaid/src/rendering-util/render.ts b/packages/mermaid/src/rendering-util/render.ts
@@ -12,7 +12,6 @@ export interface LayoutAlgorithm {
   render(
     layoutData: LayoutData,
     svg: SVG,
-    element: any,
     helpers: InternalHelpers,
     options?: RenderOptions
   ): Promise<void>;
@@ -45,14 +44,14 @@ const registerDefaultLayoutLoaders = () => {
 
 registerDefaultLayoutLoaders();
 
-export const render = async (data4Layout: LayoutData, svg: SVG, element: any) => {
+export const render = async (data4Layout: LayoutData, svg: SVG) => {
   if (!(data4Layout.layoutAlgorithm in layoutAlgorithms)) {
     throw new Error(`Unknown layout algorithm: ${data4Layout.layoutAlgorithm}`);
   }
 
   const layoutDefinition = layoutAlgorithms[data4Layout.layoutAlgorithm];
   const layoutRenderer = await layoutDefinition.loader();
-  return layoutRenderer.render(data4Layout, svg, element, internalHelpers, {
+  return layoutRenderer.render(data4Layout, svg, internalHelpers, {
     algorithm: layoutDefinition.algorithm,
   });
 };