Skip to content

Commit

Permalink
working ketcher paste event
Browse files Browse the repository at this point in the history
  • Loading branch information
@NikoAnderson
NikoAnderson committed Jan 23, 2024
1 parent ced269c commit 95a7f4c
Show file tree
Hide file tree
Showing 3 changed files with 123 additions and 8 deletions.
92 changes: 87 additions & 5 deletions projects/ketcher-wrapper/src/lib/ketcher-wrapper.component.ts
View file
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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<Ketcher>();
safeKetcherFilePath: SafeUrl;

@ViewChild('ketcherBody') kBod: ElementRef;
@ViewChild('ketcherFrame') iframe: ElementRef;
iframeMouseOver = false;
constructor(
private sanitizer: DomSanitizer
private sanitizer: DomSanitizer,
private renderer: Renderer2
) {

}
Expand All @@ -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);
}


}
2 changes: 1 addition & 1 deletion src/app/core/assets/ketcher/index.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Ketcher is a web-based chemical structure editor"/><link rel="shortcut icon" type="image/x-icon" href="./favicon.ico"/><link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png"/><link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png"/><link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png"/><link rel="manifest" href="./manifest.json"/><title>Ketcher v2.15.0</title><script defer="defer" src="./static/js/main.963f80c2.js"></script><link href="./static/css/main.3fc9c0f8.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Ketcher is a web-based chemical structure editor"/><link rel="shortcut icon" type="image/x-icon" href="./favicon.ico"/><link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png"/><link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png"/><link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png"/><link rel="manifest" href="./manifest.json"/><title>Ketcher v2.15.0</title><script defer="defer" src="./static/js/main.963f80c2.js"></script><link href="./static/css/main.3fc9c0f8.css" rel="stylesheet"></head><body id = "ketcher-body" #ketcherBody><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
37 changes: 35 additions & 2 deletions src/app/core/structure-editor/structure-editor.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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) {
Expand All @@ -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`;

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



}

Expand All @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down

0 comments on commit 95a7f4c

Please sign in to comment.