[gnome-maps/wip/drag-n-drop] dragndrop
- From: Jonas Danielsson <jonasdn src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-maps/wip/drag-n-drop] dragndrop
- Date: Thu, 27 Nov 2014 10:01:33 +0000 (UTC)
commit ac6b742f4777a19e62867d97c36525905e20f9aa
Author: Jonas Danielsson <jonas threetimestwo org>
Date: Thu Nov 27 04:13:24 2014 -0500
dragndrop
src/routeEntry.js | 12 +++--
src/routeQuery.js | 10 ++++
src/sidebar.js | 122 +++++++++++++++++++++++++++++++++++++++++++++++++++++
3 files changed, 139 insertions(+), 5 deletions(-)
---
diff --git a/src/routeEntry.js b/src/routeEntry.js
index add85c5..3a61a03 100644
--- a/src/routeEntry.js
+++ b/src/routeEntry.js
@@ -46,10 +46,10 @@ const RouteEntry = new Lang.Class({
this._type = params.type;
delete params.type;
- this._point = params.point;
+ this._point = params.point || null;
delete params.point;
- this._mapView = params.mapView;
+ this._mapView = params.mapView || null;
delete params.mapView;
this.parent(params);
@@ -61,9 +61,11 @@ const RouteEntry = new Lang.Class({
mapView: this._mapView,
parseOnFocusOut: true,
maxChars: 15 });
- this.entry.bind_property('place',
- this._point, 'place',
- GObject.BindingFlags.BIDIRECTIONAL);
+ if (this._point) {
+ this.entry.bind_property('place',
+ this._point, 'place',
+ GObject.BindingFlags.BIDIRECTIONAL);
+ }
this._entryGrid.add(this.entry);
switch(this._type) {
diff --git a/src/routeQuery.js b/src/routeQuery.js
index 554d68b..5eac0c6 100644
--- a/src/routeQuery.js
+++ b/src/routeQuery.js
@@ -111,6 +111,16 @@ const RouteQuery = new Lang.Class({
}
},
+ getIndex: function(point) {
+ for (let i = 0; i < this._points.length; i++) {
+ if (this._points[i] === point) {
+ return i;
+ }
+ }
+
+ return -1;
+ },
+
set transportation(transportation) {
this._transportation = transportation;
this.notify('transportation');
diff --git a/src/sidebar.js b/src/sidebar.js
index 8695f32..fc70e7c 100644
--- a/src/sidebar.js
+++ b/src/sidebar.js
@@ -21,9 +21,12 @@
* Mattias Bengtsson <mattias jc bengtsson gmail com>
*/
+const Cairo = imports.cairo;
+const Gdk = imports.gi.Gdk;
const GObject = imports.gi.GObject;
const Gtk = imports.gi.Gtk;
const Lang = imports.lang;
+const Mainloop = imports.mainloop;
const _ = imports.gettext.gettext;
const Application = imports.application;
@@ -96,6 +99,7 @@ const Sidebar = new Lang.Class({
this._initTransportationToggles(ui.modePedestrianToggle,
ui.modeBikeToggle,
ui.modeCarToggle);
+
this._initQuerySignals(ui.viaGridContainer);
let query = Application.routeService.query;
@@ -178,6 +182,8 @@ const Sidebar = new Lang.Class({
Application.routeService.query.removePoint(row.get_index());
});
}
+
+ this._initRouteDragAndDrop(routeEntry);
},
_initInstructionList: function() {
@@ -228,5 +234,121 @@ const Sidebar = new Lang.Class({
this._timeInfo.label = '';
this._distanceInfo.label = '';
+ },
+
+ _onDragDrop: function(row, context, x, y, time) {
+ let routeEntry = row.get_child();
+ let srcPlace = this._draggedPoint.place;
+ let query = Application.routeService.query;
+ let srcIndex = query.getIndex(this._draggedPoint);
+ let destIndex = query.getIndex(routeEntry.point);
+ let step;
+
+ // Hold off on notifying the changes to query.points until
+ // we have re-arranged the places.
+ query.freeze_notify();
+
+ // Iterate over points and establish the new order of places
+ if (srcIndex < destIndex)
+ step = -1;
+ else
+ step = 1;
+
+ for (let i = destIndex; i !== (srcIndex + step); i += step) {
+ let tmpPlace = query.points[i].place;
+
+ query.points[i].place = srcPlace;
+ srcPlace = tmpPlace;
+ }
+
+ query.thaw_notify();
+ Gtk.drag_finish(context, true, false, time);
+ return true;
+ },
+
+ // Set the opacity of the row we are currently dragging above
+ // to semi transparent.
+ _onDragMotion: function(row, context, x, y, time) {
+ let routeEntry = row.get_child();
+
+ if (this._draggedPoint && this._draggedPoint !== routeEntry.point) {
+ row.opacity = 0.6;
+ Gdk.drag_status(context, Gdk.DragAction.MOVE, time);
+ } else
+ Gdk.drag_status(context, 0, time);
+ return true;
+ },
+
+ // Drag ends, show the dragged row again.
+ _onDragEnd: function(context, row) {
+ this._draggedPoint = null;
+ row.show();
+ },
+
+ // Drag begins, set the correct drag icon and hide the dragged row.
+ _onDragBegin: function(context, row) {
+ let routeEntry = row.get_child();
+ let dragEntry = this._dragWidget.get_child();
+
+ this._draggedPoint = routeEntry.point;
+ row.hide();
+ dragEntry.entry.text = routeEntry.entry.text;
+ Gtk.drag_set_icon_surface(context,
+ this._dragWidget.get_surface(), 0, 0);
+ },
+
+ // We add RouteEntry to an OffscreenWindow and paint the backgroind
+ // of the entry to be semi transparent.
+ // We can later use the GtkOffscreenWindow method get_surface to
+ // generate our drag icon.
+ _initDragWidget: function() {
+ let dragEntry = new RouteEntry.RouteEntry({ type: RouteEntry.Type.TO });
+ this._dragWidget = new Gtk.OffscreenWindow({ visible: true,
+ width_request: 320 });
+
+ dragEntry.app_paintable = true;
+ dragEntry.connect('draw', (function(widget, cr) {
+ let row = this._entryList.get_row_at_index(0);
+ let style = row.get_style_context();
+ let rgba = style.get_background_color(Gtk.StateFlags.NORMAL);
+
+ cr.setSourceRGBA(rgba.red, rgba.green, rgba.blue, 0.5);
+ cr.setOperator(Cairo.Operator.SOURCE);
+ cr.paint();
+ cr.setOperator(Cairo.Operator.OVER);
+ }).bind(this));
+
+ this._dragWidget.add(dragEntry);
+ },
+
+ // Set up drag and drop between RouteEntrys. The drag source is from a
+ // GtkEventBox that contains the start/end icon next in the entry. And
+ // the drag destination is the ListBox row.
+ _initRouteDragAndDrop: function(routeEntry) {
+ let dragIcon = routeEntry.iconEventBox;
+ let row = routeEntry.get_parent();
+
+ dragIcon.drag_source_set(Gdk.ModifierType.BUTTON1_MASK,
+ null,
+ Gdk.DragAction.MOVE);
+ dragIcon.drag_source_add_image_targets();
+
+ row.drag_dest_set(Gtk.DestDefaults.MOTION,
+ null,
+ Gdk.DragAction.MOVE);
+ row.drag_dest_add_image_targets();
+
+ dragIcon.connect('drag-begin', (function(icon, context) {
+ this._onDragBegin(context, row);
+ }).bind(this));
+ dragIcon.connect('drag-end', (function(icon, context) {
+ this._onDragEnd(context, row);
+ }).bind(this));
+
+ row.connect('drag-leave', row.set_opacity.bind(row, 1.0));
+ row.connect('drag-motion', this._onDragMotion.bind(this));
+ row.connect('drag-drop', this._onDragDrop.bind(this));
+
+ this._initDragWidget();
}
});
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]