Custom Context Menu
AuroraView supports disabling the native browser context menu and implementing custom menus through JavaScript.
Disabling Native Context Menu
WebView
python
from auroraview import WebView
# Disable native context menu
webview = WebView.create(
title="My Tool",
url="http://localhost:3000",
context_menu=False # Disable native right-click menu
)
webview.show()QtWebView
python
from auroraview import QtWebView
# Disable native context menu in Qt widget
webview = QtWebView(
parent=maya_main_window(),
title="My Tool",
width=800,
height=600,
context_menu=False # Disable native right-click menu
)
webview.show()Implementing Custom Context Menu
Once the native context menu is disabled, you can implement your own custom menu using JavaScript:
HTML/JavaScript Example
html
<!DOCTYPE html>
<html>
<head>
<style>
.custom-menu {
display: none;
position: absolute;
background: white;
border: 1px solid #ccc;
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
z-index: 1000;
}
.custom-menu ul {
list-style: none;
margin: 0;
padding: 5px 0;
}
.custom-menu li {
padding: 8px 20px;
cursor: pointer;
}
.custom-menu li:hover {
background: #f0f0f0;
}
</style>
</head>
<body>
<div id="customMenu" class="custom-menu">
<ul>
<li onclick="handleMenuAction('export')">Export Scene</li>
<li onclick="handleMenuAction('import')">Import Assets</li>
<li onclick="handleMenuAction('settings')">Settings</li>
</ul>
</div>
<script>
const menu = document.getElementById('customMenu');
// Show custom menu on right-click
document.addEventListener('contextmenu', (e) => {
e.preventDefault();
menu.style.display = 'block';
menu.style.left = e.pageX + 'px';
menu.style.top = e.pageY + 'px';
});
// Hide menu on click elsewhere
document.addEventListener('click', () => {
menu.style.display = 'none';
});
// Handle menu actions
function handleMenuAction(action) {
// Send action to Python
window.auroraview.send_event('menu_action', { action: action });
menu.style.display = 'none';
}
</script>
</body>
</html>Python Handler
python
from auroraview import WebView
webview = WebView.create(
title="Custom Menu Demo",
context_menu=False
)
@webview.on('menu_action')
def handle_menu_action(data):
action = data.get('action')
print(f"Menu action: {action}")
if action == 'export':
# Handle export
pass
elif action == 'import':
# Handle import
pass
elif action == 'settings':
# Show settings
pass
webview.load_file('custom_menu.html')
webview.show()Developer Console Configuration
The developer console (DevTools) can also be configured:
python
from auroraview import WebView
# Disable both context menu and dev tools for production
webview = WebView.create(
title="Production Tool",
url="http://localhost:3000",
debug=False, # Disable developer tools
context_menu=False # Disable context menu
)
webview.show()React Example
jsx
import { useState, useEffect } from 'react';
function ContextMenu({ x, y, onClose, onAction }) {
return (
<div
className="context-menu"
style={{ left: x, top: y }}
>
<ul>
<li onClick={() => onAction('export')}>Export Scene</li>
<li onClick={() => onAction('import')}>Import Assets</li>
<li onClick={() => onAction('settings')}>Settings</li>
</ul>
</div>
);
}
function App() {
const [menu, setMenu] = useState(null);
useEffect(() => {
const handleContextMenu = (e) => {
e.preventDefault();
setMenu({ x: e.pageX, y: e.pageY });
};
const handleClick = () => setMenu(null);
document.addEventListener('contextmenu', handleContextMenu);
document.addEventListener('click', handleClick);
return () => {
document.removeEventListener('contextmenu', handleContextMenu);
document.removeEventListener('click', handleClick);
};
}, []);
const handleAction = (action) => {
window.auroraview.send_event('menu_action', { action });
setMenu(null);
};
return (
<div>
{/* Your app content */}
{menu && (
<ContextMenu
x={menu.x}
y={menu.y}
onClose={() => setMenu(null)}
onAction={handleAction}
/>
)}
</div>
);
}Best Practices
Always provide alternative functionality: When disabling the native context menu, ensure users can access the same functionality through your custom UI.
Keyboard shortcuts: Implement keyboard shortcuts for common actions as an alternative to menu items.
Accessibility: Ensure your custom menu is accessible via keyboard navigation.
Consistent UX: Match your custom menu style to the host DCC application for a seamless experience.
Context-aware menus: Show different menu items based on what the user right-clicked on:
javascript
document.addEventListener('contextmenu', (e) => {
e.preventDefault();
const target = e.target;
let menuItems = [];
if (target.classList.contains('node')) {
menuItems = ['Delete Node', 'Duplicate Node', 'Edit Properties'];
} else if (target.classList.contains('connection')) {
menuItems = ['Delete Connection', 'Edit Connection'];
} else {
menuItems = ['Create Node', 'Paste', 'Settings'];
}
showMenu(e.pageX, e.pageY, menuItems);
});Platform Notes
- Windows: Context menu disabling is fully supported via WebView2 settings
- macOS/Linux: Context menu behavior may vary depending on the WebView backend