feat: enabled structure editor - paste from clipboard

Steinbeck-Lab · Aug 7, 2024 · 58aeeab · 58aeeab
1 parent f4d76be
commit 58aeeab
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 10 deletions.
diff --git a/resources/views/livewire/search.blade.php b/resources/views/livewire/search.blade.php
@@ -95,7 +95,7 @@ class="rounded-md bg-white text-gray-900 mr-3 py-3 px-2 text-gray-400 hover:bg-g
             </div>
             <div class="grid grid-cols-1 gap-y-4 sm:grid-cols-2 sm:gap-x-6 sm:gap-y-10 lg:grid-cols-4 lg:gap-x-8">
                 @foreach ($molecules as $molecule)
-                    <livewire:molecule-card :key="$molecule->id" :molecule="$molecule" lazy="on-load" />
+                    <livewire:molecule-card :key="$molecule->id" :molecule="$molecule" />
                 @endforeach
             </div>
             <div class="p-4">

diff --git a/resources/views/livewire/structure-editor.blade.php b/resources/views/livewire/structure-editor.blade.php
@@ -1,13 +1,19 @@
-<div x-data="{ isOpen: false, searchType: 'exact', smiles: @entangle('smiles') }">
+<div x-data="{ isOpen: false, searchType: 'exact', smiles: @entangle('smiles'), fetchClipboardText() { 
+        navigator.clipboard.readText().then(text => {
+            window.editor.setSmiles(text);
+        }).catch(err => {
+            console.error('Failed to read clipboard contents: ', err);
+        });
+    } 
+}">
     <div x-init="$watch('isOpen', value => {
         if (value) {
             setTimeout(() => {
-                const editor = OCL.StructureEditor.createSVGEditor('structureSearchEditor', 1);
+                window.editor = OCL.StructureEditor.createSVGEditor('structureSearchEditor', 1);
                 if (smiles) {
-                    console.log(smiles)
-                    editor.setSmiles(smiles);
+                    window.editor.setSmiles(smiles);
                 }
-                window.getEditorSmiles = () => editor.getSmiles();
+                window.getEditorSmiles = () => window.editor.getSmiles();
             }, 100);
         }
     });">
@@ -25,9 +31,11 @@ class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left ov
                             <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
                                 Structure Editor
                             </h3>
-
                             <div class="py-3">
-                                <div id="structureSearchEditor" class="border" style="height: 400px; width: 100%"></div>
+                                <div id="structureSearchEditor" class="border mb-3" style="height: 400px; width: 100%"></div>
+                                <button @click="fetchClipboardText" class="mt-3 w-full inline-flex justify-center rounded-md shadow-sm px-4 py-2 bg-white-600 text-base font-medium hover:bg-white-700 focus:outline-none sm:w-auto sm:text-sm border">
+                                    Paste from Clipboard
+                                </button>
                             </div>
                             <fieldset class="mt-1">
                                 <legend class="contents text-base font-medium text-gray-900">
@@ -81,7 +89,7 @@ class="mt-3 w-full inline-flex justify-center rounded-md border border-transpare
             </div>
         </div>
     </div>
-    @if ($mode == 'inline')
+    @if ($mode && $mode == 'inline')
         <button x-if="$mode != 'inline'" type="button" @click="isOpen = true"
             class="rounded-md text-gray-900 bg-white mr-3 py-3 px-2 text-gray-400 hover:bg-gray-100 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-secondary-dark focus:ring-offset-2">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
@@ -91,7 +99,7 @@ class="rounded-md text-gray-900 bg-white mr-3 py-3 px-2 text-gray-400 hover:bg-g
             </svg>
         </button>
     @else
-        <button x-if="$mode == 'inline'" type="button" @click="isOpen = true"
+        <button x-if="$mode && $mode == 'inline'" type="button" @click="isOpen = true"
             class="border bg-gray-50 justify-center items-center text-center rounded-md text-gray-900 mr-1 py-3 px-4 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-secondary-dark focus:ring-offset-2">
             <svg class="w-12 h-12 mx-auto" viewBox="0 0 78 78" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <g clip-path="url(#clip0_1_2)">