Satyajit Sahoo
UX Designer
Behance Profile
We're all stories, in the end. Just make it a good one, eh? — The Doctor, Season 5, Episode 13.
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 = "" ctx);
var action = ""> if (src == this.el) {
// unless we are copying!!! ctl button..
action = "" & 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 droplet 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 ProfileWe'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