Re: Simple drag 'n drop in GJS

[Alan Knowles <alan roojs com>]

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 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

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