gCubeSystem
/
geoportal-data-viewer-app
14
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

mock of layer switcher GUI

This commit is contained in:
Francesco Mangiacrapa 2021-10-08 15:09:35 +02:00
parent bbc38bc2df
commit 0914769dca
6 changed files with 275 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/GeoportalDataViewer.java
View File

@ -23,6 +23,7 @@ import org.gcube.portlets.user.geoportaldataviewer.client.events.ZoomOutOverMini
import org.gcube.portlets.user.geoportaldataviewer.client.gis.ExtentWrapped;
import org.gcube.portlets.user.geoportaldataviewer.client.gis.MapUtils;
import org.gcube.portlets.user.geoportaldataviewer.client.ui.GeonaDataViewMainPanel;
import org.gcube.portlets.user.geoportaldataviewer.client.ui.dandd.DragDropLayer;
import org.gcube.portlets.user.geoportaldataviewer.client.util.URLUtil;
import org.gcube.portlets.user.geoportaldataviewer.shared.gis.GeoQuery;
@ -37,6 +38,7 @@ import com.google.gwt.event.shared.HandlerManager;
import com.google.gwt.user.client.Timer;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.RootPanel;
import ol.Coordinate;
@ -87,10 +89,24 @@ public class GeoportalDataViewer implements EntryPoint {
* This is the entry point method.
*/
public void onModuleLoad() {
FlowPanel fp = new FlowPanel();
for (int i = 0; i < 10; i++) {
DragDropLayer dandd = new DragDropLayer("Layer: "+i, true, true);
fp.add(dandd);
}
RootPanel.get(APP_DIV).add(fp);
mainPanel = new GeonaDataViewMainPanel(applicationBus, getClientHeight());
RootPanel.get(APP_DIV).add(mainPanel);
//RootPanel.get(APP_DIV).add(mainPanel);
Scheduler.get().scheduleDeferred(new ScheduledCommand() {

130
src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/dandd/DragDropLayer.java Normal file
View File

@ -0,0 +1,130 @@
package org.gcube.portlets.user.geoportaldataviewer.client.ui.dandd;
import com.github.gwtbootstrap.client.ui.Button;
import com.github.gwtbootstrap.client.ui.CheckBox;
import com.github.gwtbootstrap.client.ui.constants.IconType;
import com.google.gwt.core.client.GWT;
import com.google.gwt.dom.client.Element;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.event.dom.client.DragLeaveEvent;
import com.google.gwt.event.dom.client.DragLeaveHandler;
import com.google.gwt.event.dom.client.DragOverEvent;
import com.google.gwt.event.dom.client.DragOverHandler;
import com.google.gwt.event.dom.client.DragStartEvent;
import com.google.gwt.event.dom.client.DragStartHandler;
import com.google.gwt.event.dom.client.DropEvent;
import com.google.gwt.event.dom.client.DropHandler;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.SimplePanel;
import com.google.gwt.user.client.ui.Widget;
public class DragDropLayer extends FlowPanel {
private static DragDropLayer dragging = null;
private static DragDropLayer draggingTarget = null;
final boolean droppable;
private Label label;
private CheckBox checkBoxVisibility = new CheckBox();
private Button button = new Button();
public DragDropLayer(String text, boolean draggable, boolean droppable) {
this.label = new Label(text);
getElement().getStyle().setMarginTop(5, Unit.PX);
getElement().getStyle().setMarginBottom(10, Unit.PX);
if (draggable) {
initDrag();
}
if (droppable) {
initDrop();
}
this.droppable = droppable;
if (droppable) {
button.addStyleName("droppable");
} else if (draggable) {
button.addStyleName("draggable");
}
RangeSlider rs = new RangeSlider();
FlexTable ft = new FlexTable();
ft.setWidget(0, 0, button);
checkBoxVisibility.getElement().getStyle().setMarginLeft(10, Unit.PX);
ft.setWidget(0, 1, checkBoxVisibility);
ft.setWidget(0, 2, label);
ft.setWidget(1, 2, new SimplePanel(rs));
add(ft);
button.setIcon(IconType.MOVE);
}
private void initDrag() {
button.getElement().setDraggable(Element.DRAGGABLE_TRUE);
addDomHandler(new DragStartHandler() {
@Override
public void onDragStart(DragStartEvent event) {
dragging = DragDropLayer.this;
event.setData("ID", "UniqueIdentifier");
event.getDataTransfer().setDragImage(getElement(), 10, 10);
}
}, DragStartEvent.getType());
}
private void initDrop() {
addDomHandler(new DragOverHandler() {
@Override
public void onDragOver(DragOverEvent event) {
button.addStyleName("dropping-over");
GWT.log("drag over");
draggingTarget = (DragDropLayer) event.getSource();
}
}, DragOverEvent.getType());
addDomHandler(new DragLeaveHandler() {
@Override
public void onDragLeave(DragLeaveEvent event) {
button.removeStyleName("dropping-over");
GWT.log("drag leave");
// draggingTarget = (DragDropLayer) event.getSource();
}
}, DragLeaveEvent.getType());
addDomHandler(new DropHandler() {
@Override
public void onDrop(DropEvent event) {
event.preventDefault();
Object dropTarget = event.getSource();
GWT.log("on drop");
button.removeStyleName("dropping-over");
if (dragging != null) {
Widget target = null;
Widget source = null;
FlowPanel tree = (FlowPanel) DragDropLayer.this.getParent();
source = dragging;
int sourceIndex = tree.getWidgetIndex(source);
int targetIndex = tree.getWidgetIndex(draggingTarget);
GWT.log("sourceIndex: " + sourceIndex);
GWT.log("targetIndex: " + targetIndex);
if (sourceIndex != targetIndex && targetIndex > 0) {
tree.remove(source);
target = tree;
if (source != null && target != null) {
tree.insert(source, targetIndex);
// target.setState(true);
}
dragging = null;
}
}
}
}, DropEvent.getType());
}
}

25
src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/dandd/LayerContainer.java Normal file
View File

@ -0,0 +1,25 @@
package org.gcube.portlets.user.geoportaldataviewer.client.ui.dandd;
import com.github.gwtbootstrap.client.ui.CheckBox;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
public class LayerContainer extends FlowPanel{
private CheckBox checkBoxVisibility = new CheckBox();
private Label label;
private RangeSlider rs = new RangeSlider();
private HorizontalPanel hp = new HorizontalPanel();
private DragDropLayer dd = new DragDropLayer(DEBUG_ID_PREFIX, true, true);
public LayerContainer(String layerName) {
add(dd);
hp.add(checkBoxVisibility);
label = new Label(layerName);
hp.add(label);
add(hp);
add(rs);
}
}

30
src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/dandd/RangeSlider.java Normal file
View File

@ -0,0 +1,30 @@
package org.gcube.portlets.user.geoportaldataviewer.client.ui.dandd;
import com.google.gwt.core.client.GWT;
import com.google.gwt.dom.client.Element;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget;
public class RangeSlider extends Composite {
private static RangeSliderUiBinder uiBinder = GWT.create(RangeSliderUiBinder.class);
interface RangeSliderUiBinder extends UiBinder<Widget, RangeSlider> {
}
public RangeSlider() {
initWidget(uiBinder.createAndBindUi(this));
}
@UiField
Element theSlider;
public RangeSlider(String firstName) {
initWidget(uiBinder.createAndBindUi(this));
theSlider.addClassName("slider");
}
}

16
src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/dandd/RangeSlider.ui.xml Normal file
View File

@ -0,0 +1,16 @@
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:style>
.important {
font-weight: bold;
}
.slidecontainer {
width: 100%;
}
</ui:style>
<g:HTMLPanel addStyleNames="{style.slidecontainer}">
<input type="range" min="1" max="100" value="50" class="slider" ui:field="theSlider"></input>
</g:HTMLPanel>
</ui:UiBinder>

57
src/main/webapp/GeoportalDataViewer.css
View File

@ -276,4 +276,61 @@ body {
.table-feature tr:first-child {
font-weight: bold;
}
.dropping-over {
background-color: #fcfcfc;
opacity: 0.4;
}
.droppable:not(:hover), .droppable:not(:active) {
border: 0px !important;
box-shadow: none !important;
}
.dropping-leave {
border: 0px !important;
box-shadow: 0px !important;
}
.droppable:hover, .droppable:active {
padding-left: 15px;
cursor: move; /* fallback if grab cursor is unsupported */
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 8px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 12px;
height: 12px;
border-radius: 50%;
background: #04AA6D;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 12px;
height: 12px;
border-radius: 50%;
background: #04AA6D;
cursor: pointer;
}