adding manual test for the feature handler

git-svn-id: http://svn.openlayers.org/trunk/openlayers@5533 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
2007-12-20 08:49:15 +00:00
parent 36e04a689f
commit 44543b3e36
1 changed files with 126 additions and 0 deletions
--- a/tests/manual/feature-handler.html
+++ b/tests/manual/feature-handler.html
@@ -0,0 +1,126 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>Feature Handler Acceptance Test</title>
+    <style type="text/css">
+    
+        body {
+            font-size: 0.8em;
+        }
+        p {
+            padding-top: 1em;
+        }
+        li {
+            list-style: none;
+        }
+        #output {
+            width: 300px;
+            height: 300px;
+        }
+        #west {
+            width: 425px;
+        }
+
+        #east {
+            position: absolute;
+            left: 450px;
+            top: 5px;
+        }
+        #map {
+            width: 400px;
+            height: 400px;
+            border: 1px solid gray;
+        }
+
+    </style>
+
+    <script src="../../lib/OpenLayers.js"></script>
+    <script type="text/javascript"> 
+
+        var map, draw, handler, controls;
+        OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
+
+        function init(){
+            map = new OpenLayers.Map('map');
+
+            var vectors = new OpenLayers.Layer.Vector(
+                "Vector Layer",
+                {isBaseLayer: true}
+            );
+            map.addLayer(vectors);
+            
+            
+            draw = new OpenLayers.Control.DrawFeature(
+                vectors, OpenLayers.Handler.Polygon
+            );
+            map.addControl(draw);
+            
+            var callbacks = {
+                "over": function(feature) {
+                    log("over " + feature.id);
+                },
+                "out": function(feature) {
+                    log("out " + feature.id);
+                },
+                "click": function(feature) {
+                    log("click " + feature.id);
+                },
+                "dblclick": function(feature) {
+                    log("dblclick " + feature.id);
+                },
+                "clickout": function(feature) {
+                    log("clickout " + feature.id);
+                }
+            };
+            
+            handler = new OpenLayers.Handler.Feature(
+                {map: map}, vectors, callbacks
+            );
+            
+            map.setCenter(new OpenLayers.LonLat(0, 0), 3);
+
+        }
+        
+        function log(msg) {
+            document.getElementById('output').value += msg + "\n";
+        }
+        
+        function clearLog() {
+            document.getElementById('output').value = "";
+        }
+
+    </script>
+  </head>
+  <body onload="init()">
+    <div id="west">
+        <div id="map"></div>
+        <p>
+            Draw a few polygons on the map.  Some overlapping.  Activate the
+            feature handler and ensure that "over" and "out" are called only
+            when mousing over/out of a feature for the first time.  The
+            "click" callback should be called for every click on a feature.
+            The "clickout" callback should be called when?
+        </p>
+    </div>
+    <div id="east">
+        <ul>
+            <li>
+                <input type="radio" name="type" value="none" id="noneToggle"
+                       onclick="draw.deactivate();handler.deactivate();" checked="checked" />
+                <label for="noneToggle">navigate</label>
+            </li>
+            <li>
+                <input type="radio" name="type" value="polygon" id="polygonToggle"
+                       onclick="draw.activate();handler.deactivate();" />
+                <label for="polygonToggle">draw polygon</label>
+            </li>
+            <li>
+                <input type="radio" name="type" value="feature" id="featureToggle"
+                       onclick="draw.deactivate();handler.activate();" />
+                <label for="featureToggle">activate feature handler</label>
+            </li>
+        </ul>
+        <button onclick="clearLog();">clear log</button><br />
+        <textarea id="output"></textarea>
+    </div>
+  </body>
+</html>