diff --git a/src/display.js b/src/display.js index d935f1b..6f1efed 100644 --- a/src/display.js +++ b/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 - 400.0, // Node repulsion + 15, + 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 sy = p.subtract(currentBB.bottomleft).divide(size.y).y * (height - 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 - 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.top = target.y + 'px' + dom.style.left = (target.x - 60) + 'px' + dom.style.top = (target.y - 60) + 'px' dom.appendChild(a) field.appendChild(dom) }, undefined, undefined,