WIP Ketcher testing

projects/ketcher-wrapper/src/lib/ketcher-wrapper.component.html

@@ -1,2 +1,2 @@
-<iframe id="ketcher-frame" [src]="safeKetcherFilePath" scrolling="no" #ketcherFrame>
+<iframe id="ketcher-frame" [src]="safeKetcherFilePath" scrolling="no" style = "height: 600px;" #ketcherFrame>
 </iframe>

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,23 +7,107 @@ 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
   ) {
 
   }
 
   ngOnInit() {
     this.safeKetcherFilePath = this.sanitizer.bypassSecurityTrustResourceUrl(this.ketcherFilePath);
     this.ketcherFrame.nativeElement.onload = () => {
+     setTimeout(() => {
       this.ketcherOnLoad.emit(this.ketcherFrame.nativeElement.contentWindow['ketcher']);
+      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);
+  }
+
+
 }

projects/ketcher-wrapper/src/lib/ketcher.model.ts

@@ -3,6 +3,7 @@ export interface Ketcher {
     apiPath: string;
     buildDate: string;
     buildNumber?: string;
+    editor?: any;
     getSmiles: () => string;
     saveSmiles: () => Promise<any>;
     getMolfile: () => string;

src/app/core/admin/fragment-wizard/fragment-wizard.component.ts

@@ -7,6 +7,7 @@ import { EventEmitter } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { StructureService } from '@gsrs-core/structure';
 import { OverlayContainer } from '@angular/cdk/overlay';
+import { take } from 'rxjs';
 
 
 @Component({
@@ -328,7 +329,9 @@ private overlayContainer: HTMLElement;
 
 
 
-
+   let smiles = '';
+   this.editor.getMolfile().pipe(take(1)).subscribe(response => {
+     smiles = response;
     var tt = this.getPossibleSmiles(this.editor.getSmiles());
     let stars = 0;
     let dom = "";
@@ -361,37 +364,39 @@ private overlayContainer: HTMLElement;
       this.forms.push(temp);
     });
 
+  });
+
   }
 
   getFragmentCV() {
-    if (this.editor.getSmiles() && this.editor.getSmiles() !== '') {
-
-      if(!this.vocabulary) {
-        this.CVService.getFragmentCV().subscribe(data => {
-          this.dat = {};
-
-         this.domains = data.content;
-
-         if (this.vocab) {
-          this.fragmentType(this.vocab);
-         }
-
-
-        });
+    this.editor.getSmiles().pipe(take(1)).subscribe(resp => {
+      if (resp && resp != '') {
+        if(!this.vocabulary) {
+          this.CVService.getFragmentCV().subscribe(data => {
+            this.dat = {};
+
+           this.domains = data.content;
+
+           if (this.vocab) {
+            this.fragmentType(this.vocab);
+           }
+
+
+          });
+        } else {
+          if (this.vocab) {
+            this.fragmentType(this.vocab, this.vocabulary);
+           }
+        }
       } else {
-        if (this.vocab) {
-          this.fragmentType(this.vocab, this.vocabulary);
-         }
+        this.message = "No Structure Detected in editor";
+        setTimeout(() => {
+          this.message = null;
+        }, 4000);
       }
-    } else {
-      this.message = "No Structure Detected in editor";
-      setTimeout(() => {
-        this.message = null;
-      }, 4000);
-    }
-
-
+      });
   }
+
   checkImg(term: any) {
     term.fragmentSrc = this.CVService.getStructureUrlFragment(term.fragmentStructure);
     term.simpleSrc = this.CVService.getStructureUrlFragment(term.simplifiedStructure);

src/app/core/assets/ketcher/asset-manifest.json

@@ -0,0 +1,12 @@
+{
+  "files": {
+    "main.css": "./static/css/main.3fc9c0f8.css",
+    "main.js": "./static/js/main.963f80c2.js",
+    "static/js/583.7fb8b79c.chunk.js": "./static/js/583.7fb8b79c.chunk.js",
+    "index.html": "./index.html"
+  },
+  "entrypoints": [
+    "static/css/main.3fc9c0f8.css",
+    "static/js/main.963f80c2.js"
+  ]
+}

src/app/core/assets/ketcher/iframe.html

@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <style>
+      .modal {
+        display: block;
+        position: fixed;
+        z-index: 1;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+        background-color: rgb(0, 0, 0);
+        background-color: rgba(0, 0, 0, 0.4);
+      }
+
+      .modal-content {
+        background-color: #fefefe;
+        margin: 0% auto;
+        padding: 20px;
+        border: 1px solid #888;
+        width: 80%;
+      }
+
+      .close {
+        color: #aaa;
+        float: right;
+        font-size: 28px;
+        font-weight: bold;
+      }
+
+      .close:hover,
+      .close:focus {
+        color: black;
+        text-decoration: none;
+        cursor: pointer;
+      }
+
+      .inputs {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .columns {
+        width: 100%;
+        display: flex;
+        gap: 40px;
+      }
+
+      .columns > div:nth-child(2) {
+        width: 80%;
+      }
+
+      textarea {
+        width: 100%;
+        height: 500px;
+      }
+
+      input {
+        margin: 5px 0;
+      }
+
+      label {
+        margin-right: 20px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="columns">
+      <div>
+        <button>Open Modal</button>
+        <div class="inputs">
+          <div>
+            <label>Height</label>
+            <input placeholder="height" class="height" />
+          </div>
+          <div>
+            <label>Width</label>
+            <input placeholder="width" class="width" />
+          </div>
+        </div>
+      </div>
+      <div>
+        <textarea
+          class="molecule"
+          placeholder="Insert a molecule here..."
+        ></textarea>
+      </div>
+    </div>
+    <script defer>
+      const button = document.querySelector('button')
+      const textarea = document.querySelector('.molecule')
+      const width = document.querySelector('.width')
+      const height = document.querySelector('.height')
+      const modalContent = `
+        <div class="modal-content">
+            <span class="close">&times;</span>
+            <iframe
+            width="784"
+            height="624"
+            id="iframe"
+            src="env_url"
+            sandbox="allow-scripts allow-same-origin"
+            ></iframe>
+        </div>
+      `
+      let modal
+      let closeIcon;
+      let iframe;
+
+      function closeModal() {
+        closeIcon.removeEventListener('click', closeModal)
+        modal.remove()
+      }
+
+      function createModal() {
+        modal = document.createElement('div')
+        modal.classList.add('modal')
+        modal.innerHTML = modalContent
+        document.body.appendChild(modal)
+
+        closeIcon = document.querySelector('.close')
+        iframe = document.getElementById('iframe')
+        iframe.style.height = height.value + 'px'
+        iframe.style.width = width.value + 'px'
+
+        closeIcon.addEventListener('click', closeModal)
+      }
+
+      button.onclick = createModal
+      window.onclick = function (event) {
+        if (event.target == modal) {
+            closeModal()
+        }
+      }
+
+      window.addEventListener('message', (event) => {
+        if (event.data.eventType === 'init') {
+          iframe.contentWindow.ketcher.setMolecule(textarea.value)
+        }
+      })
+    </script>
+  </body>
+</html>

src/app/core/assets/ketcher/index.html

@@ -0,0 +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 id = "ketcher-body" #ketcherBody><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>