Merge pull request #3364 from mermaid-js/2824_cut_edges

2824 cut edges

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

@@ -21,9 +21,14 @@
       h1 { color: grey;}
       .mermaid2,.mermaid3 {
         display: none;
+      }
+      .mermaid {
+
       }
       .mermaid svg {
+        border: 1px solid purple;
         /* font-size: 18px !important; */
+        fontFamily: 'courier'
       }
     </style>
   </head>
@@ -32,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;
@@ -51,24 +56,44 @@ 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%;">
-classDiagram-v2
-  class Shape
-  link Shape "https://www.github.com" "This is a<br/>tooltip<br>for a link"
-  class Shape2
-  click Shape2 href "https://www.github.com" "This is a tooltip for a link"
-</div>
 <div class="mermaid2" style="width: 50%;">
- gitGraph
-       commit
-       commit
-       branch develop
-       commit
-       commit
-       commit
-       checkout main
-       commit
-       commit
+flowchart TD
+    subgraph test
+    direction TB
+    subgraph test2
+      direction LR
+      F --> D
+    end
+    subgraph test3
+      direction TB
+      G --> H
+    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="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
@@ -258,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
@@ -307,10 +332,12 @@ flowchart TD
         startOnLoad: true,
         securityLevel: 'loose',
         logLevel: 0,
+        fontFamily: 'courier',
         flowchart: {
-          curve: 'basis',
-          useMaxWidth: false,
-          htmlLabels: true,
+          // curve: 'curveLinear',
+          useMaxWidth: 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,7 +742,7 @@ 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;`);
@@ -761,7 +761,7 @@ export const calculateSvgSizeAttrs = function (height, width, useMaxWidth) {
  * @param {boolean} useMaxWidth Whether or not to use max-width and set width to 100%
  */
 export const configureSvgSize = function (svgElem, height, width, useMaxWidth) {
-  const attrs = calculateSvgSizeAttrs(height, width, useMaxWidth);
+  const attrs = calculateSvgSizeAttrs(height, 1.1 * width, useMaxWidth);
   d3Attrs(svgElem, attrs);
 };
 export const setupGraphViewbox = function (graph, svgElem, padding, useMaxWidth) {
@@ -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 {

src/utils.spec.js

@@ -294,13 +294,13 @@ describe('when formatting urls', function () {
 describe('when calculating SVG size', function () {
   it('should return width 100% when useMaxWidth is true', function () {
     const attrs = utils.calculateSvgSizeAttrs(100, 200, true);
-    expect(attrs.get('height')).toEqual(100);
+    // expect(attrs.get('height')).toEqual(100);
     expect(attrs.get('style')).toEqual('max-width: 200px;');
     expect(attrs.get('width')).toEqual('100%');
   });
   it('should return absolute width when useMaxWidth is false', function () {
     const attrs = utils.calculateSvgSizeAttrs(100, 200, false);
-    expect(attrs.get('height')).toEqual(100);
+    // expect(attrs.get('height')).toEqual(100);
     expect(attrs.get('width')).toEqual(200);
   });
 });