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

Link text

Browse source
This commit is contained in:
Adrian Heine 2020-09-18 10:27:21 +02:00
parent 7d4abed595
commit 8090edbd69
2 changed files with 19 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/display.js
View file

@ -35,8 +35,8 @@ export class Display {
target.addEventListener('drop', e => { target.addEventListener('drop', e => {
let target = findA(e.target) let target = findA(e.target)
if (!target || !target.draggable) return if (!target || !target.draggable) return
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']})
&& e.preventDefault()
}) })
this.graph = new Springy.Graph() this.graph = new Springy.Graph()
@ -58,7 +58,9 @@ export class Display {
graph.addNode(new Springy.Node(item.id, item)) graph.addNode(new Springy.Node(item.id, item))
} }
for (const item of state.links) { 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 currentBB = this.layout.getBoundingBox()
let width = this.target.scrollWidth || 100 let width = this.target.scrollWidth || 100
@ -86,7 +88,7 @@ export class Display {
}, },
function drawEdge(edge, p1, p2) { function drawEdge(edge, p1, p2) {
const dom = document.createElement('span') const dom = document.createElement('span')
dom.innerText = 'text' dom.innerText = edge.data.text
p1 = toScreen(p1) p1 = toScreen(p1)
p2 = toScreen(p2) p2 = toScreen(p2)
if (p1.y > p2.y) [p1, p2] = [p2, p1] if (p1.y > p2.y) [p1, p2] = [p2, p1]

19
src/index.js
View file

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