jsdraw disable fix

src/app/core/config/config.model.ts

@@ -78,7 +78,7 @@ export interface Config {
     structureEditor?: 'ketcher' | 'jsdraw';
     nameFormPageSizeOptions?: Array<number>;
     nameFormPageSizeDefault?: number;
-    jsdrawLicense?: boolean;
+    disableJSDraw?: boolean;
     disableKetcher?: boolean;
     useApprovalAPI?: boolean;
     dummyWhoami?: Auth;

src/app/core/structure-editor/structure-editor.component.ts

@@ -51,6 +51,7 @@ export class StructureEditorComponent implements OnInit, AfterViewInit, OnDestro
   tempClass = "";
   enableJSDraw = true;
   enableKetcher = true;
+  ketcherWindowActive = false;
   private overlayContainer: HTMLElement;
 
   @ViewChild('structure_canvas', { static: false }) myCanvas: ElementRef;
@@ -121,9 +122,15 @@ export class StructureEditorComponent implements OnInit, AfterViewInit, OnDestro
     var elmR=document.getElementById("root");
     if(this.structureEditor==="ketcher"){
       if( elmR && elmR.querySelector(":focus-within")){
-        this.getSketcher().activated=true;
+        this.ketcherWindowActive = true;
+        if(this.enableJSDraw) {
+          this.getSketcher().activated=true;
+        }
       }else{
-        this.getSketcher().activated=false;
+        this.ketcherWindowActive = false;
+        if(this.enableJSDraw) {
+          this.getSketcher().activated=false;
+        }
       }
     }
   }
@@ -135,7 +142,7 @@ export class StructureEditorComponent implements OnInit, AfterViewInit, OnDestro
 
 // override JSDraw for Molvec paste event. Using the JSDraw menu copy function seems to ignore this at first
   checkPaste = (event: ClipboardEvent ) => {
-    if ((this.jsdraw || this.ketcher )&& this.getSketcher().activated) {
+    if ((this.jsdraw || this.ketcher )&& (this.ketcherWindowActive || (this.enableJSDraw && this.getSketcher().activated))) {
      event.preventDefault();
     event.stopPropagation();
     event.stopImmediatePropagation();
@@ -154,20 +161,14 @@ export class StructureEditorComponent implements OnInit, AfterViewInit, OnDestro
   }
 
   ngOnInit() {
-   // window.addEventListener('keyup',this.listener);
   window.addEventListener('click',this.listener);
     this.overlayContainer = this.overlayContainerService.getContainerElement();
-
-
     if (isPlatformBrowser(this.platformId)) {
 
-
-
       window.addEventListener('dragover', this.preventDrag);
       window.addEventListener('drop', this.preventDrag);
       window.addEventListener('paste', this.checkPaste);
 
-
       this.structureEditor = environment.structureEditor;
       let pref = sessionStorage.getItem('gsrsStructureEditor');
       if (pref && this.enableJSDraw) {
@@ -176,13 +177,21 @@ export class StructureEditorComponent implements OnInit, AfterViewInit, OnDestro
         } else if (pref === 'jsdraw') {
           this.structureEditor = 'jsdraw';
         }
+      } else if (!this.enableJSDraw) {
+        this.structureEditor = 'ketcher';
       }
 
-      if (this.configService && this.configService.configData && this.configService.configData.jsdrawLicense ) {
-        this.enableJSDraw = this.configService.configData.jsdrawLicense;
-        if (!this.enableJSDraw) {
+      if (this.configService && this.configService.configData && this.configService.configData.disableJSDraw ) {
+        this.enableJSDraw = false;
           this.structureEditor = 'ketcher';
-        }
+          if (this.firstload && this.structureEditor === 'ketcher' ) {
+            document.getElementById("root").style.display="";
+              this.waitForKetcherFirstLoad();
+              this.firstload = false;
+
+          } else if (this.firstload) {
+            this.firstload = false;
+          }
       } else if (this.configService && this.configService.configData && this.configService.configData.disableKetcher ) {
         this.enableKetcher = !this.configService.configData.disableKetcher;
 
@@ -193,7 +202,7 @@ export class StructureEditorComponent implements OnInit, AfterViewInit, OnDestro
 
       this.editorSwitched.emit(this.structureEditor);
 
-      if ( !window['JSDraw']) {
+      if ( !window['JSDraw'] && this.enableJSDraw) {
 
         // this is extremely hacky but no way around it
 
@@ -227,11 +236,6 @@ export class StructureEditorComponent implements OnInit, AfterViewInit, OnDestro
           document.getElementsByTagName('head')[0].appendChild(node);
         }
 
-        const node = document.createElement('link');
-        node.href = `${environment.baseHref || ''}assets/ketcherOld/ketcher.css`;
-        node.rel="stylesheet";
-     //   document.getElementsByTagName('head')[0].appendChild(node);
-
         const node2 = document.createElement('link');
         node2.href = `${environment.baseHref || ''}assets/ketcher/static/css/main.3fc9c0f8.css`;
         node2.rel="stylesheet";
@@ -240,15 +244,16 @@ export class StructureEditorComponent implements OnInit, AfterViewInit, OnDestro
   }
 
   ketcherOnLoad(ketcher: any): void {
-      // this.ketcher = ketcher;
-      // this.ketcherLoaded = true;
+    // now unused due to async issues with jsdraw
   }
 
   getSketcher(){
     var skt;
+    if(window['JSDraw2']){
     for(var k in window['JSDraw2'].Editor._allitems){
      skt= window['JSDraw2'].Editor._allitems[k];
     }
+  }
 
     return skt;
  }
@@ -339,7 +344,7 @@ export class StructureEditorComponent implements OnInit, AfterViewInit, OnDestro
 
 
      });*/
-
+      if (this.enableJSDraw){
      this.ketcher.editor.event.change.handlers.push({f:(c)=>{
       this.ketcher.getMolfile().then(result => {
         let mfile = [null];
@@ -348,7 +353,7 @@ export class StructureEditorComponent implements OnInit, AfterViewInit, OnDestro
       })
       }	
       });
-
+    }
     }, 150);
 
   });

src/app/core/substance-details/structure-details/structure-details.component.html

@@ -71,8 +71,8 @@
         <mat-icon svgIcon="search"></mat-icon>
       </a>
     </div>
-    <img class="structure-img" *ngIf = "!substance.$$source || substance.$$source !== 'staging'" appSubstanceImage  size = "250" [entityId]="structure.id" [stereo]="showStereo" [version] ="substance.version">
-    <img class="structure-img" *ngIf = "substance.$$source && substance.$$source == 'staging'"   appSubstanceImage  size = "250" [entityId]="substance.uuid" [stereo]="showStereo">
+    <img class="structure-img" (click) = "openModal(structureTemplate)" *ngIf = "!substance.$$source || substance.$$source !== 'staging'" appSubstanceImage  size = "250" [entityId]="structure.id" [stereo]="showStereo" [version] ="substance.version">
+    <img class="structure-img" (click) = "openModal(structureTemplate)" *ngIf = "substance.$$source && substance.$$source == 'staging'"   appSubstanceImage  size = "250" [entityId]="substance.uuid" [stereo]="showStereo">
 
     <br/>
       <button class ="mat-raised-button mat-primary" [disabled]="structure.definedStereo == 0" (click)="toggleStereo()">{{showStereo === false ? 'Show' : 'Hide'}} Stereo</button>
@@ -111,8 +111,8 @@ <h3>Systematic Names:</h3>
 
 <ng-template #structureTemplate>
   <div mat-dialog-content>
-    <img class="structure-img-big" *ngIf = "!substance.$$source || substance.$$source !== 'staging'" appSubstanceImage  size = "250" [entityId]="structure.id" [stereo]="showStereo" [version] ="substance.version">
-    <img class="structure-img-big" *ngIf = "substance.$$source && substance.$$source == 'staging'"   appSubstanceImage  size = "250" [entityId]="substance.uuid" [stereo]="showStereo">
+    <img class="structure-img-big" *ngIf = "!substance.$$source || substance.$$source !== 'staging'" appSubstanceImage  size = "850" [entityId]="structure.id" [stereo]="showStereo" [version] ="substance.version">
+    <img class="structure-img-big" *ngIf = "substance.$$source && substance.$$source == 'staging'"   appSubstanceImage  size = "850" [entityId]="substance.uuid" [stereo]="showStereo">
 
   </div>
 </ng-template>

src/app/core/substance-details/structure-details/structure-details.component.scss

@@ -14,8 +14,9 @@
 }
 
 .structure-img-big {
-    width: 100%;
-    height: 500px !important;
+    width: auto;
+    height: auto!important;
+    margin: auto;
 }
 
 

src/app/core/substance-details/structure-details/structure-details.component.ts

@@ -94,7 +94,8 @@ export class StructureDetailsComponent extends SubstanceCardBase implements OnIn
   openModal(templateRef) {
 
     const dialogRef = this.dialog.open(templateRef, {
-      width: '650px',
+      width: '85%',
+      height: '85%',
       panelClass: 'structure-image-panel',
     });
     this.overlayContainer.style.zIndex = '1002';

src/app/core/substance-form/structure/substance-form-structure-card.component.html

@@ -2,6 +2,7 @@
   <div>
     <div *ngIf = "featuresOnly">
       <h4>Draw or import a structure using Ketcher. Then, if any features are detected a table will be automatically displayed under the editor.</h4>
+      <button mat-button color="primary" (click) = "loadForm()">Load Structure in Registration Form</button>
     </div>
     <div>
       <app-structure-editor (loadedMolfile)="molvecUpdate($event)" (editorOnLoad)="editorOnLoad($event)" (editorSwitched) = "changeEditor($event)" style="z-index: 9999">

src/app/core/substance-form/substance-form.component.ts

@@ -550,8 +550,9 @@ export class SubstanceFormComponent implements OnInit, AfterViewInit, OnDestroy
                   this.loadingService.setLoading(false);
                   this.UNII = this.substanceFormService.getUNII();
                 }, 5);
-
-                this.updateHiddenFormSections()
+                if (!this.featuresOnly){
+                  this.updateHiddenFormSections();
+                }
               });
           });
           // this.loadingService.setLoading(false);
@@ -847,7 +848,9 @@ export class SubstanceFormComponent implements OnInit, AfterViewInit, OnDestroy
                   });
                   this.formSections[index].dynamicComponentRef.changeDetectorRef.detectChanges();
 
-                  this.updateHiddenFormSections()
+                  if (!this.featuresOnly){
+                    this.updateHiddenFormSections();
+                  }
                 });
             });