diff --git a/misc/play-dark-mode.svg b/misc/play-dark-mode.svg new file mode 100644 index 000000000..093288891 --- /dev/null +++ b/misc/play-dark-mode.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + diff --git a/misc/play-light-mode.svg b/misc/play-light-mode.svg new file mode 100644 index 000000000..51bdf59a7 --- /dev/null +++ b/misc/play-light-mode.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + diff --git a/packages/web/public/global.css b/packages/web/public/global.css index df96b6ae1..0108d0988 100644 --- a/packages/web/public/global.css +++ b/packages/web/public/global.css @@ -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); +} \ No newline at end of file diff --git a/packages/web/src/query/AceEditor.svelte b/packages/web/src/query/AceEditor.svelte index 8544f3b33..58a2ff404 100644 --- a/packages/web/src/query/AceEditor.svelte +++ b/packages/web/src/query/AceEditor.svelte @@ -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(() => { diff --git a/packages/web/src/tabs/QueryTab.svelte b/packages/web/src/tabs/QueryTab.svelte index 9166fcbaa..5b079eef3 100644 --- a/packages/web/src/tabs/QueryTab.svelte +++ b/packages/web/src/tabs/QueryTab.svelte @@ -295,6 +295,7 @@ invalidateCommands(); }} bind:this={domEditor} + onExecuteFragment={sql => executeCore(sql)} /> {:else}