From 5e214877a421d3d26a1c72d5c5f8b914e152875c Mon Sep 17 00:00:00 2001 From: NicolasNewman Date: Tue, 19 Mar 2024 13:57:37 -0500 Subject: [PATCH] style(arch): prettier formatting --- .vite/jsonSchemaPlugin.ts | 2 +- .../scripts/create-types-from-json-schema.mts | 2 +- .../src/diagram-api/diagram-orchestration.ts | 2 +- .../diagrams/architecture/architectureDb.ts | 64 ++++++----- .../architecture/architectureRenderer.ts | 58 +++++----- .../architecture/architectureTypes.ts | 100 ++++++++++-------- .../src/diagrams/architecture/svgDraw.ts | 79 +++++++------- .../mermaid/src/schemas/config.schema.yaml | 2 +- 8 files changed, 165 insertions(+), 144 deletions(-) diff --git a/.vite/jsonSchemaPlugin.ts b/.vite/jsonSchemaPlugin.ts index a69f6889b..e83acd31f 100644 --- a/.vite/jsonSchemaPlugin.ts +++ b/.vite/jsonSchemaPlugin.ts @@ -26,7 +26,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [ 'c4', 'sankey', 'block', - 'architecture' + 'architecture', ] as const; /** diff --git a/packages/mermaid/scripts/create-types-from-json-schema.mts b/packages/mermaid/scripts/create-types-from-json-schema.mts index fbd12a37f..7129cb94e 100644 --- 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', ]; /** diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts index 84697022c..4259043b1 100644 --- 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'; diff --git a/packages/mermaid/src/diagrams/architecture/architectureDb.ts b/packages/mermaid/src/diagrams/architecture/architectureDb.ts index 5aecba746..896c342aa 100644 --- 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 = DEFAULT_CONFIG.architecture; +export const DEFAULT_ARCHITECTURE_CONFIG: Required = + 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 = {}) { - const {icon, in: inside, title} = opts; +const addService = function (id: string, opts: Omit = {}) { + 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 = {}) { - const {icon, in: inside, title} = opts; +const addGroup = function (id: string, opts: Omit = {}) { + 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 = {} +) { + const { title, lhs_into, rhs_into } = opts; -const addLine = function (lhs_id: string, lhs_dir: ArchitectureDirection, rhs_id: string, rhs_dir: ArchitectureDirection, opts: Omit = {}) { - 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 -}; \ No newline at end of file + getElementById, +}; diff --git a/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts b/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts index f4566e85e..3063849c3 100644 --- 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 }; diff --git a/packages/mermaid/src/diagrams/architecture/architectureTypes.ts b/packages/mermaid/src/diagrams/architecture/architectureTypes.ts index 9cf78443a..cb95074e4 100644 --- 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 { - const temp = x as Extract - return (temp === 'L' || temp === 'R') -} -export const isArchitectureDirectionY = function(x: ArchitectureDirection): x is Extract { - const temp = x as Extract - 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 { + const temp = x as Extract; + return temp === 'L' || temp === 'R'; +}; +export const isArchitectureDirectionY = function ( + x: ArchitectureDirection +): x is Extract { + const temp = x as Extract; + 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) => void - getServices: () => ArchitectureService[] - addGroup: (id: string, opts: Omit) => void - getGroups: () => ArchitectureGroup[] - addLine: (lhs_id: string, lhs_dir: ArchitectureDirection, rhs_id: string, rhs_dir: ArchitectureDirection, opts: Omit) => void - getLines: () => ArchitectureLine[] - setElementForId: (id: string, element: D3Element) => void; - getElementById: (id: string) => D3Element; + addService: (id: string, opts: Omit) => void; + getServices: () => ArchitectureService[]; + addGroup: (id: string, opts: Omit) => void; + getGroups: () => ArchitectureGroup[]; + addLine: ( + lhs_id: string, + lhs_dir: ArchitectureDirection, + rhs_id: string, + rhs_dir: ArchitectureDirection, + opts: Omit + ) => 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 -} \ No newline at end of file + services: ArchitectureService[]; + groups: ArchitectureGroup[]; + lines: ArchitectureLine[]; + cnt: number; + config: ArchitectureDiagramConfig; +} diff --git a/packages/mermaid/src/diagrams/architecture/svgDraw.ts b/packages/mermaid/src/diagrams/architecture/svgDraw.ts index b78d2d044..473bf7407 100644 --- 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'); diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index 601939bee..8723d4ca1 100644 --- 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