marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-18 06:49:47 +02:00
Code Issues Packages Projects Releases Wiki Activity

Handling of animation classes

Browse Source
This commit is contained in:
Knut Sveidqvist
2025-06-23 14:02:55 +02:00
parent ba7d76f923
commit ff6bc3b374
4 changed files with 32 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
cypress/platform/knsv2.html
View File

@@ -106,13 +106,15 @@
<body>
<pre id="diagram4" class="mermaid">
flowchart LR
flowchart RL
AB["apa@apa@"] --> B(("`apa@apa`"))
</pre>
<pre id="diagram4" class="mermaid">
flowchart
D(("for D"))
</pre>
<h1>below</h1>
<pre id="diagram4" class="mermaid">
flowchart LR
A e1@==> B

15
packages/mermaid/src/diagrams/flowchart/parser/flow-chev-style.spec.js
View File

@@ -99,6 +99,21 @@ describe('[Chevrotain Style] when parsing', () => {
expect(classes.get('exClass').styles[0]).toBe('background:#bbb');
expect(classes.get('exClass').styles[1]).toBe('border:1px solid red');
});
it('should be possible to declare a class with animations', function () {
// Simplified test - complex escaped comma syntax not yet supported in Chevrotain parser
const res = flow.parse(
'graph TD;classDef exClass stroke-width:2,stroke-dasharray:10,stroke-dashoffset:-180,animation:edge-animation-frame,stroke-linecap:round;'
);
const classes = flow.yy.getClasses();
expect(classes.get('exClass').styles.length).toBe(5);
expect(classes.get('exClass').styles[0]).toBe('stroke-width:2');
expect(classes.get('exClass').styles[1]).toBe('stroke-dasharray:10');
expect(classes.get('exClass').styles[2]).toBe('stroke-dashoffset:-180');
expect(classes.get('exClass').styles[3]).toBe('animation:edge-animation-frame');
expect(classes.get('exClass').styles[4]).toBe('stroke-linecap:round');
});
it('should be possible to declare multiple classes', function () {
const res = flow.parse(

14
packages/mermaid/src/diagrams/flowchart/parser/flowLexer.ts
View File

@@ -1159,9 +1159,10 @@ const EOF = createToken({
// Complex pattern to handle all edge cases including punctuation at start/end
// Includes : and , characters to match JISON behavior, but excludes ::: to avoid conflicts with StyleSeparator
// Excludes , when followed by digits to allow proper comma-separated number parsing
// CRITICAL: Excludes \ when followed by , to allow EscapedComma token to match
const NODE_STRING = createToken({
name: 'NODE_STRING',
pattern: /([\w!"#$%&'*+./?\\`]|:(?!::)|-(?=[^.>-])|=(?!=)|,(?!\d))+/,
pattern: /([\w!"#$%&'*+./?`]|\\(?!,)|:(?!::)|-(?=[^.>-])|=(?!=)|,(?!\d))+/,
});
// ============================================================================
@@ -1485,6 +1486,14 @@ const Colon = createToken({
longer_alt: NODE_STRING,
});
// Escaped comma token (must come before regular Comma for precedence)
// CRITICAL FIX: Handle escaped commas (\,) in CSS values like stroke-dasharray:10\,8
const EscapedComma = createToken({
name: 'EscapedComma',
pattern: /\\,/,
longer_alt: NODE_STRING,
});
const Comma = createToken({
name: 'Comma',
pattern: /,/,
@@ -1868,6 +1877,7 @@ const multiModeLexerDefinition = {
Minus,
StyleSeparator, // Must come before Colon to avoid conflicts (:::)
Colon,
EscapedComma, // CRITICAL: Must come before Comma for precedence
Comma,
// Numbers must come before NODE_STRING to avoid being captured by it
@@ -2060,6 +2070,7 @@ export const allTokens = [
// Basic punctuation (must come before NODE_STRING to avoid being captured by it)
StyleSeparator, // Must come before Colon to avoid conflicts (:::)
Colon,
EscapedComma, // CRITICAL: Must come before Comma for precedence
Comma,
Pipe,
PipeEnd,
@@ -2233,6 +2244,7 @@ export {
// Basic punctuation
StyleSeparator, // Must come before Colon to avoid conflicts (:::)
Colon,
EscapedComma, // CRITICAL: Must come before Comma for precedence
Comma,
Pipe,
PipeEnd,

1
packages/mermaid/src/diagrams/flowchart/parser/flowParser.ts
View File

@@ -1141,6 +1141,7 @@ export class FlowchartParser extends CstParser {
{ ALT: () => this.CONSUME(tokens.Colon) },
{ ALT: () => this.CONSUME(tokens.Minus) },
{ ALT: () => this.CONSUME(tokens.DirectionValue) }, // For values like 'solid'
{ ALT: () => this.CONSUME(tokens.EscapedComma) }, // CRITICAL: Handle escaped commas in CSS
// Don't consume Semicolon as it's a statement separator
]);
});