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(
(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,73 +43,82 @@ export const CanvasContextMenu = ({ scene }: Props) => {
);
useEffect(() => {
if (selectedElements && selectedElements.length === 1) {
const element = selectedElements[0];
element.addEventListener('contextmenu', handleContextMenu);
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 = () => {
return (
<>
<MenuItem
label="Delete"
onClick={() => {
contextMenuAction(LayerActionID.Delete);
closeContextMenu();
}}
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}
/>
{!scene.isPanelEditing && (
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
label={inlineEditorOpen ? 'Close Editor' : 'Open Editor'}
label="Delete"
onClick={() => {
if (scene.inlineEditingCallback) {
if (inlineEditorOpen) {
activePanel.panel.inlineEditButtonClose();
} else {
scene.inlineEditingCallback();
}
}
contextMenuAction(LayerActionID.Delete);
closeContextMenu();
}}
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) => {