fix: panel buttons unresponsive after window resize

src/components/Panels/ElementsPanel/ElementsPanel.vue

@@ -83,7 +83,7 @@
                 </v-expansion-panel>
             </v-expansion-panels>
             <div
-                v-if="elementInput && !searchElements().length && !searchCategories().length"
+                  v-if="elementInput && !searchElements().length && !searchCategories().length"
                 class="search-results"
             >
                 {{ $t('simulator.panel_body.circuit_elements.search_result') }}
@@ -146,6 +146,7 @@ import { createElement, getImgUrl } from './ElementsPanel'
 import modules from '#/simulator/src/modules'
 import { onBeforeMount, onMounted, ref } from 'vue'
 import { useLayoutStore } from '#/store/layoutStore'
+import { setupPanelListeners } from '#/simulator/src/ux'
 var panelData = []
 window.elementPanelList = []
 const layoutStore = useLayoutStore()
@@ -169,6 +170,7 @@ onBeforeMount(() => {
 
 onMounted(() => {
     layoutStore.elementsPanelRef = elementsPanelRef.value
+    setupPanelListeners('.elementPanel')
 })
 
 var elementInput = ref('')

src/components/Panels/PropertiesPanel/PropertiesPanel.vue

@@ -14,11 +14,13 @@ import LayoutProperty from '#/components/Panels/PropertiesPanel/LayoutProperty/L
 import { toRaw, onMounted } from 'vue'
 import { showPropertiesPanel } from './PropertiesPanel';
 import { usePropertiesPanelStore } from '#/store/propertiesPanelStore';
+import { setupPanelListeners } from '#/simulator/src/ux';
 
 const propertiesPanelStore = usePropertiesPanelStore();
 
 onMounted(() => {
     // checks for which type of properties panel to show
     setInterval(showPropertiesPanel, 100)
+    setupPanelListeners('#moduleProperty')
 })
 </script>

src/components/Panels/TestBenchPanel/TestBenchPanel.vue

@@ -110,13 +110,16 @@ import { buttonListenerFunctions } from '#/simulator/src/testbench'
 import { openCreator } from '#/simulator/src/testbench';
 import { useLayoutStore } from '#/store/layoutStore'
 import { onMounted, ref } from 'vue'
+import { setupPanelListeners, minimizePanel } from '#/simulator/src/ux'
 
 const layoutStore = useLayoutStore()
 const testBenchStore = useTestBenchStore();
 const testbenchPanelRef = ref<HTMLElement | null>(null);
 
 onMounted(() => {
     layoutStore.testbenchPanelRef = testbenchPanelRef.value
+    setupPanelListeners('.testbench-manual-panel')
+    minimizePanel('.testbench-manual-panel')
 })
 
 const testData = computed(() => testBenchStore.testbenchData?.testData);

src/components/Panels/TimingDiagramPanel/TimingDiagramPanel.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="timing-diagram-panel draggable-panel" ref="timingDiagramPanelRef" id="time-Diagram">
+   <div class="timing-diagram-panel draggable-panel" ref="timingDiagramPanelRef" id="time-Diagram">
         <!-- Timing Diagram Panel -->
         <PanelHeader
             :header-title="$t('simulator.panel_header.timing_diagram')"
@@ -49,12 +49,15 @@ import PanelHeader from '../Shared/PanelHeader.vue'
 import { handleButtonClick, handleUnitsChange } from './TimingDiagramPanel'
 import { useLayoutStore } from '#/store/layoutStore'
 import { useTimingDiagramPanelStore } from '#/store/timingDiagramPanelStore'
+import { setupPanelListeners, minimizePanel } from '#/simulator/src/ux'
 
 const layoutStore = useLayoutStore()
 const timingDiagramPanelStore = useTimingDiagramPanelStore();
 
 onMounted(() => {
     layoutStore.timingDiagramPanelRef = timingDiagramPanelStore.timingDiagramPanelRef
+    setupPanelListeners('.timing-diagram-panel')
+    minimizePanel('.timing-diagram-panel')
 })
 </script>
 

src/simulator/src/drag.ts

@@ -72,7 +72,7 @@ export function dragging(targetEl: HTMLElement, DragEl: HTMLElement): void {
         ],
     })
 
-    $(DragEl).on('mousedown', () => {
+    $(DragEl).off('mousedown.dragging').on('mousedown.dragging', () => {
         $(`.draggable-panel:not(${DragEl})`).css('z-index', '99')
         $(DragEl).css('z-index', '99')
     })

src/simulator/src/ux.js

@@ -352,6 +352,11 @@ $('#octalInput').on('keyup', () => {
     setBaseValues(x)
 })
 
+
+export function minimizePanel(panelSelector) {
+    $(panelSelector + ' .minimize').trigger('click')
+}
+
 export function setupPanels() {
     dragging('#dragQPanel', '.quick-btn')
 
@@ -364,17 +369,17 @@ export function setupPanels() {
     setupPanelListeners('.testbench-manual-panel')
 
     // Minimize Timing Diagram (takes too much space)
-    $('.timing-diagram-panel .minimize').trigger('click')
+    minimizePanel('.timing-diagram-panel')
 
     // Minimize Testbench UI
-    $('.testbench-manual-panel .minimize').trigger('click')
+    minimizePanel('.testbench-manual-panel')
 
     $('#projectName').on('click', () => {
         $("input[name='setProjectName']").focus().select()
     })
 }
 
-function setupPanelListeners(panelSelector) {
+export function setupPanelListeners(panelSelector) {
     var headerSelector = `${panelSelector} .panel-header`
     var minimizeSelector = `${panelSelector} .minimize`
     var maximizeSelector = `${panelSelector} .maximize`
@@ -383,25 +388,31 @@ function setupPanelListeners(panelSelector) {
     dragging(headerSelector, panelSelector)
     // Current Panel on Top
     var minimized = false
-    $(headerSelector).on('dblclick', () =>
-        minimized
-            ? $(maximizeSelector).trigger('click')
-            : $(minimizeSelector).trigger('click')
-    )
+    $(headerSelector)
+        .off('dblclick.panelListeners')
+        .on('dblclick.panelListeners', () =>
+            minimized
+                ? $(maximizeSelector).trigger('click')
+                : $(minimizeSelector).trigger('click')
+        )
     // Minimize
-    $(minimizeSelector).on('click', () => {
-        $(bodySelector).hide()
-        $(minimizeSelector).hide()
-        $(maximizeSelector).show()
-        minimized = true
-    })
+    $(minimizeSelector)
+        .off('click.panelListeners')
+        .on('click.panelListeners', () => {
+            $(bodySelector).hide()
+            $(minimizeSelector).hide()
+            $(maximizeSelector).show()
+            minimized = true
+        })
     // Maximize
-    $(maximizeSelector).on('click', () => {
-        $(bodySelector).show()
-        $(minimizeSelector).show()
-        $(maximizeSelector).hide()
-        minimized = false
-    })
+    $(maximizeSelector)
+        .off('click.panelListeners')
+        .on('click.panelListeners', () => {
+            $(bodySelector).show()
+            $(minimizeSelector).show()
+            $(maximizeSelector).hide()
+            minimized = false
+        })
 }
 
 export function exitFullView() {

v1/src/components/Panels/ElementsPanel/ElementsPanel.vue

@@ -146,6 +146,7 @@ import { createElement, getImgUrl } from './ElementsPanel'
 import modules from '#/simulator/src/modules'
 import { onBeforeMount, onMounted, ref } from 'vue'
 import { useLayoutStore } from '#/store/layoutStore'
+import { setupPanelListeners } from '#/simulator/src/ux'
 var panelData = []
 window.elementPanelList = []
 const layoutStore = useLayoutStore()
@@ -169,6 +170,7 @@ onBeforeMount(() => {
 
 onMounted(() => {
     layoutStore.elementsPanelRef = elementsPanelRef.value
+    setupPanelListeners('.elementPanel')
 })
 
 var elementInput = ref('')

v1/src/components/Panels/PropertiesPanel/PropertiesPanel.vue

@@ -14,11 +14,13 @@ import LayoutProperty from '#/components/Panels/PropertiesPanel/LayoutProperty/L
 import { toRaw, onMounted } from 'vue'
 import { showPropertiesPanel } from './PropertiesPanel';
 import { usePropertiesPanelStore } from '#/store/propertiesPanelStore';
+import { setupPanelListeners } from '#/simulator/src/ux'
 
 const propertiesPanelStore = usePropertiesPanelStore();
 
 onMounted(() => {
     // checks for which type of properties panel to show
     setInterval(showPropertiesPanel, 100)
+    setupPanelListeners('#moduleProperty')
 })
 </script>

v1/src/components/Panels/TestBenchPanel/TestBenchPanel.vue

@@ -110,13 +110,16 @@ import { buttonListenerFunctions } from '#/simulator/src/testbench'
 import { openCreator } from '#/simulator/src/testbench';
 import { useLayoutStore } from '#/store/layoutStore'
 import { onMounted, ref } from 'vue'
+import { setupPanelListeners, minimizePanel } from '#/simulator/src/ux'
 
 const layoutStore = useLayoutStore()
 const testBenchStore = useTestBenchStore();
 const testbenchPanelRef = ref<HTMLElement | null>(null);
 
 onMounted(() => {
     layoutStore.testbenchPanelRef = testbenchPanelRef.value
+    setupPanelListeners('.testbench-manual-panel')
+    minimizePanel('.testbench-manual-panel')
 })
 
 const testData = computed(() => testBenchStore.testbenchData?.testData);

v1/src/components/Panels/TimingDiagramPanel/TimingDiagramPanel.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="timing-diagram-panel draggable-panel" ref="timingDiagramPanelRef" id="time-Diagram">
+   <div class="timing-diagram-panel draggable-panel" ref="timingDiagramPanelRef" id="time-Diagram">
         <!-- Timing Diagram Panel -->
         <PanelHeader
             :header-title="$t('simulator.panel_header.timing_diagram')"
@@ -49,12 +49,15 @@ import PanelHeader from '../Shared/PanelHeader.vue'
 import { handleButtonClick, handleUnitsChange } from './TimingDiagramPanel'
 import { useLayoutStore } from '#/store/layoutStore'
 import { useTimingDiagramPanelStore } from '#/store/timingDiagramPanelStore'
+import { setupPanelListeners, minimizePanel } from '#/simulator/src/ux'
 
 const layoutStore = useLayoutStore()
 const timingDiagramPanelStore = useTimingDiagramPanelStore();
 
 onMounted(() => {
     layoutStore.timingDiagramPanelRef = timingDiagramPanelStore.timingDiagramPanelRef
+    setupPanelListeners('.timing-diagram-panel')
+    minimizePanel('.timing-diagram-panel')
 })
 </script>
 

v1/src/simulator/src/drag.ts

@@ -72,7 +72,7 @@ export function dragging(targetEl: HTMLElement, DragEl: HTMLElement): void {
         ],
     })
 
-    $(DragEl).on('mousedown', () => {
+    $(DragEl).off('mousedown.dragging').on('mousedown.dragging', () => {
         $(`.draggable-panel:not(${DragEl})`).css('z-index', '99')
         $(DragEl).css('z-index', '99')
     })

v1/src/simulator/src/ux.js

@@ -352,6 +352,11 @@ $('#octalInput').on('keyup', () => {
     setBaseValues(x)
 })
 
+
+export function minimizePanel(panelSelector) {
+    $(panelSelector + ' .minimize').trigger('click')
+}
+
 export function setupPanels() {
     dragging('#dragQPanel', '.quick-btn')
 
@@ -364,17 +369,17 @@ export function setupPanels() {
     setupPanelListeners('.testbench-manual-panel')
 
     // Minimize Timing Diagram (takes too much space)
-    $('.timing-diagram-panel .minimize').trigger('click')
+    minimizePanel('.timing-diagram-panel')
 
     // Minimize Testbench UI
-    $('.testbench-manual-panel .minimize').trigger('click')
+    minimizePanel('.testbench-manual-panel')
 
     $('#projectName').on('click', () => {
         $("input[name='setProjectName']").focus().select()
     })
 }
 
-function setupPanelListeners(panelSelector) {
+export function setupPanelListeners(panelSelector) {
     var headerSelector = `${panelSelector} .panel-header`
     var minimizeSelector = `${panelSelector} .minimize`
     var maximizeSelector = `${panelSelector} .maximize`
@@ -383,25 +388,31 @@ function setupPanelListeners(panelSelector) {
     dragging(headerSelector, panelSelector)
     // Current Panel on Top
     var minimized = false
-    $(headerSelector).on('dblclick', () =>
-        minimized
-            ? $(maximizeSelector).trigger('click')
-            : $(minimizeSelector).trigger('click')
-    )
+    $(headerSelector)
+        .off('dblclick.panelListeners')
+        .on('dblclick.panelListeners', () =>
+            minimized
+                ? $(maximizeSelector).trigger('click')
+                : $(minimizeSelector).trigger('click')
+        )
     // Minimize
-    $(minimizeSelector).on('click', () => {
-        $(bodySelector).hide()
-        $(minimizeSelector).hide()
-        $(maximizeSelector).show()
-        minimized = true
-    })
+    $(minimizeSelector)
+        .off('click.panelListeners')
+        .on('click.panelListeners', () => {
+            $(bodySelector).hide()
+            $(minimizeSelector).hide()
+            $(maximizeSelector).show()
+            minimized = true
+        })
     // Maximize
-    $(maximizeSelector).on('click', () => {
-        $(bodySelector).show()
-        $(minimizeSelector).show()
-        $(maximizeSelector).hide()
-        minimized = false
-    })
+    $(maximizeSelector)
+        .off('click.panelListeners')
+        .on('click.panelListeners', () => {
+            $(bodySelector).show()
+            $(minimizeSelector).show()
+            $(maximizeSelector).hide()
+            minimized = false
+        })
 }
 
 export function exitFullView() {