Mercurial > dive4elements > river
changeset 800:95cc560ce7c4
Added map controls for digitizing and removing barriers.
flys-client/trunk@2321 c6561f87-3c4e-4783-a992-168aeb5c3f6f
line wrap: on
line diff
--- a/flys-client/src/main/java/de/intevation/flys/client/client/FLYSConstants.java Mon Jul 11 13:29:57 2011 +0000 +++ b/flys-client/src/main/java/de/intevation/flys/client/client/FLYSConstants.java Tue Jul 12 13:43:49 2011 +0000 @@ -327,5 +327,23 @@ String bottom_edge(); String top_edge(); + + // MAP RELATED STRINGS + + String digitize(); + + String pipe1(); + + String pipe2(); + + String ditch(); + + String dam(); + + String ring_dike(); + + String selectFeature(); + + String removeFeature(); } // vim:set ts=4 sw=4 si et sta sts=4 fenc=utf8 :
--- a/flys-client/src/main/java/de/intevation/flys/client/client/FLYSConstants.properties Mon Jul 11 13:29:57 2011 +0000 +++ b/flys-client/src/main/java/de/intevation/flys/client/client/FLYSConstants.properties Tue Jul 12 13:43:49 2011 +0000 @@ -166,3 +166,13 @@ error_chart_info_service = Could not fetch meta information of the chart. error_no_meta_data_found = No meta data found. + +## map related strings +digitize = images/digitize.png +pipe1 = Pipe1 +pipe2 = Pipe12 +ditch = Ditch +dam = Dam +ring_dike = Ringdike +selectFeature = images/selectFeature.png +removeFeature = images/removeFeature.png
--- a/flys-client/src/main/java/de/intevation/flys/client/client/FLYSConstants_de.properties Mon Jul 11 13:29:57 2011 +0000 +++ b/flys-client/src/main/java/de/intevation/flys/client/client/FLYSConstants_de.properties Tue Jul 12 13:43:49 2011 +0000 @@ -166,3 +166,13 @@ error_chart_info_service = Meta Informationen des Diagramms konnten nicht geladen werden. error_no_meta_data_found = Keine Meta-Daten gefunden. + +## map related strings +digitize = images/digitize.png +pipe1 = Rohr1 +pipe2 = Rohr2 +ditch = Graben +dam = Damm +ring_dike = Ringdeich +selectFeature = images/selectFeature.png +removeFeature = images/removeFeature.png
--- a/flys-client/src/main/java/de/intevation/flys/client/client/FLYSConstants_en.properties Mon Jul 11 13:29:57 2011 +0000 +++ b/flys-client/src/main/java/de/intevation/flys/client/client/FLYSConstants_en.properties Tue Jul 12 13:43:49 2011 +0000 @@ -161,3 +161,13 @@ error_chart_info_service = Could not fetch meta information of the chart. error_no_meta_data_found = No meta data found. + +## map related strings +digitize = images/digitize.png +pipe1 = Pipe1 +pipe2 = Pipe12 +ditch = Ditch +dam = Dam +ring_dike = Ringdike +selectFeature = images/selectFeature.png +removeFeature = images/removeFeature.png
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/flys-client/src/main/java/de/intevation/flys/client/client/ui/map/DrawControl.java Tue Jul 12 13:43:49 2011 +0000 @@ -0,0 +1,182 @@ +package de.intevation.flys.client.client.ui.map; + +import java.util.LinkedHashMap; + +import com.google.gwt.core.client.GWT; + +import com.smartgwt.client.types.SelectionType; +import com.smartgwt.client.widgets.ImgButton; +import com.smartgwt.client.widgets.events.ClickEvent; +import com.smartgwt.client.widgets.events.ClickHandler; +import com.smartgwt.client.widgets.form.DynamicForm; +import com.smartgwt.client.widgets.form.fields.SelectItem; +import com.smartgwt.client.widgets.form.fields.FormItem; +import com.smartgwt.client.widgets.form.fields.events.ChangedEvent; +import com.smartgwt.client.widgets.form.fields.events.ChangedHandler; +import com.smartgwt.client.widgets.layout.HLayout; + +import org.gwtopenmaps.openlayers.client.Map; +import org.gwtopenmaps.openlayers.client.control.Control; +import org.gwtopenmaps.openlayers.client.control.DrawFeature; +import org.gwtopenmaps.openlayers.client.handler.Handler; +import org.gwtopenmaps.openlayers.client.handler.PathHandler; +import org.gwtopenmaps.openlayers.client.handler.PolygonHandler; +import org.gwtopenmaps.openlayers.client.layer.Vector; + +import de.intevation.flys.client.client.FLYSConstants; +import de.intevation.flys.client.client.utils.EnableDisableCmd; + + +public class DrawControl extends HLayout { + + public static final String BARRIER_PIPE1 = "pipe1"; + public static final String BARRIER_PIPE2 = "pipe2"; + public static final String BARRIER_DITCH = "ditch"; + public static final String BARRIER_DAM = "dam"; + public static final String BARRIER_RINGDIKE = "ring_dike"; + + public static final String FIELD_BARRIER_TYPE = "field_barrier_type"; + + + protected FLYSConstants MSG = GWT.create(FLYSConstants.class); + + protected EnableDisableCmd cmd; + + protected ImgButton button; + protected DynamicForm form; + + protected Map map; + protected Vector layer; + + protected Control control; + + + public DrawControl(Map map, Vector layer, EnableDisableCmd cmd) { + this.map = map; + this.layer = layer; + this.cmd = cmd; + + initialize(); + } + + + protected void initialize() { + setWidth(100); + setMembersMargin(0); + + button = new ImgButton(); + + String baseUrl = GWT.getHostPageBaseURL(); + button.setSrc(baseUrl + MSG.digitize()); + button.setActionType(SelectionType.CHECKBOX); + button.setSize(20); + button.setShowRollOver(false); + button.setSelected(false); + + button.addClickHandler(new ClickHandler() { + public void onClick(ClickEvent e) { + if (button.isSelected()) { + cmd.enable(); + } + else { + cmd.disable(); + } + } + }); + + form = new DynamicForm(); + form.setWidth(75); + form.setTitlePrefix(""); + form.setTitleSuffix(""); + + LinkedHashMap<String, String> map = new LinkedHashMap<String, String>(); + map.put(BARRIER_PIPE1, MSG.getString(BARRIER_PIPE1)); + map.put(BARRIER_PIPE2, MSG.getString(BARRIER_PIPE2)); + map.put(BARRIER_DITCH, MSG.getString(BARRIER_DITCH)); + map.put(BARRIER_DAM, MSG.getString(BARRIER_DAM)); + map.put(BARRIER_RINGDIKE, MSG.getString(BARRIER_RINGDIKE)); + + SelectItem box = new SelectItem(FIELD_BARRIER_TYPE); + box.setTitle(""); + box.setWidth(75); + box.setValueMap(map); + box.addChangedHandler(new ChangedHandler() { + public void onChanged(ChangedEvent e) { + setSelectedControl(); + } + }); + + form.setFields(box); + + addMember(button); + addMember(form); + + activate(false); + } + + + protected String getSelectedType() { + return form.getValueAsString(FIELD_BARRIER_TYPE); + } + + + protected void removeControl() { + if (control != null) { + control.deactivate(); + map.removeControl(control); + } + } + + + protected void setSelectedControl() { + removeControl(); + + String type = getSelectedType(); + + if (type == null || type.length() == 0) { + return; + } + + if (type.equalsIgnoreCase(BARRIER_RINGDIKE)) { + control = createDrawPolygonControl(); + } + else { + control = createDrawLineControl(); + } + + map.addControl(control); + control.activate(); + } + + + protected Control createDrawControl(Handler handler) { + return new DrawFeature(layer, handler); + } + + + protected Control createDrawPolygonControl() { + return createDrawControl(new PolygonHandler()); + } + + + protected Control createDrawLineControl() { + return createDrawControl(new PathHandler()); + } + + + public void activate(boolean activate) { + FormItem item = form.getField(FIELD_BARRIER_TYPE); + + if (activate) { + button.select(); + item.enable(); + setSelectedControl(); + } + else { + removeControl(); + button.deselect(); + item.disable(); + } + } +} +// vim:set ts=4 sw=4 si et sta sts=4 fenc=utf8 :
--- a/flys-client/src/main/java/de/intevation/flys/client/client/ui/map/FloodMap.java Mon Jul 11 13:29:57 2011 +0000 +++ b/flys-client/src/main/java/de/intevation/flys/client/client/ui/map/FloodMap.java Tue Jul 12 13:43:49 2011 +0000 @@ -3,14 +3,18 @@ import org.gwtopenmaps.openlayers.client.Map; import org.gwtopenmaps.openlayers.client.MapOptions; import org.gwtopenmaps.openlayers.client.MapWidget; +import org.gwtopenmaps.openlayers.client.layer.Vector; import org.gwtopenmaps.openlayers.client.util.JObjectArray; import org.gwtopenmaps.openlayers.client.util.JSObject; public class FloodMap { + public static final String LAYER_BARRIERS = "vector_layer_barriers"; + protected MapWidget mapWidget; protected Map map; + protected Vector barrierLayer; public FloodMap() { @@ -39,6 +43,16 @@ } + public Vector getBarrierLayer() { + if (barrierLayer == null) { + barrierLayer = new Vector(LAYER_BARRIERS); + map.addLayer(barrierLayer); + } + + return barrierLayer; + } + + public void setSize(String width, String height) { mapWidget.setWidth(width); mapWidget.setHeight(height);
--- a/flys-client/src/main/java/de/intevation/flys/client/client/ui/map/MapOutputTab.java Mon Jul 11 13:29:57 2011 +0000 +++ b/flys-client/src/main/java/de/intevation/flys/client/client/ui/map/MapOutputTab.java Tue Jul 12 13:43:49 2011 +0000 @@ -56,14 +56,14 @@ rootLayout.setWidth100(); rootLayout.setMembersMargin(2); - controlPanel = createControlPanel(); - themePanel = createThemePanel(); - mapPanel = floodMap.getMapWidget(); - final Canvas wrapper = new Canvas(); wrapper.setWidth100(); wrapper.setHeight100(); + controlPanel = createControlPanel(wrapper); + themePanel = createThemePanel(); + mapPanel = floodMap.getMapWidget(); + final HorizontalPanel layout = new HorizontalPanel(); layout.setWidth("99%"); layout.setHeight("99%"); @@ -122,8 +122,8 @@ } - protected Canvas createControlPanel() { - return new MapToolbar(floodMap); + protected Canvas createControlPanel(Canvas wrapper) { + return new MapToolbar(floodMap, wrapper); }
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/flys-client/src/main/java/de/intevation/flys/client/client/ui/map/MapPositionPanel.java Tue Jul 12 13:43:49 2011 +0000 @@ -0,0 +1,70 @@ +package de.intevation.flys.client.client.ui.map; + +import com.smartgwt.client.widgets.Canvas; +import com.smartgwt.client.widgets.Label; +import com.smartgwt.client.widgets.events.MouseMoveEvent; +import com.smartgwt.client.widgets.events.MouseMoveHandler; +import com.smartgwt.client.widgets.layout.HLayout; + +import org.gwtopenmaps.openlayers.client.LonLat; +import org.gwtopenmaps.openlayers.client.Map; +import org.gwtopenmaps.openlayers.client.MapWidget; +import org.gwtopenmaps.openlayers.client.Pixel; + + +/** + * @author <a href="mailto:ingo.weinzierl@intevation.de">Ingo Weinzierl</a> + */ +public class MapPositionPanel extends HLayout { + + protected MapWidget mapWidget; + protected Map map; + + protected Label x; + protected Label y; + + + public MapPositionPanel(MapWidget mapWidget, final Canvas c) { + this.mapWidget = mapWidget; + this.map = mapWidget.getMap(); + + this.x = new Label(); + this.y = new Label(); + Label d = new Label("|"); + + setWidth(60); + setMembersMargin(2); + + x.setWidth(25); + y.setWidth(25); + d.setWidth(5); + + addMember(x); + addMember(d); + addMember(y); + + // TODO We should use the MousePosition control provided by + // GwtOpenLayers here instead of calculating the mouse pos manually. + c.addMouseMoveHandler(new MouseMoveHandler() { + public void onMouseMove(MouseMoveEvent e) { + int x = e.getX() - c.getPageLeft(); + int y = e.getY() - c.getPageTop(); + + LonLat point = map.getLonLatFromPixel(new Pixel(x, y)); + setX(point.lon()); + setY(point.lat()); + } + }); + } + + + protected void setX(double x) { + this.x.setContents(String.valueOf(x)); + } + + + protected void setY(double y) { + this.y.setContents(String.valueOf(y)); + } +} +// vim:set ts=4 sw=4 si et sta sts=4 fenc=utf8 :
--- a/flys-client/src/main/java/de/intevation/flys/client/client/ui/map/MapToolbar.java Mon Jul 11 13:29:57 2011 +0000 +++ b/flys-client/src/main/java/de/intevation/flys/client/client/ui/map/MapToolbar.java Tue Jul 12 13:43:49 2011 +0000 @@ -3,6 +3,7 @@ import com.google.gwt.core.client.GWT; import com.smartgwt.client.types.SelectionType; +import com.smartgwt.client.widgets.Canvas; import com.smartgwt.client.widgets.ImgButton; import com.smartgwt.client.widgets.events.ClickEvent; import com.smartgwt.client.widgets.events.ClickHandler; @@ -10,9 +11,15 @@ import org.gwtopenmaps.openlayers.client.Map; import org.gwtopenmaps.openlayers.client.control.DragPan; +import org.gwtopenmaps.openlayers.client.control.SelectFeature; +import org.gwtopenmaps.openlayers.client.control.SelectFeatureOptions; import org.gwtopenmaps.openlayers.client.control.ZoomBox; +import org.gwtopenmaps.openlayers.client.feature.VectorFeature; +import org.gwtopenmaps.openlayers.client.layer.Vector; +import org.gwtopenmaps.openlayers.client.util.Attributes; import de.intevation.flys.client.client.FLYSConstants; +import de.intevation.flys.client.client.utils.EnableDisableCmd; /** @@ -20,20 +27,28 @@ */ public class MapToolbar extends HLayout { - /** The message class that provides i18n strings.*/ + public static final String MARK_TO_DELETE = "mark.delete"; + protected FLYSConstants MSG = GWT.create(FLYSConstants.class); - protected FloodMap floodMap; - protected DragPan pan; - protected ZoomBox zoomBox; + protected FloodMap floodMap; + protected DragPan pan; + protected ZoomBox zoomBox; + protected SelectFeature selectFeature; protected ImgButton zoomToMaxButton; protected ImgButton zoomBoxButton; protected ImgButton zoomOutButton; protected ImgButton panButton; + protected ImgButton selectButton; + protected ImgButton removeButton; + + protected DrawControl drawControl; + + protected Canvas position; - public MapToolbar(FloodMap floodMap) { + public MapToolbar(FloodMap floodMap, Canvas wrapper) { super(); setWidth100(); @@ -44,15 +59,27 @@ this.floodMap = floodMap; + Canvas spacer = new Canvas(); + spacer.setWidth("*"); + zoomToMaxButton = createMaxExtentControl(); zoomBoxButton = createZoomBoxControl(); zoomOutButton = createZoomOutControl(); panButton = createPanControl(); + position = createMousePosition(wrapper); + drawControl = createDrawControl(); + selectButton = createSelectFeatureControl(); + removeButton = createRemoveFeatureControl(); addMember(zoomToMaxButton); addMember(zoomBoxButton); addMember(zoomOutButton); addMember(panButton); + addMember(drawControl); + addMember(selectButton); + addMember(removeButton); + addMember(spacer); + addMember(position); } @@ -85,21 +112,74 @@ } - protected ImgButton createMaxExtentControl() { - ImgButton zoomToMax = new ImgButton(); + protected void activateDrawFeature(boolean activate) { + drawControl.activate(activate); + } + + + protected void activateSelectFeature(boolean activate) { + if (activate) { + selectButton.select(); + selectFeature.activate(); + } + else { + selectButton.deselect(); + selectFeature.deactivate(); + } + } + + + protected ImgButton createButton(String img, ClickHandler handler) { + ImgButton btn = new ImgButton(); String baseUrl = GWT.getHostPageBaseURL(); - zoomToMax.setSrc(baseUrl + MSG.zoom_all()); - zoomToMax.setWidth(20); - zoomToMax.setHeight(20); - zoomToMax.setShowDown(false); - zoomToMax.setShowRollOver(false); - zoomToMax.setShowDisabled(false); - zoomToMax.setShowDisabledIcon(true); - zoomToMax.setShowDownIcon(false); - zoomToMax.setShowFocusedIcon(false); + btn.setSrc(baseUrl + img); + btn.setWidth(20); + btn.setHeight(20); + btn.setShowDown(false); + btn.setShowRollOver(false); + btn.setShowDisabled(false); + btn.setShowDisabledIcon(true); + btn.setShowDownIcon(false); + btn.setShowFocusedIcon(false); - zoomToMax.addClickHandler(new ClickHandler() { + if (handler != null) { + btn.addClickHandler(handler); + } + + return btn; + } + + + protected ImgButton createToggleButton( + String img, + final EnableDisableCmd cmd + ) { + final ImgButton btn = new ImgButton(); + + String baseUrl = GWT.getHostPageBaseURL(); + btn.setSrc(baseUrl + img); + btn.setActionType(SelectionType.CHECKBOX); + btn.setSize(20); + btn.setShowRollOver(false); + btn.setSelected(false); + btn.addClickHandler(new ClickHandler() { + public void onClick(ClickEvent e) { + if (btn.isSelected()) { + cmd.enable(); + } + else { + cmd.disable(); + } + } + }); + + return btn; + } + + + protected ImgButton createMaxExtentControl() { + ImgButton zoomToMax = createButton(MSG.zoom_all(), new ClickHandler() { public void onClick(ClickEvent event) { floodMap.getMap().zoomToMaxExtent(); } @@ -112,28 +192,21 @@ protected ImgButton createZoomBoxControl() { zoomBox = new ZoomBox(); - final ImgButton button = new ImgButton(); - - String baseUrl = GWT.getHostPageBaseURL(); - button.setSrc(baseUrl + MSG.zoom_in()); - button.setActionType(SelectionType.CHECKBOX); - button.setSize(20); - button.setShowRollOver(false); - button.setSelected(false); + EnableDisableCmd cmd = new EnableDisableCmd() { + public void enable() { + activateZoomBox(true); + activatePan(false); + activateDrawFeature(false); + activateSelectFeature(false); + } - button.addClickHandler(new ClickHandler() { - public void onClick(ClickEvent e) { - if (button.isSelected()) { - activatePan(false); - activateZoomBox(true); - } - else { - activateZoomBox(false); - } + public void disable() { + activateZoomBox(false); } - }); + }; - Map map = getMap(); + ImgButton button = createToggleButton(MSG.zoom_in(), cmd); + Map map = getMap(); map.addControl(zoomBox); return button; @@ -141,20 +214,7 @@ protected ImgButton createZoomOutControl() { - ImgButton zoomOut = new ImgButton(); - - String baseUrl = GWT.getHostPageBaseURL(); - zoomOut.setSrc(baseUrl + MSG.zoom_out()); - zoomOut.setWidth(20); - zoomOut.setHeight(20); - zoomOut.setShowDown(false); - zoomOut.setShowRollOver(false); - zoomOut.setShowDisabled(false); - zoomOut.setShowDisabledIcon(true); - zoomOut.setShowDownIcon(false); - zoomOut.setShowFocusedIcon(false); - - zoomOut.addClickHandler(new ClickHandler() { + ImgButton zoomOut = createButton(MSG.zoom_out(), new ClickHandler() { public void onClick(ClickEvent event) { Map map = floodMap.getMap(); int level = map.getZoom(); @@ -171,32 +231,120 @@ protected ImgButton createPanControl() { pan = new DragPan(); - - final ImgButton button = new ImgButton(); + getMap().addControl(pan); - String baseUrl = GWT.getHostPageBaseURL(); - button.setSrc(baseUrl + MSG.pan()); - button.setActionType(SelectionType.CHECKBOX); - button.setSize(20); - button.setShowRollOver(false); - button.setSelected(false); + EnableDisableCmd cmd = new EnableDisableCmd() { + public void enable() { + activateZoomBox(false); + activatePan(true); + activateDrawFeature(false); + activateSelectFeature(false); + } - button.addClickHandler(new ClickHandler() { - public void onClick(ClickEvent e) { - if (button.isSelected()) { - activateZoomBox(false); - activatePan(true); + public void disable() { + activatePan(false); + } + }; + + final ImgButton button = createToggleButton(MSG.pan(), cmd); + + return button; + } + + + protected DrawControl createDrawControl() { + EnableDisableCmd cmd = new EnableDisableCmd() { + public void enable() { + activateZoomBox(false); + activatePan(false); + activateDrawFeature(true); + activateSelectFeature(false); + } + + public void disable() { + activateDrawFeature(false); + } + }; + return new DrawControl(getMap(), floodMap.getBarrierLayer(), cmd); + } + + + protected ImgButton createSelectFeatureControl() { + SelectFeatureOptions opts = new SelectFeatureOptions(); + + // VectorFeatures selected by the SelectFeature control are manually + // marked with the string "mark.delete". The control to remove selected + // features makes use of this string to determine if the feature should + // be deleted (is marked) or not. Actually, we would like to use the + // OpenLayers native mechanism to select features, but for some reason + // this doesn't work here. After a feature has been selected, the layer + // still has no selected features. + opts.onSelect(new SelectFeature.SelectFeatureListener() { + public void onFeatureSelected(VectorFeature feature) { + Attributes attr = feature.getAttributes(); + attr.setAttribute(MARK_TO_DELETE, 1); + } + }); + + opts.onUnSelect(new SelectFeature.UnselectFeatureListener() { + public void onFeatureUnselected(VectorFeature feature) { + Attributes attr = feature.getAttributes(); + attr.setAttribute(MARK_TO_DELETE, 0); + } + }); + + selectFeature = new SelectFeature(floodMap.getBarrierLayer(), opts); + getMap().addControl(selectFeature); + + EnableDisableCmd cmd = new EnableDisableCmd() { + public void enable() { + activateDrawFeature(false); + activatePan(false); + activateZoomBox(false); + activateSelectFeature(true); + } + + public void disable() { + activateSelectFeature(false); + } + }; + + ImgButton button = createToggleButton(MSG.selectFeature(), cmd); + + return button; + } + + + protected ImgButton createRemoveFeatureControl() { + ImgButton remove = createButton(MSG.removeFeature(),new ClickHandler() { + public void onClick(ClickEvent event) { + Vector barriers = floodMap.getBarrierLayer(); + VectorFeature[] features = barriers.getFeatures(); + + if (features == null || features.length == 0) { + return; } - else { - activatePan(false); + + for (int i = features.length-1; i >= 0; i--) { + VectorFeature feature = features[i]; + + Attributes attr = feature.getAttributes(); + int del = attr.getAttributeAsInt(MARK_TO_DELETE); + + if (del == 1) { + barriers.removeFeature(feature); + feature.destroy(); + } } } }); - Map map = getMap(); - map.addControl(pan); + return remove; + } - return button; + + protected Canvas createMousePosition(Canvas mapWrapper) { + return new MapPositionPanel(floodMap.getMapWidget(), mapWrapper); } } // vim:set ts=4 sw=4 si et sta sts=4 fenc=utf8 :
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/flys-client/src/main/java/de/intevation/flys/client/client/utils/EnableDisableCmd.java Tue Jul 12 13:43:49 2011 +0000 @@ -0,0 +1,13 @@ +package de.intevation.flys.client.client.utils; + + +/** + * @author <a href="mailto:ingo.weinzierl@intevation.de">Ingo Weinzierl</a> + */ +public interface EnableDisableCmd { + + void enable(); + + void disable(); +} +// vim:set ts=4 sw=4 si et sta sts=4 fenc=utf8 :