changeset 4402:c84630d544a1

Get rid of HorizontalLayout in MapOutputTab and use manual resizing. The OpenLayers Map widget is now resized and positioned manually by a ResizeHandler method. The automatic HorizontalLayout was obviously broken in combination with the OpenLayers widget. This should fix various layout issues with the OpenLayers Map.
author Christian Lins <christian.lins@intevation.de>
date Mon, 05 Nov 2012 15:17:58 +0100 (2012-11-05)
parents 6dad08f54369
children d4f88fda6ed3
files flys-client/src/main/java/de/intevation/flys/client/client/ui/map/FloodMap.java flys-client/src/main/java/de/intevation/flys/client/client/ui/map/MapOutputTab.java flys-client/src/main/java/de/intevation/flys/client/client/ui/map/MapPanel.java
diffstat 3 files changed, 55 insertions(+), 28 deletions(-) [+]
line wrap: on
line diff
--- a/flys-client/src/main/java/de/intevation/flys/client/client/ui/map/FloodMap.java	Mon Nov 05 14:39:48 2012 +0100
+++ b/flys-client/src/main/java/de/intevation/flys/client/client/ui/map/FloodMap.java	Mon Nov 05 15:17:58 2012 +0100
@@ -34,10 +34,10 @@
     protected Bounds    maxExtent;
     protected ScaleLine scaleLine;
 
-    public FloodMap(String srid, Bounds maxExtent) {
+    public FloodMap(String srid, Bounds maxExtent, String width, String height) {
         this.srid      = srid;
         this.maxExtent = maxExtent;
-        recreateWidget("100%", "99px");
+        recreateWidget(width, height);
         getBarrierLayer();
     }
 
--- a/flys-client/src/main/java/de/intevation/flys/client/client/ui/map/MapOutputTab.java	Mon Nov 05 14:39:48 2012 +0100
+++ b/flys-client/src/main/java/de/intevation/flys/client/client/ui/map/MapOutputTab.java	Mon Nov 05 15:17:58 2012 +0100
@@ -2,7 +2,7 @@
 
 import com.google.gwt.core.client.GWT;
 import com.google.gwt.user.client.rpc.AsyncCallback;
-import com.google.gwt.user.client.ui.Widget;
+import com.google.gwt.user.client.ui.AbsolutePanel;
 
 import com.smartgwt.client.util.SC;
 import com.smartgwt.client.widgets.Canvas;
@@ -48,6 +48,7 @@
 
 import org.gwtopenmaps.openlayers.client.Bounds;
 import org.gwtopenmaps.openlayers.client.Map;
+import org.gwtopenmaps.openlayers.client.MapWidget;
 import org.gwtopenmaps.openlayers.client.event.VectorFeatureAddedListener;
 import org.gwtopenmaps.openlayers.client.event.VectorFeatureRemovedListener;
 import org.gwtopenmaps.openlayers.client.feature.VectorFeature;
@@ -87,9 +88,10 @@
     protected MapToolbar controlPanel;
     protected ThemePanel themePanel;
     protected Canvas     themePanelCanvas;
-    protected Widget     mapPanel;
+    protected MapWidget     mapPanel;
     protected Canvas mapPanelCanvas;
-
+    protected VLayout rootLayout = new VLayout();
+    protected AbsolutePanel absPan = new AbsolutePanel();
     protected FloodMap floodMap;
 
 
@@ -121,7 +123,7 @@
                         initial = max;
                     }
 
-                    setFloodmap(new FloodMap(c.getSrid(), max));
+                    setFloodmap(new FloodMap(c.getSrid(), max, "100%", "100%"));
 
                     initLayout();
                     initBarriers();
@@ -136,40 +138,29 @@
 
 
     protected void initLayout() {
-        VLayout rootLayout = new VLayout();
         rootLayout.setHeight100();
         rootLayout.setWidth100();
         rootLayout.setMembersMargin(2);
 
         final HLayout hlayout = new HLayout();
-        hlayout.setMembersMargin(2);
+        hlayout.setMembersMargin(0);
 
         this.themePanelCanvas = createThemePanel();
 
         controlPanel = createControlPanel();
-        //mapPanel     = new Image();
-        //((Image)mapPanel).setUrl("http://www.hedweb.com/animimag/cool-pony.jpg");
         mapPanel = floodMap.getMapWidget();
-        hlayout.addMember(themePanelCanvas);
-        hlayout.addMember(mapPanel);
 
         rootLayout.addMember(controlPanel);
-        rootLayout.addMember(hlayout);
+        rootLayout.addMember(absPan);
+        absPan.setWidth("100%");
+        absPan.setHeight("100%");
+        absPan.add(themePanelCanvas);
+        absPan.add(mapPanel);
 
-        hlayout.addResizedHandler(new ResizedHandler() {
+        rootLayout.addResizedHandler(new ResizedHandler() {
             @Override
             public void onResized(ResizedEvent e) {
-                int height = hlayout.getHeight();
-                int width  = hlayout.getWidth() -
-                        (themePanelCanvas.isVisible() ? themePanelCanvas.getWidth() : 0);
-
-                height = height * 99 / 100;
-                width  = width  * 99 / 100;
-
-                String w = String.valueOf(width) + "px";
-                String h = String.valueOf(height) + "px";
-
-                mapPanel.setSize(w, h);
+                doLayout();
             }
         });
 
@@ -177,6 +168,39 @@
     }
 
 
+    protected void doLayout() {
+        if(!rootLayout.isVisible()) {
+            return;
+        }
+
+        // Manually set the height of the AbsolutePanel, somehow this is necessary
+        absPan.setHeight(String.valueOf(
+                rootLayout.getHeight() - controlPanel.getHeight() - 2) + "px");
+
+        // Calculate bounds of Map
+        int height = rootLayout.getHeight() -
+                controlPanel.getHeight() - 6;
+        int width  = controlPanel.getWidth() -
+                (themePanelCanvas.isVisible() ? themePanelCanvas.getWidth() + 4 : 0);
+
+        // Set size and position of Map
+        String w = String.valueOf(width) + "px";
+        String h = String.valueOf(height) + "px";
+        GWT.log("width=" + w);
+
+        mapPanel.setSize(w, h);
+        if(themePanelCanvas.isVisible()) {
+            absPan.setWidgetPosition(mapPanel, themePanelCanvas.getWidth() + 2, 0);
+        }
+        else {
+            absPan.setWidgetPosition(mapPanel, 0, 0);
+        }
+
+        // Set bounds of ThemePanelCanvas
+        themePanelCanvas.setSize(themePanelCanvas.getWidthAsString(), String.valueOf(height + 2) + "px");
+    }
+
+
     protected void initBarriers() {
         Vector vector = floodMap.getBarrierLayer();
         vector.addVectorFeatureAddedListener(
@@ -573,8 +597,9 @@
 
     public void toogleThemePanel() {
         this.themePanelCanvas.setVisible(!themePanelCanvas.isVisible());
-        this.themePanelCanvas.setSize(themePanelCanvas.getWidthAsString(),
-                                       themePanelCanvas.getHeightAsString());
+
+        // Trigger resize event handler
+        doLayout();
     }
 
 
--- a/flys-client/src/main/java/de/intevation/flys/client/client/ui/map/MapPanel.java	Mon Nov 05 14:39:48 2012 +0100
+++ b/flys-client/src/main/java/de/intevation/flys/client/client/ui/map/MapPanel.java	Mon Nov 05 15:17:58 2012 +0100
@@ -32,7 +32,8 @@
                 bbox.getLowerX(),
                 bbox.getLowerY(),
                 bbox.getUpperX(),
-                bbox.getUpperY()));
+                bbox.getUpperY()),
+                "100%", "100%");
 
         initLayout();
     }
@@ -51,6 +52,7 @@
         wrapper.setWidth100();
         wrapper.setHeight100();
         wrapper.addChild(mapArea);
+        wrapper.setRedrawOnResize(true);
 
         toolbar = new MapToolbar(floodMap, digitizeEnabled);
 

http://dive4elements.wald.intevation.org