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

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

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