inav cli autocomplete

pull/1867/head
error 11 months ago
parent c8b5b623ef
commit 562ee22cc5

@ -138,6 +138,8 @@ sources.js = [
'./node_modules/openlayers/dist/ol.js',
'./js/libraries/plotly-latest.min.js',
'./js/sitl.js',
'./js/CliAutoComplete.js',
'./node_modules/jquery-textcomplete/dist/jquery.textcomplete.js'
];
sources.receiverCss = [

@ -0,0 +1,569 @@
/**
* Encapsulates the AutoComplete logic
*
* Uses: https://github.com/yuku/jquery-textcomplete
* Check out the docs at https://github.com/yuku/jquery-textcomplete/tree/v1/doc
*/
const CliAutoComplete = {
configEnabled: false,
builder: { state: 'reset', numFails: 0 },
};
CliAutoComplete.isEnabled = function() {
return this.isBuilding() || (this.configEnabled && CONFIG.flightControllerIdentifier === "INAV" && this.builder.state !== 'fail');
};
CliAutoComplete.isBuilding = function() {
return this.builder.state !== 'reset' && this.builder.state !== 'done' && this.builder.state !== 'fail';
};
CliAutoComplete.isOpen = function() {
return $('.cli-textcomplete-dropdown').is(':visible');
};
/**
* @param {boolean} force - Forces AutoComplete to be shown even if the matching strategy has less that minChars input
*/
CliAutoComplete.openLater = function(force) {
const self = this;
setTimeout(function() {
self.forceOpen = !!force;
self.$textarea.textcomplete('trigger');
self.forceOpen = false;
}, 0);
};
CliAutoComplete.setEnabled = function(enable) {
if (this.configEnabled !== enable) {
this.configEnabled = enable;
if (CONFIGURATOR.cliActive && CONFIGURATOR.cliValid) {
// cli is already open
if (this.isEnabled()) {
this.builderStart();
} else if (!this.isEnabled() && !this.isBuilding()) {
this.cleanup();
}
}
}
};
CliAutoComplete.initialize = function($textarea, sendLine, writeToOutput) {
this.$textarea = $textarea;
this.forceOpen = false;
this.sendLine = sendLine;
this.writeToOutput = writeToOutput;
this.cleanup();
};
CliAutoComplete.cleanup = function() {
this.$textarea.textcomplete('destroy');
this.builder.state = 'reset';
this.builder.numFails = 0;
};
CliAutoComplete._builderWatchdogTouch = function() {
const self = this;
this._builderWatchdogStop();
helper.timeout.add('autocomplete_builder_watchdog', function() {
if (self.builder.numFails) {
self.builder.numFails++;
self.builder.state = 'fail';
self.writeToOutput('Failed!<br># ');
$(self).trigger('build:stop');
} else {
// give it one more try
self.builder.state = 'reset';
self.builderStart();
}
}, 3000);
};
CliAutoComplete._builderWatchdogStop = function() {
helper.timeout.remove('autocomplete_builder_watchdog');
};
CliAutoComplete.builderStart = function() {
if (this.builder.state === 'reset') {
this.cache = {
commands: [],
resources: [],
resourcesCount: {},
settings: [],
settingsAcceptedValues: {},
feature: [],
beeper: ['ALL'],
mixers: [],
};
this.builder.commandSequence = ['help', 'dump', 'get', 'mixer list'];
this.builder.currentSetting = null;
this.builder.sentinel = `# ${Math.random()}`;
this.builder.state = 'init';
this.writeToOutput('<br># Building AutoComplete Cache ... ');
this.sendLine(this.builder.sentinel);
$(this).trigger('build:start');
}
};
CliAutoComplete.builderParseLine = function(line) {
const cache = this.cache;
const builder = this.builder;
this._builderWatchdogTouch();
if (line.indexOf(builder.sentinel) !== -1) {
// got sentinel
const command = builder.commandSequence.shift();
if (command && this.configEnabled) {
// next state
builder.state = `parse-${command}`;
this.sendLine(command);
this.sendLine(builder.sentinel);
} else {
// done
this._builderWatchdogStop();
if (!this.configEnabled) {
// disabled while we were building
this.writeToOutput('Cancelled!<br># ');
this.cleanup();
} else {
cache.settings.sort();
cache.commands.sort();
cache.feature.sort();
cache.beeper.sort();
cache.resources = Object.keys(cache.resourcesCount).sort();
this._initTextcomplete();
this.writeToOutput('Done!<br># ');
builder.state = 'done';
}
$(this).trigger('build:stop');
}
} else {
switch (builder.state) {
case 'parse-help':
const matchHelp = line.match(/^(\w+)/);
if (matchHelp) {
cache.commands.push(matchHelp[1]);
}
break;
case 'parse-dump':
const matchDump = line.match(/^resource\s+(\w+)/i);
if (matchDump) {
const r = matchDump[1].toUpperCase(); // should alread be upper, but to be sure, since we depend on that later
cache.resourcesCount[r] = (cache.resourcesCount[r] || 0) + 1;
} else {
const matchFeatBeep = line.match(/^(feature|beeper)\s+-?(\w+)/i);
if (matchFeatBeep) {
cache[matchFeatBeep[1].toLowerCase()].push(matchFeatBeep[2]);
}
}
break;
case 'parse-get':
const matchGet = line.match(/^(\w+)\s*=/);
if (matchGet) {
// setting name
cache.settings.push(matchGet[1]);
builder.currentSetting = matchGet[1].toLowerCase();
} else {
const matchGetSettings = line.match(/^(.*): (.*)/);
if (matchGetSettings !== null && builder.currentSetting) {
if (matchGetSettings[1].match(/values/i)) {
// Allowed Values
cache.settingsAcceptedValues[builder.currentSetting] = matchGetSettings[2].split(/\s*,\s*/).sort();
} else if (matchGetSettings[1].match(/range|length/i)){
// "Allowed range" or "Array length", store as string hint
cache.settingsAcceptedValues[builder.currentSetting] = matchGetSettings[0];
}
}
}
break;
case 'parse-mixer list':
const matchMixer = line.match(/:(.+)/);
if (matchMixer) {
cache.mixers = ['list'].concat(matchMixer[1].trim().split(/\s+/));
}
break;
}
}
};
/**
* Initializes textcomplete with all the autocomplete strategies
*/
CliAutoComplete._initTextcomplete = function() {
let sendOnEnter = false;
const self = this;
const $textarea = this.$textarea;
const cache = self.cache;
let savedMouseoverItemHandler = null;
// helper functions
const highlighter = function(anywhere) {
return function(value, term) {
const anywherePrefix = anywhere ? '': '^';
const termValue = value.replace(new RegExp(`${anywherePrefix}(${term})`, 'gi'), '<b>$1</b>');
return term ? termValue : value;
};
};
const highlighterAnywhere = highlighter(true);
const highlighterPrefix = highlighter(false);
const searcher = function(term, callback, array, minChars, matchPrefix) {
const res = [];
if ((minChars !== false && term.length >= minChars) || self.forceOpen || self.isOpen()) {
term = term.toLowerCase();
for (let i = 0; i < array.length; i++) {
const v = array[i].toLowerCase();
if (matchPrefix && v.startsWith(term) || !matchPrefix && v.indexOf(term) !== -1) {
res.push(array[i]);
}
}
}
callback(res);
if (self.forceOpen && res.length === 1) {
// hacky: if we came here because of Tab and there's only one match
// trigger Tab again, so that textcomplete should immediately select the only result
// instead of showing the menu
$textarea.trigger($.Event('keydown', {keyCode:9}));
}
};
const contexter = function(text) {
const val = $textarea.val();
if (val.length === text.length || val[text.length].match(/\s/)) {
return true;
}
return false; // do not show autocomplete if in the middle of a word
};
const basicReplacer = function(value) {
return `$1${value} `;
};
// end helper functions
// init textcomplete
$textarea.textcomplete([],
{
maxCount: 10000,
debounce: 0,
className: 'cli-textcomplete-dropdown',
placement: 'top',
onKeydown: function(e) {
// some strategies may set sendOnEnter only at the replace stage, thus we call with timeout
// since this handler [onKeydown] is triggered before replace()
if (e.which === 13) {
setTimeout(function() {
if (sendOnEnter) {
// fake "enter" to run the textarea's handler
$textarea.trigger($.Event('keypress', {which:13}));
}
}, 0);
}
},
},
)
.on('textComplete:show', function() {
/**
* The purpose of this code is to disable initially the `mouseover` menu item handler.
* Normally, when the menu pops up, if the mouse cursor is in the same area,
* the `mouseover` event triggers immediately and activates the item under
* the cursor. This might be undesirable when using the keyboard.
*
* Here we save the original `mouseover` handler and remove it on popup show.
* Then add `mousemove` handler. If the mouse moves we consider that mouse interaction
* is desired so we reenable the `mouseover` handler
*/
const textCompleteDropDownElement = $('.textcomplete-dropdown');
if (!savedMouseoverItemHandler) {
// save the original 'mouseover' handeler
try {
savedMouseoverItemHandler = $._data(textCompleteDropDownElement[0], 'events').mouseover[0].handler;
} catch (error) {
console.log(error);
}
if (savedMouseoverItemHandler) {
textCompleteDropDownElement
.off('mouseover') // initially disable it
.off('mousemove') // avoid `mousemove` accumulation if previous show did not trigger `mousemove`
.on('mousemove', '.textcomplete-item', function(e) {
// the mouse has moved so reenable `mouseover`
$(this).parent()
.off('mousemove')
.on('mouseover', '.textcomplete-item', savedMouseoverItemHandler);
// trigger the mouseover handler to select the item under the cursor
savedMouseoverItemHandler(e);
});
}
}
});
// textcomplete autocomplete strategies
// strategy builder helper
const strategy = function(s) {
return $.extend({
template: highlighterAnywhere,
replace: basicReplacer,
context: contexter,
index: 2,
}, s);
};
$textarea.textcomplete('register', [
strategy({ // "command"
match: /^(\s*)(\w*)$/,
search: function(term, callback) {
sendOnEnter = false;
searcher(term, callback, cache.commands, false, true);
},
template: highlighterPrefix,
}),
strategy({ // "get"
match: /^(\s*get\s+)(\w*)$/i,
search: function(term, callback) {
sendOnEnter = true;
searcher(term, function(arr) {
if (term.length > 0 && arr.length > 1) {
// prepend the uncompleted term in the popup
arr = [term].concat(arr);
}
callback(arr);
}, cache.settings, 3);
},
}),
strategy({ // "set"
match: /^(\s*set\s+)(\w*)$/i,
search: function(term, callback) {
sendOnEnter = false;
searcher(term, callback, cache.settings, 3);
},
}),
strategy({ // "set ="
match: /^(\s*set\s+\w*\s*)$/i,
search: function(term, callback) {
sendOnEnter = false;
searcher('', callback, ['='], false);
},
replace: function(value) {
self.openLater();
return basicReplacer(value);
},
}),
strategy({ // "set with value"
match: /^(\s*set\s+(\w+))\s*=\s*(.*)$/i,
search: function(term, callback, match) {
const arr = [];
const settingName = match[2].toLowerCase();
this.isSettingValueArray = false;
this.value = match[3];
sendOnEnter = !!term;
if (settingName in cache.settingsAcceptedValues) {
const val = cache.settingsAcceptedValues[settingName];
if (Array.isArray(val)) {
// setting uses lookup strings
this.isSettingValueArray = true;
sendOnEnter = true;
searcher(term, callback, val, 0);
return;
}
// the settings uses a numeric value.
// Here we use a little trick - we use the autocomplete
// list as kind of a tooltip to display the Accepted Range hint
arr.push(val);
}
callback(arr);
},
replace: function (value) {
if (!this.isSettingValueArray) {
// `value` is the tooltip text, so use the saved match
value = this.value;
}
return `$1 = ${value}`; // cosmetic - make sure we have spaces around the `=`
},
index: 3,
isSettingValueArray: false,
}),
strategy({ // "resource"
match: /^(\s*resource\s+)(\w*)$/i,
search: function(term, callback) {
sendOnEnter = false;
let arr = cache.resources;
arr = ['show'].concat(arr);
searcher(term, callback, arr, 1);
},
replace: function(value) {
if (value in cache.resourcesCount) {
self.openLater();
} else if (value === 'list' || value === 'show') {
sendOnEnter = true;
}
return basicReplacer(value);
},
}),
strategy({ // "resource index"
match: /^(\s*resource\s+(\w+)\s+)(\d*)$/i,
search: function(term, callback, match) {
sendOnEnter = false;
this.savedTerm = term;
callback([`&lt;1-${cache.resourcesCount[match[2].toUpperCase()]}&gt;`]);
},
replace: function() {
if (this.savedTerm) {
self.openLater();
return '$1$3 ';
}
return undefined;
},
context: function(text) {
const matchResource = text.match(/^\s*resource\s+(\w+)\s/i);
// use this strategy only for resources with more than one index
if (matchResource && (cache.resourcesCount[matchResource[1].toUpperCase()] || 0) > 1 ) {
return contexter(text);
}
return false;
},
index: 3,
savedTerm: null,
}),
strategy({ // "resource pin"
match: /^(\s*resource\s+\w+\s+(\d*\s+)?)(\w*)$/i,
search: function(term, callback) {
sendOnEnter = !!term;
if (term) {
if ('none'.startsWith(term)) {
callback(['none']);
} else {
callback(['&lt;pin&gt;']);
}
} else {
callback(['&lt;pin&gt', 'none']);
}
},
template: function(value, term) {
if (value === 'none') {
return highlighterPrefix(value, term);
}
return value;
},
replace: function(value) {
if (value === 'none') {
sendOnEnter = true;
return '$1none ';
}
return undefined;
},
context: function(text) {
const m = text.match(/^\s*resource\s+(\w+)\s+(\d+\s)?/i);
if (m) {
// show pin/none for resources having only one index (it's not needed at the commend line)
// OR having more than one index and the index is supplied at the command line
const count = cache.resourcesCount[m[1].toUpperCase()] || 0;
if (count && (m[2] || count === 1)) {
return contexter(text);
}
}
return false;
},
index: 3,
}),
strategy({ // "feature" and "beeper"
match: /^(\s*(feature|beeper)\s+(-?))(\w*)$/i,
search: function(term, callback, match) {
sendOnEnter = !!term;
let arr = cache[match[2].toLowerCase()];
if (!match[3]) {
arr = ['-', 'list'].concat(arr);
}
searcher(term, callback, arr, 1);
},
replace: function(value) {
if (value === '-') {
self.openLater(true);
return '$1-';
}
return basicReplacer(value);
},
index: 4,
}),
strategy({ // "mixer"
match: /^(\s*mixer\s+)(\w*)$/i,
search: function(term, callback) {
sendOnEnter = true;
searcher(term, callback, cache.mixers, 1);
},
}),
]);
$textarea.textcomplete('register', [
strategy({ // "resource show all", from BF 4.0.0 onwards
match: /^(\s*resource\s+show\s+)(\w*)$/i,
search: function(term, callback) {
sendOnEnter = true;
searcher(term, callback, ['all'], 1, true);
},
template: highlighterPrefix,
}),
]);
// diff command
const diffArgs1 = ["master", "profile", "rates", "all"];
const diffArgs2 = [];
// above 3.4.0
diffArgs2.push("defaults");
diffArgs1.push("hardware");
diffArgs2.push("bare");
diffArgs1.sort();
diffArgs2.sort();
$textarea.textcomplete('register', [
strategy({ // "diff arg1"
match: /^(\s*diff\s+)(\w*)$/i,
search: function(term, callback) {
sendOnEnter = true;
searcher(term, callback, diffArgs1, 1, true);
},
template: highlighterPrefix,
}),
strategy({ // "diff arg1 arg2"
match: /^(\s*diff\s+\w+\s+)(\w*)$/i,
search: function(term, callback) {
sendOnEnter = true;
searcher(term, callback, diffArgs2, 1, true);
},
template: highlighterPrefix,
}),
]);
};

11
package-lock.json generated

@ -19,6 +19,7 @@
"gulp-concat": "^2.6.1",
"inflection": "1.12.0",
"jquery": "2.1.4",
"jquery-textcomplete": "^1.8.5",
"jquery-ui-npm": "1.12.0",
"marked": "^0.3.17",
"minimist": "^1.2.0",
@ -4338,6 +4339,11 @@
"resolved": "https://registry.npmjs.org/jquery/-/jquery-2.1.4.tgz",
"integrity": "sha512-wWR+eCq/T/Qt0NcFyM+QVho0ZVzWxFYANijmSMImXiM5mjr1aOaf4SF0eOEPc92bbK2L2vDpxw3lIszus7eO8Q=="
},
"node_modules/jquery-textcomplete": {
"version": "1.8.5",
"resolved": "https://registry.npmjs.org/jquery-textcomplete/-/jquery-textcomplete-1.8.5.tgz",
"integrity": "sha512-WctSUxFk7GF5Tx2gHeVKrpkQ9tsV7mibBJ0AYNwEx+Zx3ZoUQgU5grkBXY3SCqpq/owMAMEvksN96DBSWT4PSg=="
},
"node_modules/jquery-ui-npm": {
"version": "1.12.0",
"resolved": "https://registry.npmjs.org/jquery-ui-npm/-/jquery-ui-npm-1.12.0.tgz",
@ -12777,6 +12783,11 @@
"resolved": "https://registry.npmjs.org/jquery/-/jquery-2.1.4.tgz",
"integrity": "sha512-wWR+eCq/T/Qt0NcFyM+QVho0ZVzWxFYANijmSMImXiM5mjr1aOaf4SF0eOEPc92bbK2L2vDpxw3lIszus7eO8Q=="
},
"jquery-textcomplete": {
"version": "1.8.5",
"resolved": "https://registry.npmjs.org/jquery-textcomplete/-/jquery-textcomplete-1.8.5.tgz",
"integrity": "sha512-WctSUxFk7GF5Tx2gHeVKrpkQ9tsV7mibBJ0AYNwEx+Zx3ZoUQgU5grkBXY3SCqpq/owMAMEvksN96DBSWT4PSg=="
},
"jquery-ui-npm": {
"version": "1.12.0",
"resolved": "https://registry.npmjs.org/jquery-ui-npm/-/jquery-ui-npm-1.12.0.tgz",

@ -33,6 +33,7 @@
"gulp-concat": "^2.6.1",
"inflection": "1.12.0",
"jquery": "2.1.4",
"jquery-textcomplete": "^1.8.5",
"jquery-ui-npm": "1.12.0",
"marked": "^0.3.17",
"minimist": "^1.2.0",

@ -79,6 +79,23 @@
color: white;
}
.cli-textcomplete-dropdown {
border: 1px solid black;
background-color: #4f4f4f;
border-radius: 5px;
max-height: 50%;
overflow: auto;
list-style: none;
padding: 5px;
margin: 0;
}
.cli-textcomplete-dropdown a {
color: white;
}
.cli-textcomplete-dropdown .active {
background-color: #000000;
}
@media only screen and (max-width: 1055px) , only screen and (max-device-width: 1055px) {
.tab-cli .content_wrapper {

@ -151,6 +151,30 @@ TABS.cli.initialize = function (callback) {
CONFIGURATOR.cliActive = true;
var textarea = $('.tab-cli textarea[name="commands"]');
//////////////////////////////////////////////
//////////////////////////////////////////////
// READ THIS FROM OPTIONS (APP SETTINGS) globalSettings.XXXXX
CliAutoComplete.setEnabled(true);
//////////////////////////////////////////////
//////////////////////////////////////////////
CliAutoComplete.initialize(textarea, self.sendLine.bind(self), writeToOutput);
$(CliAutoComplete).on('build:start', function() {
textarea
.val('')
.attr('placeholder', chrome.i18n.getMessage('cliInputPlaceholderBuilding'))
.prop('disabled', true);
});
$(CliAutoComplete).on('build:stop', function() {
textarea
.attr('placeholder', chrome.i18n.getMessage('cliInputPlaceholder'))
.prop('disabled', false)
.focus();
});
$('.tab-cli .save').click(function() {
var prefix = 'cli';
@ -266,12 +290,19 @@ TABS.cli.initialize = function (callback) {
if (event.which == tabKeyCode) {
// prevent default tabbing behaviour
event.preventDefault();
const outString = textarea.val();
const lastCommand = outString.split("\n").pop();
const command = getCliCommand(lastCommand, self.cliBuffer);
if (command) {
self.sendAutoComplete(command);
textarea.val('');
if (!CliAutoComplete.isEnabled()) {
const outString = textarea.val();
const lastCommand = outString.split("\n").pop();
const command = getCliCommand(lastCommand, self.cliBuffer);
if (command) {
self.sendAutoComplete(command);
textarea.val('');
}
}
else if (!CliAutoComplete.isOpen() && !CliAutoComplete.isBuilding()) {
// force show autocomplete on Tab
CliAutoComplete.openLater(true);
}
}
});
@ -281,6 +312,10 @@ TABS.cli.initialize = function (callback) {
if (event.which == enterKeyCode) {
event.preventDefault(); // prevent the adding of new line
if (CliAutoComplete.isBuilding()) {
return; // silently ignore commands if autocomplete is still building
}
var out_string = textarea.val();
self.history.add(out_string.trim());
@ -300,6 +335,10 @@ TABS.cli.initialize = function (callback) {
var keyUp = {38: true},
keyDown = {40: true};
if (CliAutoComplete.isOpen()) {
return; // disable history keys if autocomplete is open
}
if (event.keyCode in keyUp) {
textarea.val(self.history.prev());
}
@ -335,7 +374,7 @@ TABS.cli.initialize = function (callback) {
}, 400);
}
}
GUI.content_ready(callback);
});
};
@ -370,6 +409,11 @@ function writeToOutput(text) {
}
function writeLineToOutput(text) {
if (CliAutoComplete.isBuilding()) {
CliAutoComplete.builderParseLine(text);
return; // suppress output if in building state
}
if (text.startsWith("### ERROR: ")) {
writeToOutput('<span class="error_message">' + text + '</span><br>');
} else {
@ -444,7 +488,10 @@ TABS.cli.read = function (readInfo) {
this.cliBuffer += currentChar;
}
this.outputHistory += currentChar;
if (!CliAutoComplete.isBuilding()) {
// do not include the building dialog into the history
this.outputHistory += currentChar;
}
if (this.cliBuffer == 'Rebooting') {
CONFIGURATOR.cliActive = false;
@ -459,7 +506,16 @@ TABS.cli.read = function (readInfo) {
if (!CONFIGURATOR.cliValid && validateText.indexOf('CLI') !== -1) {
GUI.log(chrome.i18n.getMessage('cliEnter'));
CONFIGURATOR.cliValid = true;
validateText = "";
if (CliAutoComplete.isEnabled() && !CliAutoComplete.isBuilding()) {
// start building autoComplete
CliAutoComplete.builderStart();
}
}
// fallback to native autocomplete
if (!CliAutoComplete.isEnabled()) {
setPrompt(removePromptHash(this.cliBuffer));
}
setPrompt(removePromptHash(this.cliBuffer));
@ -498,5 +554,8 @@ TABS.cli.cleanup = function (callback) {
if (callback) callback();
}, 1000); // if we dont allow enough time to reboot, CRC of "first" command sent will fail, keep an eye for this one
CONFIGURATOR.cliActive = false;
CliAutoComplete.cleanup();
$(CliAutoComplete).off();
});
};

Loading…
Cancel
Save