diff --git a/.cspell/code-terms.txt b/.cspell/code-terms.txt index fa063616a..2670a9521 100644 --- 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 diff --git a/.cspell/libraries.txt b/.cspell/libraries.txt index 9d2926186..83bea2d09 100644 --- a/.cspell/libraries.txt +++ b/.cspell/libraries.txt @@ -23,6 +23,7 @@ Docsy DokuWiki dompurify elkjs +fcose fontawesome Foswiki Gitea diff --git a/packages/mermaid/src/diagrams/architecture/architectureDb.ts b/packages/mermaid/src/diagrams/architecture/architectureDb.ts index 615f42561..654a220d8 100644 --- a/packages/mermaid/src/diagrams/architecture/architectureDb.ts +++ b/packages/mermaid/src/diagrams/architecture/architectureDb.ts @@ -38,7 +38,7 @@ const state = new ImperativeState(() => ({ 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( @@ -273,7 +273,6 @@ export function getConfigField( ): Required[T] { const arch = getConfig().architecture; if (arch && arch[field] !== undefined) { - const a = arch[field]; return arch[field] as Required[T]; } return DEFAULT_ARCHITECTURE_CONFIG[field]; diff --git a/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts b/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts index bcf93d4c0..12ef4b4ec 100644 --- 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; @@ -91,10 +93,10 @@ function addEdges(edges: ArchitectureEdge[], cy: cytoscape.Core) { lhsDir === 'L' ? '0 50%' : lhsDir === 'R' - ? '100% 50%' - : lhsDir === 'T' - ? '50% 0' - : '50% 100%', + ? '100% 50%' + : lhsDir === 'T' + ? '50% 0' + : '50% 100%', target: rhsId, targetDir: rhsDir, targetArrow: rhsInto, @@ -102,10 +104,10 @@ function addEdges(edges: ArchitectureEdge[], cy: cytoscape.Core) { rhsDir === 'L' ? '0 50%' : rhsDir === 'R' - ? '100% 50%' - : rhsDir === 'T' - ? '50% 0' - : '50% 100%', + ? '100% 50%' + : rhsDir === 'T' + ? '50% 0' + : '50% 100%', }; cy.add({ group: 'edges', @@ -121,8 +123,8 @@ function getAlignments(spatialMaps: ArchitectureSpatialMap[]): fcose.FcoseAlignm const verticalAlignments: Record = {}; // 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] diff --git a/packages/mermaid/src/diagrams/architecture/architectureTypes.ts b/packages/mermaid/src/diagrams/architecture/architectureTypes.ts index d7a587baf..1519a686b 100644 --- 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 { groups: ArchitectureGroup[]; edges: ArchitectureEdge[]; registeredIds: Record; - datastructures?: ArchitectureDataStructures; + dataStructures?: ArchitectureDataStructures; elements: Record; config: ArchitectureDiagramConfig; } @@ -207,21 +207,21 @@ export interface ArchitectureState extends Record { \*=======================================*/ export type EdgeSingularData = { - id: string; - source: string; - sourceDir: ArchitectureDirection; - sourceArrow?: boolean; - target: string; - targetDir: ArchitectureDirection; - targetArrow?: boolean; - [key: string]: any; + id: string; + source: string; + sourceDir: ArchitectureDirection; + sourceArrow?: boolean; + target: string; + targetDir: ArchitectureDirection; + targetArrow?: boolean; + [key: string]: any; }; 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,31 +247,31 @@ export type NodeSingularData = { height: number; [key: string]: any; } -| { - type: 'group'; - id: string; - icon?: string; - label?: string; - parent?: string; - [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{ - _private: { - bodyBounds: { - h: number; - w: number; - x1: number; - x2: number; - y1: number; - y2: number; - }; - children: cytoscape.NodeSingular[]; +export interface NodeSingular extends cytoscape.NodeSingular { + _private: { + bodyBounds: { + h: number; + w: number; + x1: number; + x2: number; + y1: number; + y2: number; }; - data(): NodeSingularData; - data(key: T): NodeSingularData[T]; + children: cytoscape.NodeSingular[]; + }; + data(): NodeSingularData; + data(key: T): NodeSingularData[T]; } diff --git a/packages/mermaid/src/diagrams/architecture/svgDraw.ts b/packages/mermaid/src/diagrams/architecture/svgDraw.ts index 4ec600c32..61c0cb9c0 100644 --- 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) @@ -89,13 +89,13 @@ export const drawGroups = function (groupsEl: D3Element, cy: cytoscape.Core) { width: w, classes: 'architecture-service-label', }, - getConfig()); + getConfig()); textElem .attr('dy', '1em') .attr('alignment-baseline', 'middle') .attr('dominant-baseline', 'start') .attr('text-anchor', 'start'); - + textElem.attr( 'transform', 'translate(' + (x1 + halfIconSize + 4) + ', ' + (y1 + halfIconSize + 2) + ')' @@ -121,7 +121,7 @@ export const drawServices = function ( width: iconSize * 1.5, classes: 'architecture-service-label', }, - getConfig()); + getConfig()); textElem .attr('dy', '1em') .attr('alignment-baseline', 'middle') diff --git a/packages/mermaid/src/rendering-util/svg/database.ts b/packages/mermaid/src/rendering-util/svg/database.ts index 0d34bf280..aff6702c2 100644 --- 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'; diff --git a/packages/mermaid/src/rendering-util/svg/disk.ts b/packages/mermaid/src/rendering-util/svg/disk.ts index 1a9dbdc91..781e9603b 100644 --- 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'; diff --git a/packages/mermaid/src/rendering-util/svg/index.ts b/packages/mermaid/src/rendering-util/svg/index.ts index f56090964..860c41b85 100644 --- 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'; diff --git a/packages/mermaid/src/rendering-util/svg/internet.ts b/packages/mermaid/src/rendering-util/svg/internet.ts index 23f9823ce..b336c4c9a 100644 --- 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'; diff --git a/packages/mermaid/src/rendering-util/svg/server.ts b/packages/mermaid/src/rendering-util/svg/server.ts index c4ff47ecf..8d672f157 100644 --- 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'; diff --git a/packages/mermaid/src/rendering-util/svgRegister.ts b/packages/mermaid/src/rendering-util/svgRegister.ts index b9a0c0245..ed1290725 100644 --- 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,