draw.js ➔ define - Code Metrics - Inspection of "[TASK] rewrite forcegraph with d3 version 4" - ffrgb/meshviewer - Measure and Improve Code Quality continuously with Scrutinizer

Completed

Pull Request — develop (#75)

unknown

created 2017-03-08 09:20 UTC

draw.js ➔ define B

↳ Parent: Project

Complexity

Conditions	1
Paths	368

Size

Total Lines

114

Duplication

Lines	0
Ratio	0 %

Importance

Changes	2
Bugs	0	Features	0

Metric	Value
cc	1
c	2
b	0
f	0
nc	368
dl	0
loc	114
rs	7.1707
nop	1

9 Functions

Rating	Name	Size	Complexity
A	draw.js ➔ ... ➔ setTransform	3	1
A	draw.js ➔ ... ➔ setHighlight	3	1
B	draw.js ➔ ... ➔ drawNode	15	5
A	draw.js ➔ ... ➔ drawHighlightNode	8	4
A	draw.js ➔ ... ➔ drawDetailNode	16	4
A	draw.js ➔ ... ➔ setCTX	3	1
A	draw.js ➔ ... ➔ drawHighlightLink	11	4
A	draw.js ➔ ... ➔ setMaxArea	4	1
C	draw.js ➔ ... ➔ drawLink	22	12

How to fix Long Method

define(['helper'], function (helper) {
  var self = this;

  var ctx;
  var width;
  var height;

  var transform;

  var highlight;

  var nodeColor = '#fff';
  var clientColor = '#e6324b';

  var cableColor = '#50b0f0';
  var highlightColor = 'rgba(255, 255, 255, 0.2)';

  var labelColor = '#fff';

  var NODE_RADIUS = 15;
  var LINE_RADIUS = 12;

  function drawDetailNode(d) {
    if (transform.k > 1) {
      ctx.beginPath();
      helper.positionClients(ctx, d, Math.PI, d.o.node.statistics.clients, 15);
      ctx.fillStyle = clientColor;
      ctx.fill();
      ctx.beginPath();
      var name = d.o.node_id;
      if (d.o.node && d.o.node.nodeinfo) {
        name = d.o.node.nodeinfo.hostname;
      }
      ctx.textAlign = 'center';
      ctx.fillStyle = labelColor;
      ctx.fillText(name, d.x, d.y + 20);
    }
  }

  function drawHighlightNode(d) {
    if (highlight && highlight.type === 'node' && d.o.node === highlight.o) {
      ctx.arc(d.x, d.y, NODE_RADIUS * 1.5, 0, 2 * Math.PI);
      ctx.fillStyle = highlightColor;
      ctx.fill();
      ctx.beginPath();
    }
  }

  function drawHighlightLink(d, to) {
    if (highlight && highlight.type === 'link' && d.o === highlight.o) {
      ctx.lineTo(to[0], to[1]);
      ctx.strokeStyle = highlightColor;
      ctx.lineWidth = LINE_RADIUS * 2;
      ctx.lineCap = 'round';
      ctx.stroke();
      to = [d.source.x, d.source.y];
    }
    return to;
  }

  self.drawNode = function drawNode(d) {
    if (d.x < -width || d.y < -height || width < d.x || height < d.y) {
      return;
    }
    ctx.beginPath();

    drawHighlightNode(d);

    ctx.moveTo(d.x + 3, d.y);
    ctx.arc(d.x, d.y, 8, 0, 2 * Math.PI);
    ctx.fillStyle = nodeColor;
    ctx.fill();

    drawDetailNode(d);
  };

  self.drawLink = function drawLink(d) {
    if (d.source.x < -width && d.target.x < -width || d.source.y < -height && d.target.y < -height ||
        d.source.x > width && d.target.x > width || d.source.y > height && d.target.y > height) {
      return;
    }
    ctx.beginPath();
    ctx.moveTo(d.source.x, d.source.y);
    var to = [d.target.x, d.target.y];

    to = drawHighlightLink(d, to);

    ctx.lineTo(to[0], to[1]);
    ctx.strokeStyle = d.o.type === 'Kabel' ? cableColor : d.color;
    if (d.o.type === 'fastd' || d.o.type === 'L2TP') {
      ctx.globalAlpha = 0.2;
      ctx.lineWidth = 1.5;
    } else {
      ctx.globalAlpha = 0.8;
      ctx.lineWidth = 2.5;
    }
    ctx.stroke();
  };

  self.setCTX = function setCTX(newValue) {
    ctx = newValue;
  };
  self.setHighlight = function setHighlight(newValue) {
    highlight = newValue;
  };
  self.setTransform = function setTransform(newValue) {
    transform = newValue;
  };
  self.setMaxArea = function setMaxArea(newWidth, newHeight) {
    width = newWidth;
    height = newHeight;
  };
  return self;
});


1			define(['helper'], function (helper) {
2			var self = this;
3
4			var ctx;
5			var width;
6			var height;
7
8			var transform;
9
10			var highlight;
11
12			var nodeColor = '#fff';
13			var clientColor = '#e6324b';
14
15			var cableColor = '#50b0f0';
16			var highlightColor = 'rgba(255, 255, 255, 0.2)';
17
18			var labelColor = '#fff';
19
20			var NODE_RADIUS = 15;
21			var LINE_RADIUS = 12;
22
23			function drawDetailNode(d) {
24			if (transform.k > 1) {
25			ctx.beginPath();
26			helper.positionClients(ctx, d, Math.PI, d.o.node.statistics.clients, 15);
27			ctx.fillStyle = clientColor;
28			ctx.fill();
29			ctx.beginPath();
30			var name = d.o.node_id;
31			if (d.o.node && d.o.node.nodeinfo) {
32			name = d.o.node.nodeinfo.hostname;
33			}
34			ctx.textAlign = 'center';
35			ctx.fillStyle = labelColor;
36			ctx.fillText(name, d.x, d.y + 20);
37			}
38			}
39
40			function drawHighlightNode(d) {
41			if (highlight && highlight.type === 'node' && d.o.node === highlight.o) {
42			ctx.arc(d.x, d.y, NODE_RADIUS * 1.5, 0, 2 * Math.PI);
43			ctx.fillStyle = highlightColor;
44			ctx.fill();
45			ctx.beginPath();
46			}
47			}
48
49			function drawHighlightLink(d, to) {
50			if (highlight && highlight.type === 'link' && d.o === highlight.o) {
51			ctx.lineTo(to[0], to[1]);
52			ctx.strokeStyle = highlightColor;
53			ctx.lineWidth = LINE_RADIUS * 2;
54			ctx.lineCap = 'round';
55			ctx.stroke();
56			to = [d.source.x, d.source.y];
57			}
58			return to;
59			}
60
61			self.drawNode = function drawNode(d) {
62			if (d.x < -width \|\| d.y < -height \|\| width < d.x \|\| height < d.y) {
63			return;
64			}
65			ctx.beginPath();
66
67			drawHighlightNode(d);
68
69			ctx.moveTo(d.x + 3, d.y);
70			ctx.arc(d.x, d.y, 8, 0, 2 * Math.PI);
71			ctx.fillStyle = nodeColor;
72			ctx.fill();
73
74			drawDetailNode(d);
75			};
76
77			self.drawLink = function drawLink(d) {
78			if (d.source.x < -width && d.target.x < -width \|\| d.source.y < -height && d.target.y < -height \|\|
79			d.source.x > width && d.target.x > width \|\| d.source.y > height && d.target.y > height) {
80			return;
81			}
82			ctx.beginPath();
83			ctx.moveTo(d.source.x, d.source.y);
84			var to = [d.target.x, d.target.y];
85
86			to = drawHighlightLink(d, to);
87
88			ctx.lineTo(to[0], to[1]);
89			ctx.strokeStyle = d.o.type === 'Kabel' ? cableColor : d.color;
90			if (d.o.type === 'fastd' \|\| d.o.type === 'L2TP') {
91			ctx.globalAlpha = 0.2;
92			ctx.lineWidth = 1.5;
93			} else {
94			ctx.globalAlpha = 0.8;
95			ctx.lineWidth = 2.5;
96			}
97			ctx.stroke();
98			};
99
100			self.setCTX = function setCTX(newValue) {
101			ctx = newValue;
102			};
103			self.setHighlight = function setHighlight(newValue) {
104			highlight = newValue;
105			};
106			self.setTransform = function setTransform(newValue) {
107			transform = newValue;
108			};
109			self.setMaxArea = function setMaxArea(newWidth, newHeight) {
110			width = newWidth;
111			height = newHeight;
112			};
113			return self;
114			});
115

ffrgb / meshviewer

Pull Request — develop (#75)

draw.js ➔ define B

Complexity

Size

Duplication

Importance

9 Functions

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like