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

Dynamic Dashboard: Bring back missing ref (#103084)

Browse Source
This commit is contained in:
Bogdan Matei
2025-03-31 13:07:59 +03:00
committed by GitHub
parent dd628903f4
commit ba16a9cc89
4 changed files with 25 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/features/dashboard-scene/scene/layout-responsive-grid/ResponsiveGridItemRenderer.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ import { useStyles2 } from '@grafana/ui';
import { useDashboardState, useIsConditionallyHidden } from '../../utils/utils';
import { AutoGridItem } from './ResponsiveGridItem';
import { DRAGGED_ITEM_HEIGHT, DRAGGED_ITEM_LEFT, DRAGGED_ITEM_TOP, DRAGGED_ITEM_WIDTH } from './ResponsiveGridLayout';
import { DRAGGED_ITEM_HEIGHT, DRAGGED_ITEM_LEFT, DRAGGED_ITEM_TOP, DRAGGED_ITEM_WIDTH } from './const';
export function AutoGridItemRenderer({ model }: SceneComponentProps<AutoGridItem>) {
const { body, repeatedPanels, key } = model.useState();
public/app/features/dashboard-scene/scene/layout-responsive-grid/ResponsiveGridLayout.tsx
+19 -19
View File
@@ -1,4 +1,4 @@
import { CSSProperties, PointerEvent as ReactPointerEvent } from 'react';
import { createRef, CSSProperties, PointerEvent as ReactPointerEvent } from 'react';
import { SceneLayout, SceneObjectBase, SceneObjectState, VizPanel } from '@grafana/scenes';
@@ -6,6 +6,7 @@ import { getLayoutOrchestratorFor } from '../../utils/utils';
import { AutoGridItem } from './ResponsiveGridItem';
import { AutoGridLayoutRenderer } from './ResponsiveGridLayoutRenderer';
import { DRAGGED_ITEM_HEIGHT, DRAGGED_ITEM_LEFT, DRAGGED_ITEM_TOP, DRAGGED_ITEM_WIDTH } from './const';
export interface AutoGridLayoutState extends SceneObjectState, AutoGridLayoutOptions {
children: AutoGridItem[];
@@ -58,7 +59,7 @@ export interface AutoGridLayoutOptions {
export class AutoGridLayout extends SceneObjectBase<AutoGridLayoutState> implements SceneLayout {
public static Component = AutoGridLayoutRenderer;
private _containerRef: HTMLDivElement | null = null;
public containerRef = createRef<HTMLDivElement>();
private _draggedGridItem: AutoGridItem | null = null;
private _initialGridItemPosition: {
pageX: number;
@@ -111,10 +112,6 @@ export class AutoGridLayout extends SceneObjectBase<AutoGridLayoutState> impleme
};
}
public setRef(ref: HTMLDivElement | null) {
this._containerRef = ref;
}
private _canDrag(evt: ReactPointerEvent): boolean {
if (!this.isDraggable()) {
return false;
@@ -214,24 +211,27 @@ export class AutoGridLayout extends SceneObjectBase<AutoGridLayoutState> impleme
}
private _updatePanelPosition(top: number, left: number) {
this._containerRef?.style.setProperty(DRAGGED_ITEM_TOP, `${top}px`);
this._containerRef?.style.setProperty(DRAGGED_ITEM_LEFT, `${left}px`);
this._setContainerStyle(DRAGGED_ITEM_TOP, `${top}px`);
this._setContainerStyle(DRAGGED_ITEM_LEFT, `${left}px`);
}
private _updatePanelSize(width: number, height: number) {
this._containerRef?.style.setProperty(DRAGGED_ITEM_WIDTH, `${Math.floor(width)}px`);
this._containerRef?.style.setProperty(DRAGGED_ITEM_HEIGHT, `${Math.floor(height)}px`);
this._setContainerStyle(DRAGGED_ITEM_WIDTH, `${Math.floor(width)}px`);
this._setContainerStyle(DRAGGED_ITEM_HEIGHT, `${Math.floor(height)}px`);
}
private _resetPanelPositionAndSize() {
this._containerRef?.style.removeProperty(DRAGGED_ITEM_TOP);
this._containerRef?.style.removeProperty(DRAGGED_ITEM_LEFT);
this._containerRef?.style.removeProperty(DRAGGED_ITEM_WIDTH);
this._containerRef?.style.removeProperty(DRAGGED_ITEM_HEIGHT);
this._removeContainerStyle(DRAGGED_ITEM_TOP);
this._removeContainerStyle(DRAGGED_ITEM_LEFT);
this._removeContainerStyle(DRAGGED_ITEM_WIDTH);
this._removeContainerStyle(DRAGGED_ITEM_HEIGHT);
}
private _setContainerStyle(name: string, value: string) {
this.containerRef.current?.style.setProperty(name, value);
}
private _removeContainerStyle(name: string) {
this.containerRef.current?.style.removeProperty(name);
}
}
export const DRAGGED_ITEM_TOP = '--responsive-grid-dragged-item-top';
export const DRAGGED_ITEM_LEFT = '--responsive-grid-dragged-item-left';
export const DRAGGED_ITEM_WIDTH = '--responsive-grid-dragged-item-width';
export const DRAGGED_ITEM_HEIGHT = '--responsive-grid-dragged-item-height';
public/app/features/dashboard-scene/scene/layout-responsive-grid/ResponsiveGridLayoutRenderer.tsx
+1
View File
@@ -25,6 +25,7 @@ export function AutoGridLayoutRenderer({ model }: SceneComponentProps<AutoGridLa
return (
<div
className={cx(styles.container, fillScreen && styles.containerFillScreen, isEditing && styles.containerEditing)}
ref={model.containerRef}
>
{children.map((item) =>
isLazy ? (
public/app/features/dashboard-scene/scene/layout-responsive-grid/const.ts
+4
View File
@@ -0,0 +1,4 @@
export const DRAGGED_ITEM_TOP = '--responsive-grid-dragged-item-top';
export const DRAGGED_ITEM_LEFT = '--responsive-grid-dragged-item-left';
export const DRAGGED_ITEM_WIDTH = '--responsive-grid-dragged-item-width';
export const DRAGGED_ITEM_HEIGHT = '--responsive-grid-dragged-item-height';