From 30faf7bfad19948c27090abcb45f45ce1b75f6da Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Thu, 6 May 2021 20:26:00 +0200 Subject: [PATCH] #2045 Adjusted styling css to make use of state diagram theme variables --- cypress/platform/knsv.html | 229 +++++++---------------------------- src/diagrams/state/styles.js | 14 +-- src/themes/theme-base.js | 7 +- src/themes/theme-dark.js | 14 ++- src/themes/theme-default.js | 14 +++ src/themes/theme-forest.js | 14 +++ src/themes/theme-neutral.js | 22 +++- 7 files changed, 113 insertions(+), 201 deletions(-) diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html index 5d880b33a..5ee99afd5 100644 --- a/cypress/platform/knsv.html +++ b/cypress/platform/knsv.html @@ -26,49 +26,40 @@
info below
-
-%%{init: { "logLevel": 1, "er": {"fontSize":18 }} }%% - erDiagram - CUSTOMER }|..|{ DELIVERY-ADDRESS : has - CUSTOMER ||--o{ ORDER : places - CUSTOMER ||--o{ INVOICE : "liable for" - DELIVERY-ADDRESS ||--o{ ORDER : receives - INVOICE ||--|{ ORDER : covers - ORDER ||--|{ ORDER-ITEM : includes - PRODUCT-CATEGORY ||--|{ PRODUCT : contains - PRODUCT ||--o{ ORDER-ITEM : "ordered in" -
-
-flowchart TD - A[Christmas] ==> D - A[Christmas] -->|Get money| B(Go shopping) - A[Christmas] ==> C - subgraph T ["Test"] - A - B - C - end - classDef Test fill:#F84E68,stroke:#333,color:white; - class A,T Test - classDef TestSub fill:green; - class T TestSub - linkStyle 0,1 color:orange, stroke: orange; -
-
-%% The width of composite states does not grow with the title -stateDiagram-v2 - [*] --> Off - Off --> On - state MyChoice [[choice]] - On --> MyChoice - MyChoice --> Washing - MyChoice --> Drying - Washing --> Finished - Finished --> [*] -
- %%{init:{ + %%{int:{ +"themeVariables": { + "transitionColor":"red", + "labelColor":"yellow", + "transitionLabelColor":"blue", + "stateBkg":"green", + "compositeBackground":"pink", + "altBackground":"purple", + "clusterTitleBackground":"blue", + "compositeBorder":"red", + "noteBorderColor":"#522", + "noteBkgColor":"#522", + "noteTextColor":"white" +}}}%% + %%{int:{ +"themeVariables": { + "altBackground":"purple" +}}}%% +stateDiagram-v2 + state CompositeState { + state AnotherCompositeState { + AnotherState --> YetANotherState:a label + } + } + note left of CompositeState + Important information! You can write + notes. + end note + +
+
+ %%{int:{ "themeVariables": { "transitionColor":"red", "labelColor":"yellow", @@ -87,157 +78,21 @@ stateDiagram }
-
- %%{init:{ -"themeVariables": { - "transitionColor":"red", - "labelColor":"yellow", - "transitionLabelColor":"blue", - "stateBkg":"green", - "compositeBackground":"pink", - "altBackground":"purple", - "clusterTitleBackground":"blue" -}}}%% -stateDiagram-v2 - [*] --> Off - Off --> On - On --> Select - Select --> Washing - Washing --> Finished - Finished --> [*] - state Select - { - state "Program 1" as Prg1 - [*] --> Prg1 - Prg1 --> [*] - [*] --> Prg2 - Prg2 --> [*] - [*] --> Prg3 - Prg3 --> [*] - } - - state Washing { - state Using_Prg1 { - [*] --> P1Step1 - P1Step1 --> P1Step2 - P1Step2 --> P1Step3 - P1Step3 --> [*] - } - state Using_Prg2 { - [*] --> P2Step1 - P2Step1 --> P2Step2 - P2Step2 --> P2Step3 - P2Step3 --> [*] - } - - state Using_Prg3 { - [*] --> Step1 - Step1 --> Step2 - Step2 --> [*] - } - [*] --> Using_Prg1 - [*] --> Using_Prg2 - [*] --> Using_Prg3 - Using_Prg1 --> [*] - Using_Prg2 --> [*] - Using_Prg3 --> [*] - } -
-
- requirementDiagram - requirement test_req { - id: 1 - text: the test text. - risk: high - verifymethod: test - } - - functionalRequirement test_req2 { - id: 1.1 - text: the second test text. - risk: low - verifymethod: inspection - } - - performanceRequirement test_req3 { - id: 1.2 - text: the third test text. - risk: medium - verifymethod: demonstration - } - - element test_entity { - type: simulation - } - - element test_entity2 { - type: word doc - docRef: reqs/test_entity - } - - - test_entity - satisfies -> test_req2 - test_req - traces -> test_req2 - test_req - contains -> test_req3 - test_req <- copies - test_entity2 -
-
-flowchart LR - classDef dark fill:#000,stroke:#000,stroke-width:4px,color:#fff - Lorem --> Ipsum --> Dolor - class Lorem,Dolor dark -
-
-%%{init: {'theme': 'base' }}%% -%%{init2: { 'logLevel': 0, 'theme': 'forest'} }%% -flowchart TD - L1 --- L2 - L2 --- C - M1 ---> C - R1 .-> R2 - R2 <.-> C - C -->|Label 1| E1 - C <-- Label 2 ---> E2 - C ----> E3 - C <-...-> E4 - C ======> E5 -
-
-flowchart LR -A[red text] -->|default style| B(blue text) -C([red text]) -->|default style| D[[blue text]] -E[(red text)] -->|default style| F((blue text)) -G>red text] -->|default style| H{blue text} -I{{red text}} -->|default style| J[/blue text/] -K[ -ed text] -->|default style| L[/blue text] -M[ -ed text/] -->|default style| N[blue text] -linkStyle default color:Sienna; -style A stroke:#ff0000,fill:#ffcccc,color:#ff0000 -style B stroke:#0000ff,fill:#ccccff,color:#0000ff -style C stroke:#ff0000,fill:#ffcccc,color:#ff0000 -style D stroke:#0000ff,fill:#ccccff,color:#0000ff -style E stroke:#ff0000,fill:#ffcccc,color:#ff0000 -style F stroke:#0000ff,fill:#ccccff,color:#0000ff -style G stroke:#ff0000,fill:#ffcccc,color:#ff0000 -style H stroke:#0000ff,fill:#ccccff,color:#0000ff -style I stroke:#ff0000,fill:#ffcccc,color:#ff0000 -style J stroke:#0000ff,fill:#ccccff,color:#0000ff -style K stroke:#ff0000,fill:#ffcccc,color:#ff0000 -style L stroke:#0000ff,fill:#ccccff,color:#0000ff -style M stroke:#ff0000,fill:#ffcccc,color:#ff0000 -style N stroke:#0000ff,fill:#ccccff,color:#0000ff -
- - +
+sequenceDiagram + Alice->>+John: Hello John, how are you? + Alice->>+John: John, can you hear me? + John-->>-Alice: Hi Alice, I can hear you! + John-->>-Alice: I feel great! + note right of John: Hello note reader +