Remove use of vm.$on() in label tree(s) components

biigle · Jan 16, 2025 · 64a85f9 · 64a85f9
1 parent 6c1b818
commit 64a85f9
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 13 deletions.
diff --git a/resources/assets/js/label-trees/components/labelTree.vue b/resources/assets/js/label-trees/components/labelTree.vue
@@ -225,9 +225,15 @@ export default {
         },
         emitSelect(label, e) {
             this.$emit('select', label, e);
+            if (this.standalone) {
+                this.selectLabel({label, e});
+            }
         },
         emitDeselect(label, e) {
             this.$emit('deselect', label, e);
+            if (this.standalone) {
+                this.deselectLabel({label, e});
+            }
         },
         emitSave(label, reject) {
             this.$emit('save', label, reject);
@@ -247,12 +253,13 @@ export default {
             }
             return this.allowSelectChildren && e.ctrlKey;
         },
-        selectLabel(label, e) {
+        selectLabel(args) {
+            const {label, e} = args;
             if (!this.multiselect) {
                 this.clearSelectedLabels();
             }
 
-            // The selected label does not nessecarily belong to this label tree since
+            // The selected label does not neccesarily belong to this label tree since
             // the tree may be displayed in a label-trees component with other trees.
             if (label && this.hasLabel(label.id)) {
                 label.selected = true;
@@ -278,7 +285,8 @@ export default {
                 }
             }
         },
-        deselectLabel(label, e) {
+        deselectLabel(args) {
+            const {label, e} = args;
             if (this.hasLabel(label.id)) {
                 label.selected = false;
 
@@ -352,16 +360,13 @@ export default {
         // tree. In a label-trees component only one label can be selected in all label
         // trees so the parent handles the event. A single label tree handles the event
         // by itself.
-        if (this.standalone) {
-            this.$on('select', this.selectLabel);
-            this.$on('deselect', this.deselectLabel);
-        } else {
-            this.$parent.$on('select', this.selectLabel);
-            this.$parent.$on('deselect', this.deselectLabel);
-            this.$parent.$on('clear', this.clearSelectedLabels);
+        if (!this.standalone) {
+            this.$parent.on('select', this.selectLabel);
+            this.$parent.on('deselect', this.deselectLabel);
+            this.$parent.on('clear', this.clearSelectedLabels);
             // Label favourites only work with the label-trees component.
-            this.$parent.$on('add-favourite', this.addFavouriteLabel);
-            this.$parent.$on('remove-favourite', this.removeFavouriteLabel);
+            this.$parent.on('add-favourite', this.addFavouriteLabel);
+            this.$parent.on('remove-favourite', this.removeFavouriteLabel);
         }
     },
 };

diff --git a/resources/assets/js/label-trees/components/labelTrees.vue b/resources/assets/js/label-trees/components/labelTrees.vue
@@ -57,6 +57,7 @@
 <script>
 import Keyboard from '@/core/keyboard.js';
 import LabelTree from './labelTree.vue';
+import mitt from 'mitt';
 import Typeahead from './labelTypeahead.vue';
 import {MAX_FAVOURITES} from '../constants.js';
 
@@ -190,23 +191,28 @@ export default {
         handleSelect(label, e) {
             if (label) {
                 this.$emit('select', label, e);
+                this.events.emit('select', {label, e});
             }
         },
         handleDeselect(label, e) {
             this.$emit('deselect', label, e);
+            this.events.emit('deselect', {label, e});
         },
         clear() {
             this.$emit('clear');
+            this.events.emit('clear');
         },
         handleAddFavourite(label) {
             if (this.canHaveMoreFavourites) {
                 this.$emit('add-favourite', label);
+                this.events.emit('add-favourite', label);
                 this.favourites.push(label);
                 this.updateFavouriteStorage();
             }
         },
         handleRemoveFavourite(label) {
             this.$emit('remove-favourite', label);
+            this.events.emit('remove-favourite', label);
             let index = this.favourites.indexOf(label);
             if (index !== -1) {
                 this.favourites.splice(index, 1);
@@ -225,6 +231,9 @@ export default {
                 this.handleSelect(this.favourites[index]);
             }
         },
+        on(key, fn) {
+            this.events.on(key, fn);
+        },
     },
     watch: {
         trees: {
@@ -251,7 +260,9 @@ export default {
         }
 
     },
-
+    created() {
+        this.events = mitt();
+    },
     mounted() {
         if (this.showFavourites) {
             let favouriteIds = JSON.parse(localStorage.getItem(this.favouriteStorageKey));