460. How to drag and drop between two thumbnail images using GtkIconView with GtkTreeModelFilter - Part 2 - left to right insert?

Problem

This is in response to Wim Stockman's post titled "Drag Drop between 2 filtered GtkIconViews".

This solution is similar to that of How to drag and drop between two thumbnail images using GtkIconView - Part 2 - left to right insert?

The only difference is that this one uses GtkTreeModelFilter on top of a GtkListStore. This allows filtering of selected thumbnail images in the GtkIconView as shown below.

In Part 1, the dropped image is appended to the end of the dropped view.

In this Part 2, I'll show you how to insert image at the dropped location.

Key methods used: GtkTreeModelFilter::convert_iter_to_child_iter(), GObject::emit_stop_by_name(signal).

How to drag and drop between two thumbnail images using GtkIconView with GtkTreeModelFilter - Part 2 - left to right insert?


Solution

Important Note: This only works for PHP-GTK2 compliled with gtk+ v2.10 and above. If you are using an older version, for linux, you may follow the step-by-step instructions to recompile php-gtk2 with gtk+ v2.10. For windows, please refer to How to install php gtk2 on windows? You may also want to take a look here to see some of the new exciting PHP-GTK2 Functionalities.


Sample Code

The following image files are required by the sample code below. Please save a copy of the image files and put them in the same directory where you store the sample code.

 square_red.jpg
 square_yellow.jpg
 square_green.jpg
 square_blue.jpg
 square_blue2.jpg
 square_blue3.jpg
 ball_red.png
 ball_yellow.png
 ball_blue3.png
 ball_blue3a.png
 ball_green3.png
 ball_green4.png

1   
2   
3   
4   
5   
6   
7   
8   
9   
10   
11   
12   
13   
14   
15   
16   
17   
20   
23   
24   
25   
26   
27   
30   
31   
32   
33   
34   
35   
36   
37   
38   
39   
40   
41   
42   
43   
44   
47   
48   
49   
50   
53   
54   
55   
56   
57   
58   
59   
60   
61   
62   
63   
64   
65   
66   
67   
68   
69   
71   
72   
73   
74   
75   
76   
77   
78   
79   
80   
81   
82   
83   
84   
85   
86   
87   
88   
90   
91   
92   
93   
94   
95   
96   
97   
98   
99   
100   
103   
104   
105   
106   
108   
110   
111   
112   
115   
116   
118   
119   
120   
121   
123   
124   
125   
126   
127   
128   
129   
131   
132   
134   
135   
136   
138   
139   
140   
141   
143   
144   
146   
147   
149   
151   
152   
154   
155   
156   
157   
159   
160   
162   
164   
166   
169   
171   
172   
173   
174   
176   
178   
180   
181   
182   
183   
184   
185   
186   
187   
188   
189   
190   
191   
192   
193   
194   
195   
196   
197   
198   
199   
200   
201   
202   
203   
204   
205   
206   
207   
208   
<?php
$window = new GtkWindow();
$window->set_title($argv[0]);
$window->set_size_request(600, 400);
$window->connect_simple('destroy', array('Gtk','main_quit'));
$window->add($vbox = new GtkVBox());

// display title
$title = new GtkLabel("Drag and drop between two thumbnail images\n".
"using GtkIconView with GtkTreeModelFilter\n".
"            Part 2 - Left to right (insert)");
$title->modify_fg(Gtk::STATE_NORMAL, GdkColor::parse("#0000ff"));
$title->set_size_request(-1, 60);
$vbox->pack_start($title, 0, 0);
$vbox->pack_start(new GtkLabel(), 0, 0); // add a small gap

// Set up a scroll window

$hbox = new GtkHBox();
$vbox->pack_start($hbox);

$imagelist[0] = array('square_red.jpg', 'square_yellow.jpg', 'square_green.jpg',
    'square_blue.jpg', 'square_blue2.jpg', 'square_blue3.jpg');
$imagelist[1] = array('ball_red.png', 'ball_yellow.png',
    'ball_blue3.png', 'ball_blue3a.png',
    'ball_green3.png', 'ball_green4.png',);

$left_vbox = setup_iconview(0, 'left');
$right_vbox = setup_iconview(1, 'right');

$view[0]->drag_source_set(Gdk::BUTTON1_MASK, array( array( 'text/plain', 0, 0)),
    Gdk::ACTION_COPY|Gdk::ACTION_MOVE);
$view[0]->connect('drag-data-get', 'on_drag');

$view[1]->drag_dest_set(Gtk::DEST_DEFAULT_ALL,
array( array( 'text/plain', 0, 0)), Gdk::ACTION_COPY|Gdk::ACTION_MOVE);
$view[1]->connect('drag-data-received', 'on_drop');


$hbox->pack_start($left_vbox);
$hbox->pack_start($right_vbox);

$window->show_all();
Gtk::main();

function setup_iconview($id, $label) {
    global $imagelist, $model, $modelfilter, $view;
    $model[$id] = new GtkListStore(GdkPixbuf::gtype, Gtk::TYPE_STRING, Gtk::TYPE_BOOLEAN);

    $modelfilter[$id] = new GtkTreeModelFilter($model[$id]);
    $modelfilter[$id]->set_visible_column(2);

    foreach($imagelist[$id] as $img) {
        $pixbuf = GdkPixbuf::new_from_file($img);
        $flag = (preg_match('/blue/', $img) || preg_match('/green/', $img)) ? 1 : 0;
        $model[$id]->append(array($pixbuf, $img, $flag));
    }

    $view[$id] = new GtkIconView($model[$id]);
    $view[$id]->set_pixbuf_column(0); // col 0 of the model
    $view[$id]->set_text_column(1); // col 1 of the model
    $view[$id]->set_selection_mode(Gtk::SELECTION_MULTIPLE);
    $view[$id]->set_columns(0);
    $view[$id]->set_item_width(120);

    $vbox = new GtkVBox();
    $radio1 = setup_radio(null, 'display all', $label.'_all', $id);
    $radio2 = setup_radio($radio1, 'display blue/green only',
        $label.'_filter1', $id);
    $vbox->pack_start($radio1, 0);
    $vbox->pack_start($radio2, 0);
    $vbox->pack_start($view[$id]);
    return $vbox;
}

// process drag
function on_drag($widget, $context, $data, $info, $time) {
    $selection = $widget->get_selected_items();
    if (count($selection)==0) return;  // return if there's no selection
    $data->set_text(serialize($selection));
}

// process drop
function on_drop($widget, $context, $x, $y, $data, $info, $time) {

    $drop_info = $widget->get_dest_item_at_pos($x, $y); // note 1
    if ($drop_info) { // note 1
        list($path, $position) = $drop_info; // note 2
        $func = 'insert';
        if ($position == Gtk::TREE_VIEW_DROP_BEFORE ||
        $position == Gtk::TREE_VIEW_DROP_INTO_OR_BEFORE) {
            $pos = $path[0];
        } else {
            $pos = $path[0]+1;
        }
    } else {
        $func = 'append';
    }

    global $imagelist;
    global $model, $modelfilter, $view;
    $data = unserialize($data->data);
    $dest_model = $widget->get_model();
    $source_model = $view[0]->get_model();
    foreach($data as $img) {
        $i = $img[0];

        // remove the source image first
         if (method_exists($source_model, 'append')) {
            $iter = $model[0]->get_iter($i);
        } else {
            $iter_filter = $modelfilter[0]->get_iter($i);
            $iter = $modelfilter[0]->convert_iter_to_child_iter($iter_filter);
        }
        $img_name = $model[0]->get_value($iter, 1);
        $model[0]->remove($iter);

        // append the dragged image to the destination
        $pixbuf = GdkPixbuf::new_from_file($img_name);
        $flag = (preg_match('/blue/', $img_name) || preg_match('/green/', $img_name)) ? 1 : 0;

        if ($func=='append') {
            if (method_exists($dest_model, 'append')) {
                $dest_model->append(array($pixbuf, $img_name, $flag));
            } else {
                $model[1]->append(array($pixbuf, $img_name, $flag));
            }
        } elseif ($func = 'insert') {
            if (method_exists($dest_model, 'append')) {
                $dest_model->insert($pos, array($pixbuf, $img_name, $flag));
            } else {
                $iter_filter = $modelfilter[1]->get_iter($pos);
                $iter = $modelfilter[1]->convert_iter_to_child_iter($iter_filter); // note 3
                $pos_base = $model[1]->get_path($iter);
                $model[1]->insert($pos_base[0], array($pixbuf, $img_name, $flag)); // note 4
            }
        }

        if (!method_exists($dest_model, 'append')) {
            $view[1]->set_model($model[1]);
            $view[1]->set_model($modelfilter[1]);
            $view[1]->emit_stop_by_name('drag_data_received');
        }

    }
}

// function to simplify the display of grouped radio buttons
function setup_radio($radio_button_grp, $button_label, $button_value, $id) {
    $radio = new GtkRadioButton($radio_button_grp, $button_label);
    $radio->connect('toggled', "on_toggle", $button_value, $id);
    return $radio;
}

// call-back function when user pressed a radio button
function on_toggle($radio, $value, $id) {
    global $view, $model, $modelfilter;
    $label = $radio->child->get_label();
    $active = $radio->get_active();
    if ($active) {
        echo "radio button pressed: $label (value = $value)\n";
        if (preg_match('/filter1/', $value)) {
            $view[$id]->set_model($modelfilter[$id]);
        } else {
            $view[$id]->set_model($model[$id]);
        }
    }
}

?>

Output

As shown above.

 

Explanation

This example make use of the techniques from the following two articles:

What's new here:

  1. Check if this is an insert or an append.
  2. Get the insert position.
  3. As usual, for an iconview with filter, we need to get the iter of the underlying base model.
  4. For gtk+ v2.10 and above, you need to use emit_stop_by_name('drag_data_received') to gobble up the 'drag_data_received' signal for an iconview with filter. Try commenting this line. You will get the following error message:
  5. Gtk-WARNING **: You must override the default 
    'drag_data_received' handler on GtkIconView when using models 
    that don't support the GtkTreeDragDest interface and enabling 
    drag-and-drop. The simplest way to do this is to connect to 
    'drag_data_received' and call g_signal_stop_emission_by_name() 
    in your signal handler to prevent the default handler from 
    running. Look at the source code for the default handler in 
    gtkiconview.c to get an idea what your handler should do. 
    (gtkiconview.c is in the GTK+ source code.) If you're using 
    GTK+ from a language other than C, there may be a more natural 
    way to override default handlers, e.g. via derivation.

    What a long error message!

Related Links

Add comment


Security code
Refresh