create_cluster_icon.js ➔ generateClusterCanvas - Code Metrics - Inspection of "Tag v 2.12.5 separates the logic to cache. Always..." - HuasoFoundries/ig_markerfactory - Measure and Improve Code Quality continuously with Scrutinizer

Completed

Push — master ( 6aec3d...eba851 )

by Felipe

created 2018-11-12 21:06 UTC

create_cluster_icon.js ➔ generateClusterCanvas B

↳ Parent: src/create_cluster_icon.js

Complexity

Conditions	4
Paths	6

Size

Total Lines	82
Code Lines	66

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
cc	4
eloc	66
nc	6
nop	1
dl	0
loc	82
rs	8.1127
c	0
b	0
f	0

How to fix Long Method

/** global: google */
import { IconObject } from "./icon_object.js";

const generateClusterCanvas = function(options) {
    let canvas = options.canvas || document.createElement("canvas"),
        anchorX = 27,
        anchorY = 53,
        radius = anchorX - 9,
        color1,
        font = options.font || "fontello",
        fontsize = options.fontsize || 14,
        context = canvas.getContext("2d");

    canvas.width = anchorX * 2;
    canvas.height = anchorY + 1;

    context.clearRect(0, 0, canvas.width, canvas.height);
    context.moveTo(anchorX, anchorY);

    let labelvalue = parseInt(options.label, 10);
    if (labelvalue < 10) {
        color1 = "orange";
        fontsize = 14;
    } else if (labelvalue < 30) {
        color1 = "red";
        fontsize = 15;
    } else {
        color1 = "purple";
        fontsize = 16;
    }
    if (labelvalue > 99) {
        radius = radius + 3;
        context.setLineDash([5, 5]);
        context.beginPath();
        context.arc(
            anchorX,
            2 + 0.5 * anchorY,
            radius + 7,
            0,
            2 * Math.PI,
            false
        );
        context.fillStyle = "transparent";
        context.strokeStyle = color1;
        context.lineWidth = 2;
        context.fill();
        context.stroke();
    }

    context.setLineDash([5, 5]);
    context.beginPath();
    context.arc(anchorX, 2 + 0.5 * anchorY, radius + 2, 0, 2 * Math.PI, false);
    context.fillStyle = "transparent";
    context.strokeStyle = color1;
    context.lineWidth = 2;
    context.fill();
    context.stroke();

    // Círculo blanco
    context.setLineDash([5, 0]);
    context.beginPath();
    context.arc(anchorX, 2 + 0.5 * anchorY, radius - 3, 0, 2 * Math.PI, false);
    context.fillStyle = "white";
    context.strokeStyle = color1;
    context.lineWidth = 4;
    context.fill();
    context.stroke();

    context.beginPath();

    context.font = "normal normal normal " + fontsize + "px " + font;
    console.log("context font", context.font);

    context.fillStyle = "#333";
    context.textBaseline = "top";

    let textWidth = context.measureText(options.label),
        text_x = options.label,
        label_x = Math.floor(canvas.width / 2 - textWidth.width / 2),
        label_y = 1 + Math.floor(canvas.height / 2 - fontsize / 2);

    // centre the text.
    context.fillText(text_x, label_x, label_y);

    return canvas;
};
function createClusterIcon(theoptions) {
    theoptions.scale = theoptions.scale || 1;
    let markerCanvas = generateClusterCanvas(theoptions),
        markerOpts = {},
        scale = theoptions.scale;

    Object.assign(markerOpts, theoptions);

    Object.assign(markerOpts, {
        origin: { x: 0, y: 0 },
        anchor: { x: 27 * scale, y: 24 * scale },
        size: { width: 54, height: 48 },
        scaledSize: { width: 54 * scale, height: 48 * scale }
    });

    let url = markerCanvas.toDataURL(),
        fillColor = markerCanvas.fillColor,
        iconObj = new IconObject(url, fillColor, markerOpts);

    return iconObj;
}

export { createClusterIcon };


1			/** global: google */
2			import { IconObject } from "./icon_object.js";
3
4			const generateClusterCanvas = function(options) {
5			let canvas = options.canvas \|\| document.createElement("canvas"),
6			anchorX = 27,
7			anchorY = 53,
8			radius = anchorX - 9,
9			color1,
10			font = options.font \|\| "fontello",
11			fontsize = options.fontsize \|\| 14,
12			context = canvas.getContext("2d");
13
14			canvas.width = anchorX * 2;
15			canvas.height = anchorY + 1;
16
17			context.clearRect(0, 0, canvas.width, canvas.height);
18			context.moveTo(anchorX, anchorY);
19
20			let labelvalue = parseInt(options.label, 10);
21			if (labelvalue < 10) {
22			color1 = "orange";
23			fontsize = 14;
24			} else if (labelvalue < 30) {
25			color1 = "red";
26			fontsize = 15;
27			} else {
28			color1 = "purple";
29			fontsize = 16;
30			}
31			if (labelvalue > 99) {
32			radius = radius + 3;
33			context.setLineDash([5, 5]);
34			context.beginPath();
35			context.arc(
36			anchorX,
37			2 + 0.5 * anchorY,
38			radius + 7,
39			0,
40			2 * Math.PI,
41			false
42			);
43			context.fillStyle = "transparent";
44			context.strokeStyle = color1;
45			context.lineWidth = 2;
46			context.fill();
47			context.stroke();
48			}
49
50			context.setLineDash([5, 5]);
51			context.beginPath();
52			context.arc(anchorX, 2 + 0.5 * anchorY, radius + 2, 0, 2 * Math.PI, false);
53			context.fillStyle = "transparent";
54			context.strokeStyle = color1;
55			context.lineWidth = 2;
56			context.fill();
57			context.stroke();
58
59			// Círculo blanco
60			context.setLineDash([5, 0]);
61			context.beginPath();
62			context.arc(anchorX, 2 + 0.5 * anchorY, radius - 3, 0, 2 * Math.PI, false);
63			context.fillStyle = "white";
64			context.strokeStyle = color1;
65			context.lineWidth = 4;
66			context.fill();
67			context.stroke();
68
69			context.beginPath();
70
71			context.font = "normal normal normal " + fontsize + "px " + font;
72			console.log("context font", context.font);
			0 ignored issues – show Debugging Code introduced 2016-07-06 15:59 UTC by Report Bug Copy Issue Report `console.log` looks like debug code. Are you sure you do not want to remove it? Loading history...
73			context.fillStyle = "#333";
74			context.textBaseline = "top";
75
76			let textWidth = context.measureText(options.label),
77			text_x = options.label,
78			label_x = Math.floor(canvas.width / 2 - textWidth.width / 2),
79			label_y = 1 + Math.floor(canvas.height / 2 - fontsize / 2);
80
81			// centre the text.
82			context.fillText(text_x, label_x, label_y);
83
84			return canvas;
85			};
86			function createClusterIcon(theoptions) {
87			theoptions.scale = theoptions.scale \|\| 1;
88			let markerCanvas = generateClusterCanvas(theoptions),
89			markerOpts = {},
90			scale = theoptions.scale;
91
92			Object.assign(markerOpts, theoptions);
93
94			Object.assign(markerOpts, {
95			origin: { x: 0, y: 0 },
96			anchor: { x: 27 * scale, y: 24 * scale },
97			size: { width: 54, height: 48 },
98			scaledSize: { width: 54 * scale, height: 48 * scale }
99			});
100
101			let url = markerCanvas.toDataURL(),
102			fillColor = markerCanvas.fillColor,
103			iconObj = new IconObject(url, fillColor, markerOpts);
104
105			return iconObj;
106			}
107
108			export { createClusterIcon };
109

HuasoFoundries / ig_markerfactory

Push — master ( 6aec3d...eba851 )

create_cluster_icon.js ➔ generateClusterCanvas B

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like