From 406c0d869b28227c382d9cff2845ccad2d279557 Mon Sep 17 00:00:00 2001 From: Ashish Jain Date: Tue, 18 Jun 2024 11:48:24 +0200 Subject: [PATCH] Add support for custom cssStyle and compiledStyles for custom classDefs for flowchart --- cypress/platform/knsv2.html | 359 +- .../src/diagrams/flowchart/flowDiagram-v2.ts | 12 +- .../mermaid/src/diagrams/flowchart/styles.ts | 6 +- .../state/stateRenderer-v3-unified.ts | 1 + pnpm-lock.yaml | 17931 +++++++++------- 5 files changed, 10058 insertions(+), 8251 deletions(-) diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html index 268495be3..f4a357169 100644 --- a/cypress/platform/knsv2.html +++ b/cypress/platform/knsv2.html @@ -75,340 +75,45 @@ -

Case 1

-
- 
-stateDiagram-v2
-AState: Should NOT be white
-BState
-classDef exampleStyleClass fill:#fff,color: blue;
-class AState,BState exampleStyleClass
-style AState fill:#636,border:1px solid red,color:white;
-
- 
-        %%{init: {"look": "classic"} }%%
-stateDiagram-v2
-AState: Should NOT be white
-BState
-classDef exampleStyleClass fill:#fff,color: blue;
-class AState,BState exampleStyleClass
-style AState fill:#636,border:1px solid red,color:white;
-
- 
-stateDiagram-v2
-
-classDef exampleStyleClass background:#bbb,border:1px solid red;
-a --> b
-class a exampleStyleClass
-%% a:::exampleStyleClass
-
- 
-stateDiagram
-   direction TB
-
-   accTitle: This is the accessible title
-   accDescr: This is an accessible description
-
-   classDef notMoving fill:white
-   classDef movement font-style:italic;
-   classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
-
-   [*] --> Still:::notMoving
-   Still --> [*]
-   Still --> Moving:::movement
-   Moving --> Still
-   Moving --> Crash:::movement
-   Crash:::badBadEvent --> [*]
-
- 
-stateDiagram-v2
-    MyState
-    note left of MyState : I am a leftie
-    note right of MyState : I am a rightie
-
-
- 
-stateDiagram
-%% direction LR
-
-        state C0 {
-          A0 --> B0
-        }
-
-      C0 --> Apa0
-
-
- 
-stateDiagram
-direction LR
-
-
-        state C1 {
-          A1 --> B1
-        }
-
-      C1 --> Apa1
-
-
-
-

Case 2

-
- 
-stateDiagram
-direction LR
-      state Gorilla0 {
-        state Apa0 {
-          A0 --> B0
-        }
-
-      }
-      Apa --> Gorilla0:Label
-      A0 --> C0
-      %% C1: "`This is C`"
-
- 
-stateDiagram
-direction LR
-        state Apa1 {
-          A1
-        }
-
-      Apa11 --> Apa1
-      A1 --> C1
-      %% C1: "`This is C`"
-
- 
-stateDiagram
-    [*] --> Level1
-
-    state Level1 {
-        [*] --> Level2
-
-        state Level2 {
-            [*] --> level2
-            level2 --> Level3
-
-            state Level3 {
-                [*] --> level3
-                level3 --> [*]
-            }
-        }
-    }
-
-
- 
-flowchart LR
-subgraph Apa["Apa"]
-    B["This is B"]
-    A["Start"]
-end
-    A --> B & C["C"]
-    Apa --> C
+    
+flowchart
+   a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a
+        a_a --> c --> d_d --> c_c
+        classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
+        class a_a apa;
+        click a_a "http://www.aftonbladet.se" "bookmark"
+        click c_c callback "new tooltip"
       

-    
-flowchart RL
-subgraph Apa["Apa"]
-  subgraph Gorilla
-    A["Start"]
-    B["This is B"]
-  end
-end
-    A --> B & C["C"]
-    Gorilla --> C
-      

-    
+    
 flowchart LR
-subgraph Apa["Apa"]
-  subgraph Gorilla
-    A["Start"]
-    B["This is B"]
-  end
-end
-    A --> B & C["C"]
-    Apa --> C
-      

-    
-flowchart LR
-subgraph Apa["Apa"]
-  subgraph Gorilla
-    B["This is B"]
-    A["Start"]
-  end
-end
-Apa --> C
-A --> B & C["C"]
-      

+    id1(Start)-->id2(Stop)
+    style id1 fill:#f9f,stroke:#333,stroke-width:4px
+    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
 
-    
-flowchart LR
-    subgraph Gorilla
-      subgraph Apa
-        A[A] --- B
-      end
-    end
-    Apa --- C
-    A --x C
+      
     

 
-    
----
-config:
-  look: neo
-  theme: neo
-  layout: elk
-  elk.mergeEdges: true
-  themeVariables: {}
----
-%% 'elk.stress',
-%% 'elk.force'
-%%'elk.mrtree'
-%% 'elk.sporeOverlap
-stateDiagram
-  direction TB
-  A --> B
-  A --> C
-  A --> D
-  A --> E
-  A --> F
-  state F {
-    Another
-  }
-  Another --> A
+    
+      flowchart LR
+    A:::foo & B:::bar --> C:::foobar
+    classDef foo stroke:#f00
+    classDef bar stroke:#0f0
+    classDef ash color:red
+    class C ash
+    style C stroke:#00f, fill:black
 
+    

 
-      

-    
-flowchart LR
-    Apa --Hello--> C
-
-      

-    
-      %%{init: {"layout": "dagre", "mergeEdges": false} }%%
-flowchart LR
-      A ==> B(This is B)
-    A[Start] --> B(Is it?)
-    B -- Yes --> C[OK]
-    C --> D[Rethink]
-    D --> B
-    B -. No ...-> E[End]
-
-
-      

-    
-      %%{init: {"layout": "elk", "mergeEdges": true} }%%
-flowchart
-      A --> B(This is B)
-      

-    
-      %%{init: {"layout": "elk", "mergeEdges": false, "elk.nodePlacement.strategy": "SIMPLE"} }%%
+    
       stateDiagram
-    state if_state <<choice>>
-    [*] --> IsPositive
-    IsPositive --> if_state
-    if_state --> False: if n < 0
-    if_state --> True : if n >= 0
-      

-    
-      %%{init: {"layout": "elk", "mergeEdges": false, "elk.nodePlacement.strategy": "SIMPLE"} }%%
-      stateDiagram
-    state if_state <<choice>>
-    [*] --> IsPositive
-    IsPositive --> if_state
-    if_state --> False: if n < 0
-    if_state --> True : if n >= 0
-      

-    
-      %%{init: {"layout": "dagre", "mergeEdges": true} }%%
-stateDiagram
-  direction TB
-  State T1 {
-    T12--> T11
-  }
-  T1 --> T2
-  T11 --> T2
-      

-    
-      %%{init: {"layout": "dagre", "mergeEdges": true} }%%
-stateDiagram
-State T1 {
-    T21
-    --
-    T22
-    }
-      

-    
-      %%{init: {"layouts": "elk2", "mergeEdges": true} }%%
-      stateDiagram
-      State S1 {
-    direction TB
-    S11
-  }
-  S1 --> S2
-      

-    
-      %%{init: {"layout": "elk", "mergeEdges": true} }%%
-stateDiagram
-State T1 {
-    T21
-    --
-    T22
-    }
-      

-    
-      %%{init: {"layout": "elk", "mergeEdges": true} }%%
-stateDiagram
-  [*] --> T1
-  T1 --> T2
-  T1 --> T3
-  T1 --> T4
-      

-    
-      %%{init: {"layout": "elk"} }%%
-stateDiagram
-  [*] --> T1
-  T1 --> T2
-  T2 --> T3
-  T3 --> T1
-  T1 --> T3
-      

-    
-stateDiagram
-  State1: The state with a note
-  note right of State1
-      Important information! You can write
-      notes.
-  end note
-      

-    
-stateDiagram-v2
-    direction LR
-    [*] --> Active
+    A:::foo 
+    B:::bar --> C:::foobar
+    classDef foo stroke:#f00
+    classDef bar stroke:#0f0
+    style C stroke:#00f, fill:black, color:white
 
-    state Active {
-      direction BT
-        [*] --> Inner
-        Inner --> NumLockOn : EvNumLockPressed
-    }
-    %% Outer --> Inner
-      

+