Skip to content

Commit

Permalink
Merge pull request #25 from metrico/devel
Browse files Browse the repository at this point in the history 
fix: #21 Unable to type a query, cursor moves to random location while typing
  • Loading branch information
@RFbkak37y3kIY
RFbkak37y3kIY authored Sep 14, 2022
2 parents b971a5b + 852dd51 commit 0b9868e
Show file tree
Hide file tree
Showing 11 changed files with 139 additions and 85 deletions.
2 changes: 1 addition & 1 deletion src/app/app.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,6 @@ export class AppComponent {
}
})

console.log('constructor:::', { params, getParam });
// console.log('constructor:::', { params, getParam });
}
}
13 changes: 10 additions & 3 deletions src/app/components/ace-editor-ext/ace-editor-ext.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,11 @@
#editor
></ace-editor>
</div>
<!-- [textContent]="sqlRequest" -->
<div
contenteditable="true"
spellcheck="false"
class="hide-text-container"
[textContent]="sqlRequest"
(input)="setRequestData()"
(mouseup)="mouseUp()"
(keydown)="keydown($event)"
Expand Down Expand Up @@ -65,8 +65,15 @@

{{ item.name }}
</div>
<span style="float: right; flex: 1; text-align: end" *ngIf="!!item.doc_link">
<mat-icon class="customIconSize" (click)="setInfo(item.doc_link)">info</mat-icon>
<span
style="float: right; flex: 1; text-align: end"
*ngIf="!!item.doc_link"
>
<mat-icon
class="customIconSize"
(click)="setInfo(item.doc_link)"
>info</mat-icon
>
</span>
</div>
</div>
Expand Down
116 changes: 83 additions & 33 deletions src/app/components/ace-editor-ext/ace-editor-ext.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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[] = [];
Expand All @@ -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();
}
Expand Down Expand Up @@ -75,22 +94,15 @@ 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) {
this.textChange();
}
}
textChange(event?: any) {
// console.log({event});
if (this.wasClick) {
this.wasClick = false;
return;
Expand All @@ -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,
Expand All @@ -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'])
Expand All @@ -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;
Expand Down Expand Up @@ -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();
Expand All @@ -244,19 +293,20 @@ 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);

this.replaceByPositionCaret(event?.name);
this.textChange(this.lastCaretPoint);
this.isAutocompleteVisible = false;
// requestAnimationFrame(() => {
// this.setCaret(this.sqlRequest.length);
// })
this.cdr.detectChanges();
}
replaceByPositionCaret(replacementWord: string) {
Expand Down
13 changes: 5 additions & 8 deletions src/app/components/login-form/login-form.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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);
Expand All @@ -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);
Expand Down Expand Up @@ -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;
Expand All @@ -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
Expand Down Expand Up @@ -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(() => {
Expand All @@ -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() {
Expand Down
14 changes: 7 additions & 7 deletions src/app/components/ngx-uplot/ngx-uplot.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand All @@ -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) { }
}
Expand All @@ -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));
Expand All @@ -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
}
}
Expand Down Expand Up @@ -160,6 +160,6 @@ export class NgxUplotComponent implements AfterViewInit {
}
hide(event: any) {
this.makeChart(this.data)
console.log(event);
// console.log(event);
}
}
2 changes: 1 addition & 1 deletion src/app/helper/windowFunctions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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' : '';
}

Expand Down
10 changes: 5 additions & 5 deletions src/app/pages/dialogs/dialog-kiosk/dialog-kiosk.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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()
}
Expand Down Expand Up @@ -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' : '';
}

Expand Down Expand Up @@ -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) {
Expand Down
Loading

0 comments on commit 0b9868e

Please sign in to comment.