[Mapbender-commits] r7195 - in trunk/mapbender/http: plugins widgets

svn_mapbender at osgeo.org svn_mapbender at osgeo.org
Fri Dec 10 10:56:02 EST 2010


Author: christoph
Date: 2010-12-10 07:56:02 -0800 (Fri, 10 Dec 2010)
New Revision: 7195

Added:
   trunk/mapbender/http/plugins/mb_measure_widget.php
Removed:
   trunk/mapbender/http/plugins/mb_measure_widget.js
Modified:
   trunk/mapbender/http/widgets/w_measure.js
Log:
i18n
display correct data (area and perimeter only if measure is no line)

Deleted: trunk/mapbender/http/plugins/mb_measure_widget.js
===================================================================
--- trunk/mapbender/http/plugins/mb_measure_widget.js	2010-12-09 15:37:34 UTC (rev 7194)
+++ trunk/mapbender/http/plugins/mb_measure_widget.js	2010-12-10 15:56:02 UTC (rev 7195)
@@ -1,215 +0,0 @@
-/**
- * Package: measure_widget
- *
- * Description:
- * Measure module with jQuery UI widget factory and RaphaelJS
- *
- * Files:
- *  - http/plugins/mb_measure_widget.js
- *  - http/widgets/w_measure.js
- *
- * SQL:
- * > INSERT INTO gui_element(fkey_gui_id, e_id, e_pos, e_public, e_comment,
- * > e_title, e_element, e_src, e_attributes, e_left, e_top, e_width, e_height,
- * > e_z_index, e_more_styles, e_content, e_closetag, e_js_file, e_mb_mod,
- * > e_target, e_requires, e_url) VALUES('<appId>','measure_widget',2,1,
- * > 'Measure','Measure distance','img',
- * > '../img/button_blink_red/measure_off.png','',515,60,24,24,1,'','','',
- * > '../plugins/mb_measure_widget.js',
- * > '../widgets/w_measure.js,../extensions/RaphaelJS/raphael-1.4.7.min.js',
- * > 'mapframe1','jq_ui_dialog,jq_ui_widget',
- * > 'http://www.mapbender.org/index.php/Measure');
- *
- * Help:
- * http://www.mapbender.org/Measure_widget
- *
- * Maintainer:
- * http://www.mapbender.org/User:Christoph_Baudson
- *
- * License:
- * Copyright (c) 2009, Open Source Geospatial Foundation
- * This program is dual licensed under the GNU General Public License
- * and Simplified BSD license.
- * http://svn.osgeo.org/mapbender/trunk/mapbender/license/license.txt
- */
-
-var $measure = $(this);
-
-var MeasureApi = function (o) {
-
-	var measureDialog,
-		button,
-		that = this,
-		title = "Messung",
-		defaultHtml = "<div title='" + title + "'>" +
-			"<div class='mb-measure-text'>Fahren Sie mit der Maus &uuml;ber die Karte, um die Koordinaten anzuzeigen.<br> Klicken Sie, um eine Messung zu starten</div>" +
-		"</div>",
-		informationHtml =
-			"<div>Letzter Punkt: <span class='mb-measure-clicked-point' /></div>" +
-			"<div>Aktuelle Koordinaten: <span class='mb-measure-current-point' /></div>" +
-			"<div>Distanz (zum letzten Punkt): <span class='mb-measure-distance-last' />  <span class='mb-measure-distance-last-unit' /></div>" +
-			"<div>Distanz (gesamt): <span class='mb-measure-distance-total' /> <span class='mb-measure-distance-total-unit' /></div>" +
-			"<div>Umring (gesamt): <span class='mb-measure-perimeter' /> <span class='mb-measure-perimeter-unit' /></div>" +
-			"<div>Fläche: <span class='mb-measure-area' /> <span class='mb-measure-area-unit' /></div>" +
-			"<a class='mb-measure-clear' href='#' title='Messung löschen'/>";
-
-	var hideMeasureData = function () {
-		measureDialog.find(".mb-measure-clicked-point").parent().hide();
-		measureDialog.find(".mb-measure-current-point").parent().hide();
-		measureDialog.find(".mb-measure-distance-last").parent().hide();
-		measureDialog.find(".mb-measure-distance-total").parent().hide();
-		measureDialog.find(".mb-measure-perimeter").parent().hide();
-		measureDialog.find(".mb-measure-area").parent().hide();
-	};
-
-	var changeDialogContent = function () {
-		measureDialog.html(informationHtml);
-		hideMeasureData();
-		o.$target.unbind("click", changeDialogContent);
-	};
-
-	var create = function () {
-		//
-		// Initialise measure dialog
-		//
-		measureDialog = $(defaultHtml);
-		measureDialog.dialog({
-			autoOpen: false,
-			position: [o.$target.offset().left, o.$target.offset().top]
-		}).bind("dialogclose", function () {
-			button.stop();
-			that.destroy();
-		});
-
-		//
-		// Initialise button
-		//
-		button = new Mapbender.Button({
-			domElement: $measure.get(0),
-			over: o.src.replace(/_off/, "_over"),
-			on: o.src.replace(/_off/, "_on"),
-			off: o.src,
-			name: o.id,
-			go: that.activate,
-			stop: that.deactivate
-		});
-	};
-
-	var updateCurrentPoint = function (evt, data) {
-		if (data.pos) {
-			var p = data.pos;
-			measureDialog.find(".mb-measure-current-point").text(
-				p.pos.x + " " + p.pos.y
-			).parent().show();
-		}
-	};
-
-	var updateClickedPoint = function (evt, data) {
-		if (data.pos) {
-			var p = data.pos;
-			measureDialog.find(".mb-measure-clicked-point").text(
-				p.pos.x + " " + p.pos.y
-			).parent().show();
-		}
-	};
-
-	var updateCurrentDistance = function (evt, data) {
-		if (data.currentDistance) {
-			var lastDistanceUnit = "m";
-			var displayDistance = data.currentDistance;
-			if (displayDistance > 10000){
-				displayDistance /= 1000;
-				lastDistanceUnit = "km";
-			}
-			measureDialog.find(".mb-measure-distance-last-unit").html(lastDistanceUnit);
-			measureDialog.find(".mb-measure-distance-last").text(Math.round(displayDistance*10)/10).parent().show();
-		}
-	};
-
-	var updateTotalDistance = function (evt, data) {
-		if (data.totalDistance) {
-			var totalDistanceUnit = "m";
-			var displayTotalDistance = data.totalDistance;
-			if (displayTotalDistance > 10000){
-				displayTotalDistance = displayTotalDistance / 1000;
-				totalDistanceUnit = "km";
-			}
-			measureDialog.find(".mb-measure-distance-total-unit").html(totalDistanceUnit);
-			measureDialog.find(".mb-measure-distance-total").text(Math.round(displayTotalDistance*10)/10).parent().show();
-
-		}
-	};
-
-	var updatePerimeter = function (evt, data) {
-		if (data.perimeter) {
-			var unit = "m";
-			var displayPerimeter = data.perimeter;
-			if (displayPerimeter > 10000){
-				displayPerimeter = displayPerimeter / 1000;
-				totalDistanceUnit = "km";
-			}
-			measureDialog.find(".mb-measure-perimeter-unit").html(unit);
-			measureDialog.find(".mb-measure-perimeter").text(Math.round(displayPerimeter*10)/10).parent().show();
-
-		}
-	};
-
-	var updateArea = function (evt, data) {
-		if (data.area) {
-			var areaUnit = "m&sup2;";
-			var area = data.area;
-			if (area > 10000000){
-				area /= 1000000;
-				areaUnit = "km&sup2;";
-			}
-			else if (area > 100000){
-				area /= 10000;
-				areaUnit = "ha";
-			}
-			area = Math.round(area*10)/10;
-
-			measureDialog.find(".mb-measure-area-unit").html(areaUnit);
-			measureDialog.find(".mb-measure-area").text(area).parent().show();
-		}
-	};
-
-	var updateView = function (evt, data) {
-		updateCurrentPoint(evt, data);
-		updateCurrentDistance(evt, data);
-		updateTotalDistance(evt, data);
-		updateArea(evt, data);
-		updatePerimeter(evt, data);
-	};
-
-	this.activate = function () {
-		if (o.$target.size() > 0) {
-			o.$target
-				.mb_measure()
-				.bind("mb_measureupdate", updateView)
-				.bind("mb_measurepointadded", updateClickedPoint)
-				.bind("click", changeDialogContent);
-		}
-		measureDialog.dialog("open");
-	};
-
-	this.destroy = function () {
-		if (o.$target.size() > 0) {
-			o.$target.mb_measure("destroy");
-		}
-		hideMeasureData();
-
-		if (measureDialog.dialog("isOpen")) {
-			measureDialog.dialog("close");
-		}
-	};
-	
-	this.deactivate = function () {
-		if (o.$target.size() > 0) {
-			o.$target.mb_measure("deactivate");
-		}
-	};
-
-	create();
-};
-
-$measure.mapbender(new MeasureApi(options));

Added: trunk/mapbender/http/plugins/mb_measure_widget.php
===================================================================
--- trunk/mapbender/http/plugins/mb_measure_widget.php	                        (rev 0)
+++ trunk/mapbender/http/plugins/mb_measure_widget.php	2010-12-10 15:56:02 UTC (rev 7195)
@@ -0,0 +1,259 @@
+/**
+ * Package: measure_widget
+ *
+ * Description:
+ * Measure module with jQuery UI widget factory and RaphaelJS
+ *
+ * Files:
+ *  - http/plugins/mb_measure_widget.js
+ *  - http/widgets/w_measure.js
+ *
+ * SQL:
+ * > INSERT INTO gui_element(fkey_gui_id, e_id, e_pos, e_public, e_comment,
+ * > e_title, e_element, e_src, e_attributes, e_left, e_top, e_width, e_height,
+ * > e_z_index, e_more_styles, e_content, e_closetag, e_js_file, e_mb_mod,
+ * > e_target, e_requires, e_url) VALUES('<appId>','measure_widget',2,1,
+ * > 'Measure','Measure distance','img',
+ * > '../img/button_blink_red/measure_off.png','',515,60,24,24,1,'','','',
+ * > '../plugins/mb_measure_widget.js',
+ * > '../widgets/w_measure.js,../extensions/RaphaelJS/raphael-1.4.7.min.js',
+ * > 'mapframe1','jq_ui_dialog,jq_ui_widget',
+ * > 'http://www.mapbender.org/index.php/Measure');
+ *
+ * Help:
+ * http://www.mapbender.org/Measure_widget
+ *
+ * Maintainer:
+ * http://www.mapbender.org/User:Christoph_Baudson
+ *
+ * License:
+ * Copyright (c) 2009, Open Source Geospatial Foundation
+ * This program is dual licensed under the GNU General Public License
+ * and Simplified BSD license.
+ * http://svn.osgeo.org/mapbender/trunk/mapbender/license/license.txt
+ */
+
+var $measure = $(this);
+
+var MeasureApi = function (o) {
+
+	var measureDialog,
+		button,
+		that = this,
+		inProgress = false,
+		title = o.title,
+		defaultHtml = "<div title='" + title + "'>" +
+			"<div class='mb-measure-text'><?php 
+				echo nl2br(htmlentities(_mb("Click in the map to start measuring."), ENT_QUOTES, "UTF-8"));
+			?></div></div>",
+		informationHtml =
+			"<div><?php
+				echo nl2br(htmlentities("Last point: ", ENT_QUOTES, "UTF-8"));
+			?><span class='mb-measure-clicked-point' /></div>" +
+			"<div><?php
+				echo nl2br(htmlentities("Current point: ", ENT_QUOTES, "UTF-8"));
+			?><span class='mb-measure-current-point' /></div>" +
+			"<div><?php
+				echo nl2br(htmlentities("Distance (to last point): ", ENT_QUOTES, "UTF-8"));
+			?><span class='mb-measure-distance-last' />  <span class='mb-measure-distance-last-unit' /></div>" +
+			"<div><?php
+				echo nl2br(htmlentities("Distance (total): ", ENT_QUOTES, "UTF-8"));
+			?><span class='mb-measure-distance-total' /> <span class='mb-measure-distance-total-unit' /></div>" +
+			"<div><?php
+				echo nl2br(htmlentities("Perimeter: ", ENT_QUOTES, "UTF-8"));
+			?><span class='mb-measure-perimeter' /> <span class='mb-measure-perimeter-unit' /></div>" +
+			"<div><?php
+				echo nl2br(htmlentities("Area: ", ENT_QUOTES, "UTF-8"));
+			?><span class='mb-measure-area' /> <span class='mb-measure-area-unit' /></div>";
+
+	var hideMeasureData = function () {
+		measureDialog.find(".mb-measure-clicked-point").parent().hide();
+		measureDialog.find(".mb-measure-current-point").parent().hide();
+		measureDialog.find(".mb-measure-distance-last").parent().hide();
+		measureDialog.find(".mb-measure-distance-total").parent().hide();
+		measureDialog.find(".mb-measure-perimeter").parent().hide();
+		measureDialog.find(".mb-measure-area").parent().hide();
+	};
+
+	var changeDialogContent = function () {
+		measureDialog.html(informationHtml);
+		hideMeasureData();
+		o.$target.unbind("click", changeDialogContent);
+	};
+
+	var create = function () {
+		//
+		// Initialise measure dialog
+		//
+		measureDialog = $(defaultHtml);
+		measureDialog.dialog({
+			autoOpen: false,
+			position: [o.$target.offset().left, o.$target.offset().top]
+		}).bind("dialogclose", function () {
+			button.stop();
+			that.destroy();
+		});
+
+		//
+		// Initialise button
+		//
+		button = new Mapbender.Button({
+			domElement: $measure.get(0),
+			over: o.src.replace(/_off/, "_over"),
+			on: o.src.replace(/_off/, "_on"),
+			off: o.src,
+			name: o.id,
+			go: that.activate,
+			stop: that.deactivate
+		});
+	};
+
+	var updateCurrentPoint = function (evt, data) {
+		if (data.pos) {
+			var p = data.pos;
+			measureDialog.find(".mb-measure-current-point").text(
+				p.pos.x + " " + p.pos.y
+			).parent().show();
+		}
+	};
+
+	var updateClickedPoint = function (evt, data) {
+		if (data.pos) {
+			var p = data.pos;
+			measureDialog.find(".mb-measure-clicked-point").text(
+				p.pos.x + " " + p.pos.y
+			).parent().show();
+		}
+	};
+
+	var updateCurrentDistance = function (evt, data) {
+		if (data.currentDistance) {
+			var lastDistanceUnit = "m";
+			var displayDistance = data.currentDistance;
+			if (displayDistance > 10000){
+				displayDistance /= 1000;
+				lastDistanceUnit = "km";
+			}
+			measureDialog.find(".mb-measure-distance-last-unit").html(lastDistanceUnit);
+			measureDialog.find(".mb-measure-distance-last").text(Math.round(displayDistance*10)/10).parent().show();
+		}
+	};
+
+	var updateTotalDistance = function (evt, data) {
+		if (data.totalDistance) {
+			var totalDistanceUnit = "m";
+			var displayTotalDistance = data.totalDistance;
+			if (displayTotalDistance > 10000){
+				displayTotalDistance = displayTotalDistance / 1000;
+				totalDistanceUnit = "km";
+			}
+			measureDialog.find(".mb-measure-distance-total-unit").html(totalDistanceUnit);
+			measureDialog.find(".mb-measure-distance-total").text(Math.round(displayTotalDistance*10)/10).parent().show();
+		}
+		else {
+			measureDialog.find(".mb-measure-distance-total").parent().hide();
+		}
+	};
+
+	var updatePerimeter = function (evt, data) {
+		if (data.perimeter) {
+			var unit = "m";
+			var displayPerimeter = data.perimeter;
+			if (displayPerimeter > 10000){
+				displayPerimeter = displayPerimeter / 1000;
+				unit = "km";
+			}
+			measureDialog.find(".mb-measure-perimeter-unit").html(unit);
+			measureDialog.find(".mb-measure-perimeter").text(Math.round(displayPerimeter*10)/10).parent().show();
+
+		}
+		else {
+			measureDialog.find(".mb-measure-perimeter").parent().hide();
+		}
+	};
+
+	var updateArea = function (evt, data) {
+		if (data.area) {
+			var areaUnit = "m&sup2;";
+			var area = data.area;
+			if (area > 10000000){
+				area /= 1000000;
+				areaUnit = "km&sup2;";
+			}
+			else if (area > 100000){
+				area /= 10000;
+				areaUnit = "ha";
+			}
+			area = Math.round(area*10)/10;
+
+			measureDialog.find(".mb-measure-area-unit").html(areaUnit);
+			measureDialog.find(".mb-measure-area").text(area).parent().show();
+		}
+		else {
+			measureDialog.find(".mb-measure-area").parent().hide();
+		}
+	};
+
+	var updateView = function (evt, data) {
+		updateCurrentPoint(evt, data);
+		updateCurrentDistance(evt, data);
+		updateTotalDistance(evt, data);
+		updateArea(evt, data);
+		updatePerimeter(evt, data);
+	};
+
+	var finishMeasure = function () {
+		inProgress = false;
+		that.deactivate();
+	};
+
+	var reinitializeMeasure = function () {
+		inProgress = false;
+		that.deactivate();
+		that.activate();
+	};
+
+	this.activate = function () {
+		if (o.$target.size() > 0) {
+			o.$target
+				.mb_measure(o)
+				.bind("mb_measureupdate", updateView)
+				.bind("mb_measurepointadded", updateClickedPoint)
+				.bind("mb_measurelastpointadded", finishMeasure)
+				.bind("mb_measurereinitialize", reinitializeMeasure)
+				.bind("click", changeDialogContent);
+		}
+		if (!inProgress) {
+			inProgress = true;
+			measureDialog.html(defaultHtml);
+		}
+
+		measureDialog.dialog("open");
+	};
+
+	this.destroy = function () {
+		if (o.$target.size() > 0) {
+			o.$target.mb_measure("destroy")
+				.unbind("mb_measureupdate", updateView)
+				.unbind("mb_measurepointadded", updateClickedPoint)
+				.unbind("mb_measurelastpointadded", finishMeasure)
+				.unbind("mb_measurereinitialize", reinitializeMeasure);
+		}
+		hideMeasureData();
+
+		if (measureDialog.dialog("isOpen")) {
+			measureDialog.dialog("close");
+		}
+		measureDialog.html(defaultHtml);
+	};
+	
+	this.deactivate = function () {
+		if (o.$target.size() > 0) {
+			o.$target.mb_measure("deactivate");
+		}
+	};
+
+	create();
+};
+
+$measure.mapbender(new MeasureApi(options));

Modified: trunk/mapbender/http/widgets/w_measure.js
===================================================================
--- trunk/mapbender/http/widgets/w_measure.js	2010-12-09 15:37:34 UTC (rev 7194)
+++ trunk/mapbender/http/widgets/w_measure.js	2010-12-10 15:56:02 UTC (rev 7195)
@@ -214,6 +214,11 @@
 				str_path += (k === 0) ? 'M' : 'L';
 				str_path += q.x + ' ' + q.y;
 
+				if (drawOptions.highlightFirst && k === len - 1) {
+					var p0 = this._measurePoints[0].mousePos;
+					str_path += 'L' + p0.x + ' ' + p0.y;
+					
+				}
 				if (drawOptions && drawOptions.highlightLast && k === len - 1) {
 					continue;
 				}
@@ -227,16 +232,14 @@
 						circle.attr({
 							fill: drawOptions && drawOptions.highlightFirst ?
 								this.options.pointFillSnapped : this.options.pointFillDefault,
-							stroke: "none",
-							opacity: this.options.opacity
+							stroke: "none"
 						});
 					}
 					else {
 						circle.attr({
 							fill: drawOptions && drawOptions.highlightLast && k === len - 2 ?
 								this.options.pointFillSnapped : this.options.pointFillDefault,
-							stroke: "none",
-							opacity: this.options.opacity
+							stroke: "none"
 						});
 					}
 				}
@@ -265,8 +268,7 @@
 			stroke: drawOptions && (drawOptions.highlightFirst || drawOptions.highlightLast) ?
 				this.options.lineStrokeSnapped : this.options.lineStrokeDefault,
 			"stroke-width": drawOptions && drawOptions.highlightLast ?
-				this.options.lineStrokeWidthSnapped : this.options.lineStrokeWidthDefault,
-			opacity: this.options.opacity
+				this.options.lineStrokeWidthSnapped : this.options.lineStrokeWidthDefault
 		});
 		line.toFront();
 	},
@@ -304,14 +306,20 @@
 		if (len > 0) {
 			measureData.currentDistance = this._currentDistance;
 			this._totalDistance = this._currentDistance;
-			measureData.totalDistance = this._totalDistance ;
+			if (!firstPointSnapped) {
+				measureData.totalDistance = this._totalDistance ;
+			}
 			if (len > 1) {
 				this._totalDistance = this._measurePoints[len - 1].totalDistance + this._currentDistance;
-				measureData.totalDistance = this._totalDistance ;
-				measureData.perimeter = measureData.totalDistance + this._calculateDistance(
-					this._measurePoints[0].pos,
-					measureData.pos.pos
-				);
+				if (!firstPointSnapped) {
+					measureData.totalDistance = this._totalDistance;
+				}
+				if (!lastPointSnapped) {
+					measureData.perimeter = measureData.totalDistance + this._calculateDistance(
+						this._measurePoints[0].pos,
+						measureData.pos.pos
+					);
+				}
 			}
 		}
 
@@ -320,7 +328,9 @@
 		//
 		if (this._isPolygon(this._measurePoints, measureData.pos) && !this._polygonIsInvalid) {
 			this._currentArea = this._calculateArea(measureData.pos);
-			measureData.area = this._currentArea;
+			if (!lastPointSnapped) {
+				measureData.area = this._currentArea;
+			}
 		}
 
 		this._trigger("update", null, measureData);
@@ -332,23 +342,14 @@
 		});
 	},
 	_reinitialize: function (e) {
-		this._canvas.clear();
-		this._measurePoints = [];
-		this._measurePoints.closedPolygon = false;
-		this._measurePoints.closedLine = false;
-
-		this._polygonIsInvalid = false;
-		this._currentPolygonIsInvalid = false;
-		this._totalDistance = 0;
-
 		this.element
 			.unbind("click", $.proxy(this, "_reinitialize"))
-			.bind("click", $.proxy(this, "_addPoint"))
-			.bind("mousemove", $.proxy(this, "_measure"))
-			.css("cursor", "crosshair");
+		this._trigger("reinitialize", e);
 		return false;
 	},
 	_addLastPoint: function (e) {
+		this._trigger("lastpointadded", e);
+
 		this.element.unbind("click", this._addPoint)
 			.unbind("mousemove", this._measure)
 			.css("cursor", "auto")
@@ -442,6 +443,7 @@
 	_init: function () {
 		if (this._measurePoints.closedLine || this._measurePoints.closedPolygon) {
 			this._measurePoints = [];
+			this._canvas.clear();
 		}
 		this.element
 			.bind("click", $.proxy(this, "_addPoint"))



More information about the Mapbender_commits mailing list