Draw edges

src/display.js

@@ -34,7 +34,7 @@ export class Display {
     })
     target.addEventListener('drop', e => {
       let target = findA(e.target)
-      if (!target) return
+      if (!target || !target.draggable) return
       e.preventDefault()
       dispatch({ action: 'link', from: e.dataTransfer.getData("application/prs.x"), to: target.dataset['id']})
     })
@@ -42,8 +42,8 @@ export class Display {
     this.graph = new Springy.Graph()
     this.layout = new Springy.Layout.ForceDirected(
       this.graph,
-      400.0, // Spring stiffness
+      15,
-      400.0, // Node repulsion
+      1000.0, // Node repulsion
       0.5 // Damping
     )
   }
@@ -65,8 +65,8 @@ export class Display {
     let height = this.target.scrollHeight || 100
     var toScreen = function(p) {
       var size = currentBB.topright.subtract(currentBB.bottomleft);
-      var sx = p.subtract(currentBB.bottomleft).divide(size.x).x * (width - 100);
+      var sx = p.subtract(currentBB.bottomleft).divide(size.x).x * (width - 60) + 30;
-      var sy = p.subtract(currentBB.bottomleft).divide(size.y).y * (height - 100);
+      var sy = p.subtract(currentBB.bottomleft).divide(size.y).y * (height - 60) + 30;
       return new Springy.Vector(sx, sy);
     };
 
@@ -85,7 +85,35 @@ export class Display {
         field.innerHTML = ''
       },
       function drawEdge(edge, p1, p2) {
-        // draw an edge
+        const dom = document.createElement('span')
+        dom.innerText = 'text'
+        p1 = toScreen(p1)
+        p2 = toScreen(p2)
+        if (p1.y > p2.y) [p1, p2] = [p2, p1]
+        const a = p2.x - p1.x
+        const b = p2.y - p1.y
+        const negative = (a < 0) != (b < 0)
+        let rad = Math.atan(b / a)
+        if (negative) rad = rad + Math.PI
+        if (rad > Math.PI / 2) {
+          console.warn(negative)
+          rad += Math.PI
+          ;[p2, p1] = [p1, p2]
+        } else if (negative) { console.warn(false) }
+
+        dom.style.transformOrigin = '0 0'
+        dom.style.transform = 'rotate(' + rad + 'rad) translateY(-1em)'
+        dom.style.position = 'absolute'
+        dom.style.left = p1.x + 'px'
+        dom.style.top = p1.y + 'px'
+        dom.style.right = p2.x + 'px'
+        dom.style.bottom = p2.y + 'px'
+        dom.style.width = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2)) + 'px'
+        dom.style.height = '1em'
+        dom.style.borderBottom = '3px solid black'
+        dom.style.textAlign = 'center'
+        // FIXME eigentlich falsches parent
+        field.appendChild(dom)
       },
       function drawNode(item, p) {
         const target = toScreen(p)
@@ -101,8 +129,8 @@ export class Display {
         }
         dom.className = item.data.state
         dom.style.position = 'absolute'
-        dom.style.left = target.x + 'px'
+        dom.style.left = (target.x - 60) + 'px'
-        dom.style.top = target.y + 'px'
+        dom.style.top = (target.y - 60) + 'px'
         dom.appendChild(a)
         field.appendChild(dom)
       }, undefined, undefined,