slider component

1 files changed, 15 insertions, 13 deletions

diff --git a/frontend/views/graph/components/graph.editor.js b/frontend/views/graph/components/graph.editor.js
index f8b45f9..87109bf 100644
--- a/frontend/views/graph/components/graph.editor.js
+++ b/frontend/views/graph/components/graph.editor.js
@@ -182,6 +182,10 @@ class GraphEditor extends Component {
 }
 
 const DEFAULT_MEASUREMENT = { width: 16, height: 16 }
+const BACKLINK_SPACING = 10
+const ARROWHEAD_LENGTH = 10
+const GRAPH_LINK_COLOR = "#ff88ff"
+const GRAPH_BACKLINK_COLOR = "#88ffff"
 
 class GraphCanvas extends Component {
   constructor(props) {
@@ -207,7 +211,6 @@ class GraphCanvas extends Component {
       canvas.width = width
       canvas.height = height
     }
-    console.log(measurements)
     const ctx = canvas.getContext('2d')
     ctx.clearRect(0, 0, width, height)
     ctx.lineWidth = 2
@@ -234,11 +237,11 @@ class GraphCanvas extends Component {
         const targetCoord = coordsLookup[tile.page_id]
         let tile_measurement = measurements[tile.page_id] || DEFAULT_MEASUREMENT
         let target_measurement = measurements[tile.target_page_id] || DEFAULT_MEASUREMENT
-        let x1_offset = tile_measurement.width / 2
+        let theta = angle(targetCoord.x, targetCoord.y, sourceCoord.x, sourceCoord.y)
+        let x1_offset = tile_measurement.width / 2 // * (0.5 - Math.cos(theta))
         let y1_offset = tile_measurement.height / 2
-        let x2_offset = target_measurement.width / 2
+        let x2_offset = target_measurement.width / 2 // (0.5 - Math.cos(theta))
         let y2_offset = target_measurement.height / 2
-        let theta = angle(targetCoord.x, targetCoord.y, sourceCoord.x, sourceCoord.y)
         // skip duplicate links
         if (sourceCoord.backlinks.has(tile.page_id)) {
           return
@@ -246,13 +249,13 @@ class GraphCanvas extends Component {
         // if this is the first time encountering this link...
         if (!targetCoord.backlinks.has(tile.target_page_id)) {
           sourceCoord.backlinks.add(tile.page_id)
-          ctx.strokeStyle = "#ff88ff"
+          ctx.strokeStyle = GRAPH_LINK_COLOR
         } else { // otherwise this is a two-way link
-          x1_offset += 10 * Math.cos(theta + Math.PI /2)
-          y1_offset += 10 * Math.sin(theta + Math.PI /2)
-          x2_offset += 10 * Math.cos(theta + Math.PI /2)
-          y2_offset += 10 * Math.sin(theta + Math.PI /2)
-          ctx.strokeStyle = "#88ffff"
+          x1_offset += BACKLINK_SPACING * Math.cos(theta + Math.PI /2)
+          y1_offset += BACKLINK_SPACING * Math.sin(theta + Math.PI /2)
+          x2_offset += BACKLINK_SPACING * Math.cos(theta + Math.PI /2)
+          y2_offset += BACKLINK_SPACING * Math.sin(theta + Math.PI /2)
+          ctx.strokeStyle = GRAPH_BACKLINK_COLOR
         }
         ctx.beginPath()
         const x1 = targetCoord.x * width + x1_offset
@@ -266,7 +269,6 @@ class GraphCanvas extends Component {
   }
   
   arrow(ctx, x1, y1, x2, y2) {
-    const headlen = 10 // length of head in pixels
     const farOffset = 20
     const endOffset = 1
     const theta = angle(x1, y1, x2, y2)
@@ -281,9 +283,9 @@ class GraphCanvas extends Component {
     ctx.moveTo(x1, y1)
     ctx.lineTo(xEnd, yEnd)
     ctx.moveTo(x2, y2)
-    ctx.lineTo(x2 - headlen * Math.cos(leftAngle), y2 - headlen * Math.sin(leftAngle))
+    ctx.lineTo(x2 - ARROWHEAD_LENGTH * Math.cos(leftAngle), y2 - ARROWHEAD_LENGTH * Math.sin(leftAngle))
     ctx.moveTo(x2, y2)
-    ctx.lineTo(x2 - headlen * Math.cos(rightAngle), y2 - headlen * Math.sin(rightAngle))
+    ctx.lineTo(x2 - ARROWHEAD_LENGTH * Math.cos(rightAngle), y2 - ARROWHEAD_LENGTH * Math.sin(rightAngle))
   }
 
   render() {