Browse Source

Link text

master
Adrian Heine 4 years ago
parent
commit
8090edbd69
  1. 8
      src/display.js
  2. 19
      src/index.js

8
src/display.js

@ -35,8 +35,8 @@ export class Display {
target.addEventListener('drop', e => {
let target = findA(e.target)
if (!target || !target.draggable) return
e.preventDefault()
dispatch({ action: 'link', from: e.dataTransfer.getData("application/prs.x"), to: target.dataset['id']})
&& e.preventDefault()
})
this.graph = new Springy.Graph()
@ -58,7 +58,9 @@ export class Display {
graph.addNode(new Springy.Node(item.id, item))
}
for (const item of state.links) {
graph.addEdge(new Springy.Edge(item.id, graph.nodeSet[item.from], graph.nodeSet[item.to], {}))
graph.addEdge(new Springy.Edge(item.id, graph.nodeSet[item.from], graph.nodeSet[item.to], {
text: state.items[item.from].linkable.filter(i => state.items[item.to].linkable.includes(i)).join(', ')
}))
}
let currentBB = this.layout.getBoundingBox()
let width = this.target.scrollWidth || 100
@ -86,7 +88,7 @@ export class Display {
},
function drawEdge(edge, p1, p2) {
const dom = document.createElement('span')
dom.innerText = 'text'
dom.innerText = edge.data.text
p1 = toScreen(p1)
p2 = toScreen(p2)
if (p1.y > p2.y) [p1, p2] = [p2, p1]

19
src/index.js

@ -4,9 +4,15 @@ const target = document.createElement('div')
const state = {items: [], show: null, links: [] }
const imgs = ['Dienstmädchen2.svg', 'Rucksack2.svg', 'Theater2.svg', 'UnskilledLabour2.svg', 'weben.svg']
for (let i = 0; i < imgs.length; ++i) {
state.items.push({id: i, state: 'face-down', img: imgs[i]})
const items = [
{img: 'Dienstmädchen2.svg', linkable: ['Prekär']},
{img: 'Rucksack2.svg', linkable: ['Prekär']},
{img: 'Theater2.svg', linkable: ['Prekär']},
{img: 'UnskilledLabour2.svg', linkable: ['Prekär']},
{img: 'weben.svg', linkable: ['Prekär']}
]
for (let i = 0; i < items.length; ++i) {
state.items.push({id: i, state: 'face-down', img: items[i].img, linkable: items[i].linkable})
}
class Actions {
@ -21,21 +27,24 @@ class Actions {
}
link(from, to) {
state.links.push({id: state.links.length, from, to})
return true
}
}
const actions = new Actions
let display
const dispatch = target => {
let ret
if (target.action) {
actions[target.action](target.from, target.to)
ret = actions[target.action](target.from, target.to)
} else {
const match = target.match(/\/([^/]+)\/([^/]+)/)
if (match && Object.hasOwnProperty.call(Actions.prototype, match[2])) {
actions[match[2]](match[1])
ret = actions[match[2]](match[1])
} else actions.reset()
}
display.render(state)
return ret
}
window.onpopstate = e => {
dispatch(document.location.search)

Loading…
Cancel
Save