diff --git a/cypress/platform/per.html b/cypress/platform/per.html index e6a88642a..a6d3397c3 100644 --- a/cypress/platform/per.html +++ b/cypress/platform/per.html @@ -90,6 +90,14 @@ stateDiagram-v2 > 
+      stateDiagram
+       StateID
+
+
+
+
+ + 
       stateDiagram
         direction LR
         [*] --> A
@@ -100,11 +108,7 @@ stateDiagram-v2
           a --> b
         }
         B --> D
-
-
-
-
+ + + + diff --git a/cypress/platform/state-refactor.html b/cypress/platform/state-refactor.html index 6bad8d2c6..173d65b49 100644 --- a/cypress/platform/state-refactor.html +++ b/cypress/platform/state-refactor.html @@ -93,6 +93,7 @@ Dagre Dagre with rough + Dagre with neo ELK ELK with rough @@ -115,6 +116,14 @@ stateDiagram-v2 
 %%{init: {"look": "handdrawn"} }%%
+stateDiagram-v2
+    stateId
+
+
+ + + 
+%%{init: {"look": "neo"} }%%
 stateDiagram-v2
     stateId
 
@@ -162,6 +171,13 @@ stateDiagram-v2
       
         
 %%{init: {"look": "handdrawn"} }%%
+stateDiagram-v2
+    state "This is a state description" as s3
+      

+      
+      
+        
+%%{init: {"look": "neo"} }%%
 stateDiagram-v2
     state "This is a state description" as s3
       

@@ -206,6 +222,14 @@ stateDiagram-v2
       
         
 %%{init: {"look": "handdrawn"} }%%
+stateDiagram-v2
+    s22 : This is a state description
+
+      

+      
+      
+        
+%%{init: {"look": "neo"} }%%
 stateDiagram-v2
     s22 : This is a state description
 
@@ -266,10 +290,20 @@ stateDiagram-v2
       

       
       
+          
+  %%{init: {"look": "neo"} }%%
+
+     stateDiagram-v2
+      s51 --> s52
+
+
+        

+        
+        
         
 %%{init: {"handdrawn": false, "layout": "elk"} }%%
 stateDiagram-v2
-    s51 --> s52
+    s61 --> s62
 
 
       

@@ -278,7 +312,7 @@ stateDiagram-v2
         
 %%{init: {"look": "handdrawn", "layout": "elk"} }%%
 stateDiagram-v2
-    s61 --> s62
+    s71 --> s72
 
 
       

@@ -321,13 +355,23 @@ stateDiagram-v2
     a3 --> a4: A transition
 
 
+
+ + + 
+%%{init: {"look": "neo"} }%%
+
+   stateDiagram-v2
+    a5 --> a6: A transition
+
+
       
 %%{init: {"handdrawn": false, "layout": "elk"} }%%
 stateDiagram-v2
-    a5 --> a6: A transition
+    a7 --> a8: A transition
@@ -336,7 +380,7 @@ stateDiagram-v2 
 %%{init: {"look": "handdrawn", "layout": "elk"} }%%
 stateDiagram-v2
-   a7 --> a8: A transition
+   a9 --> a10: A transition
@@ -382,6 +426,17 @@ stateDiagram-v2 test --> [*] + + + + 
+%%{init: {"look": "neo"} }%%
+
+   stateDiagram-v2
+       [*] --> test
+    test --> [*]
+
+
@@ -454,6 +509,20 @@ stateDiagram-v2 } + + + + 
+%%{init: {"look": "neo"} }%%
+
+   stateDiagram-v2
+       [*] --> First
+    state First {
+        [*] --> second
+        second --> [*]
+    }
+
+
@@ -567,6 +636,31 @@ stateDiagram-v2 + + + + 
+%%{init: {"look": "neo"} }%%
+
+   stateDiagram-v2
+    [*] --> Level1
+
+    state Level1 {
+        [*] --> Level2
+
+        state Level2 {
+            [*] --> level2
+            level2 --> Level3
+
+            state Level3 {
+                [*] --> level3
+                level3 --> [*]
+            }
+        }
+    }
+
+
+
@@ -697,6 +791,30 @@ stateDiagram-v2 + 
+  %%{init: {"look": "neo"} }%%
+
+     stateDiagram-v2
+     [*] --> B1
+      B1 --> B2
+      B1 --> B3
+
+      state B1 {
+          [*] --> B11
+          B11 --> [*]
+      }
+      state B2 {
+          [*] --> B22
+          B22 --> [*]
+      }
+      state B3 {
+          [*] --> B33
+          B33 --> [*]
+      }
+
+ + + 
 %%{init: {"handdrawn": false, "layout": "elk"} }%%
  stateDiagram-v2
@@ -793,7 +911,19 @@ stateDiagram-v2
     if_state --> True : if n >= 0
- + + 
+  %%{init: {"look": "neo"} }%%
+
+     stateDiagram-v2
+     state if_state <>
+      [*] --> IsPositive
+      IsPositive --> if_state
+      if_state --> False: if n < 0
+      if_state --> True : if n >= 0
+
+ + 
 %%{init: {"handdrawn": false, "layout": "elk"} }%%
  stateDiagram-v2
@@ -865,6 +995,23 @@ stateDiagram-v2
       
         
 %%{init: {"look": "handdrawn"} }%%
+   stateDiagram-v2
+    state fork_state <>
+      [*] --> fork_state
+      fork_state --> State2
+      fork_state --> State3
+
+      state join_state <>
+      State2 --> join_state
+      State3 --> join_state
+      join_state --> State4
+      State4 --> [*]
+
+      

+      
+      
+        
+%%{init: {"look": "neo"} }%%
    stateDiagram-v2
     state fork_state <>
       [*] --> fork_state
@@ -955,6 +1102,19 @@ stateDiagram-v2
       
         
 %%{init: {"look": "handdrawn"} }%%
+   stateDiagram-v2
+     TN3: The state with a note
+        note right of TN3
+            Important information! You can write
+            notes.
+        end note
+        TN3 --> TN4
+        note left of TN4 : This is the note to the left.
+      

+      
+      
+        
+%%{init: {"look": "neo"} }%%
    stateDiagram-v2
      TN3: The state with a note
         note right of TN3
@@ -1055,6 +1215,27 @@ state Active {
      stateDiagram-v2
     [*] --> Active
 
+    state Active {
+        [*] --> NumLockOff
+        NumLockOff --> NumLockOn : EvNumLockPressed
+        NumLockOn --> NumLockOff : EvNumLockPressed
+        --
+        [*] --> CapsLockOff
+        CapsLockOff --> CapsLockOn : EvCapsLockPressed
+        CapsLockOn --> CapsLockOff : EvCapsLockPressed
+        --
+        [*] --> ScrollLockOff
+        ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
+        ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
+    }
+      

+      
+      
+        
+%%{init: {"look": "neo"} }%%
+     stateDiagram-v2
+    [*] --> Active
+
     state Active {
         [*] --> NumLockOff
         NumLockOff --> NumLockOn : EvNumLockPressed
@@ -1160,6 +1341,21 @@ direction LR
         
 %%{init: {"look": "handdrawn"} }%%
      stateDiagram-v2
+   direction LR
+    [*] --> D1
+    D1 --> D2
+    D2 --> D3
+    state D3 {
+      direction TB
+      D11 --> D22
+    }
+    D2 --> D4
+      

+      
+      
+        
+%%{init: {"look": "neo"} }%%
+     stateDiagram-v2
    direction LR
     [*] --> D1
     D1 --> D2
@@ -1267,4 +1463,4 @@ direction LR
   
 
 
-
\ No newline at end of file
+
diff --git a/docs/neo-style-to-do b/docs/neo-style-to-do
new file mode 100644
index 000000000..936f2cc30
--- /dev/null
+++ b/docs/neo-style-to-do
@@ -0,0 +1,5 @@
+1. Paddings of node labels for neo and classic does not differ, which it should. Status: Fixed
+2. When layout is set to "elk" and look is "neo", the drop shadow is not present
+3. Drop-shadows are not present for flow-charts, even if look is "neo"
+4. When look is "neo" and theme is "forest", the border of nodes is visible, which should not be the case
+5. When look is "neo" and "theme" is "neo", the background color shall be white
diff --git a/packages/mermaid/src/diagrams/state/styles.js b/packages/mermaid/src/diagrams/state/styles.js
index f43e48a94..06c2b2c51 100644
--- a/packages/mermaid/src/diagrams/state/styles.js
+++ b/packages/mermaid/src/diagrams/state/styles.js
@@ -101,13 +101,13 @@ g.stateGroup line {
 }
 
 .node circle.state-end {
-  fill: ${options.innerEndBackground};
+  fill:  ${options.stateBkg || options.mainBkg};
   stroke: ${options.background};
   stroke-width: 1.5
 }
 .end-state-inner {
   fill: ${options.compositeBackground || options.background};
-  // stroke: ${options.background};
+  stroke: ${options.background};
   stroke-width: 1.5
 }
 
@@ -116,6 +116,13 @@ g.stateGroup line {
   stroke: ${options.stateBorder || options.nodeBorder};
   stroke-width: 1px;
 }
+
+.node-rect-neo {
+  fill: ${options.stateBkg || options.mainBkg};
+  stroke: none;
+  stroke-width: 1px;
+}
+
 .node polygon {
   fill: ${options.mainBkg};
   stroke: ${options.stateBorder || options.nodeBorder};;
@@ -152,8 +159,7 @@ g.stateGroup line {
   fill: ${options.compositeBackground || options.background};
 }
 .statediagram-cluster.statediagram-cluster-alt .inner {
-  fill: ${options.altBackground ? options.altBackground : '#efefef'};
-
+  fill: ${options.altBackground ? options.altBackground : '#f0f0f0'};
 }
 
 .statediagram-cluster .inner {
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
index 43cabca4f..325da982b 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
@@ -226,7 +226,7 @@ const roundedWithTitle = (parent, node) => {
   const y = node.y - node.height / 2 - halfPadding;
   const innerY = node.y - node.height / 2 - halfPadding + bbox.height + 2;
   const height = node.height + padding;
-  const innerHeight = node.height + padding - bbox.height - 2;
+  const innerHeight = node.height + padding - bbox.height - 6;
   const look = siteConfig.look;
 
   // add the rect
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts
index ad73cf23f..783fe6a53 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts
@@ -45,26 +45,16 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt
 
     rect = shapeSvg.insert(() => roughNode, ':first-child');
     rect.attr('class', 'basic label-container').attr('style', cssStyles);
-  } else if (node.look === 'neo') {
-    // TODO: Take theme and look into account
-    rect = shapeSvg.insert('rect', ':first-child');
-
-    rect
-      .attr('class', 'basic label-container state-shadow-neo')
-      .attr('style', cssStyles)
-      .attr('rx', rx)
-      .attr('data-id', 'abc')
-      .attr('data-et', 'node')
-      .attr('ry', ry)
-      .attr('x', x)
-      .attr('y', y)
-      .attr('width', totalWidth)
-      .attr('height', totalHeight);
   } else {
     rect = shapeSvg.insert('rect', ':first-child');
 
+    let rectClass = 'basic label-container';
+    if (node.look === 'neo') {
+      rectClass += ' state-shadow-neo';
+    }
+
     rect
-      .attr('class', 'basic label-container')
+      .attr('class', rectClass)
       .attr('style', cssStyles)
       .attr('rx', rx)
       .attr('data-id', 'abc')
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts
index 5229b606c..d275f77cb 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts
@@ -6,11 +6,11 @@ export const roundedRect = async (parent: SVGAElement, node: Node) => {
   const { look } = getConfig();
   node.look = look;
   const options = {
-    rx: node.look === 'neo' ? 1 : 5,
-    ry: node.look === 'neo' ? 1 : 5,
+    rx: node.look === 'neo' ? 3 : 5,
+    ry: node.look === 'neo' ? 3 : 5,
 
-    labelPaddingX: node.padding * 2,
-    labelPaddingY: node.padding * 1,
+    labelPaddingX: node.look === 'neo' ? node.padding * 2 : node.padding,
+    labelPaddingY: node.look === 'neo' ? node.padding : node.padding,
     classes: '',
   } as RectOptions;
 
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/state.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/state.ts
index f1bc733d6..dbb080894 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/state.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/state.ts
@@ -7,8 +7,8 @@ export const state = async (parent: SVGAElement, node: Node) => {
   node.look = look;
 
   const options = {
-    rx: node.look === 'neo' ? 2 : 5,
-    ry: node.look === 'neo' ? 2 : 5,
+    rx: node.look === 'neo' ? 3 : 5,
+    ry: node.look === 'neo' ? 3 : 5,
     classes: 'flowchart-node',
   };
   return drawRect(parent, node, options);
diff --git a/packages/mermaid/src/themes/theme-neo.js b/packages/mermaid/src/themes/theme-neo.js
index 01b8aaf5c..7aadaa93a 100644
--- a/packages/mermaid/src/themes/theme-neo.js
+++ b/packages/mermaid/src/themes/theme-neo.js
@@ -125,7 +125,7 @@ class Theme {
     this.stateBkg = this.stateBkg || this.mainBkg;
     this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;
     this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;
-    this.altBackground = this.altBackground || this.tertiaryColor;
+    this.altBackground = this.altBackground || '#f0f0f0';
     this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
     this.compositeBorder = this.compositeBorder || this.nodeBorder;
     this.innerEndBackground = this.nodeBorder;