Updated viewBox settings

cypress/integration/rendering/flowchart-v2.spec.js

@@ -42,7 +42,7 @@ describe('Flowchart v2', () => {
         P3 --> P6
         P1.5 --> P5
       `,
-      { flowchart: { diagramPadding: 0 } }
+      {}
     );
   });
 
@@ -60,7 +60,7 @@ describe('Flowchart v2', () => {
       C <-...-> E4
       C ======> E5
       `,
-      { flowchart: { diagramPadding: 0 } }
+      {}
     );
   });
   it('5: should render escaped without html labels', () => {
@@ -652,4 +652,15 @@ flowchart RL
       { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
+  it('2824: Clipping of edges', () => {
+    imgSnapshotTest(
+      `
+      flowchart TD
+          A --> B
+          A --> C
+          B --> C
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
 });

cypress/platform/knsv.html

@@ -23,10 +23,12 @@
         display: none;
       }
       .mermaid {
-        border: 1px solid purple;
+
       }
       .mermaid svg {
+        border: 1px solid purple;
         /* font-size: 18px !important; */
+        fontFamily: 'courier'
       }
     </style>
   </head>
@@ -35,7 +37,7 @@
 
 
 
-<div class="mermaid2" style="width: 50%;">
+<div class="mermaid" style="width: 50%;">
 flowchart LR
   classDef aPID stroke:#4e4403,fill:#fdde29,color:#4e4403,rx:5px,ry:5px;
   classDef crm stroke:#333333,fill:#DCDCDC,color:#333333,rx:5px,ry:5px;
@@ -54,7 +56,7 @@ flowchart LR
   O0 -- has type -->O2["Bug"]
   click O0 function "Lots of great info about Joe<br>Lots of great info about Joe<br>burt<br>fred";
 </div>
-<div class="mermaid" style="width: 50%;">
+<div class="mermaid2" style="width: 50%;">
 flowchart TD
     subgraph test
     direction TB
@@ -68,22 +70,30 @@ flowchart TD
     end
     end
 
+</div>
+<div class="mermaid" style="width: 50%;">
+flowchart LR
+        a["<strong>Haiya</strong>"]===>b
+</div>
+<div class="mermaid" style="width: 50%;">
+flowchart TD
     A --> B
     A --> C
     B --> C
-
 </div>
-<div class="mermaid2" style="width: 50%;">
- gitGraph
-       commit
-       commit
-       branch develop
-       commit
-       commit
-       commit
-       checkout main
-       commit
-       commit
+<div class="mermaid" style="width: 50%;">
+flowchart TD
+      A([stadium shape test])
+      A -->|Get money| B([Go shopping])
+      B --> C([Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?])
+      C -->|One| D([Laptop])
+      C -->|Two| E([iPhone])
+      C -->|Three| F([Car<br/>wroom wroom])
+      click A "index.html#link-clicked" "link test"
+      click B testClick "click test"
+      classDef someclass fill:#f96;
+      class A someclass;
+      class C someclass;
 </div>
 <div class="mermaid2" style="width: 50%;">
    sequenceDiagram
@@ -273,7 +283,7 @@ flowchart TD
       C -->|One| D[Laptop]
       C -->|Two| E[iPhone]
       C -->|Three| F[fa:fa-car Car]
-      </div>     <div class="mermaid2" style="width: 100%;">
+      </div>     <div class="mermaid" style="width: 100%;">
         classDiagram
           Animal "1" <|-- Duck
           Animal <|-- Fish
@@ -322,10 +332,12 @@ flowchart TD
         startOnLoad: true,
         securityLevel: 'loose',
         logLevel: 0,
+        fontFamily: 'courier',
         flowchart: {
-          curve: 'curveLinear',
+          // curve: 'curveLinear',
           useMaxWidth: true,
-          htmlLabels: true,
+          htmlLabels: false,
+          fontFamily: 'courier',
         },
       });
       function callback() {

src/diagrams/flowchart/flowRenderer-v2.js

@@ -388,8 +388,8 @@ export const draw = function (text, id, _version, diagObj) {
       rankdir: dir,
       nodesep: nodeSpacing,
       ranksep: rankSpacing,
-      marginx: 8,
-      marginy: 8,
+      marginx: 0,
+      marginy: 0,
     })
     .setDefaultEdgeLabel(function () {
       return {};

src/utils.js

@@ -742,12 +742,12 @@ const d3Attrs = function (d3Elem, attrs) {
  */
 export const calculateSvgSizeAttrs = function (height, width, useMaxWidth) {
   let attrs = new Map();
-  attrs.set('height', height);
+  // attrs.set('height', height);
   if (useMaxWidth) {
     attrs.set('width', '100%');
-    attrs.set('style', `max-width: ${width}px;`);
+    attrs.set('style', `max-width: ${width * 1.2}px;`);
   } else {
-    attrs.set('width', width);
+    attrs.set('width', width * 1.2);
   }
   return attrs;
 };
@@ -769,8 +769,12 @@ export const setupGraphViewbox = function (graph, svgElem, padding, useMaxWidth)
   const sWidth = svgBounds.width;
   const sHeight = svgBounds.height;
 
+  log.info(`SVG bounds: ${sWidth}x${sHeight}`, svgBounds);
+
   let width = graph._label.width;
   let height = graph._label.height;
+  log.info(`Graph bounds: ${width}x${height}`, graph);
+
   let tx = 0;
   let ty = 0;
   if (sWidth > width) {
@@ -785,11 +789,16 @@ export const setupGraphViewbox = function (graph, svgElem, padding, useMaxWidth)
     ty = (sHeight - height) / 2 + padding;
     height = sHeight + padding * 2;
   }
+
+  log.info(`Calculated bounds: ${width}x${height}`);
   configureSvgSize(svgElem, height, width, useMaxWidth);
 
   // Ensure the viewBox includes the whole svgBounds area with extra space for padding
-  const vBox = `0 0 ${width} ${height}`;
-  log.debug(
+  // const vBox = `0 0 ${width} ${height}`;
+  const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${
+    svgBounds.width + 2 * padding
+  } ${svgBounds.height + 2 * padding}`;
+  log.info(
     'Graph.label',
     graph._label,
     'swidth',
@@ -808,7 +817,7 @@ export const setupGraphViewbox = function (graph, svgElem, padding, useMaxWidth)
     vBox
   );
   svgElem.attr('viewBox', vBox);
-  svgElem.select('g').attr('transform', `translate(${tx}, ${ty})`);
+  // svgElem.select('g').attr('transform', `translate(${tx}, ${ty})`);
 };
 
 export const initIdGenerator = class iterator {