Skip to content

Commit

Permalink
feat: Support showBits
Browse files Browse the repository at this point in the history
  • Loading branch information
sidharthv96 committed Sep 14, 2023
1 parent 75f1f92 commit 043729f
Show file tree
Hide file tree
Showing 4 changed files with 39 additions and 6 deletions.
26 changes: 26 additions & 0 deletions demos/packet.html
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,32 @@ <h1>Packet diagram demo</h1>
192-223: "data"
</pre>

<pre class="mermaid">
---
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"
</pre>

<script type="module">
import mermaid from '/mermaid.esm.mjs';
mermaid.initialize({
Expand Down
6 changes: 5 additions & 1 deletion packages/mermaid/src/diagrams/packet/db.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,14 @@ let data: PacketData = structuredClone(defaultPacketData);
export const DEFAULT_PACKET_CONFIG: Required<PacketDiagramConfig> = DEFAULT_CONFIG.packet;

export const getConfig = (): Required<PacketDiagramConfig> => {
return structuredClone({
const config = structuredClone({
...DEFAULT_PACKET_CONFIG,
...commonGetConfig().packet,
});
if (config.showBits) {
config.paddingY += 10;
}
return config;
};

export const getPacket = (): Row[] => data.packet;
Expand Down
11 changes: 7 additions & 4 deletions packages/mermaid/src/diagrams/packet/renderer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const drawWord = (
svg: SVG,
row: Row,
rowNumber: number,
{ rowHeight, paddingX, paddingY, bitWidth, bitsPerRow }: Required<PacketDiagramConfig>
{ rowHeight, paddingX, paddingY, bitWidth, bitsPerRow, showBits }: Required<PacketDiagramConfig>
) => {
const group: Group = svg.append('g');
const wordY = rowNumber * (rowHeight + paddingY) + paddingY;
Expand All @@ -53,13 +53,16 @@ const drawWord = (
.attr('text-anchor', 'middle')
.text(block.label);

if (!showBits) {
continue;
}
// Start byte count
const isSingleBlock = block.end === block.start;
const byteNumberY = wordY - 2;
const bitNumberY = wordY - 2;
group
.append('text')
.attr('x', blockX + (isSingleBlock ? width / 2 : 0))
.attr('y', byteNumberY)
.attr('y', bitNumberY)
.attr('class', 'byte start')
.attr('dominant-baseline', 'auto')
.attr('text-anchor', isSingleBlock ? 'middle' : 'start')
Expand All @@ -70,7 +73,7 @@ const drawWord = (
group
.append('text')
.attr('x', blockX + width)
.attr('y', byteNumberY)
.attr('y', bitNumberY)
.attr('class', 'byte end')
.attr('dominant-baseline', 'auto')
.attr('text-anchor', 'end')
Expand Down
2 changes: 1 addition & 1 deletion packages/mermaid/src/schemas/config.schema.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -1880,7 +1880,7 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file)
default: 5
paddingY:
description: The vertical padding between the rows.
default: 15
default: 5

FontCalculator:
title: Font Calculator
Expand Down

0 comments on commit 043729f

Please sign in to comment.