IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Canvas: Improve context menu UX (#52234)

Browse Source
This commit is contained in:
Nathan Marrs 2022-07-14 15:53:02 -07:00 committed by GitHub
parent da1701ce57
commit 5579c59fd1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 64 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
public/app/plugins/panel/canvas/CanvasContextMenu.tsx
View File

@ -32,7 +32,8 @@ export const CanvasContextMenu = ({ scene }: Props) => {
const handleContextMenu = useCallback( const handleContextMenu = useCallback(
(event) => { (event) => {
event.preventDefault(); event.preventDefault();
if (event.currentTarget) { const shouldSelectElement = event.currentTarget !== scene.div;
if (shouldSelectElement) {
scene.select({ targets: [event.currentTarget as HTMLElement | SVGElement] }); scene.select({ targets: [event.currentTarget as HTMLElement | SVGElement] });
} }
setAnchorPoint({ x: event.pageX, y: event.pageY }); setAnchorPoint({ x: event.pageX, y: event.pageY });
@ -42,73 +43,82 @@ export const CanvasContextMenu = ({ scene }: Props) => {
); );
useEffect(() => { useEffect(() => {
if (selectedElements && selectedElements.length === 1) { if (scene.selecto) {
const element = selectedElements[0]; scene.selecto.getSelectableElements().forEach((element) => {
element.addEventListener('contextmenu', handleContextMenu); element.addEventListener('contextmenu', handleContextMenu);
});
} }
}, [selectedElements, handleContextMenu]); }, [handleContextMenu, scene.selecto]);
if (!selectedElements) { useEffect(() => {
return <></>; if (scene.div) {
} scene.div.addEventListener('contextmenu', handleContextMenu);
}
}, [handleContextMenu, scene.div]);
const closeContextMenu = () => { const closeContextMenu = () => {
setIsMenuVisible(false); setIsMenuVisible(false);
}; };
const renderMenuItems = () => { const renderMenuItems = () => {
return ( const openCloseEditorMenuItem = !scene.isPanelEditing && (
<> <MenuItem
<MenuItem label={inlineEditorOpen ? 'Close Editor' : 'Open Editor'}
label="Delete" onClick={() => {
onClick={() => { if (scene.inlineEditingCallback) {
contextMenuAction(LayerActionID.Delete); if (inlineEditorOpen) {
closeContextMenu(); activePanel.panel.inlineEditButtonClose();
}} } else {
className={styles.menuItem} scene.inlineEditingCallback();
/> }
<MenuItem }
label="Duplicate" closeContextMenu();
onClick={() => { }}
contextMenuAction(LayerActionID.Duplicate); className={styles.menuItem}
closeContextMenu(); />
}} );
className={styles.menuItem}
/> if (selectedElements && selectedElements.length >= 1) {
<MenuItem return (
label="Bring to front" <>
onClick={() => {
contextMenuAction(LayerActionID.MoveTop);
closeContextMenu();
}}
className={styles.menuItem}
/>
<MenuItem
label="Send to back"
onClick={() => {
contextMenuAction(LayerActionID.MoveBottom);
closeContextMenu();
}}
className={styles.menuItem}
/>
{!scene.isPanelEditing && (
<MenuItem <MenuItem
label={inlineEditorOpen ? 'Close Editor' : 'Open Editor'} label="Delete"
onClick={() => { onClick={() => {
if (scene.inlineEditingCallback) { contextMenuAction(LayerActionID.Delete);
if (inlineEditorOpen) {
activePanel.panel.inlineEditButtonClose();
} else {
scene.inlineEditingCallback();
}
}
closeContextMenu(); closeContextMenu();
}} }}
className={styles.menuItem} className={styles.menuItem}
/> />
)} <MenuItem
</> label="Duplicate"
); onClick={() => {
contextMenuAction(LayerActionID.Duplicate);
closeContextMenu();
}}
className={styles.menuItem}
/>
<MenuItem
label="Bring to front"
onClick={() => {
contextMenuAction(LayerActionID.MoveTop);
closeContextMenu();
}}
className={styles.menuItem}
/>
<MenuItem
label="Send to back"
onClick={() => {
contextMenuAction(LayerActionID.MoveBottom);
closeContextMenu();
}}
className={styles.menuItem}
/>
{openCloseEditorMenuItem}
</>
);
} else {
return openCloseEditorMenuItem;
}
}; };
const contextMenuAction = (actionType: string) => { const contextMenuAction = (actionType: string) => {