chore: Use for-of loops, fix imports, use let

packages/mermaid/src/diagrams/state/dataFetcher.js

@@ -123,8 +123,7 @@ const setupDoc = (parentParsedItem, doc, diagramStates, nodes, edges, altFlag, l
 const getDir = (parsedItem, defaultDir = DEFAULT_NESTED_DOC_DIR) => {
   let dir = defaultDir;
   if (parsedItem.doc) {
-    for (let i = 0; i < parsedItem.doc.length; i++) {
+    for (const parsedItemDoc of parsedItem.doc) {
-      const parsedItemDoc = parsedItem.doc[i];
       if (parsedItemDoc.stmt === 'dir') {
         dir = parsedItemDoc.value;
       }

packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts

@@ -19,8 +19,7 @@ import { CSS_DIAGRAM, DEFAULT_NESTED_DOC_DIR } from './stateCommon.js';
 const getDir = (parsedItem: any, defaultDir = DEFAULT_NESTED_DOC_DIR) => {
   let dir = defaultDir;
   if (parsedItem.doc) {
-    for (let i = 0; i < parsedItem.doc.length; i++) {
+    for (const parsedItemDoc of parsedItem.doc) {
-      const parsedItemDoc = parsedItem.doc[i];
       if (parsedItemDoc.stmt === 'dir') {
         dir = parsedItemDoc.value;
       }

packages/mermaid/src/rendering-util/createText.ts

@@ -8,7 +8,7 @@ import { markdownToHTML, markdownToLines } from '../rendering-util/handle-markdo
 import { decodeEntities } from '../utils.js';
 import { splitLineToFitWidth } from './splitText.js';
 import type { MarkdownLine, MarkdownWord } from './types.js';
-import common, { hasKatex, renderKatex, hasKatex } from '$root/diagrams/common/common.js';
+import common, { hasKatex, renderKatex } from '$root/diagrams/common/common.js';
 import { getConfig } from '$root/diagram-api/diagramAPI.js';
 
 function applyStyle(dom, styleFn) {

packages/mermaid/src/rendering-util/rendering-elements/intersect/intersect-polygon.js

@@ -13,13 +13,13 @@ export default intersectPolygon;
  * @param point
  */
 function intersectPolygon(node, polyPoints, point) {
-  var x1 = node.x;
+  let x1 = node.x;
-  var y1 = node.y;
+  let y1 = node.y;
 
-  var intersections = [];
+  let intersections = [];
 
-  var minX = Number.POSITIVE_INFINITY;
+  let minX = Number.POSITIVE_INFINITY;
-  var minY = Number.POSITIVE_INFINITY;
+  let minY = Number.POSITIVE_INFINITY;
   if (typeof polyPoints.forEach === 'function') {
     polyPoints.forEach(function (entry) {
       minX = Math.min(minX, entry.x);
@@ -30,13 +30,13 @@ function intersectPolygon(node, polyPoints, point) {
     minY = Math.min(minY, polyPoints.y);
   }
 
-  var left = x1 - node.width / 2 - minX;
+  let left = x1 - node.width / 2 - minX;
-  var top = y1 - node.height / 2 - minY;
+  let top = y1 - node.height / 2 - minY;
 
-  for (var i = 0; i < polyPoints.length; i++) {
+  for (let i = 0; i < polyPoints.length; i++) {
-    var p1 = polyPoints[i];
+    let p1 = polyPoints[i];
-    var p2 = polyPoints[i < polyPoints.length - 1 ? i + 1 : 0];
+    let p2 = polyPoints[i < polyPoints.length - 1 ? i + 1 : 0];
-    var intersect = intersectLine(
+    let intersect = intersectLine(
       node,
       point,
       { x: left + p1.x, y: top + p1.y },
@@ -54,13 +54,13 @@ function intersectPolygon(node, polyPoints, point) {
   if (intersections.length > 1) {
     // More intersections, find the one nearest to edge end point
     intersections.sort(function (p, q) {
-      var pdx = p.x - point.x;
+      let pdx = p.x - point.x;
-      var pdy = p.y - point.y;
+      let pdy = p.y - point.y;
-      var distp = Math.sqrt(pdx * pdx + pdy * pdy);
+      let distp = Math.sqrt(pdx * pdx + pdy * pdy);
 
-      var qdx = q.x - point.x;
+      let qdx = q.x - point.x;
-      var qdy = q.y - point.y;
+      let qdy = q.y - point.y;
-      var distq = Math.sqrt(qdx * qdx + qdy * qdy);
+      let distq = Math.sqrt(qdx * qdx + qdy * qdy);
 
       return distp < distq ? -1 : distp === distq ? 0 : 1;
     });

packages/mermaid/src/rendering-util/types.d.ts

@@ -136,39 +136,3 @@ export type LayoutMethod =
   | 'fdp'
   | 'osage'
   | 'grid';
-
-export function createDomElement(node: Node): Node {
-  // Create a new DOM element. Assuming we're creating a div as an example
-  const element = document.createElement('div');
-
-  // Check if node.domId is set, if not generate a unique identifier for it
-  if (!node.domId) {
-    // This is a simplistic approach to generate a unique ID
-    // In a real application, you might want to use a more robust method
-    node.domId = `node-${Math.random().toString(36).substr(2, 9)}`;
-  }
-
-  // Set the ID of the DOM element
-  element.id = node.domId;
-
-  // Optional: Apply styles and classes to the element
-  if (node.cssStyles) {
-    element.style.cssText = node.cssStyles;
-  }
-  if (node.classes) {
-    element.className = node.classes;
-  }
-
-  // Optional: Add content or additional attributes to the element
-  // This can be based on other properties of the node
-  if (node.label) {
-    element.textContent = node.label;
-  }
-
-  // Append the newly created element to the document body or a specific container
-  // This is just an example; in a real application, you might append it somewhere specific
-  document.body.appendChild(element);
-
-  // Return the updated node with its domId set
-  return node;
-}