From e5f30b3d01b611d1a52ce5c6cee19a8a95099ce3 Mon Sep 17 00:00:00 2001
From: Albert Graef <aggraef@gmail.com>
Date: Fri, 12 Aug 2022 23:56:55 +0200
Subject: [PATCH] Reposition the caret (editing cursor) after performing a
completion.
Previously the caret would be reset to the beginning of the object text,
which was inconvenient. Now the caret is moved to the end of the edited
textbox after both Tab autocompletion and selecting the completion with
the Return key in the dropdown menu.
---
pd/nw/pd_canvas.js | 28 +++++++++++++++++++++++++++-
1 file changed, 27 insertions(+), 1 deletion(-)
diff --git a/pd/nw/pd_canvas.js b/pd/nw/pd_canvas.js
index 443d35834..1e37754ec 100644
--- a/pd/nw/pd_canvas.js
+++ b/pd/nw/pd_canvas.js
@@ -53,6 +53,30 @@ var canvas_events = (function() {
textbox = function () {
return document.getElementById("new_object_textentry");
},
+ caret_end = function () {
+ /* ag: Move the caret to the end of the texbox while editing. This
+ is needed for the autcompletion. We essentially fake pressing
+ the End key here; maybe there's an easier way to do this, but
+ the following seems to work alright, so... We first grab the
+ textbox content and determine its length, which is where we
+ want the caret to be. */
+ var t = textbox();
+ var x = t.innerText;
+ var p = x.length;
+ //console.log("move "+p+": "+x);
+ /* The DOM doesn't make this easy. We first have to define a
+ range, set its start to the desired caret position, and
+ collapse it to a single position (i.e., end = start). Next we
+ grab the current selection, remove all currently selected
+ ranges, and set our new range. Quite a hullaballoo for such a
+ simple task. */
+ var r = document.createRange();
+ var s = window.getSelection();
+ r.setStart(t.childNodes[0], p);
+ r.collapse(true);
+ s.removeAllRanges();
+ s.addRange(r);
+ },
current_events = {}, // keep track of our current listeners
edit_events = function(elem, events, action, init) {
// convenience routine for adding an object full of
@@ -544,14 +568,16 @@ var canvas_events = (function() {
grow_svg_for_element(textbox());
} else { // else, if there is a selected item on autocompletion tool, the selected item is written on the box
pdgui.select_result_autocomplete_dd(textbox(), ac_dropdown());
+ caret_end();
// TODO: Substitute the editing box by the object itself
// utils.create_obj(); // not working, it's not that simple.
// canvas_events.normal();
}
break;
case 9: // tab
- // TODO: Substitute this function by one that autocomplete with the prefix in common in all results
+ // TODO: Substitute this function by one that autocompletes with the common prefix of all results
pdgui.select_result_autocomplete_dd(textbox(), ac_dropdown());
+ caret_end();
break;
default:
if (textbox().innerText === "") {
--
GitLab