Drag and Drop POIs. TODO: make a panel, load from mapfeatures. Bug: only shows when...
[potlatch2.git] / potlatch2.mxml
1 <?xml version="1.0" encoding="utf-8"?>
2 <mx:Application 
3         xmlns:mx="http://www.adobe.com/2006/mxml" 
4         xmlns:halcyon="net.systemeD.halcyon.*"
5         xmlns:potlatch2="net.systemeD.potlatch2.*"
6         layout="vertical"
7         horizontalAlign="center" 
8         addedToStage="initApp()">
9         
10         <mx:Style source="styles/Application.css"/>
11
12     <mx:Glow id="glowImage" duration="100" 
13         alphaFrom="0.3" alphaTo="1.0" 
14         blurXFrom="0.0" blurXTo="5.0" 
15         blurYFrom="0.0" blurYTo="5.0" 
16         color="0xFF8000"/>
17     <mx:Glow id="unglowImage" duration="100" 
18         alphaFrom="1.0" alphaTo="0.3" 
19         blurXFrom="5.0" blurXTo="0.0" 
20         blurYFrom="5.0" blurYTo="0.0" 
21         color="0xFF8000"/>
22     <mx:WipeLeft id="wipeOut" duration="250"/>
23     <mx:WipeRight id="wipeIn" duration="250"/>
24
25     <mx:ApplicationControlBar dock="true">
26         <mx:PopUpButton id="bgButton" label="Background" openAlways="true"
27             creationComplete="bgButton.popUp = new BackgroundSelector();"/>
28         <mx:PopUpButton id="styleButton" label="Map Style" openAlways="true"
29             creationComplete="styleButton.popUp = new StyleSelector();"/>
30         <mx:Image id="pub" source="@Embed('resources/icons/pub.png')" mouseMove="dragPOI(event, [['amenity','pub']])" />
31         <mx:Image id="station" source="@Embed('resources/icons/station.png')"
32             mouseMove="dragPOI(event, [['railway', 'station'],['name','Charbury International']])" />
33         <mx:Spacer width="100%"/>
34         <mx:Button label="Help" click="new HelpDialog().init();" />
35         <mx:Button label="Options" click="new OptionsDialog().init();" />
36         <mx:Button label="Save" icon="@Embed('embedded/save.svg')" click="SaveManager.saveChanges();"/>
37     </mx:ApplicationControlBar>
38     
39     <mx:HDividedBox width="100%" height="100%">
40
41           <!-- Tag viewer -->
42           <potlatch2:TagViewer width="25%" height="100%" id="tagViewer"/>
43
44       <mx:Canvas width="75%" height="100%">
45         <mx:Canvas id="map_area" resize="onResizeMap()"
46             top="0" left="0" width="100%" height="100%" dragEnter="dragEnterHandler(event);" dragDrop="dragDropHandler(event);">
47         </mx:Canvas>
48         <mx:Image source="@Embed('embedded/zoomIn.svg')" right="3" top="3" click="theMap.zoomIn();"
49             rollOverEffect="glowImage" rollOutEffect="unglowImage"/>
50         <mx:Image source="@Embed('embedded/zoomOut.svg')" right="3" top="20" click="theMap.zoomOut();"
51             rollOverEffect="glowImage" rollOutEffect="unglowImage"/>
52         <mx:TextArea id="dataWorking" text="" right="20" top="3" disabledColor="black" backgroundDisabledColor="0xFFFFEA" height="18"
53             enabled="false" borderThickness="0"
54             showEffect="{wipeIn}" hideEffect="{wipeOut}"/>
55       </mx:Canvas>
56     </mx:HDividedBox>
57
58         <mx:Script><![CDATA[
59                 import net.systemeD.halcyon.*;
60                 import net.systemeD.halcyon.connection.*;
61                 import net.systemeD.potlatch2.*;
62                 import net.systemeD.potlatch2.save.SaveManager;
63                 import net.systemeD.potlatch2.help.*;
64                 import net.systemeD.potlatch2.options.*;
65                 import net.systemeD.potlatch2.utils.*;
66                 import mx.managers.PopUpManager;
67                 import flash.system.Security;
68                 import flash.net.*;
69                 import flash.events.MouseEvent;
70                 import flash.display.Sprite;
71                 import mx.core.IChildList;
72         import mx.containers.Canvas;
73                 import mx.core.Application;
74                 import com.yahoo.maps.api.YahooMap;
75                 import com.yahoo.maps.api.YahooMapEvent;
76                 import com.yahoo.maps.api.core.location.LatLon;
77         import mx.events.DragEvent;
78         import mx.managers.DragManager;
79         import mx.core.DragSource;
80
81         public var theMap:Map;
82                 public var yahooListener:Object = new Object();
83                 public var yahoo:YahooMap = new YahooMap(); 
84
85                 private function initApp():void {
86
87                         Globals.vars.map_area = map_area;
88                         Globals.vars.yahoo = yahoo;
89                         Globals.vars.root = map_area.rawChildren;                       // set up global reference to root level
90                         var _root:IChildList = map_area.rawChildren;            // convenient local shorthand
91
92                         // map backdrop object
93             var w:uint = map_area.width;
94             var h:uint = map_area.height;
95             var b:Sprite = new Sprite();
96             b.height=h; b.width=w;
97             b.graphics.beginFill(0xFFFFEA,100); 
98             b.graphics.drawRect(0,0,w,h); 
99             b.graphics.endFill();
100                         _root.addChild(b);
101
102                         // Add Yahoo! background
103                         yahoo.init("f0a.sejV34HnhgIbNSmVHmndXFpijgGeun0fSIMG9428hW_ifF3pYKwbV6r9iaXojl1lU_dakekR", w, h);  
104                         yahoo.mapType="satellite";
105                         _root.addChild(yahoo);
106                         yahoo.visible=false;
107                         yahoo.alpha=0.5;
108
109                         // Yahoo! listeners
110                         yahooListener.yahooInit=function(event:YahooMapEvent):void {
111                                 yahoo.zoomLevel = 18-theMap.scale;
112                                 yahoo.centerLatLon = new LatLon(theMap.centre_lat, theMap.centre_lon);
113
114                                 yahooListener.moveHandler=function(event:MapEvent):void {
115                                         if (!yahoo.visible) { return; }
116                                         yahoo.zoomLevel=18-event.params.scale;
117                                         yahoo.centerLatLon=new LatLon(event.params.lat, event.params.lon);
118                                 };
119                                 theMap.addEventListener(MapEvent.MOVE, yahooListener.moveHandler);
120
121                                 yahooListener.resizeHandler=function(event:MapEvent):void {
122                                         yahoo.setSize(event.params.width, event.params.height);
123                                 };
124                                 theMap.addEventListener(MapEvent.RESIZE, yahooListener.resizeHandler);
125                         }
126                         yahoo.addEventListener(YahooMapEvent.MAP_INITIALIZE, yahooListener.yahooInit);
127
128                         // add map
129                         theMap=new Map(this.loaderInfo.parameters);
130                         theMap.backdrop=b;
131                         _root.addChild(theMap);
132             theMap.updateSize(w, h);
133
134                         // add mask for map
135                         var s:Sprite=new Sprite();
136                         s.graphics.beginFill(0xFFFFFF,100);
137                         s.graphics.drawRect(0,0,w,h);
138                         s.graphics.endFill();
139                         _root.addChild(s);
140                         theMap.mask=s;
141
142                         // add crosshair
143                         /*s=new Sprite();
144                         s.graphics.lineStyle(2,0);
145                         s.graphics.moveTo(stage.stageWidth/2-20,stage.stageHeight/2);
146                         s.graphics.lineTo(stage.stageWidth/2+20,stage.stageHeight/2);
147                         s.graphics.moveTo(stage.stageWidth/2,stage.stageHeight/2-20);
148                         s.graphics.lineTo(stage.stageWidth/2,stage.stageHeight/2+20);
149                         _root.addChild(s);*/
150
151                         // mouse-up handler attached to stage, so the user can release outside the map
152                         stage.addEventListener(MouseEvent.MOUSE_UP, theMap.mouseUpHandler);
153                         Globals.vars.map_area.addEventListener(MouseEvent.MOUSE_MOVE, theMap.mouseMoveHandler);
154                         Globals.vars.map_area.addEventListener(MouseEvent.MOUSE_DOWN, theMap.mouseDownHandler);
155
156                         // keyboard event attached to stage
157                         stage.addEventListener(KeyboardEvent.KEY_UP, theMap.keyUpHandler);
158
159                         // example listener event
160                         var myListenerObj:Object = new Object();
161                         myListenerObj.mapHandler=function(event:MapEvent):void {
162                                 Globals.vars.debug.appendText("Download event fired - "+event.params.minlat+","+event.params.minlon+"\n");
163                         };
164                         theMap.addEventListener(MapEvent.DOWNLOAD, myListenerObj.mapHandler);
165
166                         // add debug field
167                         var t:TextField=new TextField();
168                         t.width=500; t.height=150; t.border=true;
169                         t.multiline=true;
170                         _root.addChild(t);
171                         Globals.vars.debug=t;
172             t.visible = loaderInfo.parameters["show_debug"] == 'true';
173                         Globals.vars.root=theMap;       // just for the addDebug function
174
175             var controller:EditController = new EditController(theMap, tagViewer);
176             controller.setActive();
177             
178             var conn:Connection = Connection.getConnectionInstance();
179             conn.addEventListener(Connection.LOAD_STARTED, onDataStart);
180             conn.addEventListener(Connection.LOAD_COMPLETED, onDataComplete);
181
182                         // and to import a shapefile...
183 //                      var importer:ShpImporter = new ShpImporter(theMap, ["http://127.0.0.1/~richard/shp/wildrnp020.shp","http://127.0.0.1/~richard/shp/wildrnp020.shx","http://127.0.0.1/~richard/shp/wildrnp020.dbf"]);
184                 }
185
186         public function onResizeMap():void {
187             if ( theMap != null )
188                 theMap.updateSize(map_area.width, map_area.height);
189         }
190
191         private function onDataStart(event:Event):void {
192             dataWorking.text = event.type == Connection.LOAD_STARTED ? "Loading data..." : "Saving Data...";
193             dataWorking.visible = true;
194         }
195         private function onDataComplete(event:Event):void {
196             dataWorking.visible = false;
197         }
198         
199         private function dragPOI(event:MouseEvent, tags:Array):void {
200             // Get the drag initiator component from the event object.
201             var dragInitiator:Image = event.currentTarget as Image;
202             var dragSource:DragSource = new DragSource();
203             dragSource.addData(tags, 'tags');
204             
205             var dragProxy:Image = new Image();
206             dragProxy.source = event.currentTarget.source;
207             
208             DragManager.doDrag(dragInitiator, dragSource, event, dragProxy);
209         }
210         
211         private function dragEnterHandler(event:DragEvent):void {
212             // Get the drop target component from the event object.
213             var dropTarget:Canvas=event.currentTarget as Canvas;
214             // Accept the drag only if the user is dragging poi with tags
215             if (event.dragSource.hasFormat('tags')) 
216             {
217                 DragManager.acceptDragDrop(dropTarget);
218             }
219         }
220         
221         private function dragDropHandler(event:DragEvent):void {
222             // Get the data identified by the color format from the drag source.
223             // Blame http://www.adobe.com/devnet/flex/quickstart/adding_drag_and_drop/#manual
224             // for whatever horrid abuse of "color format" this is doing
225             var tags:Array = event.dragSource.dataForFormat('tags') as Array;
226             var mapLoc:Point = Globals.vars.root.globalToLocal(new Point(event.stageX, event.stageY));
227             var lat:Number = Globals.vars.root.coord2lat(mapLoc.y);
228             var lon:Number = Globals.vars.root.coord2lon(mapLoc.x);
229             var node:Node = Connection.getConnectionInstance().createNode({}, lat, lon);
230             for each( var tag:Array in tags ) {
231               node.setTag(tag[0],tag[1]);
232             }
233         }
234
235         ]]></mx:Script>
236
237 </mx:Application>
238