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