public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dashboards: Fix autogrid selection / drag and drop (#114964)

Browse Source
This commit is contained in:
Bogdan Matei
2025-12-08 16:52:00 +00:00
committed by GitHub
parent ab9b070eb0
commit 15c93100ab
2 changed files with 13 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridItemRenderer.tsx
+6
View File
@@ -130,6 +130,12 @@ const getStyles = (theme: GrafanaTheme2) => ({
width: `var(${DRAGGED_ITEM_WIDTH})`,
height: `var(${DRAGGED_ITEM_HEIGHT})`,
opacity: 0.8,
// Unfortunately, we need to re-enforce the absolute position here. Otherwise, the position will be overwritten with
// a relative position by .dashboard-visible-hidden-element
'&.dashboard-visible-hidden-element': {
position: 'absolute',
},
}),
draggedRepeatWrapper: css({
visibility: 'hidden',
public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridLayout.tsx
+7 -2
View File
@@ -65,6 +65,7 @@ export class AutoGridLayout extends SceneObjectBase<AutoGridLayoutState> impleme
top: number;
left: number;
} | null = null;
private _lastDropTargetGridItemKey: string | null = null;
public constructor(state: Partial<AutoGridLayoutState>) {
super({
@@ -145,6 +146,7 @@ export class AutoGridLayout extends SceneObjectBase<AutoGridLayoutState> impleme
}
this._draggedGridItem = gridItem;
this._lastDropTargetGridItemKey = gridItem.state.key!;
const { top, left, width, height } = this._draggedGridItem.getBoundingBox();
this._initialGridItemPosition = { pageX: evt.pageX, pageY: evt.pageY, top, left: left };
@@ -166,6 +168,7 @@ export class AutoGridLayout extends SceneObjectBase<AutoGridLayoutState> impleme
this._draggedGridItem = null;
this._initialGridItemPosition = null;
this._lastDropTargetGridItemKey = null;
this._resetPanelPositionAndSize();
this.setState({ draggingKey: undefined });
@@ -196,7 +199,7 @@ export class AutoGridLayout extends SceneObjectBase<AutoGridLayoutState> impleme
})
?.getAttribute('data-auto-grid-item-drop-target');
if (dropTargetGridItemKey) {
if (dropTargetGridItemKey && dropTargetGridItemKey !== this._lastDropTargetGridItemKey) {
this._onDragOverItem(dropTargetGridItemKey);
}
}
@@ -207,12 +210,14 @@ export class AutoGridLayout extends SceneObjectBase<AutoGridLayoutState> impleme
const draggedIdx = children.findIndex((child) => child === this._draggedGridItem);
const draggedOverIdx = children.findIndex((child) => child.state.key === key);
if (draggedIdx === -1 || draggedOverIdx === -1) {
if (draggedIdx === -1 || draggedOverIdx === -1 || draggedIdx === draggedOverIdx) {
this._lastDropTargetGridItemKey = key;
return;
}
children.splice(draggedIdx, 1);
children.splice(draggedOverIdx, 0, this._draggedGridItem!);
this._lastDropTargetGridItemKey = this._draggedGridItem!.state.key!;
this.setState({ children });
}