dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-17 21:26:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

sql editor - play icon to execute sql fragment

Browse Source
This commit is contained in:
Jan Prochazka
2022-09-25 14:43:10 +02:00
parent 1535dfd407
commit 2f820d8dac
5 changed files with 136 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
misc/play-dark-mode.svg Normal file
View File

@@ -0,0 +1,14 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 17.804 17.804" style="enable-background:new 0 0 17.804 17.804;" xml:space="preserve">
<g>
<g id="c98_play">
<path fill='#ccc' d="M2.067,0.043C2.21-0.028,2.372-0.008,2.493,0.085l13.312,8.503c0.094,0.078,0.154,0.191,0.154,0.313
c0,0.12-0.061,0.237-0.154,0.314L2.492,17.717c-0.07,0.057-0.162,0.087-0.25,0.087l-0.176-0.04
c-0.136-0.065-0.222-0.207-0.222-0.361V0.402C1.844,0.25,1.93,0.107,2.067,0.043z"/>
</g>
<g id="Capa_1_78_">
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 733 B

14
misc/play-light-mode.svg Normal file
View File

@@ -0,0 +1,14 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 17.804 17.804" style="enable-background:new 0 0 17.804 17.804;" xml:space="preserve">
<g>
<g id="c98_play">
<path fill='#444' d="M2.067,0.043C2.21-0.028,2.372-0.008,2.493,0.085l13.312,8.503c0.094,0.078,0.154,0.191,0.154,0.313
c0,0.12-0.061,0.237-0.154,0.314L2.492,17.717c-0.07,0.057-0.162,0.087-0.25,0.087l-0.176-0.04
c-0.136-0.065-0.222-0.207-0.222-0.361V0.402C1.844,0.25,1.93,0.107,2.067,0.043z"/>
</g>
<g id="Capa_1_78_">
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 733 B

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

@@ -167,3 +167,27 @@ textarea {
color: var(--theme-font-1);
border: 1px solid var(--theme-border);
}
.ace_gutter-cell.ace-gutter-sql-run {
background-repeat: no-repeat;
background-position: 2px center;
/* content: '▶';
margin-right: 3px; */
/* border-radius: 20px 0px 0px 20px; */
/* Change the color of the breakpoint if you want
box-shadow: 0px 0px 1px 1px #248c46 inset; */
}
.theme-type-light .ace_gutter-cell.ace-gutter-sql-run {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMTcuODA0IDE3LjgwNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTcuODA0IDE3LjgwNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnIGlkPSJjOThfcGxheSI+CgkJPHBhdGggZmlsbD0nIzQ0NCcgZD0iTTIuMDY3LDAuMDQzQzIuMjEtMC4wMjgsMi4zNzItMC4wMDgsMi40OTMsMC4wODVsMTMuMzEyLDguNTAzYzAuMDk0LDAuMDc4LDAuMTU0LDAuMTkxLDAuMTU0LDAuMzEzCgkJCWMwLDAuMTItMC4wNjEsMC4yMzctMC4xNTQsMC4zMTRMMi40OTIsMTcuNzE3Yy0wLjA3LDAuMDU3LTAuMTYyLDAuMDg3LTAuMjUsMC4wODdsLTAuMTc2LTAuMDQKCQkJYy0wLjEzNi0wLjA2NS0wLjIyMi0wLjIwNy0wLjIyMi0wLjM2MVYwLjQwMkMxLjg0NCwwLjI1LDEuOTMsMC4xMDcsMi4wNjcsMC4wNDN6Ii8+Cgk8L2c+Cgk8ZyBpZD0iQ2FwYV8xXzc4XyI+Cgk8L2c+CjwvZz4KPC9zdmc+Cg==);
}
.theme-type-dark .ace_gutter-cell.ace-gutter-sql-run {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMTcuODA0IDE3LjgwNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTcuODA0IDE3LjgwNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnIGlkPSJjOThfcGxheSI+CgkJPHBhdGggZmlsbD0nI2RkZCcgZD0iTTIuMDY3LDAuMDQzQzIuMjEtMC4wMjgsMi4zNzItMC4wMDgsMi40OTMsMC4wODVsMTMuMzEyLDguNTAzYzAuMDk0LDAuMDc4LDAuMTU0LDAuMTkxLDAuMTU0LDAuMzEzCgkJCWMwLDAuMTItMC4wNjEsMC4yMzctMC4xNTQsMC4zMTRMMi40OTIsMTcuNzE3Yy0wLjA3LDAuMDU3LTAuMTYyLDAuMDg3LTAuMjUsMC4wODdsLTAuMTc2LTAuMDQKCQkJYy0wLjEzNi0wLjA2NS0wLjIyMi0wLjIwNy0wLjIyMi0wLjM2MVYwLjQwMkMxLjg0NCwwLjI1LDEuOTMsMC4xMDcsMi4wNjcsMC4wNDN6Ii8+Cgk8L2c+Cgk8ZyBpZD0iQ2FwYV8xXzc4XyI+Cgk8L2c+CjwvZz4KPC9zdmc+Cg==);
}
.ace_gutter-cell.ace-gutter-sql-run:hover {
background-color: var(--theme-bg-2);
}

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

@@ -155,6 +155,7 @@
export let readOnly = false;
export let splitterOptions = null;
export let onKeyDown = null;
export let onExecuteFragment = null;
const tabVisible: any = getContext('tabVisible');
@@ -287,6 +288,17 @@
queryParts = data;
editor.setHighlightActiveLine(queryParts.length <= 1);
changedCurrentQueryPart();
updateAnnotations();
}
function updateAnnotations() {
editor.session.setAnnotations(
(queryParts || []).map(part => ({
row: part.trimStart.line,
text: part.text,
className: 'ace-gutter-sql-run',
}))
);
}
const handleContextMenu = e => {
@@ -304,8 +316,6 @@
function changedQueryParts() {
const editor = getEditor();
if (splitterOptions && editor && queryParserWorker) {
const editor = getEditor();
const message = {
text: editor.getValue(),
options: {
@@ -392,6 +402,77 @@
editor.container.addEventListener('contextmenu', handleContextMenu);
editor.keyBinding.addKeyboardHandler(handleKeyDown);
changedQueryParts();
// editor.session.addGutterDecoration(0, 'ace-gutter-sql-run');
// editor.session.setAnnotations([
// {
// row: 1,
// text: 'SQL SCRIPT 0',
// type: 'gutter',
// },
// ]);
// editor.getSession().setAnnotations([
// {
// row: 0,
// // column: 0,
// text: 'Error Message', // Or the Json reply from the parser
// type: 'error', // also "warning" and "information"
// },
// {
// row: 1,
// // column: 0,
// text: 'SELECT * FROM \n22222', // Or the Json reply from the parser
// // type: 'info', // also "warning" and "information"
// className: 'ace-gutter-sql-run',
// },
// ]);
// editor.on('guttermousemove', e => console.log('MOVE', e.target), true);
// editor.on('guttermouseout', e => console.log('OUT', e.target), true);
// editor.on('guttermouseleave', e => console.log('LEAVE', e.target), true);
// editor.session.setBreakpoint(0);
// editor.on(
// 'gutterclick',
// e => {
// const row = e.getDocumentPosition().row;
// const part = (queryParts || []).find(part => part.trimStart.line == row);
// if (part && onExecuteFragment) {
// onExecuteFragment(part.text);
// e.stop();
// }
// },
// true
// );
editor.on(
'guttermousedown',
e => {
const row = e.getDocumentPosition().row;
const part = (queryParts || []).find(part => part.trimStart.line == row);
if (part && onExecuteFragment) {
onExecuteFragment(part.text);
e.stop();
editor.moveCursorTo(part.trimStart.line, 0);
editor.selection.clearSelection()
}
},
true
);
// editor.session.gutterRenderer = {
// getWidth: function (session, lastLineNumber, config) {
// return lastLineNumber.toString().length * config.characterWidth;
// },
// getText: function (session, row) {
// return (row + 1).toString();
// // return String.fromCharCode(row + 65);
// },
// };
});
onDestroy(() => {

1
packages/web/src/tabs/QueryTab.svelte
View File

@@ -295,6 +295,7 @@
invalidateCommands();
}}
bind:this={domEditor}
onExecuteFragment={sql => executeCore(sql)}
/>
{:else}
<AceEditor