Skip to content

Commit

Permalink
hopefully last ketcher fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@NikoAnderson
NikoAnderson committed Jul 18, 2024
1 parent e17d2f1 commit 3a038b1
Show file tree
Hide file tree
Showing 9 changed files with 101 additions and 90 deletions.
39 changes: 35 additions & 4 deletions projects/ketcher-wrapper/src/lib/ketcher-wrapper.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { Ketcher } from './ketcher.model';
export class KetcherWrapperComponent implements OnInit, AfterViewInit {
@ViewChild('ketcherFrame', { static: true }) ketcherFrame: { nativeElement: HTMLIFrameElement };
@Output() ketcherOnLoad = new EventEmitter<any>();
randomId: string;
safeKetcherFilePath: SafeUrl;
@ViewChild('ketcherBody') kBod: ElementRef;
@ViewChild('ketcherFrame') iframe: ElementRef;
Expand All @@ -18,11 +19,10 @@ export class KetcherWrapperComponent implements OnInit, AfterViewInit {
private sanitizer: DomSanitizer,
private renderer: Renderer2
) {

this.randomId = Math.random().toString(36).replace('0.', '');
}

ngOnInit() {


}

Expand All @@ -35,8 +35,8 @@ export class KetcherWrapperComponent implements OnInit, AfterViewInit {
});
// let doc = this.iframe.nativeElement.contentDocument || this.iframe.nativeElement.contentWindow;
};
// this.renderer.listen(window, 'blur', () => this.onWindowBlur());*/
};*/
this.renderer.listen(window, 'blur', () => this.onWindowBlur());
}


Expand All @@ -49,5 +49,36 @@ export class KetcherWrapperComponent implements OnInit, AfterViewInit {
}
}, interval);
}
@HostListener('mouseover')
private onIframeMouseOver() {
this.iframeMouseOver = true;
this.resetFocusOnWindow();
}

@HostListener('mouseout')
private onIframeMouseOut() {
this.iframeMouseOver = false;
this.resetFocusOnWindow();
}

@HostListener('click')
private onClick() {
// this.iframeMouseOver = false;
setTimeout(() => {
this.resetFocusOnWindow();
}, 100);
}

private onWindowBlur() {
if (this.iframeMouseOver) {
this.resetFocusOnWindow();
}
}

private resetFocusOnWindow() {
setTimeout(() => {

window.focus();
}, 100);
}
}
2 changes: 1 addition & 1 deletion projects/ketcher-wrapper/src/lib/ketcher.model.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export interface Ketcher {
editor?: any;
getSmiles: () => string;
saveSmiles: () => Promise<any>;
getMolfile: () => string;
getMolfile: () => any;
setMolecule: (molString: any) => void;
addFragment: (molString: any) => void;
showMolfile: (clientArea: any, molString: any, options: any) => any;
Expand Down
1 change: 0 additions & 1 deletion src/app/core/admin/fragment-wizard/fragment-wizard.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -215,7 +215,6 @@ private overlayContainer: HTMLElement;


getPossibleSmiles(smi) {
console.log(smi);
function getMarkers(smi) {
let temp = smi.replace(/@H/g, '').replace(/[^A-Z*]/g, '');
var alias: any = {
Expand Down
7 changes: 3 additions & 4 deletions src/app/core/structure-editor/structure-editor-implementation.model.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export class EditorImplementation implements Editor {
getMolfile(): Observable<any> {
return new Observable<any>(observer => {
if (this.ketcher && this.ketcher != null) {
from(this.ketcher.getMolfile()).pipe(take(1)).subscribe(result => {
this.ketcher.getMolfile().then(result => {
let mfile = result;

observer.next(mfile);
Expand Down Expand Up @@ -164,18 +164,17 @@ export class EditorImplementation implements Editor {
} else if (this.ketcher != null) {
this.ketcher.editor.subscribe('change', operations => {
if(!(operations.length == 1 && operations[0].operation == 'Load canvas')){
from(this.ketcher.getMolfile()).pipe(take(1)).subscribe(result => {
this.ketcher.getMolfile().then(result => {
observer.next(result);
});
} else {
this.getMolfile().pipe(take(1)).subscribe(result => {
observer.next(result);
});
// observer.next(this.tempMol);
}


});//*/
});

}
else {
Expand Down
2 changes: 1 addition & 1 deletion src/app/core/structure-editor/structure-editor.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<ncats-jsdraw-wrapper id = "jsdrawwrap" oncontextmenu="return false" (jsDrawOnLoad)="jsDrawOnLoad($event)" [hidden]="structureEditor === 'ketcher' && !firstload" style = "width:990px"></ncats-jsdraw-wrapper>
</div>
<div style = "width: 100%">
<ncats-ketcher-wrapper (ketcherOnLoad)="ketcherOnLoad($event)" [hidden]="structureEditor === 'jsdraw'">
<ncats-ketcher-wrapper id="ketcherwrapper" (ketcherOnLoad)="ketcherOnLoad($event)" [hidden]="structureEditor === 'jsdraw'">
</ncats-ketcher-wrapper>
</div>

Expand Down
133 changes: 58 additions & 75 deletions src/app/core/structure-editor/structure-editor.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export class StructureEditorComponent implements OnInit, AfterViewInit, OnDestro
@Output() loadedMolfile = new EventEmitter<string>();
@Output() editorSwitched = new EventEmitter<string>();

private ketcher: Ketcher;
private ketcher: any;
private jsdraw: JSDraw;
ketcherLoaded = false;
jsdrawLoaded = false;
Expand Down Expand Up @@ -84,6 +84,17 @@ export class StructureEditorComponent implements OnInit, AfterViewInit, OnDestro
window.removeEventListener('dragover', this.preventDrag);
window.removeEventListener('paste', this.checkPaste);
(<HTMLCanvasElement>this.myCanvas.nativeElement).removeEventListener('click', this.click);
delete this.ketcher;
let parentElement = document.getElementById('ketcherwrapper');
let childElement = document.getElementById('root');
delete window['ketcher'];
// Check if both elements exist
if (parentElement && childElement) {
// Remove the child element from the parent element
parentElement.removeChild(childElement);

} else {
}

}

Expand All @@ -92,7 +103,7 @@ export class StructureEditorComponent implements OnInit, AfterViewInit, OnDestro
this.canvasCopy = <HTMLCanvasElement>this.myCanvas.nativeElement;
const test = (<HTMLCanvasElement>this.myCanvas.nativeElement);
if (test) {
test.addEventListener('click', this.click);
// test.addEventListener('click', this.click);
}
}

Expand All @@ -107,14 +118,14 @@ export class StructureEditorComponent implements OnInit, AfterViewInit, OnDestro
}

listener = () => {
var elmR=document.getElementById("root");
/* var elmR=document.getElementById("root");
if(this.structureEditor==="ketcher"){
if( elmR && elmR.querySelector(":focus-within")){
this.getSketcher().activated=true;
}else{
this.getSketcher().activated=false;
}
}
}*/
}

private preventDrag = (event: DragEvent) => {
Expand Down Expand Up @@ -144,8 +155,8 @@ export class StructureEditorComponent implements OnInit, AfterViewInit, OnDestro
}

ngOnInit() {
window.addEventListener('keyup',this.listener);
window.addEventListener('click',this.listener);
// window.addEventListener('keyup',this.listener);
// window.addEventListener('click',this.listener);
this.overlayContainer = this.overlayContainerService.getContainerElement();


Expand Down Expand Up @@ -230,14 +241,8 @@ export class StructureEditorComponent implements OnInit, AfterViewInit, OnDestro
}

ketcherOnLoad(ketcher: any): void {
this.ketcher = ketcher;
this.ketcherLoaded = true;
this.ketcher.editor.event.change.handlers.push({f:(c)=>{
let mfile = [null];
mfile[0]=this.ketcher.getMolfile();
this.getSketcher().setFile(mfile[0], "mol");
}
});
// this.ketcher = ketcher;
// this.ketcherLoaded = true;
}

getSketcher(){
Expand All @@ -252,19 +257,24 @@ export class StructureEditorComponent implements OnInit, AfterViewInit, OnDestro

toggleEditor() {
if (this.structureEditor === 'ketcher' ) {

this.getSketcher().activated=true;
this.editor.getMolfile().pipe(take(1)).subscribe(Response => {
this.structureEditor = 'jsdraw';
this.editor = new EditorImplementation(null, this.jsdraw);
// this.editor = new EditorImplementation(this.ketcher, this.jsdraw, 'jsdraw');
this.editor = new EditorImplementation(null, this.jsdraw);

this.structureService.interpretStructure(Response).subscribe(resp => {
this.editorOnLoad.emit(this.editor);
this.editorSwitched.emit(this.structureEditor);
this.jsdraw.setMolfile(resp.structure.molfile);

this.jsdraw.setMolfile(resp.structure.molfile);
sessionStorage.setItem('gsrsStructureEditor', 'jsdraw');
document.getElementById("root").style.display="none";
});
});
});
} else {
this.getSketcher().activated=false;

sessionStorage.setItem('gsrsStructureEditor', 'ketcher');
if(!this.ketcherLoaded) {
this.ketcher = window['ketcher'];
Expand All @@ -275,10 +285,12 @@ export class StructureEditorComponent implements OnInit, AfterViewInit, OnDestro
this.editor.getMolfile().pipe(take(1)).subscribe(Response => {

this.structureEditor = 'ketcher';
// this.editor = new EditorImplementation(this.ketcher, this.jsdraw, 'ketcher');
this.editor = new EditorImplementation(this.ketcher);
this.structureService.interpretStructure(Response).subscribe(resp => {
this.ketcher.setMolecule(resp.structure.molfile);
this.editorSwitched.emit(this.structureEditor);
this.editorOnLoad.emit(this.editor);

});
sessionStorage.setItem('gsrsStructureEditor', 'ketcher');
Expand All @@ -293,7 +305,8 @@ export class StructureEditorComponent implements OnInit, AfterViewInit, OnDestro
jsDrawOnLoad(jsdraw: JSDraw): void {
this.jsdraw = jsdraw;
this.jsdrawLoaded = true;
this.editor = new EditorImplementation(null, this.jsdraw);
// this.editor = new EditorImplementation(this.ketcher, this.jsdraw, 'jsdraw');
this.editor = new EditorImplementation(null, this.jsdraw);
this.editorOnLoad.emit(this.editor);
this.editorSwitched.emit(this.structureEditor);

Expand All @@ -314,10 +327,31 @@ export class StructureEditorComponent implements OnInit, AfterViewInit, OnDestro
this.ketcher = window['ketcher'];
this.ketcherLoaded = true;
document.getElementById("root").style.display="";
this.editor = new EditorImplementation(this.ketcher);
// this.editor = new EditorImplementation(this.ketcher, this.jsdraw, 'ketcher');
this.editor = new EditorImplementation(this.ketcher);
this.editorOnLoad.emit(this.editor);
this.editorSwitched.emit(this.structureEditor);

/* this.ketcher.editor.subscribe('change', operations => {
this.ketcher.getMolfile().then(result => {
this.getSketcher().setFile(result, "mol");
})
if(!(operations.length == 1 && operations[0].operation == 'Load canvas')){
}
});*/

this.ketcher.editor.event.change.handlers.push({f:(c)=>{
this.ketcher.getMolfile().then(result => {
let mfile = [null];
mfile[0]= result;
// this.getSketcher().setFile(mfile[0], "mol");
this.getSketcher().setFile(mfile[0], "mol");
})
}
});

}, 150);

});
Expand All @@ -329,65 +363,12 @@ export class StructureEditorComponent implements OnInit, AfterViewInit, OnDestro
if (obj !== null && obj !== undefined) {
clearInterval(intervalId);
callback(obj);
}else {
}
}, interval);
}

loadKetcher(){


let elmR=document.getElementById("root");

if(window["ketcher"]){
this.ketcher = window['ketcher'];
this.ketcherLoaded = true;
if(this.ketcher.setMolecule){
this.ketcher.setMolecule(this.getSketcher().getMolfile());

let mfile = [null];



let oldGetter = this.getSketcher().getMolfile;
let oldSetter = this.getSketcher().setMolfile;

this.ketcher.editor.event.change.handlers.push({f:(c)=>{
mfile[0]=this.ketcher.getMolfile();
this.getSketcher().setFile(mfile[0], "mol");
}
});


//override old
this.getSketcher().setMolfile=(mm)=>{
this.ketcher.setMolecule(mm);
this.getSketcher().setFile(mm,"mol");
};


let listener = ((ee)=>{
if(this.structureEditor==="ketcher"){
if(elmR.querySelector(":focus-within")){
this.getSketcher().activated=true;
}else{
this.getSketcher().activated=false;
}
}
});
window.addEventListener('keyup',listener);
window.addEventListener('click',listener);

window["ketcherLoading"]=false;
return true;
}
}
else {
console.log('no ketcher window');
}
setTimeout(()=>{
this.loadKetcher();
},500);
}

waitForNonNull(variable: () => any): Promise<void> {
return new Promise((resolve) => {
Expand Down Expand Up @@ -419,7 +400,9 @@ loadKetcher(){
this.loadingService.setLoading(true);
this.structureService.molvec(img).subscribe(response => {
const mol = response.molfile;
this.ketcher.setMolecule(mol);
if (this.ketcher) {
// this.ketcher.setMolecule(mol);
}
this.loadedMolfile.emit(mol);
this.loadingService.setLoading(false);
}, error => {
Expand Down
4 changes: 3 additions & 1 deletion src/app/core/structure-search/structure-search.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -199,14 +199,15 @@ export class StructureSearchComponent implements OnInit, AfterViewInit, OnDestro
openStructureExportDialog(): void {
let mol = ''
this.editor.getMolfile().pipe(take(1)).subscribe(response => {
this.editor.getSmiles().pipe(take(1)).subscribe(resp => {
mol = response;
this.gaService.sendEvent('structureSearch', 'button:export', 'export structure');
const dialogRef = this.dialog.open(StructureExportComponent, {
height: 'auto',
width: '650px',
data: {
molfile: mol,
smiles: this.editor.getSmiles()
smiles: resp
}
});
this.overlayContainer.style.zIndex = '1002';
Expand All @@ -217,6 +218,7 @@ export class StructureSearchComponent implements OnInit, AfterViewInit, OnDestro
this.overlayContainer.style.zIndex = null;
});
});
});
}

searchCutoffChanged(event): void {
Expand Down
Loading

0 comments on commit 3a038b1

Please sign in to comment.