Changeset 7313
- Timestamp:
- 06/05/08 18:58:02 (6 months ago)
- Files:
-
- sandbox/topp/almanac/StoryEditGeometry.js (modified) (5 diffs)
- sandbox/topp/almanac/examples/edit-feature.html (modified) (3 diffs)
- sandbox/topp/almanac/lib/OpenLayers.js (modified) (1 diff)
- sandbox/topp/almanac/lib/OpenLayers/Control/Radio.js (moved) (moved from sandbox/topp/almanac/lib/OpenLayers/Control/Panel2.js) (6 diffs)
Legend:
- Unmodified
- Added
- Removed
- Modified
- Copied
- Moved
sandbox/topp/almanac/StoryEditGeometry.js
r7310 r7313 42 42 scope: this 43 43 }); 44 45 this.modifyControl.events.on({ 46 "activate": this.selectFeature, 47 scope: this 48 }) 44 49 45 50 }, 46 51 47 52 activate: function(){ 48 this.modify(); 53 OpenLayers.Console.log("SEG activated") 54 this.toggleMode(); 49 55 }, 50 56 … … 52 58 this.layer.events.un({ 53 59 "featureadded": this.onFeatureAdded, 60 scope: this 61 }) 62 63 this.modifyControl.events.un({ 64 "activate": this.selectFeature, 54 65 scope: this 55 66 }) … … 64 75 65 76 toggleMode: function(geom) { 77 OpenLayers.Console.log("toggleMode called") 78 66 79 if(!geom){ 67 this.modify ();80 this.modifyControl.activate(); 68 81 } else { 69 82 this.modifyControl.deactivate(); … … 80 93 }, 81 94 82 /** 83 * Method: modify 84 * 85 * Activate the modify control and select the feature on the layer 86 * (eliminating the need for an extra click) 87 */ 88 modify: function(){ 89 this.modifyControl.activate(); 90 95 selectFeature: function(){ 96 OpenLayers.Console.log(this); 91 97 //this control maintains a maximum of one feature on its layer 92 98 var feature = this.layer.features[0]; … … 98 104 99 105 onFeatureAdded: function(ev){ 106 OpenLayers.Console.log(ev); 107 100 108 feature = ev.feature; 101 109 sandbox/topp/almanac/examples/edit-feature.html
r7310 r7313 34 34 map.addControl(storyEditGeometryControl); 35 35 36 var panel = new OpenLayers.Control. Panel2(36 var panel = new OpenLayers.Control.Radio( 37 37 [ 38 38 { 39 id: "drawPointToggle", 40 behavior: function(){ 41 storyEditGeometryControl.toggleMode('point') 42 } 39 id: "modifyFeatureTool", 40 value: 'modify' 43 41 }, 44 42 { 45 id: "drawLineToggle", 46 behavior: function(){ 47 storyEditGeometryControl.toggleMode('line') 48 } 43 id: "drawPointTool", 44 value: 'point' 49 45 }, 50 46 { 51 id: "drawPolygonToggle", 52 behavior: function(){ 53 storyEditGeometryControl.toggleMode('polygon') 54 } 47 id: "drawLineTool", 48 value: 'line' 49 }, 50 { 51 id: "drawPolygonTool", 52 value: 'polygon' 55 53 } 56 54 ], { … … 61 59 ) 62 60 63 map.addControl(panel);64 65 panel.activate();66 67 61 var point = new OpenLayers.Geometry.Point(0, 0); 68 62 var pointFeature = new OpenLayers.Feature.Vector(point,null); 69 63 70 64 vectors.addFeatures([pointFeature]); 65 OpenLayers.Console.log(vectors); 71 66 72 storyEditGeometryControl.modify(); 67 storyEditGeometryControl.activate(); 68 69 map.addControl(panel); 70 panel.activate(); 71 panel.setOnclickBehavior('modify', function(){ 72 storyEditGeometryControl.toggleMode() 73 }, storyEditGeometryControl); 74 panel.setOnclickBehavior('point', function(){ 75 storyEditGeometryControl.toggleMode('point') 76 }, storyEditGeometryControl); 77 panel.setOnclickBehavior('line', function(){ 78 storyEditGeometryControl.toggleMode('line') 79 }, storyEditGeometryControl); 80 panel.setOnclickBehavior('polygon', function(){ 81 storyEditGeometryControl.toggleMode('polygon') 82 }, storyEditGeometryControl); 73 83 74 84 map.setCenter(new OpenLayers.LonLat(0, 0), 3); 75 76 77 85 } 78 86 … … 96 104 <ul id="controlToggle"> 97 105 <li> 98 <div id=" drawPointToggle">draw point</div>106 <div id="modifyFeatureTool">modify feature</div> 99 107 </li> 100 108 <li> 101 <div id ="drawLineToggle">draw line</div>109 <div id="drawPointTool">draw point</div> 102 110 </li> 103 111 <li> 104 <div id="drawPolygonToggle">draw polygon</div> 112 <div id ="drawLineTool">draw line</div> 113 </li> 114 <li> 115 <div id="drawPolygonTool">draw polygon</div> 105 116 </li> 106 117 </ul> sandbox/topp/almanac/lib/OpenLayers.js
r7310 r7313 162 162 "OpenLayers/Control/ModifyFeature.js", 163 163 "OpenLayers/Control/Panel.js", 164 "OpenLayers/Control/ Panel2.js",164 "OpenLayers/Control/Radio.js", 165 165 "OpenLayers/Control/SelectFeature.js", 166 166 "OpenLayers/Control/NavigationHistory.js", sandbox/topp/almanac/lib/OpenLayers/Control/Radio.js
r7310 r7313 1 OpenLayers.Control. Panel2= OpenLayers.Class(OpenLayers.Control, {1 OpenLayers.Control.Radio = OpenLayers.Class(OpenLayers.Control, { 2 2 3 unselectedCSSClass : "unselected", 4 selectedCSSClass : "selected", 3 EVENT_TYPES: ["activate", "deactivate", "clicked"], 4 5 selectedCSSClassName : "selected", 5 6 6 7 /** 7 * Property: buttons8 * Property: radios 8 9 * {Array(~~~~~~~~} 9 10 */ 10 toggles: null,11 radios: null, 11 12 12 13 /** … … 17 18 * to extend the control. 18 19 */ 19 initialize: function( toggles, options) {20 initialize: function(radios, options) { 20 21 OpenLayers.Control.prototype.initialize.apply(this, [options]); 21 this.toggles = toggles; 22 23 this.defaultBehavior(); 22 this.radios = radios; 24 23 }, 25 24 … … 29 28 destroy: function() { 30 29 OpenLayers.Control.prototype.destroy.apply(this, arguments); 31 this. buttons= null;30 this.radio = null; 32 31 }, 33 32 … … 38 37 OpenLayers.Control.prototype.activate.apply(this, arguments); 39 38 40 for(var i = 0; i < this. toggles.length; i++){41 var toggle = this.toggles[i];39 for(var i = 0; i < this.radios.length; i++){ 40 var radio = this.radios[i]; 42 41 43 var domElt = document.getElementById( toggle.id);42 var domElt = document.getElementById(radio.id); 44 43 45 44 if(domElt){ 46 domElt.onclick = this.makeOnclick( toggle);45 domElt.onclick = this.makeOnclick(radio); 47 46 } 48 47 } … … 56 55 }, 57 56 58 makeOnclick: function( toggle){57 makeOnclick: function(radio){ 59 58 var panel = this; 60 59 61 60 return function(){ 62 panel.toggleOnclick(toggle); 61 panel.events.triggerEvent("clicked",{value : radio.value}) 62 panel.redraw(radio); 63 63 } 64 64 }, 65 65 66 toggleOnclick: function(toggle){67 for(var i = 0; i < this. toggles.length; i++){68 var this Toggle = this.toggles[i];66 redraw: function(radio){ 67 for(var i = 0; i < this.radios.length; i++){ 68 var thisRadio = this.radios[i]; 69 69 70 var domElt = document.getElementById(this Toggle.id);70 var domElt = document.getElementById(thisRadio.id); 71 71 72 if(toggle == thisToggle){ 73 if(domElt.className == this.unselectedCSSClass){ 74 domElt.className = this.selectedCSSClass; 75 toggle.behavior(); 76 } else { 77 domElt.className = this.unselectedCSSClass; 78 this.defaultBehavior(); 79 } 72 if(radio == thisRadio){ 73 OpenLayers.Element.addClassName(domElt, this.selectedCSSClassName); 74 //toggle.behavior(); 80 75 } else { 81 domElt.className = this.unselectedCSSClass;76 OpenLayers.Element.removeClassName(domElt, this.selectedCSSClassName); 82 77 } 83 78 } … … 88 83 }, 89 84 90 CLASS_NAME: "OpenLayers.Control.Panel2" 85 setOnclickBehavior: function(value, behavior, scope){ 86 var obj = { 87 "clicked" : function(evt){ 88 if(evt.value == value){ 89 behavior(evt); //maybe the argument here should just be the value? 90 } 91 }, 92 } 93 94 if(scope){ 95 obj.scope = scope; 96 } 97 98 this.events.on(obj); 99 }, 100 101 CLASS_NAME: "OpenLayers.Control.Radio" 91 102 });
