control spacing of these divs

1 files changed, 13 insertions, 13 deletions

diff --git a/frontend/views/graph/components/graph.editor.js b/frontend/views/graph/components/graph.editor.js
index c1b3432..d2f7194 100644
--- a/frontend/views/graph/components/graph.editor.js
+++ b/frontend/views/graph/components/graph.editor.js
@@ -9,7 +9,7 @@ import actions from '../../../actions'
 import * as graphActions from '../graph.actions'
 
 import { Loader } from '../../../common'
-import { clamp, dist, mod } from '../../../util'
+import { clamp, dist, mod, angle } from '../../../util'
 
 const defaultState = {
   dragging: false,
@@ -220,6 +220,7 @@ class GraphCanvas extends Component {
         const targetCoord = coordsLookup[tile.page_id]
         let xOffset = 16
         let yOffset = 16
+        let theta = angle(targetCoord.x, targetCoord.y, sourceCoord.x, sourceCoord.y)
         // skip duplicate links
         if (sourceCoord.backlinks.has(tile.page_id)) {
           return
@@ -229,7 +230,8 @@ class GraphCanvas extends Component {
           sourceCoord.backlinks.add(tile.page_id)
           ctx.strokeStyle = "#ff88ff"
         } else { // otherwise this is a two-way link
-          xOffset += 10
+          xOffset += 10 * Math.cos(theta + Math.PI /2)
+          yOffset += 10 * Math.sin(theta + Math.PI /2)
           ctx.strokeStyle = "#88ffff"
         }
         ctx.beginPath()
@@ -245,19 +247,17 @@ class GraphCanvas extends Component {
   
   arrow(ctx, x1, y1, x2, y2) {
     const headlen = 10 // length of head in pixels
-    const dx = x2 - x1
-    const dy = y2 - y1
-    const angle = Math.atan2(dy, dx)
     const farOffset = 20
     const endOffset = 1
-    x1 += Math.cos(angle) * 0
-    x2 -= Math.cos(angle) * farOffset
-    y1 += Math.sin(angle) * 0
-    y2 -= Math.sin(angle) * farOffset
-    const xEnd = x2 - Math.cos(angle) * endOffset
-    const yEnd = y2 - Math.sin(angle) * endOffset
-    const leftAngle = mod(angle - Math.PI / 6, Math.PI * 2)
-    const rightAngle = mod(angle + Math.PI / 6, Math.PI * 2)
+    const theta = angle(x1, y1, x2, y2)
+    x1 += Math.cos(theta) * 0
+    x2 -= Math.cos(theta) * farOffset
+    y1 += Math.sin(theta) * 0
+    y2 -= Math.sin(theta) * farOffset
+    const xEnd = x2 - Math.cos(theta) * endOffset
+    const yEnd = y2 - Math.sin(theta) * endOffset
+    const leftAngle = mod(theta - Math.PI / 6, Math.PI * 2)
+    const rightAngle = mod(theta + Math.PI / 6, Math.PI * 2)
     ctx.moveTo(x1, y1)
     ctx.lineTo(xEnd, yEnd)
     ctx.moveTo(x2, y2)