Skip to content

Commit 9e76e16

Browse files
Hyperkid123Hyperkid123
committed
code styling
1 parent 23e602c commit 9e76e16

File tree

2 files changed

+106
-70
lines changed

2 files changed

+106
-70
lines changed

‎src/charts/topology-map/examples/topology-map-view.js

Lines changed: 61 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,15 @@
44
* @restrict E
55
*
66
* @description
7-
* Component for rendering a topology chart. Individual nodes and relationships can be represented with this view. CSS is especially important for rendering the nodes and lines. The example inline contains specific examples that can be used to change the icon size and the line type of the relationships.
8-
*
9-
* In addition; searching, filtering and label visibility is also supported.<br/>
7+
* Component for rendering topology chart on Canvas element.
108
* @example
119
<example module="patternfly.charts">
1210
<file name="index.html">
1311
<div ng-controller="TopologyMapCtrl" class="container-topology">
1412
<pf-topology-map nodes="nodes" edges="edges" select-node="selectNode" tooltip-style="tooltipStyle"></pf-topology-map>
1513
<h2>Selected node:</h2>
1614
<label>{{selectedNode}}</label>
15+
<button ng-click="changeData()">Change data</button>
1716
</div>
1817
</file>
1918
<file name="script.js">
@@ -29,8 +28,43 @@
2928
$scope.selectedNode = node;
3029
$scope.$apply()
3130
};
31+
$scope.changeData = function(){
32+
$scope.nodes = [
33+
{
34+
id: '1',
35+
title: 'testNode',
36+
usage: 50,
37+
opacity: 0.5,
38+
size: 32,
39+
iconClass: "fa fa-cog",
40+
iconType: "fonticon",
41+
},
42+
{
43+
id: '2',
44+
title: 'testNode2',
45+
fill: '#FF0000',
46+
usage: 75,
47+
iconClass: "fa fa-info",
48+
iconType: "fonticon",
49+
borderColor: '#AD1457'
50+
},{
51+
id: 'blabla',
52+
title: 'testNode3',
53+
path: "/img/OpenShift-logo.svg",
54+
iconType: "fileicon",
55+
size: 64,
56+
usage: 25,
57+
}
58+
];
59+
$scope.edges = [
60+
{source: '1', target: 'blabla'},
61+
{source: 'blabla', target: '2'},
62+
{source: '1', target: '2'}
63+
];
64+
}
3265
$scope.nodes = [
3366
{
67+
id: '1',
3468
title: 'testNode',
3569
usage: 50,
3670
opacity: 0.5,
@@ -39,52 +73,43 @@
3973
iconType: "fonticon",
4074
},
4175
{
76+
id: '2',
4277
title: 'testNode2',
4378
fill: '#FF0000',
4479
usage: 75,
4580
iconClass: "fa fa-info",
4681
iconType: "fonticon",
47-
boderColor: '#AD1457'
82+
borderColor: '#AD1457'
83+
},{
84+
id: '3',
85+
title: 'testNode3',
86+
path: "/img/OpenShift-logo.svg",
87+
iconType: "fileicon",
88+
size: 64,
89+
usage: 25,
4890
},{
49-
title: 'testNode3',
50-
path: "/img/OpenShift-logo.svg",
51-
iconType: "fileicon",
52-
size: 64,
53-
usage: 25,
54-
},{},{
55-
iconColor: '#AD1457'
56-
},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},
91+
id: '4',
92+
},{
93+
id: 'ABCID',
94+
iconColor: '#AD1457'
95+
}
5796
];
5897
$scope.edges = [{
59-
source: 0,
60-
target: 1,
98+
source: '1',
99+
target: '2',
61100
lineStyle: 'dashed',
62101
},{
63-
source: 5,
64-
target: 1,
102+
source: 'ABCID',
103+
target: '2',
65104
},{
66-
source: 3,
67-
target: 1,
105+
source: '4',
106+
target: '2',
68107
lineStyle: 'dashed',
69108
},{
70-
source: 3,
71-
target: 5,
72-
},{
73-
source: 3,
74-
target: 2,
75-
},{
76-
source: 30,
77-
target: 13,
78-
},{
79-
source: 13,
80-
target: 22,
81-
},{
82-
source: 13,
83-
target: 21,
84-
},{
85-
source: 13,
86-
target: 42,
87-
},];
109+
source: '4',
110+
target: 'ABCID',
111+
},
112+
];
88113
});
89114
</file>
90115
</example>

‎src/charts/topology-map/topologyMap.component.js

Lines changed: 45 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -32,19 +32,25 @@ angular.module('patternfly.charts').component('pfTopologyMap', {
3232
setUpTooltips();
3333
};
3434

35+
this.$onChanges = function () {
36+
if (ctrl.force) {
37+
setUpForce();
38+
}
39+
};
40+
3541
function setUpTooltips () {
3642
var canvas = d3.select(ctrl.canvas);
3743
if (ctrl.tooltipStyle) {
3844
ctrl.tooltipStyle = {
3945
size: ctrl.tooltipStyle.size || 12,
40-
font: ctrl.tooltipStyle.font || 'Arial',
46+
font: ctrl.tooltipStyle.font || '"Open Sans", Helvetica, Arial, sans-serif',
4147
textColor: ctrl.tooltipStyle.textColor || '#FFFFFF',
4248
background: ctrl.tooltipStyle.background || 'rgba(0, 0 , 0, 0.5)'
4349
};
4450
} else {
4551
ctrl.tooltipStyle = {
4652
size: 12,
47-
font: 'Arial',
53+
font: '"Open Sans", Helvetica, Arial, sans-serif',
4854
textColor: '#FFFFFF',
4955
background: 'rgba(0, 0 , 0, 0.5)',
5056
};
@@ -56,7 +62,7 @@ angular.module('patternfly.charts').component('pfTopologyMap', {
5662
if (d3.event.defaultPrevented || ctrl.draggedNode) {
5763
return;
5864
}
59-
ctrl.tooltip = findNode((d3.event.offsetX - ctrl.transform.x) / ctrl.transform.k, (d3.event.offsetY - ctrl.transform.y) / ctrl.transform.k);
65+
ctrl.tooltip = findNode.apply(this, getRealCoordinates(d3.event.offsetX, d3.event.offsetY));
6066
ctrl.force.on('tick')();
6167
}
6268
}
@@ -70,10 +76,9 @@ angular.module('patternfly.charts').component('pfTopologyMap', {
7076
if (d3.event.defaultPrevented) {
7177
return;
7278
}
73-
node = findNode((d3.event.offsetX - ctrl.transform.x) / ctrl.transform.k, (d3.event.offsetY - ctrl.transform.y) / ctrl.transform.k);
79+
node = findNode.apply(this, getRealCoordinates(d3.event.offsetX, d3.event.offsetY));
7480
if (node) {
7581
node.fixed = ! node.fixed;
76-
ctrl.force.nodes()[node.index] = node;
7782
ctrl.selectNode(node);
7883
ctrl.force.start();
7984
}
@@ -84,15 +89,12 @@ angular.module('patternfly.charts').component('pfTopologyMap', {
8489
var coords;
8590
ctrl.canvas = $element[0].querySelector('canvas.topology-graph');
8691
coords = ctrl.canvas.getBoundingClientRect();
87-
// Store the CSS computed width and the height of the canvas
8892
ctrl.canvasW = ctrl.canvas.clientWidth;
8993
ctrl.canvasH = ctrl.canvas.clientHeight;
90-
// We need to set to override the default canvas dimensions
9194
ctrl.canvas.width = ctrl.canvasW;
9295
ctrl.canvas.height = ctrl.canvasH;
9396
ctrl.canvasX = coords.left;
9497
ctrl.canvasY = coords.top;
95-
// Store the canvas' context
9698
ctrl.context = ctrl.canvas.getContext('2d');
9799
}
98100

@@ -106,41 +108,42 @@ angular.module('patternfly.charts').component('pfTopologyMap', {
106108
return result;
107109
}
108110

111+
function getRealCoordinates (x, y) {
112+
return [
113+
(x - ctrl.transform.x) / ctrl.transform.k,
114+
(y - ctrl.transform.y) / ctrl.transform.k,
115+
];
116+
}
117+
109118
function setUpDrag () {
110119
var drag = d3.behavior.drag();
111120
var canvas = d3.select(ctrl.canvas);
112121
canvas.call(drag.on('dragstart', onDragStart).on('drag', onDrag).on('dragend', onDragEnd));
113122
function onDragStart () {
114123
ctrl.tooltip = undefined;
115124
d3.event.sourceEvent.stopPropagation();
116-
ctrl.draggedNode = findNode((d3.event.sourceEvent.offsetX - ctrl.transform.x) / ctrl.transform.k, (d3.event.sourceEvent.offsetY - ctrl.transform.y) / ctrl.transform.k);
125+
ctrl.draggedNode = findNode.apply(this, getRealCoordinates(d3.event.sourceEvent.offsetX, d3.event.sourceEvent.offsetY));
117126
}
118127
function onDrag () {
119-
var newX = (d3.event.sourceEvent.offsetX - ctrl.transform.x) / ctrl.transform.k;
120-
var newY = (d3.event.sourceEvent.offsetY - ctrl.transform.y) / ctrl.transform.k;
128+
var newCoordinates = getRealCoordinates(d3.event.sourceEvent.offsetX, d3.event.sourceEvent.offsetY);
121129
if (ctrl.draggedNode) {
122130
d3.event.sourceEvent.stopPropagation();
123-
ctrl.draggedNode.px = newX;
124-
ctrl.draggedNode.py = newY;
131+
ctrl.draggedNode.px = newCoordinates[0];
132+
ctrl.draggedNode.py = newCoordinates[1];
125133
ctrl.draggedNode.fixed = true;
126-
ctrl.force.nodes()[ctrl.draggedNode.index] = ctrl.draggedNode;
127134
ctrl.force.start();
128135
}
129136
}
130137
function onDragEnd () {
131138
d3.event.sourceEvent.stopPropagation();
132-
if (ctrl.draggedNode) {
133-
ctrl.force.nodes()[ctrl.draggedNode.index] = ctrl.draggedNode;
134-
ctrl.draggedNode = undefined;
135-
}
139+
ctrl.draggedNode = undefined;
136140
}
137141
}
138142

139143
function setUpSemanticZoom () {
140144
var canvas = d3.select(ctrl.canvas)
141145
.call(ctrl.zoom.on("zoom", semanticZoom));
142146
function semanticZoom () {
143-
var newTransform;
144147
var translateX;
145148
var translateY;
146149
if (ctrl.draggedNode) {
@@ -154,12 +157,11 @@ angular.module('patternfly.charts').component('pfTopologyMap', {
154157
translateY = Math.min(0, Math.max(ctrl.zoom.translate()[1], ctrl.canvasH - ctrl.canvasH * ctrl.zoom.scale()));
155158
}
156159
ctrl.zoom.translate([translateX, translateY]);
157-
newTransform = {
160+
ctrl.transform = {
158161
x: translateX,
159162
y: translateY,
160163
k: ctrl.zoom.scale(),
161164
};
162-
ctrl.transform = newTransform;
163165
draw();
164166
}
165167
}
@@ -192,8 +194,18 @@ angular.module('patternfly.charts').component('pfTopologyMap', {
192194
.chargeDistance(400)
193195
.gravity(0)
194196
.linkDistance(100)
195-
.linkStrength(0.4)
197+
.linkStrength(1)
196198
.size([ctrl.canvasW, ctrl.canvasH]);
199+
200+
ctrl.edges.forEach(function (edge) {
201+
edge.source = _.findIndex(ctrl.nodes, function (node) {
202+
return node.id === edge.source;
203+
});
204+
edge.target = _.findIndex(ctrl.nodes, function (node) {
205+
return node.id === edge.target;
206+
});
207+
});
208+
197209
ctrl.force.nodes(ctrl.nodes)
198210
.links(ctrl.edges)
199211
.on('tick', tick)
@@ -205,14 +217,14 @@ angular.module('patternfly.charts').component('pfTopologyMap', {
205217
}
206218

207219
function drawEdges () {
208-
var cx, cy;
209220
var quadtree = d3.geom.quadtree(ctrl.force.nodes());
210221
ctrl.context.strokeStyle = 'rgba(150, 150, 150, 0.6)';
211222
ctrl.context.lineWidth = 1;
212223
ctrl.edges.forEach(function (d) {
213224
var sourceCoords;
214225
var targetCoords;
215-
quadtree.visit(collide(d));
226+
quadtree.visit(collide(d.source));
227+
quadtree.visit(collide(d.target));
216228
sourceCoords = transformApply(d.source.x, d.source.y);
217229
targetCoords = transformApply(d.target.x, d.target.y);
218230
ctrl.context.beginPath();
@@ -241,7 +253,7 @@ angular.module('patternfly.charts').component('pfTopologyMap', {
241253
coordinates = transformApply(node.x, node.y);
242254
ctrl.context.beginPath();
243255
ctrl.context.fillStyle = node.fill || "#FFFFFF";
244-
ctrl.context.strokeStyle = node.boderColor || '#000000';
256+
ctrl.context.strokeStyle = node.borderColor || '#000000';
245257
ctrl.context.lineWidth = 1;
246258
ctrl.context.arc(coordinates.x, coordinates.y, node.size, 0, 2 * Math.PI);
247259
ctrl.context.fill();
@@ -320,14 +332,12 @@ angular.module('patternfly.charts').component('pfTopologyMap', {
320332
ctrl.cachedIcons.unknown.char = window.getComputedStyle(tmp, ':before').content.replace(/'|"/g, '');
321333
ctrl.cachedIcons.unknown.font = window.getComputedStyle(tmp, ':before').fontFamily;
322334
ctrl.nodes.forEach(function (node) {
323-
if (node.iconType === 'fonticon') {
324-
if (!ctrl.cachedIcons[node.iconClass]) {
325-
ctrl.cachedIcons[node.iconClass] = {};
326-
tmp.className = 'hidden ' + node.iconClass;
327-
ctrl.cachedIcons[node.iconClass].char = window.getComputedStyle(tmp, ':before').content.replace(/'|"/g, '');
328-
ctrl.cachedIcons[node.iconClass].font = window.getComputedStyle(tmp, ':before').fontFamily;
329-
}
330-
} else if (node.iconType === 'fileicon') {
335+
if (node.iconType === 'fonticon' && !ctrl.cachedIcons[node.iconClass]) {
336+
ctrl.cachedIcons[node.iconClass] = {};
337+
tmp.className = 'hidden ' + node.iconClass;
338+
ctrl.cachedIcons[node.iconClass].char = window.getComputedStyle(tmp, ':before').content.replace(/'|"/g, '');
339+
ctrl.cachedIcons[node.iconClass].font = window.getComputedStyle(tmp, ':before').fontFamily;
340+
} else if (node.iconType === 'fileicon' && !ctrl.cachedIcons[node.path]) {
331341
ctrl.cachedIcons[node.path] = {};
332342
promises.push(new Promise(function (resolve, reject) {
333343
ctrl.cachedIcons[node.path].img = new Image();
@@ -338,10 +348,11 @@ angular.module('patternfly.charts').component('pfTopologyMap', {
338348
}));
339349
}
340350
});
351+
document.body.removeChild(tmp);
341352
}
342353

343354
function collide (node) {
344-
var r = node.size + 16,
355+
var r = node.size + 22,
345356
nx1 = node.x - r,
346357
nx2 = node.x + r,
347358
ny1 = node.y - r,

0 commit comments

Comments
 (0)