sidebar: Fix drag-and-dropping route entries
This was not working since the GTK4 port.
Marcus Lundblad
1 year, 7 months ago
| 28 | 28 | import {Application} from './application.js'; |
| 29 | 29 | import {InstructionRow} from './instructionRow.js'; |
| 30 | 30 | import {PlaceStore} from './placeStore.js'; |
| 31 | import {QueryPoint} from './routeQuery.js'; | |
| 31 | 32 | import {RouteEntry} from './routeEntry.js'; |
| 32 | 33 | import {RouteQuery} from './routeQuery.js'; |
| 33 | 34 | import {StoredRoute} from './storedRoute.js'; |
| 513 | 514 | // Iterate over points and establish the new order of places |
| 514 | 515 | _reorderRoutePoints(srcIndex, destIndex) { |
| 515 | 516 | let points = this._query.points; |
| 516 | let srcPlace = this._draggedPoint.place; | |
| 517 | let srcPlace = this._query.points[srcIndex].place; | |
| 517 | 518 | |
| 518 | 519 | // Determine if we are swapping from "above" or "below" |
| 519 | 520 | let step = (srcIndex < destIndex) ? -1 : 1; |
| 549 | 550 | this._query.thaw_notify(); |
| 550 | 551 | } |
| 551 | 552 | |
| 552 | _onDragDrop(row) { | |
| 553 | let srcIndex = this._query.points.indexOf(this._draggedPoint); | |
| 553 | _onDragDrop(row, point) { | |
| 554 | let srcIndex = this._query.points.indexOf(point); | |
| 554 | 555 | let destIndex = row.get_index(); |
| 555 | 556 | |
| 556 | 557 | this._reorderRoutePoints(srcIndex, destIndex); |
| 557 | 558 | |
| 558 | return true; | |
| 559 | } | |
| 560 | ||
| 561 | _dragHighlightRow(row) { | |
| 562 | row.opacity = 0.6; | |
| 563 | } | |
| 564 | ||
| 565 | _dragUnhighlightRow(row) { | |
| 566 | row.opacity = 1.0; | |
| 567 | } | |
| 568 | ||
| 569 | // Set the opacity of the row we are currently dragging above | |
| 570 | // to semi transparent. | |
| 571 | _onDragMotion(row, context, x, y, time) { | |
| 572 | let routeEntry = row.get_child(); | |
| 573 | ||
| 574 | if (this._draggedPoint && this._draggedPoint !== routeEntry.point) { | |
| 575 | this._dragHighlightRow(row); | |
| 576 | Gdk.drag_status(context, Gdk.DragAction.MOVE, time); | |
| 577 | } else | |
| 578 | Gdk.drag_status(context, 0, time); | |
| 579 | 559 | return true; |
| 580 | 560 | } |
| 581 | 561 | |
| 582 | 562 | // Drag ends, show the dragged row again. |
| 583 | 563 | _onDragEnd(row) { |
| 584 | this._draggedPoint = null; | |
| 585 | ||
| 586 | // Restore to natural height | |
| 587 | row.height_request = -1; | |
| 588 | row.get_child().show(); | |
| 589 | } | |
| 590 | ||
| 591 | // Drag begins, set the correct drag icon and hide the dragged row. | |
| 564 | row.opacity = 1.0; | |
| 565 | } | |
| 566 | ||
| 567 | _onDragPrepare(point, source, x, y) { | |
| 568 | return Gdk.ContentProvider.new_for_value(point); | |
| 569 | } | |
| 570 | ||
| 571 | // Drag begins, set the correct drag icon and dim the dragged row. | |
| 592 | 572 | _onDragBegin(source, row) { |
| 593 | 573 | let routeEntry = row.get_child(); |
| 594 | 574 | let {x, y, width, height} = row.get_allocation(); |
| 595 | ||
| 596 | this._draggedPoint = routeEntry.point; | |
| 597 | ||
| 598 | // Set a fixed height on the row to prevent the sidebar height | |
| 599 | // to shrink while dragging a row. | |
| 600 | row.height_request = height; | |
| 601 | row.get_child().hide(); | |
| 602 | ||
| 603 | let paintable = new Gtk.WidgetPaintable(row); | |
| 575 | let paintable = new Gtk.WidgetPaintable({ widget: routeEntry }); | |
| 604 | 576 | |
| 605 | 577 | source.set_icon(paintable, 0, 0); |
| 578 | row.opacity = 0.6; | |
| 606 | 579 | } |
| 607 | 580 | |
| 608 | 581 | // Set up drag and drop between RouteEntrys. The drag source is from a |
| 615 | 588 | |
| 616 | 589 | dragIcon.add_controller(dragSource); |
| 617 | 590 | |
| 591 | dragSource.connect('prepare', | |
| 592 | this._onDragPrepare.bind(this, routeEntry.point)); | |
| 618 | 593 | dragSource.connect('drag-begin', |
| 619 | (source, drag, widget) => this._onDragBegin(source, row)); | |
| 594 | (source, drag, widget) => | |
| 595 | this._onDragBegin(source, row)); | |
| 620 | 596 | dragSource.connect('drag-end', |
| 621 | 597 | (source, dele, data) => this._onDragEnd(row)); |
| 622 | 598 | |
| 623 | let dropTarget = Gtk.DropTarget.new(RouteEntry, Gdk.DragAction.MOVE); | |
| 599 | let dropTarget = Gtk.DropTarget.new(QueryPoint, Gdk.DragAction.COPY); | |
| 624 | 600 | |
| 625 | 601 | row.add_controller(dropTarget); |
| 626 | 602 | |
| 627 | 603 | dropTarget.connect('drop', |
| 628 | (target, value, x, y, data) => this._onDragDrop(target)); | |
| 604 | (target, value, x, y, data) => | |
| 605 | this._onDragDrop(row, value)); | |
| 629 | 606 | } |
| 630 | 607 | } |
| 631 | 608 | |