Matteo Scandolo | 219b1a7 | 2016-02-09 11:19:22 -0800 | [diff] [blame] | 1 | (function () { |
| 2 | 'use strict'; |
| 3 | |
| 4 | angular.module('xos.serviceTopology') |
| 5 | .service('LogicTopologyHelper', function($window, $log, lodash, serviceTopologyConfig){ |
| 6 | |
| 7 | var hStep, vStep; |
| 8 | |
| 9 | const createDevice = (container, device, xPos, yPos, target) => { |
| 10 | |
| 11 | const deviceGroup = container.append('g') |
| 12 | .attr({ |
| 13 | class: 'device', |
| 14 | transform: `translate(${xPos}, ${yPos})` |
| 15 | }); |
| 16 | |
| 17 | const deviceEl = deviceGroup.append('circle') |
| 18 | .attr({ |
| 19 | r: serviceTopologyConfig.circle.radius |
| 20 | }); |
| 21 | |
| 22 | deviceGroup.append('text') |
| 23 | .attr({ |
| 24 | x: - serviceTopologyConfig.circle.radius - 3, |
| 25 | dy: '.35em', |
| 26 | 'text-anchor': 'end' |
| 27 | }) |
| 28 | .text(device.name) |
| 29 | |
| 30 | const [deviceX, deviceY] = d3.transform(deviceEl.attr('transform')).translate; |
| 31 | const [deviceGroupX, deviceGroupY] = d3.transform(deviceGroup.attr('transform')).translate; |
| 32 | let [targetX, targetY] = d3.transform(target.attr('transform')).translate; |
| 33 | |
| 34 | targetX = targetX - deviceGroupX; |
| 35 | targetY = targetY - deviceGroupY; |
| 36 | |
| 37 | console.log('Device: ' + deviceX, deviceY); |
| 38 | console.log('Subscriber: ' + targetX, targetY); |
| 39 | |
| 40 | var diagonal = d3.svg.diagonal() |
| 41 | .source({x: deviceX, y: deviceY}) |
| 42 | .target({x: targetX, y: targetY}) |
Matteo Scandolo | e477990 | 2016-02-09 11:37:11 -0800 | [diff] [blame^] | 43 | // .projection(d => { |
| 44 | // return [d.y, d.x]; |
| 45 | // }); |
Matteo Scandolo | 219b1a7 | 2016-02-09 11:19:22 -0800 | [diff] [blame] | 46 | |
| 47 | deviceGroup |
| 48 | .append('path') |
| 49 | .attr('class', 'device-link') |
| 50 | .attr('d', diagonal); |
| 51 | } |
| 52 | |
| 53 | const createSubscriber = (container, subscriber, xPos, yPos) => { |
| 54 | |
| 55 | const subscriberGroup = container.append('g') |
| 56 | .attr({ |
| 57 | class: 'subscriber', |
| 58 | transform: `translate(${xPos * 2}, ${yPos})` |
| 59 | }); |
| 60 | |
| 61 | subscriberGroup.append('circle') |
| 62 | .attr({ |
| 63 | r: serviceTopologyConfig.circle.radius |
| 64 | }); |
| 65 | |
| 66 | subscriberGroup.append('text') |
| 67 | .attr({ |
| 68 | x: serviceTopologyConfig.circle.radius + 3, |
| 69 | dy: '.35em', |
| 70 | 'text-anchor': 'start' |
| 71 | }) |
| 72 | .text(subscriber.humanReadableName) |
| 73 | |
| 74 | // TODO |
| 75 | // starting from the subscriber position, we should center |
| 76 | // the device goup based on his own height |
| 77 | // const deviceContainer = container.append('g') |
| 78 | // .attr({ |
| 79 | // class: 'devices-container', |
| 80 | // transform: `translate(${xPos}, ${yPos -(vStep / 2)})` |
| 81 | // }); |
| 82 | |
| 83 | angular.forEach(subscriber.devices, (device, j) => { |
| 84 | createDevice(container, device, xPos, ((vStep / subscriber.devices.length) * j) + (yPos - vStep / 2), subscriberGroup); |
| 85 | }); |
| 86 | } |
| 87 | |
| 88 | this.handleSubscribers = (svg, subscribers) => { |
| 89 | |
| 90 | // HACKY |
| 91 | hStep = angular.element(svg[0])[0].clientWidth / 7; |
| 92 | vStep = angular.element(svg[0])[0].clientHeight / (subscribers.length + 1); |
| 93 | |
| 94 | const container = svg.append('g') |
| 95 | .attr({ |
| 96 | class: 'subscribers-container' |
| 97 | }); |
| 98 | |
| 99 | lodash.forEach(subscribers, (subscriber, i) => { |
| 100 | createSubscriber(container, subscriber, hStep, vStep * (i + 1)); |
| 101 | }) |
| 102 | } |
| 103 | }); |
| 104 | |
| 105 | }()); |