style(arch): resolved es-lint errors

2025-08-15 06:19:24 +02:00 · 2024-04-11 12:21:44 -05:00
parent 6bd1da219a
commit 073175e5f7
12 changed files with 92 additions and 88 deletions
--- a/.cspell/code-terms.txt
+++ b/.cspell/code-terms.txt
@@ -53,6 +53,7 @@ GENERICTYPE
 getBoundarys
 grammr
 graphtype
+halign
 iife
 interp
 introdcued
@@ -64,6 +65,7 @@ Kaufmann
 keyify
 LABELPOS
 LABELTYPE
+layoutstop
 lcov
 LEFTOF
 Lexa
--- a/.cspell/libraries.txt
+++ b/.cspell/libraries.txt
@@ -23,6 +23,7 @@ Docsy
 DokuWiki
 dompurify
 elkjs
+fcose
 fontawesome
 Foswiki
 Gitea
--- a/packages/mermaid/src/diagrams/architecture/architectureDb.ts
+++ b/packages/mermaid/src/diagrams/architecture/architectureDb.ts
@@ -38,7 +38,7 @@ const state = new ImperativeState<ArchitectureState>(() => ({
  edges: [],
  registeredIds: {},
  config: DEFAULT_ARCHITECTURE_CONFIG,
-  datastructures: undefined,
+  dataStructures: undefined,
  elements: {}
 }))

@@ -164,7 +164,7 @@ const getEdges = (): ArchitectureEdge[] => state.records.edges;
 * @returns
 */
 const getDataStructures = () => {
-  if (state.records.datastructures === undefined) {
+  if (state.records.dataStructures === undefined) {
    // Create an adjacency list of the diagram to perform BFS on
    // Outer reduce applied on all services
    // Inner reduce applied on the edges for a service
@@ -192,7 +192,7 @@ const getDataStructures = () => {
    );

    // Configuration for the initial pass of BFS
-    const [firstId, _] = Object.entries(adjList)[0];
+    const firstId = Object.keys(adjList)[0];
    const visited = { [firstId]: 1 };
    const notVisited = Object.keys(adjList).reduce(
      (prev, id) => (id === firstId ? prev : { ...prev, [id]: 1 }),
@@ -229,13 +229,13 @@ const getDataStructures = () => {
    while (Object.keys(notVisited).length > 0) {
      spatialMaps.push(BFS(Object.keys(notVisited)[0]));
    }
-    state.records.datastructures = {
+    state.records.dataStructures = {
      adjList,
      spatialMaps,
    };
-    console.log(state.records.datastructures);
+    console.log(state.records.dataStructures);
  }
-  return state.records.datastructures;
+  return state.records.dataStructures;
 };

 const setElementForId = (id: string, element: D3Element) => {
@@ -265,7 +265,7 @@ export const db: ArchitectureDB = {

 /**
 * Typed wrapper for resolving an architecture diagram's config fields. Returns the default value if undefined
- * @param field
+ * @param field - the config field to access
 * @returns
 */
 export function getConfigField<T extends keyof ArchitectureDiagramConfig>(
@@ -273,7 +273,6 @@ export function getConfigField<T extends keyof ArchitectureDiagramConfig>(
 ): Required<ArchitectureDiagramConfig>[T] {
  const arch = getConfig().architecture;
  if (arch && arch[field] !== undefined) {
-    const a = arch[field];
    return arch[field] as Required<ArchitectureDiagramConfig>[T];
  }
  return DEFAULT_ARCHITECTURE_CONFIG[field];
--- a/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts
+++ b/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts
@@ -1,25 +1,27 @@
-import cytoscape, { Position } from 'cytoscape';
+import type { Position } from 'cytoscape';
+import cytoscape from 'cytoscape';
 import type { Diagram } from '../../Diagram.js';
-import fcose, { FcoseLayoutOptions } from 'cytoscape-fcose';
-import type { MermaidConfig } from '../../config.type.js';
-import { getConfig } from '../../diagram-api/diagramAPI.js';
+import type { FcoseLayoutOptions } from 'cytoscape-fcose';
+import fcose from 'cytoscape-fcose';
 import type { DrawDefinition, SVG } from '../../diagram-api/types.js';
 import { log } from '../../logger.js';
 import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
+import type {
+  ArchitectureDataStructures,
+  ArchitectureSpatialMap,
+  EdgeSingularData,
+  EdgeSingular
+} from './architectureTypes.js';
 import {
  type ArchitectureDB,
  type ArchitectureDirection,
  type ArchitectureGroup,
  type ArchitectureEdge,
  type ArchitectureService,
-  ArchitectureDataStructures,
  ArchitectureDirectionName,
  getOppositeArchitectureDirection,
  isArchitectureDirectionXY,
  isArchitectureDirectionY,
-  ArchitectureSpatialMap,
-  EdgeSingularData,
-  EdgeSingular,
  nodeData,
  edgeData
 } from './architectureTypes.js';
@@ -49,9 +51,9 @@ function addServices(services: ArchitectureService[], cy: cytoscape.Core) {
 }

 function positionServices(db: ArchitectureDB, cy: cytoscape.Core) {
-  cy.nodes().map((node, id) => {
+  cy.nodes().map((node) => {
    const data = nodeData(node)
-    if (data.type === 'group') return;
+    if (data.type === 'group') { return; }
    data.x = node.position().x;
    data.y = node.position().y;

@@ -121,8 +123,8 @@ function getAlignments(spatialMaps: ArchitectureSpatialMap[]): fcose.FcoseAlignm
    const verticalAlignments: Record<number, string[]> = {};
    // Group service ids in an object with their x and y coordinate as the key
    Object.entries(spatialMap).forEach(([id, [x, y]]) => {
-      if (!horizontalAlignments[y]) horizontalAlignments[y] = [];
-      if (!verticalAlignments[x]) verticalAlignments[x] = [];
+      if (!horizontalAlignments[y]) { horizontalAlignments[y] = []; }
+      if (!verticalAlignments[x]) { verticalAlignments[x] = []; }
      horizontalAlignments[y].push(id);
      verticalAlignments[x].push(id);
    });
@@ -133,7 +135,7 @@ function getAlignments(spatialMaps: ArchitectureSpatialMap[]): fcose.FcoseAlignm
    };
  });

-  // Merge the alginment lists for each spatial map into one 2d array per axis
+  // Merge the alignment lists for each spatial map into one 2d array per axis
  const [horizontal, vertical] = alignments.reduce(
    ([prevHoriz, prevVert], { horiz, vert }) => {
      return [
@@ -226,7 +228,7 @@ function layoutArchitecture(
            'curve-style': 'segments',
            'segment-weights': '0',
            'segment-distances': [0.5],
-            //@ts-ignore
+            // @ts-ignore Incorrect library types
            'edge-distances': 'endpoints',
            'source-endpoint': 'data(sourceEndpoint)',
            'target-endpoint': 'data(targetEndpoint)',
@@ -235,7 +237,7 @@ function layoutArchitecture(
        {
          selector: 'node',
          style: {
-            //@ts-ignore
+            // @ts-ignore Incorrect library types
            'compound-sizing-wrt-labels': 'include',
          },
        },
@@ -258,7 +260,7 @@ function layoutArchitecture(
        {
          selector: '.node-group',
          style: {
-            //@ts-ignore
+            // @ts-ignore Incorrect library types
            padding: '30px',
          },
        },
@@ -312,7 +314,7 @@ function layoutArchitecture(
    } as FcoseLayoutOptions);

    // Once the diagram has been generated and the service's position cords are set, adjust the XY edges to have a 90deg bend
-    layout.one('layoutstop', (_event) => {
+    layout.one('layoutstop', () => {
      function getSegmentWeights(
        source: Position,
        target: Position,
@@ -361,13 +363,13 @@ function layoutArchitecture(
        };
      }
      cy.startBatch();
-      for (let edge of Object.values(cy.edges())) {
+      for (const edge of Object.values(cy.edges())) {
        if (edge.data?.()) {
-          let { x: sX, y: sY } = edge.source().position();
-          let { x: tX, y: tY } = edge.target().position();
+          const { x: sX, y: sY } = edge.source().position();
+          const { x: tX, y: tY } = edge.target().position();
          if (sX !== tX && sY !== tY) {
-            let sEP = edge.sourceEndpoint();
-            let tEP = edge.targetEndpoint();
+            const sEP = edge.sourceEndpoint();
+            const tEP = edge.targetEndpoint();
            const { sourceDir } = edgeData(edge)
            const [pointX, pointY] = isArchitectureDirectionY(sourceDir)
              ? [sEP.x, tEP.y]
--- a/packages/mermaid/src/diagrams/architecture/architectureTypes.ts
+++ b/packages/mermaid/src/diagrams/architecture/architectureTypes.ts
@@ -1,7 +1,7 @@
 import type { DiagramDB } from '../../diagram-api/types.js';
 import type { ArchitectureDiagramConfig } from '../../config.type.js';
 import type { D3Element } from '../../mermaidAPI.js';
-import cytoscape from 'cytoscape';
+import type cytoscape from 'cytoscape';

 /*=======================================*\
 |       Architecture Diagram Types        |
@@ -27,9 +27,9 @@ export const ArchitectureDirectionArrow = {

 export const ArchitectureDirectionArrowShift = {
  L: (orig: number, arrowSize: number) => orig - arrowSize + 2,
-  R: (orig: number, arrowSize: number) => orig - 2,
+  R: (orig: number, _arrowSize: number) => orig - 2,
  T: (orig: number, arrowSize: number) => orig - arrowSize + 2,
-  B: (orig: number, arrowSize: number) => orig - 2,
+  B: (orig: number, _arrowSize: number) => orig - 2,
 } as const;

 export const getOppositeArchitectureDirection = function (
@@ -80,7 +80,7 @@ export type ArchitectureDirectionPair = Exclude<
 >;
 /**
 * Verifies that the architecture direction pair does not contain an invalid match (LL, RR, TT, BB)
- * @param x architecture direction pair which could potentially be invalid
+ * @param x - architecture direction pair which could potentially be invalid
 * @returns true if the pair is not LL, RR, TT, or BB
 */
 export const isValidArchitectureDirectionPair = function (
@@ -96,8 +96,8 @@ export type ArchitectureDirectionPairMap = {
 * Creates a pair of the directions of each side of an edge. This function should be used instead of manually creating it to ensure that the source is always the first character.
 *
 * Note: Undefined is returned when sourceDir and targetDir are the same. In theory this should never happen since the diagram parser throws an error if a user defines it as such.
- * @param sourceDir
- * @param targetDir
+ * @param sourceDir - source direction
+ * @param targetDir - target direction
 * @returns
 */
 export const getArchitectureDirectionPair = function (
@@ -110,8 +110,8 @@ export const getArchitectureDirectionPair = function (

 /**
 * Given an x,y position for an arrow and the direction of the edge it belongs to, return a factor for slightly shifting the edge
- * @param param0 [x, y] coordinate pair
- * @param pair architecture direction pair
+ * @param param0 - [x, y] coordinate pair
+ * @param pair - architecture direction pair
 * @returns a new [x, y] coordinate pair
 */
 export const shiftPositionByArchitectureDirectionPair = function (
@@ -197,7 +197,7 @@ export interface ArchitectureState extends Record<string, unknown> {
  groups: ArchitectureGroup[];
  edges: ArchitectureEdge[];
  registeredIds: Record<string, 'service' | 'group'>;
-  datastructures?: ArchitectureDataStructures;
+  dataStructures?: ArchitectureDataStructures;
  elements: Record<string, D3Element>;
  config: ArchitectureDiagramConfig;
 }
@@ -221,7 +221,7 @@ export const edgeData = (edge: cytoscape.EdgeSingular) => {
  return edge.data() as EdgeSingularData;
 }

-export interface EdgeSingular extends cytoscape.EdgeSingular{
+export interface EdgeSingular extends cytoscape.EdgeSingular {
  _private: {
    bodyBounds: unknown;
    rscratch: {
@@ -247,20 +247,20 @@ export type NodeSingularData = {
  height: number;
  [key: string]: any;
 }
-| {
+  | {
    type: 'group';
    id: string;
    icon?: string;
    label?: string;
    parent?: string;
    [key: string]: any;
-};
+  };

 export const nodeData = (node: cytoscape.NodeSingular) => {
  return node.data() as NodeSingularData;
 }

-export interface NodeSingular extends cytoscape.NodeSingular{
+export interface NodeSingular extends cytoscape.NodeSingular {
  _private: {
    bodyBounds: {
      h: number;
--- a/packages/mermaid/src/diagrams/architecture/svgDraw.ts
+++ b/packages/mermaid/src/diagrams/architecture/svgDraw.ts
@@ -11,7 +11,6 @@ import {
  nodeData,
 } from './architectureTypes.js';
 import type cytoscape from 'cytoscape';
-import { log } from '../../logger.js';
 import { getIcon } from '../../rendering-util/svgRegister.js';
 import { getConfigField } from './architectureDb.js';
 import { getConfig } from '../../diagram-api/diagramAPI.js';
@@ -74,7 +73,8 @@ export const drawGroups = function (groupsEl: D3Element, cy: cytoscape.Core) {
    if (data.type === 'group') {
      const { h, w, x1, x2, y1, y2 } = node.boundingBox();
      console.log(`Draw group (${data.id}): pos=(${x1}, ${y1}), dim=(${w}, ${h})`);
-      let bkgElem = groupsEl
+
+      groupsEl
        .append('rect')
        .attr('x', x1 + halfIconSize)
        .attr('y', y1 + halfIconSize)
--- a/packages/mermaid/src/rendering-util/svg/database.ts
+++ b/packages/mermaid/src/rendering-util/svg/database.ts
@@ -1,5 +1,5 @@
 /**
- * @author Nicolas Newman
+ * Designer: Nicolas Newman
 * @see https://github.com/NicolasNewman/IconLibrary
 */
 import { createIcon } from '../svgRegister.js';
--- a/packages/mermaid/src/rendering-util/svg/disk.ts
+++ b/packages/mermaid/src/rendering-util/svg/disk.ts
@@ -1,5 +1,5 @@
 /**
- * @author Nicolas Newman
+ * Designer: Nicolas Newman
 * @see https://github.com/NicolasNewman/IconLibrary
 */
 import { createIcon } from '../svgRegister.js';
--- a/packages/mermaid/src/rendering-util/svg/index.ts
+++ b/packages/mermaid/src/rendering-util/svg/index.ts
@@ -1,4 +1,4 @@
-import { IconLibrary } from '../svgRegister.js';
+import type { IconLibrary } from '../svgRegister.js';
 import database from './database.js';
 import server from './server.js';
 import disk from './disk.js';
--- a/packages/mermaid/src/rendering-util/svg/internet.ts
+++ b/packages/mermaid/src/rendering-util/svg/internet.ts
@@ -1,5 +1,5 @@
 /**
- * @author Nicolas Newman
+ * Designer: Nicolas Newman
 * @see https://github.com/NicolasNewman/IconLibrary
 */
 import { createIcon } from '../svgRegister.js';
--- a/packages/mermaid/src/rendering-util/svg/server.ts
+++ b/packages/mermaid/src/rendering-util/svg/server.ts
@@ -1,5 +1,5 @@
 /**
- * @author Nicolas Newman
+ * Designer: Nicolas Newman
 * @see https://github.com/NicolasNewman/IconLibrary
 */
 import { createIcon } from '../svgRegister.js';
--- a/packages/mermaid/src/rendering-util/svgRegister.ts
+++ b/packages/mermaid/src/rendering-util/svgRegister.ts
@@ -1,4 +1,4 @@
-import { Selection } from 'd3-selection';
+import type { Selection } from 'd3-selection';

 type IconResolver = (
  parent: Selection<SVGGElement, unknown, Element | null, unknown>,