Final tweaks

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

@@ -462,4 +462,140 @@ flowchart TD
       {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
     );
   });
+  it('66: More nested subgraph cases (TB)', () => {
+    imgSnapshotTest(
+      `
+flowchart TB
+    subgraph two
+    b1
+    end
+    subgraph three
+    c2
+    end
+
+    three --> two
+    two --> c2
+
+      `,
+      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+    );
+  });
+  it('67: More nested subgraph cases (RL)', () => {
+    imgSnapshotTest(
+      `
+flowchart RL
+    subgraph two
+    b1
+    end
+    subgraph three
+    c2
+    end
+
+    three --> two
+    two --> c2
+
+      `,
+      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+    );
+  });
+  it('68: More nested subgraph cases (BT)', () => {
+    imgSnapshotTest(
+      `
+flowchart BT
+    subgraph two
+    b1
+    end
+    subgraph three
+    c2
+    end
+
+    three --> two
+    two --> c2
+
+      `,
+      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+    );
+  });
+  it('69: More nested subgraph cases (LR)', () => {
+    imgSnapshotTest(
+      `
+flowchart LR
+    subgraph two
+    b1
+    end
+    subgraph three
+    c2
+    end
+
+    three --> two
+    two --> c2
+
+      `,
+      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+    );
+  });
+  it('70: Handle nested subgraph cases (TB) link out and link between subgraphs', () => {
+    imgSnapshotTest(
+      `
+flowchart TB
+   subgraph S1
+    sub1 -->sub2
+   end
+  subgraph S2
+    sub4
+   end
+   S1 --> S2
+   sub1 --> sub4
+      `,
+      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+    );
+  });
+  it('71: Handle nested subgraph cases (RL) link out and link between subgraphs', () => {
+    imgSnapshotTest(
+      `
+flowchart RL
+   subgraph S1
+    sub1 -->sub2
+   end
+  subgraph S2
+    sub4
+   end
+   S1 --> S2
+   sub1 --> sub4
+      `,
+      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+    );
+  });
+  it('72: Handle nested subgraph cases (BT) link out and link between subgraphs', () => {
+    imgSnapshotTest(
+      `
+flowchart BT
+   subgraph S1
+    sub1 -->sub2
+   end
+  subgraph S2
+    sub4
+   end
+   S1 --> S2
+   sub1 --> sub4
+      `,
+      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+    );
+  });
+  it('74: Handle nested subgraph cases (RL) link out and link between subgraphs', () => {
+    imgSnapshotTest(
+      `
+flowchart RL
+   subgraph S1
+    sub1 -->sub2
+   end
+  subgraph S2
+    sub4
+   end
+   S1 --> S2
+   sub1 --> sub4
+      `,
+      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+    );
+  });
 });

cypress/platform/knsv.html

@@ -57,7 +57,6 @@ flowchart TD
 </div>
       <div class="mermaid" style="width: 100%; height: 20%;">
 flowchart TB
-
     subgraph two
     b1
     end

src/dagre-wrapper/edges.js

@@ -239,8 +239,8 @@ export const intersection = (node, outsidePoint, insidePoint) => {
     let q = insidePoint.y < outsidePoint.y ? outsidePoint.y - h - y : y - h - outsidePoint.y;
     r = (R * q) / Q;
     const res = {
-      x: insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : insidePoint.x - R + r,
+      x: insidePoint.x < outsidePoint.x ? insidePoint.x + r : insidePoint.x - R + r,
-      y: insidePoint.y < outsidePoint.y ? insidePoint.y + Q - q : insidePoint.y + Q - q
+      y: insidePoint.y < outsidePoint.y ? insidePoint.y + Q - q : insidePoint.y - Q + q
     };
 
     if (r === 0) {

src/dagre-wrapper/edges.spec.js

@@ -32,33 +32,33 @@ describe('Graphlib decorations', () => {
 
     });
     it('case 3 - intersection on otop of box outside point greater then inside point', function () {
-      const o = {x: 157.21875, y: 38.83361558001693};
+      const o = {x: 157, y: 39};
-      const i = {x: 104.1328125, y: 105};
+      const i = {x: 104, y: 105};
       const node2 = {
-        width: 211.96875,
+        width: 212,
-        x: 113.984375,
+        x: 114,
-        y: 164.25,
+        y: 164,
-        height: 176.5
+        height: 176
       }
       const int = intersection(node2, o, i);
-            expect(int.x).toBeCloseTo(127.39979619565217)
+            expect(int.x).toBeCloseTo(133.71)
-      // expect(int.y).toBeCloseTo(76)
+      expect(int.y).toBeCloseTo(76)
-      expect(int.y).toBeCloseTo(67.833)
+      // expect(int.y).toBeCloseTo(67.833)
 
     });
         it('case 4 - intersection on top of box inside point greater then inside point', function () {
-          const o = {x: 144.65625, y: 38.83361558001693};
+          const o = {x: 144, y: 38};
-          const i = {x: 197.7421875, y: 105};
+          const i = {x: 198, y: 105};
           const node2 = {
-            width: 211.96875,
+            width: 212,
-            x: 113.984375,
+            x: 114,
-            y: 164.25,
+            y: 164,
-            height: 176.5
+            height: 176
           }
           const int = intersection(node2, o, i);
-                expect(int.x).toBeCloseTo(167.9232336956522)
+                expect(int.x).toBeCloseTo(174.626 )
-          // expect(int.y).toBeCloseTo(76)
+          expect(int.y).toBeCloseTo(76)
-      expect(int.y).toBeCloseTo(67.833)
+      // expect(int.y).toBeCloseTo(67.833)
 
         });
   });