From 0914769dcaed0b4ac8d0d2b4e240f57b8520d075 Mon Sep 17 00:00:00 2001 From: "francesco.mangiacrapa" Date: Fri, 8 Oct 2021 15:09:35 +0200 Subject: [PATCH] mock of layer switcher GUI --- .../client/GeoportalDataViewer.java | 18 ++- .../client/ui/dandd/DragDropLayer.java | 130 ++++++++++++++++++ .../client/ui/dandd/LayerContainer.java | 25 ++++ .../client/ui/dandd/RangeSlider.java | 30 ++++ .../client/ui/dandd/RangeSlider.ui.xml | 16 +++ src/main/webapp/GeoportalDataViewer.css | 57 ++++++++ 6 files changed, 275 insertions(+), 1 deletion(-) create mode 100644 src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/dandd/DragDropLayer.java create mode 100644 src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/dandd/LayerContainer.java create mode 100644 src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/dandd/RangeSlider.java create mode 100644 src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/dandd/RangeSlider.ui.xml diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/GeoportalDataViewer.java b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/GeoportalDataViewer.java index ba5ee1a..0f7ec96 100644 --- a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/GeoportalDataViewer.java +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/GeoportalDataViewer.java @@ -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() { diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/dandd/DragDropLayer.java b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/dandd/DragDropLayer.java new file mode 100644 index 0000000..36e8c7e --- /dev/null +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/dandd/DragDropLayer.java @@ -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()); + } + +} diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/dandd/LayerContainer.java b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/dandd/LayerContainer.java new file mode 100644 index 0000000..8748578 --- /dev/null +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/dandd/LayerContainer.java @@ -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); + } + +} diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/dandd/RangeSlider.java b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/dandd/RangeSlider.java new file mode 100644 index 0000000..7e1c70d --- /dev/null +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/dandd/RangeSlider.java @@ -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 { + } + + public RangeSlider() { + initWidget(uiBinder.createAndBindUi(this)); + } + + @UiField + Element theSlider; + + public RangeSlider(String firstName) { + initWidget(uiBinder.createAndBindUi(this)); + + theSlider.addClassName("slider"); + + } +} diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/dandd/RangeSlider.ui.xml b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/dandd/RangeSlider.ui.xml new file mode 100644 index 0000000..574b54e --- /dev/null +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/dandd/RangeSlider.ui.xml @@ -0,0 +1,16 @@ + + + + .important { + font-weight: bold; + } + + .slidecontainer { + width: 100%; + } + + + + + \ No newline at end of file diff --git a/src/main/webapp/GeoportalDataViewer.css b/src/main/webapp/GeoportalDataViewer.css index c471d94..d5964c2 100644 --- a/src/main/webapp/GeoportalDataViewer.css +++ b/src/main/webapp/GeoportalDataViewer.css @@ -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; } \ No newline at end of file