IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-11 08:05:43 -06:00
Code Issues Packages Projects Releases Wiki Activity

Canvas: Support context menu in panel edit mode (#80335)

Browse Source
This commit is contained in:
Nathan Marrs 2024-01-11 10:41:19 -07:00 committed by GitHub
parent eb64209301
commit c40b2f90ba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
public/app/features/canvas/runtime/scene.tsx
View File

@ -665,34 +665,36 @@ export class Scene {
};
render() {
const canShowContextMenu = this.isPanelEditing || (!this.isPanelEditing && this.isEditingEnabled);
const isTooltipValid = (this.tooltip?.element?.data?.links?.length ?? 0) > 0;
const canShowElementTooltip = !this.isEditingEnabled && isTooltipValid;
const onSceneContainerMouseDown = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
// If pan and zoom is disabled or context menu is visible, don't pan
if ((!this.shouldPanZoom || this.contextMenuVisible) && (e.button === 1 || (e.button === 2 && e.ctrlKey))) {
e.preventDefault();
e.stopPropagation();
}
// If context menu is hidden, ignore left mouse or non-ctrl right mouse for pan
if (!this.contextMenuVisible && !this.isPanelEditing && e.button === 2 && !e.ctrlKey) {
e.preventDefault();
e.stopPropagation();
}
};
const sceneDiv = (
// TODO: Address this eslint error
// The <div> element has child elements that allow for mouse events, so we need to disable the linter rule
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
<div
key={this.revId}
className={this.styles.wrap}
style={this.style}
ref={this.setRef}
onMouseDown={(e) => {
// If pan and zoom is disabled and middle mouse or ctrl + right mouse, don't pan
if ((!this.shouldPanZoom || this.contextMenuVisible) && (e.button === 1 || (e.button === 2 && e.ctrlKey))) {
e.preventDefault();
e.stopPropagation();
}
// If context menu is hidden, ignore left mouse or non-ctrl right mouse for pan
if (!this.contextMenuVisible && e.button === 2 && !e.ctrlKey) {
e.preventDefault();
e.stopPropagation();
}
}}
onMouseDown={onSceneContainerMouseDown}
>
{this.connections.render()}
{this.root.render()}
{canShowContextMenu && (
{this.isEditingEnabled && (
<Portal>
<CanvasContextMenu
scene={this}

5
public/app/plugins/panel/canvas/components/CanvasContextMenu.tsx
View File

@ -71,6 +71,7 @@ export const CanvasContextMenu = ({ scene, panel, onVisibilityChange }: Props) =
};
const renderMenuItems = () => {
// This is disabled when panel is in edit mode because opening inline editor over panel editor is not ideal UX
const openCloseEditorMenuItem = !scene.isPanelEditing && (
<MenuItem
label={inlineEditorOpen ? 'Close Editor' : 'Open Editor'}
@ -139,7 +140,7 @@ export const CanvasContextMenu = ({ scene, panel, onVisibilityChange }: Props) =
return submenuItems;
};
const addItemMenuItem = !scene.isPanelEditing && (
const addItemMenuItem = (
<MenuItem
label="Add item"
className={styles.menuItem}
@ -148,7 +149,7 @@ export const CanvasContextMenu = ({ scene, panel, onVisibilityChange }: Props) =
/>
);
const setBackgroundMenuItem = !scene.isPanelEditing && (
const setBackgroundMenuItem = (
<MenuItem
label={'Set background'}
onClick={() => {