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

Pushes

Browse Source
This commit is contained in:
Bogdan Matei
2025-12-04 15:20:21 +02:00
parent 4ae0ad15e6
commit fd8e344e67
4 changed files with 75 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/grafana-ui/src/components/PanelChrome/PanelChrome.tsx
+1 -1
View File
@@ -391,7 +391,7 @@ export function PanelChrome({
onPointerDown={onPointerDown}
onMouseEnter={isSelectable ? onHeaderEnter : undefined}
onMouseLeave={isSelectable ? onHeaderLeave : undefined}
onPointerUp={onPointerUp}
// onPointerUp={onPointerUp}
onDragStart={(evt) => evt.dataTransfer.setData('text/plain', '')}
>
{statusMessage && (
public/app/features/dashboard-scene/scene/DashboardLayoutOrchestrator.tsx
+12 -8
View File
@@ -29,8 +29,8 @@ export class DashboardLayoutOrchestrator extends SceneObjectBase<DashboardLayout
private _activationHandler() {
return () => {
document.body.removeEventListener('pointermove', this._onPointerMove);
document.body.removeEventListener('pointerup', this._onPointerUp);
window.removeEventListener('pointermove', this._onPointerMove);
window.removeEventListener('pointerup', this._onPointerUp);
document.body.classList.remove('dashboard-draggable-transparent-selection');
};
}
@@ -72,6 +72,8 @@ export class DashboardLayoutOrchestrator extends SceneObjectBase<DashboardLayout
}
public startDragging(evt: ReactPointerEvent, layoutItem: DashboardLayoutItem, layoutGrid: DashboardLayoutGrid) {
console.log('started');
this._pointerDistance.set(evt);
this._isSelectedObject = false;
@@ -79,15 +81,15 @@ export class DashboardLayoutOrchestrator extends SceneObjectBase<DashboardLayout
this._currentGrid = layoutGrid;
this._layoutItem = layoutItem;
window.addEventListener('pointermove', this._onPointerMove);
window.addEventListener('pointerup', this._onPointerUp);
document.body.classList.add('dashboard-draggable-transparent-selection');
this._grids = this._findAllGrids();
this._grids.forEach((grid) =>
grid.onDragStart?.(this._sourceGrid!, this._layoutItem!, evt.nativeEvent)
);
document.body.addEventListener('pointermove', this._onPointerMove);
document.body.addEventListener('pointerup', this._onPointerUp);
document.body.classList.add('dashboard-draggable-transparent-selection');
}
private _onPointerMove(evt: PointerEvent) {
@@ -111,8 +113,10 @@ export class DashboardLayoutOrchestrator extends SceneObjectBase<DashboardLayout
}
private _onPointerUp(evt: PointerEvent) {
document.body.removeEventListener('pointermove', this._onPointerMove);
document.body.removeEventListener('pointerup', this._onPointerUp);
console.error('should stop!');
window.removeEventListener('pointermove', this._onPointerMove);
window.removeEventListener('pointerup', this._onPointerUp);
document.body.classList.remove('dashboard-draggable-transparent-selection');
// Wrapped in setTimeout to ensure that any event handlers are called
public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridLayout.tsx
+49 -29
View File
@@ -61,7 +61,7 @@ export class AutoGridLayout extends SceneObjectBase<AutoGridLayoutState> impleme
public static Component = AutoGridLayoutRenderer;
public containerRef = createRef<HTMLDivElement>();
private _draggedGridItem: AutoGridItem | null = null;
private _draggingGridItem: AutoGridItem | null = null;
private _initialGridItemPosition: {
pageX: number;
pageY: number;
@@ -128,34 +128,16 @@ export class AutoGridLayout extends SceneObjectBase<AutoGridLayoutState> impleme
}
public onDragStart(sourceGrid: DashboardLayoutGrid, layoutItem: DashboardLayoutItem, evt: PointerEvent) {
// if (!this._canDrag(evt)) {
// return;
// }
//
// if (!(layoutItem instanceof AutoGridItem)) {
// throw new Error('Dragging wrong item');
// }
if (sourceGrid === this._getLayoutManager() && layoutItem instanceof AutoGridItem) {
this._draggingGridItem = layoutItem;
if (layoutItem instanceof AutoGridItem) {
this._draggedGridItem = sourceGrid === this._getLayoutManager() ? layoutItem : layoutItem.clone();
} else {
this._draggedGridItem = new AutoGridItem({
body: layoutItem.getElementBody().clone(),
});
}
if (!this.state.children.includes(this._draggedGridItem)) {
this.setState({ children: [...this.state.children, this._draggedGridItem] });
}
setTimeout(() => {
const { top, left, width, height } = this._draggedGridItem!.getBoundingBox();
const { top, left, width, height } = this._draggingGridItem!.getBoundingBox();
this._initialGridItemPosition = { pageX: evt.pageX, pageY: evt.pageY, top, left: left };
this._updatePanelSize(width, height);
this._updatePanelPosition(top, left);
this.setState({ draggingKey: this._draggedGridItem!.state.key });
});
this.setState({ draggingKey: this._draggingGridItem!.state.key });
}
}
public onDrag(
@@ -164,6 +146,44 @@ export class AutoGridLayout extends SceneObjectBase<AutoGridLayoutState> impleme
layoutItem: DashboardLayoutItem,
evt: PointerEvent
) {
const layoutManager = this._getLayoutManager();
if (targetGrid === layoutManager) {
if (this._draggingGridItem) {
return;
}
if (sourceGrid === layoutManager) {
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
this._draggingGridItem = layoutItem as AutoGridItem;
const { top, left, width, height } = this._draggingGridItem!.getBoundingBox();
this._updatePanelSize(width, height);
this._updatePanelPosition(top, left);
if (this.state.draggingKey !== this._draggingGridItem!.state.key) {
this.setState({ draggingKey: this._draggingGridItem!.state.key });
}
} else {
if (layoutItem instanceof AutoGridItem) {
this._draggingGridItem = layoutItem.clone();
this.setState({ children: [...this.state.children, this._draggingGridItem!], draggingKey: this._draggingGridItem!.state.key });
} else {
this._draggingGridItem = new AutoGridItem({ body: layoutItem.getElementBody().clone() });
this.setState({ children: [...this.state.children, this._draggingGridItem!], draggingKey: this._draggingGridItem!.state.key });
}
}
} else {
if (!this._draggingGridItem) {
return;
}
if (sourceGrid !== layoutManager) {
this.setState({ children: this.state.children.filter((child) => child !== this._draggingGridItem!), draggingKey: undefined });
this._draggingGridItem = null;
}
}
this._updatePanelPosition(
this._initialGridItemPosition!.top + (evt.pageY - this._initialGridItemPosition!.pageY),
this._initialGridItemPosition!.left + (evt.pageX - this._initialGridItemPosition!.pageX)
@@ -174,7 +194,7 @@ export class AutoGridLayout extends SceneObjectBase<AutoGridLayoutState> impleme
?.find((element) => {
const key = element.getAttribute('data-auto-grid-item-drop-target');
return !!key && key !== this._draggedGridItem!.state.key;
return !!key && key !== this._draggingGridItem!.state.key;
})
?.getAttribute('data-auto-grid-item-drop-target');
@@ -188,10 +208,10 @@ export class AutoGridLayout extends SceneObjectBase<AutoGridLayoutState> impleme
layoutItem: DashboardLayoutItem,
evt: PointerEvent) {
if (targetGrid !== this._getLayoutManager()) {
this.setState({ children: this.state.children.filter((child) => child !== this._draggedGridItem!) });
this.setState({ children: this.state.children.filter((child) => child !== this._draggingGridItem!) });
}
this._draggedGridItem = null;
this._draggingGridItem = null;
}
// public onDragStop() {
@@ -211,7 +231,7 @@ export class AutoGridLayout extends SceneObjectBase<AutoGridLayoutState> impleme
// Handle dragging an item from the same grid over another item from the same grid
private _onDragOverItem(key: string) {
const children = [...this.state.children];
const draggedIdx = children.findIndex((child) => child === this._draggedGridItem);
const draggedIdx = children.findIndex((child) => child === this._draggingGridItem);
const draggedOverIdx = children.findIndex((child) => child.state.key === key);
if (draggedIdx === -1 || draggedOverIdx === -1) {
@@ -219,7 +239,7 @@ export class AutoGridLayout extends SceneObjectBase<AutoGridLayoutState> impleme
}
children.splice(draggedIdx, 1);
children.splice(draggedOverIdx, 0, this._draggedGridItem!);
children.splice(draggedOverIdx, 0, this._draggingGridItem!);
this.setState({ children });
}
public/app/features/dashboard-scene/scene/layout-default/DefaultGridLayoutManager.tsx
+13 -11
View File
@@ -572,20 +572,22 @@ export class DefaultGridLayoutManager
}
public onDragStart(sourceGrid: DashboardLayoutGrid, layoutItem: DashboardLayoutItem) {
if (layoutItem instanceof DashboardGridItem) {
this._draggingGridItem = sourceGrid === this ? layoutItem : layoutItem.clone();
if (sourceGrid === this) {
this._draggingGridItem = layoutItem;
} else {
const width = layoutItem instanceof DashboardGridItem ? layoutItem.state.width : NEW_PANEL_WIDTH;
const height = layoutItem instanceof DashboardGridItem ? layoutItem.state.height : NEW_PANEL_HEIGHT;
this._draggingGridItem = new DashboardGridItem({
width: width ?? NEW_PANEL_WIDTH,
height: height ?? NEW_PANEL_HEIGHT,
body: layoutItem.getElementBody().clone(),
});
if (layoutItem instanceof DashboardGridItem) {
this._draggingGridItem = layoutItem.clone();
} else if (layoutItem instanceof AutoGridItem) {
this._draggingGridItem = new DashboardGridItem({
width: NEW_PANEL_WIDTH,
height: NEW_PANEL_HEIGHT,
body: layoutItem.state.body.clone(),
variableName: layoutItem.state.variableName,
});
}
}
this.state.grid.setPlaceholder(this._draggingGridItem);
this.state.grid.setPlaceholder(this._draggingGridItem!);
}
public onDragStop(sourceGrid: DashboardLayoutGrid, targetGrid: DashboardLayoutGrid, layoutItem: DashboardLayoutItem) {