From 594cabd5f859bb66eebf16491a41ccd2f7d527cc Mon Sep 17 00:00:00 2001 From: Pekka Hyvönen Date: Fri, 5 May 2017 12:39:32 +0300 Subject: Fix HTML5 DnD regression for FF (#9245) - Always set some drag data - Set the dropEffect on dragEnter and dragOver events on drop target - Send the dropEffect to server on drop event with disclaimer of current support - Remove _dragOverCriteria_ and use _dropCriteria_ for `dragenter`, `dragover` and `drop` criteria Tested manually basic DnD and Grid DnD on Mac with Chrome, Firefox, Safari. Safari is still missing drag image (regression). Tested manually basic DnD and Grid Dnd on Windows IE11 and Edge. Drop event for both is still not working properly #9174. --- .../tests/components/grid/GridDragAndDrop.java | 30 ++++++----- .../vaadin/tests/dnd/DragAndDropCardShuffle.java | 60 ++++++++++++++++------ 2 files changed, 60 insertions(+), 30 deletions(-) (limited to 'uitest/src') diff --git a/uitest/src/main/java/com/vaadin/tests/components/grid/GridDragAndDrop.java b/uitest/src/main/java/com/vaadin/tests/components/grid/GridDragAndDrop.java index 3fde1c6bf4..149dec92e3 100644 --- a/uitest/src/main/java/com/vaadin/tests/components/grid/GridDragAndDrop.java +++ b/uitest/src/main/java/com/vaadin/tests/components/grid/GridDragAndDrop.java @@ -22,6 +22,8 @@ import java.util.Set; import java.util.stream.Collectors; import java.util.stream.Stream; +import com.vaadin.annotations.Theme; +import com.vaadin.annotations.Widgetset; import com.vaadin.data.provider.ListDataProvider; import com.vaadin.server.VaadinRequest; import com.vaadin.shared.ui.dnd.DropEffect; @@ -41,6 +43,8 @@ import com.vaadin.ui.RadioButtonGroup; import elemental.json.Json; import elemental.json.JsonObject; +@Theme("valo") +@Widgetset("com.vaadin.DefaultWidgetSet") public class GridDragAndDrop extends AbstractTestUIWithLog { private Set draggedItems; @@ -61,13 +65,13 @@ public class GridDragAndDrop extends AbstractTestUIWithLog { grids.addComponents(left, right); // Selection modes - List selectionModes = Arrays.asList( - Grid.SelectionMode.SINGLE, Grid.SelectionMode.MULTI); + List selectionModes = Arrays + .asList(Grid.SelectionMode.SINGLE, Grid.SelectionMode.MULTI); RadioButtonGroup selectionModeSelect = new RadioButtonGroup<>( "Selection mode", selectionModes); selectionModeSelect.setSelectedItem(Grid.SelectionMode.SINGLE); - selectionModeSelect.addValueChangeListener(event -> left - .setSelectionMode(event.getValue())); + selectionModeSelect.addValueChangeListener( + event -> left.setSelectionMode(event.getValue())); // Drop locations List dropLocations = Arrays.asList(DropMode.values()); @@ -113,9 +117,8 @@ public class GridDragAndDrop extends AbstractTestUIWithLog { }); // Add drag start listener - dragSource.addGridDragStartListener(event -> - draggedItems = event.getDraggedItems() - ); + dragSource.addGridDragStartListener( + event -> draggedItems = event.getDraggedItems()); // Add drag end listener dragSource.addGridDragEndListener(event -> { @@ -148,18 +151,17 @@ public class GridDragAndDrop extends AbstractTestUIWithLog { List items = (List) dataProvider.getItems(); // Calculate the target row's index - int index = items.indexOf(event.getDropTargetRow()) + ( - event.getDropLocation() == DropLocation.BELOW - ? 1 : 0); + int index = items.indexOf(event.getDropTargetRow()) + + (event.getDropLocation() == DropLocation.BELOW ? 1 + : 0); // Add dragged items to the target Grid items.addAll(index, draggedItems); dataProvider.refreshAll(); - log("dragData=" + event.getDataTransferText() - + ", target=" - + event.getDropTargetRow().getFirstName() - + " " + event.getDropTargetRow().getLastName() + log("dragData=" + event.getDataTransferText() + ", target=" + + event.getDropTargetRow().getFirstName() + " " + + event.getDropTargetRow().getLastName() + ", location=" + event.getDropLocation()); } }); diff --git a/uitest/src/main/java/com/vaadin/tests/dnd/DragAndDropCardShuffle.java b/uitest/src/main/java/com/vaadin/tests/dnd/DragAndDropCardShuffle.java index 415dbf945d..8a136304aa 100644 --- a/uitest/src/main/java/com/vaadin/tests/dnd/DragAndDropCardShuffle.java +++ b/uitest/src/main/java/com/vaadin/tests/dnd/DragAndDropCardShuffle.java @@ -15,14 +15,24 @@ */ package com.vaadin.tests.dnd; +import java.util.ArrayList; +import java.util.List; + +import com.vaadin.annotations.Theme; +import com.vaadin.annotations.Widgetset; import com.vaadin.event.dnd.DragSourceExtension; import com.vaadin.event.dnd.DropTargetExtension; import com.vaadin.server.Page; import com.vaadin.server.VaadinRequest; +import com.vaadin.shared.ui.dnd.DropEffect; +import com.vaadin.shared.ui.dnd.EffectAllowed; import com.vaadin.tests.components.AbstractTestUIWithLog; import com.vaadin.ui.HorizontalLayout; import com.vaadin.ui.Label; +import com.vaadin.ui.NativeSelect; +@Theme("valo") +@Widgetset("com.vaadin.DefaultWidgetSet") public class DragAndDropCardShuffle extends AbstractTestUIWithLog { // Create cards @@ -34,8 +44,24 @@ public class DragAndDropCardShuffle extends AbstractTestUIWithLog { // Create desk private final HorizontalLayout desk = new HorizontalLayout(); + private final List> sources = new ArrayList<>(); + private final List> targets = new ArrayList<>(); + @Override protected void setup(VaadinRequest request) { + NativeSelect effectAllowed = new NativeSelect<>( + "Effect Allowed (source)"); + effectAllowed.setItems(EffectAllowed.values()); + effectAllowed.setValue(EffectAllowed.UNINITIALIZED); + effectAllowed.setEmptySelectionAllowed(false); + effectAllowed.addValueChangeListener(event -> sources + .forEach(source -> source.setEffectAllowed(event.getValue()))); + + NativeSelect dropEffect = new NativeSelect<>( + "Drop Effect (target)"); + dropEffect.setItems(DropEffect.values()); + dropEffect.addValueChangeListener(event -> targets + .forEach(target -> target.setDropEffect(event.getValue()))); // Create UI and add extensions desk.addComponents(ace, jack, queen, king); @@ -56,7 +82,7 @@ public class DragAndDropCardShuffle extends AbstractTestUIWithLog { addDragSourceExtension(king); addDropTargetExtension(king); - addComponent(desk); + addComponents(new HorizontalLayout(effectAllowed, dropEffect), desk); // Add styling setStyle(); @@ -70,7 +96,8 @@ public class DragAndDropCardShuffle extends AbstractTestUIWithLog { // Add listeners dragSource.addDragStartListener(event -> { event.getComponent().addStyleName("dragged"); - log(event.getComponent().getValue() + " dragstart"); + log(event.getComponent().getValue() + " dragstart, effectsAllowed=" + + event.getEffectAllowed()); }); dragSource.addDragEndListener(event -> { @@ -78,6 +105,8 @@ public class DragAndDropCardShuffle extends AbstractTestUIWithLog { log(event.getComponent().getValue() + " dragend, dropEffect=" + event.getDropEffect()); }); + + sources.add(dragSource); } private void addDropTargetExtension(Label target) { @@ -94,28 +123,27 @@ public class DragAndDropCardShuffle extends AbstractTestUIWithLog { // Swap source and target components desk.replaceComponent(target, source); - log(source.getValue() + " dropped onto " + event - .getComponent().getValue()); + log(event.getComponent().getValue() + " drop received " + + source.getValue() + ", dropEffect=" + + event.getDropEffect()); + } else { + log(event.getComponent().getValue() + + " drop received something else than card"); } }); }); + + targets.add(dropTarget); } private void setStyle() { Page.Styles styles = Page.getCurrent().getStyles(); - styles.add(".card {" - + "width: 150px;" - + "height: 200px;" - + "border: 1px solid black;" - + "border-radius: 7px;" - + "padding-left: 10px;" - + "color: red;" - + "font-weight: bolder;" - + "font-size: 25px;" - + "background-color: gainsboro;" - + "}"); - styles.add(".v-drag-over {border-style: dashed;}"); + styles.add(".card {" + "width: 150px;" + "height: 200px;" + + "border: 1px solid black;" + "border-radius: 7px;" + + "padding-left: 10px;" + "color: red;" + "font-weight: bolder;" + + "font-size: 25px;" + "background-color: gainsboro;" + "}"); + styles.add(".v-label-drag-center {border-style: dashed;}"); styles.add(".dragged {opacity: .4;}"); } -- cgit v1.2.3