Moved bug fix logic to component in order for better usability and pr…

…event interruption of Drag-and-Drop state machine
galaxyproject · Nov 27, 2023 · 45b32f8 · 45b32f8
1 parent c699e66
commit 45b32f8
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 10 deletions.
diff --git a/client/src/components/Upload/DragAndDropModal.vue b/client/src/components/Upload/DragAndDropModal.vue
@@ -1,7 +1,8 @@
 <script setup>
+import { setIframeEvents } from "components/Upload/utils";
 import { useFileDrop } from "composables/fileDrop";
 import { useGlobalUploadModal } from "composables/globalUploadModal";
-import { computed, ref } from "vue";
+import { computed, ref, watch } from "vue";
 
 import { useToast } from "@/composables/toast";
 
@@ -20,6 +21,8 @@ const { openGlobalUploadModal } = useGlobalUploadModal();
 
 const toast = useToast();
 
+const iframesNoInteract = ["galaxy_main", "frame.center-frame"];
+
 function onDrop(event) {
     console.debug(event.dataTransfer);
 
@@ -36,6 +39,14 @@ function onDropCancel(event) {
         toast.error("Please try again", "Upload cancelled");
     }
 }
+
+watch(isFileOverDocument, (newValue, oldValue) => {
+    if (!oldValue && newValue) {
+        setIframeEvents(iframesNoInteract, true);
+    } else {
+        setIframeEvents(iframesNoInteract, false);
+    }
+});
 </script>
 
 <template>

diff --git a/client/src/components/Upload/UploadModal.vue b/client/src/components/Upload/UploadModal.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { setIframeEvents } from "components/Upload/utils";
 import { useConfig } from "composables/config";
 import { useUserHistories } from "composables/userHistories";
 import { storeToRefs } from "pinia";
@@ -7,8 +8,6 @@ import { ref, watch } from "vue";
 import { useUserStore } from "@/stores/userStore";
 import { wait } from "@/utils/utils";
 
-import { setIframeEvents } from "components/Upload/utils";
-
 import UploadContainer from "./UploadContainer.vue";
 
 const { currentUser } = storeToRefs(useUserStore());
@@ -61,7 +60,6 @@ async function open(overrideOptions) {
     }
 }
 
-
 watch(
     () => showModal.value,
     (modalShown) => setIframeEvents(["galaxy_main"], modalShown)

diff --git a/client/src/composables/fileDrop.ts b/client/src/composables/fileDrop.ts
@@ -1,8 +1,6 @@
 import { type MaybeRefOrGetter, useEventListener } from "@vueuse/core";
 import { computed, type Ref, ref, unref } from "vue";
 
-import { setIframeEvents } from "../components/Upload/utils";
-
 export type FileDropHandler = (event: DragEvent) => void;
 
 /**
@@ -20,8 +18,6 @@ export function useFileDrop(
     solo: MaybeRefOrGetter<boolean>,
     idleTime = 800
 ) {
-    const iframesNoInteract = ["galaxy_main", "frame.center-frame"];
-
     /** returns if any bootstrap modal is open */
     function isAnyModalOpen() {
         return document.querySelectorAll(".modal.show").length > 0;
@@ -47,7 +43,6 @@ export function useFileDrop(
                 case "dragstart":
                     return "blocked";
                 case "dragenter":
-                    setIframeEvents(iframesNoInteract, true);
                     if (!(unref(solo) && isAnyModalOpen())) {
                         return "fileDragging";
                     }
@@ -129,7 +124,6 @@ export function useFileDrop(
         "dragleave",
         () => {
             isFileOverDropZone.value = false;
-            setIframeEvents(iframesNoInteract, false);
         },
         true
     );