From 278a19f87aec156d81e5178579971cd5cc29d6d0 Mon Sep 17 00:00:00 2001 From: "Ashley Engelund (weedySeaDragon @ github)" Date: Mon, 10 Oct 2022 18:25:33 -0700 Subject: [PATCH] state demo add classDefs to example with explanations; add some headers; update composite from docs --- demos/state.html | 51 ++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 47 insertions(+), 4 deletions(-) diff --git a/demos/state.html b/demos/state.html index 7f85fceb1..57f89779c 100644 --- a/demos/state.html +++ b/demos/state.html @@ -15,6 +15,7 @@

State diagram demos

+

Very simple showing change from State1 to State2

 		stateDiagram
 		  accTitle: This is the accessible title
@@ -24,16 +25,43 @@
 
     

 
+    
This has classDef statements to apply style classes to specific states

+    
Here are the classDef statements:

+    

+      
+        classDef notMoving fill:white

+        classDef movement font-style:italic;

+        classDef badBadEvent fill:#f00,color:white,font-weight:bold

+      
+    

+    
And these are how they are applied:

+    

+      
+        class Still notMoving

+        class Moving, Crash movement

+        class Crash badBadEvent

+      
+    

     
 		stateDiagram-v2
 		  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
+
       [*] --> Still
       Still --> [*]
       Still --> Moving
       Moving --> Still
       Moving --> Crash
       Crash --> [*]
+
+      class Still notMoving
+      class Moving, Crash movement
+      class Crash badBadEvent
+
     

 
     

@@ -46,14 +74,29 @@
- +

This shows Composite states

-    stateDiagram
+
+
+    stateDiagram-v2
     [*] --> First
+    First --> Second
+    First --> Third
+
     state First {
-    [*] --> second
-    second --> [*]
+        [*] --> 1st
+        1st --> [*]
     }
+    state Second {
+        [*] --> 2nd
+        2nd --> [*]
+    }
+    state Third {
+        [*] --> 3rd
+        3rd --> [*]
+    }
+
+
     
     stateDiagram