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: Pan zoom minor refactor (#80337)

Browse Source 
* enable context menu for canvas while in panel edit mode

* Disable context menu when editing is not enabled in canvas

* follow up minor refactor
This commit is contained in:
Nathan Marrs 2024-01-18 20:05:15 -07:00 committed by GitHub
parent 18b9c8fd5f
commit 8784052ccf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 20 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
public/app/features/canvas/runtime/SceneTransformWrapper.tsx
View File

@ -19,6 +19,20 @@ export const SceneTransformWrapper = ({ scene, children: sceneDiv }: SceneTransf
scene.scale = scale; scene.scale = scale;
}; };
const onSceneContainerMouseDown = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
// If pan and zoom is disabled or context menu is visible, don't pan
if ((!scene.shouldPanZoom || scene.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 (!scene.contextMenuVisible && !scene.isPanelEditing && e.button === 2 && !e.ctrlKey) {
e.preventDefault();
e.stopPropagation();
}
};
return ( return (
<TransformWrapper <TransformWrapper
doubleClick={{ mode: 'reset' }} doubleClick={{ mode: 'reset' }}
@ -31,7 +45,11 @@ export const SceneTransformWrapper = ({ scene, children: sceneDiv }: SceneTransf
disabled={!config.featureToggles.canvasPanelPanZoom || !scene.shouldPanZoom} disabled={!config.featureToggles.canvasPanelPanZoom || !scene.shouldPanZoom}
panning={{ allowLeftClickPan: false }} panning={{ allowLeftClickPan: false }}
> >
<TransformComponent>{sceneDiv}</TransformComponent> <TransformComponent>
{/* 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 onMouseDown={onSceneContainerMouseDown}>{sceneDiv}</div>
</TransformComponent>
</TransformWrapper> </TransformWrapper>
); );
}; };

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

@ -668,30 +668,8 @@ export class Scene {
const isTooltipValid = (this.tooltip?.element?.data?.links?.length ?? 0) > 0; const isTooltipValid = (this.tooltip?.element?.data?.links?.length ?? 0) > 0;
const canShowElementTooltip = !this.isEditingEnabled && isTooltipValid; 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 = ( const sceneDiv = (
// The <div> element has child elements that allow for mouse events, so we need to disable the linter rule <div key={this.revId} className={this.styles.wrap} style={this.style} ref={this.setRef}>
// 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={onSceneContainerMouseDown}
>
{this.connections.render()} {this.connections.render()}
{this.root.render()} {this.root.render()}
{this.isEditingEnabled && ( {this.isEditingEnabled && (