chore: append drag image on attach (#20123)

Postpone moment when virtual child element is created and added to allow setting non-attached drag source itself as a drag image. RelatedTo: #6793
vaadin · Oct 3, 2024 · 1ebd400 · 1ebd400
1 parent 21b6600
commit 1ebd400
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 14 deletions.
diff --git a/flow-dnd/src/main/java/com/vaadin/flow/component/dnd/DragSource.java b/flow-dnd/src/main/java/com/vaadin/flow/component/dnd/DragSource.java
@@ -358,7 +358,19 @@ default void setDragImage(Component dragImage, int offsetX, int offsetY) {
             }
         }
         if (dragImage != null && !dragImage.isAttached()) {
-            getDraggableElement().appendVirtualChild(dragImage.getElement());
+            if (!getDragSourceComponent().isAttached()) {
+                getDragSourceComponent().addAttachListener(event -> {
+                    if (!dragImage.isAttached()
+                            && dragImage.getParent().isEmpty()) {
+                        getDraggableElement()
+                                .appendVirtualChild(dragImage.getElement());
+                    }
+                    event.unregisterListener();
+                });
+            } else {
+                getDraggableElement()
+                        .appendVirtualChild(dragImage.getElement());
+            }
         }
         ComponentUtil.setData(getDragSourceComponent(),
                 DndUtil.DRAG_SOURCE_IMAGE, dragImage);

diff --git a/flow-tests/test-root-context/src/main/java/com/vaadin/flow/uitest/ui/DnDView.java b/flow-tests/test-root-context/src/main/java/com/vaadin/flow/uitest/ui/DnDView.java
@@ -41,13 +41,15 @@ public class DnDView extends Div {
     private boolean data;
     private boolean dragImage;
     private Component image = new Image("/images/gift.png", "Gift");
+    private DragSource<Div> dragSource;
 
     public DnDView() {
         setWidth("1000px");
         setHeight("800px");
         getStyle().set("display", "flex");
 
         Div startLane = createLane("start");
+        Component noEffectsDraggableBox = createDraggableBox(null);
 
         eventLog = new Div();
         eventLog.add(new Text("Events:"));
@@ -60,33 +62,47 @@ public DnDView() {
             data = !data;
             event.getSource().setText("Data: " + data);
         }));
-        NativeButton toggleImage = new NativeButton("Toggle image", event -> {
-            if (image instanceof Image) {
-                image = event.getSource();
-            } else {
-                image = new Image("/images/gift.png", "Gift");
-            }
-            setDragImage(startLane, image);
-        });
-        toggleImage.setEnabled(false);
-        toggleImage.setId("button-toggle-image");
+        NativeButton toggleThreeImages = new NativeButton("Toggle image",
+                event -> {
+                    if (image instanceof Image) {
+                        image = event.getSource();
+                    } else if (image == event.getSource()) {
+                        image = noEffectsDraggableBox;
+                    } else {
+                        image = new Image("/images/gift.png", "Gift");
+                    }
+                    setDragImage(startLane, image);
+                });
+        toggleThreeImages.setEnabled(false);
+        toggleThreeImages.setId("button-toggle-image");
+        NativeButton addDragSourceWithImage = new NativeButton(
+                "DragImage: add DragSource", event -> {
+                    dragSource.getDragSourceComponent()
+                            .setId("drag-source-with-image");
+                    dragSource.setDragImage(
+                            new Image("/images/gift.png", "Gift"));
+                    add(dragSource.getDragSourceComponent());
+                    eventLog.remove(event.getSource());
+                });
+        addDragSourceWithImage.setId("button-add-drag-source-with-drag-image");
         NativeButton toggleDragImageEnabled = new NativeButton(
                 "DragImage: " + dragImage, event -> {
                     dragImage = !dragImage;
-                    toggleImage.setEnabled(dragImage);
+                    toggleThreeImages.setEnabled(dragImage);
                     event.getSource().setText("DragImage: " + dragImage);
                     setDragImage(startLane, image);
                 });
         toggleDragImageEnabled.setId("button-toggle-drag-image-enabled");
         eventLog.add(toggleDragImageEnabled);
-        eventLog.add(toggleImage);
+        eventLog.add(toggleThreeImages);
+        eventLog.add(addDragSourceWithImage);
         eventLog.setHeightFull();
         eventLog.setWidth("400px");
         eventLog.getStyle().set("display", "inline-block").set("border",
                 "2px " + "solid");
         add(eventLog);
 
-        startLane.add(createDraggableBox(null));
+        startLane.add(noEffectsDraggableBox);
         Stream.of(EffectAllowed.values()).map(this::createDraggableBox)
                 .forEach(startLane::add);
 
@@ -108,6 +124,12 @@ public DnDView() {
 
         add(startLane, noEffectLane, copyDropLane, moveDropLane, linkDropLane,
                 noneDropLane, deactivatedLane);
+
+        dragSource = DragSource.create(new Div("DragSource"));
+        dragSource.addDragStartListener(event -> {
+            addLogEntry("Start: " + event.getComponent().getText());
+            addLogEntry("DragImage: " + dragSource.getDragImage().getElement());
+        });
     }
 
     private void setDragImage(Div startLane, Component image) {

diff --git a/flow-tests/test-root-context/src/test/java/com/vaadin/flow/uitest/ui/DnDIT.java b/flow-tests/test-root-context/src/test/java/com/vaadin/flow/uitest/ui/DnDIT.java
@@ -175,6 +175,44 @@ public void testSetDragImage_visibleComponentInViewportIsClearedWithNull() {
                 getEventlog(2).getText());
     }
 
+    @Test
+    public void testSetDragImage_withDragSourceAsDragImage() {
+        open();
+
+        clickElementWithJs("button-toggle-drag-image-enabled");
+        clickElementWithJs("button-toggle-image");
+        clickElementWithJs("button-toggle-image");
+
+        TestBenchElement boxElement = getBoxElement("no-effect");
+        clearEvents();
+        drag(boxElement);
+
+        // need to wait for roundtrip, there should always be 3 events after dnd
+        // with drag image
+        waitForElementPresent(By.id("event-2"));
+
+        TestBenchElement eventlog = getEventlog(2);
+        String expected = "2: DragImage: <div id=\"box-no-effect\" style=\"width:100px;border:1px solid;margin:10px;height:60px\"> no-effect </div>";
+        Assert.assertEquals("Invalid drag image", expected, eventlog.getText());
+    }
+
+    @Test
+    public void testSetDragImage_withNotYetAttachedDragSource() {
+        open();
+
+        clickElementWithJs("button-add-drag-source-with-drag-image");
+
+        TestBenchElement boxElement = $(TestBenchElement.class)
+                .id("drag-source-with-image");
+        clearEvents();
+        drag(boxElement);
+
+        waitForElementPresent(By.id("event-2"));
+        TestBenchElement eventlog = getEventlog(2);
+        String expected = "2: DragImage: <img alt=\"Gift\" src=\"/images/gift.png\">";
+        Assert.assertEquals("Invalid drag image", expected, eventlog.getText());
+    }
+
     private void dragBoxToLanes(TestBenchElement boxElement,
             TestBenchElement laneElement, boolean dropShouldOccur) {
         clearEvents();