Skip to content

Commit 7789261

Browse files
Rohit-rk07Rohit-rk07
committed
perf(piemenus): manage wheel resize listener lifecycle
Add explicit enable/disable hooks for wheel resize handling and route wheelDiv show/hide paths through shared helpers to avoid permanently attached resize listeners. Fixes #6177
1 parent 98745bf commit 7789261

File tree

1 file changed

+58
-32
lines changed

1 file changed

+58
-32
lines changed

‎js/piemenus.js‎

Lines changed: 58 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -103,14 +103,41 @@ const getPieMenuSize = block => {
103103

104104
// Debounce resize handler for performance
105105
let wheelResizeTimeout;
106+
let wheelResizeListenerAttached = false;
106107
const debouncedSetWheelSize = () => {
107108
clearTimeout(wheelResizeTimeout);
108109
wheelResizeTimeout = setTimeout(setWheelSize, 150);
109110
};
110111

111-
// Call the function initially and whenever the window is resized
112-
setWheelSize();
113-
window.addEventListener("resize", debouncedSetWheelSize);
112+
const enableWheelResizeHandling = () => {
113+
if (wheelResizeListenerAttached) return;
114+
wheelResizeListenerAttached = true;
115+
window.addEventListener("resize", debouncedSetWheelSize);
116+
setWheelSize();
117+
};
118+
119+
const disableWheelResizeHandling = () => {
120+
if (!wheelResizeListenerAttached) return;
121+
wheelResizeListenerAttached = false;
122+
window.removeEventListener("resize", debouncedSetWheelSize);
123+
clearTimeout(wheelResizeTimeout);
124+
};
125+
126+
const showWheelDiv = () => {
127+
const wheelDiv = docById("wheelDiv");
128+
if (!wheelDiv) return null;
129+
wheelDiv.style.display = "";
130+
enableWheelResizeHandling();
131+
return wheelDiv;
132+
};
133+
134+
const hideWheelDiv = () => {
135+
const wheelDiv = docById("wheelDiv");
136+
if (!wheelDiv) return null;
137+
docById("wheelDiv").style.display = "none";
138+
disableWheelResizeHandling();
139+
return wheelDiv;
140+
};
114141

115142
/**
116143
* Enables mouse-wheel scrolling to rotate a wheelnav instance
@@ -255,8 +282,7 @@ const piemenuPitches = (block, noteLabels, noteValues, accidentals, note, accide
255282
noteValues = ["C", "G", "D", "A", "E", "B", "F"];
256283
}
257284

258-
const wheelDiv = docById("wheelDiv");
259-
wheelDiv.style.display = ""; // Show the div but keep it invisible initially
285+
const wheelDiv = showWheelDiv(); // Show the div but keep it invisible initially
260286
wheelDiv.style.opacity = "0";
261287

262288
// The pitch selector
@@ -899,7 +925,7 @@ const piemenuPitches = (block, noteLabels, noteValues, accidentals, note, accide
899925
// Refresh the block's cache
900926
that.updateCache();
901927
// Hide the pie menu and remove the wheels
902-
docById("wheelDiv").style.display = "none";
928+
hideWheelDiv();
903929
that._pitchWheel.removeWheel();
904930
if (!custom) {
905931
that._accidentalsWheel.removeWheel();
@@ -927,7 +953,7 @@ const piemenuCustomNotes = (block, noteLabels, customLabels, selectedCustom, sel
927953
return;
928954
}
929955

930-
docById("wheelDiv").style.display = "";
956+
showWheelDiv();
931957

932958
// Some blocks have both pitch and octave, so we can modify
933959
// both at once.
@@ -1190,7 +1216,7 @@ const piemenuCustomNotes = (block, noteLabels, customLabels, selectedCustom, sel
11901216

11911217
const __exitMenu = () => {
11921218
that._piemenuExitTime = new Date().getTime();
1193-
docById("wheelDiv").style.display = "none";
1219+
hideWheelDiv();
11941220
};
11951221

11961222
const __selectionChanged = () => {
@@ -1279,7 +1305,7 @@ const piemenuNthModalPitch = (block, noteValues, note) => {
12791305
}
12801306
noteLabels.push(null);
12811307

1282-
docById("wheelDiv").style.display = "";
1308+
showWheelDiv();
12831309

12841310
const wheelSize = getPieMenuSize(block);
12851311
block._pitchWheel = new wheelnav("wheelDiv", null, wheelSize, wheelSize);
@@ -1506,7 +1532,7 @@ const piemenuNthModalPitch = (block, noteValues, note) => {
15061532
// Hide the widget when the exit button is clicked.
15071533
block._exitWheel.navItems[0].navigateFunction = () => {
15081534
that._piemenuExitTime = new Date().getTime();
1509-
docById("wheelDiv").style.display = "none";
1535+
hideWheelDiv();
15101536
that._pitchWheel.removeWheel();
15111537
that._exitWheel.removeWheel();
15121538
that._octavesWheel.removeWheel();
@@ -1529,7 +1555,7 @@ const piemenuAccidentals = (block, accidentalLabels, accidentalValues, accidenta
15291555
return;
15301556
}
15311557

1532-
docById("wheelDiv").style.display = "";
1558+
showWheelDiv();
15331559

15341560
// the accidental selector
15351561
const wheelSize = getPieMenuSize(block);
@@ -1598,7 +1624,7 @@ const piemenuAccidentals = (block, accidentalLabels, accidentalValues, accidenta
15981624
*/
15991625
const __exitMenu = () => {
16001626
that._piemenuExitTime = new Date().getTime();
1601-
docById("wheelDiv").style.display = "none";
1627+
hideWheelDiv();
16021628
that._accidentalWheel.removeWheel();
16031629
that._exitWheel.removeWheel();
16041630
};
@@ -1671,7 +1697,7 @@ const piemenuNoteValue = (block, noteValue) => {
16711697
return;
16721698
}
16731699

1674-
docById("wheelDiv").style.display = "";
1700+
showWheelDiv();
16751701

16761702
// We want powers of two on the bottom, nearest the input box
16771703
// as it is most common.
@@ -1787,7 +1813,7 @@ const piemenuNoteValue = (block, noteValue) => {
17871813
*/
17881814
const __exitMenu = () => {
17891815
that._piemenuExitTime = new Date().getTime();
1790-
docById("wheelDiv").style.display = "none";
1816+
hideWheelDiv();
17911817
that._noteValueWheel.removeWheel();
17921818
that._exitWheel.removeWheel();
17931819
that.label.style.display = "none";
@@ -1919,7 +1945,7 @@ const piemenuNumber = (block, wheelValues, selectedValue) => {
19191945
if (block.blocks.stageClick) {
19201946
return;
19211947
}
1922-
docById("wheelDiv").style.display = "";
1948+
showWheelDiv();
19231949
// the number selector
19241950
const wheelSize = getPieMenuSize(block);
19251951
block._numberWheel = new wheelnav("wheelDiv", null, wheelSize, wheelSize);
@@ -2026,7 +2052,7 @@ const piemenuNumber = (block, wheelValues, selectedValue) => {
20262052

20272053
const __exitMenu = () => {
20282054
that._piemenuExitTime = new Date().getTime();
2029-
docById("wheelDiv").style.display = "none";
2055+
hideWheelDiv();
20302056
that._numberWheel.removeWheel();
20312057
that._exitWheel.removeWheel();
20322058
that.label.style.display = "none";
@@ -2247,7 +2273,7 @@ const piemenuColor = (block, wheelValues, selectedValue, mode) => {
22472273
return;
22482274
}
22492275

2250-
docById("wheelDiv").style.display = "";
2276+
showWheelDiv();
22512277

22522278
// the number selector
22532279
const wheelSize = getPieMenuSize(block);
@@ -2334,7 +2360,7 @@ const piemenuColor = (block, wheelValues, selectedValue, mode) => {
23342360

23352361
const __exitMenu = () => {
23362362
that._piemenuExitTime = new Date().getTime();
2337-
docById("wheelDiv").style.display = "none";
2363+
hideWheelDiv();
23382364
that._numberWheel.removeWheel();
23392365
that._exitWheel.removeWheel();
23402366
that.label.style.display = "none";
@@ -2434,7 +2460,7 @@ const piemenuBasic = (block, menuLabels, menuValues, selectedValue, colors) => {
24342460
colors = platformColor.piemenuBasicundefined;
24352461
}
24362462

2437-
docById("wheelDiv").style.display = "";
2463+
showWheelDiv();
24382464

24392465
// reference to diameter of the basic wheel
24402466
let size = 800;
@@ -2509,7 +2535,7 @@ const piemenuBasic = (block, menuLabels, menuValues, selectedValue, colors) => {
25092535

25102536
const __exitMenu = () => {
25112537
that._piemenuExitTime = new Date().getTime();
2512-
docById("wheelDiv").style.display = "none";
2538+
hideWheelDiv();
25132539
that._basicWheel.removeWheel();
25142540
};
25152541

@@ -2582,7 +2608,7 @@ const piemenuBoolean = (block, booleanLabels, booleanValues, boolean) => {
25822608
return;
25832609
}
25842610

2585-
docById("wheelDiv").style.display = "";
2611+
showWheelDiv();
25862612

25872613
// the boolean selector
25882614
const wheelSize = getPieMenuSize(block);
@@ -2623,7 +2649,7 @@ const piemenuBoolean = (block, booleanLabels, booleanValues, boolean) => {
26232649

26242650
const __exitMenu = () => {
26252651
that._piemenuExitTime = new Date().getTime();
2626-
docById("wheelDiv").style.display = "none";
2652+
hideWheelDiv();
26272653
that._booleanWheel.removeWheel();
26282654
};
26292655

@@ -2693,7 +2719,7 @@ const piemenuChords = (block, selectedChord) => {
26932719
return;
26942720
}
26952721

2696-
docById("wheelDiv").style.display = "";
2722+
showWheelDiv();
26972723

26982724
// the chord selector
26992725
block._chordWheel = new wheelnav("wheelDiv", null, 1000, 1000);
@@ -2758,7 +2784,7 @@ const piemenuChords = (block, selectedChord) => {
27582784

27592785
const __exitMenu = () => {
27602786
that._piemenuExitTime = new Date().getTime();
2761-
docById("wheelDiv").style.display = "none";
2787+
hideWheelDiv();
27622788
that._chordWheel.removeWheel();
27632789
};
27642790

@@ -2843,7 +2869,7 @@ const piemenuVoices = (block, voiceLabels, voiceValues, categories, voice, rotat
28432869
colors.push(COLORS[categories[i] % COLORS.length]);
28442870
}
28452871

2846-
docById("wheelDiv").style.display = "";
2872+
showWheelDiv();
28472873

28482874
// the voice selector
28492875
if (localStorage.kanaPreference === "kana") {
@@ -3004,7 +3030,7 @@ const piemenuVoices = (block, voiceLabels, voiceValues, categories, voice, rotat
30043030
// Hide the widget when the exit button is clicked.
30053031
block._exitWheel.navItems[0].navigateFunction = () => {
30063032
that._piemenuExitTime = new Date().getTime();
3007-
docById("wheelDiv").style.display = "none";
3033+
hideWheelDiv();
30083034
};
30093035
};
30103036

@@ -3021,7 +3047,7 @@ const piemenuIntervals = (block, selectedInterval) => {
30213047
return;
30223048
}
30233049

3024-
docById("wheelDiv").style.display = "";
3050+
showWheelDiv();
30253051

30263052
// Use advanced constructor for more wheelnav on same div
30273053
const language = localStorage.languagePreference;
@@ -3182,7 +3208,7 @@ const piemenuIntervals = (block, selectedInterval) => {
31823208

31833209
const __exitMenu = () => {
31843210
that._piemenuExitTime = new Date().getTime();
3185-
docById("wheelDiv").style.display = "none";
3211+
hideWheelDiv();
31863212
};
31873213

31883214
const __selectionChanged = () => {
@@ -3271,7 +3297,7 @@ const piemenuModes = (block, selectedMode) => {
32713297
}
32723298
}
32733299

3274-
docById("wheelDiv").style.display = "";
3300+
showWheelDiv();
32753301

32763302
//Use advanced constructor for more wheelnav on same div
32773303
block._modeWheel = new wheelnav("wheelDiv", null, 1200, 1200);
@@ -3509,7 +3535,7 @@ const piemenuModes = (block, selectedMode) => {
35093535
clearTimeout(timeout);
35103536
}
35113537
that._piemenuExitTime = new Date().getTime();
3512-
docById("wheelDiv").style.display = "none";
3538+
hideWheelDiv();
35133539
if (that._modeNameWheel !== null) {
35143540
that._modeNameWheel.removeWheel();
35153541
}
@@ -4342,7 +4368,7 @@ const piemenuDissectNumber = widget => {
43424368
const currentValue = parseInt(widget._dissectNumber.value) || 2;
43434369

43444370
// Show the wheel div
4345-
docById("wheelDiv").style.display = "";
4371+
showWheelDiv();
43464372

43474373
// Create the number wheel
43484374
const wheelSize = getPieMenuSize({ blocks: widget.activity.logo.blocks });
@@ -4399,7 +4425,7 @@ const piemenuDissectNumber = widget => {
43994425

44004426
// Handle exit
44014427
const __exitMenu = () => {
4402-
docById("wheelDiv").style.display = "none";
4428+
hideWheelDiv();
44034429
numberWheel.removeWheel();
44044430
exitWheel.removeWheel();
44054431
};

0 commit comments

Comments
 (0)