Refactor blend mode menu handling in CanvasLayers

Replaces direct DOM removal with a dedicated closeBlendModeMenu method for consistency. Increases menu z-index for better stacking, and appends the menu to the canvas container if available instead of always using document.body.
This commit is contained in:
Dariusz L
2025-06-28 02:33:25 +02:00
parent 3957aa0f61
commit 319cbc1dcb

View File

@@ -454,10 +454,7 @@ export class CanvasLayers {
} }
showBlendModeMenu(x, y) { showBlendModeMenu(x, y) {
const existingMenu = document.getElementById('blend-mode-menu'); this.closeBlendModeMenu();
if (existingMenu) {
document.body.removeChild(existingMenu);
}
const menu = document.createElement('div'); const menu = document.createElement('div');
menu.id = 'blend-mode-menu'; menu.id = 'blend-mode-menu';
@@ -469,7 +466,7 @@ export class CanvasLayers {
border: 1px solid #3a3a3a; border: 1px solid #3a3a3a;
border-radius: 4px; border-radius: 4px;
padding: 5px; padding: 5px;
z-index: 1000; z-index: 10000;
box-shadow: 0 2px 10px rgba(0,0,0,0.3); box-shadow: 0 2px 10px rgba(0,0,0,0.3);
`; `;
@@ -556,11 +553,12 @@ export class CanvasLayers {
menu.appendChild(container); menu.appendChild(container);
}); });
document.body.appendChild(menu); const container = this.canvasLayers.canvas.parentElement || document.body;
container.appendChild(menu);
const closeMenu = (e) => { const closeMenu = (e) => {
if (!menu.contains(e.target)) { if (!menu.contains(e.target)) {
document.body.removeChild(menu); this.closeBlendModeMenu();
document.removeEventListener('mousedown', closeMenu); document.removeEventListener('mousedown', closeMenu);
} }
}; };
@@ -571,8 +569,8 @@ export class CanvasLayers {
closeBlendModeMenu() { closeBlendModeMenu() {
const menu = document.getElementById('blend-mode-menu'); const menu = document.getElementById('blend-mode-menu');
if (menu) { if (menu && menu.parentNode) {
document.body.removeChild(menu); menu.parentNode.removeChild(menu);
} }
} }