Implement DnD reordering

data/Launcher.css

@@ -24,3 +24,31 @@ launcher image {
         transform: translatey(-20px);
     }
 }
+
+.move-right {
+    animation: move-right 300ms;
+    animation-direction: normal;
+}
+
+@keyframes move-right {
+    from {
+        transform: translatex(-60px);
+    }
+    to {
+        transform: translatex(0);
+    }
+}
+
+.move-left {
+    animation: move-left 300ms;
+    animation-direction: normal;
+}
+
+@keyframes move-left {
+    from {
+        transform: translatex(60px);
+    }
+    to {
+        transform: translatex(0);
+    }
+}

data/dock.gresource.xml

@@ -3,5 +3,6 @@
   <gresource prefix="/io/elementary/dock">
     <file compressed="true">MainWindow.css</file>
     <file compressed="true">Launcher.css</file>
+    <file compressed="true">poof.svg</file>
   </gresource>
 </gresources>

src/Launcher.vala

@@ -4,12 +4,18 @@
  */
 
 public class Dock.Launcher : Gtk.Button {
+    // Matches icon size and padding in Launcher.css
+    public const int ICON_SIZE = 48;
+    public const int PADDING = 6;
+
     public GLib.DesktopAppInfo app_info { get; construct; }
     public bool pinned { get; set; }
 
     public GLib.List<AppWindow> windows { get; private owned set; }
 
     private static Gtk.CssProvider css_provider;
+    private string css_class_name = "";
+    private uint animate_timeout_id = 0;
 
     public Launcher (GLib.DesktopAppInfo app_info) {
         Object (app_info: app_info);
@@ -33,9 +39,78 @@ public class Dock.Launcher : Gtk.Button {
         };
         image.get_style_context ().add_provider (css_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
 
-        child = image;
+        // Needed to work around DnD bug where it
+        // would stop working once the button got clicked
+        var box = new Gtk.Box (VERTICAL, 0);
+        box.append (image);
+
+        child = box;
         tooltip_text = app_info.get_display_name ();
 
+        var drag_source = new Gtk.DragSource () {
+            actions = MOVE
+        };
+        box.add_controller (drag_source);
+
+        int drag_offset_x = 0;
+        int drag_offset_y = 0;
+        drag_source.prepare.connect ((x, y) => {
+            drag_offset_x = (int) x;
+            drag_offset_y = (int) y;
+
+            var val = Value (typeof (Launcher));
+            val.set_object (this);
+            return new Gdk.ContentProvider.for_value (val);
+        });
+
+        drag_source.drag_begin.connect ((drag) => {
+            var paintable = new Gtk.WidgetPaintable (image); //Maybe TODO How TF can I get a paintable from a gicon?!?!?
+            drag_source.set_icon (paintable.get_current_image (), drag_offset_x, drag_offset_y);
+            image.clear ();
+        });
+
+        drag_source.drag_cancel.connect ((drag, reason) => {
+            if (pinned && reason == NO_TARGET) {
+                var popover = new PoofPopover ();
+
+                var window = (MainWindow)get_root ();
+                popover.set_parent (window);
+                var surface = window.get_surface ();
+
+                double x, y;
+                Gdk.ModifierType mask;
+                surface.get_device_position (drag.device, out x, out y, out mask);
+
+                var rect = Gdk.Rectangle ();
+                rect.x = (int)x;
+                rect.y = (int)y;
+
+                popover.set_pointing_to (rect);
+                // ICON_SIZE / 4 and -(ICON_SIZE / 4) position the popover in a way that the cursor is in the top left corner.
+                // The drag_offset is also measured from the top left corner but works
+                // the other way round (i.e it moves the cursor not the surface)
+                // than set_offset so we put a - in front.
+                popover.set_offset (ICON_SIZE / 4 - drag_offset_x, - (ICON_SIZE / 4) - drag_offset_y);
+                popover.popup ();
+                popover.start_animation ();
+
+                window.remove_launcher (this);
+
+                return true;
+            } else {
+                image.gicon = app_info.get_icon ();
+                return false;
+            }
+        });
+
+        drag_source.drag_end.connect (() => image.gicon = app_info.get_icon ());
+
+        var drop_target = new Gtk.DropTarget (typeof (Launcher), MOVE) {
+            preload = true
+        };
+        box.add_controller (drop_target);
+        drop_target.enter.connect (on_drop_enter);
+
         clicked.connect (() => {
             try {
                 add_css_class ("bounce");
@@ -56,6 +131,29 @@ public class Dock.Launcher : Gtk.Button {
         });
     }
 
+    public void animate_move (Gtk.DirectionType dir) {
+        if (animate_timeout_id != 0) {
+            Source.remove (animate_timeout_id);
+            remove_css_class (css_class_name);
+        }
+
+        if (dir == LEFT) {
+            css_class_name = "move-left";
+        } else if (dir == RIGHT) {
+            css_class_name = "move-right";
+        } else {
+            warning ("Wrong direction type.");
+            return;
+        }
+
+        add_css_class (css_class_name);
+        animate_timeout_id = Timeout.add (300, () => {
+            remove_css_class (css_class_name);
+            animate_timeout_id = 0;
+            return Source.REMOVE;
+        });
+    }
+
     public void update_windows (owned GLib.List<AppWindow>? new_windows) {
         if (new_windows == null) {
             windows = new GLib.List<AppWindow> ();
@@ -82,4 +180,28 @@ public class Dock.Launcher : Gtk.Button {
             return null;
         }
     }
+
+    private Gdk.DragAction on_drop_enter (Gtk.DropTarget drop_target, double x, double y) {
+        var val = drop_target.get_value ();
+        if (val != null) {
+            var obj = val.get_object ();
+
+            if (obj != null && obj is Launcher) {
+                Launcher source = (Launcher)obj;
+                Launcher target = this;
+
+                if (source != target) {
+                    if ((x > get_allocated_width () / 2) && get_next_sibling () == source) {
+                        target = (Launcher)get_prev_sibling ();
+                    } else if ((x < get_allocated_width () / 2) && get_prev_sibling () != source) {
+                        target = (Launcher)get_prev_sibling ();
+                    }
+
+                    ((MainWindow)get_root ()).move_launcher_after (source, target);
+                }
+            }
+        }
+
+        return MOVE;
+    }
 }

src/MainWindow.vala

@@ -6,6 +6,7 @@
 public class Dock.MainWindow : Gtk.ApplicationWindow {
     private static Gtk.CssProvider css_provider;
 
+    private Settings settings;
     private Gtk.Box box;
     private Dock.DesktopIntegration desktop_integration;
     private GLib.HashTable<unowned string, Dock.Launcher> app_to_launcher;
@@ -34,7 +35,10 @@ public class Dock.MainWindow : Gtk.ApplicationWindow {
         resizable = false;
         set_titlebar (empty_title);
 
-        var settings = new Settings ("io.elementary.dock");
+        var drop_target_launcher = new Gtk.DropTarget (typeof (Launcher), MOVE);
+        box.add_controller (drop_target_launcher);
+
+        settings = new Settings ("io.elementary.dock");
 
         GLib.Bus.get_proxy.begin<Dock.DesktopIntegration> (
             GLib.BusType.SESSION,
@@ -120,4 +124,66 @@ public class Dock.MainWindow : Gtk.ApplicationWindow {
             return false;
         });
     }
+
+    public void remove_launcher (Launcher launcher) {
+        box.remove (launcher);
+
+        if (launcher.pinned) {
+            var old_pinned_ids = settings.get_strv ("launchers");
+            string[] new_pinned_ids = {};
+
+            var to_remove_id = launcher.app_info.get_id ();
+            foreach (string app_id in old_pinned_ids) {
+                if (app_id != to_remove_id) {
+                    new_pinned_ids += app_id;
+                }
+            }
+
+            settings.set_strv ("launchers", new_pinned_ids);
+        }
+    }
+
+    public void move_launcher_after (Launcher source, Launcher? target) {
+        var before_source = source.get_prev_sibling ();
+
+        box.reorder_child_after (source, target);
+
+        string[] new_pinned_ids = {};
+        bool add = false;
+        Gtk.DirectionType dir = UP;
+
+        if (before_source == null) {
+            add = true;
+            dir = LEFT;
+        }
+
+        Launcher child = (Launcher)box.get_first_child ();
+        while (child != null) {
+            if (child.pinned) {
+                new_pinned_ids += child.app_info.get_id ();
+            }
+
+            if (child == source) {
+                add = !add;
+                if (add) {
+                    dir = RIGHT;
+                }
+            }
+
+            if (add && child != source) {
+                child.animate_move (dir);
+            }
+
+            if (child == before_source) {
+                add = !add;
+                if (add) {
+                    dir = LEFT;
+                }
+            }
+
+            child = (Launcher)child.get_next_sibling ();
+        }
+
+        settings.set_strv ("launchers", new_pinned_ids);
+    }
 }

src/PoofPopover.vala

@@ -0,0 +1,56 @@
+/*
+ * SPDX-License-Identifier: GPL-3.0
+ * SPDX-FileCopyrightText: 2023 elementary, Inc. (https://elementary.io)
+ */
+
+public class Dock.PoofPopover : Gtk.Popover {
+    private Gtk.Adjustment vadjustment;
+    private int poof_frames;
+
+    construct {
+        var texture = Gdk.Texture.from_resource ("/io/elementary/dock/poof.svg");
+
+        var poof_size = texture.width;
+        poof_frames = (int) Math.floor (texture.height / poof_size);
+
+        var picture = new Gtk.Picture.for_paintable (texture) {
+            width_request = Launcher.ICON_SIZE,
+            height_request = Launcher.ICON_SIZE * poof_frames,
+            keep_aspect_ratio = true
+        };
+
+        var scrolled_window = new Gtk.ScrolledWindow () {
+            hexpand = true,
+            vexpand = true,
+            child = picture,
+            vscrollbar_policy = EXTERNAL
+        };
+
+        vadjustment = scrolled_window.get_vadjustment ();
+
+        height_request = Launcher.ICON_SIZE;
+        width_request = Launcher.ICON_SIZE;
+        has_arrow = false;
+        remove_css_class ("background");
+        child = scrolled_window;
+    }
+
+    public void start_animation () {
+        var frame = 1;
+        Timeout.add (30, () => {
+            var adjustment_step = (int) vadjustment.get_upper () / poof_frames;
+            vadjustment.value = vadjustment.value + adjustment_step;
+            if (frame <= poof_frames) {
+                frame++;
+                return Source.CONTINUE;
+            } else {
+                popdown ();
+                Idle.add (() => {
+                    unparent ();
+                    return Source.REMOVE;
+                });
+                return Source.REMOVE;
+            }
+        });
+    }
+}

src/meson.build

@@ -3,7 +3,8 @@ sources = [
     'AppWindow.vala',
     'DesktopIntegration.vala',
     'Launcher.vala',
-    'MainWindow.vala'
+    'MainWindow.vala',
+    'PoofPopover.vala'
 ]
 
 executable(