From 8090edbd69d4f66c17006dc4c787938317a4ba81 Mon Sep 17 00:00:00 2001
From: Adrian Heine <mail@adrianheine.de>
Date: Fri, 18 Sep 2020 10:27:21 +0200
Subject: [PATCH] Link text

---
 src/display.js |  8 +++++---
 src/index.js   | 19 ++++++++++++++-----
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/display.js b/src/display.js
index 6f1efed..589c1cb 100644
--- a/src/display.js
+++ b/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]
diff --git a/src/index.js b/src/index.js
index 4834d6e..4a4e84a 100644
--- a/src/index.js
+++ b/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)