Link

src/display.js

@@ -2,16 +2,43 @@ export class Display {
   constructor(baseUrl, dispatch, target) {
     this.baseUrl = baseUrl
     this.target = target
-    target.addEventListener('click', e => {
+    const findA = target => {
-      let target = e.target
       while (target.nodeName !== 'A') {
         target = target.parentNode
         if (!target) return
       }
+      return target
+    }
+    target.addEventListener('click', e => {
+      let target = findA(e.target)
+      if (!target) return
       window.history.pushState(null, "", target.href)
       dispatch(target.getAttribute('href'))
       e.preventDefault()
     })
+    target.addEventListener('dragstart', e => {
+      let target = findA(e.target)
+      if (!target || !target.draggable) return
+      e.dataTransfer.setData('application/prs.x', target.dataset['id'])
+      e.dataTransfer.effectAllowed = 'link'
+    })
+    target.addEventListener('dragenter', e => {
+      let target = findA(e.target)
+      if (!target) return
+      e.preventDefault()
+    })
+    target.addEventListener('dragover', e => {
+      let target = findA(e.target)
+      if (!target) return
+      e.preventDefault()
+    })
+    target.addEventListener('drop', e => {
+      let target = findA(e.target)
+      if (!target) return
+      e.preventDefault()
+      dispatch({ action: 'link', from: e.dataTransfer.getData("application/prs.x"), to: target.dataset['id']})
+    })
+
     this.graph = new Springy.Graph()
     this.layout = new Springy.Layout.ForceDirected(
       this.graph,
@@ -26,33 +53,13 @@ export class Display {
     const field = document.createElement('ul')
     field.className = 'items'
 
-    field.addEventListener('dragstart', e => {
-      let target = findA(e.target)
-      if (!target || !target.draggable) return
-      e.dataTransfer.setData('application/prs.x', target.dataset['id'])
-      e.dataTransfer.effectAllowed = 'link'
-    })
-    field.addEventListener('dragenter', e => {
-      let target = findA(e.target)
-      if (!target) return
-      e.preventDefault()
-    })
-    field.addEventListener('dragover', e => {
-      let target = findA(e.target)
-      if (!target) return
-      e.preventDefault()
-    })
-    field.addEventListener('drop', e => {
-      let target = findA(e.target)
-      if (!target) return
-      e.preventDefault()
-      dispatch({ action: 'link', from: e.dataTransfer.getData("application/prs.x"), to: target.dataset['id']})
-    })
-
     const graph = this.graph
     for (const item of state.items) {
       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], {}))
+    }
     let currentBB = this.layout.getBoundingBox()
     let width = this.target.scrollWidth || 100
     let height = this.target.scrollHeight || 100
@@ -86,7 +93,12 @@ export class Display {
         const a = document.createElement('a')
         const action = item.data.state == 'face-down' ? 'flip' : 'show'
         a.href = `/${item.id}/${action}`
-        a.style.backgroundImage = `url(img/${item.data.img})`
+        a.draggable = false
+        if (item.data.state !== 'face-down') {
+          a.style.backgroundImage = `url(/img/${item.data.img})`
+          a.dataset['id'] = item.id
+          a.draggable = true
+        }
         dom.className = item.data.state
         dom.style.position = 'absolute'
         dom.style.left = target.x + 'px'

src/index.js

@@ -2,7 +2,7 @@ import {Display} from './display.js'
 
 const target = document.createElement('div')
 
-const state = {items: [], show: null }
+const state = {items: [], show: null, links: [] }
 for (let i = 0; i < 16; ++i) {
   state.items.push({id: i, state: 'face-down', img: 'weben.svg'})
 }
@@ -17,15 +17,22 @@ class Actions {
   reset() {
     state.show = null
   }
+  link(from, to) {
+    state.links.push({id: state.links.length, from, to})
+  }
 }
 const actions = new Actions
 
 let display
 const dispatch = target => {
+  if (target.action) {
+    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])
     } else actions.reset()
+  }
   display.render(state)
 }
 window.onpopstate = e => {

style.css

@@ -27,8 +27,9 @@ body {
   width: 120px;
   height: 120px;
   background: #D66C00;
-  border-radius: 60px;
+  border-radius: 80px;
   display: block;
+  border: 3px solid #1a1c1c;
 }
 
 .items > li a:hover {
@@ -37,8 +38,10 @@ body {
 }
 
 .items > li.face-up a {
-  background-size: cover;
   background-color: #ed8112;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
 }
 
 .fullview {