SceneCSSGridLayout: Add support for dragging and dropping panels

packages/scenes/src/components/VizPanel/VizPanelRenderer.tsx

@@ -51,6 +51,7 @@ export function VizPanelRenderer({ model }: SceneComponentProps<VizPanel>) {
   const plugin = model.getPlugin();
 
   const { dragClass, dragClassCancel } = getDragClasses(model);
+  const dragHooks = getDragHooks(model);
   const dataObject = sceneGraph.getData(model);
 
   const rawData = dataObject.useState();
@@ -192,6 +193,7 @@ export function VizPanelRenderer({ model }: SceneComponentProps<VizPanel>) {
             onFocus={setPanelAttention}
             onMouseEnter={setPanelAttention}
             onMouseMove={debouncedMouseMove}
+            onDragStart={dragHooks.onDragStart}
             collapsible={collapsible}
             collapsed={collapsed}
             onToggleCollapse={model.onToggleCollapse}
@@ -257,6 +259,11 @@ function getDragClasses(panel: VizPanel) {
   return { dragClass: parentLayout.getDragClass?.(), dragClassCancel: parentLayout?.getDragClassCancel?.() };
 }
 
+function getDragHooks(panel: VizPanel) {
+  const parentLayout = sceneGraph.getLayout(panel);
+  return { onDragStart: parentLayout?.onPointerDown };
+}
+
 /**
  * Walks up the parent chain until it hits the layout object, trying to find the closest SceneGridItemLike ancestor.
  * It is not always the direct parent, because the VizPanel can be wrapped in other objects.

packages/scenes/src/components/layout/CSSGrid/SceneCSSGridItem.tsx

@@ -0,0 +1,58 @@
+import { css } from '@emotion/css';
+import React, { CSSProperties } from 'react';
+import { SceneObjectBase } from '../../../core/SceneObjectBase';
+import { SceneComponentProps, SceneObject, SceneObjectState } from '../../../core/types';
+import { useStyles2 } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+
+export interface SceneCSSGridItemPlacement {
+  /**
+   * True when the item should rendered but not visible.
+   * Useful for conditional display of layout items
+   */
+  isHidden?: boolean;
+  /**
+   * Useful for making content span across multiple rows or columns
+   */
+  gridColumn?: CSSProperties['gridColumn'];
+  gridRow?: CSSProperties['gridRow'];
+}
+
+export interface SceneCSSGridItemState extends SceneCSSGridItemPlacement, SceneObjectState {
+  body?: SceneObject;
+}
+
+export interface SceneCSSGridItemRenderProps<T> extends SceneComponentProps<T> {
+  parentState?: SceneCSSGridItemPlacement;
+}
+
+export class SceneCSSGridItem extends SceneObjectBase<SceneCSSGridItemState> {
+  public static Component = SceneCSSGridItemRenderer;
+}
+
+function SceneCSSGridItemRenderer({ model, parentState }: SceneCSSGridItemRenderProps<SceneCSSGridItem>) {
+  if (!parentState) {
+    throw new Error('SceneCSSGridItem must be a child of SceneCSSGridLayout');
+  }
+
+  const { body, isHidden } = model.useState();
+  const styles = useStyles2(getStyles, model.state);
+
+  if (!body || isHidden) {
+    return null;
+  }
+
+  return (
+    <div className={styles.wrapper}>
+      <body.Component model={body} />
+    </div>
+  );
+}
+
+const getStyles = (_theme: GrafanaTheme2, state: SceneCSSGridItemState) => ({
+  wrapper: css({
+    gridColumn: state.gridColumn || 'unset',
+    gridRow: state.gridRow || 'unset',
+    position: 'relative', // Needed for VizPanel
+  }),
+});