title: How can I draw a rectangle over a widget without stealing its events?
body: <p>I'm trying to implement a custom docking solution using a <code>Gtk.DrawingArea</code> placed upon a <code>Gtk.Overlay</code>, but when I attempt to show the <code>Gtk.DrawingArea</code> during a widget's <code>drag_motion</code> event it triggers the <code>drag_leave</code> event. The problem here is that I'm using the drag_leave event to hide the overlay, which means that I'm just toggling between visibility states as the cursor is moving. How can I prevent the overlay from triggering the bottom widget's <code>drag_leave</code> event after it has been made visible?</p>
  
  <p>Also, is there a more efficient way to approach docking? Should I be using Gtk.Window instead of Gtk.DrawingArea? What is the best way to draw a simple rectangle over a region and have it move when an item is dragged?</p>
  
  <ul>
  <li>I've tried using a Gtk.EventBox instead of a Gtk.DrawingArea</li>
  <li>I've tried using a Gtk.Window with Gtk.WindowType.POPUP instead of a Gtk.Overlay</li>
  <li>I've tried using GDL but I would prefer to create my own widgets using vala</li>
  <li>I've tried calling <code>gtk_overlay_set_overlay_pass_through</code></li>
  <li>I've tried calling <code>gdk_window_set_pass_through</code></li>
  </ul>
  
  <pre><code>using Gtk;
  using Gdk;
  
  public const Gtk.TargetEntry[] targets = {
      { "INTEGER", 0, 0 },
  };
  
  void main (string[] args) {
      Gtk.init (ref args);
  
      var window = new Gtk.Window ();
      window.set_default_size (400, 400);
      window.window_position = Gtk.WindowPosition.CENTER;
  
      var container = new Gtk.Overlay ();
  
      var box = new Gtk.Box (Gtk.Orientation.VERTICAL, 0);
  
      container.add (box);
      var box_overlay = new Gtk.DrawingArea ();
      box_overlay.realize.connect (() =&gt; {
          box_overlay.get_window ().set_pass_through (true);
          box_overlay.hide ();
      });
  
      container.add_overlay (box_overlay);
      container.set_overlay_pass_through (box_overlay, true);
  
      var dest_drag_widget = new Gtk.Button ();
      dest_drag_widget.vexpand = true;
      var src_drag_widget = new Gtk.Button ();
      src_drag_widget.vexpand = true;
  
      Gtk.drag_source_set (src_drag_widget, Gdk.ModifierType.BUTTON1_MASK, targets, Gdk.DragAction.COPY);
      Gtk.drag_dest_set (dest_drag_widget, Gtk.DestDefaults.MOTION, targets, Gdk.DragAction.COPY);
  
      dest_drag_widget.drag_motion.connect (() =&gt; {
          if (!box_overlay.visible) {
              print ("show\n");
              box_overlay.show ();
          }
          return false;
      });
      dest_drag_widget.drag_leave.connect (() =&gt; {
          if (box_overlay.visible) {
              print ("hide\n");
              box_overlay.hide ();
          }
      });
  
      box.add (dest_drag_widget);
      box.add (src_drag_widget);
  
      window.add (container);
      window.show_all ();
  
      Gtk.main ();
  }
  
  </code></pre>
  
  <ol>
  <li>Run the above with <code>valac --pkg gtk+-3.0</code></li>
  <li>Drag bottom button to top and move it around</li>
  <li>Notice "show" and "hide" being printed many times.</li>
  </ol>
  
  <p>I expect "show" and "hide" to only be printed once.</p>
  
  <p>Edit:</p>
  
  <p>The overall effect I'm trying to achieve is similar to how the Atom editor positions its panes.</p>