Springy

src/display.js

@@ -12,6 +12,13 @@ export class Display {
       dispatch(target.getAttribute('href'))
       e.preventDefault()
     })
+    this.graph = new Springy.Graph()
+    this.layout = new Springy.Layout.ForceDirected(
+      this.graph,
+      400.0, // Spring stiffness
+      400.0, // Node repulsion
+      0.5 // Damping
+    )
   }
   render(state) {
     const target = document.createElement('div')
@@ -19,15 +26,58 @@ export class Display {
     const field = document.createElement('ul')
     field.className = 'items'
 
+    const graph = this.graph
     for (const item of state.items) {
-      const dom = document.createElement('li')
-      const a = document.createElement('a')
-      const action = item.state == 'face-down' ? 'flip' : 'show'
-      a.href = `/${item.id}/${action}`
-      dom.className = item.state
-      dom.appendChild(a)
-      field.appendChild(dom)
+      graph.addNode(new Springy.Node(item.id, item))
     }
+    let currentBB = this.layout.getBoundingBox()
+    let width = this.target.scrollWidth || 100
+    let height = this.target.scrollHeight || 100
+    var toScreen = function(p) {
+      var size = currentBB.topright.subtract(currentBB.bottomleft);
+      var sx = p.subtract(currentBB.bottomleft).divide(size.x).x * (width - 100);
+      var sy = p.subtract(currentBB.bottomleft).divide(size.y).y * (height - 100);
+      return new Springy.Vector(sx, sy);
+    };
+
+    var fromScreen = function(s) {
+      var size = currentBB.topright.subtract(currentBB.bottomleft);
+      var px = (s.x / canvas.width) * size.x + currentBB.bottomleft.x;
+      var py = (s.y / canvas.height) * size.y + currentBB.bottomleft.y;
+      return new Springy.Vector(px, py);
+    };
+    var renderer = new Springy.Renderer(
+      this.layout,
+      () => {
+        currentBB = this.layout.getBoundingBox()
+        width = this.target.scrollWidth
+        height = this.target.scrollHeight
+        field.innerHTML = ''
+      },
+      function drawEdge(edge, p1, p2) {
+        // draw an edge
+      },
+      function drawNode(item, p) {
+        const target = toScreen(p)
+        const dom = document.createElement('li')
+        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})`
+        dom.className = item.data.state
+        dom.style.position = 'absolute'
+        dom.style.left = target.x + 'px'
+        dom.style.top = target.y + 'px'
+        dom.appendChild(a)
+        field.appendChild(dom)
+      }, undefined, undefined,
+      () => {
+        const dd = new diffDOM.DiffDOM()
+        const diff = dd.diff(this.target.children[0], field)
+        dd.apply(this.target.children[0], diff)
+      }
+    );
+
     target.appendChild(field)
     if (state.show !== null) {
       const wrapper = document.createElement('a')
@@ -41,5 +91,7 @@ export class Display {
     const dd = new diffDOM.DiffDOM()
     const diff = dd.diff(this.target, target)
     dd.apply(this.target, diff)
+
+    renderer.start();
   }
 }

src/index.js

@@ -4,7 +4,7 @@ const target = document.createElement('div')
 
 const state = {items: [], show: null }
 for (let i = 0; i < 16; ++i) {
-  state.items.push({id: i, state: 'face-down'})
+  state.items.push({id: i, state: 'face-down', img: 'weben.svg'})
 }
 
 class Actions {