Improving drag/drop UI in custom sidebar.

phase1geo · Feb 12, 2024 · 6d5e642 · 6d5e642
1 parent 8de7ea6
commit 6d5e642
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 3 deletions.
diff --git a/src/SidebarCustom.vala b/src/SidebarCustom.vala
@@ -110,7 +110,7 @@ public class SidebarCustom : SidebarBox {
 
     /* Create scrolled box */
     var drag_source = new DragSource();
-    var drop_target = new DropTarget( Type.STRING, (DragAction.COPY | DragAction.MOVE) );
+    var drop_target = new DropTarget( Type.OBJECT, (DragAction.COPY | DragAction.MOVE) );
     _lb = new ListBox() {
       selection_mode = SelectionMode.NONE
     };
@@ -121,13 +121,28 @@ public class SidebarCustom : SidebarBox {
       var row = _lb.get_row_at_y( (int)y );
       if( row != null ) {
         _drag_box = (Box)row.child;
-        var val = new Value( typeof(string) );
-        val.set_string( _drag_box.name );
+        var val = new Value( typeof(Object) );
+        val.set_object( _drag_box );
         var content = new ContentProvider.for_value( val );
         return( content );
       }
       return( null );
     });
+    drag_source.drag_begin.connect((drag) => {
+      if( _drag_box != null ) {
+        double hotspot_x, hotspot_y;
+        var snapshot = new Gtk.Snapshot();
+        var rect     = Utils.get_rect_for_widget( _drag_box );
+
+        var cr = snapshot.append_cairo( rect );
+        win.get_style_context().render_background( cr, 0, 0, rect.size.width, rect.size.height );
+        _drag_box.snapshot( snapshot );
+
+        Utils.get_relative_coordinates( _drag_box, out hotspot_x, out hotspot_y );
+        // snapshot.append_color( bg, rect );
+        DragIcon.set_from_paintable( drag, snapshot.free_to_paintable( null ), (int)hotspot_x, (int)hotspot_y );
+      }
+    });
     drag_source.drag_end.connect((drag) => {
       if( (_drag_box != null) && (drag.actions == DragAction.MOVE) ) {
         delete_action( _drag_box.name );

diff --git a/src/Utils.vala b/src/Utils.vala
@@ -45,6 +45,13 @@ public class Utils {
     return( "#%02x%02x%02x".printf( (int)(rgba.red * 255), (int)(rgba.green * 255), (int)(rgba.blue * 255) ) );
   }
 
+  /* Returns the RGBA color for the given color value */
+  public static RGBA color_from_string( string value ) {
+    RGBA c = {(float)1.0, (float)1.0, (float)1.0, (float)1.0};
+    c.parse( value );
+    return( c );
+  }
+
   /* Sets the context source color to the given color value */
   public static void set_context_color( Context ctx, RGBA color ) {
     ctx.set_source_rgba( color.red, color.green, color.blue, color.alpha );
@@ -58,6 +65,29 @@ public class Utils {
     ctx.set_source_rgba( color.red, color.green, color.blue, alpha );
   }
 
+  /* Returns the rectangle associated with the given widget (the widget must be realized) */
+  public static Graphene.Rect get_rect_for_widget( Widget w ) {
+    Graphene.Rect rect;
+    if( w.compute_bounds( w.parent, out rect ) ) {
+      return( rect );
+    }
+    Requisition min_size, nat_size;
+    rect = Graphene.Rect.alloc();
+    w.get_preferred_size(out min_size, out nat_size );
+    rect.init( (float)0, (float)0, (float)nat_size.width, (float)nat_size.height );
+    return( rect );
+  }
+
+  /* Returns the relative coordinates of the given widget within its parent */
+  public static void get_relative_coordinates( Widget w, out double x, out double y ) {
+    double tmp_x = 0, tmp_y = 0;
+    Gdk.ModifierType mask = 0;
+
+    var pointer = w.get_display().get_default_seat().get_pointer();
+    w.root.get_surface().get_device_position( pointer, out tmp_x, out tmp_y, out mask );
+    w.root.translate_coordinates( w.parent, tmp_x, tmp_y, out x, out y );
+  }
+
   /* Returns a string that is used to display a tooltip with displayed accelerator */
   public static string tooltip_with_accel( string tooltip, string accel ) {
     string[] accels = {accel};