5237 Lint fixes

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<string, boolean>,
   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',
+      arrowTypeStart,
-      arrowTypeEnd: 'arrow_point',
+      arrowTypeEnd,
-      // arrowTypeEnd: 'arrow_barb',
       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 };
 };
 

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(

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;

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 {

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)

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('markerWidth', 8)
-    .attr('markerHeight', 11)
+    .attr('markerHeight', 8)
     .attr('orient', 'auto')
     .append('path')
     .attr('d', 'M 0 5 L 10 10 L 10 0 z')

packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts

@@ -18,7 +18,7 @@ export const circle = async (parent: SVGAElement, node: Node): Promise<SVGAEleme
   const { cssStyles, useRough } = node;
 
   if (useRough) {
-    // @ts-ignore
+    // @ts-ignore - rough is not typed
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});
     const roughNode = rc.circle(0, 0, radius * 2, options);

packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts

@@ -5,16 +5,6 @@ import type { Node } from '$root/rendering-util/types.d.ts';
 import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
 import rough from 'roughjs';
 
-/**
- * Creates an SVG path for a cylindrical 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 cylinder.
- * @param {number} height - The height of the cylinder.
- * @param {number} rx - The x-radius of the cylinder's ends.
- * @param {number} ry - The y-radius of the cylinder's ends.
- * @returns {string} The path data for the cylindrical shape.
- */
 export const createCylinderPathD = (
   x: number,
   y: number,
@@ -71,7 +61,7 @@ export const cylinder = async (parent: SVGAElement, node: Node) => {
   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);

packages/mermaid/src/rendering-util/rendering-elements/shapes/doubleCircle.ts

@@ -21,7 +21,7 @@ export const doublecircle = async (parent: SVGAElement, node: Node): Promise<SVG
   const { cssStyles, useRough } = node;
 
   if (useRough) {
-    // @ts-ignore
+    // @ts-ignore - rough is not typed
     const rc = rough.svg(shapeSvg);
     const outerOptions = userNodeOverrides(node, { roughness: 0.2, strokeWidth: 2.5 });
 

packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts

@@ -20,7 +20,8 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt
   const y = -bbox.height / 2 - halfPadding;
 
   let rect;
-  let { rx, ry, cssStyles, useRough } = node;
+  let { rx, ry } = node;
+  const { cssStyles, useRough } = node;
 
   //use options rx, ry overrides if present
   if (options && options.rx && options.ry) {

packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts

@@ -7,15 +7,6 @@ import rough from 'roughjs';
 
 import { insertPolygonShape } from './insertPolygonShape.js';
 
-/**
- * Creates an SVG path for a hexagon 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 hexagon.
- * @param {number} height - The height of the hexagon.
- * @param {number} m - The margin size for the hexagon.
- * @returns {string} The path data for the hexagon shape.
- */
 export const createHexagonPathD = (
   x: number,
   y: number,
@@ -59,7 +50,7 @@ export const hexagon = async (parent: SVGAElement, node: Node): Promise<SVGAElem
   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 = createHexagonPathD(0, 0, w, h, m);

packages/mermaid/src/rendering-util/rendering-elements/shapes/insertPolygonShape.ts

@@ -1,9 +1,3 @@
-/**
- * @param parent
- * @param w
- * @param h
- * @param points
- */
 export function insertPolygonShape(
   parent: any,
   w: number,

packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts

@@ -7,14 +7,6 @@ import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shape
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 
-/**
- * Creates an SVG path for an inverted 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 inverted trapezoid shape.
- */
 export const createInvertedTrapezoidPathD = (
   x: number,
   y: number,
@@ -46,7 +38,7 @@ export const inv_trapezoid = async (parent: SVGAElement, node: Node): Promise<SV
   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 = createInvertedTrapezoidPathD(0, 0, w, h);

packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.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 lean left 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 lean left shape.
- */
 export const createLeanLeftPathD = (
   x: number,
   y: number,
@@ -45,7 +37,7 @@ export const lean_left = async (parent: SVGAElement, node: Node): Promise<SVGAEl
   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 = createLeanLeftPathD(0, 0, w, h);

packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.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 lean right 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 lean right shape.
- */
 export const createLeanRightPathD = (
   x: number,
   y: number,
@@ -45,7 +37,7 @@ export const lean_right = async (parent: SVGAElement, node: Node): Promise<SVGAE
   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 = createLeanRightPathD(0, 0, w, h);

packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts

@@ -6,13 +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 decision box shape (question 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} size - The size of the shape.
- * @returns {string} The path data for the decision box shape.
- */
 export const createDecisionBoxPathD = (x: number, y: number, size: number): string => {
   return [
     `M${x + size / 2},${y}`,
@@ -41,7 +34,7 @@ export const question = async (parent: SVGAElement, node: Node): Promise<SVGAEle
   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 = createDecisionBoxPathD(0, 0, s);

packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.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 special polygon shape with a left-inverted arrow.
- * @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 special polygon shape.
- */
 export const createPolygonPathD = (x: number, y: number, width: number, height: number): string => {
   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);

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, {});
 

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);

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,

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;