diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 85d5916..43eaa7d 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -72,6 +72,6 @@ export class AppComponent { } }) - console.log('constructor:::', { params, getParam }); + // console.log('constructor:::', { params, getParam }); } } diff --git a/src/app/components/ace-editor-ext/ace-editor-ext.component.html b/src/app/components/ace-editor-ext/ace-editor-ext.component.html index c38b013..0ebe127 100644 --- a/src/app/components/ace-editor-ext/ace-editor-ext.component.html +++ b/src/app/components/ace-editor-ext/ace-editor-ext.component.html @@ -11,11 +11,11 @@ #editor > +
- - info + + info
diff --git a/src/app/components/ace-editor-ext/ace-editor-ext.component.ts b/src/app/components/ace-editor-ext/ace-editor-ext.component.ts index f76f499..d853cb5 100644 --- a/src/app/components/ace-editor-ext/ace-editor-ext.component.ts +++ b/src/app/components/ace-editor-ext/ace-editor-ext.component.ts @@ -21,8 +21,28 @@ import { DictionaryDefault } from './dictionary-default'; changeDetection: ChangeDetectionStrategy.OnPush }) export class AceEditorExtComponent implements OnInit, AfterViewInit, OnDestroy { + _sqlRequest: any = ''; + @Input() + set sqlRequest(value: string) { + this._sqlRequest = value; + const caret = this.getCaretPosition(); + const el = this.getTextElement(); + console.log({ el, value }); + if (el) { + el.innerText = value; + if (this.lastCaretPoint) { + // setTimeout(() => { + this.setCaret(caret); + // }, 0); + } + } + + } + get sqlRequest(): string { + return this._sqlRequest; + } + - @Input() sqlRequest: any = ''; @Input() isDarkMode = false; lastCaretPoint = 0; _dictionaryFull: any[] = []; @@ -31,7 +51,6 @@ export class AceEditorExtComponent implements OnInit, AfterViewInit, OnDestroy { @Input() set dictionaryFull(val: any[]) { - // console.log(val); this._dictionaryFull = val; this._dictionaryFull.sort(); } @@ -75,15 +94,7 @@ export class AceEditorExtComponent implements OnInit, AfterViewInit, OnDestroy { this.editor.getEditor().$blockScrolling = Infinity; document.body.appendChild(this.autocomplete.nativeElement); } - getCaretPosition() { - const sel: any = window.getSelection(); - console.log('sel.focusOffset', sel.focusOffset, sel?.parentNode?.className); - if (sel?.focusNode?.parentNode?.className === 'hide-text-container') { - this.lastCaretPoint = sel?.focusOffset; - } - return this.lastCaretPoint; - } mouseUp() { this.getCaretPosition(); if (this.isAutocompleteVisible) { @@ -91,6 +102,7 @@ export class AceEditorExtComponent implements OnInit, AfterViewInit, OnDestroy { } } textChange(event?: any) { + // console.log({event}); if (this.wasClick) { this.wasClick = false; return; @@ -108,7 +120,7 @@ export class AceEditorExtComponent implements OnInit, AfterViewInit, OnDestroy { const range = selection.getRangeAt(0); const [rect] = range.getClientRects(); - console.log({ rect }) + console.log({ selection, range, rect }) const position: any = rect || this.getTextElement()?.getBoundingClientRect() || { left: 0, @@ -130,19 +142,15 @@ export class AceEditorExtComponent implements OnInit, AfterViewInit, OnDestroy { this.dictionary = this.dictionaryFull; } - // this.dictionary = this.dictionary.slice(0, 20); - - // console.log('textChange:show'); this.isAutocompleteVisible = !!this.lastWord && this.dictionary.length > 0; console.log(this.lastWord, position); - requestAnimationFrame(() => { - this.cdr.detectChanges(); - }) + // requestAnimationFrame(() => { + // }) + this.cdr.detectChanges(); } getTextElement(): any { - return this.contenteditableContainer.nativeElement; - // return this.wrapperAceEditor?.nativeElement?.querySelector('.ace_text-input'); + return document.querySelector('.hide-text-container'); } @HostListener('document:keydown', ['$event']) @@ -168,16 +176,59 @@ export class AceEditorExtComponent implements OnInit, AfterViewInit, OnDestroy { this.cdr.detectChanges(); } } - setCaret(position = 0) { + getCaretPosition() { + const sel: any = window.getSelection(); + // console.log('sel.focusOffset', sel.focusOffset, sel?.parentNode?.className); + if (sel?.focusNode?.parentNode?.className === 'hide-text-container') { + const an = sel.anchorNode; + const sortedNodes = Array.from(an.parentElement.childNodes); // .filter((i: any) => i.tagName !== 'BR'); + const nodeIndex = sortedNodes.findIndex((i: any) => i === an); + const beforeNodesLength = sortedNodes.reduce((a: number, b: any, k: number) => { + if (nodeIndex > k) { + if (b.tagName === 'BR') { + a++; + } else { + a += b.length; + } + } + return a + }, 0); + const out = sel?.focusOffset + beforeNodesLength; + // if (out > 0) { + this.lastCaretPoint = out; + // } + console.log('getCaretPosition:', { an, sortedNodes, nodeIndex, beforeNodesLength, lastCaretPoint: this.lastCaretPoint }) + } + + return this.lastCaretPoint; + } + setCaret(position: number) { + if (!position) { + return; + } + position = Math.min(position, this.sqlRequest.length); + console.log({ setCaret: position }); const el = document.getElementsByClassName("hide-text-container"); const range = document.createRange(); const sel: any = window.getSelection(); - - range.setStart(el[0].childNodes[0], position); - range.collapse(true); - - sel.removeAllRanges(); - sel.addRange(range); + const { childNodes } = el[0]; + + let n = position; + let m = 0; + const currentTextNode: any = Array.from(childNodes) + .find((i: any) => { + m = i.tagName === 'BR' ? 1: i.length; + n -= m; + return n < 0 + }); + if (currentTextNode) { + console.log({ position, childNodes, currentTextNode, sR: this.sqlRequest.length }); + range.setStart(currentTextNode, n + m); + range.collapse(true); + + sel.removeAllRanges(); + sel.addRange(range); + } this.cdr.detectChanges(); } autocompleteSelectorIndex = 0; @@ -214,10 +265,8 @@ export class AceEditorExtComponent implements OnInit, AfterViewInit, OnDestroy { this.insertCharByCaretPosition(`\n`); event.stopPropagation(); event.preventDefault(); - return; } - break; - + return; case 'Tab': this.insertCharByCaretPosition(` `); event.stopPropagation(); @@ -244,9 +293,13 @@ export class AceEditorExtComponent implements OnInit, AfterViewInit, OnDestroy { this.getCaretPosition(); let start = this.sqlRequest.slice(0, this.lastCaretPoint); let end = this.sqlRequest.slice(this.lastCaretPoint); + this.lastCaretPoint = (start + char).length; this.sqlRequest = start + char + end; + requestAnimationFrame(() => { + this.setCaret((start + char).length); + this.cdr.detectChanges(); + }) this.cdr.detectChanges(); - this.setCaret((start + char).length); } onItemClick(event: any) { console.log('onItemClick', event); @@ -254,9 +307,6 @@ export class AceEditorExtComponent implements OnInit, AfterViewInit, OnDestroy { this.replaceByPositionCaret(event?.name); this.textChange(this.lastCaretPoint); this.isAutocompleteVisible = false; - // requestAnimationFrame(() => { - // this.setCaret(this.sqlRequest.length); - // }) this.cdr.detectChanges(); } replaceByPositionCaret(replacementWord: string) { diff --git a/src/app/components/login-form/login-form.component.ts b/src/app/components/login-form/login-form.component.ts index f202642..7f4f9c2 100644 --- a/src/app/components/login-form/login-form.component.ts +++ b/src/app/components/login-form/login-form.component.ts @@ -20,7 +20,7 @@ const NEW_CONNECT = '(new connect)'; export class LoginFormComponent implements OnInit, AfterViewInit { _isAccess: boolean = false; @Input() set isAccess(val) { - console.log("set isAccess", val); + // console.log("set isAccess", val); this._isAccess = val; // if (val) { this.ngAfterViewInit(); @@ -55,7 +55,7 @@ export class LoginFormComponent implements OnInit, AfterViewInit { this._errorMessage = val; if (!!val && this.dbItems?.length > 0) { const dbItem = this.dbItems.find(dbItem => dbItem?.value?.dbLink === this.settings.dbLink); - console.log("successMessage", { val, dbItem }); + // console.log("successMessage", { val, dbItem }); if (dbItem) { dbItem.value.isSucceeded = false; setStorage('dbItems', this.dbItems); @@ -74,7 +74,7 @@ export class LoginFormComponent implements OnInit, AfterViewInit { this._successMessage = val; if (!!val && this.dbItems?.length > 0) { const dbItem = this.dbItems.find(dbItem => dbItem?.value?.dbLink === this.settings.dbLink); - console.log("successMessage", { val, dbItem }); + // console.log("successMessage", { val, dbItem }); if (dbItem) { dbItem.value.isSucceeded = true; setStorage('dbItems', this.dbItems); @@ -112,7 +112,6 @@ export class LoginFormComponent implements OnInit, AfterViewInit { this.cdr.detectChanges(); } this.changeDbItems.emit(this.dbItems); - console.log('ngOnInit', this.dbItems) } checkIfHasOneConnect() { const s = this.connectionList?.selectedOptions?.selected?.[0]?.value?.value; @@ -122,8 +121,6 @@ export class LoginFormComponent implements OnInit, AfterViewInit { return b && c; } ngAfterViewInit() { - console.log('ngAfterViewInit') - const c = () => { const listItem = this.connectionList?.options?.find( (connection: any) => connection?.value?.value?.dbLink === this.settings.dbLink @@ -157,7 +154,7 @@ export class LoginFormComponent implements OnInit, AfterViewInit { }; this.dbItems.push(newConnection); this.settings = newConnection.value; - console.log('connectionList', this.connectionList); + // console.log('connectionList', this.connectionList); this.cdr.detectChanges(); } requestAnimationFrame(() => { @@ -173,7 +170,7 @@ export class LoginFormComponent implements OnInit, AfterViewInit { // this.connectionList.options.first.toggle(); // } this.settings = this.connectionList.selectedOptions.selected[0].value.value; - console.log(this.settings); + // console.log(this.settings); this.cdr.detectChanges(); } removeConnection() { diff --git a/src/app/components/ngx-uplot/ngx-uplot.component.ts b/src/app/components/ngx-uplot/ngx-uplot.component.ts index 8ea3522..6908d29 100644 --- a/src/app/components/ngx-uplot/ngx-uplot.component.ts +++ b/src/app/components/ngx-uplot/ngx-uplot.component.ts @@ -57,7 +57,7 @@ export class NgxUplotComponent implements AfterViewInit { @Input() set data(value: any) { this._details = value?.data; - console.log('this._details => ', this._details); + // console.log('this._details => ', this._details); try { const labels = value?.meta?.map((i: any) => i.name); this._details = this._details?.map((d: any) => { @@ -82,12 +82,12 @@ export class NgxUplotComponent implements AfterViewInit { this.opts.series = [{}, ...series]; - console.log('this.opts.series', this.opts.series); + // console.log('this.opts.series', this.opts.series); this._details = [ [...Array(value?.data?.length).keys()], ...out ]; - console.log('FORMATTED:this._details => ', this._details); + // console.log('FORMATTED:this._details => ', this._details); this.makeChart(this._details); } catch (e) { } } @@ -98,7 +98,7 @@ export class NgxUplotComponent implements AfterViewInit { @ViewChild('chartUPlot', { static: true }) chartUPlot: any | HTMLElement; constructor() { - console.log(this.data); + // console.log(this.data); } randColor() { return "#000000".replace(/0/g, () => (~~(Math.random() * 16)).toString(16)); @@ -112,10 +112,10 @@ export class NgxUplotComponent implements AfterViewInit { this.indexOfField.push(out); return out; }) - console.log('<< outData >>', outData); + // console.log('<< outData >>', outData); return outData; } else { - console.log('<< this.data >>', this.data); + // console.log('<< this.data >>', this.data); return this.data } } @@ -160,6 +160,6 @@ export class NgxUplotComponent implements AfterViewInit { } hide(event: any) { this.makeChart(this.data) - console.log(event); + // console.log(event); } } diff --git a/src/app/helper/windowFunctions.ts b/src/app/helper/windowFunctions.ts index ffe7d8c..19ab2c1 100644 --- a/src/app/helper/windowFunctions.ts +++ b/src/app/helper/windowFunctions.ts @@ -86,7 +86,7 @@ export function setLink(query: string = '') { return ''; } if (key === 'mode') { - console.log([key, value]); + // console.log([key, value]); return value ? 'mode=dark' : ''; } diff --git a/src/app/pages/dialogs/dialog-kiosk/dialog-kiosk.component.ts b/src/app/pages/dialogs/dialog-kiosk/dialog-kiosk.component.ts index 2083c30..bf63467 100644 --- a/src/app/pages/dialogs/dialog-kiosk/dialog-kiosk.component.ts +++ b/src/app/pages/dialogs/dialog-kiosk/dialog-kiosk.component.ts @@ -46,9 +46,9 @@ export class DialogKioskComponent implements OnInit, AfterContentChecked { ngAfterContentChecked(): void { if (this.dataHash !== this.getHash()) { this.dataHash = this.getHash(); - console.log( - this.getHash() - ) + // console.log( + // this.getHash() + // ) this.setLink() } @@ -79,7 +79,7 @@ export class DialogKioskComponent implements OnInit, AfterContentChecked { return ''; } if (key === 'mode') { - console.log([key, value]); + // console.log([key, value]); return value ? 'mode=dark' : ''; } @@ -121,7 +121,7 @@ export class DialogKioskComponent implements OnInit, AfterContentChecked { const successful = document.execCommand('copy'); if (successful) { openAlert(); - console.log('was copied') + // console.log('was copied') } } catch (err) { diff --git a/src/app/pages/home.page/home.page.component.ts b/src/app/pages/home.page/home.page.component.ts index 84e3165..41cdfd0 100644 --- a/src/app/pages/home.page/home.page.component.ts +++ b/src/app/pages/home.page/home.page.component.ts @@ -32,7 +32,7 @@ export class HomePageComponent implements OnInit { _selectedDB: any; readyToWork = false; set selectedDB(val: any) { - console.log('set new value', val); + // console.log('set new value', val); if (this.dbLink === val?.value?.dbLink && this.dbLogin === val?.value?.dbLogin && @@ -100,7 +100,7 @@ export class HomePageComponent implements OnInit { private docsService: DocsService, private cdr: ChangeDetectorRef, public dialog: MatDialog, - private alertService: AlertService + // private alertService: AlertService ) { if (getParam.kiosk) { this.isDarkMode = getParam.mode === 'dark'; @@ -118,7 +118,7 @@ export class HomePageComponent implements OnInit { login: getParam.db_login, password: getParam.db_pass } : getStorage('AUTH_DATA'); - console.log("auth", !!auth?.dbURL) + // console.log("auth", !!auth?.dbURL) if (auth?.dbURL) { this.dbLink = auth.dbURL; @@ -133,7 +133,7 @@ export class HomePageComponent implements OnInit { await this.getDynamicDictionary(); }); } - console.log(this.currentRow.size) + // console.log(this.currentRow.size) this.docsService.listen().subscribe(doc_link => { this.isDocsShows = false; this.cdr.detectChanges(); @@ -188,7 +188,7 @@ export class HomePageComponent implements OnInit { if (!data && typeof result === 'string') { data = result.split('\n').map(i => ([i])); } - console.log({ data }); + // console.log({ data }); const dbTreeData: any[] = []; const stack = async ([dbName]: any) => { await promiseWait(5); @@ -256,7 +256,7 @@ export class HomePageComponent implements OnInit { formatData(data: any) { data = data || { meta: [], data: [] }; - console.log(data); + // console.log(data); if (typeof data !== 'object') { this.details = data; } else { @@ -285,7 +285,7 @@ export class HomePageComponent implements OnInit { this.isAccess = true; return true; } catch (error) { - console.log('ERROR', error) + // console.log('ERROR', error) // location.hash = ''; return false; } @@ -296,7 +296,7 @@ export class HomePageComponent implements OnInit { location.hash = '#query=' + encodeURI(this.sqlRequest); } else { location.hash = setLink(this.sqlRequest); - console.log(location.hash) + // console.log(location.hash) } } @@ -368,7 +368,7 @@ export class HomePageComponent implements OnInit { } onClickRun(event?: any): void { - console.log(event); + // console.log(event); this.sqlRequest = event; this.SQL(this.sqlRequest); @@ -465,7 +465,7 @@ export class HomePageComponent implements OnInit { sqlStr += ` ${FORMAT} ` + (isCompact ? 'JSONCompact' : type); this.apiService.runQuery(sqlStr).then(result => { - console.log(result, sqlStr) + // console.log(result, sqlStr) if (type === 'csv') { saveToFile(result, fname + format); } else { @@ -520,15 +520,15 @@ export class HomePageComponent implements OnInit { (parseFloat(stat?.elapsed || 0) || 0.001) ); - console.log({ - stat, - rows, - elapsed, - rows_read, - bytes_read, - rowsPerSec, - bytesPerSec - }) + // console.log({ + // stat, + // rows, + // elapsed, + // rows_read, + // bytes_read, + // rowsPerSec, + // bytesPerSec + // }) return [ `${rows} rows in set. Elapsed ${elapsed}`, rows_read && ` Processed ${rows_read} rows`, @@ -542,7 +542,7 @@ export class HomePageComponent implements OnInit { this.selectedDB = DBItems.find((item: any) => { return item.value.dbLink === this.dbLink }) - console.log(this.dbItems, this.selectedDB); + // console.log(this.dbItems, this.selectedDB); requestAnimationFrame(() => { this.cdr.detectChanges(); }) @@ -559,7 +559,7 @@ export class HomePageComponent implements OnInit { }); dialogRef.afterClosed().subscribe((result: any) => { - console.log('The dialog was closed', { result }); + // console.log('The dialog was closed', { result }); requestAnimationFrame(() => { this.cdr.detectChanges(); }); @@ -567,7 +567,7 @@ export class HomePageComponent implements OnInit { } removeItemHistory(item: any): void { this.SqlArchive = this.SqlArchive.filter(i => i !== item); - console.log(this.SqlArchive, item); + // console.log(this.SqlArchive, item); localStorage.setItem(this.keyOfSqlHistory(), JSON.stringify(this.SqlArchive)); } } diff --git a/src/app/services/api.service.ts b/src/app/services/api.service.ts index 6b41fe1..b7efa09 100644 --- a/src/app/services/api.service.ts +++ b/src/app/services/api.service.ts @@ -39,7 +39,7 @@ export class ApiService { this.login !== postData.login && this.password !== postData.password ) { - console.log({ bufferParams: this.bufferParams }); + // console.log({ bufferParams: this.bufferParams }); const { login = this.login, password = this.password diff --git a/src/app/services/worker-manager.service.ts b/src/app/services/worker-manager.service.ts index 44a1cb0..23a0a6e 100644 --- a/src/app/services/worker-manager.service.ts +++ b/src/app/services/worker-manager.service.ts @@ -14,7 +14,7 @@ export class WorkerManagerService { { type: 'module' } ); } - console.log('==== WorkerManagerService[constructor] ===='); + // console.log('==== WorkerManagerService[constructor] ===='); this.worker = WorkerManagerService.worker; } makeNewWorkerInstance() { diff --git a/src/app/workers/httpClientWorker.ts b/src/app/workers/httpClientWorker.ts index 0d8a287..d87c276 100644 --- a/src/app/workers/httpClientWorker.ts +++ b/src/app/workers/httpClientWorker.ts @@ -17,17 +17,17 @@ export class HttpClientWorker { xhr.send(postData); xhr.onerror = (data) => { - console.log('xhr.onerror', { data }); + // console.log('xhr.onerror', { data }); reject(xhr); } xhr.onabort = (data) => { - console.log('xhr.onabort', { data }); + // console.log('xhr.onabort', { data }); reject(xhr); } xhr.ontimeout = (data) => { - console.log('xhr.ontimeout', { data }); + // console.log('xhr.ontimeout', { data }); reject(xhr); }