diff --git a/projects/ketcher-wrapper/src/lib/ketcher-wrapper.component.ts b/projects/ketcher-wrapper/src/lib/ketcher-wrapper.component.ts index b1e652b53..3db6e6382 100644 --- a/projects/ketcher-wrapper/src/lib/ketcher-wrapper.component.ts +++ b/projects/ketcher-wrapper/src/lib/ketcher-wrapper.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, ViewChild, Input, Output, EventEmitter } from '@angular/core'; +import { Component, OnInit, ViewChild, Input, Output, EventEmitter, ElementRef, AfterViewInit, Renderer2, HostListener } from '@angular/core'; import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; import { Ketcher } from './ketcher.model'; @@ -7,14 +7,17 @@ import { Ketcher } from './ketcher.model'; templateUrl: './ketcher-wrapper.component.html', styleUrls: ['./ketcher-wrapper.component.scss'] }) -export class KetcherWrapperComponent implements OnInit { +export class KetcherWrapperComponent implements OnInit, AfterViewInit { @ViewChild('ketcherFrame', { static: true }) ketcherFrame: { nativeElement: HTMLIFrameElement }; @Input() ketcherFilePath: string; @Output() ketcherOnLoad = new EventEmitter(); safeKetcherFilePath: SafeUrl; - + @ViewChild('ketcherBody') kBod: ElementRef; + @ViewChild('ketcherFrame') iframe: ElementRef; + iframeMouseOver = false; constructor( - private sanitizer: DomSanitizer + private sanitizer: DomSanitizer, + private renderer: Renderer2 ) { } @@ -24,8 +27,87 @@ export class KetcherWrapperComponent implements OnInit { this.ketcherFrame.nativeElement.onload = () => { setTimeout(() => { this.ketcherOnLoad.emit(this.ketcherFrame.nativeElement.contentWindow['ketcher']); - }, 1000) + console.log('upd2'); + console.log(this.ketcherFrame.nativeElement); + this.ketcherFrame.nativeElement.contentWindow['ketcher'].body.attachEvent('onpaste', function(e) { + alert("paste"); + }); + this.kBod.nativeElement.addEventListener('paste', function(e) { + alert("pasteaddevent"); + }); + this.kBod.nativeElement.attachEvent('onpaste', function(e) { + alert("pasteattach"); + }); + let doc = this.iframe.nativeElement.contentDocument || this.iframe.nativeElement.contentWindow; + if (typeof doc.addEventListener !== undefined) { + doc.addEventListener("click", this.iframeClickHandler, false) + } else if (typeof doc.attachEvent !== undefined) { + doc.attachEvent("onclick", this.iframeClickHandler); + } + } + + , 1000) }; } + ngAfterViewInit() { + let doc = this.iframe.nativeElement.contentDocument || this.iframe.nativeElement.contentWindow; + if (typeof doc.addEventListener !== undefined) { + doc.addEventListener("click", this.iframeClickHandler, false) + } else if (typeof doc.attachEvent !== undefined) { + doc.attachEvent("onclick", this.iframeClickHandler); + } + this.renderer.listen(window, 'blur', () => this.onWindowBlur()); + this.renderer.listen(window, 'focus', () => console.log('window focus')); + } + + iframeClickHandler() { + alert("Iframe clicked"); + } + + @HostListener('mouseover') + private onIframeMouseOver() { + // this.log('Iframe mouse over'); + this.iframeMouseOver = true; + this.resetFocusOnWindow(); + } + + @HostListener('mouseout') + private onIframeMouseOut() { + // this.log('Iframe mouse out'); + this.iframeMouseOver = false; + this.resetFocusOnWindow(); + } + + @HostListener('dragover', ['$event']) private dragger(event: DragEvent) { + // console.log('Wdrag'); + event.preventDefault(); + event.stopPropagation(); + event.stopImmediatePropagation(); + this.resetFocusOnWindow(); + } + + @HostListener('drop', ['$event']) private dropper(event: any) { + // console.log('Wdrop'); + event.preventDefault(); + event.stopPropagation(); + event.stopImmediatePropagation(); + this.resetFocusOnWindow(); + } + + private onWindowBlur() { + if (this.iframeMouseOver) { + // console.log(''); + this.resetFocusOnWindow(); + } + } + + private resetFocusOnWindow() { + setTimeout(() => { + + window.focus(); + }, 100); + } + + } diff --git a/src/app/core/assets/ketcher/index.html b/src/app/core/assets/ketcher/index.html index 44e8c8dfe..f3ae1fb70 100644 --- a/src/app/core/assets/ketcher/index.html +++ b/src/app/core/assets/ketcher/index.html @@ -1 +1 @@ -Ketcher v2.15.0
\ No newline at end of file +Ketcher v2.15.0
\ No newline at end of file diff --git a/src/app/core/structure-editor/structure-editor.component.ts b/src/app/core/structure-editor/structure-editor.component.ts index c3eefa727..0511f61e8 100644 --- a/src/app/core/structure-editor/structure-editor.component.ts +++ b/src/app/core/structure-editor/structure-editor.component.ts @@ -8,7 +8,7 @@ import { Inject, OnDestroy, ViewChild, - ElementRef, AfterViewInit + ElementRef, AfterViewInit, HostListener } from '@angular/core'; import { isPlatformBrowser } from '@angular/common'; import { Ketcher } from 'ketcher-wrapper'; @@ -76,12 +76,38 @@ export class StructureEditorComponent implements OnInit, AfterViewInit, OnDestro } } + @HostListener('paste', ['$event']) private testing123(event: any) { + // console.log('host paste'); + event.preventDefault(); + event.stopPropagation(); + event.stopImmediatePropagation(); + this.catchPaste(event); + } + + @HostListener('drop', ['$event']) private dropper(event: any) { + // console.log('drop'); + event.preventDefault(); + event.stopPropagation(); + event.stopImmediatePropagation(); + } + + @HostListener('dragover', ['$event']) private dragger(event: DragEvent) { + // console.log('drag'); + event.preventDefault(); + event.stopPropagation(); + event.stopImmediatePropagation(); + } + + private preventDrag = (event: DragEvent) => { + // console.log('prevent drag'); event.preventDefault(); } // override JSDraw for Molvec paste event. Using the JSDraw menu copy function seems to ignore this at first checkPaste = (event: ClipboardEvent ) => { + // console.log('checkPaste'); + event.preventDefault(); event.stopPropagation(); event.stopImmediatePropagation(); if (this.jsdraw && this.jsdraw.activated) { @@ -105,9 +131,11 @@ export class StructureEditorComponent implements OnInit, AfterViewInit, OnDestro ngOnInit() { if (isPlatformBrowser(this.platformId)) { + + window.addEventListener('dragover', this.preventDrag); window.addEventListener('drop', this.preventDrag); - window.addEventListener('paste', this.checkPaste); + // window.addEventListener('paste', this.checkPaste); this.ketcherFilePath = `${environment.baseHref || ''}assets/ketcher/index.html`; @@ -147,7 +175,10 @@ export class StructureEditorComponent implements OnInit, AfterViewInit, OnDestro this.editor = new EditorImplementation(this.ketcher); console.log(this.editor); this.editorOnLoad.emit(this.editor); + }, 1000); + + } @@ -162,6 +193,7 @@ export class StructureEditorComponent implements OnInit, AfterViewInit, OnDestro } onDropHandler(object: any): void { + console.log('drop handler'); if (object.invalidFlag) { this.canvasMessage = 'The selected file could not be read'; } else { @@ -215,6 +247,7 @@ export class StructureEditorComponent implements OnInit, AfterViewInit, OnDestro } catchPaste(event: ClipboardEvent): void { + console.log('catch paste'); const send: any = {}; let valid = false; const items = event.clipboardData.items;