this is the code from seed, it should give you an idea.
The original code is here
https://github.com/roojs/app.Builder.js/blob/master/old-javascript/Builder3/Window.js
- but it's pretty confusing to read that without understanding the
whole codebase..
I've summarized the important stuff below
----------- (globally somewhere)
atoms = {
"STRING" : Gdk.atom_intern("STRING")
};
targetList = new Gtk.TargetList();
targetList.add( atoms["STRING"], 0, 0);
-----------------------------------------
setting up widget..(note 'this.el' - is a GtkTreeView)
this.el.drag_source_set( /* widget will be drag-able */
Gdk.ModifierType.BUTTON1_MASK, /* modifier that will start a
drag */
null, /* lists of target to support */
0, /* size of list */
Gdk.DragAction.COPY | Gdk.DragAction.MOVE /* what to do
with data after dropped */
);
this.el.drag_source_set_target_list(targetList);
this.el.drag_source_add_text_targets();
this.el.drag_dest_set
(
Gtk.DestDefaults.MOTION | Gtk.DestDefaults.HIGHLIGHT,
null, /* lists of target to support */
0, /* size of list */
Gdk.DragAction.COPY | Gdk.DragAction.MOVE /* what to do
with data after dropped */
);
this.el.drag_dest_set_target_list( imports.Builder3.Globals.targetList);
this.el.drag_dest_add_text_targets( );
----------------
signal handlers (note 'this.el' - is a GtkTreeView)
drag_begin : function (self, ctx) {
var ret ={};
this.selection.get_selected(ret);
// make the drag icon a picture of the node that was selected
var path = ret.model.get_path(ret.iter);
// returns a cairo surface
var pix = this.el.create_row_drag_icon ( path);
if (Gtk.drag_set_icon_surface) {
Gtk.drag_set_icon_surface( ctx, pix );
} else {
Gtk.drag_set_icon_pixmap (ctx,
pix.get_colormap(), pix, null, -10, -10);
}
return true;
},
drag_end : function (self, drag_context) {
return true;
},
drag_data_get : function(self, ctx, sel_data, info, time)
{
// not sure if this is needed.....
sel_data.set_text(
"HELOLW"
);
},
drag_motion : function (self, ctx, x, y, time) {
var src = Gtk.drag_get_source_widget( ctx);
var action = Gdk.DragAction.COPY;
if (src == this.el) {
// unless we are copying!!! ctl button..
action = ctx.get_actions() & Gdk.DragAction.MOVE ?
Gdk.DragAction.MOVE : Gdk.DragAction.COPY ;
}
var data = {};
if (!something_is_wrong) { // just an example
Gdk.drag_status(ctx, 0 ,time);
return false; // not over apoint!?!
}
Gdk.drag_status(ctx, action ,time);
return true;
},
drag_drop : function (w, ctx, x, y, time) {
Seed.print("TARGET: drag-drop");
w.drag_get_data
( /* will receive 'drag-data-received' signal */
ctx, /* represents the current state of the DnD */
atoms["STRING"], /* the target type we want */
time /* time stamp */
);
return true;
},
drag_data_received : function (self, ctx, x, y, sel_data, info, time) {
var delete_selection_data = false;
var dnd_success = false;
if( true || (sel_data && sel_data.length )) {
if (ctx.action == Gdk.DragAction.ASK) {
/* Ask the user to move or copy, then set the ctx action. */
}
if (ctx.action == Gdk.DragAction.MOVE) {
//delete_selection_data = true;
}
var source = Gtk.drag_get_source_widget( ctx );
// we can send stuff to souce here...
dnd_success = true;
}
Gtk.drag_finish ( ctx, dnd_success, delete_selection_data, time);
return true;
},
On Wednesday, May 20, 2015 08:23 AM, Satyajit Sahoo wrote:
Hello all.
I was trying to build a simple app with drag 'n drop with GJS. But
since I'm new to this stuff, I'm having a hard time figuring out what
to do. Here is the code I've.
#!/usr/bin/gjs
const Gio = imports.gi.Gio;
const Gdk = imports.gi.Gdk;
const Gtk = imports.gi.Gtk;
const Lang = imports.lang;
const APP_NAME = "Crush";
const Application = new Lang.Class({
Name: APP_NAME,
_init: function() {
this.application = new Gtk.Application({
application_id: "org.ozonos.crush",
flags: Gio.ApplicationFlags.FLAGS_NONE
});
this.application.connect("activate", Lang.bind(this, this._onActivate));
this.application.connect("startup", Lang.bind(this, this._onStartup));
},
_buildUI: function() {
this._window = new Gtk.ApplicationWindow({
application: this.application,
window_position: Gtk.WindowPosition.CENTER,
title: APP_NAME
});
try {
let icon = Gtk.IconTheme.get_default().load_icon("crush",
48, 0);
this._window.set_icon(icon);
} catch (e) {
print("Failed to load application icon: " + e.message);
}
this._headerbar = new Gtk.HeaderBar({
title: APP_NAME,
show_close_button: true
});
// Let's set up our window for drag 'n drop
let dnd = new Gtk.Box({ orientation: Gtk.Orientation.VERTICAL });
dnd.set_vexpand(true);
dnd.set_hexpand(true);
* let target = new Gtk.TargetEntry("text/uri-list",
Gtk.TargetFlags.OTHER_APP, 0);*
*
*
*dnd.drag_dest_set(Gtk.DestDefaults.ALL, [ target ],
Gdk.DragAction.PRIVATE);*
*
*
*dnd.drag_dest_add_image_targets();*
*
*
*dnd.connect("drag_drop", (...args) => {*
*print("Stuff dropped here" + args);*
* });*
let label = new Gtk.Label({ label: "Drop images here to
Crush!" });
dnd.set_center_widget(label);
this._window.add(dnd);
this._window.set_default_size(800, 600);
this._window.set_titlebar(this._headerbar);
this._window.show_all();
},
_onActivate: function() {
this._window.present();
},
_onStartup: function() {
this._buildUI();
}
});
let app = new Application();
app.application.run(ARGV);
Satyajit Sahoo
UX Designer
Behance Profile <https://www.behance.net/satyajitha28c7>
We're all stories, in the end. Just make it a good one, eh? — The
Doctor, Season 5, Episode 13.
_______________________________________________
javascript-list mailing list
javascript-list@gnome.org
https://mail.gnome.org/mailman/listinfo/javascript-list
_______________________________________________
javascript-list mailing list
javascript-list@gnome.org
https://mail.gnome.org/mailman/listinfo/javascript-list
