From 1d7ea2d87891561ee4aedd229054e1fabf34e231 Mon Sep 17 00:00:00 2001
From: EmmaLRussell <EmmaRussellKilburn@gmail.com>
Date: Thu, 27 Jun 2024 14:55:36 +0100
Subject: [PATCH] use mixin for drop

---
 .../components/graphConfig/GraphConfig.vue    | 37 +--------
 .../graphConfig/HiddenVariables.vue           | 22 +-----
 .../app/components/mixins/dragVariables.ts    | 32 --------
 .../app/components/mixins/selectVariables.ts  | 77 +++++++++++++++++++
 4 files changed, 81 insertions(+), 87 deletions(-)
 delete mode 100644 app/static/src/app/components/mixins/dragVariables.ts
 create mode 100644 app/static/src/app/components/mixins/selectVariables.ts

diff --git a/app/static/src/app/components/graphConfig/GraphConfig.vue b/app/static/src/app/components/graphConfig/GraphConfig.vue
index bb44e851..b6daea43 100644
--- a/app/static/src/app/components/graphConfig/GraphConfig.vue
+++ b/app/static/src/app/components/graphConfig/GraphConfig.vue
@@ -26,8 +26,7 @@
 <script lang="ts">
 import { computed, defineComponent } from "vue";
 import { useStore } from "vuex";
-import { GraphsAction } from "../../store/graphs/actions";
-import DragVariables from "../mixins/dragVariables";
+import SelectVariables from "../mixins/selectVariables";
 
 export default defineComponent({
     name: "GraphConfig",
@@ -43,7 +42,7 @@ export default defineComponent({
     },
     setup(props, { emit }) {
         const store = useStore();
-        const { startDrag, endDrag } = DragVariables(store, emit, false, props.graphIndex);
+        const { startDrag, endDrag, onDrop, removeVariable } = SelectVariables(store, emit, false, props.graphIndex);
         const selectedVariables = computed<string[]>(
             () => store.state.graphs.config[props.graphIndex].selectedVariables
         );
@@ -57,38 +56,6 @@ export default defineComponent({
             return { "background-color": bgcolor };
         };
 
-        const updateSelectedVariables = (graphIndex: number, newVariables: string[]) => {
-            store.dispatch(`graphs/${GraphsAction.UpdateSelectedVariables}`, {
-                graphIndex,
-                selectedVariables: newVariables
-            });
-        };
-
-        // Remove variable from the graph it was dragged from
-        const removeVariable = (srcGraphIdx: number, variable: string) => {
-            const srcVariables = [...store.state.graphs.config[srcGraphIdx].selectedVariables].filter(
-                (v) => v !== variable
-            );
-            updateSelectedVariables(srcGraphIdx, srcVariables);
-        };
-
-        const onDrop = (evt: DragEvent) => {
-            const { dataTransfer } = evt;
-            const variable = dataTransfer!!.getData("variable");
-            const srcGraph = dataTransfer!!.getData("srcGraph");
-            if (srcGraph !== props.graphIndex.toString()) {
-                // remove from source graph
-                if (srcGraph !== "hidden") {
-                    removeVariable(parseInt(srcGraph), variable);
-                }
-                // add to this graph if necessary
-                if (!selectedVariables.value.includes(variable)) {
-                    const newVars = [...selectedVariables.value, variable];
-                    updateSelectedVariables(props.graphIndex, newVars);
-                }
-            }
-        };
-
         return {
             selectedVariables,
             removeVariable,
diff --git a/app/static/src/app/components/graphConfig/HiddenVariables.vue b/app/static/src/app/components/graphConfig/HiddenVariables.vue
index 317fd20e..f43b9bc6 100644
--- a/app/static/src/app/components/graphConfig/HiddenVariables.vue
+++ b/app/static/src/app/components/graphConfig/HiddenVariables.vue
@@ -27,8 +27,7 @@ import VueFeather from "vue-feather";
 import tooltip from "../../directives/tooltip";
 import * as Color from "color";
 import { GraphsGetter } from "../../store/graphs/getters";
-import { GraphsAction } from "../../store/graphs/actions";
-import DragVariables from "../mixins/dragVariables";
+import SelectVariables from "../mixins/selectVariables";
 
 export default defineComponent({
     name: "HiddenVariables",
@@ -46,7 +45,7 @@ export default defineComponent({
     },
     setup(props, { emit }) {
         const store = useStore();
-        const  { startDrag, endDrag } = DragVariables(store, emit, true);
+        const  { startDrag, endDrag, onDrop } = SelectVariables(store, emit, true);
         const hiddenVariables = computed<string[]>(() => store.getters[`graphs/${GraphsGetter.hiddenVariables}`]);
         const palette = computed(() => store.state.model.paletteModel!);
 
@@ -56,23 +55,6 @@ export default defineComponent({
             return { "background-color": desatBgColor };
         };
 
-        const onDrop = (evt: DragEvent) => {
-            const { dataTransfer } = evt;
-            const variable = dataTransfer!!.getData("variable");
-            const srcGraph = dataTransfer!!.getData("srcGraph");
-            if (srcGraph !== "hidden") {
-                // remove from source graph
-                const srcGraphInt = parseInt(srcGraph);
-                const srcVariables = [...store.state.graphs.config[srcGraphInt].selectedVariables].filter(
-                    (v) => v !== variable
-                );
-                store.dispatch(`graphs/${GraphsAction.UpdateSelectedVariables}`, {
-                    graphIndex: srcGraphInt,
-                    selectedVariables: srcVariables
-                });
-            }
-        };
-
         return {
             hiddenVariables,
             getStyle,
diff --git a/app/static/src/app/components/mixins/dragVariables.ts b/app/static/src/app/components/mixins/dragVariables.ts
deleted file mode 100644
index 0ca01d52..00000000
--- a/app/static/src/app/components/mixins/dragVariables.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import {AppState} from "../../store/appState/state";
-import {Store} from "vuex";
-
-export interface DragVariablesMixin {
-    startDrag: (evt: DragEvent, variable: string) => void;
-    endDrag: () => void,
-}
-
-export default (
-    store: Store<AppState>,
-    emit: (event: string, ...args: any[]) => void,
-    hiddenVariables: boolean,
-    graphIndex?: number): DragVariablesMixin  => {
-    const startDrag = (evt: DragEvent, variable: string) => {
-        const { dataTransfer } = evt;
-        dataTransfer!!.dropEffect = "move";
-        dataTransfer!!.effectAllowed = "move";
-        dataTransfer!!.setData("variable", variable);
-        dataTransfer!!.setData("srcGraph", hiddenVariables ? "hidden" : graphIndex!.toString());
-
-        emit("setDragging", true);
-    };
-
-    const endDrag = () => {
-        emit("setDragging", false);
-    };
-
-    return {
-        startDrag,
-        endDrag,
-    };
-}
\ No newline at end of file
diff --git a/app/static/src/app/components/mixins/selectVariables.ts b/app/static/src/app/components/mixins/selectVariables.ts
new file mode 100644
index 00000000..652090e3
--- /dev/null
+++ b/app/static/src/app/components/mixins/selectVariables.ts
@@ -0,0 +1,77 @@
+import {AppState} from "../../store/appState/state";
+import {Store} from "vuex";
+import {GraphsAction} from "../../store/graphs/actions";
+import {computed} from "vue";
+
+export interface SelectVariablesMixin {
+    startDrag: (evt: DragEvent, variable: string) => void;
+    endDrag: () => void,
+    onDrop: (evt: DragEvent) => void,
+    removeVariable: (srcGraphIdx: number, variable: string) => void
+}
+
+export default (
+    store: Store<AppState>,
+    emit: (event: string, ...args: any[]) => void,
+    hiddenVariables: boolean,
+    graphIndex?: number): SelectVariablesMixin  => {
+
+    const thisSrcGraph = hiddenVariables ? "hidden" : graphIndex!.toString();
+
+    const startDrag = (evt: DragEvent, variable: string) => {
+        const { dataTransfer } = evt;
+        dataTransfer!!.dropEffect = "move";
+        dataTransfer!!.effectAllowed = "move";
+        dataTransfer!!.setData("variable", variable);
+        dataTransfer!!.setData("srcGraph", thisSrcGraph);
+
+        emit("setDragging", true);
+    };
+
+    const endDrag = () => {
+        emit("setDragging", false);
+    };
+
+    const updateSelectedVariables = (graphIndex: number, newVariables: string[]) => {
+        store.dispatch(`graphs/${GraphsAction.UpdateSelectedVariables}`, {
+            graphIndex,
+            selectedVariables: newVariables
+        });
+    };
+
+    // Remove variable from a given graph
+    const removeVariable = (srcGraphIdx: number, variable: string) => {
+        const srcVariables = [...store.state.graphs.config[srcGraphIdx].selectedVariables].filter(
+            (v) => v !== variable
+        );
+        updateSelectedVariables(srcGraphIdx, srcVariables);
+    };
+
+    const selectedVariables = computed<string[]>(
+        () => hiddenVariables ? [] : store.state.graphs.config[graphIndex!].selectedVariables
+    );
+
+    const onDrop = (evt: DragEvent) => {
+        const { dataTransfer } = evt;
+        const variable = dataTransfer!!.getData("variable");
+        const srcGraph = dataTransfer!!.getData("srcGraph");
+        if (srcGraph !== thisSrcGraph) {
+            // remove from source graph
+            if (srcGraph !== "hidden") {
+                removeVariable(parseInt(srcGraph), variable);
+            }
+            // add to this graph if necessary
+            if (!hiddenVariables && !selectedVariables.value.includes(variable)) {
+                const newVars = [...selectedVariables.value, variable];
+                updateSelectedVariables(graphIndex!, newVars);
+            }
+        }
+    };
+
+    return {
+        removeVariable,
+        startDrag,
+        endDrag,
+        onDrop
+    };
+}
\ No newline at end of file