Browse Source

Draw edges

master
Adrian Heine 4 years ago
parent
commit
e0d2c4da9f
  1. 44
      src/display.js

44
src/display.js

@ -34,7 +34,7 @@ export class Display {
}) })
target.addEventListener('drop', e => { target.addEventListener('drop', e => {
let target = findA(e.target) let target = findA(e.target)
if (!target) return
if (!target || !target.draggable) return
e.preventDefault() e.preventDefault()
dispatch({ action: 'link', from: e.dataTransfer.getData("application/prs.x"), to: target.dataset['id']}) 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.graph = new Springy.Graph()
this.layout = new Springy.Layout.ForceDirected( this.layout = new Springy.Layout.ForceDirected(
this.graph, this.graph,
400.0, // Spring stiffness
400.0, // Node repulsion
15,
1000.0, // Node repulsion
0.5 // Damping 0.5 // Damping
) )
} }
@ -65,8 +65,8 @@ export class Display {
let height = this.target.scrollHeight || 100 let height = this.target.scrollHeight || 100
var toScreen = function(p) { var toScreen = function(p) {
var size = currentBB.topright.subtract(currentBB.bottomleft); 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); return new Springy.Vector(sx, sy);
}; };
@ -85,7 +85,35 @@ export class Display {
field.innerHTML = '' field.innerHTML = ''
}, },
function drawEdge(edge, p1, p2) { 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) { function drawNode(item, p) {
const target = toScreen(p) const target = toScreen(p)
@ -101,8 +129,8 @@ export class Display {
} }
dom.className = item.data.state dom.className = item.data.state
dom.style.position = 'absolute' 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) dom.appendChild(a)
field.appendChild(dom) field.appendChild(dom)
}, undefined, undefined, }, undefined, undefined,

Loading…
Cancel
Save