unmount listeners (#16)

Author: dpgiakatos

package.json

@@ -1,6 +1,6 @@
 {
   "name": "iyp-browser",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "private": true,
   "type": "module",
   "scripts": {

src/components/InputPanel.vue

@@ -83,10 +83,6 @@ onMounted(() => {
       updateEditorHeight()
     }
   })
-
-  window.addEventListener('hitResult', () => {
-    // console.log(e)
-  })
   monaco.languages.register({
     id: 'cypher',
     extensions: ['.cypher'],

src/components/OutputPanel.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, inject, onMounted } from 'vue'
+import { ref, inject, onMounted, onUnmounted } from 'vue'
 import InputPanel from '@/components/InputPanel.vue'
 import GraphOutput from '@/components/output/GraphOutput.vue'
 import TableOutput from '@/components/output/TableOutput.vue'
@@ -27,6 +27,7 @@ const isFullscreen = ref(false)
 const heightBeforeFullscreen = ref('')
 let previousEditorHeight = 0
 const expandedNodesState = ref(new Map())
+let interactOutputPanel = null
 
 const runCypher = async (cypher) => {
   loading.value = true
@@ -110,7 +111,7 @@ const changeTab = (tabName) => {
 onMounted(() => {
   run(props.query)
   if (!props.disableResizer) {
-    interact(outputPanel.value)
+    interactOutputPanel = interact(outputPanel.value)
       .origin('self')
       .resizable({
         edges: { top: false, left: false, bottom: true, right: false },
@@ -129,6 +130,12 @@ onMounted(() => {
       })
   }
 })
+
+onUnmounted(() => {
+  if (interactOutputPanel) {
+    interactOutputPanel.unset()
+  }
+})
 </script>
 
 <template>

src/components/output/GraphOutput.vue

@@ -39,6 +39,7 @@ const nodeRightClickMenu = ref({
   clicked: false
 })
 const graphOverviewPanelWidth = ref(`${GlobalVariables.graphOverviewPanelWidth}px`)
+let interactOverview = null
 
 const options = {
   disableTelemetry: true,
@@ -409,7 +410,7 @@ const init = (nodes, relationships) => {
 onMounted(async () => {
   init(props.nodes, props.relationships)
   if (!props.disableResizer) {
-    interact(overview.value)
+    interactOverview = interact(overview.value)
       .origin('self')
       .resizable({
         edges: { top: false, left: true, bottom: false, right: false },
@@ -433,6 +434,9 @@ onUnmounted(() => {
   if (nvl) {
     nvl.destroy()
   }
+  if (interactOverview) {
+    interactOverview.unset()
+  }
 })
 </script>