From b602f67abee861f5e6b7fcc1a08d13bccc7978ea Mon Sep 17 00:00:00 2001 From: Bryan Date: Fri, 18 Oct 2024 20:05:42 +0100 Subject: [PATCH 01/10] Add bit count syntax to packet diagram --- .../src/diagrams/packet/packet.spec.ts | 91 +++++++++++++++++++ .../mermaid/src/diagrams/packet/parser.ts | 44 ++++++--- .../parser/src/language/packet/packet.langium | 7 +- 3 files changed, 127 insertions(+), 15 deletions(-) diff --git a/packages/mermaid/src/diagrams/packet/packet.spec.ts b/packages/mermaid/src/diagrams/packet/packet.spec.ts index 2d7b278cd9..88366da3a9 100644 --- a/packages/mermaid/src/diagrams/packet/packet.spec.ts +++ b/packages/mermaid/src/diagrams/packet/packet.spec.ts @@ -30,6 +30,7 @@ describe('packet diagrams', () => { [ [ { + "bits": 11, "end": 10, "label": "test", "start": 0, @@ -49,11 +50,13 @@ describe('packet diagrams', () => { [ [ { + "bits": 11, "end": 10, "label": "test", "start": 0, }, { + "bits": 1, "end": 11, "label": "single", "start": 11, @@ -63,6 +66,58 @@ describe('packet diagrams', () => { `); }); + it('should handle bit counts', async () => { + const str = `packet-beta + 8bits: "byte" + 16bits: "word" + `; + await expect(parser.parse(str)).resolves.not.toThrow(); + expect(getPacket()).toMatchInlineSnapshot(` + [ + [ + { + "bits": 8, + "end": 7, + "label": "byte", + "start": 0, + }, + { + "bits": 16, + "end": 23, + "label": "word", + "start": 8, + }, + ], + ] + `); + }); + + it('should handle bit counts with bit or bits', async () => { + const str = `packet-beta + 8bit: "byte" + 16bits: "word" + `; + await expect(parser.parse(str)).resolves.not.toThrow(); + expect(getPacket()).toMatchInlineSnapshot(` + [ + [ + { + "bits": 8, + "end": 7, + "label": "byte", + "start": 0, + }, + { + "bits": 16, + "end": 23, + "label": "word", + "start": 8, + }, + ], + ] + `); + }); + it('should split into multiple rows', async () => { const str = `packet-beta 0-10: "test" @@ -73,11 +128,13 @@ describe('packet diagrams', () => { [ [ { + "bits": 11, "end": 10, "label": "test", "start": 0, }, { + "bits": 20, "end": 31, "label": "multiple", "start": 11, @@ -85,6 +142,7 @@ describe('packet diagrams', () => { ], [ { + "bits": 31, "end": 63, "label": "multiple", "start": 32, @@ -92,6 +150,7 @@ describe('packet diagrams', () => { ], [ { + "bits": 26, "end": 90, "label": "multiple", "start": 64, @@ -111,11 +170,13 @@ describe('packet diagrams', () => { [ [ { + "bits": 17, "end": 16, "label": "test", "start": 0, }, { + "bits": 14, "end": 31, "label": "multiple", "start": 17, @@ -123,6 +184,7 @@ describe('packet diagrams', () => { ], [ { + "bits": 31, "end": 63, "label": "multiple", "start": 32, @@ -142,6 +204,16 @@ describe('packet diagrams', () => { ); }); + it('should throw error if numbers are not continuous with bit counts', async () => { + const str = `packet-beta + 16bits: "test" + 18-20: "error" + `; + await expect(parser.parse(str)).rejects.toThrowErrorMatchingInlineSnapshot( + `[Error: Packet block 18 - 20 is not contiguous. It should start from 16.]` + ); + }); + it('should throw error if numbers are not continuous for single packets', async () => { const str = `packet-beta 0-16: "test" @@ -152,6 +224,16 @@ describe('packet diagrams', () => { ); }); + it('should throw error if numbers are not continuous for single packets with bit counts', async () => { + const str = `packet-beta + 16 bits: "test" + 18: "error" + `; + await expect(parser.parse(str)).rejects.toThrowErrorMatchingInlineSnapshot( + `[Error: Packet block 18 - 18 is not contiguous. It should start from 16.]` + ); + }); + it('should throw error if numbers are not continuous for single packets - 2', async () => { const str = `packet-beta 0-16: "test" @@ -172,4 +254,13 @@ describe('packet diagrams', () => { `[Error: Packet block 25 - 20 is invalid. End must be greater than start.]` ); }); + + it('should throw error if bit count is 0', async () => { + const str = `packet-beta + 0bits: "test" + `; + await expect(parser.parse(str)).rejects.toThrowErrorMatchingInlineSnapshot( + `[Error: Packet block 0 is invalid. Cannot have a zero bit field.]` + ); + }); }); diff --git a/packages/mermaid/src/diagrams/packet/parser.ts b/packages/mermaid/src/diagrams/packet/parser.ts index 06d180dfd6..eb58916f5e 100644 --- a/packages/mermaid/src/diagrams/packet/parser.ts +++ b/packages/mermaid/src/diagrams/packet/parser.ts @@ -10,26 +10,39 @@ const maxPacketSize = 10_000; const populate = (ast: Packet) => { populateCommonDb(ast, db); - let lastByte = -1; + let lastBit = -1; let word: PacketWord = []; let row = 1; const { bitsPerRow } = db.getConfig(); - for (let { start, end, label } of ast.blocks) { - if (end && end < start) { + + for (let { start, end, bits, label } of ast.blocks) { + if (start !== undefined && end !== undefined && end < start) { throw new Error(`Packet block ${start} - ${end} is invalid. End must be greater than start.`); } - if (start !== lastByte + 1) { + if (start == undefined) { + start = lastBit + 1; + } + if (start !== lastBit + 1) { throw new Error( `Packet block ${start} - ${end ?? start} is not contiguous. It should start from ${ - lastByte + 1 + lastBit + 1 }.` ); } - lastByte = end ?? start; - log.debug(`Packet block ${start} - ${lastByte} with label ${label}`); + if (bits === 0) { + throw new Error(`Packet block ${start} is invalid. Cannot have a zero bit field.`); + } + if (end == undefined) { + end = start + (bits ?? 1) - 1; + } + if (bits == undefined) { + bits = end - start + 1; + } + lastBit = end; + log.debug(`Packet block ${start} - ${lastBit} with label ${label}`); while (word.length <= bitsPerRow + 1 && db.getPacket().length < maxPacketSize) { - const [block, nextBlock] = getNextFittingBlock({ start, end, label }, row, bitsPerRow); + const [block, nextBlock] = getNextFittingBlock({ start, end, bits, label }, row, bitsPerRow); word.push(block); if (block.end + 1 === row * bitsPerRow) { db.pushWord(word); @@ -39,7 +52,7 @@ const populate = (ast: Packet) => { if (!nextBlock) { break; } - ({ start, end, label } = nextBlock); + ({ start, end, bits, label } = nextBlock); } } db.pushWord(word); @@ -50,9 +63,8 @@ const getNextFittingBlock = ( row: number, bitsPerRow: number ): [Required, PacketBlock | undefined] => { - if (block.end === undefined) { - block.end = block.start; - } + assert(block.start !== undefined, 'start should have been set during first phase'); + assert(block.end !== undefined, 'end should have been set during first phase'); if (block.start > block.end) { throw new Error(`Block start ${block.start} is greater than block end ${block.end}.`); @@ -62,16 +74,20 @@ const getNextFittingBlock = ( return [block as Required, undefined]; } + const rowEnd = row * bitsPerRow - 1; + const rowStart = row * bitsPerRow; return [ { start: block.start, - end: row * bitsPerRow - 1, + end: rowEnd, label: block.label, + bits: rowEnd - block.start, }, { - start: row * bitsPerRow, + start: rowStart, end: block.end, label: block.label, + bits: block.end - rowStart, }, ]; }; diff --git a/packages/parser/src/language/packet/packet.langium b/packages/parser/src/language/packet/packet.langium index ad30f8df20..a2e957494f 100644 --- a/packages/parser/src/language/packet/packet.langium +++ b/packages/parser/src/language/packet/packet.langium @@ -12,7 +12,12 @@ entry Packet: ; PacketBlock: - start=INT('-' end=INT)? ':' label=STRING EOL + ( + start=INT('-' (end=INT | bits=INT'bit''s'?))? + | bits=INT'bit''s'? + ) + ':' label=STRING + EOL ; terminal INT returns number: /0|[1-9][0-9]*/; From 93577619b22bf8168a4c458d1c81059f6240bdf8 Mon Sep 17 00:00:00 2001 From: Bryan Date: Fri, 18 Oct 2024 20:09:29 +0100 Subject: [PATCH 02/10] add documentation --- docs/syntax/packet.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/docs/syntax/packet.md b/docs/syntax/packet.md index 5eab819105..5feddfcd41 100644 --- a/docs/syntax/packet.md +++ b/docs/syntax/packet.md @@ -20,6 +20,7 @@ This diagram type is particularly useful for developers, network engineers, educ packet-beta start: "Block name" %% Single-bit block start-end: "Block name" %% Multi-bit blocks +16bits: "Block name" %% Auto appends to previous block without specifying start ... More Fields ... ``` @@ -82,6 +83,16 @@ title UDP Packet 48-63: "Checksum" 64-95: "Data (variable length)" ``` +Or you can write this as +```mermaid-example +packet-beta +title UDP Packet +16bits: "Source Port" +16bits: "Destination Port" +16bits: "Length" +16bits: "Checksum" +64-95: "Data (variable length)" +``` ```mermaid packet-beta From 0fdfd910690fc4ef7040c5374164f296cb24c79f Mon Sep 17 00:00:00 2001 From: Bryan Date: Fri, 18 Oct 2024 20:17:30 +0100 Subject: [PATCH 03/10] lint the documentation --- docs/syntax/packet.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/syntax/packet.md b/docs/syntax/packet.md index 5feddfcd41..f6c5d344d2 100644 --- a/docs/syntax/packet.md +++ b/docs/syntax/packet.md @@ -83,7 +83,9 @@ title UDP Packet 48-63: "Checksum" 64-95: "Data (variable length)" ``` + Or you can write this as + ```mermaid-example packet-beta title UDP Packet From d54eed9d62a2e45372472d0359a396104807f47c Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Fri, 18 Oct 2024 19:22:20 +0000 Subject: [PATCH 04/10] [autofix.ci] apply automated fixes --- docs/syntax/packet.md | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/docs/syntax/packet.md b/docs/syntax/packet.md index f6c5d344d2..5eab819105 100644 --- a/docs/syntax/packet.md +++ b/docs/syntax/packet.md @@ -20,7 +20,6 @@ This diagram type is particularly useful for developers, network engineers, educ packet-beta start: "Block name" %% Single-bit block start-end: "Block name" %% Multi-bit blocks -16bits: "Block name" %% Auto appends to previous block without specifying start ... More Fields ... ``` @@ -84,18 +83,6 @@ title UDP Packet 64-95: "Data (variable length)" ``` -Or you can write this as - -```mermaid-example -packet-beta -title UDP Packet -16bits: "Source Port" -16bits: "Destination Port" -16bits: "Length" -16bits: "Checksum" -64-95: "Data (variable length)" -``` - ```mermaid packet-beta title UDP Packet From 6d33d93b15f3362c2113b7d8a980b26f8c7d60ad Mon Sep 17 00:00:00 2001 From: Bryan Date: Fri, 18 Oct 2024 20:28:20 +0100 Subject: [PATCH 05/10] run prettier --- .esbuild/server.ts | 4 +++- .../integration/rendering/iconShape.spec.ts | 6 +++++- .../integration/rendering/imageShape.spec.ts | 4 +++- .../src/diagrams/architecture/svgDraw.ts | 18 +++++++++++++++--- packages/mermaid/src/diagrams/block/layout.ts | 4 +++- .../src/diagrams/git/gitGraphRenderer.ts | 18 ++++++++++++++---- .../mermaid/src/diagrams/state/dataFetcher.js | 4 +++- .../rendering-elements/clusters.js | 4 +++- .../shapes/curlyBraceLeft.ts | 4 +++- .../shapes/curlyBraceRight.ts | 4 +++- .../rendering-elements/shapes/curlyBraces.ts | 4 +++- .../rendering-elements/shapes/cylinder.ts | 4 +++- .../rendering-elements/shapes/dividedRect.ts | 4 +++- .../shapes/flippedTriangle.ts | 4 +++- .../rendering-elements/shapes/labelRect.ts | 4 +++- .../rendering-elements/shapes/linedCylinder.ts | 4 +++- .../shapes/linedWaveEdgedRect.ts | 4 +++- .../rendering-elements/shapes/multiRect.ts | 4 +++- .../shapes/multiWaveEdgedRectangle.ts | 4 +++- .../shapes/rectLeftInvArrow.ts | 4 +++- .../rendering-elements/shapes/shadedProcess.ts | 4 +++- .../rendering-elements/shapes/slopedRect.ts | 4 +++- .../shapes/taggedWaveEdgedRectangle.ts | 4 +++- .../shapes/tiltedCylinder.ts | 4 +++- .../rendering-elements/shapes/triangle.ts | 5 ++++- .../shapes/waveEdgedRectangle.ts | 4 +++- .../rendering-elements/shapes/windowPane.ts | 8 ++++++-- 27 files changed, 110 insertions(+), 33 deletions(-) diff --git a/.esbuild/server.ts b/.esbuild/server.ts index 6e1bcb4602..5bf214be9a 100644 --- a/.esbuild/server.ts +++ b/.esbuild/server.ts @@ -36,7 +36,9 @@ const rebuildAll = async () => { console.time(timeLabel); await Promise.all( contexts.map(async ({ config, context }) => { - const buildVariant = `Rebuild ${buildNumber} Time (${Object.keys(config.entryPoints!)[0]} ${config.format})`; + const buildVariant = `Rebuild ${buildNumber} Time (${Object.keys(config.entryPoints!)[0]} ${ + config.format + })`; console.time(buildVariant); await context.rebuild(); console.timeEnd(buildVariant); diff --git a/cypress/integration/rendering/iconShape.spec.ts b/cypress/integration/rendering/iconShape.spec.ts index 4c12c3fa34..8f4b530764 100644 --- a/cypress/integration/rendering/iconShape.spec.ts +++ b/cypress/integration/rendering/iconShape.spec.ts @@ -14,7 +14,11 @@ looks.forEach((look) => { directions.forEach((direction) => { forms.forEach((form) => { labelPos.forEach((pos) => { - describe(`Test iconShape in ${form ? `${form} form,` : ''} ${look} look and dir ${direction} with label position ${pos ? pos : 'not defined'}`, () => { + describe(`Test iconShape in ${ + form ? `${form} form,` : '' + } ${look} look and dir ${direction} with label position ${ + pos ? pos : 'not defined' + }`, () => { it(`without label`, () => { let flowchartCode = `flowchart ${direction}\n`; flowchartCode += ` nA --> nAA@{ icon: 'fa:bell'`; diff --git a/cypress/integration/rendering/imageShape.spec.ts b/cypress/integration/rendering/imageShape.spec.ts index d2e267149d..bcbdba1020 100644 --- a/cypress/integration/rendering/imageShape.spec.ts +++ b/cypress/integration/rendering/imageShape.spec.ts @@ -12,7 +12,9 @@ const labelPos = [undefined, 't', 'b'] as const; looks.forEach((look) => { directions.forEach((direction) => { labelPos.forEach((pos) => { - describe(`Test imageShape in ${look} look and dir ${direction} with label position ${pos ? pos : 'not defined'}`, () => { + describe(`Test imageShape in ${look} look and dir ${direction} with label position ${ + pos ? pos : 'not defined' + }`, () => { it(`without label`, () => { let flowchartCode = `flowchart ${direction}\n`; flowchartCode += ` nA --> A@{ img: 'https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg', w: '100', h: '100' }\n`; diff --git a/packages/mermaid/src/diagrams/architecture/svgDraw.ts b/packages/mermaid/src/diagrams/architecture/svgDraw.ts index b10a451fea..60970a1868 100644 --- a/packages/mermaid/src/diagrams/architecture/svgDraw.ts +++ b/packages/mermaid/src/diagrams/architecture/svgDraw.ts @@ -212,7 +212,11 @@ export const drawGroups = async function (groupsEl: D3Element, cy: cytoscape.Cor if (data.icon) { const bkgElem = groupLabelContainer.append('g'); bkgElem.html( - `${await getIconSVG(data.icon, { height: groupIconSize, width: groupIconSize, fallbackPrefix: architectureIcons.prefix })}` + `${await getIconSVG(data.icon, { + height: groupIconSize, + width: groupIconSize, + fallbackPrefix: architectureIcons.prefix, + })}` ); bkgElem.attr( 'transform', @@ -297,11 +301,19 @@ export const drawServices = async function ( // throw new Error(`Invalid SVG Icon name: "${service.icon}"`); // } bkgElem.html( - `${await getIconSVG(service.icon, { height: iconSize, width: iconSize, fallbackPrefix: architectureIcons.prefix })}` + `${await getIconSVG(service.icon, { + height: iconSize, + width: iconSize, + fallbackPrefix: architectureIcons.prefix, + })}` ); } else if (service.iconText) { bkgElem.html( - `${await getIconSVG('blank', { height: iconSize, width: iconSize, fallbackPrefix: architectureIcons.prefix })}` + `${await getIconSVG('blank', { + height: iconSize, + width: iconSize, + fallbackPrefix: architectureIcons.prefix, + })}` ); const textElemContainer = bkgElem.append('g'); const fo = textElemContainer diff --git a/packages/mermaid/src/diagrams/block/layout.ts b/packages/mermaid/src/diagrams/block/layout.ts index 7f44a5f19f..5081a53734 100644 --- a/packages/mermaid/src/diagrams/block/layout.ts +++ b/packages/mermaid/src/diagrams/block/layout.ts @@ -105,7 +105,9 @@ function setBlockSizes(block: Block, db: BlockDB, siblingWidth = 0, siblingHeigh for (const child of block.children) { if (child.size) { log.debug( - `abc95 Setting size of children of ${block.id} id=${child.id} ${maxWidth} ${maxHeight} ${JSON.stringify(child.size)}` + `abc95 Setting size of children of ${block.id} id=${ + child.id + } ${maxWidth} ${maxHeight} ${JSON.stringify(child.size)}` ); child.size.width = maxWidth * (child.widthInColumns ?? 1) + padding * ((child.widthInColumns ?? 1) - 1); diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.ts b/packages/mermaid/src/diagrams/git/gitGraphRenderer.ts index 39a64a623b..dc92cfff64 100644 --- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.ts +++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.ts @@ -276,7 +276,11 @@ const drawCommitBullet = ( cross .attr( 'd', - `M ${commitPosition.x - 5},${commitPosition.y - 5}L${commitPosition.x + 5},${commitPosition.y + 5}M${commitPosition.x - 5},${commitPosition.y + 5}L${commitPosition.x + 5},${commitPosition.y - 5}` + `M ${commitPosition.x - 5},${commitPosition.y - 5}L${commitPosition.x + 5},${ + commitPosition.y + 5 + }M${commitPosition.x - 5},${commitPosition.y + 5}L${commitPosition.x + 5},${ + commitPosition.y - 5 + }` ) .attr('class', `commit ${typeClass} ${commit.id} commit${branchIndex % THEME_COLOR_LIMIT}`); } @@ -652,21 +656,27 @@ const drawArrow = ( colorClassNum = branchPos.get(commitA.branch)?.index; - lineDef = `M ${p1.x} ${p1.y} L ${lineX + radius} ${p1.y} ${arc} ${lineX} ${p1.y + offset} L ${lineX} ${p2.y - radius} ${arc2} ${lineX - offset} ${p2.y} L ${p2.x} ${p2.y}`; + lineDef = `M ${p1.x} ${p1.y} L ${lineX + radius} ${p1.y} ${arc} ${lineX} ${ + p1.y + offset + } L ${lineX} ${p2.y - radius} ${arc2} ${lineX - offset} ${p2.y} L ${p2.x} ${p2.y}`; } } else if (dir === 'BT') { if (p1.x < p2.x) { // Source commit is on branch position left of destination commit // so render arrow rightward with colour of destination branch - lineDef = `M ${p1.x} ${p1.y} L ${lineX - radius} ${p1.y} ${arc} ${lineX} ${p1.y - offset} L ${lineX} ${p2.y + radius} ${arc2} ${lineX + offset} ${p2.y} L ${p2.x} ${p2.y}`; + lineDef = `M ${p1.x} ${p1.y} L ${lineX - radius} ${p1.y} ${arc} ${lineX} ${ + p1.y - offset + } L ${lineX} ${p2.y + radius} ${arc2} ${lineX + offset} ${p2.y} L ${p2.x} ${p2.y}`; } else { // Source commit is on branch position right of destination commit // so render arrow leftward with colour of source branch colorClassNum = branchPos.get(commitA.branch)?.index; - lineDef = `M ${p1.x} ${p1.y} L ${lineX + radius} ${p1.y} ${arc2} ${lineX} ${p1.y - offset} L ${lineX} ${p2.y + radius} ${arc} ${lineX - offset} ${p2.y} L ${p2.x} ${p2.y}`; + lineDef = `M ${p1.x} ${p1.y} L ${lineX + radius} ${p1.y} ${arc2} ${lineX} ${ + p1.y - offset + } L ${lineX} ${p2.y + radius} ${arc} ${lineX - offset} ${p2.y} L ${p2.x} ${p2.y}`; } } else { if (p1.y < p2.y) { diff --git a/packages/mermaid/src/diagrams/state/dataFetcher.js b/packages/mermaid/src/diagrams/state/dataFetcher.js index 921544ff27..7fb2f2da16 100644 --- a/packages/mermaid/src/diagrams/state/dataFetcher.js +++ b/packages/mermaid/src/diagrams/state/dataFetcher.js @@ -258,7 +258,9 @@ export const dataFetcher = ( newNode.isGroup = true; newNode.dir = getDir(parsedItem); newNode.shape = parsedItem.type === DIVIDER_TYPE ? SHAPE_DIVIDER : SHAPE_GROUP; - newNode.cssClasses = `${newNode.cssClasses} ${CSS_DIAGRAM_CLUSTER} ${altFlag ? CSS_DIAGRAM_CLUSTER_ALT : ''}`; + newNode.cssClasses = `${newNode.cssClasses} ${CSS_DIAGRAM_CLUSTER} ${ + altFlag ? CSS_DIAGRAM_CLUSTER_ALT : '' + }`; } // This is what will be added to the graph diff --git a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js index a62a920136..80d77beaaa 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js @@ -264,7 +264,9 @@ const roundedWithTitle = async (parent, node) => { label.attr( 'transform', - `translate(${node.x - bbox.width / 2}, ${y + 1 - (evaluate(siteConfig.flowchart.htmlLabels) ? 0 : 3)})` + `translate(${node.x - bbox.width / 2}, ${ + y + 1 - (evaluate(siteConfig.flowchart.htmlLabels) ? 0 : 3) + })` ); const rectBox = rect.node().getBBox(); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceLeft.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceLeft.ts index 32c13e0e95..8fce5b27e8 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceLeft.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceLeft.ts @@ -95,7 +95,9 @@ export const curlyBraceLeft = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${-w / 2 + radius - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0))})` + `translate(${-w / 2 + radius - (bbox.x - (bbox.left ?? 0))},${ + -h / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0)) + })` ); updateNodeBounds(node, curlyBraceLeftShape); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceRight.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceRight.ts index 43f5c65ffc..7e42732e24 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceRight.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceRight.ts @@ -95,7 +95,9 @@ export const curlyBraceRight = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${-w / 2 + (node.padding ?? 0) / 2 - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0))})` + `translate(${-w / 2 + (node.padding ?? 0) / 2 - (bbox.x - (bbox.left ?? 0))},${ + -h / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0)) + })` ); updateNodeBounds(node, curlyBraceRightShape); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraces.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraces.ts index 23471b8300..6f8e7d4a41 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraces.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraces.ts @@ -114,7 +114,9 @@ export const curlyBraces = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${-w / 2 + (node.padding ?? 0) / 2 - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0))})` + `translate(${-w / 2 + (node.padding ?? 0) / 2 - (bbox.x - (bbox.left ?? 0))},${ + -h / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0)) + })` ); updateNodeBounds(node, curlyBracesShape); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts index c8a69665a4..aad8e2aefa 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts @@ -90,7 +90,9 @@ export const cylinder = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${-(bbox.width / 2) - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) + (node.padding ?? 0) / 1.5 - (bbox.y - (bbox.top ?? 0))})` + `translate(${-(bbox.width / 2) - (bbox.x - (bbox.left ?? 0))}, ${ + -(bbox.height / 2) + (node.padding ?? 0) / 1.5 - (bbox.y - (bbox.top ?? 0)) + })` ); node.intersect = function (point) { diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts index 0fdc79607f..2641dd72eb 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts @@ -52,7 +52,9 @@ export const dividedRectangle = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${x + (node.padding ?? 0) / 2 - (bbox.x - (bbox.left ?? 0))}, ${y + rectOffset + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0))})` + `translate(${x + (node.padding ?? 0) / 2 - (bbox.x - (bbox.left ?? 0))}, ${ + y + rectOffset + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0)) + })` ); updateNodeBounds(node, polygon); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts index 9c3ad7f187..1fba7a9eeb 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts @@ -51,7 +51,9 @@ export const flippedTriangle = async (parent: SVGAElement, node: Node): Promise< label.attr( 'transform', - `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))}, ${-h / 2 + (node.padding ?? 0) / 2 + (bbox.y - (bbox.top ?? 0))})` + `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))}, ${ + -h / 2 + (node.padding ?? 0) / 2 + (bbox.y - (bbox.top ?? 0)) + })` ); node.intersect = function (point) { diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/labelRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/labelRect.ts index 7aff919024..2673b992ed 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/labelRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/labelRect.ts @@ -29,7 +29,9 @@ export const labelRect = async (parent: SVGElement, node: Node) => { shapeSvg.attr('class', 'label edgeLabel'); label.attr( 'transform', - `translate(${-(bbox.width / 2) - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) - (bbox.y - (bbox.top ?? 0))})` + `translate(${-(bbox.width / 2) - (bbox.x - (bbox.left ?? 0))}, ${ + -(bbox.height / 2) - (bbox.y - (bbox.top ?? 0)) + })` ); // if (node.props) { diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts index 819d48faf6..9f3ebaeb2d 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts @@ -101,7 +101,9 @@ export const linedCylinder = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${-(bbox.width / 2) - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) + ry - (bbox.y - (bbox.top ?? 0))})` + `translate(${-(bbox.width / 2) - (bbox.x - (bbox.left ?? 0))}, ${ + -(bbox.height / 2) + ry - (bbox.y - (bbox.top ?? 0)) + })` ); node.intersect = function (point) { diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts index f3e7058340..34ee1a5038 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts @@ -65,7 +65,9 @@ export const linedWaveEdgedRect = async (parent: SVGAElement, node: Node) => { waveEdgeRect.attr('transform', `translate(0,${-waveAmplitude / 2})`); label.attr( 'transform', - `translate(${-w / 2 + (node.padding ?? 0) + ((w / 2) * 0.1) / 2 - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) - waveAmplitude / 2 - (bbox.y - (bbox.top ?? 0))})` + `translate(${ + -w / 2 + (node.padding ?? 0) + ((w / 2) * 0.1) / 2 - (bbox.x - (bbox.left ?? 0)) + },${-h / 2 + (node.padding ?? 0) - waveAmplitude / 2 - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, waveEdgeRect); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts index 8df2cf5f1f..8e5f2855db 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts @@ -67,7 +67,9 @@ export const multiRect = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${-(bbox.width / 2) - rectOffset - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) + rectOffset - (bbox.y - (bbox.top ?? 0))})` + `translate(${-(bbox.width / 2) - rectOffset - (bbox.x - (bbox.left ?? 0))}, ${ + -(bbox.height / 2) + rectOffset - (bbox.y - (bbox.top ?? 0)) + })` ); updateNodeBounds(node, multiRect); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiWaveEdgedRectangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiWaveEdgedRectangle.ts index 3d7c306ec9..6df285d32c 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiWaveEdgedRectangle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiWaveEdgedRectangle.ts @@ -89,7 +89,9 @@ export const multiWaveEdgedRectangle = async (parent: SVGAElement, node: Node) = label.attr( 'transform', - `translate(${-(bbox.width / 2) - rectOffset - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) + rectOffset - waveAmplitude / 2 - (bbox.y - (bbox.top ?? 0))})` + `translate(${-(bbox.width / 2) - rectOffset - (bbox.x - (bbox.left ?? 0))}, ${ + -(bbox.height / 2) + rectOffset - waveAmplitude / 2 - (bbox.y - (bbox.top ?? 0)) + })` ); updateNodeBounds(node, shape); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts index b10b608bbb..3e8feb3f0f 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts @@ -54,7 +54,9 @@ export const rect_left_inv_arrow = async ( label.attr( 'transform', - `translate(${-notch / 2 - bbox.width / 2 - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) - (bbox.y - (bbox.top ?? 0))})` + `translate(${-notch / 2 - bbox.width / 2 - (bbox.x - (bbox.left ?? 0))}, ${ + -(bbox.height / 2) - (bbox.y - (bbox.top ?? 0)) + })` ); updateNodeBounds(node, polygon); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/shadedProcess.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/shadedProcess.ts index 3a5ffac58e..333d5b3073 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/shadedProcess.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/shadedProcess.ts @@ -52,7 +52,9 @@ export const shadedProcess = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${-w / 2 + 4 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) - (bbox.y - (bbox.top ?? 0))})` + `translate(${-w / 2 + 4 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))},${ + -h / 2 + (node.padding ?? 0) - (bbox.y - (bbox.top ?? 0)) + })` ); updateNodeBounds(node, rect); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/slopedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/slopedRect.ts index cc5cf89a77..3a210359c9 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/slopedRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/slopedRect.ts @@ -47,7 +47,9 @@ export const slopedRect = async (parent: SVGAElement, node: Node) => { polygon.attr('transform', `translate(0, ${h / 4})`); label.attr( 'transform', - `translate(${-w / 2 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))}, ${-h / 4 + (node.padding ?? 0) - (bbox.y - (bbox.top ?? 0))})` + `translate(${-w / 2 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))}, ${ + -h / 4 + (node.padding ?? 0) - (bbox.y - (bbox.top ?? 0)) + })` ); updateNodeBounds(node, polygon); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedWaveEdgedRectangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedWaveEdgedRectangle.ts index c1d8d29555..0e56f5481c 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedWaveEdgedRectangle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedWaveEdgedRectangle.ts @@ -87,7 +87,9 @@ export const taggedWaveEdgedRectangle = async (parent: SVGAElement, node: Node) waveEdgeRect.attr('transform', `translate(0,${-waveAmplitude / 2})`); label.attr( 'transform', - `translate(${-w / 2 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) - waveAmplitude / 2 - (bbox.y - (bbox.top ?? 0))})` + `translate(${-w / 2 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))},${ + -h / 2 + (node.padding ?? 0) - waveAmplitude / 2 - (bbox.y - (bbox.top ?? 0)) + })` ); updateNodeBounds(node, waveEdgeRect); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts index f94073c32b..75cf7493e8 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts @@ -102,7 +102,9 @@ export const tiltedCylinder = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${-(bbox.width / 2) - rx - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) - (bbox.y - (bbox.top ?? 0))})` + `translate(${-(bbox.width / 2) - rx - (bbox.x - (bbox.left ?? 0))}, ${ + -(bbox.height / 2) - (bbox.y - (bbox.top ?? 0)) + })` ); updateNodeBounds(node, cylinder); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts index 7eb019f7ce..e38e463351 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts @@ -54,7 +54,10 @@ export const triangle = async (parent: SVGAElement, node: Node): Promise { waveEdgeRect.attr('transform', `translate(0,${-waveAmplitude / 2})`); label.attr( 'transform', - `translate(${-w / 2 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) - waveAmplitude - (bbox.y - (bbox.top ?? 0))})` + `translate(${-w / 2 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))},${ + -h / 2 + (node.padding ?? 0) - waveAmplitude - (bbox.y - (bbox.top ?? 0)) + })` ); updateNodeBounds(node, waveEdgeRect); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts index 2dd53f4a8e..a321f7b614 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts @@ -25,7 +25,9 @@ export const windowPane = async (parent: SVGAElement, node: Node) => { { x: x + w, y: y - rectOffset }, ]; - const path = `M${x - rectOffset},${y - rectOffset} L${x + w},${y - rectOffset} L${x + w},${y + h} L${x - rectOffset},${y + h} L${x - rectOffset},${y - rectOffset} + const path = `M${x - rectOffset},${y - rectOffset} L${x + w},${y - rectOffset} L${x + w},${ + y + h + } L${x - rectOffset},${y + h} L${x - rectOffset},${y - rectOffset} M${x - rectOffset},${y} L${x + w},${y} M${x},${y - rectOffset} L${x},${y + h}`; @@ -51,7 +53,9 @@ export const windowPane = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${-(bbox.width / 2) + rectOffset / 2 - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) + rectOffset / 2 - (bbox.y - (bbox.top ?? 0))})` + `translate(${-(bbox.width / 2) + rectOffset / 2 - (bbox.x - (bbox.left ?? 0))}, ${ + -(bbox.height / 2) + rectOffset / 2 - (bbox.y - (bbox.top ?? 0)) + })` ); updateNodeBounds(node, windowPane); From 0bc07f356d2a84cf45c972525ad388278750734b Mon Sep 17 00:00:00 2001 From: Bryan Date: Fri, 18 Oct 2024 20:54:03 +0100 Subject: [PATCH 06/10] add import for assert --- packages/mermaid/src/diagrams/packet/parser.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/mermaid/src/diagrams/packet/parser.ts b/packages/mermaid/src/diagrams/packet/parser.ts index eb58916f5e..905830d5de 100644 --- a/packages/mermaid/src/diagrams/packet/parser.ts +++ b/packages/mermaid/src/diagrams/packet/parser.ts @@ -5,6 +5,7 @@ import { log } from '../../logger.js'; import { populateCommonDb } from '../common/populateCommonDb.js'; import { db } from './db.js'; import type { PacketBlock, PacketWord } from './types.js'; +import assert from 'node:assert'; const maxPacketSize = 10_000; From 73653c348d4254fdeb3873613c17be1a975ca05c Mon Sep 17 00:00:00 2001 From: Bryan Date: Fri, 18 Oct 2024 21:12:55 +0100 Subject: [PATCH 07/10] remove import for assert --- packages/mermaid/src/diagrams/packet/parser.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/packet/parser.ts b/packages/mermaid/src/diagrams/packet/parser.ts index 905830d5de..eb58916f5e 100644 --- a/packages/mermaid/src/diagrams/packet/parser.ts +++ b/packages/mermaid/src/diagrams/packet/parser.ts @@ -5,7 +5,6 @@ import { log } from '../../logger.js'; import { populateCommonDb } from '../common/populateCommonDb.js'; import { db } from './db.js'; import type { PacketBlock, PacketWord } from './types.js'; -import assert from 'node:assert'; const maxPacketSize = 10_000; From 4cd3f0a8bb5871c1d27796f1b539c437574dfd58 Mon Sep 17 00:00:00 2001 From: Bryan Date: Fri, 18 Oct 2024 21:21:15 +0100 Subject: [PATCH 08/10] try implementing assert as if->throw --- packages/mermaid/src/diagrams/packet/parser.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagrams/packet/parser.ts b/packages/mermaid/src/diagrams/packet/parser.ts index eb58916f5e..71a3b1c4c5 100644 --- a/packages/mermaid/src/diagrams/packet/parser.ts +++ b/packages/mermaid/src/diagrams/packet/parser.ts @@ -63,8 +63,12 @@ const getNextFittingBlock = ( row: number, bitsPerRow: number ): [Required, PacketBlock | undefined] => { - assert(block.start !== undefined, 'start should have been set during first phase'); - assert(block.end !== undefined, 'end should have been set during first phase'); + if (block.start === undefined) { + throw new Error('start should have been set during first phase'); + } + if (block.end === undefined) { + throw new Error('end should have been set during first phase'); + } if (block.start > block.end) { throw new Error(`Block start ${block.start} is greater than block end ${block.end}.`); From 5fca47c5ecce15737ecae874307b52066615d17d Mon Sep 17 00:00:00 2001 From: Bryan Date: Fri, 18 Oct 2024 21:30:10 +0100 Subject: [PATCH 09/10] Revert "run prettier" This reverts commit 6d33d93b15f3362c2113b7d8a980b26f8c7d60ad. --- .esbuild/server.ts | 4 +--- .../integration/rendering/iconShape.spec.ts | 6 +----- .../integration/rendering/imageShape.spec.ts | 4 +--- .../src/diagrams/architecture/svgDraw.ts | 18 +++--------------- packages/mermaid/src/diagrams/block/layout.ts | 4 +--- .../src/diagrams/git/gitGraphRenderer.ts | 18 ++++-------------- .../mermaid/src/diagrams/state/dataFetcher.js | 4 +--- .../rendering-elements/clusters.js | 4 +--- .../shapes/curlyBraceLeft.ts | 4 +--- .../shapes/curlyBraceRight.ts | 4 +--- .../rendering-elements/shapes/curlyBraces.ts | 4 +--- .../rendering-elements/shapes/cylinder.ts | 4 +--- .../rendering-elements/shapes/dividedRect.ts | 4 +--- .../shapes/flippedTriangle.ts | 4 +--- .../rendering-elements/shapes/labelRect.ts | 4 +--- .../rendering-elements/shapes/linedCylinder.ts | 4 +--- .../shapes/linedWaveEdgedRect.ts | 4 +--- .../rendering-elements/shapes/multiRect.ts | 4 +--- .../shapes/multiWaveEdgedRectangle.ts | 4 +--- .../shapes/rectLeftInvArrow.ts | 4 +--- .../rendering-elements/shapes/shadedProcess.ts | 4 +--- .../rendering-elements/shapes/slopedRect.ts | 4 +--- .../shapes/taggedWaveEdgedRectangle.ts | 4 +--- .../shapes/tiltedCylinder.ts | 4 +--- .../rendering-elements/shapes/triangle.ts | 5 +---- .../shapes/waveEdgedRectangle.ts | 4 +--- .../rendering-elements/shapes/windowPane.ts | 8 ++------ 27 files changed, 33 insertions(+), 110 deletions(-) diff --git a/.esbuild/server.ts b/.esbuild/server.ts index 5bf214be9a..6e1bcb4602 100644 --- a/.esbuild/server.ts +++ b/.esbuild/server.ts @@ -36,9 +36,7 @@ const rebuildAll = async () => { console.time(timeLabel); await Promise.all( contexts.map(async ({ config, context }) => { - const buildVariant = `Rebuild ${buildNumber} Time (${Object.keys(config.entryPoints!)[0]} ${ - config.format - })`; + const buildVariant = `Rebuild ${buildNumber} Time (${Object.keys(config.entryPoints!)[0]} ${config.format})`; console.time(buildVariant); await context.rebuild(); console.timeEnd(buildVariant); diff --git a/cypress/integration/rendering/iconShape.spec.ts b/cypress/integration/rendering/iconShape.spec.ts index 8f4b530764..4c12c3fa34 100644 --- a/cypress/integration/rendering/iconShape.spec.ts +++ b/cypress/integration/rendering/iconShape.spec.ts @@ -14,11 +14,7 @@ looks.forEach((look) => { directions.forEach((direction) => { forms.forEach((form) => { labelPos.forEach((pos) => { - describe(`Test iconShape in ${ - form ? `${form} form,` : '' - } ${look} look and dir ${direction} with label position ${ - pos ? pos : 'not defined' - }`, () => { + describe(`Test iconShape in ${form ? `${form} form,` : ''} ${look} look and dir ${direction} with label position ${pos ? pos : 'not defined'}`, () => { it(`without label`, () => { let flowchartCode = `flowchart ${direction}\n`; flowchartCode += ` nA --> nAA@{ icon: 'fa:bell'`; diff --git a/cypress/integration/rendering/imageShape.spec.ts b/cypress/integration/rendering/imageShape.spec.ts index bcbdba1020..d2e267149d 100644 --- a/cypress/integration/rendering/imageShape.spec.ts +++ b/cypress/integration/rendering/imageShape.spec.ts @@ -12,9 +12,7 @@ const labelPos = [undefined, 't', 'b'] as const; looks.forEach((look) => { directions.forEach((direction) => { labelPos.forEach((pos) => { - describe(`Test imageShape in ${look} look and dir ${direction} with label position ${ - pos ? pos : 'not defined' - }`, () => { + describe(`Test imageShape in ${look} look and dir ${direction} with label position ${pos ? pos : 'not defined'}`, () => { it(`without label`, () => { let flowchartCode = `flowchart ${direction}\n`; flowchartCode += ` nA --> A@{ img: 'https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg', w: '100', h: '100' }\n`; diff --git a/packages/mermaid/src/diagrams/architecture/svgDraw.ts b/packages/mermaid/src/diagrams/architecture/svgDraw.ts index 60970a1868..b10a451fea 100644 --- a/packages/mermaid/src/diagrams/architecture/svgDraw.ts +++ b/packages/mermaid/src/diagrams/architecture/svgDraw.ts @@ -212,11 +212,7 @@ export const drawGroups = async function (groupsEl: D3Element, cy: cytoscape.Cor if (data.icon) { const bkgElem = groupLabelContainer.append('g'); bkgElem.html( - `${await getIconSVG(data.icon, { - height: groupIconSize, - width: groupIconSize, - fallbackPrefix: architectureIcons.prefix, - })}` + `${await getIconSVG(data.icon, { height: groupIconSize, width: groupIconSize, fallbackPrefix: architectureIcons.prefix })}` ); bkgElem.attr( 'transform', @@ -301,19 +297,11 @@ export const drawServices = async function ( // throw new Error(`Invalid SVG Icon name: "${service.icon}"`); // } bkgElem.html( - `${await getIconSVG(service.icon, { - height: iconSize, - width: iconSize, - fallbackPrefix: architectureIcons.prefix, - })}` + `${await getIconSVG(service.icon, { height: iconSize, width: iconSize, fallbackPrefix: architectureIcons.prefix })}` ); } else if (service.iconText) { bkgElem.html( - `${await getIconSVG('blank', { - height: iconSize, - width: iconSize, - fallbackPrefix: architectureIcons.prefix, - })}` + `${await getIconSVG('blank', { height: iconSize, width: iconSize, fallbackPrefix: architectureIcons.prefix })}` ); const textElemContainer = bkgElem.append('g'); const fo = textElemContainer diff --git a/packages/mermaid/src/diagrams/block/layout.ts b/packages/mermaid/src/diagrams/block/layout.ts index 5081a53734..7f44a5f19f 100644 --- a/packages/mermaid/src/diagrams/block/layout.ts +++ b/packages/mermaid/src/diagrams/block/layout.ts @@ -105,9 +105,7 @@ function setBlockSizes(block: Block, db: BlockDB, siblingWidth = 0, siblingHeigh for (const child of block.children) { if (child.size) { log.debug( - `abc95 Setting size of children of ${block.id} id=${ - child.id - } ${maxWidth} ${maxHeight} ${JSON.stringify(child.size)}` + `abc95 Setting size of children of ${block.id} id=${child.id} ${maxWidth} ${maxHeight} ${JSON.stringify(child.size)}` ); child.size.width = maxWidth * (child.widthInColumns ?? 1) + padding * ((child.widthInColumns ?? 1) - 1); diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.ts b/packages/mermaid/src/diagrams/git/gitGraphRenderer.ts index dc92cfff64..39a64a623b 100644 --- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.ts +++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.ts @@ -276,11 +276,7 @@ const drawCommitBullet = ( cross .attr( 'd', - `M ${commitPosition.x - 5},${commitPosition.y - 5}L${commitPosition.x + 5},${ - commitPosition.y + 5 - }M${commitPosition.x - 5},${commitPosition.y + 5}L${commitPosition.x + 5},${ - commitPosition.y - 5 - }` + `M ${commitPosition.x - 5},${commitPosition.y - 5}L${commitPosition.x + 5},${commitPosition.y + 5}M${commitPosition.x - 5},${commitPosition.y + 5}L${commitPosition.x + 5},${commitPosition.y - 5}` ) .attr('class', `commit ${typeClass} ${commit.id} commit${branchIndex % THEME_COLOR_LIMIT}`); } @@ -656,27 +652,21 @@ const drawArrow = ( colorClassNum = branchPos.get(commitA.branch)?.index; - lineDef = `M ${p1.x} ${p1.y} L ${lineX + radius} ${p1.y} ${arc} ${lineX} ${ - p1.y + offset - } L ${lineX} ${p2.y - radius} ${arc2} ${lineX - offset} ${p2.y} L ${p2.x} ${p2.y}`; + lineDef = `M ${p1.x} ${p1.y} L ${lineX + radius} ${p1.y} ${arc} ${lineX} ${p1.y + offset} L ${lineX} ${p2.y - radius} ${arc2} ${lineX - offset} ${p2.y} L ${p2.x} ${p2.y}`; } } else if (dir === 'BT') { if (p1.x < p2.x) { // Source commit is on branch position left of destination commit // so render arrow rightward with colour of destination branch - lineDef = `M ${p1.x} ${p1.y} L ${lineX - radius} ${p1.y} ${arc} ${lineX} ${ - p1.y - offset - } L ${lineX} ${p2.y + radius} ${arc2} ${lineX + offset} ${p2.y} L ${p2.x} ${p2.y}`; + lineDef = `M ${p1.x} ${p1.y} L ${lineX - radius} ${p1.y} ${arc} ${lineX} ${p1.y - offset} L ${lineX} ${p2.y + radius} ${arc2} ${lineX + offset} ${p2.y} L ${p2.x} ${p2.y}`; } else { // Source commit is on branch position right of destination commit // so render arrow leftward with colour of source branch colorClassNum = branchPos.get(commitA.branch)?.index; - lineDef = `M ${p1.x} ${p1.y} L ${lineX + radius} ${p1.y} ${arc2} ${lineX} ${ - p1.y - offset - } L ${lineX} ${p2.y + radius} ${arc} ${lineX - offset} ${p2.y} L ${p2.x} ${p2.y}`; + lineDef = `M ${p1.x} ${p1.y} L ${lineX + radius} ${p1.y} ${arc2} ${lineX} ${p1.y - offset} L ${lineX} ${p2.y + radius} ${arc} ${lineX - offset} ${p2.y} L ${p2.x} ${p2.y}`; } } else { if (p1.y < p2.y) { diff --git a/packages/mermaid/src/diagrams/state/dataFetcher.js b/packages/mermaid/src/diagrams/state/dataFetcher.js index 7fb2f2da16..921544ff27 100644 --- a/packages/mermaid/src/diagrams/state/dataFetcher.js +++ b/packages/mermaid/src/diagrams/state/dataFetcher.js @@ -258,9 +258,7 @@ export const dataFetcher = ( newNode.isGroup = true; newNode.dir = getDir(parsedItem); newNode.shape = parsedItem.type === DIVIDER_TYPE ? SHAPE_DIVIDER : SHAPE_GROUP; - newNode.cssClasses = `${newNode.cssClasses} ${CSS_DIAGRAM_CLUSTER} ${ - altFlag ? CSS_DIAGRAM_CLUSTER_ALT : '' - }`; + newNode.cssClasses = `${newNode.cssClasses} ${CSS_DIAGRAM_CLUSTER} ${altFlag ? CSS_DIAGRAM_CLUSTER_ALT : ''}`; } // This is what will be added to the graph diff --git a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js index 80d77beaaa..a62a920136 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js @@ -264,9 +264,7 @@ const roundedWithTitle = async (parent, node) => { label.attr( 'transform', - `translate(${node.x - bbox.width / 2}, ${ - y + 1 - (evaluate(siteConfig.flowchart.htmlLabels) ? 0 : 3) - })` + `translate(${node.x - bbox.width / 2}, ${y + 1 - (evaluate(siteConfig.flowchart.htmlLabels) ? 0 : 3)})` ); const rectBox = rect.node().getBBox(); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceLeft.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceLeft.ts index 8fce5b27e8..32c13e0e95 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceLeft.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceLeft.ts @@ -95,9 +95,7 @@ export const curlyBraceLeft = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${-w / 2 + radius - (bbox.x - (bbox.left ?? 0))},${ - -h / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0)) - })` + `translate(${-w / 2 + radius - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, curlyBraceLeftShape); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceRight.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceRight.ts index 7e42732e24..43f5c65ffc 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceRight.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceRight.ts @@ -95,9 +95,7 @@ export const curlyBraceRight = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${-w / 2 + (node.padding ?? 0) / 2 - (bbox.x - (bbox.left ?? 0))},${ - -h / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0)) - })` + `translate(${-w / 2 + (node.padding ?? 0) / 2 - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, curlyBraceRightShape); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraces.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraces.ts index 6f8e7d4a41..23471b8300 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraces.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraces.ts @@ -114,9 +114,7 @@ export const curlyBraces = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${-w / 2 + (node.padding ?? 0) / 2 - (bbox.x - (bbox.left ?? 0))},${ - -h / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0)) - })` + `translate(${-w / 2 + (node.padding ?? 0) / 2 - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, curlyBracesShape); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts index aad8e2aefa..c8a69665a4 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts @@ -90,9 +90,7 @@ export const cylinder = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${-(bbox.width / 2) - (bbox.x - (bbox.left ?? 0))}, ${ - -(bbox.height / 2) + (node.padding ?? 0) / 1.5 - (bbox.y - (bbox.top ?? 0)) - })` + `translate(${-(bbox.width / 2) - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) + (node.padding ?? 0) / 1.5 - (bbox.y - (bbox.top ?? 0))})` ); node.intersect = function (point) { diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts index 2641dd72eb..0fdc79607f 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts @@ -52,9 +52,7 @@ export const dividedRectangle = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${x + (node.padding ?? 0) / 2 - (bbox.x - (bbox.left ?? 0))}, ${ - y + rectOffset + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0)) - })` + `translate(${x + (node.padding ?? 0) / 2 - (bbox.x - (bbox.left ?? 0))}, ${y + rectOffset + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, polygon); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts index 1fba7a9eeb..9c3ad7f187 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts @@ -51,9 +51,7 @@ export const flippedTriangle = async (parent: SVGAElement, node: Node): Promise< label.attr( 'transform', - `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))}, ${ - -h / 2 + (node.padding ?? 0) / 2 + (bbox.y - (bbox.top ?? 0)) - })` + `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))}, ${-h / 2 + (node.padding ?? 0) / 2 + (bbox.y - (bbox.top ?? 0))})` ); node.intersect = function (point) { diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/labelRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/labelRect.ts index 2673b992ed..7aff919024 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/labelRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/labelRect.ts @@ -29,9 +29,7 @@ export const labelRect = async (parent: SVGElement, node: Node) => { shapeSvg.attr('class', 'label edgeLabel'); label.attr( 'transform', - `translate(${-(bbox.width / 2) - (bbox.x - (bbox.left ?? 0))}, ${ - -(bbox.height / 2) - (bbox.y - (bbox.top ?? 0)) - })` + `translate(${-(bbox.width / 2) - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) - (bbox.y - (bbox.top ?? 0))})` ); // if (node.props) { diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts index 9f3ebaeb2d..819d48faf6 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts @@ -101,9 +101,7 @@ export const linedCylinder = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${-(bbox.width / 2) - (bbox.x - (bbox.left ?? 0))}, ${ - -(bbox.height / 2) + ry - (bbox.y - (bbox.top ?? 0)) - })` + `translate(${-(bbox.width / 2) - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) + ry - (bbox.y - (bbox.top ?? 0))})` ); node.intersect = function (point) { diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts index 34ee1a5038..f3e7058340 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts @@ -65,9 +65,7 @@ export const linedWaveEdgedRect = async (parent: SVGAElement, node: Node) => { waveEdgeRect.attr('transform', `translate(0,${-waveAmplitude / 2})`); label.attr( 'transform', - `translate(${ - -w / 2 + (node.padding ?? 0) + ((w / 2) * 0.1) / 2 - (bbox.x - (bbox.left ?? 0)) - },${-h / 2 + (node.padding ?? 0) - waveAmplitude / 2 - (bbox.y - (bbox.top ?? 0))})` + `translate(${-w / 2 + (node.padding ?? 0) + ((w / 2) * 0.1) / 2 - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) - waveAmplitude / 2 - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, waveEdgeRect); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts index 8e5f2855db..8df2cf5f1f 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts @@ -67,9 +67,7 @@ export const multiRect = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${-(bbox.width / 2) - rectOffset - (bbox.x - (bbox.left ?? 0))}, ${ - -(bbox.height / 2) + rectOffset - (bbox.y - (bbox.top ?? 0)) - })` + `translate(${-(bbox.width / 2) - rectOffset - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) + rectOffset - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, multiRect); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiWaveEdgedRectangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiWaveEdgedRectangle.ts index 6df285d32c..3d7c306ec9 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiWaveEdgedRectangle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/multiWaveEdgedRectangle.ts @@ -89,9 +89,7 @@ export const multiWaveEdgedRectangle = async (parent: SVGAElement, node: Node) = label.attr( 'transform', - `translate(${-(bbox.width / 2) - rectOffset - (bbox.x - (bbox.left ?? 0))}, ${ - -(bbox.height / 2) + rectOffset - waveAmplitude / 2 - (bbox.y - (bbox.top ?? 0)) - })` + `translate(${-(bbox.width / 2) - rectOffset - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) + rectOffset - waveAmplitude / 2 - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, shape); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts index 3e8feb3f0f..b10b608bbb 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts @@ -54,9 +54,7 @@ export const rect_left_inv_arrow = async ( label.attr( 'transform', - `translate(${-notch / 2 - bbox.width / 2 - (bbox.x - (bbox.left ?? 0))}, ${ - -(bbox.height / 2) - (bbox.y - (bbox.top ?? 0)) - })` + `translate(${-notch / 2 - bbox.width / 2 - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, polygon); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/shadedProcess.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/shadedProcess.ts index 333d5b3073..3a5ffac58e 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/shadedProcess.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/shadedProcess.ts @@ -52,9 +52,7 @@ export const shadedProcess = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${-w / 2 + 4 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))},${ - -h / 2 + (node.padding ?? 0) - (bbox.y - (bbox.top ?? 0)) - })` + `translate(${-w / 2 + 4 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, rect); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/slopedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/slopedRect.ts index 3a210359c9..cc5cf89a77 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/slopedRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/slopedRect.ts @@ -47,9 +47,7 @@ export const slopedRect = async (parent: SVGAElement, node: Node) => { polygon.attr('transform', `translate(0, ${h / 4})`); label.attr( 'transform', - `translate(${-w / 2 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))}, ${ - -h / 4 + (node.padding ?? 0) - (bbox.y - (bbox.top ?? 0)) - })` + `translate(${-w / 2 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))}, ${-h / 4 + (node.padding ?? 0) - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, polygon); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedWaveEdgedRectangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedWaveEdgedRectangle.ts index 0e56f5481c..c1d8d29555 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedWaveEdgedRectangle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedWaveEdgedRectangle.ts @@ -87,9 +87,7 @@ export const taggedWaveEdgedRectangle = async (parent: SVGAElement, node: Node) waveEdgeRect.attr('transform', `translate(0,${-waveAmplitude / 2})`); label.attr( 'transform', - `translate(${-w / 2 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))},${ - -h / 2 + (node.padding ?? 0) - waveAmplitude / 2 - (bbox.y - (bbox.top ?? 0)) - })` + `translate(${-w / 2 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) - waveAmplitude / 2 - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, waveEdgeRect); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts index 75cf7493e8..f94073c32b 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts @@ -102,9 +102,7 @@ export const tiltedCylinder = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${-(bbox.width / 2) - rx - (bbox.x - (bbox.left ?? 0))}, ${ - -(bbox.height / 2) - (bbox.y - (bbox.top ?? 0)) - })` + `translate(${-(bbox.width / 2) - rx - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, cylinder); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts index e38e463351..7eb019f7ce 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts @@ -54,10 +54,7 @@ export const triangle = async (parent: SVGAElement, node: Node): Promise { waveEdgeRect.attr('transform', `translate(0,${-waveAmplitude / 2})`); label.attr( 'transform', - `translate(${-w / 2 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))},${ - -h / 2 + (node.padding ?? 0) - waveAmplitude - (bbox.y - (bbox.top ?? 0)) - })` + `translate(${-w / 2 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) - waveAmplitude - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, waveEdgeRect); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts index a321f7b614..2dd53f4a8e 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts @@ -25,9 +25,7 @@ export const windowPane = async (parent: SVGAElement, node: Node) => { { x: x + w, y: y - rectOffset }, ]; - const path = `M${x - rectOffset},${y - rectOffset} L${x + w},${y - rectOffset} L${x + w},${ - y + h - } L${x - rectOffset},${y + h} L${x - rectOffset},${y - rectOffset} + const path = `M${x - rectOffset},${y - rectOffset} L${x + w},${y - rectOffset} L${x + w},${y + h} L${x - rectOffset},${y + h} L${x - rectOffset},${y - rectOffset} M${x - rectOffset},${y} L${x + w},${y} M${x},${y - rectOffset} L${x},${y + h}`; @@ -53,9 +51,7 @@ export const windowPane = async (parent: SVGAElement, node: Node) => { label.attr( 'transform', - `translate(${-(bbox.width / 2) + rectOffset / 2 - (bbox.x - (bbox.left ?? 0))}, ${ - -(bbox.height / 2) + rectOffset / 2 - (bbox.y - (bbox.top ?? 0)) - })` + `translate(${-(bbox.width / 2) + rectOffset / 2 - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) + rectOffset / 2 - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, windowPane); From c828867852f332829d49c942a7df395eb9b98b18 Mon Sep 17 00:00:00 2001 From: Bryan Date: Sat, 19 Oct 2024 17:50:00 +0100 Subject: [PATCH 10/10] add documentation --- docs/syntax/packet.md | 40 ++++++++-------------- packages/mermaid/src/docs/syntax/packet.md | 16 +++++++-- 2 files changed, 28 insertions(+), 28 deletions(-) diff --git a/docs/syntax/packet.md b/docs/syntax/packet.md index 5eab819105..5214f6c002 100644 --- a/docs/syntax/packet.md +++ b/docs/syntax/packet.md @@ -23,39 +23,26 @@ start-end: "Block name" %% Multi-bit blocks ... More Fields ... ``` -## Examples +### Bits Syntax (v\+) -```mermaid-example ---- -title: "TCP Packet" ---- +Using start and end bit counts can be difficult, especially when modifying a design. For this we add a bit count field, which starts from the end of the previous field automagically. Use `bit` or `bits` interchangeably to set the number of bits, thus: + +````md 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)" -``` +1bit: "Block name" %% Single-bit block +8bits: "Block name" %% 8-bit block +9-15: "Manually set start and end, it's fine to mix and match" +... More Fields ... -```mermaid +## Examples + +```mermaid-example --- title: "TCP Packet" --- packet-beta -0-15: "Source Port" -16-31: "Destination Port" +16bits: "Source Port" +16bits: "Destination Port" 32-63: "Sequence Number" 64-95: "Acknowledgment Number" 96-99: "Data Offset" @@ -72,6 +59,7 @@ packet-beta 160-191: "(Options and Padding)" 192-255: "Data (variable length)" ``` +```` ```mermaid-example packet-beta diff --git a/packages/mermaid/src/docs/syntax/packet.md b/packages/mermaid/src/docs/syntax/packet.md index c7b6cb71b4..5a29926540 100644 --- a/packages/mermaid/src/docs/syntax/packet.md +++ b/packages/mermaid/src/docs/syntax/packet.md @@ -17,6 +17,17 @@ start-end: "Block name" %% Multi-bit blocks ... More Fields ... ``` +### Bits Syntax (v+) + +Using start and end bit counts can be difficult, especially when modifying a design. For this we add a bit count field, which starts from the end of the previous field automagically. Use `bit` or `bits` interchangeably to set the number of bits, thus: + +````md +packet-beta +1bit: "Block name" %% Single-bit block +8bits: "Block name" %% 8-bit block +9-15: "Manually set start and end, it's fine to mix and match" +... More Fields ... + ## Examples ```mermaid-example @@ -24,8 +35,8 @@ start-end: "Block name" %% Multi-bit blocks title: "TCP Packet" --- packet-beta -0-15: "Source Port" -16-31: "Destination Port" +16bits: "Source Port" +16bits: "Destination Port" 32-63: "Sequence Number" 64-95: "Acknowledgment Number" 96-99: "Data Offset" @@ -42,6 +53,7 @@ packet-beta 160-191: "(Options and Padding)" 192-255: "Data (variable length)" ``` +```` ```mermaid-example packet-beta