[OpenLayers-Commits] r7310 - in sandbox/topp/almanac: . examples lib lib/OpenLayers/Control
commits at openlayers.org
commits at openlayers.org
Thu Jun 5 11:51:06 EDT 2008
Author: sbenthall
Date: 2008-06-05 11:51:06 -0400 (Thu, 05 Jun 2008)
New Revision: 7310
Added:
sandbox/topp/almanac/StoryEditGeometry.js
sandbox/topp/almanac/examples/edit-feature.html
sandbox/topp/almanac/lib/OpenLayers/Control/Panel2.js
Modified:
sandbox/topp/almanac/lib/OpenLayers.js
Log:
Work towards a geometry editing UI for almanac stories
Added: sandbox/topp/almanac/StoryEditGeometry.js
===================================================================
--- sandbox/topp/almanac/StoryEditGeometry.js (rev 0)
+++ sandbox/topp/almanac/StoryEditGeometry.js 2008-06-05 15:51:06 UTC (rev 7310)
@@ -0,0 +1,130 @@
+
+
+var Almanac = {};
+Almanac.Control = {};
+
+Almanac.Control.StoryEditGeometry = new OpenLayers.Class(OpenLayers.Control, {
+
+ /**
+ * Property: layer
+ * {<Almanac.Layer.Story>}
+ */
+ layer: null,
+
+ drawControls: null,
+
+ modifyControl: null,
+
+ selectControl: null,
+
+ /**
+ * Constructor: Almanac.Control.StoryModify
+ * Create a new control to modify stories.
+ */
+ initialize: function(layer) {
+ this.layer = layer;
+
+ this.drawControls = {
+ point: new OpenLayers.Control.DrawFeature(layer,
+ OpenLayers.Handler.Point),
+ line: new OpenLayers.Control.DrawFeature(layer,
+ OpenLayers.Handler.Path),
+ polygon: new OpenLayers.Control.DrawFeature(layer,
+ OpenLayers.Handler.Polygon)
+ };
+
+ this.modifyControl = new OpenLayers.Control.ModifyFeature(layer);
+
+ this.selectControl = this.modifyControl.selectControl;
+
+ this.layer.events.on({
+ "featureadded": this.onFeatureAdded,
+ scope: this
+ });
+
+ },
+
+ activate: function(){
+ this.modify();
+ },
+
+ destroy: function(){
+ this.layer.events.un({
+ "featureadded": this.onFeatureAdded,
+ scope: this
+ })
+
+ this.layer = null;
+ this.drawControls = null;
+ this.modifyControl = null;
+ this.selectControl = null;
+
+ OpenLayers.Control.prototype.destroy.apply(this, arguments);
+ },
+
+ toggleMode: function(geom) {
+ if(!geom){
+ this.modify();
+ } else {
+ this.modifyControl.deactivate();
+ }
+
+ for(key in this.drawControls) {
+ var control = this.drawControls[key];
+ if(geom == key) {
+ control.activate();
+ } else {
+ control.deactivate();
+ }
+ }
+ },
+
+ /**
+ * Method: modify
+ *
+ * Activate the modify control and select the feature on the layer
+ * (eliminating the need for an extra click)
+ */
+ modify: function(){
+ this.modifyControl.activate();
+
+ //this control maintains a maximum of one feature on its layer
+ var feature = this.layer.features[0];
+
+ if(feature){
+ this.selectControl.select(feature);
+ }
+ },
+
+ onFeatureAdded: function(ev){
+ feature = ev.feature;
+
+ for(var i = 0; i < this.layer.features.length ; i++){
+ if (this.layer.features[i] !== feature) {
+ this.layer.removeFeatures([vectors.features[i]]);
+ }
+ }
+
+ this.toggleMode();
+ },
+
+ /**
+ * Method: setMap
+ * Set the map property for the control and all controls it owns.
+ *
+ * Parameters:
+ * map - {<OpenLayers.Map>} The control's map.
+ */
+ setMap: function(map) {
+ for(key in this.drawControls){
+ this.drawControls[key].setMap(map);
+ }
+
+ this.modifyControl.setMap(map);
+ this.selectControl.setMap(map);
+
+ OpenLayers.Control.prototype.setMap.apply(this, arguments);
+ },
+
+ CLASS_NAME: "Almanac.Control.StoryEditGeometry"
+});
Added: sandbox/topp/almanac/examples/edit-feature.html
===================================================================
--- sandbox/topp/almanac/examples/edit-feature.html (rev 0)
+++ sandbox/topp/almanac/examples/edit-feature.html 2008-06-05 15:51:06 UTC (rev 7310)
@@ -0,0 +1,109 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+ <title>Edit Feature</title>
+ <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+ <style type="text/css">
+ #map {
+ width: 512px;
+ height: 512px;
+ border: 1px solid gray;
+ }
+
+ div .selected {
+ background-color: #EEEEEE
+ }
+ </style>
+ <script language="javascript" type="text/javascript" src="./lib/Firebug/firebug.js"></script>
+ <script src="../lib/OpenLayers.js"></script>
+ <script src="../StoryEditGeometry.js"></script>
+ <script type="text/javascript">
+ var map, vectors, controls;
+ function init(){
+ map = new OpenLayers.Map('map');
+ var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
+ "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
+ vectors = new OpenLayers.Layer.Vector("Vector Layer");
+
+ map.addLayers([wms, vectors]);
+ map.addControl(new OpenLayers.Control.LayerSwitcher());
+ map.addControl(new OpenLayers.Control.MousePosition())
+
+ var storyEditGeometryControl = new Almanac.Control.StoryEditGeometry(vectors);
+ map.addControl(storyEditGeometryControl);
+
+ var panel = new OpenLayers.Control.Panel2(
+ [
+ {
+ id: "drawPointToggle",
+ behavior: function(){
+ storyEditGeometryControl.toggleMode('point')
+ }
+ },
+ {
+ id: "drawLineToggle",
+ behavior: function(){
+ storyEditGeometryControl.toggleMode('line')
+ }
+ },
+ {
+ id: "drawPolygonToggle",
+ behavior: function(){
+ storyEditGeometryControl.toggleMode('polygon')
+ }
+ }
+ ], {
+ defaultBehavior: function(){
+ storyEditGeometryControl.toggleMode();
+ }
+ }
+ )
+
+ map.addControl(panel);
+
+ panel.activate();
+
+ var point = new OpenLayers.Geometry.Point(0, 0);
+ var pointFeature = new OpenLayers.Feature.Vector(point,null);
+
+ vectors.addFeatures([pointFeature]);
+
+ storyEditGeometryControl.modify();
+
+ map.setCenter(new OpenLayers.LonLat(0, 0), 3);
+
+
+ }
+
+ function toggleControl(element) {
+ for(key in controls) {
+ var control = controls[key];
+ if(element.value == key && element.checked) {
+ control.activate();
+ } else {
+ control.deactivate();
+ }
+ }
+ }
+
+ </script>
+
+ </head>
+ <body onload="init()">
+ <div id="map"></div>
+ <div id="controls">
+ <ul id="controlToggle">
+ <li>
+ <div id="drawPointToggle">draw point</div>
+ </li>
+ <li>
+ <div id ="drawLineToggle">draw line</div>
+ </li>
+ <li>
+ <div id="drawPolygonToggle">draw polygon</div>
+ </li>
+ </ul>
+ </div>
+ </body>
+</html>
Added: sandbox/topp/almanac/lib/OpenLayers/Control/Panel2.js
===================================================================
--- sandbox/topp/almanac/lib/OpenLayers/Control/Panel2.js (rev 0)
+++ sandbox/topp/almanac/lib/OpenLayers/Control/Panel2.js 2008-06-05 15:51:06 UTC (rev 7310)
@@ -0,0 +1,91 @@
+OpenLayers.Control.Panel2 = OpenLayers.Class(OpenLayers.Control, {
+
+ unselectedCSSClass : "unselected",
+ selectedCSSClass : "selected",
+
+ /**
+ * Property: buttons
+ * {Array(~~~~~~~~}
+ */
+ toggles: null,
+
+ /**
+ *
+ * Parameters:
+ * toggles - omg!
+ * options - {Object} An optional object whose properties will be used
+ * to extend the control.
+ */
+ initialize: function(toggles, options) {
+ OpenLayers.Control.prototype.initialize.apply(this, [options]);
+ this.toggles = toggles;
+
+ this.defaultBehavior();
+ },
+
+ /**
+ * APIMethod: destroy
+ */
+ destroy: function() {
+ OpenLayers.Control.prototype.destroy.apply(this, arguments);
+ this.buttons = null;
+ },
+
+ /**
+ * APIMethod: activate
+ */
+ activate: function() {
+ OpenLayers.Control.prototype.activate.apply(this, arguments);
+
+ for(var i = 0; i < this.toggles.length; i++){
+ var toggle = this.toggles[i];
+
+ var domElt = document.getElementById(toggle.id);
+
+ if(domElt){
+ domElt.onclick = this.makeOnclick(toggle);
+ }
+ }
+ },
+
+ /**
+ * APIMethod: deactivate
+ */
+ deactivate: function() {
+
+ },
+
+ makeOnclick: function(toggle){
+ var panel = this;
+
+ return function(){
+ panel.toggleOnclick(toggle);
+ }
+ },
+
+ toggleOnclick: function(toggle){
+ for(var i = 0; i < this.toggles.length; i++){
+ var thisToggle = this.toggles[i];
+
+ var domElt = document.getElementById(thisToggle.id);
+
+ if(toggle == thisToggle){
+ if(domElt.className == this.unselectedCSSClass){
+ domElt.className = this.selectedCSSClass;
+ toggle.behavior();
+ } else {
+ domElt.className = this.unselectedCSSClass;
+ this.defaultBehavior();
+ }
+ } else {
+ domElt.className = this.unselectedCSSClass;
+ }
+ }
+ },
+
+ defaultBehavior: function(){
+
+ },
+
+ CLASS_NAME: "OpenLayers.Control.Panel2"
+});
Modified: sandbox/topp/almanac/lib/OpenLayers.js
===================================================================
--- sandbox/topp/almanac/lib/OpenLayers.js 2008-06-05 15:48:24 UTC (rev 7309)
+++ sandbox/topp/almanac/lib/OpenLayers.js 2008-06-05 15:51:06 UTC (rev 7310)
@@ -161,6 +161,7 @@
"OpenLayers/Control/DragFeature.js",
"OpenLayers/Control/ModifyFeature.js",
"OpenLayers/Control/Panel.js",
+ "OpenLayers/Control/Panel2.js",
"OpenLayers/Control/SelectFeature.js",
"OpenLayers/Control/NavigationHistory.js",
"OpenLayers/Control/Geocoder.js",
More information about the Commits
mailing list