git ssb

1
const Renderer = require('ngraph.pixel')
2
const avatar = require('ssb-avatar')
3
const html = require('yo-yo')
4
5
module.exports = createRenderer
6
7
function createRenderer (graph, config) {
8
  var avatarEl = html`<div class="avatar" />`
9
  document.body.appendChild(avatarEl)
10
11
  var display = Renderer(graph, config)
12
13
  display.on('nodehover', handleNodeHover)
14
15
  return display
16
17
  function handleNodeHover (node) {
18
    if (node === undefined) return
19
20
    const { name, image } = node.data.about
21
    const imgSrc = image ? `http://localhost:7777/${image}` : ''
22
23
    const newAvatarEl = html`
24
      <div class="avatar">
25
        <img class="image" src=${imgSrc} />
26
        <div class="name">${name}</div>
27
      </div>
28
    `
29
30
    html.update(avatarEl, newAvatarEl)
31
32
    display.forEachLink(linkUI => {
33
      const { from, to } = linkUI
34
      const friends = node.data.friends
35
36
      const isFromTarget = node.id === from.id
37
      const isToTarget = node.id === to.id
38
39
      const isFromFriend = friends.indexOf(from.id) > -1
40
      const isToFriend = friends.indexOf(to.id) > -1
41
      const involvesFoaF = isFromFriend || isToTarget
42
43
      var fromColor = 0x000066
44
      var toColor = 0x000066
45
46
      const close = 0xffffff
47
      const mid = 0xa94caf
48
      const far = 0x000066
49
50
      if (isFromTarget) {
51
        fromColor = close
52
        toColor = mid
53
      } else if (isToTarget) {
54
        fromColor = mid
55
        toColor = close
56
      } else if (involvesFoaF && isFromFriend) {
57
        fromColor = mid
58
        toColor = far
59
      } else if (involvesFoaF && isToFriend) {
60
        fromColor = far
61
        toColor = mid
62
      }
63
64
      linkUI.fromColor = fromColor
65
      linkUI.toColor = toColor
66
    })
67
  }
68
}
69