style(arch): prettier formatting

2025-09-14 12:59:46 +02:00 · 2024-03-19 13:57:37 -05:00
parent 84bd20b04b
commit 5e214877a4
8 changed files with 165 additions and 144 deletions
--- a/.vite/jsonSchemaPlugin.ts
+++ b/.vite/jsonSchemaPlugin.ts
@@ -26,7 +26,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [
  'c4',
  'sankey',
  'block',
-  'architecture'
+  'architecture',
 ] as const;

 /**
--- a/packages/mermaid/scripts/create-types-from-json-schema.mts
+++ b/packages/mermaid/scripts/create-types-from-json-schema.mts
@@ -54,7 +54,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [
  'gitGraph',
  'c4',
  'sankey',
-  'architecture'
+  'architecture',
 ];

 /**
--- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts
+++ b/packages/mermaid/src/diagram-api/diagram-orchestration.ts
@@ -21,7 +21,7 @@ import timeline from '../diagrams/timeline/detector.js';
 import mindmap from '../diagrams/mindmap/detector.js';
 import sankey from '../diagrams/sankey/sankeyDetector.js';
 import block from '../diagrams/block/blockDetector.js';
-import architecture from '../diagrams/architecture/architectureDetector.js'
+import architecture from '../diagrams/architecture/architectureDetector.js';
 import { registerLazyLoadedDiagrams } from './detectType.js';
 import { registerDiagram } from './diagramAPI.js';

--- a/packages/mermaid/src/diagrams/architecture/architectureDb.ts
+++ b/packages/mermaid/src/diagrams/architecture/architectureDb.ts
@@ -1,5 +1,12 @@
-import type { ArchitectureFields, ArchitectureDB, ArchitectureService, ArchitectureGroup, ArchitectureDirection, ArchitectureLine } from "./architectureTypes.js";
-import { isArchitectureDirection } from "./architectureTypes.js";
+import type {
+  ArchitectureFields,
+  ArchitectureDB,
+  ArchitectureService,
+  ArchitectureGroup,
+  ArchitectureDirection,
+  ArchitectureLine,
+} from './architectureTypes.js';
+import { isArchitectureDirection } from './architectureTypes.js';
 import {
  setAccTitle,
  getAccTitle,
@@ -11,9 +18,10 @@ import {
 } from '../common/commonDb.js';
 import type { ArchitectureDiagramConfig } from '../../config.type.js';
 import DEFAULT_CONFIG from '../../defaultConfig.js';
-import type { D3Element } from "../../mermaidAPI.js";
+import type { D3Element } from '../../mermaidAPI.js';

-export const DEFAULT_ARCHITECTURE_CONFIG: Required<ArchitectureDiagramConfig> = DEFAULT_CONFIG.architecture;
+export const DEFAULT_ARCHITECTURE_CONFIG: Required<ArchitectureDiagramConfig> =
+  DEFAULT_CONFIG.architecture;
 export const DEFAULT_ARCHITECTURE_DB: ArchitectureFields = {
  services: [],
  groups: [],
@@ -41,37 +49,46 @@ const clear = (): void => {
  commonClear();
 };

-const addService = function (id: string, opts: Omit<ArchitectureService, "id"> = {}) {
-  const {icon, in: inside, title} = opts;
+const addService = function (id: string, opts: Omit<ArchitectureService, 'id'> = {}) {
+  const { icon, in: inside, title } = opts;
  services.push({
    id,
    icon,
    title,
-    in: inside
+    in: inside,
  });
-}
+};
 const getServices = (): ArchitectureService[] => services;

-const addGroup = function (id: string, opts: Omit<ArchitectureGroup, "id"> = {}) {
-  const {icon, in: inside, title} = opts;
+const addGroup = function (id: string, opts: Omit<ArchitectureGroup, 'id'> = {}) {
+  const { icon, in: inside, title } = opts;
  groups.push({
    id,
    icon,
    title,
-    in: inside
+    in: inside,
  });
-}
+};
 const getGroups = (): ArchitectureGroup[] => groups;

+const addLine = function (
+  lhs_id: string,
+  lhs_dir: ArchitectureDirection,
+  rhs_id: string,
+  rhs_dir: ArchitectureDirection,
+  opts: Omit<ArchitectureLine, 'lhs_id' | 'lhs_dir' | 'rhs_id' | 'rhs_dir'> = {}
+) {
+  const { title, lhs_into, rhs_into } = opts;

-const addLine = function (lhs_id: string, lhs_dir: ArchitectureDirection, rhs_id: string, rhs_dir: ArchitectureDirection, opts: Omit<ArchitectureLine, "lhs_id" | "lhs_dir" | "rhs_id" | "rhs_dir"> = {}) {
-  const {title, lhs_into, rhs_into} = opts;
-  
  if (!isArchitectureDirection(lhs_dir)) {
-    throw new Error(`Invalid direction given for left hand side of line ${lhs_id}--${rhs_id}. Expected (L,R,T,B) got ${lhs_dir}`)
+    throw new Error(
+      `Invalid direction given for left hand side of line ${lhs_id}--${rhs_id}. Expected (L,R,T,B) got ${lhs_dir}`
+    );
  }
  if (!isArchitectureDirection(rhs_dir)) {
-    throw new Error(`Invalid direction given for right hand side of line ${lhs_id}--${rhs_id}. Expected (L,R,T,B) got ${rhs_dir}`)
+    throw new Error(
+      `Invalid direction given for right hand side of line ${lhs_id}--${rhs_id}. Expected (L,R,T,B) got ${rhs_dir}`
+    );
  }

  lines.push({
@@ -81,19 +98,16 @@ const addLine = function (lhs_id: string, lhs_dir: ArchitectureDirection, rhs_id
    rhs_dir,
    title,
    lhs_into,
-    rhs_into
+    rhs_into,
  });
-}
+};
 const getLines = (): ArchitectureLine[] => lines;

-
 const setElementForId = (id: string, element: D3Element) => {
  elements[id] = element;
 };
 const getElementById = (id: string) => elements[id];

-
-
 export const db: ArchitectureDB = {
  getConfig,
  clear,
@@ -103,7 +117,7 @@ export const db: ArchitectureDB = {
  getAccTitle,
  setAccDescription,
  getAccDescription,
-  
+
  addService,
  getServices,
  addGroup,
@@ -111,5 +125,5 @@ export const db: ArchitectureDB = {
  addLine,
  getLines,
  setElementForId,
-  getElementById
-};
+  getElementById,
+};
--- a/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts
+++ b/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts
@@ -37,7 +37,7 @@ function addServices(services: ArchitectureService[], cy: cytoscape.Core) {
        width: 80,
        height: 80,
      },
-      classes: 'node-service'
+      classes: 'node-service',
    });
  });
 }
@@ -60,16 +60,15 @@ function addGroups(groups: ArchitectureGroup[], cy: cytoscape.Core) {
        id: group.id,
        icon: group.icon,
        label: group.title,
-        parent: group.in
+        parent: group.in,
      },
-      classes: 'node-group'
+      classes: 'node-group',
    });
  });
 }

 function positionServices(db: ArchitectureDB, cy: cytoscape.Core) {
  cy.nodes().map((node, id) => {
-
    const data = node.data();
    if (data.type === 'group') return;
    data.x = node.position().x;
@@ -118,7 +117,7 @@ function layoutArchitecture(
          style: {
            //@ts-ignore
            'compound-sizing-wrt-labels': 'include',
-          }
+          },
        },
        {
          selector: 'node[label]',
@@ -126,23 +125,23 @@ function layoutArchitecture(
            'text-valign': 'bottom',
            'text-halign': 'center',
            'font-size': '16px',
-          }
+          },
        },
        {
          selector: '.node-service',
          style: {
-            'label': 'data(label)',
-            'width': 'data(width)',
-            'height': 'data(height)',
-          }
+            label: 'data(label)',
+            width: 'data(width)',
+            height: 'data(height)',
+          },
        },
        {
          selector: '.node-group',
          style: {
            //@ts-ignore
-            "padding": '30px'
-          }
-        }
+            padding: '30px',
+          },
+        },
      ],
    });
    // Remove element after layout
@@ -150,11 +149,11 @@ function layoutArchitecture(

    addGroups(groups, cy);
    addServices(services, cy);
-    addEdges(lines, cy);   
+    addEdges(lines, cy);

    /**
     * Merge alignment pairs together if they share a common node.
-     * 
+     *
     * Example: [["a", "b"], ["b", "c"], ["d", "e"]] -> [["a", "b", "c"], ["d", "e"]]
     */
    const mergeAlignments = (orig: string[][]): string[][] => {
@@ -195,7 +194,7 @@ function layoutArchitecture(

      console.log('End: ', newAlignments);
      return newAlignments;
-    }
+    };

    const horizontalAlignments = cy
      .edges()
@@ -223,7 +222,7 @@ function layoutArchitecture(
      nodeDimensionsIncludeLabels: true,
      alignmentConstraint: {
        horizontal: mergeAlignments(horizontalAlignments),
-        vertical: mergeAlignments(verticalAlignments)
+        vertical: mergeAlignments(verticalAlignments),
      },
      relativePlacementConstraint: cy.edges().map((edge) => {
        const sourceDir = edge.data('sourceDir') as ArchitectureDirection;
@@ -231,19 +230,20 @@ function layoutArchitecture(
        const sourceId = edge.data('source') as string;
        const targetId = edge.data('target') as string;

-        if (
-          isArchitectureDirectionX(sourceDir) &&
-          isArchitectureDirectionX(targetDir)
-        ) {
-          return { left: sourceDir === 'R' ? sourceId : targetId, right: sourceDir === 'L' ? sourceId : targetId, gap: 180 }
-        } else if (
-          isArchitectureDirectionY(sourceDir) &&
-          isArchitectureDirectionY(targetDir)
-        ) {
-          return { top: sourceDir === 'B' ? sourceId : targetId, bottom: sourceDir === 'T' ? sourceId : targetId, gap: 180 }
+        if (isArchitectureDirectionX(sourceDir) && isArchitectureDirectionX(targetDir)) {
+          return {
+            left: sourceDir === 'R' ? sourceId : targetId,
+            right: sourceDir === 'L' ? sourceId : targetId,
+            gap: 180,
+          };
+        } else if (isArchitectureDirectionY(sourceDir) && isArchitectureDirectionY(targetDir)) {
+          return {
+            top: sourceDir === 'B' ? sourceId : targetId,
+            bottom: sourceDir === 'T' ? sourceId : targetId,
+            gap: 180,
+          };
        }
        // TODO: fallback case + RB, TL, etc
-
      }),
    } as FcoseLayoutOptions).run();
    cy.ready((e) => {
@@ -289,8 +289,6 @@ export const draw: DrawDefinition = async (text, id, _version, diagObj: Diagram)
    conf.architecture?.padding ?? defaultConfig.architecture.padding,
    conf.architecture?.useMaxWidth ?? defaultConfig.architecture.useMaxWidth
  );
-
-
 };

 export const renderer = { draw };
--- a/packages/mermaid/src/diagrams/architecture/architectureTypes.ts
+++ b/packages/mermaid/src/diagrams/architecture/architectureTypes.ts
@@ -2,65 +2,75 @@ import type { DiagramDB } from '../../diagram-api/types.js';
 import type { ArchitectureDiagramConfig } from '../../config.type.js';
 import type { D3Element } from '../../mermaidAPI.js';

-export type ArchitectureDirection = 'L' | 'R' | 'T' | 'B'
-export const isArchitectureDirection = function(x: unknown): x is ArchitectureDirection {
-    const temp = x as ArchitectureDirection;
-    return (temp === 'L' || temp === 'R' || temp === 'T' || temp === 'B')
-}
-export const isArchitectureDirectionX = function(x: ArchitectureDirection): x is Extract<ArchitectureDirection, 'L' | 'R'> {
-    const temp = x as Extract<ArchitectureDirection, 'L' | 'R'>
-    return (temp === 'L' || temp === 'R')
-}
-export const isArchitectureDirectionY = function(x: ArchitectureDirection): x is Extract<ArchitectureDirection, 'T' | 'B'> {
-    const temp = x as Extract<ArchitectureDirection, 'T' | 'B'>
-    return (temp === 'T' || temp === 'B')
-}
+export type ArchitectureDirection = 'L' | 'R' | 'T' | 'B';
+export const isArchitectureDirection = function (x: unknown): x is ArchitectureDirection {
+  const temp = x as ArchitectureDirection;
+  return temp === 'L' || temp === 'R' || temp === 'T' || temp === 'B';
+};
+export const isArchitectureDirectionX = function (
+  x: ArchitectureDirection
+): x is Extract<ArchitectureDirection, 'L' | 'R'> {
+  const temp = x as Extract<ArchitectureDirection, 'L' | 'R'>;
+  return temp === 'L' || temp === 'R';
+};
+export const isArchitectureDirectionY = function (
+  x: ArchitectureDirection
+): x is Extract<ArchitectureDirection, 'T' | 'B'> {
+  const temp = x as Extract<ArchitectureDirection, 'T' | 'B'>;
+  return temp === 'T' || temp === 'B';
+};

 export interface ArchitectureStyleOptions {
-    fontFamily: string;
+  fontFamily: string;
 }

 export interface ArchitectureService {
-    id: string;
-    icon?: string;
-    title?: string;
-    in?: string;
-    width?: number;
-    height?: number;
+  id: string;
+  icon?: string;
+  title?: string;
+  in?: string;
+  width?: number;
+  height?: number;
 }

 export interface ArchitectureGroup {
-    id: string;
-    icon?: string;
-    title?: string;
-    in?: string;
+  id: string;
+  icon?: string;
+  title?: string;
+  in?: string;
 }

 export interface ArchitectureLine {
-    lhs_id: string;
-    lhs_dir: ArchitectureDirection;
-    title?: string;
-    rhs_id: string;
-    rhs_dir: ArchitectureDirection;
-    lhs_into?: boolean;
-    rhs_into?: boolean;
+  lhs_id: string;
+  lhs_dir: ArchitectureDirection;
+  title?: string;
+  rhs_id: string;
+  rhs_dir: ArchitectureDirection;
+  lhs_into?: boolean;
+  rhs_into?: boolean;
 }

 export interface ArchitectureDB extends DiagramDB {
-    addService: (id: string, opts: Omit<ArchitectureService, "id">)  => void
-    getServices: () => ArchitectureService[]
-    addGroup: (id: string, opts: Omit<ArchitectureGroup, "id">)  => void
-    getGroups: () => ArchitectureGroup[]
-    addLine: (lhs_id: string, lhs_dir: ArchitectureDirection, rhs_id: string, rhs_dir: ArchitectureDirection, opts: Omit<ArchitectureLine, "lhs_id" | "lhs_dir" | "rhs_id" | "rhs_dir">)  => void
-    getLines: () => ArchitectureLine[]
-    setElementForId:  (id: string, element: D3Element) => void;
-    getElementById: (id: string) => D3Element;
+  addService: (id: string, opts: Omit<ArchitectureService, 'id'>) => void;
+  getServices: () => ArchitectureService[];
+  addGroup: (id: string, opts: Omit<ArchitectureGroup, 'id'>) => void;
+  getGroups: () => ArchitectureGroup[];
+  addLine: (
+    lhs_id: string,
+    lhs_dir: ArchitectureDirection,
+    rhs_id: string,
+    rhs_dir: ArchitectureDirection,
+    opts: Omit<ArchitectureLine, 'lhs_id' | 'lhs_dir' | 'rhs_id' | 'rhs_dir'>
+  ) => void;
+  getLines: () => ArchitectureLine[];
+  setElementForId: (id: string, element: D3Element) => void;
+  getElementById: (id: string) => D3Element;
 }

 export interface ArchitectureFields {
-    services: ArchitectureService[],
-    groups: ArchitectureGroup[],
-    lines: ArchitectureLine[],
-    cnt: number,
-    config: ArchitectureDiagramConfig
-}
+  services: ArchitectureService[];
+  groups: ArchitectureGroup[];
+  lines: ArchitectureLine[];
+  cnt: number;
+  config: ArchitectureDiagramConfig;
+}
--- a/packages/mermaid/src/diagrams/architecture/svgDraw.ts
+++ b/packages/mermaid/src/diagrams/architecture/svgDraw.ts
@@ -1,6 +1,9 @@
 import type { D3Element } from '../../mermaidAPI.js';
 import { createText } from '../../rendering-util/createText.js';
-import type { ArchitectureDB, ArchitectureGroup, ArchitectureService } from './architectureTypes.js';
+import type {
+  ArchitectureDB,
+  ArchitectureService,
+} from './architectureTypes.js';
 import type { MermaidConfig } from '../../config.type.js';
 import type cytoscape from 'cytoscape';
 import { log } from '../../logger.js';
@@ -30,25 +33,27 @@ declare module 'cytoscape' {
        y1: number;
        y2: number;
      };
-      children: cytoscape.NodeSingular[]
+      children: cytoscape.NodeSingular[];
    };
-    data: () => {
-      type: 'service',
-      id: string,
-      icon?: string,
-      label?: string,
-      parent?: string,
-      width: number,
-      height: number,
-      [key: string]: any
-    } | {
-      type: 'group',
-      id: string,
-      icon?: string,
-      label?: string,
-      parent?: string,
-      [key: string]: any
-    }
+    data: () =>
+      | {
+          type: 'service';
+          id: string;
+          icon?: string;
+          label?: string;
+          parent?: string;
+          width: number;
+          height: number;
+          [key: string]: any;
+        }
+      | {
+          type: 'group';
+          id: string;
+          icon?: string;
+          label?: string;
+          parent?: string;
+          [key: string]: any;
+        };
  }
 }

@@ -65,20 +70,18 @@ export const drawEdges = function (edgesEl: D3Element, cy: cytoscape.Core) {
          'd',
          `M ${bounds.startX},${bounds.startY} L ${bounds.midX},${bounds.midY} L${bounds.endX},${bounds.endY} `
        )
-        .attr('class', 'edge')
+        .attr('class', 'edge');
    }
-  })
-}
+  });
+};

-export const drawGroups = function (
-  groupsEl: D3Element,
-  cy: cytoscape.Core
-) {
+export const drawGroups = function (groupsEl: D3Element, cy: cytoscape.Core) {
  cy.nodes().map((node, id) => {
    const data = node.data();
    if (data.type === 'group') {
      const { h, w, x1, x2, y1, y2 } = node.boundingBox();
-      let bkgElem = groupsEl.append('rect')
+      let bkgElem = groupsEl
+        .append('rect')
        .attr('x', x1 + 40)
        .attr('y', y1 + 40)
        .attr('width', w)
@@ -97,13 +100,10 @@ export const drawGroups = function (
        .attr('dominant-baseline', 'start')
        .attr('text-anchor', 'start');

-      textElem.attr(
-        'transform',
-        'translate(' + (x1 + 44) + ', ' + (y1 + 42) + ')'
-      );
+      textElem.attr('transform', 'translate(' + (x1 + 44) + ', ' + (y1 + 42) + ')');
    }
-  })
-}
+  });
+};

 export const drawService = function (
  db: ArchitectureDB,
@@ -131,21 +131,20 @@ export const drawService = function (
      // TODO: dynamic size
      'translate(' + 80 / 2 + ', ' + 80 + ')'
    );
-
  }

  let bkgElem = serviceElem.append('g');
  if (service.icon) {
    if (!isIconNameInUse(service.icon)) {
-      throw new Error(`Invalid SVG Icon name: "${service.icon}"`)
+      throw new Error(`Invalid SVG Icon name: "${service.icon}"`);
    }
    bkgElem = getIcon(service.icon)?.(bkgElem);
  } else {
-    bkgElem.append('path').attr('class', 'node-bkg').attr('id', 'node-' + service.id).attr(
-      'd',
-      `M0 ${80 - 0} v${-80 + 2 * 0} q0,-5 5,-5 h${80 - 2 * 0
-      } q5,0 5,5 v${80 - 0} H0 Z`
-    );
+    bkgElem
+      .append('path')
+      .attr('class', 'node-bkg')
+      .attr('id', 'node-' + service.id)
+      .attr('d', `M0 ${80 - 0} v${-80 + 2 * 0} q0,-5 5,-5 h${80 - 2 * 0} q5,0 5,5 v${80 - 0} H0 Z`);
  }

  serviceElem.attr('class', 'architecture-service');
--- a/packages/mermaid/src/schemas/config.schema.yaml
+++ b/packages/mermaid/src/schemas/config.schema.yaml
@@ -858,7 +858,7 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file)

  ArchitectureDiagramConfig:
    title: Architecture Diagram Config
-    allOf: [{ $ref: '#/$defs/BaseDiagramConfig'}]
+    allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }]
    description: The object containing configurations specific for architecture diagrams
    type: object
    unevaluatedProperties: false