Changeset 7589

Timestamp:

07/29/08 14:20:19 (4 months ago)

Author:

tschaub

Message:

Adding a box property to the SelectFeature control for selecting all features within a box. p=pgiraud, r=me,crschmidt (closes #1071)

Files:

• trunk/openlayers/examples/select-feature.html (modified) (3 diffs)
• trunk/openlayers/lib/OpenLayers/Control/SelectFeature.js (modified) (8 diffs)
• trunk/openlayers/tests/Control/SelectFeature.html (modified) (3 diffs)
• trunk/openlayers/theme/default/style.css (modified) (1 diff)

trunk/openlayers/examples/select-feature.html

@@ -42 +42 @@
-                        multiple: false, hover: false,
-                        toggleKey: "ctrlKey", // ctrl key removes from selection
-
+
+
-                    }
-                )
@@ -70 +71 @@
-            var hover = document.getElementById("hover").checked;
-            drawControls.select.hover = hover;
-if(hover && drawControls.select.active) {
-    // turn on/off to clear feature property of handler
+drawControls.select.box = document.getElementById("box").checked;
+if(drawControls.select.active) {
-                drawControls.select.deactivate();
-                drawControls.select.activate();
@@ -112 +113 @@
-            <ul>
-                <li>
+                    <input id="box" type="checkbox" checked="checked"
+                           name="box" onchange="update()" />
+                    <label for="box">select features in a box</label>
+                </li>
+                <li>
-                    <input id="clickout" type="checkbox"
-                           name="clickout" onchange="update()" />

trunk/openlayers/lib/OpenLayers/Control/SelectFeature.js

@@ -61 +61 @@
-    
-    /**
+     * APIProperty: box
+     * {Boolean} Allow feature selection by drawing a box.
+     */
+    box: false,
+    
+    /**
-     * APIProperty: onSelect 
-     * {Function} Optional function to be called when a feature is selected.
@@ -89 +95 @@
-    /**
-     * APIProperty: callbacks
-
+s.feature
-     */
-    callbacks: null,
@@ -107 +113 @@
-
-    /**
-
-
-
-
+
+
+
+
+
-
-    /**
@@ -128 +135 @@
-                                                  out: this.outFeature
-                                                }, this.callbacks);
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-    },
-
@@ -189 +242 @@
-     */
-    multipleSelect: function() {
-
+s.feature
-    },
-    
@@ -201 +254 @@
-     */
-    toggleSelect: function() {
-
+s.feature
-    },
-
@@ -280 +333 @@
-        this.onUnselect(feature);
-    },
+    
+    /**
+     * Method: selectBox
+     * Callback from the handlers.box set up when <box> selection is true
+     *     on.
+     *
+     * Parameters:
+     * position - {<OpenLayers.Bounds> || <OpenLayers.Pixel> }  
+     */
+    selectBox: function(position) {
+        if (position instanceof OpenLayers.Bounds) {
+            var minXY = this.map.getLonLatFromPixel(
+                new OpenLayers.Pixel(position.left, position.bottom)
+            );
+            var maxXY = this.map.getLonLatFromPixel(
+                new OpenLayers.Pixel(position.right, 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;
+            for(var i=0, len = this.layer.features.length; i<len; ++i) {
+                var feature = this.layer.features[i];
+                if (this.geometryTypes == null || OpenLayers.Util.indexOf(
+                        this.geometryTypes, feature.geometry.CLASS_NAME) > -1) {
+                    if (bounds.toGeometry().intersects(feature.geometry)) {
+                        if (OpenLayers.Util.indexOf(this.layer.selectedFeatures, feature) == -1) {
+                            this.select(feature);
+                        }
+                    }
+                }
+            }
+            this.multiple = prevMultiple;
+        }
+    },
-
-    /** 
@@ -289 +385 @@
-     */
-    setMap: function(map) {
-
+
+
+
+
-        OpenLayers.Control.prototype.setMap.apply(this, arguments);
-    },

trunk/openlayers/tests/Control/SelectFeature.html

@@ -14 +14 @@
-        t.eq(control.layer, "bar",
-             "constructor sets layer correctly");        
-featureHandler
+handlers.feature
-//             "constructor sets options correctly on feature handler");
-    }
-    
-    function test_Control_SelectFeature_destroy(t) {
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
-        }
-// should nullify the layer property here
@@ -62 +66 @@
-        // mock up active control
-        var control = new OpenLayers.Control.SelectFeature(layer);
-
+s.feature
-            evt: {}
-        };
@@ -111 +115 @@
-    }
-    
+    function test_box(t) {
+        t.plan(5);
+        var map = new OpenLayers.Map("map");
+        var layer = new OpenLayers.Layer.Vector();
+        map.addLayer(layer);
+        var control = new OpenLayers.Control.SelectFeature(layer, {'multiple': true, box: true });
+        var feature = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(0,0));
+        var feature2 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(1,1));
+        var feature3 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(-2,-2));
+        var feature4 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString([
+            new OpenLayers.Geometry.Point(0, 0), new OpenLayers.Geometry.Point(1, 1)
+        ]));
+        layer.addFeatures([feature, feature2, feature3, feature4]);
+        control.setMap(map);
+        map.getLonLatFromPixel = function(arg) {
+            return new OpenLayers.LonLat(arg.x, arg.y);
+        }    
+        control.selectBox(new OpenLayers.Bounds(-1, -1, 2, 2));
+        t.eq(layer.selectedFeatures.length, 3, "box around all features selects 3 features");
+        
+        control.selectBox(new OpenLayers.Bounds(-3, -3, -1, -1));
+        t.eq(layer.selectedFeatures.length, 4, "box around other features doesn't turn off already selected features.");        
+        
+        control.multipleSelect = function() {
+            return false;
+        };
+        control.selectBox(new OpenLayers.Bounds(-3, -3, -1, -1));
+        t.eq(layer.selectedFeatures.length, 1, "box around other features correctly turns off already selected features.");
+        
+        control.geometryTypes = null;
+        control.selectBox(new OpenLayers.Bounds(-100, -100, 100, 100));
+        t.eq(layer.selectedFeatures.length, layer.features.length, "all features selected with no geometryTypes filter");
+        
+        control.geometryTypes = ["OpenLayers.Geometry.Point"];
+        control.selectBox(new OpenLayers.Bounds(-100, -100, 100, 100));
+        t.eq(layer.selectedFeatures.length, 3, "3 features selected with geometryTypes filter");
+        
+        ["OpenLayers.Geometry.Point"]
+        
+
+    }
+    
-    function test_Control_SelectFeature_activate(t) {
-2
-
-
-
-
+4
+
+
+
+, {box: true}
-        map.addControl(control);
-
+s.feature
-             "feature handler is not active prior to activating control");
+        t.ok(!control.handlers.box.active,
+             "box handler is not active prior to activating control");
-        control.activate();
-
+s.feature
-             "feature handler is active after activating control");
+        t.ok(control.handlers.box.active,
+             "box handler is active after activating control");
-    }
-
-    function test_Control_SelectFeature_deactivate(t) {
-1
-
-
-
-
+2
+
+
+
+, {box: true}
-        map.addControl(control);
-
+
-        control.activate();
-
+s.feature
-            t.ok(true,
-                 "control.deactivate calls deactivate on feature handler");
+        }
+        control.handlers.box.deactivate = function() {
+            t.ok(true,
+                 "control.deactivate calls deactivate on box handler");
-        }
-        control.deactivate();

trunk/openlayers/theme/default/style.css

@@ -231 +231 @@
-    font-size: 1px;
-    filter: alpha(opacity=50);
+}
+.olHandlerBoxSelectFeature {
+    border: 2px solid blue;
+    position: absolute;
+    background-color: white;
+    opacity: 0.50;
+    font-size: 1px;
+    filter: alpha(opacity=50);
-}   
-