mirrors/dbgate
1
0
Fork 0
mirror of https://github.com/dbgate/dbgate synced 2024-11-07 20:26:23 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

better UX of code editor

Browse Source
This commit is contained in:
Jan Prochazka 2022-09-28 13:04:50 +02:00
parent c5a7f458ba
commit e7ac7558ca
2 changed files with 52 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/web/public/global.css
View File

@ -190,4 +190,10 @@ textarea {
.ace_gutter-cell.ace-gutter-sql-run:hover { .ace_gutter-cell.ace-gutter-sql-run:hover {
background-color: var(--theme-bg-2); background-color: var(--theme-bg-2);
}
.ace_gutter-cell.ace-gutter-current-part {
/* background-color: var(--theme-bg-2); */
font-weight: bold;
color: var(--theme-font-hover);
} }

81
packages/web/src/query/AceEditor.svelte
View File

@ -168,7 +168,8 @@
let queryParts = []; let queryParts = [];
let currentPart = null; let currentPart = null;
let currentPartMarker = null; let currentPartLines = [];
// let currentPartMarker = null;
let queryParserWorker; let queryParserWorker;
@ -194,19 +195,17 @@
} }
if (!editor) return { text: '' }; if (!editor) return { text: '' };
const selectedText = editor.getSelectedText(); const selectedText = editor.getSelectedText();
if (selectedText) if (selectedText) {
return { return {
text: selectedText, text: selectedText,
line: editor.getSelectionRange().start.row, line: editor.getSelectionRange().start.row,
}; };
if (editor.getHighlightActiveLine()) {
const line = editor.getSelectionRange().start.row;
return {
text: editor.session.getLine(line),
line,
};
} }
return { text: '' }; const line = editor.getSelectionRange().start.row;
return {
text: editor.session.getLine(line),
line,
};
} }
export function getCodeCompletionCommandText() { export function getCodeCompletionCommandText() {
@ -299,21 +298,27 @@
function processParserResult(data) { function processParserResult(data) {
queryParts = data; queryParts = data;
editor.setHighlightActiveLine(queryParts.length <= 1); // editor.setHighlightActiveLine(queryParts.length <= 1);
changedCurrentQueryPart(); changedCurrentQueryPart();
updateAnnotations(); updateAnnotations();
} }
function updateAnnotations() { function updateAnnotations() {
if (!mode?.includes('sql')) return; if (!mode?.includes('sql')) return;
editor?.session?.setAnnotations([ editor?.session?.setAnnotations([
...currentPartLines.map(row => ({
row,
className: 'ace-gutter-current-part',
})),
...(queryParts || []) ...(queryParts || [])
.filter(part => !(errorMessages || []).find(err => err.line == part.trimStart.line)) .filter(part => !(errorMessages || []).find(err => err.line == part.trimStart?.line))
.map(part => ({ .map(part => ({
row: part.trimStart.line, row: part.trimStart.line,
text: part.text, text: part.text,
className: 'ace-gutter-sql-run', className: currentPartLines.includes(part.trimStart.line)
? 'ace-gutter-sql-run ace-gutter-current-part'
: 'ace-gutter-sql-run',
})), })),
...(errorMessages || []).map(error => ({ ...(errorMessages || []).map(error => ({
row: error.line, row: error.line,
@ -364,21 +369,21 @@
} }
function changedCurrentQueryPart() { function changedCurrentQueryPart() {
if (queryParts.length <= 1) { // if (queryParts.length <= 1) {
removeCurrentPartMarker(); // removeCurrentPartMarker();
return; // return;
} // }
const selectionRange = editor.getSelectionRange(); const selectionRange = editor.getSelectionRange();
if ( // if (
selectionRange.start.row != selectionRange.end.row || // selectionRange.start.row != selectionRange.end.row ||
selectionRange.start.column != selectionRange.end.column // selectionRange.start.column != selectionRange.end.column
) { // ) {
removeCurrentPartMarker(); // removeCurrentPartMarker();
currentPart = null; // currentPart = null;
return; // return;
} // }
const cursor = selectionRange.start; const cursor = selectionRange.start;
const part = queryParts.find( const part = queryParts.find(
@ -388,25 +393,30 @@
); );
if (part?.text != currentPart?.text || part?.start?.position != currentPart?.start?.position) { if (part?.text != currentPart?.text || part?.start?.position != currentPart?.start?.position) {
removeCurrentPartMarker(); // removeCurrentPartMarker();
currentPart = part; currentPart = part;
currentPartLines = [];
if (currentPart) { if (currentPart) {
const start = currentPart.trimStart || currentPart.start; const start = currentPart.trimStart || currentPart.start;
const end = currentPart.trimEnd || currentPart.end; const end = currentPart.trimEnd || currentPart.end;
currentPartMarker = editor if (start && end) {
.getSession() currentPartLines = _.range(start.line, end.line + 1);
.addMarker(new ace.Range(start.line, start.column, end.line, end.column), 'ace_active-line', 'text'); }
// currentPartMarker = editor
// .getSession()
// .addMarker(new ace.Range(start.line, start.column, end.line, end.column), 'ace_active-line', 'text');
} }
updateAnnotations();
} }
} }
function removeCurrentPartMarker() { // function removeCurrentPartMarker() {
if (currentPartMarker != null) { // if (currentPartMarker != null) {
editor.getSession().removeMarker(currentPartMarker); // editor.getSession().removeMarker(currentPartMarker);
currentPartMarker = null; // currentPartMarker = null;
} // }
} // }
onMount(() => { onMount(() => {
editor = ace.edit(EDITOR_ID); editor = ace.edit(EDITOR_ID);
@ -417,6 +427,7 @@
editor.getSession().setMode('ace/mode/' + mode); editor.getSession().setMode('ace/mode/' + mode);
editor.setTheme('ace/theme/' + theme); editor.setTheme('ace/theme/' + theme);
editor.setValue(value, 1); editor.setValue(value, 1);
editor.setHighlightActiveLine(false);
contentBackup = value; contentBackup = value;
setEventCallBacks(); setEventCallBacks();
if (options) { if (options) {