Link text

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]

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)