From 27930f1aa2c5d690f6d77c64324eb504fee57f01 Mon Sep 17 00:00:00 2001
From: exyi <exyi@outlook.cz>
Date: Tue, 29 Sep 2020 11:19:29 +0000
Subject: [PATCH] better node connections

fix #1
---
 frontend/src/GraphEdge.svelte | 18 ++++++++----------
 frontend/src/GraphNode.svelte |  4 +---
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/frontend/src/GraphEdge.svelte b/frontend/src/GraphEdge.svelte
index 7fe75dd..2b95df5 100644
--- a/frontend/src/GraphEdge.svelte
+++ b/frontend/src/GraphEdge.svelte
@@ -4,14 +4,12 @@
   
     export let edge: SimulationLinkDatum<TaskId>;
   
-    $: x1 = edge === undefined || edge.source === undefined || edge.source.x === undefined ? 0 : edge.source.x;
-    $: y1 = edge === undefined || edge.source === undefined || edge.source.y === undefined ? 0 : edge.source.y;
-    $: x2 = edge === undefined || edge.target === undefined || edge.target.x === undefined ? 0 : edge.target.x;
-    $: y2 = edge === undefined || edge.target === undefined || edge.target.y === undefined ? 0 : edge.target.y;
+    $: x1 = edge?.source?.x ?? 0;
+    $: y1 = edge?.source?.y ?? 0;
+    $: x2 = edge?.target?.x ?? 0;
+    $: y2 = edge?.target?.y ?? 0;
+    $: dx = x1 - x2
+    $: dy = y1 - y2
 </script>
-  
- <line x1={x1+10} y1={y1} {x2} {y2} style="stroke: #aaa" />
- <line x1={x1} y1={y1+10} {x2} {y2} style="stroke: #aaa" />
- <line x1={x1-10} y1={y1} {x2} {y2} style="stroke: #aaa" />
- <line x1={x1} y1={y1-10} {x2} {y2} style="stroke: #aaa" />
-  
\ No newline at end of file
+
+<path d="m {x2} {y2+0} c 0 0 {dx} {dy-40} {dx} {dy-20}" style="fill:none; stroke: #aaa; stroke-width: 3px" />
diff --git a/frontend/src/GraphNode.svelte b/frontend/src/GraphNode.svelte
index 0c5f39d..d696cc5 100644
--- a/frontend/src/GraphNode.svelte
+++ b/frontend/src/GraphNode.svelte
@@ -27,11 +27,9 @@
 
   // automatically size the bubbles to fit the text
   let ellipse_rx = 20;
-  let ellipse_ry = 20;
   onMount(() => {
     const bbox = text_element.getBBox();
     ellipse_rx = bbox.width / 2 + 8;
-    ellipse_ry = bbox.height / 2 + 8;
   });
 </script>
 
@@ -45,7 +43,7 @@
 </style>
 
 <g on:mouseenter={enter} on:mouseleave={leave} on:click={click}>
-  <ellipse rx={ellipse_rx} ry={ellipse_ry} {cx} {cy} />
+  <ellipse rx={ellipse_rx} ry={20} {cx} {cy} />
   <text
     bind:this={text_element}
     x={cx}