From c41594d2201606622bd13f81eec2ede455ff10d9 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 14 Sep 2023 22:35:13 +0530 Subject: [PATCH 01/35] feat: Add packet diagram --- .build/jsonSchema.ts | 1 + .esbuild/server.ts | 7 +- demos/packet.html | 47 ++++++++ docs/config/setup/modules/defaultConfig.md | 2 +- packages/mermaid/src/config.type.ts | 33 ++++++ packages/mermaid/src/defaultConfig.ts | 7 ++ .../src/diagram-api/diagram-orchestration.ts | 4 +- packages/mermaid/src/diagrams/packet/db.ts | 101 ++++++++++++++++++ .../mermaid/src/diagrams/packet/detector.ts | 22 ++++ .../mermaid/src/diagrams/packet/diagram.ts | 12 +++ .../src/diagrams/packet/packet.spec.ts | 31 ++++++ .../mermaid/src/diagrams/packet/parser.ts | 14 +++ .../mermaid/src/diagrams/packet/renderer.ts | 81 ++++++++++++++ .../mermaid/src/diagrams/packet/styles.ts | 27 +++++ packages/mermaid/src/diagrams/packet/types.ts | 10 ++ .../mermaid/src/schemas/config.schema.yaml | 29 +++++ packages/mermaid/src/styles.spec.ts | 2 + packages/parser/langium-config.json | 5 + packages/parser/src/index.ts | 2 +- packages/parser/src/language/index.ts | 1 + packages/parser/src/language/packet/index.ts | 1 + packages/parser/src/language/packet/module.ts | 72 +++++++++++++ .../parser/src/language/packet/packet.langium | 14 +++ .../src/language/packet/tokenBuilder.ts | 7 ++ packages/parser/src/parse.ts | 11 +- 25 files changed, 534 insertions(+), 9 deletions(-) create mode 100644 demos/packet.html create mode 100644 packages/mermaid/src/diagrams/packet/db.ts create mode 100644 packages/mermaid/src/diagrams/packet/detector.ts create mode 100644 packages/mermaid/src/diagrams/packet/diagram.ts create mode 100644 packages/mermaid/src/diagrams/packet/packet.spec.ts create mode 100644 packages/mermaid/src/diagrams/packet/parser.ts create mode 100644 packages/mermaid/src/diagrams/packet/renderer.ts create mode 100644 packages/mermaid/src/diagrams/packet/styles.ts create mode 100644 packages/mermaid/src/diagrams/packet/types.ts create mode 100644 packages/parser/src/language/packet/index.ts create mode 100644 packages/parser/src/language/packet/module.ts create mode 100644 packages/parser/src/language/packet/packet.langium create mode 100644 packages/parser/src/language/packet/tokenBuilder.ts diff --git a/.build/jsonSchema.ts b/.build/jsonSchema.ts index 51b1184fc3c..d305e848217 100644 --- a/.build/jsonSchema.ts +++ b/.build/jsonSchema.ts @@ -23,6 +23,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [ 'gitGraph', 'c4', 'sankey', + 'packet', ] as const; /** diff --git a/.esbuild/server.ts b/.esbuild/server.ts index 63d981b99d0..ae232124728 100644 --- a/.esbuild/server.ts +++ b/.esbuild/server.ts @@ -9,9 +9,10 @@ import { generateLangium } from '../.build/generateLangium.js'; const parserCtx = await context( getBuildConfig({ ...defaultOptions, minify: false, core: false, entryName: 'parser' }) ); -const mermaidCtx = await context( - getBuildConfig({ ...defaultOptions, minify: false, core: false, entryName: 'mermaid' }) -); +const mermaidCtx = await context({ + ...getBuildConfig({ ...defaultOptions, minify: false, core: false, entryName: 'mermaid' }), + sourcemap: 'linked', +}); const mermaidIIFECtx = await context( getBuildConfig({ ...defaultOptions, diff --git a/demos/packet.html b/demos/packet.html new file mode 100644 index 00000000000..3e51de0ded6 --- /dev/null +++ b/demos/packet.html @@ -0,0 +1,47 @@ + + + + + + Mermaid Quick Test Page + + + + + +

Packet diagram demo

+ 
+      packet-beta
+        0-15: "Source Port"
+        16-31: "Destination Port"
+        32-63: "Sequence Number"
+        64-95: "Acknowledgment Number"
+        96-99: "Data Offset"
+        100-105: "Reserved"
+        106: "URG"
+        107: "ACK"
+        108: "PSH"
+        109: "RST"
+        110: "SYN"
+        111: "FIN"
+        112-127: "Window"
+        128-143: "Checksum"
+        144-159: "Urgent Pointer"
+        160-191: "(Options and Padding)"
+        192-223: "data"
+
+ + + + diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md index effaec7b131..d3495bc0c3c 100644 --- a/docs/config/setup/modules/defaultConfig.md +++ b/docs/config/setup/modules/defaultConfig.md @@ -14,7 +14,7 @@ #### Defined in -[defaultConfig.ts:268](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L268) +[defaultConfig.ts:275](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L275) --- diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index bed6d8b9e85..0f8ed7ce062 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -140,10 +140,43 @@ export interface MermaidConfig { gitGraph?: GitGraphDiagramConfig; c4?: C4DiagramConfig; sankey?: SankeyDiagramConfig; + packet?: PacketDiagramConfig; dompurifyConfig?: DOMPurifyConfiguration; wrap?: boolean; fontSize?: number; } +/** + * The object containing configurations specific for packet diagrams. + * + * This interface was referenced by `MermaidConfig`'s JSON-Schema + * via the `definition` "PacketDiagramConfig". + */ +export interface PacketDiagramConfig extends BaseDiagramConfig { + /** + * The height of each row in the packet diagram. + */ + rowHeight?: number; + /** + * The width of each bit in the packet diagram. + */ + bitWidth?: number; + /** + * The number of bits to display per row. + */ + bitsPerRow?: number; + /** + * Toggle to display or hide bit numbers. + */ + showBits?: boolean; + /** + * The horizontal padding between the blocks in a row. + */ + paddingX?: number; + /** + * The vertical padding between the rows. + */ + paddingY?: number; +} /** * This interface was referenced by `MermaidConfig`'s JSON-Schema * via the `definition` "BaseDiagramConfig". diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts index f8bd9b0b539..06f47e110c2 100644 --- a/packages/mermaid/src/defaultConfig.ts +++ b/packages/mermaid/src/defaultConfig.ts @@ -253,6 +253,13 @@ const config: RequiredDeep = { // TODO: can we make this default to `true` instead? useMaxWidth: false, }, + packet: { + ...defaultConfigJson.packet, + useWidth: undefined, + // this is false, unlike every other diagram (other than gitGraph) + // TODO: can we make this default to `true` instead? + useMaxWidth: false, + }, }; const keyify = (obj: any, prefix = ''): string[] => diff --git a/packages/mermaid/src/diagram-api/diagram-orchestration.ts b/packages/mermaid/src/diagram-api/diagram-orchestration.ts index 624b0286eeb..d382a93c112 100644 --- a/packages/mermaid/src/diagram-api/diagram-orchestration.ts +++ b/packages/mermaid/src/diagram-api/diagram-orchestration.ts @@ -19,6 +19,7 @@ import flowchartElk from '../diagrams/flowchart/elk/detector.js'; import timeline from '../diagrams/timeline/detector.js'; import mindmap from '../diagrams/mindmap/detector.js'; import sankey from '../diagrams/sankey/sankeyDetector.js'; +import { packet } from '../diagrams/packet/detector.js'; import { registerLazyLoadedDiagrams } from './detectType.js'; import { registerDiagram } from './diagramAPI.js'; @@ -84,6 +85,7 @@ export const addDiagrams = () => { state, journey, quadrantChart, - sankey + sankey, + packet ); }; diff --git a/packages/mermaid/src/diagrams/packet/db.ts b/packages/mermaid/src/diagrams/packet/db.ts new file mode 100644 index 00000000000..a36fdcaf15c --- /dev/null +++ b/packages/mermaid/src/diagrams/packet/db.ts @@ -0,0 +1,101 @@ +import type { Block, PacketDB, Word } from './types.js'; +import { log } from '../../logger.js'; +import type { PacketDiagramConfig } from '../../config.type.js'; +import DEFAULT_CONFIG from '../../defaultConfig.js'; +import { getConfig as commonGetConfig } from '../../config.js'; + +interface PacketData { + packet: Word[]; +} + +const defaultPacketData: PacketData = { + packet: [], +}; + +let data: PacketData = structuredClone(defaultPacketData); +export const DEFAULT_PACKET_CONFIG: Required = DEFAULT_CONFIG.packet; + +export const getConfig = (): Required => { + return structuredClone({ + ...DEFAULT_PACKET_CONFIG, + ...commonGetConfig().packet, + }); +}; + +export const getPacket = (): Word[] => data.packet; + +export const getNextFittingBlock = ( + block: Block, + row: number, + bitsPerRow: number +): [Block, Block | undefined] => { + block.end = block.end ?? block.start; + + if (block.start > block.end) { + throw new Error(`Block start ${block.start} is greater than block end ${block.end}.`); + } + + if (block.end + 1 <= row * bitsPerRow) { + return [block, undefined]; + } + + return [ + { + start: block.start, + end: row * bitsPerRow - 1, + label: block.label, + }, + { + start: row * bitsPerRow, + end: block.end, + label: block.label, + }, + ]; +}; + +export const populate = ({ blocks }: { blocks: Block[] }) => { + let lastByte = -1; + let word: Block[] = []; + data.packet = []; + let row = 1; + const { bitsPerRow } = getConfig(); + for (let { start, end, label } of blocks) { + if (end < start) { + throw new Error(`Packet block ${start} - ${end} is invalid. End must be greater than start.`); + } + if (start != lastByte + 1) { + throw new Error( + `Packet block ${start} - ${end} is not contiguous. It should start from ${lastByte + 1}.` + ); + } + lastByte = end ?? start; + log.debug(`Packet block ${start} - ${lastByte} with label ${label}`); + + while (word.length <= bitsPerRow + 1 && data.packet.length < 10_000) { + const [block, nextBlock] = getNextFittingBlock({ start, end, label }, row, bitsPerRow); + word.push(block); + if (block.end + 1 === row * bitsPerRow) { + data.packet.push(word); + word = []; + row++; + } + if (!nextBlock) { + break; + } + ({ start, end, label } = nextBlock); + } + } + if (word.length > 0) { + data.packet.push(word); + } + log.debug(data); +}; + +export const clear = () => { + data = structuredClone(defaultPacketData); +}; + +export const db: PacketDB = { + getPacket, + getConfig, +}; diff --git a/packages/mermaid/src/diagrams/packet/detector.ts b/packages/mermaid/src/diagrams/packet/detector.ts new file mode 100644 index 00000000000..5aca92e6cfa --- /dev/null +++ b/packages/mermaid/src/diagrams/packet/detector.ts @@ -0,0 +1,22 @@ +import type { + DiagramDetector, + DiagramLoader, + ExternalDiagramDefinition, +} from '../../diagram-api/types.js'; + +const id = 'packet'; + +const detector: DiagramDetector = (txt) => { + return /^\s*packet-beta/.test(txt); +}; + +const loader: DiagramLoader = async () => { + const { diagram } = await import('./diagram.js'); + return { id, diagram }; +}; + +export const packet: ExternalDiagramDefinition = { + id, + detector, + loader, +}; diff --git a/packages/mermaid/src/diagrams/packet/diagram.ts b/packages/mermaid/src/diagrams/packet/diagram.ts new file mode 100644 index 00000000000..ae9cad4524c --- /dev/null +++ b/packages/mermaid/src/diagrams/packet/diagram.ts @@ -0,0 +1,12 @@ +import type { DiagramDefinition } from '../../diagram-api/types.js'; +import { parser } from './parser.js'; +import { db } from './db.js'; +import { renderer } from './renderer.js'; +import { styles } from './styles.js'; + +export const diagram: DiagramDefinition = { + parser, + db, + renderer, + styles, +}; diff --git a/packages/mermaid/src/diagrams/packet/packet.spec.ts b/packages/mermaid/src/diagrams/packet/packet.spec.ts new file mode 100644 index 00000000000..ea115e02ed8 --- /dev/null +++ b/packages/mermaid/src/diagrams/packet/packet.spec.ts @@ -0,0 +1,31 @@ +import { parser } from './parser.js'; + +describe('info', () => { + it('should handle an info definition', () => { + const str = `info`; + expect(() => { + parser.parse(str); + }).not.toThrow(); + }); + + it('should handle an info definition with showInfo', () => { + const str = `info showInfo`; + expect(() => { + parser.parse(str); + }).not.toThrow(); + }); + + it('should throw because of unsupported info grammar', () => { + const str = `info unsupported`; + expect(() => { + parser.parse(str); + }).toThrow('Parsing failed: unexpected character: ->u<- at offset: 5, skipped 11 characters.'); + }); + + it('should throw because of unsupported info grammar', () => { + const str = `info unsupported`; + expect(() => { + parser.parse(str); + }).toThrow('Parsing failed: unexpected character: ->u<- at offset: 5, skipped 11 characters.'); + }); +}); diff --git a/packages/mermaid/src/diagrams/packet/parser.ts b/packages/mermaid/src/diagrams/packet/parser.ts new file mode 100644 index 00000000000..0a1334faad8 --- /dev/null +++ b/packages/mermaid/src/diagrams/packet/parser.ts @@ -0,0 +1,14 @@ +import type { Packet } from 'mermaid-parser'; +import type { ParserDefinition } from '../../diagram-api/types.js'; + +import { parse } from 'mermaid-parser'; +import { log } from '../../logger.js'; +import { populate } from './db.js'; + +export const parser: ParserDefinition = { + parse: (input: string): void => { + const ast: Packet = parse('packet', input); + log.debug(ast); + populate(ast); + }, +}; diff --git a/packages/mermaid/src/diagrams/packet/renderer.ts b/packages/mermaid/src/diagrams/packet/renderer.ts new file mode 100644 index 00000000000..640c2e870c2 --- /dev/null +++ b/packages/mermaid/src/diagrams/packet/renderer.ts @@ -0,0 +1,81 @@ +import { configureSvgSize } from '../../setupGraphViewbox.js'; +import type { DrawDefinition, Group, SVG } from '../../diagram-api/types.js'; +import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; +import type { PacketDB, Word } from './types.js'; +import type { PacketDiagramConfig } from '../../config.type.js'; +import type { Diagram } from '../../Diagram.js'; + +// eslint-disable-next-line @typescript-eslint/no-unused-vars +const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => { + const db = diagram.db as PacketDB; + const config = db.getConfig?.() as Required; + const { rowHeight, paddingY, bitWidth, bitsPerRow } = config; + const words = db.getPacket(); + const svgHeight = (rowHeight + paddingY) * words.length + paddingY; + const svgWidth = bitWidth * bitsPerRow + 2; + + const svg: SVG = selectSvgElement(id); + configureSvgSize(svg, svgHeight, svgWidth, true); + svg.attr('height', svgHeight + 'px'); + + for (const [row, packet] of words.entries()) { + drawWord(svg, packet, row, config); + } +}; + +const drawWord = ( + svg: SVG, + word: Word, + row: number, + { rowHeight, paddingX, paddingY, bitWidth, bitsPerRow }: Required +) => { + const group: Group = svg.append('g'); + const wordY = row * (rowHeight + paddingY) + paddingY; + for (const block of word) { + const blockX = (block.start % bitsPerRow) * bitWidth + 1; + const width = (block.end - block.start + 1) * bitWidth - paddingX; + // Block rectangle + group + .append('rect') + .attr('x', blockX) + .attr('y', wordY) + .attr('width', width) + .attr('height', rowHeight) + .attr('class', 'block'); + + // Block label + group + .append('text') + .attr('x', blockX + width / 2) + .attr('y', wordY + rowHeight / 2) + .attr('class', 'label') + .attr('dominant-baseline', 'middle') + .attr('text-anchor', 'middle') + .text(block.label); + + // Start byte count + const isSingleBlock = block.end === block.start; + const byteNumberY = wordY - 2; + group + .append('text') + .attr('x', blockX + (isSingleBlock ? width / 2 : 0)) + .attr('y', byteNumberY) + .attr('class', 'byte start') + .attr('dominant-baseline', 'auto') + .attr('text-anchor', isSingleBlock ? 'middle' : 'start') + .text(block.start); + + // Draw end byte count if it is not the same as start byte count + if (!isSingleBlock) { + group + .append('text') + .attr('x', blockX + width) + .attr('y', byteNumberY) + .attr('class', 'byte end') + .attr('dominant-baseline', 'auto') + .attr('text-anchor', 'end') + .text(block.end); + } + } +}; +export const renderer = { draw }; diff --git a/packages/mermaid/src/diagrams/packet/styles.ts b/packages/mermaid/src/diagrams/packet/styles.ts new file mode 100644 index 00000000000..d6f738a1387 --- /dev/null +++ b/packages/mermaid/src/diagrams/packet/styles.ts @@ -0,0 +1,27 @@ +import { log } from '../../logger.js'; + +export const styles = (options: any = {}) => { + log.debug({ options }); + return ` + .byte { + font-size: ${options.packet?.byteFontSize ?? '10px'}; + } + .byte.start { + fill: ${options.packet?.startByteColor ?? 'black'}; + } + .byte.end { + fill: ${options.packet?.endByteColor ?? 'black'}; + } + .label { + fill: ${options.packet?.labelColor ?? 'black'}; + font-size: ${options.packet?.labelFontSize ?? '12px'}; + } + .block { + stroke: ${options.packet?.blockStrokeColor ?? 'black'}; + stroke-width: ${options.packet?.blockStrokeWidth ?? '1'}; + fill: ${options.packet?.blockFillColor ?? '#efefef'}; + } + `; +}; + +export default styles; diff --git a/packages/mermaid/src/diagrams/packet/types.ts b/packages/mermaid/src/diagrams/packet/types.ts new file mode 100644 index 00000000000..9100558eb2d --- /dev/null +++ b/packages/mermaid/src/diagrams/packet/types.ts @@ -0,0 +1,10 @@ +import type { Packet } from 'mermaid-parser'; +import type { DiagramDB } from '../../diagram-api/types.js'; + +export type ArrayElement = A extends readonly (infer T)[] ? T : never; +export type Block = Pick, 'start' | 'end' | 'label'>; +export type Word = Block[]; + +export interface PacketDB extends DiagramDB { + getPacket: () => Word[]; +} diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index 81592d146bd..a929e84a959 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -48,6 +48,7 @@ required: - gitGraph - c4 - sankey + - packet properties: theme: description: | @@ -201,6 +202,8 @@ properties: $ref: '#/$defs/C4DiagramConfig' sankey: $ref: '#/$defs/SankeyDiagramConfig' + packet: + $ref: '#/$defs/PacketDiagramConfig' dompurifyConfig: title: DOM Purify Configuration description: Configuration options to pass to the `dompurify` library. @@ -1853,6 +1856,32 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file) type: string default: '' + PacketDiagramConfig: + title: Packet Diagram Config + allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }] + description: The object containing configurations specific for packet diagrams. + type: object + unevaluatedProperties: false + properties: + rowHeight: + description: The height of each row in the packet diagram. + default: 32 + bitWidth: + description: The width of each bit in the packet diagram. + default: 32 + bitsPerRow: + description: The number of bits to display per row. + default: 32 + showBits: + description: Toggle to display or hide bit numbers. + default: true + paddingX: + description: The horizontal padding between the blocks in a row. + default: 5 + paddingY: + description: The vertical padding between the rows. + default: 15 + FontCalculator: title: Font Calculator description: | diff --git a/packages/mermaid/src/styles.spec.ts b/packages/mermaid/src/styles.spec.ts index 420ee9757bc..be04286d00a 100644 --- a/packages/mermaid/src/styles.spec.ts +++ b/packages/mermaid/src/styles.spec.ts @@ -28,6 +28,7 @@ import state from './diagrams/state/styles.js'; import journey from './diagrams/user-journey/styles.js'; import timeline from './diagrams/timeline/styles.js'; import mindmap from './diagrams/mindmap/styles.js'; +import packet from './diagrams/packet/styles.js'; import themes from './themes/index.js'; async function checkValidStylisCSSStyleSheet(stylisString: string) { @@ -96,6 +97,7 @@ describe('styles', () => { sequence, state, timeline, + packet, })) { test(`should return a valid style for diagram ${diagramId} and theme ${themeId}`, async () => { const { default: getStyles, addStylesForDiagram } = await import('./styles.js'); diff --git a/packages/parser/langium-config.json b/packages/parser/langium-config.json index 4ffaaf372fc..6daa551c17d 100644 --- a/packages/parser/langium-config.json +++ b/packages/parser/langium-config.json @@ -5,6 +5,11 @@ "id": "info", "grammar": "src/language/info/info.langium", "fileExtensions": [".mmd", ".mermaid"] + }, + { + "id": "packet", + "grammar": "src/language/packet/packet.langium", + "fileExtensions": [".mmd", ".mermaid"] } ], "mode": "production", diff --git a/packages/parser/src/index.ts b/packages/parser/src/index.ts index 9dded54fa27..9ec6b4e9b94 100644 --- a/packages/parser/src/index.ts +++ b/packages/parser/src/index.ts @@ -1,3 +1,3 @@ -export type { Info } from './language/index.js'; +export type { Info, Packet } from './language/index.js'; export type { DiagramAST } from './parse.js'; export { parse, MermaidParseError } from './parse.js'; diff --git a/packages/parser/src/language/index.ts b/packages/parser/src/language/index.ts index b6685a07f65..a1c3dfd8d3c 100644 --- a/packages/parser/src/language/index.ts +++ b/packages/parser/src/language/index.ts @@ -4,3 +4,4 @@ export * from './generated/module.js'; export * from './common/index.js'; export * from './info/index.js'; +export * from './packet/index.js'; diff --git a/packages/parser/src/language/packet/index.ts b/packages/parser/src/language/packet/index.ts new file mode 100644 index 00000000000..fd3c604b084 --- /dev/null +++ b/packages/parser/src/language/packet/index.ts @@ -0,0 +1 @@ +export * from './module.js'; diff --git a/packages/parser/src/language/packet/module.ts b/packages/parser/src/language/packet/module.ts new file mode 100644 index 00000000000..db9ff4722a6 --- /dev/null +++ b/packages/parser/src/language/packet/module.ts @@ -0,0 +1,72 @@ +import type { + DefaultSharedModuleContext, + LangiumServices, + LangiumSharedServices, + Module, + PartialLangiumServices, +} from 'langium'; +import { EmptyFileSystem, createDefaultModule, createDefaultSharedModule, inject } from 'langium'; + +import { CommonLexer } from '../common/lexer.js'; +import { MermaidGeneratedSharedModule, PacketGeneratedModule } from '../generated/module.js'; +import { PacketTokenBuilder } from './tokenBuilder.js'; +import { CommonValueConverter } from '../common/valueConverter.js'; + +/** + * Declaration of `Packet` services. + */ +type PacketAddedServices = { + parser: { + Lexer: CommonLexer; + TokenBuilder: PacketTokenBuilder; + ValueConverter: CommonValueConverter; + }; +}; + +/** + * Union of Langium default services and `Packet` services. + */ +export type PacketServices = LangiumServices & PacketAddedServices; + +/** + * Dependency injection module that overrides Langium default services and + * contributes the declared `Packet` services. + */ +export const PacketModule: Module = { + parser: { + Lexer: (services: PacketServices) => new CommonLexer(services), + TokenBuilder: () => new PacketTokenBuilder(), + ValueConverter: () => new CommonValueConverter(), + }, +}; + +/** + * Create the full set of services required by Langium. + * + * First inject the shared services by merging two modules: + * - Langium default shared services + * - Services generated by langium-cli + * + * Then inject the language-specific services by merging three modules: + * - Langium default language-specific services + * - Services generated by langium-cli + * - Services specified in this file + * @param context - Optional module context with the LSP connection + * @returns An object wrapping the shared services and the language-specific services + */ +export function createPacketServices(context: DefaultSharedModuleContext = EmptyFileSystem): { + shared: LangiumSharedServices; + Packet: PacketServices; +} { + const shared: LangiumSharedServices = inject( + createDefaultSharedModule(context), + MermaidGeneratedSharedModule + ); + const Packet: PacketServices = inject( + createDefaultModule({ shared }), + PacketGeneratedModule, + PacketModule + ); + shared.ServiceRegistry.register(Packet); + return { shared, Packet }; +} diff --git a/packages/parser/src/language/packet/packet.langium b/packages/parser/src/language/packet/packet.langium new file mode 100644 index 00000000000..33adf49327e --- /dev/null +++ b/packages/parser/src/language/packet/packet.langium @@ -0,0 +1,14 @@ +grammar Packet +import "../common/common"; + +entry Packet: + "packet-beta" NEWLINE* + TitleAndAccessibilities? + (blocks+=Block)*; + +Block: + start=INT ('-' end=INT)? ':' label=STRING; + +hidden terminal WS: /\s+/; +terminal INT returns number: /[0-9]+/; +terminal STRING: /"[^"]*"|'[^']*'/; diff --git a/packages/parser/src/language/packet/tokenBuilder.ts b/packages/parser/src/language/packet/tokenBuilder.ts new file mode 100644 index 00000000000..3317f854967 --- /dev/null +++ b/packages/parser/src/language/packet/tokenBuilder.ts @@ -0,0 +1,7 @@ +import { MermaidTokenBuilder } from '../common/index.js'; + +export class PacketTokenBuilder extends MermaidTokenBuilder { + public constructor() { + super(['packet-beta']); + } +} diff --git a/packages/parser/src/parse.ts b/packages/parser/src/parse.ts index 90358bbf166..eba118e4179 100644 --- a/packages/parser/src/parse.ts +++ b/packages/parser/src/parse.ts @@ -1,8 +1,8 @@ import type { LangiumParser, ParseResult } from 'langium'; -import type { Info } from './index.js'; -import { createInfoServices } from './language/index.js'; +import type { Info, Packet } from './index.js'; +import { createInfoServices, createPacketServices } from './language/index.js'; -export type DiagramAST = Info; +export type DiagramAST = Info | Packet; const parsers: Record = {}; @@ -13,8 +13,13 @@ const initializers = { const parser = createInfoServices().Info.parser.LangiumParser; parsers['info'] = parser; }, + packet: () => { + const parser = createPacketServices().Packet.parser.LangiumParser; + parsers['packet'] = parser; + }, } as const; export function parse(diagramType: 'info', text: string): Info; +export function parse(diagramType: 'packet', text: string): Packet; export function parse( diagramType: keyof typeof initializers, text: string From afd7cf51cf651180707886467f945f2022500782 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 14 Sep 2023 22:46:43 +0530 Subject: [PATCH 02/35] fix: Types and nomenclature --- packages/mermaid/src/diagrams/packet/db.ts | 18 ++++++++++-------- .../mermaid/src/diagrams/packet/renderer.ts | 10 +++++----- packages/mermaid/src/diagrams/packet/types.ts | 4 ++-- 3 files changed, 17 insertions(+), 15 deletions(-) diff --git a/packages/mermaid/src/diagrams/packet/db.ts b/packages/mermaid/src/diagrams/packet/db.ts index a36fdcaf15c..0773a2c0e79 100644 --- a/packages/mermaid/src/diagrams/packet/db.ts +++ b/packages/mermaid/src/diagrams/packet/db.ts @@ -1,11 +1,11 @@ -import type { Block, PacketDB, Word } from './types.js'; +import type { Block, PacketDB, Row } from './types.js'; import { log } from '../../logger.js'; import type { PacketDiagramConfig } from '../../config.type.js'; import DEFAULT_CONFIG from '../../defaultConfig.js'; import { getConfig as commonGetConfig } from '../../config.js'; interface PacketData { - packet: Word[]; + packet: Row[]; } const defaultPacketData: PacketData = { @@ -22,21 +22,23 @@ export const getConfig = (): Required => { }); }; -export const getPacket = (): Word[] => data.packet; +export const getPacket = (): Row[] => data.packet; export const getNextFittingBlock = ( block: Block, row: number, bitsPerRow: number -): [Block, Block | undefined] => { - block.end = block.end ?? block.start; +): [Required, Block | undefined] => { + if (block.end === undefined) { + block.end = block.start; + } if (block.start > block.end) { throw new Error(`Block start ${block.start} is greater than block end ${block.end}.`); } if (block.end + 1 <= row * bitsPerRow) { - return [block, undefined]; + return [block as Required, undefined]; } return [ @@ -55,12 +57,12 @@ export const getNextFittingBlock = ( export const populate = ({ blocks }: { blocks: Block[] }) => { let lastByte = -1; - let word: Block[] = []; + let word: Row = []; data.packet = []; let row = 1; const { bitsPerRow } = getConfig(); for (let { start, end, label } of blocks) { - if (end < start) { + if (end && end < start) { throw new Error(`Packet block ${start} - ${end} is invalid. End must be greater than start.`); } if (start != lastByte + 1) { diff --git a/packages/mermaid/src/diagrams/packet/renderer.ts b/packages/mermaid/src/diagrams/packet/renderer.ts index 640c2e870c2..d6d2a3d2e2a 100644 --- a/packages/mermaid/src/diagrams/packet/renderer.ts +++ b/packages/mermaid/src/diagrams/packet/renderer.ts @@ -1,7 +1,7 @@ import { configureSvgSize } from '../../setupGraphViewbox.js'; import type { DrawDefinition, Group, SVG } from '../../diagram-api/types.js'; import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; -import type { PacketDB, Word } from './types.js'; +import type { PacketDB, Row } from './types.js'; import type { PacketDiagramConfig } from '../../config.type.js'; import type { Diagram } from '../../Diagram.js'; @@ -25,13 +25,13 @@ const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => { const drawWord = ( svg: SVG, - word: Word, - row: number, + row: Row, + rowNumber: number, { rowHeight, paddingX, paddingY, bitWidth, bitsPerRow }: Required ) => { const group: Group = svg.append('g'); - const wordY = row * (rowHeight + paddingY) + paddingY; - for (const block of word) { + const wordY = rowNumber * (rowHeight + paddingY) + paddingY; + for (const block of row) { const blockX = (block.start % bitsPerRow) * bitWidth + 1; const width = (block.end - block.start + 1) * bitWidth - paddingX; // Block rectangle diff --git a/packages/mermaid/src/diagrams/packet/types.ts b/packages/mermaid/src/diagrams/packet/types.ts index 9100558eb2d..5492d400440 100644 --- a/packages/mermaid/src/diagrams/packet/types.ts +++ b/packages/mermaid/src/diagrams/packet/types.ts @@ -3,8 +3,8 @@ import type { DiagramDB } from '../../diagram-api/types.js'; export type ArrayElement = A extends readonly (infer T)[] ? T : never; export type Block = Pick, 'start' | 'end' | 'label'>; -export type Word = Block[]; +export type Row = Required[]; export interface PacketDB extends DiagramDB { - getPacket: () => Word[]; + getPacket: () => Row[]; } From 38d9c6d26b71cb82ad364f3a5d30b8477487ba61 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 14 Sep 2023 23:00:59 +0530 Subject: [PATCH 03/35] test: Add unit tests --- packages/mermaid/src/diagrams/packet/db.ts | 4 +- .../src/diagrams/packet/packet.spec.ts | 174 ++++++++++++++++-- 2 files changed, 166 insertions(+), 12 deletions(-) diff --git a/packages/mermaid/src/diagrams/packet/db.ts b/packages/mermaid/src/diagrams/packet/db.ts index 0773a2c0e79..b964b88dc29 100644 --- a/packages/mermaid/src/diagrams/packet/db.ts +++ b/packages/mermaid/src/diagrams/packet/db.ts @@ -67,7 +67,9 @@ export const populate = ({ blocks }: { blocks: Block[] }) => { } if (start != lastByte + 1) { throw new Error( - `Packet block ${start} - ${end} is not contiguous. It should start from ${lastByte + 1}.` + `Packet block ${start} - ${end ?? start} is not contiguous. It should start from ${ + lastByte + 1 + }.` ); } lastByte = end ?? start; diff --git a/packages/mermaid/src/diagrams/packet/packet.spec.ts b/packages/mermaid/src/diagrams/packet/packet.spec.ts index ea115e02ed8..c4ccdba7426 100644 --- a/packages/mermaid/src/diagrams/packet/packet.spec.ts +++ b/packages/mermaid/src/diagrams/packet/packet.spec.ts @@ -1,31 +1,183 @@ import { parser } from './parser.js'; +import { clear, getPacket } from './db.js'; +describe('packet diagrams', () => { + beforeEach(() => { + clear(); + }); + + it('should handle a packet-beta definition', () => { + const str = `packet-beta`; + expect(() => { + parser.parse(str); + }).not.toThrow(); + expect(getPacket()).toMatchInlineSnapshot('[]'); + }); + + it('should handle diagram with data', () => { + const str = `packet-beta + 0-10: "test" + `; + expect(() => { + parser.parse(str); + }).not.toThrow(); + expect(getPacket()).toMatchInlineSnapshot(` + [ + [ + { + "end": 10, + "label": "test", + "start": 0, + }, + ], + ] + `); + }); + + it('should handle single bits', () => { + const str = `packet-beta + 0-10: "test" + 11: "single" + `; + expect(() => { + parser.parse(str); + }).not.toThrow(); + expect(getPacket()).toMatchInlineSnapshot(` + [ + [ + { + "end": 10, + "label": "test", + "start": 0, + }, + { + "end": 11, + "label": "single", + "start": 11, + }, + ], + ] + `); + }); -describe('info', () => { - it('should handle an info definition', () => { - const str = `info`; + it('should split into multiple rows', () => { + const str = `packet-beta + 0-10: "test" + 11-90: "multiple" + `; expect(() => { parser.parse(str); }).not.toThrow(); + expect(getPacket()).toMatchInlineSnapshot(` + [ + [ + { + "end": 10, + "label": "test", + "start": 0, + }, + { + "end": 31, + "label": "multiple", + "start": 11, + }, + ], + [ + { + "end": 63, + "label": "multiple", + "start": 32, + }, + ], + [ + { + "end": 90, + "label": "multiple", + "start": 64, + }, + ], + ] + `); }); - it('should handle an info definition with showInfo', () => { - const str = `info showInfo`; + it('should split into multiple rows when cut at exact length', () => { + const str = `packet-beta + 0-16: "test" + 17-63: "multiple" + `; expect(() => { parser.parse(str); }).not.toThrow(); + expect(getPacket()).toMatchInlineSnapshot(` + [ + [ + { + "end": 16, + "label": "test", + "start": 0, + }, + { + "end": 31, + "label": "multiple", + "start": 17, + }, + ], + [ + { + "end": 63, + "label": "multiple", + "start": 32, + }, + ], + ] + `); + }); + + it('should throw error if numbers are not continuous', () => { + const str = `packet-beta + 0-16: "test" + 18-20: "error" + `; + expect(() => { + parser.parse(str); + }).toThrowErrorMatchingInlineSnapshot( + '"Packet block 18 - 20 is not contiguous. It should start from 17."' + ); + }); + + it('should throw error if numbers are not continuous for single packets', () => { + const str = `packet-beta + 0-16: "test" + 18: "error" + `; + expect(() => { + parser.parse(str); + }).toThrowErrorMatchingInlineSnapshot( + '"Packet block 18 - 18 is not contiguous. It should start from 17."' + ); }); - it('should throw because of unsupported info grammar', () => { - const str = `info unsupported`; + it('should throw error if numbers are not continuous for single packets - 2', () => { + const str = `packet-beta + 0-16: "test" + 17: "good" + 19: "error" + `; expect(() => { parser.parse(str); - }).toThrow('Parsing failed: unexpected character: ->u<- at offset: 5, skipped 11 characters.'); + }).toThrowErrorMatchingInlineSnapshot( + '"Packet block 19 - 19 is not contiguous. It should start from 18."' + ); }); - it('should throw because of unsupported info grammar', () => { - const str = `info unsupported`; + it('should throw error if end is less than start', () => { + const str = `packet-beta + 0-16: "test" + 25-20: "error" + `; expect(() => { parser.parse(str); - }).toThrow('Parsing failed: unexpected character: ->u<- at offset: 5, skipped 11 characters.'); + }).toThrowErrorMatchingInlineSnapshot( + '"Packet block 25 - 20 is invalid. End must be greater than start."' + ); }); }); From 75f1f9228d1265e575541a40558a8aa3759866f8 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 14 Sep 2023 23:12:06 +0530 Subject: [PATCH 04/35] test: Add rendering tests --- cypress/integration/rendering/packet.spec.ts | 65 ++++++++++++++++++++ 1 file changed, 65 insertions(+) create mode 100644 cypress/integration/rendering/packet.spec.ts diff --git a/cypress/integration/rendering/packet.spec.ts b/cypress/integration/rendering/packet.spec.ts new file mode 100644 index 00000000000..990ce092c92 --- /dev/null +++ b/cypress/integration/rendering/packet.spec.ts @@ -0,0 +1,65 @@ +import { imgSnapshotTest, renderGraph } from '../../helpers/util'; + +describe('packet structure', () => { + it('should render a simple packet diagram', () => { + imgSnapshotTest( + `packet-beta + 0-10: "hello" +` + ); + }); + + it('should render a complex packet diagram', () => { + imgSnapshotTest( + `packet-beta + 0-15: "Source Port" + 16-31: "Destination Port" + 32-63: "Sequence Number" + 64-95: "Acknowledgment Number" + 96-99: "Data Offset" + 100-105: "Reserved" + 106: "URG" + 107: "ACK" + 108: "PSH" + 109: "RST" + 110: "SYN" + 111: "FIN" + 112-127: "Window" + 128-143: "Checksum" + 144-159: "Urgent Pointer" + 160-191: "(Options and Padding)" + 192-223: "data" + ` + ); + }); + + it('should render a complex packet diagram with showBits false', () => { + imgSnapshotTest( + ` + --- + config: + packet: + showBits: false + --- + packet-beta + 0-15: "Source Port" + 16-31: "Destination Port" + 32-63: "Sequence Number" + 64-95: "Acknowledgment Number" + 96-99: "Data Offset" + 100-105: "Reserved" + 106: "URG" + 107: "ACK" + 108: "PSH" + 109: "RST" + 110: "SYN" + 111: "FIN" + 112-127: "Window" + 128-143: "Checksum" + 144-159: "Urgent Pointer" + 160-191: "(Options and Padding)" + 192-223: "data" + ` + ); + }); +}); From 043729f557f8eb335d1ef842b8fa3bfe0ddaa5cd Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 14 Sep 2023 23:12:42 +0530 Subject: [PATCH 05/35] feat: Support showBits --- demos/packet.html | 26 +++++++++++++++++++ packages/mermaid/src/diagrams/packet/db.ts | 6 ++++- .../mermaid/src/diagrams/packet/renderer.ts | 11 +++++--- .../mermaid/src/schemas/config.schema.yaml | 2 +- 4 files changed, 39 insertions(+), 6 deletions(-) diff --git a/demos/packet.html b/demos/packet.html index 3e51de0ded6..3e53f60dba9 100644 --- a/demos/packet.html +++ b/demos/packet.html @@ -35,6 +35,32 @@

Packet diagram demo

192-223: "data" + 
+      ---
+      config:
+        packet:
+          showBits: false
+      ---
+      packet-beta
+        0-15: "Source Port"
+        16-31: "Destination Port"
+        32-63: "Sequence Number"
+        64-95: "Acknowledgment Number"
+        96-99: "Data Offset"
+        100-105: "Reserved"
+        106: "URG"
+        107: "ACK"
+        108: "PSH"
+        109: "RST"
+        110: "SYN"
+        111: "FIN"
+        112-127: "Window"
+        128-143: "Checksum"
+        144-159: "Urgent Pointer"
+        160-191: "(Options and Padding)"
+        192-223: "data"
+
+ From 566150977a489bdd69cca5f679235ac0d1d417fc Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 18 Sep 2023 23:31:23 +0530 Subject: [PATCH 08/35] Add mini-live editing to example.html --- demos/dev/example.html | 1 + 1 file changed, 1 insertion(+) diff --git a/demos/dev/example.html b/demos/dev/example.html index eff58816351..4ece7efa8b6 100644 --- a/demos/dev/example.html +++ b/demos/dev/example.html @@ -15,6 +15,7 @@ } #dynamicDiagram { + padding-left: 2em; flex: 1; } From 3e3519e8ec59b949b4fb331659d92e1df5f7ee07 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 19 Sep 2023 16:51:42 +0530 Subject: [PATCH 09/35] docs: Add packet to index --- demos/index.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/demos/index.html b/demos/index.html index 24c4fbf3b0c..68981aa8d59 100644 --- a/demos/index.html +++ b/demos/index.html @@ -78,6 +78,9 @@

ZenUML

  • Sankey

    • +
  • +

    Packet

    +
    • From 7c79bbd6b0c0c518665a6233ab535f1b33a05bef Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 14 Nov 2023 11:48:11 +0530 Subject: [PATCH 10/35] refactor: Address review comments Moved some types around Removed unnecessary params Co-authored-by: Reda Al Sulais Co-authored-by: Alois Klink --- cypress/integration/rendering/packet.spec.ts | 2 +- docs/config/setup/modules/defaultConfig.md | 2 +- packages/mermaid/src/defaultConfig.ts | 4 ---- packages/mermaid/src/diagrams/packet/db.ts | 14 +++++--------- packages/mermaid/src/diagrams/packet/styles.ts | 4 +++- packages/mermaid/src/diagrams/packet/types.ts | 16 ++++++++++++++++ .../parser/src/language/packet/packet.langium | 18 ++++++++++++------ 7 files changed, 38 insertions(+), 22 deletions(-) diff --git a/cypress/integration/rendering/packet.spec.ts b/cypress/integration/rendering/packet.spec.ts index 990ce092c92..89dce609bd2 100644 --- a/cypress/integration/rendering/packet.spec.ts +++ b/cypress/integration/rendering/packet.spec.ts @@ -1,4 +1,4 @@ -import { imgSnapshotTest, renderGraph } from '../../helpers/util'; +import { imgSnapshotTest } from '../../helpers/util'; describe('packet structure', () => { it('should render a simple packet diagram', () => { diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md index 7a9b891c438..d3495bc0c3c 100644 --- a/docs/config/setup/modules/defaultConfig.md +++ b/docs/config/setup/modules/defaultConfig.md @@ -14,7 +14,7 @@ #### Defined in -[defaultConfig.ts:272](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L272) +[defaultConfig.ts:275](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L275) --- diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts index 343d667af0a..76a8152b7a9 100644 --- a/packages/mermaid/src/defaultConfig.ts +++ b/packages/mermaid/src/defaultConfig.ts @@ -259,10 +259,6 @@ const config: RequiredDeep = { }, packet: { ...defaultConfigJson.packet, - useWidth: undefined, - // this is false, unlike every other diagram (other than gitGraph) - // TODO: can we make this default to `true` instead? - useMaxWidth: false, }, }; diff --git a/packages/mermaid/src/diagrams/packet/db.ts b/packages/mermaid/src/diagrams/packet/db.ts index d766765fc16..385246d7ad0 100644 --- a/packages/mermaid/src/diagrams/packet/db.ts +++ b/packages/mermaid/src/diagrams/packet/db.ts @@ -1,13 +1,9 @@ -import type { Block, PacketDB, Row } from './types.js'; +import type { Block, PacketDB, PacketData, Row } from './types.js'; import type { PacketDiagramConfig } from '../../config.type.js'; - import { log } from '../../logger.js'; import DEFAULT_CONFIG from '../../defaultConfig.js'; import { getConfig as commonGetConfig } from '../../config.js'; - -interface PacketData { - packet: Row[]; -} +import { cleanAndMerge } from '../../utils.js'; const defaultPacketData: PacketData = { packet: [], @@ -17,7 +13,7 @@ let data: PacketData = structuredClone(defaultPacketData); export const DEFAULT_PACKET_CONFIG: Required = DEFAULT_CONFIG.packet; export const getConfig = (): Required => { - const config = structuredClone({ + const config = cleanAndMerge({ ...DEFAULT_PACKET_CONFIG, ...commonGetConfig().packet, }); @@ -61,9 +57,9 @@ export const getNextFittingBlock = ( }; export const populate = ({ blocks }: { blocks: Block[] }) => { + clear(); let lastByte = -1; let word: Row = []; - data.packet = []; let row = 1; const { bitsPerRow } = getConfig(); for (let { start, end, label } of blocks) { @@ -97,7 +93,6 @@ export const populate = ({ blocks }: { blocks: Block[] }) => { if (word.length > 0) { data.packet.push(word); } - log.debug(data); }; export const clear = () => { @@ -107,4 +102,5 @@ export const clear = () => { export const db: PacketDB = { getPacket, getConfig, + clear, }; diff --git a/packages/mermaid/src/diagrams/packet/styles.ts b/packages/mermaid/src/diagrams/packet/styles.ts index d6f738a1387..28292a0275b 100644 --- a/packages/mermaid/src/diagrams/packet/styles.ts +++ b/packages/mermaid/src/diagrams/packet/styles.ts @@ -1,6 +1,8 @@ +import type { DiagramStylesProvider } from '../../diagram-api/types.js'; import { log } from '../../logger.js'; +import type { PacketStyleOptions } from './types.js'; -export const styles = (options: any = {}) => { +export const styles: DiagramStylesProvider = (options: { packet?: PacketStyleOptions } = {}) => { log.debug({ options }); return ` .byte { diff --git a/packages/mermaid/src/diagrams/packet/types.ts b/packages/mermaid/src/diagrams/packet/types.ts index 1ec25c04068..6dc92215a8e 100644 --- a/packages/mermaid/src/diagrams/packet/types.ts +++ b/packages/mermaid/src/diagrams/packet/types.ts @@ -9,4 +9,20 @@ export type Row = Required[]; export interface PacketDB extends DiagramDB { getPacket: () => Row[]; getConfig: () => Required; + clear: () => void; +} + +export interface PacketStyleOptions { + byteFontSize?: string; + startByteColor?: string; + endByteColor?: string; + labelColor?: string; + labelFontSize?: string; + blockStrokeColor?: string; + blockStrokeWidth?: string; + blockFillColor?: string; +} + +export interface PacketData { + packet: Row[]; } diff --git a/packages/parser/src/language/packet/packet.langium b/packages/parser/src/language/packet/packet.langium index 33adf49327e..6565578dd73 100644 --- a/packages/parser/src/language/packet/packet.langium +++ b/packages/parser/src/language/packet/packet.langium @@ -2,13 +2,19 @@ grammar Packet import "../common/common"; entry Packet: - "packet-beta" NEWLINE* - TitleAndAccessibilities? - (blocks+=Block)*; + NEWLINE* + "packet-beta" + ( + NEWLINE* TitleAndAccessibilities blocks+=PacketBlock* + | NEWLINE+ blocks+=PacketBlock+ + | NEWLINE* + ) +; -Block: - start=INT ('-' end=INT)? ':' label=STRING; +PacketBlock: + start=INT('-' end=INT)? ':' label=STRING NEWLINE+ +; hidden terminal WS: /\s+/; -terminal INT returns number: /[0-9]+/; +terminal INT returns number: /0|[1-9][0-9]*/; terminal STRING: /"[^"]*"|'[^']*'/; From b88d1dfaa95ef71314ac1c7a6642a69567823b45 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 14 Nov 2023 11:59:58 +0530 Subject: [PATCH 11/35] fix(packet): Grammar whitespace Move populate into parser Co-authored-by: Reda Al Sulais --- packages/mermaid/src/diagrams/packet/db.ts | 68 +----------------- .../mermaid/src/diagrams/packet/parser.ts | 72 ++++++++++++++++++- .../parser/src/language/packet/packet.langium | 1 - 3 files changed, 72 insertions(+), 69 deletions(-) diff --git a/packages/mermaid/src/diagrams/packet/db.ts b/packages/mermaid/src/diagrams/packet/db.ts index 385246d7ad0..96648be5f5b 100644 --- a/packages/mermaid/src/diagrams/packet/db.ts +++ b/packages/mermaid/src/diagrams/packet/db.ts @@ -1,6 +1,5 @@ import type { Block, PacketDB, PacketData, Row } from './types.js'; import type { PacketDiagramConfig } from '../../config.type.js'; -import { log } from '../../logger.js'; import DEFAULT_CONFIG from '../../defaultConfig.js'; import { getConfig as commonGetConfig } from '../../config.js'; import { cleanAndMerge } from '../../utils.js'; @@ -10,6 +9,7 @@ const defaultPacketData: PacketData = { }; let data: PacketData = structuredClone(defaultPacketData); + export const DEFAULT_PACKET_CONFIG: Required = DEFAULT_CONFIG.packet; export const getConfig = (): Required => { @@ -25,71 +25,7 @@ export const getConfig = (): Required => { export const getPacket = (): Row[] => data.packet; -export const getNextFittingBlock = ( - block: Block, - row: number, - bitsPerRow: number -): [Required, Block | undefined] => { - if (block.end === undefined) { - block.end = block.start; - } - - if (block.start > block.end) { - throw new Error(`Block start ${block.start} is greater than block end ${block.end}.`); - } - - if (block.end + 1 <= row * bitsPerRow) { - return [block as Required, undefined]; - } - - return [ - { - start: block.start, - end: row * bitsPerRow - 1, - label: block.label, - }, - { - start: row * bitsPerRow, - end: block.end, - label: block.label, - }, - ]; -}; - -export const populate = ({ blocks }: { blocks: Block[] }) => { - clear(); - let lastByte = -1; - let word: Row = []; - let row = 1; - const { bitsPerRow } = getConfig(); - for (let { start, end, label } of blocks) { - if (end && end < start) { - throw new Error(`Packet block ${start} - ${end} is invalid. End must be greater than start.`); - } - if (start != lastByte + 1) { - throw new Error( - `Packet block ${start} - ${end ?? start} is not contiguous. It should start from ${ - lastByte + 1 - }.` - ); - } - lastByte = end ?? start; - log.debug(`Packet block ${start} - ${lastByte} with label ${label}`); - - while (word.length <= bitsPerRow + 1 && data.packet.length < 10_000) { - const [block, nextBlock] = getNextFittingBlock({ start, end, label }, row, bitsPerRow); - word.push(block); - if (block.end + 1 === row * bitsPerRow) { - data.packet.push(word); - word = []; - row++; - } - if (!nextBlock) { - break; - } - ({ start, end, label } = nextBlock); - } - } +export const pushWord = (word: Row) => { if (word.length > 0) { data.packet.push(word); } diff --git a/packages/mermaid/src/diagrams/packet/parser.ts b/packages/mermaid/src/diagrams/packet/parser.ts index 0a1334faad8..91f0a87065b 100644 --- a/packages/mermaid/src/diagrams/packet/parser.ts +++ b/packages/mermaid/src/diagrams/packet/parser.ts @@ -1,9 +1,77 @@ import type { Packet } from 'mermaid-parser'; import type { ParserDefinition } from '../../diagram-api/types.js'; - import { parse } from 'mermaid-parser'; import { log } from '../../logger.js'; -import { populate } from './db.js'; +import type { Block, Row } from './types.js'; +import { clear, getConfig, getPacket, pushWord } from './db.js'; + +const populate = ({ blocks }: { blocks: Block[] }) => { + clear(); + let lastByte = -1; + let word: Row = []; + let row = 1; + const { bitsPerRow } = getConfig(); + for (let { start, end, label } of blocks) { + if (end && end < start) { + throw new Error(`Packet block ${start} - ${end} is invalid. End must be greater than start.`); + } + if (start != lastByte + 1) { + throw new Error( + `Packet block ${start} - ${end ?? start} is not contiguous. It should start from ${ + lastByte + 1 + }.` + ); + } + lastByte = end ?? start; + log.debug(`Packet block ${start} - ${lastByte} with label ${label}`); + + while (word.length <= bitsPerRow + 1 && getPacket().length < 10_000) { + const [block, nextBlock] = getNextFittingBlock({ start, end, label }, row, bitsPerRow); + word.push(block); + if (block.end + 1 === row * bitsPerRow) { + pushWord(word); + word = []; + row++; + } + if (!nextBlock) { + break; + } + ({ start, end, label } = nextBlock); + } + } + pushWord(word); +}; + +const getNextFittingBlock = ( + block: Block, + row: number, + bitsPerRow: number +): [Required, Block | undefined] => { + if (block.end === undefined) { + block.end = block.start; + } + + if (block.start > block.end) { + throw new Error(`Block start ${block.start} is greater than block end ${block.end}.`); + } + + if (block.end + 1 <= row * bitsPerRow) { + return [block as Required, undefined]; + } + + return [ + { + start: block.start, + end: row * bitsPerRow - 1, + label: block.label, + }, + { + start: row * bitsPerRow, + end: block.end, + label: block.label, + }, + ]; +}; export const parser: ParserDefinition = { parse: (input: string): void => { diff --git a/packages/parser/src/language/packet/packet.langium b/packages/parser/src/language/packet/packet.langium index 6565578dd73..d14dfdd68ae 100644 --- a/packages/parser/src/language/packet/packet.langium +++ b/packages/parser/src/language/packet/packet.langium @@ -15,6 +15,5 @@ PacketBlock: start=INT('-' end=INT)? ':' label=STRING NEWLINE+ ; -hidden terminal WS: /\s+/; terminal INT returns number: /0|[1-9][0-9]*/; terminal STRING: /"[^"]*"|'[^']*'/; From 659db9f04b50dd216c6da8e99b402247870f7389 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 14 Nov 2023 19:44:09 +0530 Subject: [PATCH 12/35] chore: Add types and minimums for packet config --- packages/mermaid/src/schemas/config.schema.yaml | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index a7201631308..ce6219eb879 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -1994,21 +1994,32 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file) properties: rowHeight: description: The height of each row in the packet diagram. + type: number + minimum: 1 default: 32 bitWidth: description: The width of each bit in the packet diagram. + type: number + minimum: 1 default: 32 bitsPerRow: description: The number of bits to display per row. + type: number + minimum: 1 default: 32 showBits: description: Toggle to display or hide bit numbers. + type: boolean default: true paddingX: description: The horizontal padding between the blocks in a row. + type: number + minimum: 0 default: 5 paddingY: description: The vertical padding between the rows. + type: number + minimum: 0 default: 5 FontCalculator: From 9925b9b455bcf930a7dcbb209bf7c4448c0c9ccb Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 15 Nov 2023 00:47:03 +0530 Subject: [PATCH 13/35] feat: Add title support to packetDiagram --- packages/mermaid/src/diagram-api/types.ts | 21 +++++++++++-- packages/mermaid/src/diagrams/packet/db.ts | 31 ++++++++++++++----- .../mermaid/src/diagrams/packet/diagram.ts | 2 +- .../src/diagrams/packet/packet.spec.ts | 5 ++- .../mermaid/src/diagrams/packet/parser.ts | 19 ++++++------ .../mermaid/src/diagrams/packet/renderer.ts | 29 +++++++++++------ .../mermaid/src/diagrams/packet/styles.ts | 14 ++++++--- packages/mermaid/src/diagrams/packet/types.ts | 9 +++--- 8 files changed, 92 insertions(+), 38 deletions(-) diff --git a/packages/mermaid/src/diagram-api/types.ts b/packages/mermaid/src/diagram-api/types.ts index d4f34de7027..88957b5fb82 100644 --- a/packages/mermaid/src/diagram-api/types.ts +++ b/packages/mermaid/src/diagram-api/types.ts @@ -1,7 +1,8 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ +import type * as d3 from 'd3'; +import type { SetRequired } from 'type-fest'; import type { Diagram } from '../Diagram.js'; import type { BaseDiagramConfig, MermaidConfig } from '../config.type.js'; -import type * as d3 from 'd3'; export interface DiagramMetadata { title?: string; @@ -32,13 +33,29 @@ export interface DiagramDB { getDiagramTitle?: () => string; setAccTitle?: (title: string) => void; getAccTitle?: () => string; - setAccDescription?: (describetion: string) => void; + setAccDescription?: (description: string) => void; getAccDescription?: () => string; setDisplayMode?: (title: string) => void; bindFunctions?: (element: Element) => void; } +/** + * DiagramDB with fields that is required for all new diagrams. + */ +export type DiagramDBBase = { + getConfig: () => Required; +} & SetRequired< + DiagramDB, + | 'clear' + | 'getAccTitle' + | 'getDiagramTitle' + | 'getAccDescription' + | 'setAccDescription' + | 'setAccTitle' + | 'setDiagramTitle' +>; + // This is what is returned from getClasses(...) methods. // It is slightly renamed to ..StyleClassDef instead of just ClassDef because "class" is a greatly ambiguous and overloaded word. // It makes it clear we're working with a style class definition, even though defining the type is currently difficult. diff --git a/packages/mermaid/src/diagrams/packet/db.ts b/packages/mermaid/src/diagrams/packet/db.ts index 96648be5f5b..a40b71724d4 100644 --- a/packages/mermaid/src/diagrams/packet/db.ts +++ b/packages/mermaid/src/diagrams/packet/db.ts @@ -1,8 +1,17 @@ -import type { Block, PacketDB, PacketData, Row } from './types.js'; +import { getConfig as commonGetConfig } from '../../config.js'; import type { PacketDiagramConfig } from '../../config.type.js'; import DEFAULT_CONFIG from '../../defaultConfig.js'; -import { getConfig as commonGetConfig } from '../../config.js'; import { cleanAndMerge } from '../../utils.js'; +import { + clear as commonClear, + getAccDescription, + getAccTitle, + getDiagramTitle, + setAccDescription, + setAccTitle, + setDiagramTitle, +} from '../common/commonDb.js'; +import type { PacketDB, PacketData, Row } from './types.js'; const defaultPacketData: PacketData = { packet: [], @@ -10,9 +19,9 @@ const defaultPacketData: PacketData = { let data: PacketData = structuredClone(defaultPacketData); -export const DEFAULT_PACKET_CONFIG: Required = DEFAULT_CONFIG.packet; +const DEFAULT_PACKET_CONFIG: Required = DEFAULT_CONFIG.packet; -export const getConfig = (): Required => { +const getConfig = (): Required => { const config = cleanAndMerge({ ...DEFAULT_PACKET_CONFIG, ...commonGetConfig().packet, @@ -23,20 +32,28 @@ export const getConfig = (): Required => { return config; }; -export const getPacket = (): Row[] => data.packet; +const getPacket = (): Row[] => data.packet; -export const pushWord = (word: Row) => { +const pushWord = (word: Row) => { if (word.length > 0) { data.packet.push(word); } }; -export const clear = () => { +const clear = () => { + commonClear(); data = structuredClone(defaultPacketData); }; export const db: PacketDB = { + pushWord, getPacket, getConfig, clear, + setAccTitle, + getAccTitle, + setDiagramTitle, + getDiagramTitle, + getAccDescription, + setAccDescription, }; diff --git a/packages/mermaid/src/diagrams/packet/diagram.ts b/packages/mermaid/src/diagrams/packet/diagram.ts index ae9cad4524c..a73a77c052c 100644 --- a/packages/mermaid/src/diagrams/packet/diagram.ts +++ b/packages/mermaid/src/diagrams/packet/diagram.ts @@ -1,6 +1,6 @@ import type { DiagramDefinition } from '../../diagram-api/types.js'; -import { parser } from './parser.js'; import { db } from './db.js'; +import { parser } from './parser.js'; import { renderer } from './renderer.js'; import { styles } from './styles.js'; diff --git a/packages/mermaid/src/diagrams/packet/packet.spec.ts b/packages/mermaid/src/diagrams/packet/packet.spec.ts index c4ccdba7426..6ad24b75e9d 100644 --- a/packages/mermaid/src/diagrams/packet/packet.spec.ts +++ b/packages/mermaid/src/diagrams/packet/packet.spec.ts @@ -1,5 +1,8 @@ +import { db } from './db.js'; import { parser } from './parser.js'; -import { clear, getPacket } from './db.js'; + +const { clear, getPacket } = db; + describe('packet diagrams', () => { beforeEach(() => { clear(); diff --git a/packages/mermaid/src/diagrams/packet/parser.ts b/packages/mermaid/src/diagrams/packet/parser.ts index 91f0a87065b..db1dcde09b0 100644 --- a/packages/mermaid/src/diagrams/packet/parser.ts +++ b/packages/mermaid/src/diagrams/packet/parser.ts @@ -1,17 +1,18 @@ import type { Packet } from 'mermaid-parser'; -import type { ParserDefinition } from '../../diagram-api/types.js'; import { parse } from 'mermaid-parser'; +import type { ParserDefinition } from '../../diagram-api/types.js'; import { log } from '../../logger.js'; +import { populateCommonDb } from '../common/populateCommonDb.js'; +import { db } from './db.js'; import type { Block, Row } from './types.js'; -import { clear, getConfig, getPacket, pushWord } from './db.js'; -const populate = ({ blocks }: { blocks: Block[] }) => { - clear(); +const populate = (ast: Packet) => { + populateCommonDb(ast, db); let lastByte = -1; let word: Row = []; let row = 1; - const { bitsPerRow } = getConfig(); - for (let { start, end, label } of blocks) { + const { bitsPerRow } = db.getConfig(); + for (let { start, end, label } of ast.blocks) { if (end && end < start) { throw new Error(`Packet block ${start} - ${end} is invalid. End must be greater than start.`); } @@ -25,11 +26,11 @@ const populate = ({ blocks }: { blocks: Block[] }) => { lastByte = end ?? start; log.debug(`Packet block ${start} - ${lastByte} with label ${label}`); - while (word.length <= bitsPerRow + 1 && getPacket().length < 10_000) { + while (word.length <= bitsPerRow + 1 && db.getPacket().length < 10_000) { const [block, nextBlock] = getNextFittingBlock({ start, end, label }, row, bitsPerRow); word.push(block); if (block.end + 1 === row * bitsPerRow) { - pushWord(word); + db.pushWord(word); word = []; row++; } @@ -39,7 +40,7 @@ const populate = ({ blocks }: { blocks: Block[] }) => { ({ start, end, label } = nextBlock); } } - pushWord(word); + db.pushWord(word); }; const getNextFittingBlock = ( diff --git a/packages/mermaid/src/diagrams/packet/renderer.ts b/packages/mermaid/src/diagrams/packet/renderer.ts index 172f4a202e4..d846de9e73c 100644 --- a/packages/mermaid/src/diagrams/packet/renderer.ts +++ b/packages/mermaid/src/diagrams/packet/renderer.ts @@ -1,9 +1,9 @@ -import { configureSvgSize } from '../../setupGraphViewbox.js'; +import type { Diagram } from '../../Diagram.js'; +import type { PacketDiagramConfig } from '../../config.type.js'; import type { DrawDefinition, Group, SVG } from '../../diagram-api/types.js'; import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; +import { configureSvgSize } from '../../setupGraphViewbox.js'; import type { PacketDB, Row } from './types.js'; -import type { PacketDiagramConfig } from '../../config.type.js'; -import type { Diagram } from '../../Diagram.js'; // eslint-disable-next-line @typescript-eslint/no-unused-vars const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => { @@ -11,16 +11,27 @@ const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => { const config = db.getConfig(); const { rowHeight, paddingY, bitWidth, bitsPerRow } = config; const words = db.getPacket(); - const svgHeight = (rowHeight + paddingY) * words.length + paddingY; + const title = db.getDiagramTitle(); + const totalRowHeight = rowHeight + paddingY; + const svgHeight = totalRowHeight * (words.length + 1) - (title ? 0 : rowHeight); const svgWidth = bitWidth * bitsPerRow + 2; - const svg: SVG = selectSvgElement(id); + configureSvgSize(svg, svgHeight, svgWidth, true); svg.attr('height', svgHeight + 'px'); for (const [row, packet] of words.entries()) { drawWord(svg, packet, row, config); } + + svg + .append('text') + .text(title) + .attr('x', svgWidth / 2) + .attr('y', svgHeight - rowHeight) + .attr('dominant-baseline', 'middle') + .attr('text-anchor', 'middle') + .attr('class', 'packetTitle'); }; const drawWord = ( @@ -41,14 +52,14 @@ const drawWord = ( .attr('y', wordY) .attr('width', width) .attr('height', rowHeight) - .attr('class', 'block'); + .attr('class', 'packetBlock'); // Block label group .append('text') .attr('x', blockX + width / 2) .attr('y', wordY + rowHeight / 2) - .attr('class', 'label') + .attr('class', 'packetLabel') .attr('dominant-baseline', 'middle') .attr('text-anchor', 'middle') .text(block.label); @@ -63,7 +74,7 @@ const drawWord = ( .append('text') .attr('x', blockX + (isSingleBlock ? width / 2 : 0)) .attr('y', bitNumberY) - .attr('class', 'byte start') + .attr('class', 'packetByte start') .attr('dominant-baseline', 'auto') .attr('text-anchor', isSingleBlock ? 'middle' : 'start') .text(block.start); @@ -74,7 +85,7 @@ const drawWord = ( .append('text') .attr('x', blockX + width) .attr('y', bitNumberY) - .attr('class', 'byte end') + .attr('class', 'packetByte end') .attr('dominant-baseline', 'auto') .attr('text-anchor', 'end') .text(block.end); diff --git a/packages/mermaid/src/diagrams/packet/styles.ts b/packages/mermaid/src/diagrams/packet/styles.ts index 28292a0275b..101328da7f6 100644 --- a/packages/mermaid/src/diagrams/packet/styles.ts +++ b/packages/mermaid/src/diagrams/packet/styles.ts @@ -5,20 +5,24 @@ import type { PacketStyleOptions } from './types.js'; export const styles: DiagramStylesProvider = (options: { packet?: PacketStyleOptions } = {}) => { log.debug({ options }); return ` - .byte { + .packetByte { font-size: ${options.packet?.byteFontSize ?? '10px'}; } - .byte.start { + .packetByte.start { fill: ${options.packet?.startByteColor ?? 'black'}; } - .byte.end { + .packetByte.end { fill: ${options.packet?.endByteColor ?? 'black'}; } - .label { + .packetLabel { fill: ${options.packet?.labelColor ?? 'black'}; font-size: ${options.packet?.labelFontSize ?? '12px'}; } - .block { + .packetTitle { + fill: ${options.packet?.titleColor ?? 'black'}; + font-size: ${options.packet?.titleFontSize ?? '14px'}; + } + .packetBlock { stroke: ${options.packet?.blockStrokeColor ?? 'black'}; stroke-width: ${options.packet?.blockStrokeWidth ?? '1'}; fill: ${options.packet?.blockFillColor ?? '#efefef'}; diff --git a/packages/mermaid/src/diagrams/packet/types.ts b/packages/mermaid/src/diagrams/packet/types.ts index 6dc92215a8e..0a4507076d4 100644 --- a/packages/mermaid/src/diagrams/packet/types.ts +++ b/packages/mermaid/src/diagrams/packet/types.ts @@ -1,15 +1,14 @@ import type { Packet } from 'mermaid-parser'; -import type { DiagramDB } from '../../diagram-api/types.js'; import type { PacketDiagramConfig } from '../../config.type.js'; +import type { DiagramDBBase } from '../../diagram-api/types.js'; export type ArrayElement = A extends readonly (infer T)[] ? T : never; export type Block = Pick, 'start' | 'end' | 'label'>; export type Row = Required[]; -export interface PacketDB extends DiagramDB { +export interface PacketDB extends DiagramDBBase { + pushWord: (word: Row) => void; getPacket: () => Row[]; - getConfig: () => Required; - clear: () => void; } export interface PacketStyleOptions { @@ -21,6 +20,8 @@ export interface PacketStyleOptions { blockStrokeColor?: string; blockStrokeWidth?: string; blockFillColor?: string; + titleColor?: string; + titleFontSize?: string; } export interface PacketData { From 1a8743ec118d9c8d1563456bc6ccc4bd20f09518 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 15 Nov 2023 00:52:56 +0530 Subject: [PATCH 14/35] refactor: Separate default options in styles --- .../mermaid/src/diagrams/packet/styles.ts | 40 +++++++++++++------ 1 file changed, 27 insertions(+), 13 deletions(-) diff --git a/packages/mermaid/src/diagrams/packet/styles.ts b/packages/mermaid/src/diagrams/packet/styles.ts index 101328da7f6..ff940d0e63e 100644 --- a/packages/mermaid/src/diagrams/packet/styles.ts +++ b/packages/mermaid/src/diagrams/packet/styles.ts @@ -1,31 +1,45 @@ import type { DiagramStylesProvider } from '../../diagram-api/types.js'; -import { log } from '../../logger.js'; +import { cleanAndMerge } from '../../utils.js'; import type { PacketStyleOptions } from './types.js'; -export const styles: DiagramStylesProvider = (options: { packet?: PacketStyleOptions } = {}) => { - log.debug({ options }); +const defaultPacketStyleOptions: PacketStyleOptions = { + byteFontSize: '10px', + startByteColor: 'black', + endByteColor: 'black', + labelColor: 'black', + labelFontSize: '12px', + titleColor: 'black', + titleFontSize: '14px', + blockStrokeColor: 'black', + blockStrokeWidth: '1', + blockFillColor: '#efefef', +}; + +export const styles: DiagramStylesProvider = ({ packet }: { packet?: PacketStyleOptions } = {}) => { + const options = cleanAndMerge(defaultPacketStyleOptions, packet); + return ` .packetByte { - font-size: ${options.packet?.byteFontSize ?? '10px'}; + font-size: ${options.byteFontSize}; } .packetByte.start { - fill: ${options.packet?.startByteColor ?? 'black'}; + fill: ${options.startByteColor}; } .packetByte.end { - fill: ${options.packet?.endByteColor ?? 'black'}; + fill: ${options.endByteColor}; } .packetLabel { - fill: ${options.packet?.labelColor ?? 'black'}; - font-size: ${options.packet?.labelFontSize ?? '12px'}; + fill: ${options.labelColor}; + font-size: ${options.labelFontSize}; } .packetTitle { - fill: ${options.packet?.titleColor ?? 'black'}; - font-size: ${options.packet?.titleFontSize ?? '14px'}; + fill: ${options.titleColor}; + font-size: ${options.titleFontSize}; } .packetBlock { - stroke: ${options.packet?.blockStrokeColor ?? 'black'}; - stroke-width: ${options.packet?.blockStrokeWidth ?? '1'}; - fill: ${options.packet?.blockFillColor ?? '#efefef'}; + stroke: ${options.blockStrokeColor}; + stroke-width: ${options.blockStrokeWidth}; + fill: ${options.blockFillColor}; } `; }; From 068a74adeb35f5e0e872f2e974e0b65b6a037c7e Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 15 Nov 2023 00:55:02 +0530 Subject: [PATCH 15/35] chore: Fix magic number Co-authored-by: Reda Al Sulais --- packages/mermaid/src/diagrams/packet/parser.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagrams/packet/parser.ts b/packages/mermaid/src/diagrams/packet/parser.ts index db1dcde09b0..c0e9e12a083 100644 --- a/packages/mermaid/src/diagrams/packet/parser.ts +++ b/packages/mermaid/src/diagrams/packet/parser.ts @@ -6,6 +6,8 @@ import { populateCommonDb } from '../common/populateCommonDb.js'; import { db } from './db.js'; import type { Block, Row } from './types.js'; +const maxPacketSize = 10_000; + const populate = (ast: Packet) => { populateCommonDb(ast, db); let lastByte = -1; @@ -16,7 +18,7 @@ const populate = (ast: Packet) => { if (end && end < start) { throw new Error(`Packet block ${start} - ${end} is invalid. End must be greater than start.`); } - if (start != lastByte + 1) { + if (start !== lastByte + 1) { throw new Error( `Packet block ${start} - ${end ?? start} is not contiguous. It should start from ${ lastByte + 1 @@ -26,7 +28,7 @@ const populate = (ast: Packet) => { lastByte = end ?? start; log.debug(`Packet block ${start} - ${lastByte} with label ${label}`); - while (word.length <= bitsPerRow + 1 && db.getPacket().length < 10_000) { + while (word.length <= bitsPerRow + 1 && db.getPacket().length < maxPacketSize) { const [block, nextBlock] = getNextFittingBlock({ start, end, label }, row, bitsPerRow); word.push(block); if (block.end + 1 === row * bitsPerRow) { From fc400ea57b8f1feacb269a08a18ea7a4e7ced5a4 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 15 Nov 2023 00:57:39 +0530 Subject: [PATCH 16/35] fix: Langium formatting Co-authored-by: Reda Al Sulais --- packages/parser/src/language/packet/packet.langium | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/parser/src/language/packet/packet.langium b/packages/parser/src/language/packet/packet.langium index d14dfdd68ae..dce1c1ef86a 100644 --- a/packages/parser/src/language/packet/packet.langium +++ b/packages/parser/src/language/packet/packet.langium @@ -3,7 +3,7 @@ import "../common/common"; entry Packet: NEWLINE* - "packet-beta" + "packet-beta" ( NEWLINE* TitleAndAccessibilities blocks+=PacketBlock* | NEWLINE+ blocks+=PacketBlock+ @@ -12,7 +12,7 @@ entry Packet: ; PacketBlock: - start=INT('-' end=INT)? ':' label=STRING NEWLINE+ + start=INT('-' end=INT)? ':' label=STRING NEWLINE+ ; terminal INT returns number: /0|[1-9][0-9]*/; From b6983e4b21f64f1bb12bf1f5579177bffbe9401f Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 15 Nov 2023 00:59:34 +0530 Subject: [PATCH 17/35] Add title to tests --- cypress/integration/rendering/packet.spec.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/cypress/integration/rendering/packet.spec.ts b/cypress/integration/rendering/packet.spec.ts index 89dce609bd2..61555ea530a 100644 --- a/cypress/integration/rendering/packet.spec.ts +++ b/cypress/integration/rendering/packet.spec.ts @@ -4,6 +4,7 @@ describe('packet structure', () => { it('should render a simple packet diagram', () => { imgSnapshotTest( `packet-beta + title Hello world 0-10: "hello" ` ); @@ -37,6 +38,7 @@ describe('packet structure', () => { imgSnapshotTest( ` --- + title: "Packet Diagram" config: packet: showBits: false From 113a4009522abeaddc3919b846c6323656098ad6 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 15 Nov 2023 01:02:20 +0530 Subject: [PATCH 18/35] Add DiagramRenderer type Co-authored-by: Reda Al Sulais --- packages/mermaid/src/diagrams/packet/renderer.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagrams/packet/renderer.ts b/packages/mermaid/src/diagrams/packet/renderer.ts index d846de9e73c..c4547fd80d3 100644 --- a/packages/mermaid/src/diagrams/packet/renderer.ts +++ b/packages/mermaid/src/diagrams/packet/renderer.ts @@ -1,6 +1,6 @@ import type { Diagram } from '../../Diagram.js'; import type { PacketDiagramConfig } from '../../config.type.js'; -import type { DrawDefinition, Group, SVG } from '../../diagram-api/types.js'; +import type { DiagramRenderer, DrawDefinition, Group, SVG } from '../../diagram-api/types.js'; import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; import { configureSvgSize } from '../../setupGraphViewbox.js'; import type { PacketDB, Row } from './types.js'; @@ -92,4 +92,4 @@ const drawWord = ( } } }; -export const renderer = { draw }; +export const renderer: DiagramRenderer = { draw }; From f9df193b7b175bc5eaa66adef0663e2d87745fc7 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 15 Nov 2023 01:04:07 +0530 Subject: [PATCH 19/35] chore: Fix imports --- packages/parser/src/language/packet/module.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/parser/src/language/packet/module.ts b/packages/parser/src/language/packet/module.ts index db9ff4722a6..183ec0ff830 100644 --- a/packages/parser/src/language/packet/module.ts +++ b/packages/parser/src/language/packet/module.ts @@ -6,11 +6,10 @@ import type { PartialLangiumServices, } from 'langium'; import { EmptyFileSystem, createDefaultModule, createDefaultSharedModule, inject } from 'langium'; - import { CommonLexer } from '../common/lexer.js'; +import { CommonValueConverter } from '../common/valueConverter.js'; import { MermaidGeneratedSharedModule, PacketGeneratedModule } from '../generated/module.js'; import { PacketTokenBuilder } from './tokenBuilder.js'; -import { CommonValueConverter } from '../common/valueConverter.js'; /** * Declaration of `Packet` services. From 99313fe1628599ce05c5707b9c438d3370d3bfe7 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 15 Nov 2023 09:09:48 +0530 Subject: [PATCH 20/35] fix editor build --- scripts/editor.bash | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/editor.bash b/scripts/editor.bash index fd9b4158255..421fdec7478 100755 --- a/scripts/editor.bash +++ b/scripts/editor.bash @@ -13,8 +13,8 @@ mv package.tmp.json package.json popd pnpm run -r clean +pnpm build:esbuild pnpm build:types -pnpm build:mermaid # Clone the Mermaid Live Editor repository rm -rf mermaid-live-editor From 0d7644c7821630c14be27376f724fadeb0fe1bda Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 15 Nov 2023 09:25:49 +0530 Subject: [PATCH 21/35] refactor: Fix types --- .esbuild/build.ts | 4 ++-- packages/mermaid/src/diagrams/packet/db.ts | 6 +++--- packages/mermaid/src/diagrams/packet/parser.ts | 10 +++++----- packages/mermaid/src/diagrams/packet/renderer.ts | 6 +++--- packages/mermaid/src/diagrams/packet/types.ts | 14 +++++++------- packages/mermaid/src/types.ts | 2 ++ packages/parser/src/index.ts | 11 ++++++++++- 7 files changed, 32 insertions(+), 21 deletions(-) diff --git a/.esbuild/build.ts b/.esbuild/build.ts index 3e829d71935..3c87f9d621f 100644 --- a/.esbuild/build.ts +++ b/.esbuild/build.ts @@ -1,8 +1,8 @@ import { build } from 'esbuild'; import { mkdir, writeFile } from 'node:fs/promises'; -import { MermaidBuildOptions, defaultOptions, getBuildConfig } from './util.js'; import { packageOptions } from '../.build/common.js'; import { generateLangium } from '../.build/generateLangium.js'; +import { MermaidBuildOptions, defaultOptions, getBuildConfig } from './util.js'; const shouldVisualize = process.argv.includes('--visualize'); @@ -56,7 +56,7 @@ const main = async () => { await generateLangium(); await mkdir('stats').catch(() => {}); const packageNames = Object.keys(packageOptions) as (keyof typeof packageOptions)[]; - // it should build `parser` before `mermaid` because it's a dependecy + // it should build `parser` before `mermaid` because it's a dependency for (const pkg of packageNames) { await buildPackage(pkg).catch(handler); } diff --git a/packages/mermaid/src/diagrams/packet/db.ts b/packages/mermaid/src/diagrams/packet/db.ts index a40b71724d4..d7b55047230 100644 --- a/packages/mermaid/src/diagrams/packet/db.ts +++ b/packages/mermaid/src/diagrams/packet/db.ts @@ -11,7 +11,7 @@ import { setAccTitle, setDiagramTitle, } from '../common/commonDb.js'; -import type { PacketDB, PacketData, Row } from './types.js'; +import type { PacketDB, PacketData, PacketWord } from './types.js'; const defaultPacketData: PacketData = { packet: [], @@ -32,9 +32,9 @@ const getConfig = (): Required => { return config; }; -const getPacket = (): Row[] => data.packet; +const getPacket = (): PacketWord[] => data.packet; -const pushWord = (word: Row) => { +const pushWord = (word: PacketWord) => { if (word.length > 0) { data.packet.push(word); } diff --git a/packages/mermaid/src/diagrams/packet/parser.ts b/packages/mermaid/src/diagrams/packet/parser.ts index c0e9e12a083..fa90444df29 100644 --- a/packages/mermaid/src/diagrams/packet/parser.ts +++ b/packages/mermaid/src/diagrams/packet/parser.ts @@ -4,14 +4,14 @@ import type { ParserDefinition } from '../../diagram-api/types.js'; import { log } from '../../logger.js'; import { populateCommonDb } from '../common/populateCommonDb.js'; import { db } from './db.js'; -import type { Block, Row } from './types.js'; +import type { PacketBlock, PacketWord } from './types.js'; const maxPacketSize = 10_000; const populate = (ast: Packet) => { populateCommonDb(ast, db); let lastByte = -1; - let word: Row = []; + let word: PacketWord = []; let row = 1; const { bitsPerRow } = db.getConfig(); for (let { start, end, label } of ast.blocks) { @@ -46,10 +46,10 @@ const populate = (ast: Packet) => { }; const getNextFittingBlock = ( - block: Block, + block: PacketBlock, row: number, bitsPerRow: number -): [Required, Block | undefined] => { +): [Required, PacketBlock | undefined] => { if (block.end === undefined) { block.end = block.start; } @@ -59,7 +59,7 @@ const getNextFittingBlock = ( } if (block.end + 1 <= row * bitsPerRow) { - return [block as Required, undefined]; + return [block as Required, undefined]; } return [ diff --git a/packages/mermaid/src/diagrams/packet/renderer.ts b/packages/mermaid/src/diagrams/packet/renderer.ts index c4547fd80d3..21b941a1727 100644 --- a/packages/mermaid/src/diagrams/packet/renderer.ts +++ b/packages/mermaid/src/diagrams/packet/renderer.ts @@ -3,7 +3,7 @@ import type { PacketDiagramConfig } from '../../config.type.js'; import type { DiagramRenderer, DrawDefinition, Group, SVG } from '../../diagram-api/types.js'; import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; import { configureSvgSize } from '../../setupGraphViewbox.js'; -import type { PacketDB, Row } from './types.js'; +import type { PacketDB, PacketWord } from './types.js'; // eslint-disable-next-line @typescript-eslint/no-unused-vars const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => { @@ -36,13 +36,13 @@ const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => { const drawWord = ( svg: SVG, - row: Row, + word: PacketWord, rowNumber: number, { rowHeight, paddingX, paddingY, bitWidth, bitsPerRow, showBits }: Required ) => { const group: Group = svg.append('g'); const wordY = rowNumber * (rowHeight + paddingY) + paddingY; - for (const block of row) { + for (const block of word) { const blockX = (block.start % bitsPerRow) * bitWidth + 1; const width = (block.end - block.start + 1) * bitWidth - paddingX; // Block rectangle diff --git a/packages/mermaid/src/diagrams/packet/types.ts b/packages/mermaid/src/diagrams/packet/types.ts index 0a4507076d4..bbb87db698c 100644 --- a/packages/mermaid/src/diagrams/packet/types.ts +++ b/packages/mermaid/src/diagrams/packet/types.ts @@ -1,14 +1,14 @@ -import type { Packet } from 'mermaid-parser'; +import type { Packet, RecursiveAstOmit } from 'mermaid-parser'; import type { PacketDiagramConfig } from '../../config.type.js'; import type { DiagramDBBase } from '../../diagram-api/types.js'; +import type { ArrayElement } from '../../types.js'; -export type ArrayElement = A extends readonly (infer T)[] ? T : never; -export type Block = Pick, 'start' | 'end' | 'label'>; -export type Row = Required[]; +export type PacketBlock = RecursiveAstOmit>; +export type PacketWord = Required[]; export interface PacketDB extends DiagramDBBase { - pushWord: (word: Row) => void; - getPacket: () => Row[]; + pushWord: (word: PacketWord) => void; + getPacket: () => PacketWord[]; } export interface PacketStyleOptions { @@ -25,5 +25,5 @@ export interface PacketStyleOptions { } export interface PacketData { - packet: Row[]; + packet: PacketWord[]; } diff --git a/packages/mermaid/src/types.ts b/packages/mermaid/src/types.ts index 13da8850332..487e089dced 100644 --- a/packages/mermaid/src/types.ts +++ b/packages/mermaid/src/types.ts @@ -32,3 +32,5 @@ export interface EdgeData { labelStyle: string; curve: any; } + +export type ArrayElement = A extends readonly (infer T)[] ? T : never; diff --git a/packages/parser/src/index.ts b/packages/parser/src/index.ts index 9ec6b4e9b94..c72b4fcb6e2 100644 --- a/packages/parser/src/index.ts +++ b/packages/parser/src/index.ts @@ -1,3 +1,12 @@ +import type { AstNode } from 'langium'; + export type { Info, Packet } from './language/index.js'; +export { MermaidParseError, parse } from './parse.js'; export type { DiagramAST } from './parse.js'; -export { parse, MermaidParseError } from './parse.js'; + +/** + * Exclude/omit all `AstNode` attributes recursively. + */ +export type RecursiveAstOmit = T extends object + ? { [P in keyof T as Exclude]: RecursiveAstOmit } + : T; From 088fc392abc0c49503b8b0b1c9113442f6be93a1 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 15 Nov 2023 09:42:35 +0530 Subject: [PATCH 22/35] Fix SVG width --- packages/mermaid/src/diagrams/packet/renderer.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/mermaid/src/diagrams/packet/renderer.ts b/packages/mermaid/src/diagrams/packet/renderer.ts index 21b941a1727..2ef4ab7cd64 100644 --- a/packages/mermaid/src/diagrams/packet/renderer.ts +++ b/packages/mermaid/src/diagrams/packet/renderer.ts @@ -2,7 +2,6 @@ import type { Diagram } from '../../Diagram.js'; import type { PacketDiagramConfig } from '../../config.type.js'; import type { DiagramRenderer, DrawDefinition, Group, SVG } from '../../diagram-api/types.js'; import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; -import { configureSvgSize } from '../../setupGraphViewbox.js'; import type { PacketDB, PacketWord } from './types.js'; // eslint-disable-next-line @typescript-eslint/no-unused-vars @@ -17,8 +16,8 @@ const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => { const svgWidth = bitWidth * bitsPerRow + 2; const svg: SVG = selectSvgElement(id); - configureSvgSize(svg, svgHeight, svgWidth, true); - svg.attr('height', svgHeight + 'px'); + svg.attr('width', '100%'); + svg.attr('viewbox', `0 0 ${svgWidth} ${svgHeight}`); for (const [row, packet] of words.entries()) { drawWord(svg, packet, row, config); From 784a853ec7bdf17febcfa668e4142553f66b1988 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 15 Nov 2023 12:20:28 +0530 Subject: [PATCH 23/35] feat: Add theming to packet --- .github/pull_request_template.md | 2 +- demos/packet.html | 78 ++++- docs/syntax/packet.md | 139 ++++++++ .../mermaid/src/diagrams/packet/renderer.ts | 2 +- .../mermaid/src/docs/.vitepress/config.ts | 11 +- packages/mermaid/src/docs/syntax/packet.md | 101 ++++++ packages/mermaid/src/themes/theme-dark.js | 11 +- packages/mermaid/src/themes/theme-forest.js | 13 +- pnpm-lock.yaml | 309 +++--------------- 9 files changed, 396 insertions(+), 270 deletions(-) create mode 100644 docs/syntax/packet.md create mode 100644 packages/mermaid/src/docs/syntax/packet.md diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index ff34d24fd0f..9847c252326 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -14,5 +14,5 @@ Make sure you - [ ] :book: have read the [contribution guidelines](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) - [ ] :computer: have added necessary unit/e2e tests. -- [ ] :notebook: have added documentation. Make sure [`MERMAID_RELEASE_VERSION`](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/docs/community/development.md#3-update-documentation) is used for all new features. +- [ ] :notebook: have added documentation. Make sure [`MERMAID_RELEASE_VERSION`](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/docs/community/code.md#3-update-documentation) is used for all new features. - [ ] :bookmark: targeted `develop` branch diff --git a/demos/packet.html b/demos/packet.html index 3e53f60dba9..f332dcf8cf8 100644 --- a/demos/packet.html +++ b/demos/packet.html @@ -14,7 +14,9 @@

    Packet diagram demo

    - 
    +
+    
    
+      
           packet-beta
         0-15: "Source Port"
         16-31: "Destination Port"
@@ -33,9 +35,10 @@ 
    Packet diagram demo
    
         144-159: "Urgent Pointer"
         160-191: "(Options and Padding)"
         192-223: "data"
-    
    
+
    - 
    +      
           ---
       config:
         packet:
@@ -59,15 +62,80 @@ 
    Packet diagram demo
    
         144-159: "Urgent Pointer"
         160-191: "(Options and Padding)"
         192-223: "data"
-    
    
+
    + 
    +      ---
+      config:
+        theme: forest
+      ---
+      packet-beta
+        title Forest theme
+        0-15: "Source Port"
+        16-31: "Destination Port"
+        32-63: "Sequence Number"
+        64-95: "Acknowledgment Number"
+        96-99: "Data Offset"
+        100-105: "Reserved"
+        106: "URG"
+        107: "ACK"
+        108: "PSH"
+        109: "RST"
+        110: "SYN"
+        111: "FIN"
+        112-127: "Window"
+        128-143: "Checksum"
+        144-159: "Urgent Pointer"
+        160-191: "(Options and Padding)"
+        192-223: "data"
+
    + + 
    +      ---
+      config:
+        theme: dark
+      ---
+      packet-beta
+        title Dark theme
+        0-15: "Source Port"
+        16-31: "Destination Port"
+        32-63: "Sequence Number"
+        64-95: "Acknowledgment Number"
+        96-99: "Data Offset"
+        100-105: "Reserved"
+        106: "URG"
+        107: "ACK"
+        108: "PSH"
+        109: "RST"
+        110: "SYN"
+        111: "FIN"
+        112-127: "Window"
+        128-143: "Checksum"
+        144-159: "Urgent Pointer"
+        160-191: "(Options and Padding)"
+        192-223: "data"
+
    + + + diff --git a/docs/syntax/packet.md b/docs/syntax/packet.md new file mode 100644 index 00000000000..1792daf4c24 --- /dev/null +++ b/docs/syntax/packet.md @@ -0,0 +1,139 @@ +> **Warning** +> +> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. +> +> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/packet.md](../../packages/mermaid/src/docs/syntax/packet.md). + +# Packet Diagram (v\+) + +## Introduction + +A packet diagram is a visual representation used to illustrate the structure and contents of a network packet. Network packets are the fundamental units of data transferred over a network. + +## Usage + +This diagram type is particularly useful for network engineers, educators, and students who require a clear and concise way to represent the structure of network packets. + +## Syntax + + packet-beta + start: "Block name" %% Single-bit block + start-end: "Block name" %% Multi-bit blocks + ... More Fields ... + +## Examples + +```mermaid-example +--- +title: "TCP Packet" +--- +packet-beta +0-15: "Source Port" +16-31: "Destination Port" +32-63: "Sequence Number" +64-95: "Acknowledgment Number" +96-99: "Data Offset" +100-105: "Reserved" +106: "URG" +107: "ACK" +108: "PSH" +109: "RST" +110: "SYN" +111: "FIN" +112-127: "Window" +128-143: "Checksum" +144-159: "Urgent Pointer" +160-191: "(Options and Padding)" +192-255: "Data (variable length)" +``` + +```mermaid +--- +title: "TCP Packet" +--- +packet-beta +0-15: "Source Port" +16-31: "Destination Port" +32-63: "Sequence Number" +64-95: "Acknowledgment Number" +96-99: "Data Offset" +100-105: "Reserved" +106: "URG" +107: "ACK" +108: "PSH" +109: "RST" +110: "SYN" +111: "FIN" +112-127: "Window" +128-143: "Checksum" +144-159: "Urgent Pointer" +160-191: "(Options and Padding)" +192-255: "Data (variable length)" +``` + +```mermaid-example +packet-beta +title UDP Packet +0-15: "Source Port" +16-31: "Destination Port" +32-47: "Length" +48-63: "Checksum" +64-95: "Data (variable length)" +``` + +```mermaid +packet-beta +title UDP Packet +0-15: "Source Port" +16-31: "Destination Port" +32-47: "Length" +48-63: "Checksum" +64-95: "Data (variable length)" +``` + +## Details of Syntax + +- **Ranges**: Each line after the title represents a different field in the packet. The range (e.g., `0-15`) indicates the bit positions in the packet. +- **Field Description**: A brief description of what the field represents, enclosed in quotes. + +## Configuration + +Please refer to the [configuration](/config/schema-docs/config-defs-packet-diagram-config.html) guide for details. + + diff --git a/packages/mermaid/src/diagrams/packet/renderer.ts b/packages/mermaid/src/diagrams/packet/renderer.ts index 2ef4ab7cd64..27f20cc0da4 100644 --- a/packages/mermaid/src/diagrams/packet/renderer.ts +++ b/packages/mermaid/src/diagrams/packet/renderer.ts @@ -27,7 +27,7 @@ const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => { .append('text') .text(title) .attr('x', svgWidth / 2) - .attr('y', svgHeight - rowHeight) + .attr('y', svgHeight - totalRowHeight / 2) .attr('dominant-baseline', 'middle') .attr('text-anchor', 'middle') .attr('class', 'packetTitle'); diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts index 691ca056519..41fd8a09bec 100644 --- a/packages/mermaid/src/docs/.vitepress/config.ts +++ b/packages/mermaid/src/docs/.vitepress/config.ts @@ -1,6 +1,6 @@ +import { defineConfig, MarkdownOptions } from 'vitepress'; import { version } from '../../../package.json'; import MermaidExample from './mermaid-markdown-all.js'; -import { defineConfig, MarkdownOptions } from 'vitepress'; const allMarkdownTransformers: MarkdownOptions = { // the shiki theme to highlight code blocks @@ -144,13 +144,14 @@ function sidebarSyntax() { { text: 'Pie Chart', link: '/syntax/pie' }, { text: 'Quadrant Chart', link: '/syntax/quadrantChart' }, { text: 'Requirement Diagram', link: '/syntax/requirementDiagram' }, - { text: 'Gitgraph (Git) Diagram 🔥', link: '/syntax/gitgraph' }, + { text: 'Gitgraph (Git) Diagram', link: '/syntax/gitgraph' }, { text: 'C4 Diagram 🦺⚠️', link: '/syntax/c4' }, - { text: 'Mindmaps 🔥', link: '/syntax/mindmap' }, - { text: 'Timeline 🔥', link: '/syntax/timeline' }, - { text: 'Zenuml 🔥', link: '/syntax/zenuml' }, + { text: 'Mindmaps', link: '/syntax/mindmap' }, + { text: 'Timeline', link: '/syntax/timeline' }, + { text: 'Zenuml', link: '/syntax/zenuml' }, { text: 'Sankey 🔥', link: '/syntax/sankey' }, { text: 'XYChart 🔥', link: '/syntax/xyChart' }, + { text: 'Packet 🔥', link: '/syntax/packet' }, { text: 'Other Examples', link: '/syntax/examples' }, ], }, diff --git a/packages/mermaid/src/docs/syntax/packet.md b/packages/mermaid/src/docs/syntax/packet.md new file mode 100644 index 00000000000..99e449e6b10 --- /dev/null +++ b/packages/mermaid/src/docs/syntax/packet.md @@ -0,0 +1,101 @@ +# Packet Diagram (v+) + +## Introduction + +A packet diagram is a visual representation used to illustrate the structure and contents of a network packet. Network packets are the fundamental units of data transferred over a network. + +## Usage + +This diagram type is particularly useful for network engineers, educators, and students who require a clear and concise way to represent the structure of network packets. + +## Syntax + +``` +packet-beta +start: "Block name" %% Single-bit block +start-end: "Block name" %% Multi-bit blocks +... More Fields ... +``` + +## Examples + +```mermaid-example +--- +title: "TCP Packet" +--- +packet-beta +0-15: "Source Port" +16-31: "Destination Port" +32-63: "Sequence Number" +64-95: "Acknowledgment Number" +96-99: "Data Offset" +100-105: "Reserved" +106: "URG" +107: "ACK" +108: "PSH" +109: "RST" +110: "SYN" +111: "FIN" +112-127: "Window" +128-143: "Checksum" +144-159: "Urgent Pointer" +160-191: "(Options and Padding)" +192-255: "Data (variable length)" +``` + +```mermaid-example +packet-beta +title UDP Packet +0-15: "Source Port" +16-31: "Destination Port" +32-47: "Length" +48-63: "Checksum" +64-95: "Data (variable length)" +``` + +## Details of Syntax + +- **Ranges**: Each line after the title represents a different field in the packet. The range (e.g., `0-15`) indicates the bit positions in the packet. +- **Field Description**: A brief description of what the field represents, enclosed in quotes. + +## Configuration + +Please refer to the [configuration](/config/schema-docs/config-defs-packet-diagram-config.html) guide for details. + + diff --git a/packages/mermaid/src/themes/theme-dark.js b/packages/mermaid/src/themes/theme-dark.js index c5662510903..dc7a600098b 100644 --- a/packages/mermaid/src/themes/theme-dark.js +++ b/packages/mermaid/src/themes/theme-dark.js @@ -1,4 +1,4 @@ -import { invert, lighten, darken, rgba, adjust, isDark } from 'khroma'; +import { adjust, darken, invert, isDark, lighten, rgba } from 'khroma'; import { mkBorder } from './theme-helpers.js'; class Theme { @@ -268,6 +268,15 @@ class Theme { '#3498db,#2ecc71,#e74c3c,#f1c40f,#bdc3c7,#ffffff,#34495e,#9b59b6,#1abc9c,#e67e22', }; + this.packet = { + startByteColor: this.primaryTextColor, + endByteColor: this.primaryTextColor, + labelColor: this.primaryTextColor, + titleColor: this.primaryTextColor, + blockStrokeColor: this.primaryTextColor, + blockFillColor: this.background, + }; + /* class */ this.classText = this.primaryTextColor; diff --git a/packages/mermaid/src/themes/theme-forest.js b/packages/mermaid/src/themes/theme-forest.js index 0270f51ff99..eda905c6618 100644 --- a/packages/mermaid/src/themes/theme-forest.js +++ b/packages/mermaid/src/themes/theme-forest.js @@ -1,9 +1,9 @@ -import { darken, lighten, adjust, invert, isDark } from 'khroma'; -import { mkBorder } from './theme-helpers.js'; +import { adjust, darken, invert, isDark, lighten } from 'khroma'; import { oldAttributeBackgroundColorEven, oldAttributeBackgroundColorOdd, } from './erDiagram-oldHardcodedValues.js'; +import { mkBorder } from './theme-helpers.js'; class Theme { constructor() { @@ -240,6 +240,15 @@ class Theme { this.quadrantExternalBorderStrokeFill || this.primaryBorderColor; this.quadrantTitleFill = this.quadrantTitleFill || this.primaryTextColor; + this.packet = { + startByteColor: this.primaryTextColor, + endByteColor: this.primaryTextColor, + labelColor: this.primaryTextColor, + titleColor: this.primaryTextColor, + blockStrokeColor: this.primaryTextColor, + blockFillColor: this.mainBkg, + }; + /* xychart */ this.xyChart = { backgroundColor: this.xyChart?.backgroundColor || this.background, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3e5d16f4cc8..a667516d4e7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -500,8 +500,8 @@ importers: specifier: ^1.1.16 version: 1.1.16 '@unocss/reset': - specifier: ^0.55.2 - version: 0.55.7 + specifier: ^0.57.0 + version: 0.57.1 '@vite-pwa/vitepress': specifier: ^0.2.0 version: 0.2.0(vite-plugin-pwa@0.16.0) @@ -518,8 +518,8 @@ importers: specifier: ^1.1.0 version: 1.1.1 unocss: - specifier: ^0.55.2 - version: 0.55.7(postcss@8.4.31)(rollup@2.79.1)(vite@4.5.0) + specifier: ^0.57.0 + version: 0.57.1(postcss@8.4.31)(rollup@2.79.1)(vite@4.5.0) unplugin-vue-components: specifier: ^0.25.0 version: 0.25.0(rollup@2.79.1)(vue@3.3.7) @@ -530,8 +530,8 @@ importers: specifier: ^0.16.0 version: 0.16.0(vite@4.5.0)(workbox-build@7.0.0)(workbox-window@7.0.0) vitepress: - specifier: 1.0.0-rc.12 - version: 1.0.0-rc.12(@algolia/client-search@4.19.1)(@types/node@18.17.5)(search-insights@2.7.0)(typescript@5.1.6) + specifier: 1.0.0-rc.25 + version: 1.0.0-rc.25(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.31)(search-insights@2.7.0)(typescript@5.1.6) workbox-window: specifier: ^7.0.0 version: 7.0.0 @@ -5059,23 +5059,23 @@ packages: eslint-visitor-keys: 3.4.3 dev: true - /@unocss/astro@0.55.7(rollup@2.79.1)(vite@4.5.0): - resolution: {integrity: sha512-mw8r14ArxUQBVCCisAJlF/WsZb650iBsduD/lXMk56N/nQ3MMArCcn62kcAxgZSb5tfIOQGQu/tbR8hEcD8y2g==} + /@unocss/astro@0.57.1(rollup@2.79.1)(vite@4.4.9): + resolution: {integrity: sha512-KNaqN/SGM/uz1QitajIkzNEw0jy9Zx9Wp8fl4GhfGYEMAN2+M4cuvBZRmlb6cLctSXmSAJQDG91ivbD1JijGnw==} peerDependencies: vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 peerDependenciesMeta: vite: optional: true dependencies: - '@unocss/core': 0.55.7 - '@unocss/reset': 0.55.7 - '@unocss/vite': 0.55.7(rollup@2.79.1)(vite@4.5.0) - vite: 4.5.0(@types/node@18.17.5) + '@unocss/core': 0.57.1 + '@unocss/reset': 0.57.1 + '@unocss/vite': 0.57.1(rollup@2.79.1)(vite@4.4.9) + vite: 4.4.9(@types/node@18.17.5) transitivePeerDependencies: - rollup dev: true - /@unocss/astro@0.57.1(rollup@2.79.1)(vite@4.4.9): + /@unocss/astro@0.57.1(rollup@2.79.1)(vite@4.5.0): resolution: {integrity: sha512-KNaqN/SGM/uz1QitajIkzNEw0jy9Zx9Wp8fl4GhfGYEMAN2+M4cuvBZRmlb6cLctSXmSAJQDG91ivbD1JijGnw==} peerDependencies: vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 @@ -5085,30 +5085,8 @@ packages: dependencies: '@unocss/core': 0.57.1 '@unocss/reset': 0.57.1 - '@unocss/vite': 0.57.1(rollup@2.79.1)(vite@4.4.9) - vite: 4.4.9(@types/node@18.17.5) - transitivePeerDependencies: - - rollup - dev: true - - /@unocss/cli@0.55.7(rollup@2.79.1): - resolution: {integrity: sha512-ZHX2SR2WQbKfcmgOOHjBLB3V57Ct76Zb76YULzBj2EVX43lX/YDCVG87n6ePDY7rOcjCAthjrFQYCLV5KVLKHg==} - engines: {node: '>=14'} - hasBin: true - dependencies: - '@ampproject/remapping': 2.2.1 - '@rollup/pluginutils': 5.0.5(rollup@2.79.1) - '@unocss/config': 0.55.7 - '@unocss/core': 0.55.7 - '@unocss/preset-uno': 0.55.7 - cac: 6.7.14 - chokidar: 3.5.3 - colorette: 2.0.20 - consola: 3.2.3 - fast-glob: 3.3.1 - magic-string: 0.30.5 - pathe: 1.1.1 - perfect-debounce: 1.0.0 + '@unocss/vite': 0.57.1(rollup@2.79.1)(vite@4.5.0) + vite: 4.5.0(@types/node@18.17.5) transitivePeerDependencies: - rollup dev: true @@ -5135,14 +5113,6 @@ packages: - rollup dev: true - /@unocss/config@0.55.7: - resolution: {integrity: sha512-+X6rPScyFEWbkZyCyM+HfoJhJNN+CEl2n2izWkm0kuDj3w9fY9B3f/0dsk+jmx/gJEI5Y797q9zspNMNDib1AA==} - engines: {node: '>=14'} - dependencies: - '@unocss/core': 0.55.7 - unconfig: 0.3.11 - dev: true - /@unocss/config@0.57.1: resolution: {integrity: sha512-mbuVO0mH1PX7rEkViMNWb3jG1ji7TUydo2DdnMHhJE+dOrGtnQzhzXGlAd4qqel1fnt/VWuOyZKwJA3QO6VCtg==} engines: {node: '>=14'} @@ -5151,33 +5121,16 @@ packages: unconfig: 0.3.11 dev: true - /@unocss/core@0.55.7: - resolution: {integrity: sha512-c+bWe844Xjlwc1EPwHj0+n3LpntJG7ELPbEOOxNIG+CQdcEX0l1G0rkM8+nKstJ9WJmgpf1HdJQLVMF62HXvhw==} - dev: true - /@unocss/core@0.57.1: resolution: {integrity: sha512-cqQW/4gCuk+bFMPg9lBanuRNQ9Lx1l4PpMN/6uKxI5WROpq7ce/Xb4uGvAxKLh3ITtFSpXs2cLfsy7QD6cVD/Q==} dev: true - /@unocss/extractor-arbitrary-variants@0.55.7: - resolution: {integrity: sha512-imK2g/frlo5Ag0uVB+C/Psyo5+9AnqhoRAgYa6gyrQ/TJnrnwf+M3jFngU9evIMHw92vig1DGfPa2ZId901DwQ==} - dependencies: - '@unocss/core': 0.55.7 - dev: true - /@unocss/extractor-arbitrary-variants@0.57.1: resolution: {integrity: sha512-9s+azHhBnwjxm46TsD1RY0krDAwOR8tcw58Vtl3emd6C0VQsAOdoprt7UHE7GEXMvDVq7nMf8lAT0BM0LteW3w==} dependencies: '@unocss/core': 0.57.1 dev: true - /@unocss/inspector@0.55.7: - resolution: {integrity: sha512-N0mjZozDDyqx8Mh6C/ZlMTlDzGiq22sXY/hPRX55Cf44WZI4W/ZWajqAAp42B+lw2MN0k1FYEMIAwn9n+xgq/g==} - dependencies: - gzip-size: 6.0.0 - sirv: 2.0.3 - dev: true - /@unocss/inspector@0.57.1: resolution: {integrity: sha512-qV7ta7iHGX2EpZJ4IWY/05kgyhKFeWlvVJbrOnGsaH8gVt33T/43YAhB/8K5GIXBXIwkhwk13iB13nlg2gSheg==} dependencies: @@ -5186,20 +5139,6 @@ packages: sirv: 2.0.3 dev: true - /@unocss/postcss@0.55.7(postcss@8.4.31): - resolution: {integrity: sha512-53Z/yv/CNdlTqKZQ9gpYRoLZSuzQ28J0SDrGCdzwjLcvHG/FD7/x1S7yxE7cUp/4sjvLL15HSzkWq8vNy6SkwQ==} - engines: {node: '>=14'} - peerDependencies: - postcss: ^8.4.21 - dependencies: - '@unocss/config': 0.55.7 - '@unocss/core': 0.55.7 - css-tree: 2.3.1 - fast-glob: 3.3.1 - magic-string: 0.30.5 - postcss: 8.4.31 - dev: true - /@unocss/postcss@0.57.1(postcss@8.4.31): resolution: {integrity: sha512-DexrV+v/qkVh6t660rXigNr2Y6lON8jxD1z2KVk2bjHKhFflF6q6seps6d/MquyLJI1mXF2uANTeFAeL2q6evw==} engines: {node: '>=14'} @@ -5215,28 +5154,12 @@ packages: postcss: 8.4.31 dev: true - /@unocss/preset-attributify@0.55.7: - resolution: {integrity: sha512-L1sNw3DyM4mymIm4DBTTTOllk8LmhYlWMgDlaAW2MYWygjqDCsp99wRKT2175Ya5xHYBA6XetMoBryZD23qJYQ==} - dependencies: - '@unocss/core': 0.55.7 - dev: true - /@unocss/preset-attributify@0.57.1: resolution: {integrity: sha512-pvGQHaqBlB0jQysWhNbcKLOGrkj8b53k0sAa9LYxQjD1fa8t/dwbuMpZv4twX+gysF0vBhxRoWBPLH1/S6zRZg==} dependencies: '@unocss/core': 0.57.1 dev: true - /@unocss/preset-icons@0.55.7: - resolution: {integrity: sha512-JXLOHkyEKKAjLTqjAxYfhwln05WXilGg3jctkZWKpMNawPaonrGt3kZT12YMuMmOryxk7UcyKB0dtYc+p3QYvw==} - dependencies: - '@iconify/utils': 2.1.11 - '@unocss/core': 0.55.7 - ofetch: 1.3.3 - transitivePeerDependencies: - - supports-color - dev: true - /@unocss/preset-icons@0.57.1: resolution: {integrity: sha512-ve4jC6yREfS0mv97DCld9xLjMuiSCcsQPKucdtpUfCjLMqtGd1ZGGdFv02Q+92NkW7HDfgj+izEw1SKh9695Ow==} dependencies: @@ -5247,13 +5170,6 @@ packages: - supports-color dev: true - /@unocss/preset-mini@0.55.7: - resolution: {integrity: sha512-ZCskE2uprjGkpQezEPM6KPMf84rIZEUNc1p2DxWVHaFUPRV24/JSNsO4PsKrQgNIb2dLQxzPNlMzQJI7ssdBXQ==} - dependencies: - '@unocss/core': 0.55.7 - '@unocss/extractor-arbitrary-variants': 0.55.7 - dev: true - /@unocss/preset-mini@0.57.1: resolution: {integrity: sha512-v9ZsIUGDfZNXbIrOc7zrBp+RFbFFGSQN/vKIf761js4fJ31j6lan4pPQPGcY17xHConkI1HJT/+yb/UVJaAcHw==} dependencies: @@ -5262,25 +5178,12 @@ packages: '@unocss/rule-utils': 0.57.1 dev: true - /@unocss/preset-tagify@0.55.7: - resolution: {integrity: sha512-aDsuN3a/ZirbCDKpFsue9tc8MHs3l0Rl81n2ZOdIrJoZW4YWyydMVl++cz/HERZW81ZySK8EJKwGBaMJMgsnHA==} - dependencies: - '@unocss/core': 0.55.7 - dev: true - /@unocss/preset-tagify@0.57.1: resolution: {integrity: sha512-GV8knxnsOVH/XiG2KB+mVZeEJqr0PZvvkSTPftGPbjttoKVZ+28Y5q9/qezH7p4W6RYVAAK+3qHHy5wWZosiMw==} dependencies: '@unocss/core': 0.57.1 dev: true - /@unocss/preset-typography@0.55.7: - resolution: {integrity: sha512-hLV4nsgsDIk66pt7Ej4NYUmaGtI2EfGb1h2yl5FmBtdtACrgPq+Skr2Br9Iq+Bj1QFhbsMOWLDdbojFQwBdH6A==} - dependencies: - '@unocss/core': 0.55.7 - '@unocss/preset-mini': 0.55.7 - dev: true - /@unocss/preset-typography@0.57.1: resolution: {integrity: sha512-C4cqCiGW0OSoSXsVQKgfLulYxY5C8M40f+a8VtBlAaEaN6eSlEt+catXb0chF9T2mvz/b87b0PahPvPwJdDf1Q==} dependencies: @@ -5288,14 +5191,6 @@ packages: '@unocss/preset-mini': 0.57.1 dev: true - /@unocss/preset-uno@0.55.7: - resolution: {integrity: sha512-z4pCxOv/OU1ARo++cvbijWNW2zy/EVTMqJXa+SEep9b99wFXPQE3gaPvLdURp/e5f1PoxVyPZ6JiBknbClSDuA==} - dependencies: - '@unocss/core': 0.55.7 - '@unocss/preset-mini': 0.55.7 - '@unocss/preset-wind': 0.55.7 - dev: true - /@unocss/preset-uno@0.57.1: resolution: {integrity: sha512-0+DKZiowYjYzq2swJzQA2dhqDvLJdm0Y437ITzc2GzZMKGUUuNi+w2v3/SzwkpkRd9zTB9/YaOIJVfdrx6ZOXQ==} dependencies: @@ -5305,13 +5200,6 @@ packages: '@unocss/rule-utils': 0.57.1 dev: true - /@unocss/preset-web-fonts@0.55.7: - resolution: {integrity: sha512-ygAz0540kdBapErW2BcObWfQT/6g0SpVUPYg92PPiZD57CZAvuNXiYTfFMRXd88QrBL1zIrZ6NrzY0NZ645H+w==} - dependencies: - '@unocss/core': 0.55.7 - ofetch: 1.3.3 - dev: true - /@unocss/preset-web-fonts@0.57.1: resolution: {integrity: sha512-9DCIMlBRaGrljLmeciH4WqP+uRx2z2nLxvrvEmGbpJJpMn2H4higR5Zu5tDyKYGr9QBl9vXdWgib+43OSswkqA==} dependencies: @@ -5319,13 +5207,6 @@ packages: ofetch: 1.3.3 dev: true - /@unocss/preset-wind@0.55.7: - resolution: {integrity: sha512-vLi0mtYDnvx3uYtBR4fSCR52T59drTUp3XVAAqQTbhvRctnSWm65MWE4G+gqdt2qQ9fM4SVCsxLLaXuJkI2eqw==} - dependencies: - '@unocss/core': 0.55.7 - '@unocss/preset-mini': 0.55.7 - dev: true - /@unocss/preset-wind@0.57.1: resolution: {integrity: sha512-5UairNahUXNDe9AggPtTCodyPjl6NgPCsiEB22LVgN20UjBXjaqzN5wUe1OgtpLoAUaSk0KI7eLWhnWbTbST3A==} dependencies: @@ -5334,10 +5215,6 @@ packages: '@unocss/rule-utils': 0.57.1 dev: true - /@unocss/reset@0.55.7: - resolution: {integrity: sha512-yvmLhxqUNgf6wue7IvhV/FdrQW9H9LF1Bmmhwwaiz2aV0E74aN4pbuYPZwNq3YafsQvNQ0UdtuXjddY4QMRCPw==} - dev: true - /@unocss/reset@0.57.1: resolution: {integrity: sha512-f/ofoudjFN/HMtv1XV5phP58pOmNruBhr0GbVdBNylyieMQkFHowA7iSemChnC/fTbCcY6oSOAcFl4n9AefjdA==} dev: true @@ -5350,57 +5227,28 @@ packages: magic-string: 0.30.5 dev: true - /@unocss/scope@0.55.7: - resolution: {integrity: sha512-r0CaS1aSpcC37ztqOJ3qaWIzM6zwdlX8r0rib2vTvWTckw1J0ocVhjNkWRBM9kRWte006JhecdiZzXNHA40akg==} - dev: true - /@unocss/scope@0.57.1: resolution: {integrity: sha512-ZAzg6lLGwKNQGCvJXEie3TvGztkAyajEFqygu0mjtHb+CmDql4iAjoygs+3dnRI5hSDwfMYFrJ2azX26+2CsoA==} dev: true - /@unocss/transformer-attributify-jsx-babel@0.55.7: - resolution: {integrity: sha512-xl5K/Zg7tLyI6Oee+xHgvBm0gSEviYdBDwaGC4O6cP9VXTBm6waz9NUU6CmmVYKh4dSeLQ1PKNboMeg2nFuJMw==} - dependencies: - '@unocss/core': 0.55.7 - dev: true - /@unocss/transformer-attributify-jsx-babel@0.57.1: resolution: {integrity: sha512-EOCPB8OGmhroAuFU0i0W5p6GmJpx6mAkP4KmsqVLd4QMgw+8aXkG7SKyLnxQZnekM0/dSo0TcpVGeGrZaUNgvQ==} dependencies: '@unocss/core': 0.57.1 dev: true - /@unocss/transformer-attributify-jsx@0.55.7: - resolution: {integrity: sha512-ZyUBc0wguBhd+nbIlcrSYpmzKtqBi+8BII8SK4lIB/Ol1wBboByPTjBENsQkxRyffp5K9VTuZZ/LamFgPGOWDg==} - dependencies: - '@unocss/core': 0.55.7 - dev: true - /@unocss/transformer-attributify-jsx@0.57.1: resolution: {integrity: sha512-ohgSEwm2j98ltPWl1zRPvZhRjQPpd7qZtgoROTQh6n2W7wEO1SlnYjgBBz+pGuo2dkfBN5NjuZJ93AEjS10Ysw==} dependencies: '@unocss/core': 0.57.1 dev: true - /@unocss/transformer-compile-class@0.55.7: - resolution: {integrity: sha512-tiYiT9EG4ucSBvMo+9Hv43GY0YvXQjfQCXDhDm3tcJyreMg6BRMO412eir54RBS+JAdNU0DUoITVYu+PkF7hLg==} - dependencies: - '@unocss/core': 0.55.7 - dev: true - /@unocss/transformer-compile-class@0.57.1: resolution: {integrity: sha512-z0WZN6hbgpyBm2xqIrojqEjpQMhiyzHRbaBjWzI/6ieHWoFo5ajIwnReaFUEfJRNruLTd7/9hFDZdRXRPhttFw==} dependencies: '@unocss/core': 0.57.1 dev: true - /@unocss/transformer-directives@0.55.7: - resolution: {integrity: sha512-xNmR40FssHWYJSmJv/9TQC2IdTyZPV8U3Iv/PIuke1zndMwMciclghEFiw0wSeRmhoRI7iFZck5EI/Bokyo7CQ==} - dependencies: - '@unocss/core': 0.55.7 - css-tree: 2.3.1 - dev: true - /@unocss/transformer-directives@0.57.1: resolution: {integrity: sha512-rIk3XEU2NywEJUOkngBSmJfvS3IVgxkkqgMvuIqz8ZDbwWhepuMxsiI0QR3ypkipGr/eKK5DJ7eK0OVlo6FPFA==} dependencies: @@ -5409,39 +5257,33 @@ packages: css-tree: 2.3.1 dev: true - /@unocss/transformer-variant-group@0.55.7: - resolution: {integrity: sha512-uLyZ08XXVriUDenZCTGA3xGgMD3B9GVr6mSz002pDlLpQDi8FcMQTOGg8X4ViCGzS3l03S/+r+JY7kJTpMFa9w==} - dependencies: - '@unocss/core': 0.55.7 - dev: true - /@unocss/transformer-variant-group@0.57.1: resolution: {integrity: sha512-qwydzn2Lqz/8zW6UUXdORaUl8humsG8ll74LN/z8cjEsqtXZkVdkV0l6Brpp9Xp/XPbKwO+II+KH3/1LGwXSzQ==} dependencies: '@unocss/core': 0.57.1 dev: true - /@unocss/vite@0.55.7(rollup@2.79.1)(vite@4.5.0): - resolution: {integrity: sha512-xmdyDnt9Ag4o7DGl22/P6MaB+HSjWOQw9qYYzIefSv3SVUvn3cEhIX/PCWqFp8Kts2HyvAoJLbZmygSf1XdZNQ==} + /@unocss/vite@0.57.1(rollup@2.79.1)(vite@4.4.9): + resolution: {integrity: sha512-kEBDvGgQNkX2n87S6Ao5seyFb1kuWZ5p96dGOS7VFpD7HvR5xholkJXaVhUK9/exCldjLExbo5UtVlbxFLUFYg==} peerDependencies: vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 dependencies: '@ampproject/remapping': 2.2.1 '@rollup/pluginutils': 5.0.5(rollup@2.79.1) - '@unocss/config': 0.55.7 - '@unocss/core': 0.55.7 - '@unocss/inspector': 0.55.7 - '@unocss/scope': 0.55.7 - '@unocss/transformer-directives': 0.55.7 + '@unocss/config': 0.57.1 + '@unocss/core': 0.57.1 + '@unocss/inspector': 0.57.1 + '@unocss/scope': 0.57.1 + '@unocss/transformer-directives': 0.57.1 chokidar: 3.5.3 fast-glob: 3.3.1 magic-string: 0.30.5 - vite: 4.5.0(@types/node@18.17.5) + vite: 4.4.9(@types/node@18.17.5) transitivePeerDependencies: - rollup dev: true - /@unocss/vite@0.57.1(rollup@2.79.1)(vite@4.4.9): + /@unocss/vite@0.57.1(rollup@2.79.1)(vite@4.5.0): resolution: {integrity: sha512-kEBDvGgQNkX2n87S6Ao5seyFb1kuWZ5p96dGOS7VFpD7HvR5xholkJXaVhUK9/exCldjLExbo5UtVlbxFLUFYg==} peerDependencies: vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 @@ -5456,7 +5298,7 @@ packages: chokidar: 3.5.3 fast-glob: 3.3.1 magic-string: 0.30.5 - vite: 4.4.9(@types/node@18.17.5) + vite: 4.5.0(@types/node@18.17.5) transitivePeerDependencies: - rollup dev: true @@ -5466,7 +5308,7 @@ packages: peerDependencies: vite-plugin-pwa: '>=0.16.3 <1' dependencies: - vite-plugin-pwa: 0.16.0(vite@4.4.9)(workbox-build@7.0.0)(workbox-window@7.0.0) + vite-plugin-pwa: 0.16.0(vite@4.5.0)(workbox-build@7.0.0)(workbox-window@7.0.0) dev: true /@vitejs/plugin-vue@4.2.1(vite@4.4.9)(vue@3.3.4): @@ -15784,11 +15626,11 @@ packages: engines: {node: '>= 10.0.0'} dev: true - /unocss@0.55.7(postcss@8.4.31)(rollup@2.79.1)(vite@4.5.0): - resolution: {integrity: sha512-3W9P7vj2EhSk/4oPCHBS0VgrwSf5zZL6Az1/XARVOpBnRJtCM2szFInYxHkMgt9pkZTsW8SFCuk/g+QIJ6A8tg==} + /unocss@0.57.1(postcss@8.4.31)(rollup@2.79.1)(vite@4.4.9): + resolution: {integrity: sha512-xLsyJ8+T1/Ux93yrqOvuQy268wF5rSzydlsbqZ5EVfi01PxYyydez3nycPqbyPZientkJ0Yohzd5aBqmZgku3A==} engines: {node: '>=14'} peerDependencies: - '@unocss/webpack': 0.55.7 + '@unocss/webpack': 0.57.1 vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 peerDependenciesMeta: '@unocss/webpack': @@ -15796,34 +15638,34 @@ packages: vite: optional: true dependencies: - '@unocss/astro': 0.55.7(rollup@2.79.1)(vite@4.5.0) - '@unocss/cli': 0.55.7(rollup@2.79.1) - '@unocss/core': 0.55.7 - '@unocss/extractor-arbitrary-variants': 0.55.7 - '@unocss/postcss': 0.55.7(postcss@8.4.31) - '@unocss/preset-attributify': 0.55.7 - '@unocss/preset-icons': 0.55.7 - '@unocss/preset-mini': 0.55.7 - '@unocss/preset-tagify': 0.55.7 - '@unocss/preset-typography': 0.55.7 - '@unocss/preset-uno': 0.55.7 - '@unocss/preset-web-fonts': 0.55.7 - '@unocss/preset-wind': 0.55.7 - '@unocss/reset': 0.55.7 - '@unocss/transformer-attributify-jsx': 0.55.7 - '@unocss/transformer-attributify-jsx-babel': 0.55.7 - '@unocss/transformer-compile-class': 0.55.7 - '@unocss/transformer-directives': 0.55.7 - '@unocss/transformer-variant-group': 0.55.7 - '@unocss/vite': 0.55.7(rollup@2.79.1)(vite@4.5.0) - vite: 4.5.0(@types/node@18.17.5) + '@unocss/astro': 0.57.1(rollup@2.79.1)(vite@4.4.9) + '@unocss/cli': 0.57.1(rollup@2.79.1) + '@unocss/core': 0.57.1 + '@unocss/extractor-arbitrary-variants': 0.57.1 + '@unocss/postcss': 0.57.1(postcss@8.4.31) + '@unocss/preset-attributify': 0.57.1 + '@unocss/preset-icons': 0.57.1 + '@unocss/preset-mini': 0.57.1 + '@unocss/preset-tagify': 0.57.1 + '@unocss/preset-typography': 0.57.1 + '@unocss/preset-uno': 0.57.1 + '@unocss/preset-web-fonts': 0.57.1 + '@unocss/preset-wind': 0.57.1 + '@unocss/reset': 0.57.1 + '@unocss/transformer-attributify-jsx': 0.57.1 + '@unocss/transformer-attributify-jsx-babel': 0.57.1 + '@unocss/transformer-compile-class': 0.57.1 + '@unocss/transformer-directives': 0.57.1 + '@unocss/transformer-variant-group': 0.57.1 + '@unocss/vite': 0.57.1(rollup@2.79.1)(vite@4.4.9) + vite: 4.4.9(@types/node@18.17.5) transitivePeerDependencies: - postcss - rollup - supports-color dev: true - /unocss@0.57.1(postcss@8.4.31)(rollup@2.79.1)(vite@4.4.9): + /unocss@0.57.1(postcss@8.4.31)(rollup@2.79.1)(vite@4.5.0): resolution: {integrity: sha512-xLsyJ8+T1/Ux93yrqOvuQy268wF5rSzydlsbqZ5EVfi01PxYyydez3nycPqbyPZientkJ0Yohzd5aBqmZgku3A==} engines: {node: '>=14'} peerDependencies: @@ -15835,7 +15677,7 @@ packages: vite: optional: true dependencies: - '@unocss/astro': 0.57.1(rollup@2.79.1)(vite@4.4.9) + '@unocss/astro': 0.57.1(rollup@2.79.1)(vite@4.5.0) '@unocss/cli': 0.57.1(rollup@2.79.1) '@unocss/core': 0.57.1 '@unocss/extractor-arbitrary-variants': 0.57.1 @@ -15854,8 +15696,8 @@ packages: '@unocss/transformer-compile-class': 0.57.1 '@unocss/transformer-directives': 0.57.1 '@unocss/transformer-variant-group': 0.57.1 - '@unocss/vite': 0.57.1(rollup@2.79.1)(vite@4.4.9) - vite: 4.4.9(@types/node@18.17.5) + '@unocss/vite': 0.57.1(rollup@2.79.1)(vite@4.5.0) + vite: 4.5.0(@types/node@18.17.5) transitivePeerDependencies: - postcss - rollup @@ -16237,49 +16079,6 @@ packages: - terser dev: true - /vitepress@1.0.0-rc.12(@algolia/client-search@4.19.1)(@types/node@18.17.5)(search-insights@2.7.0)(typescript@5.1.6): - resolution: {integrity: sha512-mZknN5l9lgbBjXwumwdOQQDM+gPivswFEykEQeenY0tv7eocS+bb801IpFZT3mFV6YRhSddmbutHlFgPPADjEg==} - hasBin: true - dependencies: - '@docsearch/css': 3.5.2 - '@docsearch/js': 3.5.2(@algolia/client-search@4.19.1)(search-insights@2.7.0) - '@vue/devtools-api': 6.5.1 - '@vueuse/core': 10.5.0(vue@3.3.7) - '@vueuse/integrations': 10.5.0(focus-trap@7.5.4)(vue@3.3.7) - focus-trap: 7.5.4 - mark.js: 8.11.1 - minisearch: 6.1.0 - shiki: 0.14.5 - vite: 4.5.0(@types/node@18.17.5) - vue: 3.3.7(typescript@5.1.6) - transitivePeerDependencies: - - '@algolia/client-search' - - '@types/node' - - '@types/react' - - '@vue/composition-api' - - async-validator - - axios - - change-case - - drauu - - fuse.js - - idb-keyval - - jwt-decode - - less - - lightningcss - - nprogress - - qrcode - - react - - react-dom - - sass - - search-insights - - sortablejs - - stylus - - sugarss - - terser - - typescript - - universal-cookie - dev: true - /vitepress@1.0.0-rc.25(@algolia/client-search@4.19.1)(@types/node@18.17.5)(postcss@8.4.31)(search-insights@2.7.0)(typescript@5.1.6): resolution: {integrity: sha512-1dqWiHNThNrVZ08ixmfEDBEH+764KOgnev9oXga/x6cN++Vb9pnuu8p3K6DQP+KZrYcG+WiX7jxal0iSNpAWuQ==} hasBin: true From 480645d22f7e8cdbb3a399636d3cc5537fd4d804 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Wed, 15 Nov 2023 12:26:24 +0530 Subject: [PATCH 24/35] fix: Add language to codeblock --- docs/syntax/packet.md | 10 ++++++---- packages/mermaid/src/docs/syntax/packet.md | 2 +- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/docs/syntax/packet.md b/docs/syntax/packet.md index 1792daf4c24..5cd0b5638a1 100644 --- a/docs/syntax/packet.md +++ b/docs/syntax/packet.md @@ -16,10 +16,12 @@ This diagram type is particularly useful for network engineers, educators, and s ## Syntax - packet-beta - start: "Block name" %% Single-bit block - start-end: "Block name" %% Multi-bit blocks - ... More Fields ... +```md +packet-beta +start: "Block name" %% Single-bit block +start-end: "Block name" %% Multi-bit blocks +... More Fields ... +``` ## Examples diff --git a/packages/mermaid/src/docs/syntax/packet.md b/packages/mermaid/src/docs/syntax/packet.md index 99e449e6b10..b509cf130f2 100644 --- a/packages/mermaid/src/docs/syntax/packet.md +++ b/packages/mermaid/src/docs/syntax/packet.md @@ -10,7 +10,7 @@ This diagram type is particularly useful for network engineers, educators, and s ## Syntax -``` +```md packet-beta start: "Block name" %% Single-bit block start-end: "Block name" %% Multi-bit blocks From a8105f084ef06f7ebcbb856b428673384053022a Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 16 Nov 2023 10:42:41 +0530 Subject: [PATCH 25/35] fix: Use configureSvgSize Co-authored-by: Reda Al Sulais --- packages/mermaid/src/diagrams/packet/renderer.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/mermaid/src/diagrams/packet/renderer.ts b/packages/mermaid/src/diagrams/packet/renderer.ts index 27f20cc0da4..84feb8c4395 100644 --- a/packages/mermaid/src/diagrams/packet/renderer.ts +++ b/packages/mermaid/src/diagrams/packet/renderer.ts @@ -2,6 +2,7 @@ import type { Diagram } from '../../Diagram.js'; import type { PacketDiagramConfig } from '../../config.type.js'; import type { DiagramRenderer, DrawDefinition, Group, SVG } from '../../diagram-api/types.js'; import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; +import { configureSvgSize } from '../../setupGraphViewbox.js'; import type { PacketDB, PacketWord } from './types.js'; // eslint-disable-next-line @typescript-eslint/no-unused-vars @@ -16,11 +17,11 @@ const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => { const svgWidth = bitWidth * bitsPerRow + 2; const svg: SVG = selectSvgElement(id); - svg.attr('width', '100%'); svg.attr('viewbox', `0 0 ${svgWidth} ${svgHeight}`); + configureSvgSize(svg, svgHeight, svgWidth, config.useMaxWidth); - for (const [row, packet] of words.entries()) { - drawWord(svg, packet, row, config); + for (const [word, packet] of words.entries()) { + drawWord(svg, packet, word, config); } svg From bca645f63dbda0993b6792b0014ecbe56e39f10a Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 16 Nov 2023 10:48:25 +0530 Subject: [PATCH 26/35] test: Add packet and xychart into mermaidAPI test --- packages/mermaid/src/mermaidAPI.spec.ts | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/packages/mermaid/src/mermaidAPI.spec.ts b/packages/mermaid/src/mermaidAPI.spec.ts index 4a64e9c03f0..c4db60fffa8 100644 --- a/packages/mermaid/src/mermaidAPI.spec.ts +++ b/packages/mermaid/src/mermaidAPI.spec.ts @@ -1,4 +1,3 @@ -'use strict'; import { vi } from 'vitest'; // ------------------------------------- @@ -27,26 +26,26 @@ vi.mock('./diagrams/git/gitGraphRenderer.js'); vi.mock('./diagrams/gantt/ganttRenderer.js'); vi.mock('./diagrams/user-journey/journeyRenderer.js'); vi.mock('./diagrams/pie/pieRenderer.js'); +vi.mock('./diagrams/packet/renderer.js'); +vi.mock('./diagrams/xychart/xychartRenderer.js'); vi.mock('./diagrams/requirement/requirementRenderer.js'); vi.mock('./diagrams/sequence/sequenceRenderer.js'); vi.mock('./diagrams/state/stateRenderer-v2.js'); // ------------------------------------- -import mermaid from './mermaid.js'; +import assignWithDepth from './assignWithDepth.js'; import type { MermaidConfig } from './config.type.js'; - -import mermaidAPI, { removeExistingElements } from './mermaidAPI.js'; -import { - createCssStyles, - createUserStyles, +import mermaid from './mermaid.js'; +import mermaidAPI, { appendDivSvgG, cleanUpSvgCode, + createCssStyles, + createUserStyles, putIntoIFrame, + removeExistingElements, } from './mermaidAPI.js'; -import assignWithDepth from './assignWithDepth.js'; - // -------------- // Mocks // To mock a module, first define a mock for it, then (if used explicitly in the tests) import it. Be sure the path points to exactly the same file as is imported in mermaidAPI (the module being tested) @@ -56,6 +55,7 @@ vi.mock('./styles.js', () => { default: vi.fn().mockReturnValue(' .userStyle { font-weight:bold; }'), }; }); + import getStyles from './styles.js'; vi.mock('stylis', () => { @@ -65,6 +65,7 @@ vi.mock('stylis', () => { serialize: vi.fn().mockReturnValue('stylis serialized css'), }; }); + import { compile, serialize } from 'stylis'; import { decodeEntities, encodeEntities } from './utils.js'; @@ -714,6 +715,8 @@ describe('mermaidAPI', () => { { textDiagramType: 'gantt', expectedType: 'gantt' }, { textDiagramType: 'journey', expectedType: 'journey' }, { textDiagramType: 'pie', expectedType: 'pie' }, + { textDiagramType: 'packet-beta', expectedType: 'packet' }, + { textDiagramType: 'xychart-beta', expectedType: 'xychart' }, { textDiagramType: 'requirementDiagram', expectedType: 'requirement' }, { textDiagramType: 'sequenceDiagram', expectedType: 'sequence' }, { textDiagramType: 'stateDiagram-v2', expectedType: 'stateDiagram' }, From 96ae4a596776092dadd4f018f3673008270a4671 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 16 Nov 2023 10:49:26 +0530 Subject: [PATCH 27/35] chore: Remove unnecessary(?) mocks. --- __mocks__/c4Renderer.js | 21 --------------------- __mocks__/classRenderer-v2.js | 16 ---------------- __mocks__/classRenderer.js | 13 ------------- __mocks__/dagre-d3.ts | 1 - __mocks__/entity-decode/browser.ts | 3 --- __mocks__/erRenderer.js | 16 ---------------- __mocks__/flowRenderer-v2.js | 24 ------------------------ __mocks__/ganttRenderer.js | 16 ---------------- __mocks__/gitGraphRenderer.js | 13 ------------- __mocks__/journeyRenderer.js | 15 --------------- __mocks__/pieRenderer.ts | 8 -------- __mocks__/requirementRenderer.js | 13 ------------- __mocks__/sankeyRenderer.js | 13 ------------- __mocks__/sequenceRenderer.js | 23 ----------------------- __mocks__/stateRenderer-v2.js | 22 ---------------------- 15 files changed, 217 deletions(-) delete mode 100644 __mocks__/c4Renderer.js delete mode 100644 __mocks__/classRenderer-v2.js delete mode 100644 __mocks__/classRenderer.js delete mode 100644 __mocks__/dagre-d3.ts delete mode 100644 __mocks__/entity-decode/browser.ts delete mode 100644 __mocks__/erRenderer.js delete mode 100644 __mocks__/flowRenderer-v2.js delete mode 100644 __mocks__/ganttRenderer.js delete mode 100644 __mocks__/gitGraphRenderer.js delete mode 100644 __mocks__/journeyRenderer.js delete mode 100644 __mocks__/pieRenderer.ts delete mode 100644 __mocks__/requirementRenderer.js delete mode 100644 __mocks__/sankeyRenderer.js delete mode 100644 __mocks__/sequenceRenderer.js delete mode 100644 __mocks__/stateRenderer-v2.js diff --git a/__mocks__/c4Renderer.js b/__mocks__/c4Renderer.js deleted file mode 100644 index 576d5d8634b..00000000000 --- a/__mocks__/c4Renderer.js +++ /dev/null @@ -1,21 +0,0 @@ -/** - * Mocked C4Context diagram renderer - */ - -import { vi } from 'vitest'; - -export const drawPersonOrSystemArray = vi.fn(); -export const drawBoundary = vi.fn(); - -export const setConf = vi.fn(); - -export const draw = vi.fn().mockImplementation(() => { - return ''; -}); - -export default { - drawPersonOrSystemArray, - drawBoundary, - setConf, - draw, -}; diff --git a/__mocks__/classRenderer-v2.js b/__mocks__/classRenderer-v2.js deleted file mode 100644 index 1ad95806fc6..00000000000 --- a/__mocks__/classRenderer-v2.js +++ /dev/null @@ -1,16 +0,0 @@ -/** - * Mocked class diagram v2 renderer - */ - -import { vi } from 'vitest'; - -export const setConf = vi.fn(); - -export const draw = vi.fn().mockImplementation(() => { - return ''; -}); - -export default { - setConf, - draw, -}; diff --git a/__mocks__/classRenderer.js b/__mocks__/classRenderer.js deleted file mode 100644 index 1c20de4b18d..00000000000 --- a/__mocks__/classRenderer.js +++ /dev/null @@ -1,13 +0,0 @@ -/** - * Mocked class diagram renderer - */ - -import { vi } from 'vitest'; - -export const draw = vi.fn().mockImplementation(() => { - return ''; -}); - -export default { - draw, -}; diff --git a/__mocks__/dagre-d3.ts b/__mocks__/dagre-d3.ts deleted file mode 100644 index bf6d341dc5f..00000000000 --- a/__mocks__/dagre-d3.ts +++ /dev/null @@ -1 +0,0 @@ -// DO NOT delete this file. It is used by vitest to mock the dagre-d3 module. diff --git a/__mocks__/entity-decode/browser.ts b/__mocks__/entity-decode/browser.ts deleted file mode 100644 index bd82d79fd99..00000000000 --- a/__mocks__/entity-decode/browser.ts +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = function (txt: string) { - return txt; -}; diff --git a/__mocks__/erRenderer.js b/__mocks__/erRenderer.js deleted file mode 100644 index 845d641f751..00000000000 --- a/__mocks__/erRenderer.js +++ /dev/null @@ -1,16 +0,0 @@ -/** - * Mocked er diagram renderer - */ - -import { vi } from 'vitest'; - -export const setConf = vi.fn(); - -export const draw = vi.fn().mockImplementation(() => { - return ''; -}); - -export default { - setConf, - draw, -}; diff --git a/__mocks__/flowRenderer-v2.js b/__mocks__/flowRenderer-v2.js deleted file mode 100644 index 89cc86031e3..00000000000 --- a/__mocks__/flowRenderer-v2.js +++ /dev/null @@ -1,24 +0,0 @@ -/** - * Mocked flow (flowchart) diagram v2 renderer - */ - -import { vi } from 'vitest'; - -export const setConf = vi.fn(); -export const addVertices = vi.fn(); -export const addEdges = vi.fn(); -export const getClasses = vi.fn().mockImplementation(() => { - return {}; -}); - -export const draw = vi.fn().mockImplementation(() => { - return ''; -}); - -export default { - setConf, - addVertices, - addEdges, - getClasses, - draw, -}; diff --git a/__mocks__/ganttRenderer.js b/__mocks__/ganttRenderer.js deleted file mode 100644 index 9572498321d..00000000000 --- a/__mocks__/ganttRenderer.js +++ /dev/null @@ -1,16 +0,0 @@ -/** - * Mocked gantt diagram renderer - */ - -import { vi } from 'vitest'; - -export const setConf = vi.fn(); - -export const draw = vi.fn().mockImplementation(() => { - return ''; -}); - -export default { - setConf, - draw, -}; diff --git a/__mocks__/gitGraphRenderer.js b/__mocks__/gitGraphRenderer.js deleted file mode 100644 index 1daa82ca4ca..00000000000 --- a/__mocks__/gitGraphRenderer.js +++ /dev/null @@ -1,13 +0,0 @@ -/** - * Mocked git (graph) diagram renderer - */ - -import { vi } from 'vitest'; - -export const draw = vi.fn().mockImplementation(() => { - return ''; -}); - -export default { - draw, -}; diff --git a/__mocks__/journeyRenderer.js b/__mocks__/journeyRenderer.js deleted file mode 100644 index 2bc77c0b108..00000000000 --- a/__mocks__/journeyRenderer.js +++ /dev/null @@ -1,15 +0,0 @@ -/** - * Mocked pie (picChart) diagram renderer - */ - -import { vi } from 'vitest'; -export const setConf = vi.fn(); - -export const draw = vi.fn().mockImplementation(() => { - return ''; -}); - -export default { - setConf, - draw, -}; diff --git a/__mocks__/pieRenderer.ts b/__mocks__/pieRenderer.ts deleted file mode 100644 index 439800f8c5b..00000000000 --- a/__mocks__/pieRenderer.ts +++ /dev/null @@ -1,8 +0,0 @@ -/** - * Mocked pie (picChart) diagram renderer - */ -import { vi } from 'vitest'; - -const draw = vi.fn().mockImplementation(() => ''); - -export const renderer = { draw }; diff --git a/__mocks__/requirementRenderer.js b/__mocks__/requirementRenderer.js deleted file mode 100644 index 48d8997ac1c..00000000000 --- a/__mocks__/requirementRenderer.js +++ /dev/null @@ -1,13 +0,0 @@ -/** - * Mocked requirement diagram renderer - */ - -import { vi } from 'vitest'; - -export const draw = vi.fn().mockImplementation(() => { - return ''; -}); - -export default { - draw, -}; diff --git a/__mocks__/sankeyRenderer.js b/__mocks__/sankeyRenderer.js deleted file mode 100644 index 76324c93f1e..00000000000 --- a/__mocks__/sankeyRenderer.js +++ /dev/null @@ -1,13 +0,0 @@ -/** - * Mocked Sankey diagram renderer - */ - -import { vi } from 'vitest'; - -export const draw = vi.fn().mockImplementation(() => { - return ''; -}); - -export default { - draw, -}; diff --git a/__mocks__/sequenceRenderer.js b/__mocks__/sequenceRenderer.js deleted file mode 100644 index 11080c6bbf3..00000000000 --- a/__mocks__/sequenceRenderer.js +++ /dev/null @@ -1,23 +0,0 @@ -/** - * Mocked sequence diagram renderer - */ - -import { vi } from 'vitest'; - -export const bounds = vi.fn(); -export const drawActors = vi.fn(); -export const drawActorsPopup = vi.fn(); - -export const setConf = vi.fn(); - -export const draw = vi.fn().mockImplementation(() => { - return ''; -}); - -export default { - bounds, - drawActors, - drawActorsPopup, - setConf, - draw, -}; diff --git a/__mocks__/stateRenderer-v2.js b/__mocks__/stateRenderer-v2.js deleted file mode 100644 index a2d103b50ec..00000000000 --- a/__mocks__/stateRenderer-v2.js +++ /dev/null @@ -1,22 +0,0 @@ -/** - * Mocked state diagram v2 renderer - */ - -import { vi } from 'vitest'; - -export const setConf = vi.fn(); -export const getClasses = vi.fn().mockImplementation(() => { - return {}; -}); -export const stateDomId = vi.fn().mockImplementation(() => { - return 'mocked-stateDiagram-stateDomId'; -}); -export const draw = vi.fn().mockImplementation(() => { - return ''; -}); - -export default { - setConf, - getClasses, - draw, -}; From 7ef61d58fd736964c56ffd808cf369e297ee0193 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 16 Nov 2023 10:58:25 +0530 Subject: [PATCH 28/35] test: Add packet test for title, accTitle, accDescr --- packages/mermaid/src/diagrams/packet/packet.spec.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagrams/packet/packet.spec.ts b/packages/mermaid/src/diagrams/packet/packet.spec.ts index 6ad24b75e9d..87432f4891d 100644 --- a/packages/mermaid/src/diagrams/packet/packet.spec.ts +++ b/packages/mermaid/src/diagrams/packet/packet.spec.ts @@ -1,7 +1,7 @@ import { db } from './db.js'; import { parser } from './parser.js'; -const { clear, getPacket } = db; +const { clear, getPacket, getDiagramTitle, getAccTitle, getAccDescription } = db; describe('packet diagrams', () => { beforeEach(() => { @@ -16,13 +16,19 @@ describe('packet diagrams', () => { expect(getPacket()).toMatchInlineSnapshot('[]'); }); - it('should handle diagram with data', () => { + it('should handle diagram with data and title', () => { const str = `packet-beta + title Packet diagram + accTitle: Packet accTitle + accDescr: Packet accDescription 0-10: "test" `; expect(() => { parser.parse(str); }).not.toThrow(); + expect(getDiagramTitle()).toMatchInlineSnapshot('"Packet diagram"'); + expect(getAccTitle()).toMatchInlineSnapshot('"Packet accTitle"'); + expect(getAccDescription()).toMatchInlineSnapshot('"Packet accDescription"'); expect(getPacket()).toMatchInlineSnapshot(` [ [ From 31e19a04346bff441f5b66422ca4c35891b15f99 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 23 Jan 2024 20:28:11 +0530 Subject: [PATCH 29/35] Fix applitools --- applitools.config.js | 19 ------------------- cypress.config.cjs | 32 -------------------------------- cypress.config.ts | 30 ++++++++++++++++++++++++++++++ 3 files changed, 30 insertions(+), 51 deletions(-) delete mode 100644 applitools.config.js delete mode 100644 cypress.config.cjs create mode 100644 cypress.config.ts diff --git a/applitools.config.js b/applitools.config.js deleted file mode 100644 index 4cf02220ac6..00000000000 --- a/applitools.config.js +++ /dev/null @@ -1,19 +0,0 @@ -// eslint-disable-next-line @typescript-eslint/no-var-requires -const { defineConfig } = require('cypress'); - -module.exports = defineConfig({ - testConcurrency: 1, - browser: [ - // Add browsers with different viewports - // { width: 800, height: 600, name: 'chrome' }, - // { width: 700, height: 500, name: 'firefox' }, - // { width: 1600, height: 1200, name: 'ie11' }, - // { width: 1024, height: 768, name: 'edgechromium' }, - // { width: 800, height: 600, name: 'safari' }, - // // Add mobile emulation devices in Portrait mode - // { deviceName: 'iPhone X', screenOrientation: 'portrait' }, - // { deviceName: 'Pixel 2', screenOrientation: 'portrait' }, - ], - // set batch name to the configuration - // batchName: `Mermaid ${process.env.APPLI_BRANCH ?? "'no APPLI_BRANCH set'"}`, -}); diff --git a/cypress.config.cjs b/cypress.config.cjs deleted file mode 100644 index 33633920acb..00000000000 --- a/cypress.config.cjs +++ /dev/null @@ -1,32 +0,0 @@ -/* eslint-disable @typescript-eslint/no-var-requires */ - -const { defineConfig } = require('cypress'); -const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin'); -const coverage = require('@cypress/code-coverage/task'); - -module.exports = defineConfig({ - projectId: 'n2sma2', - viewportWidth: 1440, - viewportHeight: 1024, - e2e: { - specPattern: 'cypress/integration/**/*.{js,ts}', - setupNodeEvents(on, config) { - coverage(on, config); - on('before:browser:launch', (browser = {}, launchOptions) => { - if (browser.name === 'chrome' && browser.isHeadless) { - launchOptions.args.push('--window-size=1440,1024', '--force-device-scale-factor=1'); - } - return launchOptions; - }); - addMatchImageSnapshotPlugin(on, config); - // copy any needed variables from process.env to config.env - config.env.useAppli = process.env.USE_APPLI ? true : false; - - // do not forget to return the changed config object! - return config; - }, - }, - video: false, -}); - -require('@applitools/eyes-cypress')(module); diff --git a/cypress.config.ts b/cypress.config.ts new file mode 100644 index 00000000000..4182d92a87f --- /dev/null +++ b/cypress.config.ts @@ -0,0 +1,30 @@ +import { defineConfig } from 'cypress'; +import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin'; +import coverage from '@cypress/code-coverage/task'; +import eyesPlugin from '@applitools/eyes-cypress'; +export default eyesPlugin( + defineConfig({ + projectId: 'n2sma2', + viewportWidth: 1440, + viewportHeight: 1024, + e2e: { + specPattern: 'cypress/integration/**/*.{js,ts}', + setupNodeEvents(on, config) { + coverage(on, config); + on('before:browser:launch', (browser, launchOptions) => { + if (browser.name === 'chrome' && browser.isHeadless) { + launchOptions.args.push('--window-size=1440,1024', '--force-device-scale-factor=1'); + } + return launchOptions; + }); + addMatchImageSnapshotPlugin(on, config); + // copy any needed variables from process.env to config.env + config.env.useAppli = process.env.USE_APPLI ? true : false; + + // do not forget to return the changed config object! + return config; + }, + }, + video: false, + }) +); From 493f238319ffcebc10570a390d2bbacc121eb715 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 23 Jan 2024 20:28:11 +0530 Subject: [PATCH 30/35] Fix applitools --- applitools.config.js | 19 ------------------- cypress.config.cjs | 32 -------------------------------- cypress.config.ts | 30 ++++++++++++++++++++++++++++++ 3 files changed, 30 insertions(+), 51 deletions(-) delete mode 100644 applitools.config.js delete mode 100644 cypress.config.cjs create mode 100644 cypress.config.ts diff --git a/applitools.config.js b/applitools.config.js deleted file mode 100644 index 4cf02220ac6..00000000000 --- a/applitools.config.js +++ /dev/null @@ -1,19 +0,0 @@ -// eslint-disable-next-line @typescript-eslint/no-var-requires -const { defineConfig } = require('cypress'); - -module.exports = defineConfig({ - testConcurrency: 1, - browser: [ - // Add browsers with different viewports - // { width: 800, height: 600, name: 'chrome' }, - // { width: 700, height: 500, name: 'firefox' }, - // { width: 1600, height: 1200, name: 'ie11' }, - // { width: 1024, height: 768, name: 'edgechromium' }, - // { width: 800, height: 600, name: 'safari' }, - // // Add mobile emulation devices in Portrait mode - // { deviceName: 'iPhone X', screenOrientation: 'portrait' }, - // { deviceName: 'Pixel 2', screenOrientation: 'portrait' }, - ], - // set batch name to the configuration - // batchName: `Mermaid ${process.env.APPLI_BRANCH ?? "'no APPLI_BRANCH set'"}`, -}); diff --git a/cypress.config.cjs b/cypress.config.cjs deleted file mode 100644 index 33633920acb..00000000000 --- a/cypress.config.cjs +++ /dev/null @@ -1,32 +0,0 @@ -/* eslint-disable @typescript-eslint/no-var-requires */ - -const { defineConfig } = require('cypress'); -const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin'); -const coverage = require('@cypress/code-coverage/task'); - -module.exports = defineConfig({ - projectId: 'n2sma2', - viewportWidth: 1440, - viewportHeight: 1024, - e2e: { - specPattern: 'cypress/integration/**/*.{js,ts}', - setupNodeEvents(on, config) { - coverage(on, config); - on('before:browser:launch', (browser = {}, launchOptions) => { - if (browser.name === 'chrome' && browser.isHeadless) { - launchOptions.args.push('--window-size=1440,1024', '--force-device-scale-factor=1'); - } - return launchOptions; - }); - addMatchImageSnapshotPlugin(on, config); - // copy any needed variables from process.env to config.env - config.env.useAppli = process.env.USE_APPLI ? true : false; - - // do not forget to return the changed config object! - return config; - }, - }, - video: false, -}); - -require('@applitools/eyes-cypress')(module); diff --git a/cypress.config.ts b/cypress.config.ts new file mode 100644 index 00000000000..4182d92a87f --- /dev/null +++ b/cypress.config.ts @@ -0,0 +1,30 @@ +import { defineConfig } from 'cypress'; +import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin'; +import coverage from '@cypress/code-coverage/task'; +import eyesPlugin from '@applitools/eyes-cypress'; +export default eyesPlugin( + defineConfig({ + projectId: 'n2sma2', + viewportWidth: 1440, + viewportHeight: 1024, + e2e: { + specPattern: 'cypress/integration/**/*.{js,ts}', + setupNodeEvents(on, config) { + coverage(on, config); + on('before:browser:launch', (browser, launchOptions) => { + if (browser.name === 'chrome' && browser.isHeadless) { + launchOptions.args.push('--window-size=1440,1024', '--force-device-scale-factor=1'); + } + return launchOptions; + }); + addMatchImageSnapshotPlugin(on, config); + // copy any needed variables from process.env to config.env + config.env.useAppli = process.env.USE_APPLI ? true : false; + + // do not forget to return the changed config object! + return config; + }, + }, + video: false, + }) +); From 5c6c8d113562ea99e3d8445310a42fc3134610c7 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 23 Jan 2024 20:36:29 +0530 Subject: [PATCH 31/35] Update cypress --- package.json | 6 +- pnpm-lock.yaml | 501 +++++++++++++++++-------------------------------- 2 files changed, 170 insertions(+), 337 deletions(-) diff --git a/package.json b/package.json index a60f6f67f07..441484218de 100644 --- a/package.json +++ b/package.json @@ -61,11 +61,11 @@ ] }, "devDependencies": { - "@applitools/eyes-cypress": "^3.33.1", + "@applitools/eyes-cypress": "^3.40.6", "@commitlint/cli": "^17.6.1", "@commitlint/config-conventional": "^17.6.1", "@cspell/eslint-plugin": "^6.31.1", - "@cypress/code-coverage": "^3.10.7", + "@cypress/code-coverage": "^3.12.18", "@rollup/plugin-typescript": "^11.1.1", "@types/cors": "^2.8.13", "@types/eslint": "^8.37.0", @@ -85,7 +85,7 @@ "ajv": "^8.12.0", "concurrently": "^8.0.1", "cors": "^2.8.5", - "cypress": "^12.10.0", + "cypress": "^12.17.4", "cypress-image-snapshot": "^4.0.1", "esbuild": "^0.19.0", "eslint": "^8.47.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2484f63123e..5d950edefcf 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -9,8 +9,8 @@ importers: .: devDependencies: '@applitools/eyes-cypress': - specifier: ^3.33.1 - version: 3.36.2(typescript@5.1.6) + specifier: ^3.40.6 + version: 3.40.6(typescript@5.1.6) '@commitlint/cli': specifier: ^17.6.1 version: 17.7.1 @@ -21,8 +21,8 @@ importers: specifier: ^6.31.1 version: 6.31.3 '@cypress/code-coverage': - specifier: ^3.10.7 - version: 3.11.0(@babel/core@7.23.5)(@babel/preset-env@7.22.10)(babel-loader@9.1.3)(cypress@12.17.3)(webpack@5.88.2) + specifier: ^3.12.18 + version: 3.12.18(@babel/core@7.23.5)(@babel/preset-env@7.22.10)(babel-loader@9.1.3)(cypress@12.17.4)(webpack@5.88.2) '@rollup/plugin-typescript': specifier: ^11.1.1 version: 11.1.2(typescript@5.1.6) @@ -81,11 +81,11 @@ importers: specifier: ^2.8.5 version: 2.8.5 cypress: - specifier: ^12.10.0 - version: 12.17.3 + specifier: ^12.17.4 + version: 12.17.4 cypress-image-snapshot: specifier: ^4.0.1 - version: 4.0.1(cypress@12.17.3)(jest@29.6.2) + version: 4.0.1(cypress@12.17.4)(jest@29.6.2) esbuild: specifier: ^0.19.0 version: 0.19.0 @@ -714,110 +714,105 @@ packages: leven: 3.1.0 dev: true - /@applitools/core-base@1.5.0: - resolution: {integrity: sha512-fYK8a4GH0oTmdYYGx8rYCWjl6VH6Mt4iAukhOU6l502rBYAF8mChmwyTxXu8t6oh6ejX3YQ2I+WcAf2q9XIYvg==} + /@applitools/core-base@1.9.0: + resolution: {integrity: sha512-vicerOYUzDycn0Bf41FmLvGPBwuiTHP5EW7LqQowa38DAgXZLljoLo0IS68HV22HlMHHbzoRglMK3CPAGuNaqA==} engines: {node: '>=12.13.0'} dependencies: - '@applitools/image': 1.1.2 - '@applitools/logger': 2.0.7 - '@applitools/req': 1.5.2 - '@applitools/utils': 1.5.0 + '@applitools/image': 1.1.9 + '@applitools/logger': 2.0.14 + '@applitools/req': 1.6.4 + '@applitools/utils': 1.7.0 abort-controller: 3.0.0 throat: 6.0.2 transitivePeerDependencies: - supports-color dev: true - /@applitools/core@3.9.0(typescript@5.1.6): - resolution: {integrity: sha512-fKea8ew6iyLhZskUtngcyCdlJ59Nrb+8R9fU6Y6fXT0xMBQESkU1r9Z+Dt3XUL/CzRE9NW4DWenhd52EFApxYg==} + /@applitools/core@4.6.0(typescript@5.1.6): + resolution: {integrity: sha512-YLxg4TnIEdYPTOQpeqCbjUKfJBDfjKqwieMVnLKp7Loxwvfh16C4SvsCzLSLHyqfPgsE+zRdt6uoIK0uVWM94g==} engines: {node: '>=12.13.0'} hasBin: true dependencies: - '@applitools/core-base': 1.5.0 - '@applitools/dom-capture': 11.2.2 - '@applitools/dom-snapshot': 4.7.10 - '@applitools/driver': 1.13.4 - '@applitools/ec-client': 1.7.4(typescript@5.1.6) - '@applitools/logger': 2.0.7 - '@applitools/nml-client': 1.5.7 - '@applitools/req': 1.5.2 - '@applitools/screenshoter': 3.8.7 - '@applitools/snippets': 2.4.22 - '@applitools/socket': 1.1.7 - '@applitools/spec-driver-webdriver': 1.0.41(webdriver@7.30.0) - '@applitools/ufg-client': 1.7.0 - '@applitools/utils': 1.5.0 + '@applitools/core-base': 1.9.0 + '@applitools/dom-capture': 11.2.5 + '@applitools/dom-snapshot': 4.7.16 + '@applitools/driver': 1.16.1 + '@applitools/ec-client': 1.7.22(typescript@5.1.6) + '@applitools/logger': 2.0.14 + '@applitools/nml-client': 1.6.4 + '@applitools/req': 1.6.4 + '@applitools/screenshoter': 3.8.20 + '@applitools/snippets': 2.4.24 + '@applitools/socket': 1.1.14 + '@applitools/spec-driver-webdriver': 1.0.54(webdriver@7.31.1) + '@applitools/ufg-client': 1.9.9 + '@applitools/utils': 1.7.0 '@types/ws': 8.5.5 abort-controller: 3.0.0 chalk: 4.1.2 node-fetch: 2.6.7 - webdriver: 7.30.0(typescript@5.1.6) + semver: 7.5.4 + webdriver: 7.31.1(typescript@5.1.6) ws: 8.13.0 yargs: 17.7.2 transitivePeerDependencies: - bufferutil - - canvas - encoding - supports-color - typescript - utf-8-validate dev: true - /@applitools/dom-capture@11.2.2: - resolution: {integrity: sha512-omSH+c8+ij/mUPKVwRp7ulCOz33EHMnG8Q3s7XuwaB9m04onEAg82/25otOrntqMKmO2doGWN3E97qUstZJiPQ==} - engines: {node: '>=8.9.0'} + /@applitools/dom-capture@11.2.5: + resolution: {integrity: sha512-bjVduGCBOdDyGSkXs8sH47wRpuwBt6f1FvzbATumIFp0V6xGAB1ehpO+j3Ss1SajwlDl8WQkyS6/85nTFyW3eA==} + engines: {node: '>=12.13.0'} dependencies: - '@applitools/dom-shared': 1.0.5 + '@applitools/dom-shared': 1.0.12 '@applitools/functional-commons': 1.6.0 dev: true - /@applitools/dom-shared@1.0.10: - resolution: {integrity: sha512-1k0CUQRm+38n6aTg/8IIppndYPDJLc/dU8Regbi/miP3xZmOG4Wwd5fBiu/MI5lgQm6RZU+at18lpCLFwU+Nng==} - engines: {node: '>=8.9.0'} - dev: true - - /@applitools/dom-shared@1.0.5: - resolution: {integrity: sha512-O2zgnnqVi3/Atq7EQjURLa73XNaDFJCj8wHht6WQtxIv1EWYnPutNTmnJSKwK7FnbJAg65OVjZylcz4EezyYZA==} - engines: {node: '>=8.9.0'} + /@applitools/dom-shared@1.0.12: + resolution: {integrity: sha512-GFyVHOUFjaS2WhUPjaELn1yBAK9hmRqv031RRQjYkf+3aD9GfzKHj/ZUVcSsZydid+0VAtHVQFwZGH79bGhd7w==} + engines: {node: '>=12.13.0'} dev: true - /@applitools/dom-snapshot@4.7.10: - resolution: {integrity: sha512-QhX0p6irvQE48eeauNHIfEm76L8QY8mDO8Tk4YOzzBRKcGpKphQUR/5GRCR9S3jx5wwJAwjF/aMW/W7Cwdaztw==} - engines: {node: '>=8.9.0'} + /@applitools/dom-snapshot@4.7.16: + resolution: {integrity: sha512-GXWrMOkpHlnpo0tonhxfmDFOiCaT//ZDexB9vGKLgBBF0QDFpdy9BgvasLvy8I0PuVegXsgJbZS3gS053N7SHQ==} + engines: {node: '>=12.13.0'} dependencies: - '@applitools/dom-shared': 1.0.10 + '@applitools/dom-shared': 1.0.12 '@applitools/functional-commons': 1.6.0 css-tree: 2.3.1 pako: 1.0.11 dev: true - /@applitools/driver@1.13.4: - resolution: {integrity: sha512-LdATkjMoTZKUDHmuIfV0uh0ZiRe+yNNIehTqmjV6LnQrNvm73ddzF2Tn+LM8Vg/CflwFhw+TVKPaywTmi35wUg==} + /@applitools/driver@1.16.1: + resolution: {integrity: sha512-DfSbcKopOIPl1Wfet3Uib2bDSl64Wh51772MPM7A/xrwJrLOY5NvfT71PqMIQd4eZAd6k5hRg5gbGL5zTzktLQ==} engines: {node: '>=12.13.0'} dependencies: - '@applitools/logger': 2.0.7 - '@applitools/snippets': 2.4.22 - '@applitools/utils': 1.5.0 + '@applitools/logger': 2.0.14 + '@applitools/snippets': 2.4.24 + '@applitools/utils': 1.7.0 semver: 7.5.4 transitivePeerDependencies: - supports-color dev: true - /@applitools/ec-client@1.7.4(typescript@5.1.6): - resolution: {integrity: sha512-vFY5O9WXQ905hUcw4ot1BuKAAFq6F+hyQfX/obsQsUPUvJXqHhiFjMiI/x3cyrPr40EVLQM8edZCa71m4k2WyQ==} + /@applitools/ec-client@1.7.22(typescript@5.1.6): + resolution: {integrity: sha512-zhkYIW8bUpwc+TmvQyxL12kIt2TnAwB30XHke1ApmcPxGk9P8lfjm/AzwnKHqDBJxN2V/TSUfuRvseZq5b4TRA==} engines: {node: '>=12.13.0'} hasBin: true dependencies: - '@applitools/core-base': 1.5.0 - '@applitools/driver': 1.13.4 - '@applitools/logger': 2.0.7 - '@applitools/req': 1.5.2 - '@applitools/socket': 1.1.7 - '@applitools/spec-driver-webdriver': 1.0.41(webdriver@7.30.0) - '@applitools/tunnel-client': 1.1.3 - '@applitools/utils': 1.5.0 + '@applitools/core-base': 1.9.0 + '@applitools/driver': 1.16.1 + '@applitools/logger': 2.0.14 + '@applitools/req': 1.6.4 + '@applitools/socket': 1.1.14 + '@applitools/spec-driver-webdriver': 1.0.54(webdriver@7.31.1) + '@applitools/tunnel-client': 1.4.0 + '@applitools/utils': 1.7.0 abort-controller: 3.0.0 - webdriver: 7.30.0(typescript@5.1.6) + webdriver: 7.31.1(typescript@5.1.6) yargs: 17.7.2 transitivePeerDependencies: - supports-color @@ -859,40 +854,38 @@ packages: - supports-color dev: true - /@applitools/eyes-cypress@3.36.2(typescript@5.1.6): - resolution: {integrity: sha512-GA1KP7i3Zr7sbc8yscw7fay1XbQ46LxEAH4dLqjJhOmvvpZuDlmgRyVMuvTmobDXKKHtdVpfoXtJQURrxs7fvA==} + /@applitools/eyes-cypress@3.40.6(typescript@5.1.6): + resolution: {integrity: sha512-Klqt3y2U9pl+btLKQJB6e6UtzOv4wdAKxD9V6VCjLF8DqQeBukinAG3kBgpDRQVEVCYMeQXdQZrRTRJvZOkpIg==} engines: {node: '>=12.13.0'} hasBin: true dependencies: - '@applitools/core': 3.9.0(typescript@5.1.6) - '@applitools/eyes': 1.7.2(typescript@5.1.6) + '@applitools/core': 4.6.0(typescript@5.1.6) + '@applitools/eyes': 1.13.5(typescript@5.1.6) '@applitools/functional-commons': 1.6.0 - '@applitools/logger': 2.0.7 - '@applitools/utils': 1.5.0 + '@applitools/logger': 2.0.14 + '@applitools/utils': 1.7.0 boxen: 5.1.2 chalk: 3.0.0 - semver: 7.3.8 + semver: 7.5.4 uuid: 8.3.2 ws: 8.5.0 transitivePeerDependencies: - bufferutil - - canvas - encoding - supports-color - typescript - utf-8-validate dev: true - /@applitools/eyes@1.7.2(typescript@5.1.6): - resolution: {integrity: sha512-RNwPMp19xmQ+oEEZH66wGbnBbOqsrHaLBwnCZ9qJ9294aN4DuYHJNXdzHtLFSwjHNc8UmyDRU2Enn4825hqV6w==} + /@applitools/eyes@1.13.5(typescript@5.1.6): + resolution: {integrity: sha512-FXFH5D78UMcqG0No5FgvISlfGM9DrXTCnRsEXhEw+dbQneG7siKRY6BQci3QDgrh0sI0yfVaZbZrpXIKuDF1ug==} engines: {node: '>=12.13.0'} dependencies: - '@applitools/core': 3.9.0(typescript@5.1.6) - '@applitools/logger': 2.0.7 - '@applitools/utils': 1.5.0 + '@applitools/core': 4.6.0(typescript@5.1.6) + '@applitools/logger': 2.0.14 + '@applitools/utils': 1.7.0 transitivePeerDependencies: - bufferutil - - canvas - encoding - supports-color - typescript @@ -904,11 +897,11 @@ packages: engines: {node: '>=8.0.0'} dev: true - /@applitools/image@1.1.2: - resolution: {integrity: sha512-Cy1oKCB2vIpHT47Y1tictsRS2RLBVI4XzxYWvKnXx+ZsbL364IiDzwWxYKgvA7/6t1Ako648n4+BWKoUi5Ewbg==} + /@applitools/image@1.1.9: + resolution: {integrity: sha512-R86re+yofXSBamTuzSLwFB57fzaf7aiKvyx675uw8e/XfqQy3vhGbp8Bh23lUZX9y7ngf2ldrpnQ7nQrvmtJuA==} engines: {node: '>=12.13.0'} dependencies: - '@applitools/utils': 1.5.0 + '@applitools/utils': 1.7.0 bmpimagejs: 1.0.4 jpeg-js: 0.4.4 omggif: 1.0.10 @@ -926,33 +919,33 @@ packages: - supports-color dev: true - /@applitools/logger@2.0.7: - resolution: {integrity: sha512-dmX2nWWixMYsOdhl1MANv7wr8cKzYUOaHxQp9CdokVbJy+NGwWAzK6qVeKjogn7D6eXHzgn3R3OzplYSq/fK/g==} + /@applitools/logger@2.0.14: + resolution: {integrity: sha512-oq/RPjs/3BjR3EdLohHhzzVufBYEMMhOUmZlCnvgmCJIhUsa3ceq8Ta2E99TUzSny9xkl962JoRDfLQg/vS+Ww==} engines: {node: '>=12.13.0'} dependencies: - '@applitools/utils': 1.5.0 + '@applitools/utils': 1.7.0 chalk: 4.1.2 debug: 4.3.4(supports-color@8.1.1) transitivePeerDependencies: - supports-color dev: true - /@applitools/nml-client@1.5.7: - resolution: {integrity: sha512-jAG2/4JSqX7FSrdyIyjdXcPy2l2/t8KRlw554nL1ABgtqTV8yCI3DxVUk7RCNi39f1uY5pA2pfiZVGFImnSFKg==} + /@applitools/nml-client@1.6.4: + resolution: {integrity: sha512-mbLnwpXbM2MkB+bP9+Hluywi4OAFWDr+FvjHkk/9TcvcM9EYbmD8deGuTC5kFt5WDDS568WQDRj+G2tT1JfLEA==} engines: {node: '>=12.13.0'} dependencies: - '@applitools/logger': 2.0.7 - '@applitools/req': 1.5.2 - '@applitools/utils': 1.5.0 + '@applitools/logger': 2.0.14 + '@applitools/req': 1.6.4 + '@applitools/utils': 1.7.0 transitivePeerDependencies: - supports-color dev: true - /@applitools/req@1.5.2: - resolution: {integrity: sha512-evuikeiCYudhxSQ2kisO7DdywPqshaaN+BiDu4P3eTz5R9VmqhXwWP9bS88G8bzzz0FeNQMY9a7TjQ7d5jMRrA==} - engines: {node: '>=12.13.0'} + /@applitools/req@1.6.4: + resolution: {integrity: sha512-yKTga1QHzIk7ECHgC8JEgYxV91PdIHWRa02ZpsK2FAk6GjTefPK6WZsj1vGKeVi/dGxHuZT8sjvtJHc275osug==} + engines: {node: '>=16.13.0'} dependencies: - '@applitools/utils': 1.5.0 + '@applitools/utils': 1.7.0 abort-controller: 3.0.0 http-proxy-agent: 5.0.0 https-proxy-agent: 5.0.1 @@ -961,81 +954,78 @@ packages: - supports-color dev: true - /@applitools/screenshoter@3.8.7: - resolution: {integrity: sha512-G576fLyTTAJEnhFZBeD57+1JDXGTDcTlrg0n32ujtYTFswUAf5XnXmeO6s2WqeHKQl74e2xwhBmdtU/CrVOkig==} + /@applitools/screenshoter@3.8.20: + resolution: {integrity: sha512-k7t4cdJ5vpgYvsLLrenSvPNkUZ25uUs7Q54X0tGtkgQ/C+pQ8GLaIXQQwyVaEYbnF6WuAnrjTXMpdPJ2uUvpAg==} engines: {node: '>=12.13.0'} dependencies: - '@applitools/image': 1.1.2 - '@applitools/logger': 2.0.7 - '@applitools/snippets': 2.4.22 - '@applitools/utils': 1.5.0 + '@applitools/image': 1.1.9 + '@applitools/logger': 2.0.14 + '@applitools/snippets': 2.4.24 + '@applitools/utils': 1.7.0 transitivePeerDependencies: - supports-color dev: true - /@applitools/snippets@2.4.22: - resolution: {integrity: sha512-bv4GzMf6k4mAyMxo3PVR3HKEPkf4h0O6+xNo6UO78cw+MpkT4Sr7JDk3mLq8H/WRDKk7x4VKpJeoDHd5dBxT3g==} + /@applitools/snippets@2.4.24: + resolution: {integrity: sha512-T/cfYA15K+gR2Xc/cEnn2hR7XBJ9vCcH/Jcp7Hoor14j7nzldR+u69HaQe/sa4ChDU4eZyTiTggek52+MqX7FQ==} engines: {node: '>=12.13.0'} dev: true - /@applitools/socket@1.1.7: - resolution: {integrity: sha512-SpP+Zw5B9VJ3K+xW+wSYDwfrOQ1U9/95h5G3rszKaVleX2FTUW0JgmASuSlwgr7veU3qlcNzt3vas/tQM3/z/g==} + /@applitools/socket@1.1.14: + resolution: {integrity: sha512-o43hNnD/PN5T5MFR3cZ5OC+b5PpkV/PeTk8z844sNtGyziS9GEpO0vYfG2XLq/mZg0YQurrXtYupUMndV+0wDg==} engines: {node: '>=12.13.0'} dependencies: - '@applitools/logger': 2.0.7 - '@applitools/utils': 1.5.0 + '@applitools/logger': 2.0.14 + '@applitools/utils': 1.7.0 transitivePeerDependencies: - supports-color dev: true - /@applitools/spec-driver-webdriver@1.0.41(webdriver@7.30.0): - resolution: {integrity: sha512-0kUHiFmr3FiOlfTnfS1k8pvJXgnEM8bP36teiDJvmAJnk8aJG5nmqaQj1KkeLUVVZ1wfYlg/+iDtGUdP4a4Zxw==} + /@applitools/spec-driver-webdriver@1.0.54(webdriver@7.31.1): + resolution: {integrity: sha512-ZpwUBWu5kUil5E+r+NdhdB8SzWwGv56+sZSGyPlgN0w2krmIudeyBKuJKYMfqdXSu0lATSgKJSCJXmkb/q4DNQ==} engines: {node: '>=12.13.0'} peerDependencies: - webdriver: '>=7.27.0' + webdriver: '>=6.0.0' dependencies: - '@applitools/driver': 1.13.4 - '@applitools/utils': 1.5.0 + '@applitools/driver': 1.16.1 + '@applitools/utils': 1.7.0 http-proxy-agent: 5.0.0 https-proxy-agent: 5.0.1 - webdriver: 7.30.0(typescript@5.1.6) + webdriver: 7.31.1(typescript@5.1.6) transitivePeerDependencies: - supports-color dev: true - /@applitools/tunnel-client@1.1.3: - resolution: {integrity: sha512-xe0HqznqnuhsZYIY//NnjszEkIcYgdZkwVR4GOwzVCOCcxIGoi+kMpDUuC2Xcd8+UiVbfZfZTeo7rXITlzzqAw==} + /@applitools/tunnel-client@1.4.0: + resolution: {integrity: sha512-vgQoEN81Mhqjf74+9JAUvGK8t8Dzm0p8nNrqsqeHekuTva6Jh92sNK40j96z7jrMoSo+JHOeb/7mIOicU9o/0A==} engines: {node: '>=12.13.0'} hasBin: true dependencies: '@applitools/execution-grid-tunnel': 2.1.8 - '@applitools/logger': 2.0.7 - '@applitools/req': 1.5.2 - '@applitools/socket': 1.1.7 - '@applitools/utils': 1.5.0 + '@applitools/logger': 2.0.14 + '@applitools/req': 1.6.4 + '@applitools/socket': 1.1.14 + '@applitools/utils': 1.7.0 abort-controller: 3.0.0 yargs: 17.7.2 transitivePeerDependencies: - supports-color dev: true - /@applitools/ufg-client@1.7.0: - resolution: {integrity: sha512-BMFLuWGq8YVs0/z5VBl8CAKzOMXbagHFxyR4oGdg31nDsuKgKfhlnbGji5qek243ex8vEbEqFwsH2K0ZXYGIeQ==} + /@applitools/ufg-client@1.9.9: + resolution: {integrity: sha512-J/k6C1JYPr4ohcE64AvVHIeTMZ83bXnhuIryxvOWJDSyr6Yh4hvtrbCviUyYMaKj7WCMYeDEESt6auiyBMxVGw==} engines: {node: '>=12.13.0'} dependencies: - '@applitools/image': 1.1.2 - '@applitools/logger': 2.0.7 - '@applitools/req': 1.5.2 - '@applitools/utils': 1.5.0 + '@applitools/image': 1.1.9 + '@applitools/logger': 2.0.14 + '@applitools/req': 1.6.4 + '@applitools/utils': 1.7.0 + '@xmldom/xmldom': 0.8.10 abort-controller: 3.0.0 css-tree: 2.3.1 - jsdom: 19.0.0 throat: 6.0.2 transitivePeerDependencies: - - bufferutil - - canvas - supports-color - - utf-8-validate dev: true /@applitools/utils@1.3.36: @@ -1043,8 +1033,8 @@ packages: engines: {node: '>=12.13.0'} dev: true - /@applitools/utils@1.5.0: - resolution: {integrity: sha512-BZk8YolP0G+/Srjkhf+pFp4zY7bU41L63hDN9gtwrD1xZOfWXJbOCD3gFQAGRB2qsozHMkPNTt+xw7RJjIjGQg==} + /@applitools/utils@1.7.0: + resolution: {integrity: sha512-CvBxdfPZ3ss1hOD8Yr9y2SzVfqLKBA/0N3gfQd5qafMrBhI0wuCycQmiclpAQNEVNkbhqn8/t6dOeeYgapjyDw==} engines: {node: '>=12.13.0'} dev: true @@ -3104,27 +3094,31 @@ packages: dependencies: '@jridgewell/trace-mapping': 0.3.9 - /@cypress/code-coverage@3.11.0(@babel/core@7.23.5)(@babel/preset-env@7.22.10)(babel-loader@9.1.3)(cypress@12.17.3)(webpack@5.88.2): - resolution: {integrity: sha512-ihSO1s03gmLRE224oIjrbdG1ey63vw/UY+VSqQ5m/TKkAvyz6GIiniq6juk3AV/+0vQC1Eb4UWFu8ndtji4M1g==} + /@cypress/code-coverage@3.12.18(@babel/core@7.23.5)(@babel/preset-env@7.22.10)(babel-loader@9.1.3)(cypress@12.17.4)(webpack@5.88.2): + resolution: {integrity: sha512-RTOyCVr5CWaJ7cW1gOvlXSLDr0HNXZ7xSVfLSZEGsTODbaxeUV01Z1k93spnbVT7ri9UkxCEffPcsZsZi1oDng==} peerDependencies: + '@babel/core': ^7.0.1 + '@babel/preset-env': ^7.0.0 + babel-loader: ^8.3 || ^9 cypress: '*' + webpack: ^4 || ^5 dependencies: - '@cypress/webpack-preprocessor': 5.17.1(@babel/core@7.23.5)(@babel/preset-env@7.22.10)(babel-loader@9.1.3)(webpack@5.88.2) + '@babel/core': 7.23.5 + '@babel/preset-env': 7.22.10(@babel/core@7.23.5) + '@cypress/webpack-preprocessor': 6.0.1(@babel/core@7.23.5)(@babel/preset-env@7.22.10)(babel-loader@9.1.3)(webpack@5.88.2) + babel-loader: 9.1.3(@babel/core@7.23.5)(webpack@5.88.2) chalk: 4.1.2 - cypress: 12.17.3 - dayjs: 1.11.9 + cypress: 12.17.4 + dayjs: 1.11.10 debug: 4.3.4(supports-color@8.1.1) execa: 4.1.0 - globby: 11.0.4 - istanbul-lib-coverage: 3.0.0 + globby: 11.1.0 + istanbul-lib-coverage: 3.2.0 js-yaml: 4.1.0 nyc: 15.1.0 + webpack: 5.88.2(esbuild@0.19.0)(webpack-cli@4.10.0) transitivePeerDependencies: - - '@babel/core' - - '@babel/preset-env' - - babel-loader - supports-color - - webpack dev: true /@cypress/request@2.88.12: @@ -3151,12 +3145,12 @@ packages: uuid: 8.3.2 dev: true - /@cypress/webpack-preprocessor@5.17.1(@babel/core@7.23.5)(@babel/preset-env@7.22.10)(babel-loader@9.1.3)(webpack@5.88.2): - resolution: {integrity: sha512-FE/e8ikPc8z4EVopJCaior3RGy0jd2q9Xcp5NtiwNG4XnLfEnUFTZlAGwXe75sEh4fNMPrBJW1KIz77PX5vGAw==} + /@cypress/webpack-preprocessor@6.0.1(@babel/core@7.23.5)(@babel/preset-env@7.22.10)(babel-loader@9.1.3)(webpack@5.88.2): + resolution: {integrity: sha512-WVNeFVSnFKxE3WZNRIriduTgqJRpevaiJIPlfqYTTzfXRD7X1Pv4woDE+G4caPV9bJqVKmVFiwzrXMRNeJxpxA==} peerDependencies: '@babel/core': ^7.0.1 '@babel/preset-env': ^7.0.0 - babel-loader: ^8.0.2 || ^9 + babel-loader: ^8.3 || ^9 webpack: ^4 || ^5 dependencies: '@babel/core': 7.23.5 @@ -4931,6 +4925,13 @@ packages: '@types/node': 18.17.5 dev: true + /@types/glob@8.1.0: + resolution: {integrity: sha512-IO+MJPVhoqz+28h1qLAcBEH2+xHMK6MTyHJc7MTnnYb6wsoLR29POVGJ7LycmVXIqyy/4/2ShP5sUwTXuOwb/w==} + dependencies: + '@types/minimatch': 5.1.2 + '@types/node': 18.17.5 + dev: true + /@types/graceful-fs@4.1.6: resolution: {integrity: sha512-Sig0SNORX9fdW+bQuTEovKj3uHcUL6LQKbCrrqb1X7J6/ReAbhCXRAhc+SMejhLELFj2QcyuxmUooZ4bt5ReSw==} dependencies: @@ -6146,13 +6147,14 @@ packages: - vue dev: true - /@wdio/config@7.30.0(typescript@5.1.6): - resolution: {integrity: sha512-/38rol9WCfFTMtXyd/C856/aexxIZnfVvXg7Fw2WXpqZ9qadLA+R4N35S2703n/RByjK/5XAYtHoljtvh3727w==} + /@wdio/config@7.31.1(typescript@5.1.6): + resolution: {integrity: sha512-WAfswbCatwiaDVqy6kfF/5T8/WS/US/SRhBGUFrfBuGMIe+RRoHgy7jURFWSvUIE7CNHj8yvs46fLUcxhXjzcQ==} engines: {node: '>=12.0.0'} dependencies: + '@types/glob': 8.1.0 '@wdio/logger': 7.26.0 - '@wdio/types': 7.26.0(typescript@5.1.6) - '@wdio/utils': 7.26.0(typescript@5.1.6) + '@wdio/types': 7.30.2(typescript@5.1.6) + '@wdio/utils': 7.30.2(typescript@5.1.6) deepmerge: 4.3.1 glob: 8.1.0 transitivePeerDependencies: @@ -6174,8 +6176,8 @@ packages: engines: {node: '>=12.0.0'} dev: true - /@wdio/types@7.26.0(typescript@5.1.6): - resolution: {integrity: sha512-mOTfWAGQ+iT58iaZhJMwlUkdEn3XEWE4jthysMLXFnSuZ2eaODVAiK31SmlS/eUqgSIaupeGqYUrtCuSNbLefg==} + /@wdio/types@7.30.2(typescript@5.1.6): + resolution: {integrity: sha512-uZ8o7FX8RyBsaXiOWa59UKTCHTtADNvOArYTcHNEIzt+rh4JdB/uwqfc8y4TCNA2kYm7PWaQpUFwpStLeg0H1Q==} engines: {node: '>=12.0.0'} peerDependencies: typescript: ^4.6.2 @@ -6188,12 +6190,12 @@ packages: typescript: 5.1.6 dev: true - /@wdio/utils@7.26.0(typescript@5.1.6): - resolution: {integrity: sha512-pVq2MPXZAYLkKGKIIHktHejnHqg4TYKoNYSi2EDv+I3GlT8VZKXHazKhci82ov0tD+GdF27+s4DWNDCfGYfBdQ==} + /@wdio/utils@7.30.2(typescript@5.1.6): + resolution: {integrity: sha512-np7I+smszFUennbQKdzbMN/zUL3s3EZq9pCCUcTRjjs9TE4tnn0wfmGdoz2o7REYu6kn9NfFFJyVIM2VtBbKEA==} engines: {node: '>=12.0.0'} dependencies: '@wdio/logger': 7.26.0 - '@wdio/types': 7.26.0(typescript@5.1.6) + '@wdio/types': 7.30.2(typescript@5.1.6) p-iteration: 1.1.8 transitivePeerDependencies: - typescript @@ -6414,13 +6416,6 @@ packages: negotiator: 0.6.3 dev: true - /acorn-globals@6.0.0: - resolution: {integrity: sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==} - dependencies: - acorn: 7.4.1 - acorn-walk: 7.2.0 - dev: true - /acorn-import-assertions@1.9.0(acorn@8.10.0): resolution: {integrity: sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==} peerDependencies: @@ -6437,21 +6432,10 @@ packages: acorn: 8.10.0 dev: true - /acorn-walk@7.2.0: - resolution: {integrity: sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==} - engines: {node: '>=0.4.0'} - dev: true - /acorn-walk@8.2.0: resolution: {integrity: sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==} engines: {node: '>=0.4.0'} - /acorn@7.4.1: - resolution: {integrity: sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==} - engines: {node: '>=0.4.0'} - hasBin: true - dev: true - /acorn@8.10.0: resolution: {integrity: sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==} engines: {node: '>=0.4.0'} @@ -7070,10 +7054,6 @@ packages: dependencies: fill-range: 7.0.1 - /browser-process-hrtime@1.0.0: - resolution: {integrity: sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==} - dev: true - /browserslist@4.21.10: resolution: {integrity: sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==} engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} @@ -8059,21 +8039,6 @@ packages: hasBin: true dev: false - /cssom@0.3.8: - resolution: {integrity: sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==} - dev: true - - /cssom@0.5.0: - resolution: {integrity: sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==} - dev: true - - /cssstyle@2.3.0: - resolution: {integrity: sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==} - engines: {node: '>=8'} - dependencies: - cssom: 0.3.8 - dev: true - /cssstyle@3.0.0: resolution: {integrity: sha512-N4u2ABATi3Qplzf0hWbVCdjenim8F3ojEXpBDF5hBpjzW182MjNGLqfmQ0SkSPeQ+V86ZXgeH8aXj6kayd4jgg==} engines: {node: '>=14'} @@ -8102,14 +8067,14 @@ packages: resolution: {integrity: sha512-d4ZVpCW31eWwCMe1YT3ur7mUDnTXbgwyzaL320DrcRT45rfjYxkt5QWLrmOJ+/UEAI2+fQgKe/fCjR8l4TpRgw==} dev: true - /cypress-image-snapshot@4.0.1(cypress@12.17.3)(jest@29.6.2): + /cypress-image-snapshot@4.0.1(cypress@12.17.4)(jest@29.6.2): resolution: {integrity: sha512-PBpnhX/XItlx3/DAk5ozsXQHUi72exybBNH5Mpqj1DVmjq+S5Jd9WE5CRa4q5q0zuMZb2V2VpXHth6MjFpgj9Q==} engines: {node: '>=8'} peerDependencies: cypress: ^4.5.0 dependencies: chalk: 2.4.2 - cypress: 12.17.3 + cypress: 12.17.4 fs-extra: 7.0.1 glob: 7.2.3 jest-image-snapshot: 4.2.0(jest@29.6.2) @@ -8119,8 +8084,8 @@ packages: - jest dev: true - /cypress@12.17.3: - resolution: {integrity: sha512-/R4+xdIDjUSLYkiQfwJd630S81KIgicmQOLXotFxVXkl+eTeVO+3bHXxdi5KBh/OgC33HWN33kHX+0tQR/ZWpg==} + /cypress@12.17.4: + resolution: {integrity: sha512-gAN8Pmns9MA5eCDFSDJXWKUpaL3IDd89N9TtIupjYnzLSmlpVr+ZR+vb4U/qaMp+lB6tBvAmt7504c3Z4RU5KQ==} engines: {node: ^14.0.0 || ^16.0.0 || >=18.0.0} hasBin: true requiresBuild: true @@ -8160,6 +8125,7 @@ packages: minimist: 1.2.8 ospath: 1.2.2 pretty-bytes: 5.6.0 + process: 0.11.10 proxy-from-env: 1.0.0 request-progress: 3.0.0 semver: 7.5.4 @@ -8576,15 +8542,6 @@ packages: engines: {node: '>= 12'} dev: true - /data-urls@3.0.2: - resolution: {integrity: sha512-Jy/tj3ldjZJo63sVAvg6LHt2mHvl4V6AgRAmNDtLdm7faqtsx+aJG42rsyCo9JCoRVKwPFzKlIPx3DIibwSIaQ==} - engines: {node: '>=12'} - dependencies: - abab: 2.0.6 - whatwg-mimetype: 3.0.0 - whatwg-url: 11.0.0 - dev: true - /data-urls@4.0.0: resolution: {integrity: sha512-/mMTei/JXPqvFqQtfyTowxmJVwr2PVAeCcDxyFf6LhoOu/09TX2OX3kb2wzi4DMXcfj4OItwDOnhl5oziPnT6g==} engines: {node: '>=14'} @@ -8601,6 +8558,10 @@ packages: '@babel/runtime': 7.22.10 dev: true + /dayjs@1.11.10: + resolution: {integrity: sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==} + dev: true + /dayjs@1.11.7: resolution: {integrity: sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==} dev: false @@ -9265,18 +9226,6 @@ packages: source-map: 0.1.43 dev: true - /escodegen@2.1.0: - resolution: {integrity: sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==} - engines: {node: '>=6.0'} - hasBin: true - dependencies: - esprima: 4.0.1 - estraverse: 5.3.0 - esutils: 2.0.3 - optionalDependencies: - source-map: 0.6.1 - dev: true - /eslint-config-prettier@8.10.0(eslint@8.47.0): resolution: {integrity: sha512-SM8AMJdeQqRYT9O9zguiruQZaN7+z+E4eAP9oiLNGKMtomwaB1E9dcgUD6ZAn/eQAb52USbvezbiljfZUhbJcg==} hasBin: true @@ -10416,18 +10365,6 @@ packages: define-properties: 1.2.0 dev: true - /globby@11.0.4: - resolution: {integrity: sha512-9O4MVG9ioZJ08ffbcyVYyLOJLk5JQ688pJ4eMGLpdWLHq/Wr1D9BlriLQyL0E+jbkuePVZXYFj47QM/v093wHg==} - engines: {node: '>=10'} - dependencies: - array-union: 2.1.0 - dir-glob: 3.0.1 - fast-glob: 3.3.2 - ignore: 5.2.4 - merge2: 1.4.1 - slash: 3.0.0 - dev: true - /globby@11.1.0: resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==} engines: {node: '>=10'} @@ -11229,11 +11166,6 @@ packages: resolution: {integrity: sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==} dev: true - /istanbul-lib-coverage@3.0.0: - resolution: {integrity: sha512-UiUIqxMgRDET6eR+o5HbfRYP1l0hqkWOs7vNxC/mggutCMUIhWMm8gAHb8tHlyfD3/l6rlgNA5cKdDzEAf6hEg==} - engines: {node: '>=8'} - dev: true - /istanbul-lib-coverage@3.2.0: resolution: {integrity: sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw==} engines: {node: '>=8'} @@ -11869,48 +11801,6 @@ packages: engines: {node: '>=12.0.0'} dev: true - /jsdom@19.0.0: - resolution: {integrity: sha512-RYAyjCbxy/vri/CfnjUWJQQtZ3LKlLnDqj+9XLNnJPgEGeirZs3hllKR20re8LUZ6o1b1X4Jat+Qd26zmP41+A==} - engines: {node: '>=12'} - peerDependencies: - canvas: ^2.5.0 - peerDependenciesMeta: - canvas: - optional: true - dependencies: - abab: 2.0.6 - acorn: 8.10.0 - acorn-globals: 6.0.0 - cssom: 0.5.0 - cssstyle: 2.3.0 - data-urls: 3.0.2 - decimal.js: 10.4.3 - domexception: 4.0.0 - escodegen: 2.1.0 - form-data: 4.0.0 - html-encoding-sniffer: 3.0.0 - http-proxy-agent: 5.0.0 - https-proxy-agent: 5.0.1 - is-potential-custom-element-name: 1.0.1 - nwsapi: 2.2.7 - parse5: 6.0.1 - saxes: 5.0.1 - symbol-tree: 3.2.4 - tough-cookie: 4.1.3 - w3c-hr-time: 1.0.2 - w3c-xmlserializer: 3.0.0 - webidl-conversions: 7.0.0 - whatwg-encoding: 2.0.0 - whatwg-mimetype: 3.0.0 - whatwg-url: 10.0.0 - ws: 8.13.0 - xml-name-validator: 4.0.0 - transitivePeerDependencies: - - bufferutil - - supports-color - - utf-8-validate - dev: true - /jsdom@22.0.0: resolution: {integrity: sha512-p5ZTEb5h+O+iU02t0GfEjAnkdYPrQSkfuTSMkMYyIoMvUNEHsbG0bHHbfXIcfTqD2UfvjQX7mmgiFsyRwGscVw==} engines: {node: '>=16'} @@ -13615,10 +13505,6 @@ packages: lines-and-columns: 1.2.4 dev: true - /parse5@6.0.1: - resolution: {integrity: sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==} - dev: true - /parse5@7.1.2: resolution: {integrity: sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==} dependencies: @@ -14026,7 +13912,6 @@ packages: /process@0.11.10: resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==} engines: {node: '>= 0.6.0'} - dev: false /prompts@2.4.2: resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==} @@ -14665,13 +14550,6 @@ packages: /safer-buffer@2.1.2: resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==} - /saxes@5.0.1: - resolution: {integrity: sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==} - engines: {node: '>=10'} - dependencies: - xmlchars: 2.2.0 - dev: true - /saxes@6.0.0: resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==} engines: {node: '>=v12.22.7'} @@ -14732,14 +14610,6 @@ packages: hasBin: true dev: true - /semver@7.3.8: - resolution: {integrity: sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==} - engines: {node: '>=10'} - hasBin: true - dependencies: - lru-cache: 6.0.0 - dev: true - /semver@7.5.4: resolution: {integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==} engines: {node: '>=10'} @@ -15657,13 +15527,6 @@ packages: punycode: 2.3.0 dev: true - /tr46@3.0.0: - resolution: {integrity: sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==} - engines: {node: '>=12'} - dependencies: - punycode: 2.3.0 - dev: true - /tr46@4.1.1: resolution: {integrity: sha512-2lv/66T7e5yNyhAAC4NaKe5nVavzuGJQVVtRYLyQ2OI8tsJ61PMLlelehb0wi2Hx6+hT/OJUWZcw8MjlSRnxvw==} engines: {node: '>=14'} @@ -16746,20 +16609,6 @@ packages: vue: 3.3.4 dev: false - /w3c-hr-time@1.0.2: - resolution: {integrity: sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==} - deprecated: Use your platform's native performance.now() and performance.timeOrigin. - dependencies: - browser-process-hrtime: 1.0.0 - dev: true - - /w3c-xmlserializer@3.0.0: - resolution: {integrity: sha512-3WFqGEgSXIyGhOmAFtlicJNMjEps8b1MG31NCA0/vOF9+nKMUW1ckhi9cnNHmf88Rzw5V+dwIwsm2C7X8k9aQg==} - engines: {node: '>=12'} - dependencies: - xml-name-validator: 4.0.0 - dev: true - /w3c-xmlserializer@4.0.0: resolution: {integrity: sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==} engines: {node: '>=14'} @@ -16810,16 +16659,16 @@ packages: resolution: {integrity: sha512-PgF341avzqyx60neE9DD+XS26MMNMoUQRz9NOZwW32nPQrF6p77f1htcnjBSEV8BGMKZ16choqUG4hyI0Hx7mA==} dev: false - /webdriver@7.30.0(typescript@5.1.6): - resolution: {integrity: sha512-bQE4oVgjjg5sb3VkCD+Eb8mscEvf3TioP0mnEZK0f5OJUNI045gMCJgpX8X4J8ScGyEhzlhn1KvlAn3yzxjxog==} + /webdriver@7.31.1(typescript@5.1.6): + resolution: {integrity: sha512-nCdJLxRnYvOMFqTEX7sqQtF/hV/Jgov0Y6ICeOm1DMTlZSRRDaUsBMlEAPkEwif9uBJYdM0znv8qzfX358AGqQ==} engines: {node: '>=12.0.0'} dependencies: '@types/node': 18.17.5 - '@wdio/config': 7.30.0(typescript@5.1.6) + '@wdio/config': 7.31.1(typescript@5.1.6) '@wdio/logger': 7.26.0 '@wdio/protocols': 7.27.0 - '@wdio/types': 7.26.0(typescript@5.1.6) - '@wdio/utils': 7.26.0(typescript@5.1.6) + '@wdio/types': 7.30.2(typescript@5.1.6) + '@wdio/utils': 7.30.2(typescript@5.1.6) got: 11.8.6 ky: 0.30.0 lodash.merge: 4.6.2 @@ -17023,22 +16872,6 @@ packages: engines: {node: '>=12'} dev: true - /whatwg-url@10.0.0: - resolution: {integrity: sha512-CLxxCmdUby142H5FZzn4D8ikO1cmypvXVQktsgosNy4a4BHrDHeciBBGZhb0bNoR5/MltoCatso+vFjjGx8t0w==} - engines: {node: '>=12'} - dependencies: - tr46: 3.0.0 - webidl-conversions: 7.0.0 - dev: true - - /whatwg-url@11.0.0: - resolution: {integrity: sha512-RKT8HExMpoYx4igMiVMY83lN6UeITKJlBQ+vR/8ZJ8OCdSiN3RwCq+9gH0+Xzj0+5IrM6i4j/6LuvzbZIQgEcQ==} - engines: {node: '>=12'} - dependencies: - tr46: 3.0.0 - webidl-conversions: 7.0.0 - dev: true - /whatwg-url@12.0.1: resolution: {integrity: sha512-Ed/LrqB8EPlGxjS+TrsXcpUond1mhccS3pchLhzSgPCnTimUCKj3IZE75pAs5m6heB2U2TMerKFUXheyHY+VDQ==} engines: {node: '>=14'} From a01be16d27ffd38e50a2c55f9dfef3f43c18e7da Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 23 Jan 2024 23:38:21 +0530 Subject: [PATCH 32/35] Echo event --- .github/workflows/e2e.yml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml index c23dc88baff..a4087cd196a 100644 --- a/.github/workflows/e2e.yml +++ b/.github/workflows/e2e.yml @@ -30,7 +30,8 @@ jobs: uses: actions/setup-node@v4 with: node-version: 18.x - + - run: | + echo '${{ toJson(github.event) }}' - name: Cache snapshots id: cache-snapshot uses: actions/cache@v4 From 42ad1f4fe458c8ac79daf1c98bb5b9ae7760316f Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 23 Jan 2024 23:49:52 +0530 Subject: [PATCH 33/35] RefTest --- .github/workflows/e2e.yml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml index a4087cd196a..3b3b849bc8d 100644 --- a/.github/workflows/e2e.yml +++ b/.github/workflows/e2e.yml @@ -18,7 +18,7 @@ permissions: env: # For PRs and MergeQueues, the target commit is used, and for push events, github.event.previous is used. - targetHash: ${{ github.event.pull_request.base.sha || github.event.merge_group.base_sha || github.event.before }} + targetHash: ${{ github.event.pull_request.base.sha || github.event.merge_group.base_sha || (github.event.before == '0000000000000000000000000000000000000000' && 'develop' || github.event.before) }} jobs: cache: @@ -31,6 +31,7 @@ jobs: with: node-version: 18.x - run: | + echo '${{ env.targetHash }}' echo '${{ toJson(github.event) }}' - name: Cache snapshots id: cache-snapshot From de03a017db5895679e2a781781ce58592524b7bf Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 23 Jan 2024 23:51:48 +0530 Subject: [PATCH 34/35] Remove echo --- .github/workflows/e2e.yml | 3 --- 1 file changed, 3 deletions(-) diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml index 3b3b849bc8d..b8232b8c0e0 100644 --- a/.github/workflows/e2e.yml +++ b/.github/workflows/e2e.yml @@ -30,9 +30,6 @@ jobs: uses: actions/setup-node@v4 with: node-version: 18.x - - run: | - echo '${{ env.targetHash }}' - echo '${{ toJson(github.event) }}' - name: Cache snapshots id: cache-snapshot uses: actions/cache@v4 From ec79ac200c7714276a374988741dc58375c47f04 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 23 Jan 2024 23:53:48 +0530 Subject: [PATCH 35/35] Lint --- packages/mermaid/src/docs/syntax/flowchart.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index 95cc962c7d2..540f820f77f 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -775,12 +775,13 @@ flowchart TD B-->E(A fa:fa-camera-retro perhaps?) ``` -Mermaid supports Font Awesome if the CSS is included on the website. -Mermaid does not have any restriction on the version of Font Awesome that can be used. +Mermaid supports Font Awesome if the CSS is included on the website. +Mermaid does not have any restriction on the version of Font Awesome that can be used. Please refer the [Official Font Awesome Documentation](https://fontawesome.com/start) on how to include it in your website. Adding this snippet in the `` would add support for Font Awesome v6.5.1 + ```html