#3358 Fix for width of composite blocks

mermaid-js · Jan 18, 2024 · bbc7fe6 · bbc7fe6
1 parent 1d18757
commit bbc7fe6
Show file tree

Hide file tree

Showing 6 changed files with 875 additions and 43 deletions.
diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
@@ -17,7 +17,7 @@
     <style>
       body {
         /* background: rgb(221, 208, 208); */
-        /* background:#333; */
+        background: #333;
         font-family: 'Arial';
         /* font-size: 18px !important; */
       }
@@ -33,9 +33,10 @@
       }
       .mermaid svg {
         /* font-size: 18px !important; */
-        background-color: #efefef;
-        background-image: radial-gradient(#fff 51%, transparent 91%),
-          radial-gradient(#fff 51%, transparent 91%);
+        /* background-color: #efefef; */
+        background-color: #333;
+        background-image: radial-gradient(#333 51%, transparent 91%),
+          radial-gradient(#333 51%, transparent 91%);
         background-size: 20px 20px;
         background-position: 0 0, 10px 10px;
         background-repeat: repeat;
@@ -64,17 +65,71 @@
   <body>
     <pre id="diagram" class="mermaid">
 block-beta
-columns 2
-  db(("This is the text "))
-  block
-    A
+columns 3
+  a["A wide one"] b:2 c:2 d
+    </pre>
+    <pre id="diagram" class="mermaid">
+block-beta
+  block:e
+      f
   end
-
-
+    </pre>
+    <pre id="diagram" class="mermaid2">
+block-beta
+  columns 3
+  a:3
+  block:e:3
+      f
+  end
+  g
+    </pre>
+    <pre id="diagram" class="mermaid">
+block-beta
+  columns 3
+  a:3
+  block:e:3
+      f
+      g
+  end
+  h
+  i
+  j
 
     </pre>
     <pre id="diagram" class="mermaid">
 block-beta
+columns 3
+  a b:2
+  block:e:3
+      f
+  end
+  g h i
+    </pre>
+    <pre id="diagram" class="mermaid">
+block-beta
+columns 3
+  a b c
+  e:3
+  f g h
+    </pre>
+    <pre id="diagram" class="mermaid">
+block-beta
+columns 1
+  db(("DB"))
+  blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
+  block:ID
+    A
+    B["A wide one in the middle"]
+    C
+  end
+  space
+  D
+  ID --> D
+  C --> D
+  style B fill:#f9F,stroke:#333,stroke-width:4px
+    </pre>
+    <pre id="diagram" class="mermaid">
+block-beta
 
   A1:3
   A2:1
@@ -96,7 +151,7 @@
       end
       A["A: I am a wide one"]
     </pre>
-    <pre id="diagram" class="mermaid2">
+    <pre id="diagram" class="mermaid">
 block-beta
     A["square"]
     B("rounded")
@@ -470,7 +525,7 @@
         // console.error('Mermaid error: ', err);
       };
       mermaid.initialize({
-        theme: 'forest',
+        theme: 'dark',
         startOnLoad: true,
         logLevel: 0,
         flowchart: {

diff --git a/packages/mermaid/src/diagrams/block/blockDB.ts b/packages/mermaid/src/diagrams/block/blockDB.ts
@@ -153,6 +153,7 @@ const populateBlockDatabase = (_blockList: Block[], parent: Block): void => {
       if (!block.label) {
         if (block.type === 'composite') {
           block.label = '';
+          console.log('abc89 composite', block);
         } else {
           block.label = block.id;
         }

diff --git a/packages/mermaid/src/diagrams/block/blockTypes.ts b/packages/mermaid/src/diagrams/block/blockTypes.ts
@@ -59,6 +59,7 @@ export interface Block {
   css?: string;
   styleClass?: string;
   styles?: string[];
+  w?: number;
 }
 
 export interface Link {