Add utility helper to reduce redunandacy when enabling default drag b…

…ehavior
galaxyproject · Jun 6, 2023 · 0cd3df4 · 0cd3df4
1 parent 2719a8a
commit 0cd3df4
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 18 deletions.
diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
@@ -112,8 +112,7 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { faArrowCircleUp, faArrowCircleDown, faCheckCircle } from "@fortawesome/free-solid-svg-icons";
 import { useEntryPointStore } from "stores/entryPointStore";
-import { useEventStore } from "stores/eventStore";
-import { mapActions } from "pinia";
+import { clearDrag, setDrag } from "@/utils/setDrag.js";
 
 library.add(faArrowCircleUp, faArrowCircleDown, faCheckCircle);
 export default {
@@ -208,7 +207,6 @@ export default {
         },
     },
     methods: {
-        ...mapActions(useEventStore, ["clearDragData", "setDragData"]),
         onKeyDown(event) {
             if (!event.target.classList.contains("content-item")) {
                 return;
@@ -237,15 +235,10 @@ export default {
             }
         },
         onDragStart(evt) {
-            this.setDragData(this.item);
-            evt.dataTransfer.dropEffect = "move";
-            evt.dataTransfer.effectAllowed = "move";
-            evt.dataTransfer.setData("text", JSON.stringify([this.item]));
-            const elem = document.getElementById("drag-ghost");
-            evt.dataTransfer.setDragImage(elem, 0, 0);
+            setDrag(evt, this.item);
         },
         onDragEnd: function () {
-            this.clearDragData();
+            clearDrag();
         },
         onEdit() {
             this.$router.push(this.itemUrls.edit);

diff --git a/client/src/components/Workflow/WorkflowDropdown.vue b/client/src/components/Workflow/WorkflowDropdown.vue
@@ -94,10 +94,9 @@
 import { Services } from "./services";
 import { withPrefix } from "utils/redirect";
 import TextSummary from "components/Common/TextSummary";
-import { mapActions, mapState } from "pinia";
+import { mapState } from "pinia";
 import { useUserStore } from "@/stores/userStore";
-import { useEventStore } from "stores/eventStore";
-
+import { setDrag, clearDrag } from "@/utils/setDrag.js";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCaretDown, faSignature, faTimes, faEdit } from "@fortawesome/free-solid-svg-icons";
 
@@ -193,7 +192,6 @@ export default {
         this.services = new Services();
     },
     methods: {
-        ...mapActions(useEventStore, ["clearDragData", "setDragData"]),
         onCopy: function () {
             this.services
                 .copyWorkflow(this.workflow)
@@ -221,12 +219,10 @@ export default {
                 });
         },
         onDragStart: function (evt) {
-            this.setDragData(this.workflow);
-            const elem = document.getElementById("drag-ghost");
-            evt.dataTransfer.setDragImage(elem, 0, 0);
+            setDrag(evt, this.workflow);
         },
         onDragEnd: function () {
-            this.clearDragData();
+            clearDrag();
         },
         onRename: function () {
             const id = this.workflow.id;

diff --git a/client/src/utils/setDrag.js b/client/src/utils/setDrag.js
@@ -0,0 +1,23 @@
+/**
+ * Helper to configure datatransfer for drag & drop operations
+ */
+import { useEventStore } from "stores/eventStore";
+
+export function setDrag(evt, data = null) {
+    const eventStore = useEventStore();
+    if (data) {
+        evt.dataTransfer.setData("text", JSON.stringify([data]));
+        // data submitted through datatransfer is only available upon drop,
+        // in order to access the drop data immediately this event store is used.
+        eventStore.setDragData(data);
+    }
+    evt.dataTransfer.dropEffect = "move";
+    evt.dataTransfer.effectAllowed = "move";
+    const elem = document.getElementById("drag-ghost");
+    evt.dataTransfer.setDragImage(elem, 0, 0);
+}
+
+export function clearDrag() {
+    const eventStore = useEventStore();
+    eventStore.clearDragData(data);
+}