GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

refactor: Separate default options in styles

Browse Source
This commit is contained in:
Sidharth Vinod 2023-11-15 00:52:56 +05:30
parent 9925b9b455
commit 1a8743ec11
No known key found for this signature in database
GPG Key ID: FB5CCD378D3907CD
1 changed files with 27 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
packages/mermaid/src/diagrams/packet/styles.ts
View File

@ -1,31 +1,45 @@
import type { DiagramStylesProvider } from '../../diagram-api/types.js'; import type { DiagramStylesProvider } from '../../diagram-api/types.js';
import { log } from '../../logger.js'; import { cleanAndMerge } from '../../utils.js';
import type { PacketStyleOptions } from './types.js'; import type { PacketStyleOptions } from './types.js';
export const styles: DiagramStylesProvider = (options: { packet?: PacketStyleOptions } = {}) => { const defaultPacketStyleOptions: PacketStyleOptions = {
log.debug({ options }); 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 ` return `
.packetByte { .packetByte {
font-size: ${options.packet?.byteFontSize ?? '10px'}; font-size: ${options.byteFontSize};
} }
.packetByte.start { .packetByte.start {
fill: ${options.packet?.startByteColor ?? 'black'}; fill: ${options.startByteColor};
} }
.packetByte.end { .packetByte.end {
fill: ${options.packet?.endByteColor ?? 'black'}; fill: ${options.endByteColor};
} }
.packetLabel { .packetLabel {
fill: ${options.packet?.labelColor ?? 'black'}; fill: ${options.labelColor};
font-size: ${options.packet?.labelFontSize ?? '12px'}; font-size: ${options.labelFontSize};
} }
.packetTitle { .packetTitle {
fill: ${options.packet?.titleColor ?? 'black'}; fill: ${options.titleColor};
font-size: ${options.packet?.titleFontSize ?? '14px'}; font-size: ${options.titleFontSize};
} }
.packetBlock { .packetBlock {
stroke: ${options.packet?.blockStrokeColor ?? 'black'}; stroke: ${options.blockStrokeColor};
stroke-width: ${options.packet?.blockStrokeWidth ?? '1'}; stroke-width: ${options.blockStrokeWidth};
fill: ${options.packet?.blockFillColor ?? '#efefef'}; fill: ${options.blockFillColor};
} }
`; `;
}; };