From ba0b94582188dcea3aa73d57f358528ff057acbd Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Fri, 24 Jan 2025 15:49:11 +0100 Subject: [PATCH] MC-2560 Reviving dotted lines for flowcharts --- cypress/platform/knsv2.html | 336 ++---------------- .../rendering-elements/edges.js | 24 +- packages/mermaid/src/utils/lineWithOffset.ts | 2 +- 3 files changed, 50 insertions(+), 312 deletions(-) diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html index 26ca690f3..1195d51fc 100644 --- a/cypress/platform/knsv2.html +++ b/cypress/platform/knsv2.html @@ -105,20 +105,17 @@ - 
-      flowchart LR
-        AB["apa@apa@"] --> B(("`apa@apa`"))
-
- 
-      flowchart
-        D(("for D"))
-    
+      flowchart LR
+        A e1@-.-> B
+        C e2@--> D
+
+ 
       flowchart LR
         A e1@==> B
         e1@{ animate: true}
- 
+    
 ---
 config:
   theme: forest
@@ -129,12 +126,12 @@ config:
         e1@{ animate: true}
     

     

-    
+    
       flowchart LR
         A e1@==> B
         e1@{ animate: false}
     

-    
+    
 ---
 config:
   theme: neo
@@ -147,12 +144,12 @@ config:
 
     
     

-    
+    
       flowchart LR
         slow e2@--> B
         e2@{ animation: slow}
     

-    
+    
 ---
 config:
   theme: forest
@@ -163,13 +160,13 @@ config:
         e1@{ animation: fast}
     

     

-    
+    
       flowchart LR
         A e1@==> B
           classDef animate stroke-dasharray: 9\,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
   class e1 animate
     

-    
+    
 ---
 config:
   theme: forest
@@ -199,12 +196,12 @@ config:
         e1@{ animate: true}
     

     

-    
+    
       flowchart LR
         A e1@==o B
         e1@{ animate: false}
     

-    
+    
 ---
 config:
   theme: neo
@@ -217,12 +214,12 @@ config:
 
     
     

-    
+    
       flowchart LR
         slow e2@--o B
         e2@{ animation: slow}
     

-    
+    
 ---
 config:
   theme: forest
@@ -233,13 +230,13 @@ config:
         e1@{ animation: fast}
     

     

-    
+    
       flowchart LR
         A e1@==o B
           classDef animate stroke-dasharray: 9\,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
   class e1 animate
     

-    
+    
 ---
 config:
   theme: forest
@@ -253,12 +250,12 @@ config:
     
     

 
-    
+    
       flowchart LR
         A e1@==x B
         e1@{ animate: true}
     

-    
+    
 ---
 config:
   theme: forest
@@ -269,12 +266,12 @@ config:
         e1@{ animate: true}
     

     

-    
+    
       flowchart LR
         A e1@==x B
         e1@{ animate: false}
     

-    
+    
 ---
 config:
   theme: neo
@@ -287,12 +284,12 @@ config:
 
     
     

-    
+    
       flowchart LR
         slow e2@--x B
         e2@{ animation: slow}
     

-    
+    
 ---
 config:
   theme: forest
@@ -303,13 +300,13 @@ config:
         e1@{ animation: fast}
     

     

-    
+    
       flowchart LR
         A e1@==x B
           classDef animate stroke-dasharray: 9\,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
   class e1 animate
     

-    
+    
 ---
 config:
   theme: forest
@@ -320,288 +317,7 @@ config:
           classDef animate stroke-dasharray: 9\,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
   class e1 animate
     

-    
-flowchart LR
-  A e1@--> B
-  classDef animate stroke-width:2,stroke-dasharray:10\,8,stroke-dashoffset:-180,animation: edge-animation-frame 6s linear infinite, stroke-linecap: round
-  class e1 animate
-    

-    
infinite

-    
-flowchart LR
-  A e1@--> B
-  classDef animate stroke-dasharray: 9\,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
-  class e1 animate
-    

-    
Mermaid - edge-animation-slow

-    
-flowchart LR
-  A e1@--> B
-e1@{ animation: fast}
-    

-    
Mermaid - edge-animation-fast

-    
-flowchart LR
-  A e1@--> B
-  classDef animate stroke-dasharray: 1000,stroke-dashoffset: 1000,animation: dash 10s linear;
-  class e1 edge-animation-fast
-    

 
-    
-
-info    

-    
----
-config:
-  layout: elk
----
-      flowchart LR
-      a
-      subgraph s0["APA"]
-      subgraph s8["APA"]
-      subgraph s1["APA"]
-        D{"X"}
-        E[Q]
-      end
-      subgraph s3["BAPA"]
-        F[Q]
-        I
-      end
-            D --> I
-            D --> I
-            D --> I
-
-      I{"X"}
-      end
-      end
-    

-    
----
-config:
-  layout: elk
----
-      flowchart LR
-      a
-        D{"Use the editor"}
-
-      D -- Mermaid js --> I{"fa:fa-code Text"}
-      D-->I
-      D-->I
-    

-    
----
-config:
-  layout: elk
----
-flowchart LR
- subgraph s1["Untitled subgraph"]
-        n1["Evaluate"]
-        n2["Option 1"]
-        n3["Option 2"]
-        n4["fa:fa-car Option 3"]
-  end
- subgraph s2["Untitled subgraph"]
-        n5["Evaluate"]
-        n6["Option 1"]
-        n7["Option 2"]
-        n8["fa:fa-car Option 3"]
-  end
-    A["Start"] -- Some text --> B("Continue")
-    B --> C{"Evaluate"}
-    C -- One --> D["Option 1"]
-    C -- Two --> E["Option 2"]
-    C -- Three --> F["fa:fa-car Option 3"]
-    n1 -- One --> n2
-    n1 -- Two --> n3
-    n1 -- Three --> n4
-    n5 -- One --> n6
-    n5 -- Two --> n7
-    n5 -- Three --> n8
-    n1@{ shape: diam}
-    n2@{ shape: rect}
-    n3@{ shape: rect}
-    n4@{ shape: rect}
-    n5@{ shape: diam}
-    n6@{ shape: rect}
-    n7@{ shape: rect}
-    n8@{ shape: rect}
-
-    

-    
----
-config:
-  layout: elk
----
-flowchart LR
- subgraph s1["Untitled subgraph"]
-        n1["Evaluate"]
-        n2["Option 1"]
-  end
-    n1 -- One --> n2
-
-
-
-
-    

-    
----
-config:
-  layout: elk
----
-flowchart LR
-    A{A} --> B & C
-

-    
----
-config:
-  layout: elk
----
-flowchart LR
-    A{A} --> B & C
-    subgraph "subbe"
-      A
-    end
-

-    
----
-config:
-  layout: elk
----
-flowchart LR
-    n2@{ shape: rect}
-    n3@{ shape: rect}
-    n4@{ shape: rect}
-    A["Start"] -- Some text --> B("Continue")
-    B --> C{"Evaluate"}
-    C -- One --> D["Option 1"]
-    C -- Two --> E["Option 2"]
-    C -- Three --> F["fa:fa-car Option 3"]
-    %% C@{ shape: hexagon}
-
-
-    

-    
----
-config:
-  kanban:
-    ticketBaseUrl: 'https://github.com/your-repo/issues/#TICKET#'
----
-kanban
-  Backlog
-    task1[📝 Define project requirements]@{ ticket: a101 }
-  To Do
-    task2[🔍 Research technologies]@{ ticket: a102 }
-  Review
-    task4[🔍 Code review for login feature]@{ ticket: a104 }
-  Done
-    task5[✅ Deploy initial version]@{ ticket: a105 }
-  In Progress
-    task3[💻 Develop login feature]@{ ticket: 103 }
-
-    

-    
-flowchart LR
-nA[Default] --> A@{ icon: 'fa:bell', form: 'rounded' }
-
-    

-    
-flowchart LR
-nA[Style] --> A@{ icon: 'fa:bell', form: 'rounded' }
-style A fill:#f9f,stroke:#333,stroke-width:4px
-    

-    
-flowchart LR
-nA[Class] --> A@{ icon: 'fa:bell', form: 'rounded' }
-A:::AClass
-classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
-    

-    
-flowchart LR
-  nA[Class] --> A@{ icon: 'logos:aws', form: 'rounded' }
-
-    

-    
-flowchart LR
-nA[Default] --> A@{ icon: 'fa:bell', form: 'square' }
-
-    

-    
-flowchart LR
-nA[Style] --> A@{ icon: 'fa:bell', form: 'square' }
-style A fill:#f9f,stroke:#333,stroke-width:4px
-    

-    
-flowchart LR
-nA[Class] --> A@{ icon: 'fa:bell', form: 'square' }
-A:::AClass
-classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
-    

-    
-flowchart LR
-  nA[Class] --> A@{ icon: 'logos:aws', form: 'square' }
-
-    

-    
-flowchart LR
-nA[Default] --> A@{ icon: 'fa:bell', form: 'circle' }
-
-    

-    
-flowchart LR
-nA[Style] --> A@{ icon: 'fa:bell', form: 'circle' }
-style A fill:#f9f,stroke:#333,stroke-width:4px
-    

-    
-flowchart LR
-nA[Class] --> A@{ icon: 'fa:bell', form: 'circle' }
-A:::AClass
-classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
-    

-    
-flowchart LR
-  nA[Class] --> A@{ icon: 'logos:aws', form: 'circle' }
-  A:::AClass
-  classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
-    

-    
-flowchart LR
-  nA[Style] --> A@{ icon: 'logos:aws', form: 'circle' }
-  style A fill:#f9f,stroke:#333,stroke-width:4px
-    

-    
-kanban
-  id2[In progress]
-    docs[Create Blog about the new diagram]@{ priority: 'Very Low', ticket: MC-2037, assigned: 'knsv' }
-    

-    
----
-config:
-  kanban:
-    ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
-    # sectionWidth: 300
----
-kanban
-  Todo
-    [Create Documentation]
-    docs[Create Blog about the new diagram]
-  id7[In progress]
-    id6[Create renderer so that it works in all cases. We also add som extra text here for testing purposes. And some more just for the extra flare.]
-  id9[Ready for deploy]
-    id8[Design grammar]@{ assigned: 'knsv' }
-  id10[Ready for test]
-    id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
-    id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
-  id11[Done]
-    id5[define getData]
-    id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
-    id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }
-
-  id12[Can't reproduce]
-    id3[Weird flickering in Firefox]
-