marker.js ➔ getTextWidth - Code Metrics - Inspection of "display marker names on map. fixes #73" - flopp/FloppsMap - Measure and Improve Code Quality continuously with Scrutinizer

Completed

Push — master ( dbdc9f...537232 )

by Florian

created 2017-10-22 16:03 UTC

marker.js ➔ getTextWidth A

↳ Parent: js/marker.js

Complexity

Conditions	1
Paths	1

Size

Total Lines

Duplication

Lines	0
Ratio	0 %

Importance

Changes	1
Bugs	1	Features	0

Metric	Value
cc	1
c	1
b	1
f	0
nc	1
nop	2
dl	0
loc	10
rs	9.4285

/*jslint
  indent: 4
*/

/*global
  $, google,
  Cookies, Coordinates, Lines,
  id2alpha
*/

function Marker(parent, id) {
    'use strict';

    this.m_parent = parent;
    this.m_id = id;
    this.m_alpha = id2alpha(id);
    this.m_free = true;
    this.m_name = "";
    this.m_iconLabel = "";
    this.m_marker = null;
    this.m_circle = null;
}


Marker.prototype.toString = function () {
    'use strict';

    return this.getAlpha() + ":" + this.getPosition().lat().toFixed(6) + ":" + this.getPosition().lng().toFixed(6) + ":" + this.getRadius() + ":" + this.getName();
};


Marker.prototype.toXmlWpt = function () {
    'use strict';

    var data = '';
    data += '<wpt lat="' + this.getPosition().lat().toFixed(8) + '" lon="' + this.getPosition().lng().toFixed(8) + '">\n';
    data += '    <name>' + this.getName() + '</name>\n';
    data += '    <sym>flag</sym>\n';
    if (this.getRadius() > 0) {
        data += '    <extensions>\n';
        data += '      <wptx1:WaypointExtension>\n';
        data += '        <wptx1:Proximity>' + this.getRadius() + '</wptx1:Proximity>\n';
        data += '      </wptx1:WaypointExtension>\n';
        data += '    </extensions>\n';
    }
    data += '</wpt>';

    return data;
};


Marker.prototype.isFree = function () {
    'use strict';

    return this.m_free;
};


Marker.prototype.clear = function () {
    'use strict';

    if (this.m_free) {
        return;
    }

    this.m_free = true;
    this.m_marker.setMap(null);
    this.m_marker = null;
    this.m_circle.setMap(null);
    this.m_circle = null;

    $('#dyn' + this.m_id).remove();

    Lines.updateLinesMarkerRemoved(this.m_id);
    this.m_parent.handleMarkerCleared();
};


Marker.prototype.getId = function () {
    'use strict';

    return this.m_id;
};


Marker.prototype.getAlpha = function () {
    'use strict';

    return this.m_alpha;
};


Marker.prototype.getName = function () {
    'use strict';

    return this.m_name;
};


Marker.prototype.setName = function (name) {
    'use strict';

    this.m_name = name;
    this.update();
};


Marker.prototype.setPosition = function (position) {
    'use strict';

    this.m_marker.setPosition(position);
    this.m_circle.setCenter(position);
    this.update();
};


Marker.prototype.getPosition = function () {
    'use strict';

    return this.m_marker.getPosition();
};


Marker.prototype.setRadius = function (radius) {
    'use strict';

    this.m_circle.setRadius(radius);
    this.update();
};


Marker.prototype.getRadius = function () {
    'use strict';

    return this.m_circle.getRadius();
};


Marker.prototype.setNamePositionRadius = function (name, position, radius) {
    'use strict';

    this.m_name = name;
    this.m_marker.setPosition(position);
    this.m_circle.setCenter(position);
    this.m_circle.setRadius(radius);
    this.update();
};


function getTextWidth(text, font) {
    'use strict';

    // re-use canvas object for better performance
    var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas")),
        context = canvas.getContext("2d");
    context.font = font;

    return context.measureText(text).width;
}


Marker.prototype.createSvgIcon = function () {
    'use strict';

    var w        = 24.0 + getTextWidth(this.m_name, "16px roboto"),
        w2       = 0.5 * w,
        color    = ["#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#FF00FF", "#00FFFF", "#FFFFFF"][this.m_id % 7],
        txtcolor = ["#FFFFFF", "#000000", "#FFFFFF", "#000000", "#000000", "#000000", "#000000"][this.m_id % 7],
        url      = 'data:image/svg+xml;utf-8, \
<svg \
   xmlns:svg="http://www.w3.org/2000/svg" \
   xmlns="http://www.w3.org/2000/svg" \
   width="' + w + '" height="37" \
   viewBox="0 0 ' + w + ' 37" \
   version="1.1"> \
   <defs> \
    <filter id="shadow" x="0" y="0" width="200%" height="200%"> \
      <feOffset result="offOut" in="SourceAlpha" dx="2" dy="2" /> \
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="4" /> \
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> \
    </filter> \
  </defs> \
    <path \
       fill="' + color + '" stroke="#000000" \
       d="M 4 4 L 4 26 L ' + (w2 - 4.0) + ' 26 L ' + (w2) + ' 33 L ' + (w2 + 4.0) + ' 26 L ' + (w - 4.0) + ' 26 L ' + (w - 4.0) + ' 4 L 4 4 z" \
       filter="url(#shadow)" /> \
    <text \
       style="text-anchor:middle;font-style:normal;font-weight:normal;font-size:16px;line-height:100%;font-family:Roboto;letter-spacing:0px;word-spacing:0px;fill:' + txtcolor + ';fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" \
       x="' + (w2) + '" y="21">' + this.m_name + '</text> \
</svg>';

    return {
        url: url, 
        size: new google.maps.Size(w, 37),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(w2, 37 - 1.0)};
};


Marker.prototype.initialize = function (map, name, position, radius) {
    'use strict';

    this.m_free = false;
    this.m_name = name;
    this.m_iconLabel = name;

    // marker.png is 26x10 icons (each: 33px x 37px)
    var self = this,
        iconw = 33,
        iconh = 37,
        offsetx = (this.m_id % 26) * iconw,

        offsety = Math.floor(this.m_id / 26) * iconh,

        color = "#0090ff",
        icon = this.createSvgIcon(this.m_name);

    this.m_marker = new google.maps.Marker({
        position: position,
        map: map,
        icon: icon,
        draggable: true
    });

    google.maps.event.addListener(this.m_marker, "drag", function () { self.update(); });
    google.maps.event.addListener(this.m_marker, "dragend", function () { self.update(); });

    this.m_circle = new google.maps.Circle({
        center: position,
        map: map,
        strokeColor: color,
        strokeOpacity: 1,
        fillColor: color,
        fillOpacity: 0.25,
        strokeWeight: 1,
        radius: radius
    });
};


Marker.prototype.update = function () {
    'use strict';

    if (this.m_free) {
        return;
    }

    var pos = this.m_marker.getPosition(),
        radius = this.m_circle.getRadius();

    this.m_circle.setCenter(pos);

    Cookies.set('marker' + this.m_id, pos.lat().toFixed(6) + ":" + pos.lng().toFixed(6) + ":" + radius + ":" + this.m_name, {expires: 30});
    $('#dyn' + this.m_id + ' > .view .name').html(this.m_name);
    $('#dyn' + this.m_id + ' > .view .coords').html(Coordinates.toString(pos));
    $('#dyn' + this.m_id + ' > .view .radius').html(radius);
    $('#dyn' + this.m_id + ' > .edit .name').val(this.m_name);
    $('#dyn' + this.m_id + ' > .edit .coords').val(Coordinates.toString(pos));
    $('#dyn' + this.m_id + ' > .edit .radius').val(radius);

    if (this.m_iconLabel != this.m_name) {
        this.m_iconLabel = this.m_name;
        this.m_marker.setIcon(this.createSvgIcon());
    }
    Lines.updateLinesMarkerMoved(this.m_id);
};


1			/*jslint
2			indent: 4
3			*/
4
5			/*global
6			$, google,
7			Cookies, Coordinates, Lines,
8			id2alpha
9			*/
10
11			function Marker(parent, id) {
12			'use strict';
13
14			this.m_parent = parent;
15			this.m_id = id;
16			this.m_alpha = id2alpha(id);
17			this.m_free = true;
18			this.m_name = "";
19			this.m_iconLabel = "";
20			this.m_marker = null;
21			this.m_circle = null;
22			}
23
24
25			Marker.prototype.toString = function () {
26			'use strict';
27
28			return this.getAlpha() + ":" + this.getPosition().lat().toFixed(6) + ":" + this.getPosition().lng().toFixed(6) + ":" + this.getRadius() + ":" + this.getName();
29			};
30
31
32			Marker.prototype.toXmlWpt = function () {
33			'use strict';
34
35			var data = '';
36			data += '<wpt lat="' + this.getPosition().lat().toFixed(8) + '" lon="' + this.getPosition().lng().toFixed(8) + '">\n';
37			data += ' <name>' + this.getName() + '</name>\n';
38			data += ' <sym>flag</sym>\n';
39			if (this.getRadius() > 0) {
40			data += ' <extensions>\n';
41			data += ' <wptx1:WaypointExtension>\n';
42			data += ' <wptx1:Proximity>' + this.getRadius() + '</wptx1:Proximity>\n';
43			data += ' </wptx1:WaypointExtension>\n';
44			data += ' </extensions>\n';
45			}
46			data += '</wpt>';
47
48			return data;
49			};
50
51
52			Marker.prototype.isFree = function () {
53			'use strict';
54
55			return this.m_free;
56			};
57
58
59			Marker.prototype.clear = function () {
60			'use strict';
61
62			if (this.m_free) {
63			return;
64			}
65
66			this.m_free = true;
67			this.m_marker.setMap(null);
68			this.m_marker = null;
69			this.m_circle.setMap(null);
70			this.m_circle = null;
71
72			$('#dyn' + this.m_id).remove();
73
74			Lines.updateLinesMarkerRemoved(this.m_id);
75			this.m_parent.handleMarkerCleared();
76			};
77
78
79			Marker.prototype.getId = function () {
80			'use strict';
81
82			return this.m_id;
83			};
84
85
86			Marker.prototype.getAlpha = function () {
87			'use strict';
88
89			return this.m_alpha;
90			};
91
92
93			Marker.prototype.getName = function () {
94			'use strict';
95
96			return this.m_name;
97			};
98
99
100			Marker.prototype.setName = function (name) {
101			'use strict';
102
103			this.m_name = name;
104			this.update();
105			};
106
107
108			Marker.prototype.setPosition = function (position) {
109			'use strict';
110
111			this.m_marker.setPosition(position);
112			this.m_circle.setCenter(position);
113			this.update();
114			};
115
116
117			Marker.prototype.getPosition = function () {
118			'use strict';
119
120			return this.m_marker.getPosition();
121			};
122
123
124			Marker.prototype.setRadius = function (radius) {
125			'use strict';
126
127			this.m_circle.setRadius(radius);
128			this.update();
129			};
130
131
132			Marker.prototype.getRadius = function () {
133			'use strict';
134
135			return this.m_circle.getRadius();
136			};
137
138
139			Marker.prototype.setNamePositionRadius = function (name, position, radius) {
140			'use strict';
141
142			this.m_name = name;
143			this.m_marker.setPosition(position);
144			this.m_circle.setCenter(position);
145			this.m_circle.setRadius(radius);
146			this.update();
147			};
148
149
150			function getTextWidth(text, font) {
151			'use strict';
152
153			// re-use canvas object for better performance
154			var canvas = getTextWidth.canvas \|\| (getTextWidth.canvas = document.createElement("canvas")),
155			context = canvas.getContext("2d");
156			context.font = font;
157
158			return context.measureText(text).width;
159			}
160
161
162			Marker.prototype.createSvgIcon = function () {
163			'use strict';
164
165			var w = 24.0 + getTextWidth(this.m_name, "16px roboto"),
166			w2 = 0.5 * w,
167			color = ["#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#FF00FF", "#00FFFF", "#FFFFFF"][this.m_id % 7],
168			txtcolor = ["#FFFFFF", "#000000", "#FFFFFF", "#000000", "#000000", "#000000", "#000000"][this.m_id % 7],
169			url = 'data:image/svg+xml;utf-8, \
170			<svg \
171			xmlns:svg="http://www.w3.org/2000/svg" \
172			xmlns="http://www.w3.org/2000/svg" \
173			width="' + w + '" height="37" \
174			viewBox="0 0 ' + w + ' 37" \
175			version="1.1"> \
176			<defs> \
177			<filter id="shadow" x="0" y="0" width="200%" height="200%"> \
178			<feOffset result="offOut" in="SourceAlpha" dx="2" dy="2" /> \
179			<feGaussianBlur result="blurOut" in="offOut" stdDeviation="4" /> \
180			<feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> \
181			</filter> \
182			</defs> \
183			<path \
184			fill="' + color + '" stroke="#000000" \
185			d="M 4 4 L 4 26 L ' + (w2 - 4.0) + ' 26 L ' + (w2) + ' 33 L ' + (w2 + 4.0) + ' 26 L ' + (w - 4.0) + ' 26 L ' + (w - 4.0) + ' 4 L 4 4 z" \
186			filter="url(#shadow)" /> \
187			<text \
188			style="text-anchor:middle;font-style:normal;font-weight:normal;font-size:16px;line-height:100%;font-family:Roboto;letter-spacing:0px;word-spacing:0px;fill:' + txtcolor + ';fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" \
189			x="' + (w2) + '" y="21">' + this.m_name + '</text> \
190			</svg>';
191
192			return {
193			url: url,
194			size: new google.maps.Size(w, 37),
195			origin: new google.maps.Point(0, 0),
196			anchor: new google.maps.Point(w2, 37 - 1.0)};
197			};
198
199
200			Marker.prototype.initialize = function (map, name, position, radius) {
201			'use strict';
202
203			this.m_free = false;
204			this.m_name = name;
205			this.m_iconLabel = name;
206
207			// marker.png is 26x10 icons (each: 33px x 37px)
208			var self = this,
209			iconw = 33,
210			iconh = 37,
211			offsetx = (this.m_id % 26) * iconw,
			0 ignored issues – show Unused Code introduced 2017-10-22 16:04 UTC by Report Bug Copy Issue Report The variable `offsetx` seems to be never used. Consider removing it. Loading history...
212			offsety = Math.floor(this.m_id / 26) * iconh,
			0 ignored issues – show Unused Code introduced 2017-10-22 16:04 UTC by Report Bug Copy Issue Report The variable `offsety` seems to be never used. Consider removing it. Loading history...
213			color = "#0090ff",
214			icon = this.createSvgIcon(this.m_name);
215
216			this.m_marker = new google.maps.Marker({
217			position: position,
218			map: map,
219			icon: icon,
220			draggable: true
221			});
222
223			google.maps.event.addListener(this.m_marker, "drag", function () { self.update(); });
224			google.maps.event.addListener(this.m_marker, "dragend", function () { self.update(); });
225
226			this.m_circle = new google.maps.Circle({
227			center: position,
228			map: map,
229			strokeColor: color,
230			strokeOpacity: 1,
231			fillColor: color,
232			fillOpacity: 0.25,
233			strokeWeight: 1,
234			radius: radius
235			});
236			};
237
238
239			Marker.prototype.update = function () {
240			'use strict';
241
242			if (this.m_free) {
243			return;
244			}
245
246			var pos = this.m_marker.getPosition(),
247			radius = this.m_circle.getRadius();
248
249			this.m_circle.setCenter(pos);
250
251			Cookies.set('marker' + this.m_id, pos.lat().toFixed(6) + ":" + pos.lng().toFixed(6) + ":" + radius + ":" + this.m_name, {expires: 30});
252			$('#dyn' + this.m_id + ' > .view .name').html(this.m_name);
253			$('#dyn' + this.m_id + ' > .view .coords').html(Coordinates.toString(pos));
254			$('#dyn' + this.m_id + ' > .view .radius').html(radius);
255			$('#dyn' + this.m_id + ' > .edit .name').val(this.m_name);
256			$('#dyn' + this.m_id + ' > .edit .coords').val(Coordinates.toString(pos));
257			$('#dyn' + this.m_id + ' > .edit .radius').val(radius);
258
259			if (this.m_iconLabel != this.m_name) {
260			this.m_iconLabel = this.m_name;
261			this.m_marker.setIcon(this.createSvgIcon());
262			}
263			Lines.updateLinesMarkerMoved(this.m_id);
264			};
265

flopp / FloppsMap

GitHub Access Token became invalid

Push — master ( dbdc9f...537232 )

marker.js ➔ getTextWidth A

Complexity

Size

Duplication

Importance

Duplication Side-by-Side

Filter issues like