feat: add auto-scroll to canvas elements when selected from panel

packages/toolpad-studio/src/canvas/ToolpadBridge.tsx

@@ -53,6 +53,7 @@ export interface ToolpadBridge {
   canvasCommands: Commands<{
     getViewCoordinates(clientX: number, clientY: number): { x: number; y: number } | null;
     getPageViewState(): PageViewState;
+    scrollComponent(nodeId: string): void;
     isReady(): boolean;
     invalidateQueries(): void;
   }>;
@@ -73,6 +74,9 @@ const bridge: ToolpadBridge | null = isRenderedInCanvas
         getPageViewState: () => {
           throw new Error('Not implemented');
         },
+        scrollComponent: () => {
+          throw new Error('Not Implemented');
+        },
         getViewCoordinates: () => {
           throw new Error('Not implemented');
         },

packages/toolpad-studio/src/canvas/index.tsx

@@ -142,7 +142,6 @@ export default function AppCanvas({ basename, state }: AppCanvasProps) {
 
     setCommandHandler(bridge.canvasCommands, 'getPageViewState', () => {
       invariant(appRootRef.current, 'App root not found');
-
       let nodes = viewState.current.nodes;
 
       for (const [nodeId, nodeInfo] of Object.entries(nodes)) {
@@ -154,6 +153,15 @@ export default function AppCanvas({ basename, state }: AppCanvasProps) {
       return { nodes };
     });
 
+    setCommandHandler(bridge.canvasCommands, 'scrollComponent', (nodeId) => {
+      if (!nodeId) {
+        return;
+      }
+      invariant(appRootRef.current, 'App root not found');
+      const canvasNode = appRootRef.current.querySelector(`[data-node-id='${nodeId}']`);
+      canvasNode?.scrollIntoView({ behavior: 'instant', block: 'end', inline: 'end' });
+    });
+
     setCommandHandler(bridge.canvasCommands, 'getViewCoordinates', (clientX, clientY) => {
       if (!appRootRef.current) {
         return null;

packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/EditorCanvasHost.tsx

@@ -7,6 +7,7 @@ import {
   AppHostProvider,
   useAppHost,
   queryClient,
+  NodeId,
 } from '@toolpad/studio-runtime';
 import createCache from '@emotion/cache';
 import { CacheProvider } from '@emotion/react';
@@ -182,6 +183,13 @@ export default function EditorCanvasHost({
             queryClient.invalidateQueries();
           },
           update: () => {},
+          scrollComponent: (nodeId: NodeId) => {
+            if (!appRoot) {
+              return;
+            }
+            const node = appRoot.querySelector(`[data-node-id='${nodeId}']`);
+            node?.scrollIntoView({ behavior: 'instant', block: 'end', inline: 'end' });
+          },
         }),
       } satisfies ToolpadBridge;
 

packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/RenderPanel/RenderOverlay.tsx

@@ -1160,6 +1160,17 @@ export default function RenderOverlay({ bridge }: RenderOverlayProps) {
     };
   }, [handleNodeDragEnd]);
 
+  const scrollSelectedNode = React.useCallback(() => {
+    if (!selectedNode) {
+      return;
+    }
+    bridge?.canvasCommands.scrollComponent(selectedNode.id as string);
+  }, [bridge?.canvasCommands, selectedNode]);
+
+  React.useEffect(() => {
+    scrollSelectedNode();
+  }, [scrollSelectedNode]);
+
   const resizePreviewElementRef = React.useRef<HTMLDivElement | null>(null);
 
   const overlayGridRef = React.useRef<OverlayGridHandle>({

test/integration/backend-basic/fixture/toolpad/application.yml

@@ -1,3 +1,3 @@
 apiVersion: v1
 kind: application
-spec: {}
+spec: { authentication: {}, authorization: {} }

test/integration/backend-basic/fixture/toolpad/pages/basic/page.yml

@@ -1,4 +1,4 @@
-# yaml-language-server: $schema=https://raw.githubusercontent.com/mui/mui-toolpad/v0.1.44/docs/schemas/v1/definitions.json#properties/Page
+# yaml-language-server: $schema=https://raw.githubusercontent.com/mui/mui-toolpad/v0.1.54/docs/schemas/v1/definitions.json#properties/Page
 
 apiVersion: v1
 kind: page
@@ -45,6 +45,10 @@ spec:
         rows:
           $$jsExpression: |
             throws.data
+    - component: Container
+      name: container
+    - component: Chart
+      name: chart
     - component: Text
       name: typography3
       layout:
@@ -70,22 +74,29 @@ spec:
                 `echo, secret not in .env: ${echo.data.secrets.baz}`
     - component: Text
       name: text5
-      layout:
-        columnSize: 1
       props:
         value:
           $$jsExpression: |
             edited.data
-    - component: Button
-      name: button
       layout:
         columnSize: 1
+    - component: PageRow
+      name: pageRow
       props:
-        variant: outlined
-        size: medium
-        content: Run Manual Query
-        onClick:
-          $$jsExpressionAction: manualQuery.call()
+        justifyContent: start
+      children:
+        - component: Button
+          name: button
+          layout:
+            columnSize: 1
+          props:
+            variant: outlined
+            size: medium
+            content: Run Manual Query
+            onClick:
+              $$jsExpressionAction: manualQuery.call()
+        - component: DataGrid
+          name: dataGrid1
     - component: Text
       name: text1
       layout:
@@ -130,20 +141,20 @@ spec:
             ${propagatedLoading.isLoading}`
     - component: Text
       name: text6
-      layout:
-        columnSize: 1
       props:
         value:
           $$jsExpression: |
             `Raw text: ${getRawText.data}`
-    - component: Text
-      name: text7
       layout:
         columnSize: 1
+    - component: Text
+      name: text7
       props:
         value:
           $$jsExpression: |
             `my custom cookie: ${context.data.cookies.MY_TOOLPAD_COOKIE}`
+      layout:
+        columnSize: 1
     - component: Button
       name: button2
       props:
@@ -247,3 +258,4 @@ spec:
         kind: rest
         headers: []
         method: GET
+        searchParams: []

test/integration/backend-basic/fixture/toolpad/pages/crud/page.yml

@@ -1,4 +1,4 @@
-# yaml-language-server: $schema=https://raw.githubusercontent.com/mui/mui-toolpad/v0.1.44/docs/schemas/v1/definitions.json#properties/Page
+# yaml-language-server: $schema=https://raw.githubusercontent.com/mui/mui-toolpad/v0.1.54/docs/schemas/v1/definitions.json#properties/Page
 
 apiVersion: v1
 kind: page

test/integration/backend-basic/fixture/toolpad/pages/dataProviders/page.yml

@@ -1,4 +1,4 @@
-# yaml-language-server: $schema=https://raw.githubusercontent.com/mui/mui-toolpad/v0.1.44/docs/schemas/v1/definitions.json#properties/Page
+# yaml-language-server: $schema=https://raw.githubusercontent.com/mui/mui-toolpad/v0.1.54/docs/schemas/v1/definitions.json#properties/Page
 
 apiVersion: v1
 kind: page

test/integration/backend-basic/fixture/toolpad/pages/extractedTypes/page.yml

@@ -1,4 +1,4 @@
-# yaml-language-server: $schema=https://raw.githubusercontent.com/mui/mui-toolpad/v0.1.44/docs/schemas/v1/definitions.json#properties/Page
+# yaml-language-server: $schema=https://raw.githubusercontent.com/mui/mui-toolpad/v0.1.54/docs/schemas/v1/definitions.json#properties/Page
 
 apiVersion: v1
 kind: page

test/integration/backend-basic/fixture/toolpad/pages/serialization/page.yml

@@ -1,4 +1,4 @@
-# yaml-language-server: $schema=https://raw.githubusercontent.com/mui/mui-toolpad/v0.1.44/docs/schemas/v1/definitions.json#properties/Page
+# yaml-language-server: $schema=https://raw.githubusercontent.com/mui/mui-toolpad/v0.1.54/docs/schemas/v1/definitions.json#properties/Page
 
 apiVersion: v1
 kind: page

test/visual/components/index.spec.ts

@@ -40,6 +40,9 @@ test('rendering components in the app editor', async ({ page, argosScreenshot })
 
   await clickCenter(page, image);
   await argosScreenshot('with-selection');
+
+  await page.getByRole('treeitem', { name: 'typography1' }).click();
+  await argosScreenshot('with-selection-scroll');
 });
 
 test('building layouts', async ({ page, argosScreenshot }) => {