adrian/coding-precarity
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Draw edges

Browse source
This commit is contained in:
Adrian Heine 2020-09-18 00:09:12 +02:00
parent 66fb068fa5
commit e0d2c4da9f
1 changed files with 36 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

44
src/display.js
View file

@ -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,