Skip to content

Commit 4aa657b

Browse files
senutpalNihal4777
senutpal
and
Nihal4777
authored
fix: panel buttons unresponsive after window resize (#882)
* fix: panel buttons unresponsive after window resize * fix: make setupPanelListeners idempotent with namespaced events * fix: implement review suggestions * fix: implement coderabbit suggestion --------- Co-authored-by: Nihal <65150640+Nihal4777@users.noreply.github.com>
1 parent d4699fc commit 4aa657b

File tree

12 files changed

+87
-45
lines changed

12 files changed

+87
-45
lines changed

‎src/components/Panels/ElementsPanel/ElementsPanel.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@
8383
</v-expansion-panel>
8484
</v-expansion-panels>
8585
<div
86-
v-if="elementInput && !searchElements().length && !searchCategories().length"
86+
v-if="elementInput && !searchElements().length && !searchCategories().length"
8787
class="search-results"
8888
>
8989
{{ $t('simulator.panel_body.circuit_elements.search_result') }}
@@ -146,6 +146,7 @@ import { createElement, getImgUrl } from './ElementsPanel'
146146
import modules from '#/simulator/src/modules'
147147
import { onBeforeMount, onMounted, ref } from 'vue'
148148
import { useLayoutStore } from '#/store/layoutStore'
149+
import { setupPanelListeners } from '#/simulator/src/ux'
149150
var panelData = []
150151
window.elementPanelList = []
151152
const layoutStore = useLayoutStore()
@@ -169,6 +170,7 @@ onBeforeMount(() => {
169170
170171
onMounted(() => {
171172
layoutStore.elementsPanelRef = elementsPanelRef.value
173+
setupPanelListeners('.elementPanel')
172174
})
173175
174176
var elementInput = ref('')

‎src/components/Panels/PropertiesPanel/PropertiesPanel.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,13 @@ import LayoutProperty from '#/components/Panels/PropertiesPanel/LayoutProperty/L
1414
import { toRaw, onMounted } from 'vue'
1515
import { showPropertiesPanel } from './PropertiesPanel';
1616
import { usePropertiesPanelStore } from '#/store/propertiesPanelStore';
17+
import { setupPanelListeners } from '#/simulator/src/ux';
1718
1819
const propertiesPanelStore = usePropertiesPanelStore();
1920
2021
onMounted(() => {
2122
// checks for which type of properties panel to show
2223
setInterval(showPropertiesPanel, 100)
24+
setupPanelListeners('#moduleProperty')
2325
})
2426
</script>

‎src/components/Panels/TestBenchPanel/TestBenchPanel.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,13 +110,16 @@ import { buttonListenerFunctions } from '#/simulator/src/testbench'
110110
import { openCreator } from '#/simulator/src/testbench';
111111
import { useLayoutStore } from '#/store/layoutStore'
112112
import { onMounted, ref } from 'vue'
113+
import { setupPanelListeners, minimizePanel } from '#/simulator/src/ux'
113114
114115
const layoutStore = useLayoutStore()
115116
const testBenchStore = useTestBenchStore();
116117
const testbenchPanelRef = ref<HTMLElement | null>(null);
117118
118119
onMounted(() => {
119120
layoutStore.testbenchPanelRef = testbenchPanelRef.value
121+
setupPanelListeners('.testbench-manual-panel')
122+
minimizePanel('.testbench-manual-panel')
120123
})
121124
122125
const testData = computed(() => testBenchStore.testbenchData?.testData);

‎src/components/Panels/TimingDiagramPanel/TimingDiagramPanel.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="timing-diagram-panel draggable-panel" ref="timingDiagramPanelRef" id="time-Diagram">
2+
<div class="timing-diagram-panel draggable-panel" ref="timingDiagramPanelRef" id="time-Diagram">
33
<!-- Timing Diagram Panel -->
44
<PanelHeader
55
:header-title="$t('simulator.panel_header.timing_diagram')"
@@ -49,12 +49,15 @@ import PanelHeader from '../Shared/PanelHeader.vue'
4949
import { handleButtonClick, handleUnitsChange } from './TimingDiagramPanel'
5050
import { useLayoutStore } from '#/store/layoutStore'
5151
import { useTimingDiagramPanelStore } from '#/store/timingDiagramPanelStore'
52+
import { setupPanelListeners, minimizePanel } from '#/simulator/src/ux'
5253
5354
const layoutStore = useLayoutStore()
5455
const timingDiagramPanelStore = useTimingDiagramPanelStore();
5556
5657
onMounted(() => {
5758
layoutStore.timingDiagramPanelRef = timingDiagramPanelStore.timingDiagramPanelRef
59+
setupPanelListeners('.timing-diagram-panel')
60+
minimizePanel('.timing-diagram-panel')
5861
})
5962
</script>
6063

‎src/simulator/src/drag.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export function dragging(targetEl: HTMLElement, DragEl: HTMLElement): void {
7272
],
7373
})
7474

75-
$(DragEl).on('mousedown', () => {
75+
$(DragEl).off('mousedown.dragging').on('mousedown.dragging', () => {
7676
$(`.draggable-panel:not(${DragEl})`).css('z-index', '99')
7777
$(DragEl).css('z-index', '99')
7878
})

‎src/simulator/src/ux.js‎

Lines changed: 31 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -352,6 +352,11 @@ $('#octalInput').on('keyup', () => {
352352
setBaseValues(x)
353353
})
354354

355+
356+
export function minimizePanel(panelSelector) {
357+
$(panelSelector + ' .minimize').trigger('click')
358+
}
359+
355360
export function setupPanels() {
356361
dragging('#dragQPanel', '.quick-btn')
357362

@@ -364,17 +369,17 @@ export function setupPanels() {
364369
setupPanelListeners('.testbench-manual-panel')
365370

366371
// Minimize Timing Diagram (takes too much space)
367-
$('.timing-diagram-panel .minimize').trigger('click')
372+
minimizePanel('.timing-diagram-panel')
368373

369374
// Minimize Testbench UI
370-
$('.testbench-manual-panel .minimize').trigger('click')
375+
minimizePanel('.testbench-manual-panel')
371376

372377
$('#projectName').on('click', () => {
373378
$("input[name='setProjectName']").focus().select()
374379
})
375380
}
376381

377-
function setupPanelListeners(panelSelector) {
382+
export function setupPanelListeners(panelSelector) {
378383
var headerSelector = `${panelSelector} .panel-header`
379384
var minimizeSelector = `${panelSelector} .minimize`
380385
var maximizeSelector = `${panelSelector} .maximize`
@@ -383,25 +388,31 @@ function setupPanelListeners(panelSelector) {
383388
dragging(headerSelector, panelSelector)
384389
// Current Panel on Top
385390
var minimized = false
386-
$(headerSelector).on('dblclick', () =>
387-
minimized
388-
? $(maximizeSelector).trigger('click')
389-
: $(minimizeSelector).trigger('click')
390-
)
391+
$(headerSelector)
392+
.off('dblclick.panelListeners')
393+
.on('dblclick.panelListeners', () =>
394+
minimized
395+
? $(maximizeSelector).trigger('click')
396+
: $(minimizeSelector).trigger('click')
397+
)
391398
// Minimize
392-
$(minimizeSelector).on('click', () => {
393-
$(bodySelector).hide()
394-
$(minimizeSelector).hide()
395-
$(maximizeSelector).show()
396-
minimized = true
397-
})
399+
$(minimizeSelector)
400+
.off('click.panelListeners')
401+
.on('click.panelListeners', () => {
402+
$(bodySelector).hide()
403+
$(minimizeSelector).hide()
404+
$(maximizeSelector).show()
405+
minimized = true
406+
})
398407
// Maximize
399-
$(maximizeSelector).on('click', () => {
400-
$(bodySelector).show()
401-
$(minimizeSelector).show()
402-
$(maximizeSelector).hide()
403-
minimized = false
404-
})
408+
$(maximizeSelector)
409+
.off('click.panelListeners')
410+
.on('click.panelListeners', () => {
411+
$(bodySelector).show()
412+
$(minimizeSelector).show()
413+
$(maximizeSelector).hide()
414+
minimized = false
415+
})
405416
}
406417

407418
export function exitFullView() {

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,7 @@ import { createElement, getImgUrl } from './ElementsPanel'
146146
import modules from '#/simulator/src/modules'
147147
import { onBeforeMount, onMounted, ref } from 'vue'
148148
import { useLayoutStore } from '#/store/layoutStore'
149+
import { setupPanelListeners } from '#/simulator/src/ux'
149150
var panelData = []
150151
window.elementPanelList = []
151152
const layoutStore = useLayoutStore()
@@ -169,6 +170,7 @@ onBeforeMount(() => {
169170
170171
onMounted(() => {
171172
layoutStore.elementsPanelRef = elementsPanelRef.value
173+
setupPanelListeners('.elementPanel')
172174
})
173175
174176
var elementInput = ref('')

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,13 @@ import LayoutProperty from '#/components/Panels/PropertiesPanel/LayoutProperty/L
1414
import { toRaw, onMounted } from 'vue'
1515
import { showPropertiesPanel } from './PropertiesPanel';
1616
import { usePropertiesPanelStore } from '#/store/propertiesPanelStore';
17+
import { setupPanelListeners } from '#/simulator/src/ux'
1718
1819
const propertiesPanelStore = usePropertiesPanelStore();
1920
2021
onMounted(() => {
2122
// checks for which type of properties panel to show
2223
setInterval(showPropertiesPanel, 100)
24+
setupPanelListeners('#moduleProperty')
2325
})
2426
</script>

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,13 +110,16 @@ import { buttonListenerFunctions } from '#/simulator/src/testbench'
110110
import { openCreator } from '#/simulator/src/testbench';
111111
import { useLayoutStore } from '#/store/layoutStore'
112112
import { onMounted, ref } from 'vue'
113+
import { setupPanelListeners, minimizePanel } from '#/simulator/src/ux'
113114
114115
const layoutStore = useLayoutStore()
115116
const testBenchStore = useTestBenchStore();
116117
const testbenchPanelRef = ref<HTMLElement | null>(null);
117118
118119
onMounted(() => {
119120
layoutStore.testbenchPanelRef = testbenchPanelRef.value
121+
setupPanelListeners('.testbench-manual-panel')
122+
minimizePanel('.testbench-manual-panel')
120123
})
121124
122125
const testData = computed(() => testBenchStore.testbenchData?.testData);

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="timing-diagram-panel draggable-panel" ref="timingDiagramPanelRef" id="time-Diagram">
2+
<div class="timing-diagram-panel draggable-panel" ref="timingDiagramPanelRef" id="time-Diagram">
33
<!-- Timing Diagram Panel -->
44
<PanelHeader
55
:header-title="$t('simulator.panel_header.timing_diagram')"
@@ -49,12 +49,15 @@ import PanelHeader from '../Shared/PanelHeader.vue'
4949
import { handleButtonClick, handleUnitsChange } from './TimingDiagramPanel'
5050
import { useLayoutStore } from '#/store/layoutStore'
5151
import { useTimingDiagramPanelStore } from '#/store/timingDiagramPanelStore'
52+
import { setupPanelListeners, minimizePanel } from '#/simulator/src/ux'
5253
5354
const layoutStore = useLayoutStore()
5455
const timingDiagramPanelStore = useTimingDiagramPanelStore();
5556
5657
onMounted(() => {
5758
layoutStore.timingDiagramPanelRef = timingDiagramPanelStore.timingDiagramPanelRef
59+
setupPanelListeners('.timing-diagram-panel')
60+
minimizePanel('.timing-diagram-panel')
5861
})
5962
</script>
6063

0 commit comments

Comments
 (0)