Browse Source

Link text

master
Adrian Heine 8 months ago
parent
commit
8090edbd69
2 changed files with 19 additions and 8 deletions
  1. +5
    -3
      src/display.js
  2. +14
    -5
      src/index.js

+ 5
- 3
src/display.js View File

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


+ 14
- 5
src/index.js View File

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