TableAjaxMap: add select feature

SE/se-lib/Data_Source.php

@@ -321,6 +321,33 @@ if(V::get('DBG_DS', 0, $_GET) > 0){echo'<pre style="max-height:200px;overflow:au
 		return false;
 	}
 
+	private function _sqlValueForGeomField($fldName, $fltrValue, $tblPrefix = 't') {
+		$sqlFilter = false;
+		// example: BBOX:54.40993961633866,18.583889010112824,54.337945760687454,18.397121431987586
+		if ('BBOX:' == substr($fltrValue, 0, 5)) {
+			$val = substr($fltrValue, 5);
+			$valParts = explode(',', $val);
+			if (count($valParts) == 4) {
+				$isAllNumeric = true;
+				foreach ($valParts as $v) {
+					if (!is_numeric($v)) $isAllNumeric = false;
+				}
+				if ($isAllNumeric) {
+					$bounds = "POLYGON((
+						{$valParts[3]} {$valParts[2]},
+						{$valParts[3]} {$valParts[0]},
+						{$valParts[1]} {$valParts[0]},
+						{$valParts[1]} {$valParts[2]},
+						{$valParts[3]} {$valParts[2]}
+					))";
+					// for mysql 5.6 use ST_Contains() @see http://dev.mysql.com/doc/refman/5.6/en/spatial-relation-functions.html
+					$sqlFilter = "Intersects(GeomFromText('{$bounds}'), GeomFromText(AsWKT({$tblPrefix}.`{$fldName}`)))=1";
+				}
+			}
+		}
+		return $sqlFilter;
+	}
+
 	function _parse_sql_where($params = array()) {
 		$sql_where = '';
 		// ... parse filters
@@ -330,6 +357,12 @@ if(V::get('DBG_DS', 0, $_GET) > 0){echo'<pre style="max-height:200px;overflow:au
 				//$v = trim($v, '% ');
 				//$sql_where_and []= "t.`" . substr($k, 2) . "` like '%" . DB::_($v) . "%'";
 				$fldName = substr($k, 2);
+				if ($this->isGeomField($fldName)) {
+					$sqlFilter = $this->_sqlValueForGeomField($fldName, $v, 't');
+					if ($sqlFilter) $sql_where_and[] = $sqlFilter;
+					continue;
+				}
+
 				if (substr($v, 0, 1) == '=') {
 					$v = $this->_db->_(substr($v, 1));
 					if (strlen($v)) $sql_where_and []= "t.`{$fldName}`='{$v}'";

SE/se-lib/TableAjax.php

@@ -734,9 +734,14 @@ class TableAjax extends ViewAjax {
 										elem.on('keyup', {column: column}, priv.filterChanged);
 										break;
 								case "special":
-								case "geom":
 										elem = $('<div>&nbsp;</div>');
 										break;
+								case "geom":
+										if (placeHolder == undefined) placeHolder = priv.options.types.string.placeHolder;
+										placeHolder = (placeHolder === true || placeHolder == undefined) ? '%' : placeHolder === false ? '' : placeHolder;
+										elem = $('<input placeholder="{0}" class="filter" type="text" size="8" />'.f(placeHolder));
+										elem.on('keyup', {column: column}, priv.filterChanged);
+										break;
 								case "none":
 										elem = $('<div>&nbsp;</div>');
 										break;
@@ -1559,6 +1564,20 @@ class TableAjax extends ViewAjax {
 						}
 					});
 
+				},
+				onSelectBox: function(bounds) {
+					if (undefined !== OpenLayers.Bounds && bounds instanceof OpenLayers.Bounds) {
+						var column = 'the_geom';
+						if (undefined !== _filterFields['the_geom']) {
+							var filter = 'BBOX:' + bounds.top + ',' + bounds.right + ',' + bounds.bottom + ',' + bounds.left;
+							_filterFields[column].val(filter);
+							_filterCols[column] = {
+								filter: filter,
+								col: _data.cols[column]
+							};
+							priv.filter();
+						}
+					}
 				}
 			});
 

SE/se-lib/TableAjaxMap.php

@@ -33,6 +33,8 @@ class TableAjaxMap {
 .TableAjaxMap { width:100%; height:<?php echo $this->_height; ?>px; }
 .olControlEditingToolbar .olControlModifyFeatureItemInactive { background-image:url(stuff/open-layers/theme/default/img/draw_point_off.png); }
 .olControlEditingToolbar .olControlModifyFeatureItemActive   { background-image:url(stuff/open-layers/theme/default/img/draw_point_on.png); }
+.olControlEditingToolbar .olControlSelectFeatureItemInactive { background-image:url(stuff/open-layers/theme/default/img/move_feature_off.png); }
+.olControlEditingToolbar .olControlSelectFeatureItemActive   { background-image:url(stuff/open-layers/theme/default/img/move_feature_on.png); }
 .olControlEditingToolbar .olControlRefreshItemInactive { background-image: url(stuff/open-layers/theme/default/img/refresh_feature_off.png); }
 .olControlEditingToolbar .olControlRefreshItemActive { background-image: url(stuff/open-layers/theme/default/img/refresh_feature_on.png); }
 .olControlEditingToolbar .olControlSaveItemInactive { background-image: url(stuff/open-layers/theme/default/img/save_features_off.png); }
@@ -228,18 +230,80 @@ OpenLayers.ProxyHost = "index-ajax.php?_zasobID=<?php echo $this->_zasobID; ?>&_
 					, mode: OpenLayers.Control.ModifyFeature.DRAG | OpenLayers.Control.ModifyFeature.RESHAPE
 				})
 			]);
-			toolbar.addControls([
-				new OpenLayers.Control.SelectFeature(_layer, {
-					title: "Select Test",
-					clickout: false,
-					toggle: false,
-					multiple: false,
-					hover: false,
-					toggleKey: "ctrlKey", // ctrl key removes from selection
-					multipleKey: "shiftKey", // shift key adds to selection
-					box: true
-				})
-			]);
+			var btnSelectFeature = new OpenLayers.Control.SelectFeature(_layer, {
+				title: "Select Test",
+				clickout: false,
+				toggle: false,
+				multiple: false,
+				hover: false,
+				toggleKey: "ctrlKey", // ctrl key removes from selection
+				multipleKey: "shiftKey", // shift key adds to selection
+				box: true
+				/* copy from OpenLayers source lib/OpenLayers/Control/SelectFeature.js
+				 * add bounds to trigger "boxselectionend" event
+				 */
+				, selectBox: function(position) {
+					if (position instanceof OpenLayers.Bounds) {
+						var minXY = this.map.getLonLatFromPixel({
+							x: position.left,
+							y: position.bottom
+						});
+						var maxXY = this.map.getLonLatFromPixel({
+							x: position.right,
+							y: position.top
+						});
+						var bounds = new OpenLayers.Bounds(
+							minXY.lon, minXY.lat, maxXY.lon, maxXY.lat
+						);
+
+						// if multiple is false, first deselect currently selected features
+						if (!this.multipleSelect()) {
+							this.unselectAll();
+						}
+
+						// because we're using a box, we consider we want multiple selection
+						var prevMultiple = this.multiple;
+						this.multiple = true;
+						var layers = this.layers || [this.layer];
+						this.events.triggerEvent("boxselectionstart", {layers: layers}); 
+						var layer;
+						for(var l=0; l<layers.length; ++l) {
+							layer = layers[l];
+							for(var i=0, len = layer.features.length; i<len; ++i) {
+								var feature = layer.features[i];
+								// check if the feature is displayed
+								if (!feature.getVisibility()) {
+									continue;
+								}
+
+								if (this.geometryTypes == null || OpenLayers.Util.indexOf(
+											this.geometryTypes, feature.geometry.CLASS_NAME) > -1) {
+									if (bounds.toGeometry().intersects(feature.geometry)) {
+										if (OpenLayers.Util.indexOf(layer.selectedFeatures, feature) == -1) {
+												this.select(feature);
+										}
+									}
+								}
+							}
+						}
+						this.multiple = prevMultiple;
+						this.events.triggerEvent("boxselectionend", {layers: layers, bounds: bounds}); 
+					}
+				}
+			});
+			btnSelectFeature.events.on({
+				"boxselectionend": function(e) {
+					console.log('SelectFeature boxselectionend event', e, e.bounds);
+					if (typeof priv.options.onSelectBox == "function") {
+						var layerProj = _map.getProjectionObject();
+						var targetProj = new OpenLayers.Projection("EPSG:4326");
+						var bounds = e.bounds.transform(layerProj, targetProj);
+						console.log('SelectFeature boxselectionend event bounds', bounds);
+						priv.options.onSelectBox.call(this, bounds);
+					}
+				}
+			});
+			toolbar.addControls([btnSelectFeature]);
 			toolbar.addControls([
 				new OpenLayers.Control.Button({
 					title: "Refresh",
@@ -875,6 +939,9 @@ class TableAjaxMapWfsAction {
 				}
 				break;
 			default:
+				?>
+				<!-- UNKNOWN WKT:<?php echo $wkt; ?> -->
+				<?php
 		}
 		$gml = ob_get_contents();
 		ob_clean();