From f0162557c511de5ace1edf71c0e8920dfcd316f8 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knut.sveidqvist@ipiccolo.com>
Date: Wed, 17 Jun 2020 18:16:24 +0200
Subject: [PATCH] =?UTF-8?q?=C2=A0#1474=20Handling=20transitions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 cypress/platform/current.html         | 84 ++++++++++++++-----------
 docs/index.html                       |  2 +-
 src/dagre-wrapper/edges.js            | 88 +++++++++++++++++++++------
 src/dagre-wrapper/edges.spec.js       | 63 +++++++++++++++++++
 src/dagre-wrapper/index.js            |  4 +-
 src/dagre-wrapper/mermaid-graphlib.js | 12 ++--
 6 files changed, 193 insertions(+), 60 deletions(-)
 create mode 100644 src/dagre-wrapper/edges.spec.js
diff --git a/cypress/platform/current.html b/cypress/platform/current.html
index b95b8c19e..ba896f143 100644
--- a/cypress/platform/current.html
+++ b/cypress/platform/current.html
@@ -4,15 +4,16 @@
       href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
       rel="stylesheet"
     />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
     <style>
       body {
         /* background: rgb(221, 208, 208); */
-        background:#333;
+        /* background:#333; */
         font-family: 'Arial';
         }
-      h1 { color: white;}
+      h1 { color: grey;}
       .mermaid2 {
         display: none;
       }
@@ -20,38 +21,53 @@
   </head>
   <body>
     <h1>info below</h1>
-      <div class="mermaid" style="width: 50%; height: 20%;">
+    <div class="flex">
+      <div class="mermaid2" style="width: 50%; height: 20%;">
+flowchart BT
+    subgraph two
+    b1
+    end
+    subgraph three
+    c1-->c2
+    end
+    c1 --apa apa apa--> b1
+    two --> c2
+      </div>
+      <div class="mermaid2" style="width: 50%; height: 20%;">
 flowchart TB
-  subgraph 1
-    A --> B;
-    A -.-> C;
-    A ==> D;
-    A ==> E;
-    B <--> F
-    C <--> F
-    D <--> F
-    E <--> F
-  end
-  subgraph 2
-    A2 --x B2;
-    A2 -.-x C2;
-    A2 ==x D2;
-    A2 ==x E2;
-    B2 x--x F2
-    C2 x--x F2
-    D2 x--x F2
-    E2 x--x F2
-  end
-  subgraph 3
-    A3 --o B3;
-    A3 -.-o C3;
-    A3 ==o D3;
-    A3 ==o E3;
-    B3 o--o F3
-    C3 o--o F3
-    D3 o--o F3
-    E3 o--o F3
-  end
+    subgraph two
+    b1
+    end
+    subgraph three
+    c1-->c2
+    end
+    c1 --apa apa apa--> b1
+    b1 --> c2
+      </div>
+      <div class="mermaid" style="width: 50%; height: 20%;">
+
+      flowchart RL
+      subgraph a
+        b1 -- ok --> b2
+      end
+      a -- sert --> c
+      c --> d
+      b1 --> d
+      a --asd123 --> d
+      </div>
+      <div class="mermaid2" style="width: 50%; height: 20%;">
+stateDiagram-v2
+  state A {
+    B1 --> B2: ok
+  }
+  A --> C: sert
+  C --> D
+  B1 --> D
+  A --> D: asd123
+      </div>
+      </div>
+      <div class="mermaid2" style="width: 50%; height: 20%;">
+
       </div>
 
   <script src="./mermaid.js"></script>
@@ -60,7 +76,7 @@ flowchart TB
           // console.error('Mermaid error: ', err);
         };
       mermaid.initialize({
-        theme: 'dark',
+        // theme: 'dark',
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
diff --git a/docs/index.html b/docs/index.html
index 4cb7cd430..86493c169 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -8,7 +8,7 @@
   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
   <script src="//cdn.jsdelivr.net/npm/mermaid@8.5.2/dist/mermaid.min.js"></script>
-  <!-- <script src="http://localhost:9000/mermaid.js"></script> -->
+  <script src="http://localhost:9000/mermaid.js"></script>
   <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
diff --git a/src/dagre-wrapper/edges.js b/src/dagre-wrapper/edges.js
index f0946d524..bc93dab68 100644
--- a/src/dagre-wrapper/edges.js
+++ b/src/dagre-wrapper/edges.js
@@ -2,6 +2,8 @@ import { logger } from '../logger'; // eslint-disable-line
 import createLabel from './createLabel';
 import { line, curveBasis, select } from 'd3';
 import { getConfig } from '../config';
+import utils from '../utils';
+// import { calcLabelPosition } from '../utils';
 
 let edgeLabels = {};
 
@@ -39,11 +41,19 @@ export const insertEdgeLabel = (elem, edge) => {
   edge.height = bbox.height;
 };
 
-export const positionEdgeLabel = edge => {
+export const positionEdgeLabel = (edge, points) => {
   logger.info('Moving label', edge.id, edge.label, edgeLabels[edge.id]);
   if (edge.label) {
     const el = edgeLabels[edge.id];
-    el.attr('transform', 'translate(' + edge.x + ', ' + edge.y + ')');
+    let x = edge.x;
+    let y = edge.y;
+    if (points) {
+      // debugger;
+      const pos = utils.calcLabelPosition(points);
+      x = pos.x;
+      y = pos.y;
+    }
+    el.attr('transform', 'translate(' + x + ', ' + y + ')');
   }
 };
 
@@ -61,20 +71,21 @@ export const positionEdgeLabel = edge => {
 // };
 
 const outsideNode = (node, point) => {
+  // logger.warn('Checking bounds ', node, point);
   const x = node.x;
   const y = node.y;
   const dx = Math.abs(point.x - x);
   const dy = Math.abs(point.y - y);
   const w = node.width / 2;
   const h = node.height / 2;
-  if (dx > w || dy > h) {
+  if (dx >= w || dy >= h) {
     return true;
   }
   return false;
 };
 
-const intersection = (node, outsidePoint, insidePoint) => {
-  logger.trace('intersection o:', outsidePoint, ' i:', insidePoint, node);
+export const intersection = (node, outsidePoint, insidePoint) => {
+  logger.warn('intersection calc o:', outsidePoint, ' i:', insidePoint, node);
   const x = node.x;
   const y = node.y;
 
@@ -83,25 +94,60 @@ const intersection = (node, outsidePoint, insidePoint) => {
   let r = insidePoint.x < outsidePoint.x ? w - dx : w + dx;
   const dy = Math.abs(y - insidePoint.y);
   const h = node.height / 2;
-  let q = insidePoint.y < outsidePoint.y ? h - dy : h - dy;
+
+  const edges = {
+    x1: x - w,
+    x2: x + w,
+    y1: y - h,
+    y2: y + h
+  };
+
+  if (
+    outsidePoint.x === edges.x1 ||
+    outsidePoint.x === edges.x2 ||
+    outsidePoint.y === edges.y1 ||
+    outsidePoint.y === edges.y2
+  ) {
+    // logger.warn('calc equals on edge');
+    return outsidePoint;
+  }
 
   const Q = Math.abs(outsidePoint.y - insidePoint.y);
   const R = Math.abs(outsidePoint.x - insidePoint.x);
-  if (Math.abs(y - outsidePoint.y) * w > Math.abs(x - outsidePoint.x) * h || false) { // eslint-disable-line
+  // log.warn();
+  if (Math.abs(y - outsidePoint.y) * w > Math.abs(x - outsidePoint.x) * h) { // eslint-disable-line
     // Intersection is top or bottom of rect.
-
+    // let q = insidePoint.y < outsidePoint.y ? outsidePoint.y - h - y : y - h - outsidePoint.y;
+    let q = insidePoint.y < outsidePoint.y ? outsidePoint.y - h - y : y - h - outsidePoint.y;
     r = (R * q) / Q;
+    logger.warn(`topp/bott calc, Q ${Q}, q ${q}, R ${R}, r ${r}`, {
+      x: insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : insidePoint.x + dx - w,
+      y: outsidePoint.y + q
+    });
 
     return {
-      x: insidePoint.x < outsidePoint.x ? insidePoint.x + r : insidePoint.x - r,
-      y: insidePoint.y + q
+      x: insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : insidePoint.x + dx - w,
+      y: outsidePoint.y + q
     };
   } else {
-    q = (Q * r) / R;
-    r = (R * q) / Q;
+    // Intersection onn sides of rect
+    // q = (Q * r) / R;
+    // q = 2;
+    // r = (R * q) / Q;
+    if (insidePoint.x < outsidePoint.x) {
+      r = outsidePoint.x - w - x;
+    } else {
+      // r = outsidePoint.x - w - x;
+      r = x - w - outsidePoint.x;
+    }
+    let q = (q = (Q * r) / R);
+    logger.warn(`sides calc, Q ${Q}, q ${q}, R ${R}, r ${r}`, {
+      x: insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : insidePoint.x + dx - w,
+      y: insidePoint.y < outsidePoint.y ? insidePoint.y + q : insidePoint.y - q
+    });
 
     return {
-      x: insidePoint.x < outsidePoint.x ? insidePoint.x + r : insidePoint.x + dx - w,
+      x: insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : insidePoint.x + dx - w,
       y: insidePoint.y < outsidePoint.y ? insidePoint.y + q : insidePoint.y - q
     };
   }
@@ -110,7 +156,7 @@ const intersection = (node, outsidePoint, insidePoint) => {
 //(edgePaths, e, edge, clusterDb, diagramtype, graph)
 export const insertEdge = function(elem, e, edge, clusterDb, diagramType, graph) {
   let points = edge.points;
-
+  let pointsHasChanged = false;
   const tail = graph.node(e.v);
   var head = graph.node(e.w);
 
@@ -147,11 +193,12 @@ export const insertEdge = function(elem, e, edge, clusterDb, diagramType, graph)
       }
       lastPointOutside = point;
     });
+    pointsHasChanged = true;
   }
 
   if (edge.fromCluster) {
     logger.trace('edge', edge);
-    logger.trace('from cluster', clusterDb[edge.toCluster]);
+    logger.warn('from cluster', clusterDb[edge.fromCluster]);
     const updatedPoints = [];
     let lastPointOutside;
     let isInside = false;
@@ -160,7 +207,7 @@ export const insertEdge = function(elem, e, edge, clusterDb, diagramType, graph)
       const node = clusterDb[edge.fromCluster].node;
 
       if (!outsideNode(node, point) && !isInside) {
-        logger.trace('inside', edge.toCluster, point);
+        logger.warn('inside', edge.fromCluster, point, node);
 
         // First point inside the rect
         const insterection = intersection(node, lastPointOutside, point);
@@ -176,6 +223,7 @@ export const insertEdge = function(elem, e, edge, clusterDb, diagramType, graph)
       lastPointOutside = point;
     }
     points = updatedPoints;
+    pointsHasChanged = true;
   }
 
   // The data for our line
@@ -188,8 +236,8 @@ export const insertEdge = function(elem, e, edge, clusterDb, diagramType, graph)
     })
     .y(function(d) {
       return d.y;
-    })
-    .curve(curveBasis);
+    });
+  // .curve(curveBasis);
 
   // Contruct stroke classes based on properties
   let strokeClasses;
@@ -275,4 +323,8 @@ export const insertEdge = function(elem, e, edge, clusterDb, diagramType, graph)
       break;
     default:
   }
+
+  if (pointsHasChanged) {
+    return points;
+  }
 };
diff --git a/src/dagre-wrapper/edges.spec.js b/src/dagre-wrapper/edges.spec.js
new file mode 100644
index 000000000..05b02d981
--- /dev/null
+++ b/src/dagre-wrapper/edges.spec.js
@@ -0,0 +1,63 @@
+import { intersection } from './edges';
+import { setLogLevel, logger } from '../logger';
+
+describe('Graphlib decorations', () => {
+  let node;
+  beforeEach(function () {
+    setLogLevel(1);
+    node = { x:171, y:100, width: 210, height: 184};
+  });
+
+  describe('intersection', function () {
+    it('case 1 - intersection on left edge of box', function () {
+      const o = {x: 31, y: 143.2257070163421};
+      const i = {x: 99.3359375, y: 100}
+      const int = intersection(node, o, i);
+      expect(int.x).toBe(66)
+      expect(int.y).toBeCloseTo(122.139)
+    });
+
+    it('case 2 - intersection on left edge of box', function () {
+      const o = {x: 310.2578125, y: 169.88002060631462};
+      const i = {x: 127.96875, y: 100};
+      const node2 = {
+        height: 337.5,
+        width: 184.4609375,
+        x: 100.23046875,
+        y: 176.75
+      }
+      const int = intersection(node2, o, i);
+            expect(int.x).toBeCloseTo(192.4609375)
+      expect(int.y).toBeCloseTo(145.15711441743503)
+
+    });
+    it('case 3 - intersection on otop of box outside point greater then inside point', function () {
+      const o = {x: 157.21875, y: 38.83361558001693};
+      const i = {x: 104.1328125, y: 105};
+      const node2 = {
+        width: 211.96875,
+        x: 113.984375,
+        y: 164.25,
+        height: 176.5
+      }
+      const int = intersection(node2, o, i);
+            expect(int.x).toBeCloseTo(127.39979619565217)
+      expect(int.y).toBeCloseTo(76)
+
+    });
+        it('case 4 - intersection on top of box inside point greater then inside point', function () {
+          const o = {x: 144.65625, y: 38.83361558001693};
+          const i = {x: 197.7421875, y: 105};
+          const node2 = {
+            width: 211.96875,
+            x: 113.984375,
+            y: 164.25,
+            height: 176.5
+          }
+          const int = intersection(node2, o, i);
+                expect(int.x).toBeCloseTo(127.39979619565217)
+          expect(int.y).toBeCloseTo(76)
+
+        });
+  });
+});
diff --git a/src/dagre-wrapper/index.js b/src/dagre-wrapper/index.js
index 348f7b5b3..a9d537cca 100644
--- a/src/dagre-wrapper/index.js
+++ b/src/dagre-wrapper/index.js
@@ -124,8 +124,8 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
     const edge = graph.edge(e);
     log.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(edge), edge);
 
-    insertEdge(edgePaths, e, edge, clusterDb, diagramtype, graph);
-    positionEdgeLabel(edge);
+    const updatedPath = insertEdge(edgePaths, e, edge, clusterDb, diagramtype, graph);
+    positionEdgeLabel(edge, updatedPath);
   });
 
   return elem;
diff --git a/src/dagre-wrapper/mermaid-graphlib.js b/src/dagre-wrapper/mermaid-graphlib.js
index 41248adc2..1fd07886d 100644
--- a/src/dagre-wrapper/mermaid-graphlib.js
+++ b/src/dagre-wrapper/mermaid-graphlib.js
@@ -171,7 +171,9 @@ export const validate = graph => {
 export const findNonClusterChild = (id, graph) => {
   // const node = graph.node(id);
   log.trace('Searching', id);
-  const children = graph.children(id);
+  const children = graph.children(id).reverse();
+  // const children = graph.children(id); //.reverse();
+  log.trace('Searching children of id ', id, children);
   if (children.length < 1) {
     log.trace('This is a valid node', id);
     return id;
@@ -213,7 +215,7 @@ export const adjustClustersAndEdges = (graph, depth) => {
   graph.nodes().forEach(function(id) {
     const children = graph.children(id);
     if (children.length > 0) {
-      log.trace(
+      log.warn(
         'Cluster identified',
         id,
         ' Replacement id in edges: ',
@@ -266,17 +268,17 @@ export const adjustClustersAndEdges = (graph, depth) => {
     // Check if link is either from or to a cluster
     log.trace('Fix', clusterDb, 'ids:', e.v, e.w, 'Translateing: ', clusterDb[e.v], clusterDb[e.w]);
     if (clusterDb[e.v] || clusterDb[e.w]) {
-      log.trace('Fixing and trixing - removing', e.v, e.w, e.name);
+      log.warn('Fixing and trixing - removing', e.v, e.w, e.name);
       v = getAnchorId(e.v);
       w = getAnchorId(e.w);
       graph.removeEdge(e.v, e.w, e.name);
       if (v !== e.v) edge.fromCluster = e.v;
       if (w !== e.w) edge.toCluster = e.w;
-      log.trace('Replacing with', v, w, e.name);
+      log.warn('Replacing with', v, w, e.name);
       graph.setEdge(v, w, edge, e.name);
     }
   });
-  log.debug('Adjusted Graph', graphlib.json.write(graph));
+  log.warn('Adjusted Graph', graphlib.json.write(graph));
 
   log.trace(clusterDb);
 
