Fix and improve resizing in editor (incl. Add Spacer component)

docs/data/toolpad/reference/components/index.md

@@ -20,6 +20,7 @@
 - [PageRow](/toolpad/reference/components/page-row/)
 - [Paper](/toolpad/reference/components/paper/)
 - [Select](/toolpad/reference/components/select/)
+- [Spacer](/toolpad/reference/components/spacer/)
 - [Stack](/toolpad/reference/components/stack/)
 - [Tabs](/toolpad/reference/components/tabs/)
 - [Text](/toolpad/reference/components/text/)

packages/toolpad-app/src/appDom/index.ts

@@ -102,6 +102,7 @@ export interface ElementNode<P = any> extends AppDomNodeBase {
     readonly horizontalAlign?: BoxProps['justifyContent'];
     readonly verticalAlign?: BoxProps['alignItems'];
     readonly columnSize?: number;
+    readonly height?: number;
   };
 }
 
@@ -816,6 +817,21 @@ export function moveNode<Parent extends AppDomNode, Child extends AppDomNode>(
   return setNodeParent(dom, node, parent.id, parentProp, parentIndex);
 }
 
+export function spreadNode<Child extends AppDomNode>(dom: AppDom, node: Child) {
+  const parent = getParent(dom, node);
+  const parentProp = node.parentProp;
+
+  let draft = dom;
+  if (parent && parentProp && isElement(node)) {
+    for (const child of getDescendants(draft, node)) {
+      draft = setNodeParent(draft, child, parent.id, parentProp);
+    }
+    draft = removeNode(draft, node.id);
+  }
+
+  return draft;
+}
+
 export function nodeExists(dom: AppDom, nodeId: NodeId): boolean {
   return !!getMaybeNode(dom, nodeId);
 }
@@ -1035,8 +1051,18 @@ export function duplicateNode(
     throw new Error(`Node "${node.id}" can't be duplicated, it must have a parent`);
   }
 
-  const fragment = cloneFragment(dom, node.id);
-  return addFragment(dom, fragment, parent.id, parentProp);
+  if (isElement(node)) {
+    const fragment = cloneFragment(dom, node.id);
+    return addFragment(
+      dom,
+      fragment,
+      parent.id,
+      parentProp,
+      getNewParentIndexAfterNode(dom, node, parentProp),
+    );
+  }
+
+  return dom;
 }
 
 const RENDERTREE_NODES = ['app', 'page', 'element', 'query', 'mutation', 'theme'] as const;

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

@@ -81,6 +81,15 @@ export default function AppCanvas({
     }
   });
 
+  const handleWindowResize = React.useCallback(() => {
+    handleScreenUpdate();
+  }, []);
+
+  React.useEffect(() => {
+    window.addEventListener('resize', handleWindowResize, false);
+    return () => window.removeEventListener('resize', handleWindowResize, false);
+  }, [handleWindowResize]);
+
   React.useEffect(() => {
     if (!bridge) {
       return;

packages/toolpad-app/src/runtime/ToolpadApp.tsx

@@ -434,10 +434,8 @@ function getQueryConfigBindings({ enabled, refetchInterval }: appDom.QueryNode['
 }
 
 function isBindableProp(componentConfig: ComponentConfig<any>, propName: string) {
-  const isResizableHeightProp = propName === componentConfig.resizableHeightProp;
   const argType = componentConfig.argTypes?.[propName];
   return (
-    !isResizableHeightProp &&
     argType?.control?.bindable !== false &&
     argType?.type !== 'template' &&
     argType?.type !== 'event'
@@ -1173,6 +1171,7 @@ function RenderedNodeContent({ node, childNodeGroups, Component }: RenderedNodeC
             display: 'flex',
             alignItems: boundLayoutProps.verticalAlign,
             justifyContent: boundLayoutProps.horizontalAlign,
+            height: node.layout?.height ?? componentConfig.defaultLayoutHeight,
           }}
         >
           <Component {...wrappedProps} />

packages/toolpad-app/src/runtime/toolpadComponents/index.tsx

@@ -18,6 +18,7 @@ export type InstantiatedComponents = Record<string, InstantiatedComponent | unde
 
 export const PAGE_ROW_COMPONENT_ID = 'PageRow';
 export const PAGE_COLUMN_COMPONENT_ID = 'PageColumn';
+export const SPACER_COMPONENT_ID = 'Spacer';
 export const STACK_COMPONENT_ID = 'Stack';
 export const FORM_COMPONENT_ID = 'Form';
 
@@ -91,6 +92,10 @@ export const INTERNAL_COMPONENTS = new Map<string, ToolpadComponentDefinition>([
   ['Metric', { displayName: 'Metric', builtIn: 'Metric', synonyms: ['value', 'number', 'output'] }],
   ['Checkbox', { displayName: 'Checkbox', builtIn: 'Checkbox', synonyms: ['switch'] }],
   [FORM_COMPONENT_ID, { displayName: 'Form', builtIn: 'Form', synonyms: [] }],
+  [
+    'Spacer',
+    { displayName: 'Spacer', builtIn: 'Spacer', synonyms: ['margin', 'blank', 'empty', 'void'] },
+  ],
   [
     'Password',
     {

packages/toolpad-app/src/server/localMode.ts

@@ -541,6 +541,7 @@ function expandFromDom<N extends appDom.AppDomNode>(
       name: node.name,
       layout: undefinedWhenEmpty({
         columnSize: node.layout?.columnSize,
+        height: node.layout?.height,
         horizontalAlign: stringOnly(node.layout?.horizontalAlign),
         verticalAlign: stringOnly(node.layout?.verticalAlign),
       }),
@@ -732,7 +733,14 @@ function mergePageIntoDom(dom: appDom.AppDom, pageName: string, pageFile: Page):
   return dom;
 }
 
-function optimizePageElement(element: ElementType): ElementType {
+function optimizePageElement(
+  element: ElementType,
+  isPageChild = false,
+): ElementType | ElementType[] {
+  if (isPageChild && element.component === PAGE_COLUMN_COMPONENT_ID) {
+    return (element.children || []).flatMap((child) => optimizePageElement(child, true));
+  }
+
   const isLayoutElement = (possibleLayoutElement: ElementType): boolean =>
     possibleLayoutElement.component === PAGE_ROW_COMPONENT_ID ||
     possibleLayoutElement.component === PAGE_COLUMN_COMPONENT_ID;
@@ -753,7 +761,7 @@ function optimizePageElement(element: ElementType): ElementType {
 
   return {
     ...element,
-    children: element.children && element.children.map(optimizePageElement),
+    children: element.children && element.children.flatMap((child) => optimizePageElement(child)),
   };
 }
 
@@ -762,7 +770,7 @@ function optimizePage(page: Page): Page {
     ...page,
     spec: {
       ...page.spec,
-      content: page.spec.content?.map(optimizePageElement),
+      content: page.spec.content?.flatMap((element) => optimizePageElement(element, true)),
     },
   };
 }

packages/toolpad-app/src/server/schema.ts

@@ -215,6 +215,7 @@ const baseElementSchema = z.object({
         .number()
         .optional()
         .describe('The width this element takes up, expressed in terms of columns on the page.'),
+      height: z.number().optional().describe('The height this element takes up, in pixels.'),
     })
     .optional()
     .describe('Layout properties for this element.'),

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentCatalogItem.tsx

@@ -33,6 +33,7 @@ import TagIcon from '@mui/icons-material/Tag';
 import PasswordIcon from '@mui/icons-material/Password';
 import LinkIcon from '@mui/icons-material/Link';
 import TextFormatIcon from '@mui/icons-material/TextFormat';
+import SpaceBarIcon from '@mui/icons-material/SpaceBar';
 
 const iconMap = new Map<string, React.ComponentType<SvgIconProps>>([
   ['Password', PasswordIcon],
@@ -68,6 +69,7 @@ const iconMap = new Map<string, React.ComponentType<SvgIconProps>>([
   ['PageRow', TableRowsIcon],
   ['PageColumn', ViewColumnIcon],
   ['Metric', TagIcon],
+  ['Spacer', SpaceBarIcon],
 ]);
 
 type ComponentItemKind = 'future' | 'builtIn' | 'create' | 'custom';

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentEditor.tsx

@@ -45,7 +45,6 @@ function shouldRenderControl<P extends object>(
   propTypeDef: ArgTypeDefinition<P>,
   propName: keyof P,
   props: P,
-  componentConfig: ComponentConfig<P>,
 ) {
   if (propTypeDef.type === 'element' || propTypeDef.type === 'template') {
     return (
@@ -63,10 +62,6 @@ function shouldRenderControl<P extends object>(
     return propTypeDef.visible(props);
   }
 
-  if (componentConfig.resizableHeightProp && propName === componentConfig.resizableHeightProp) {
-    return false;
-  }
-
   return true;
 }
 
@@ -144,7 +139,7 @@ function ComponentPropsEditor<P extends object>({
             {category}:
           </Typography>
           {argTypeEntries.map(([propName, propTypeDef]) =>
-            propTypeDef && shouldRenderControl(propTypeDef, propName, props, componentConfig) ? (
+            propTypeDef && shouldRenderControl(propTypeDef, propName, props) ? (
               <div key={propName} className={classes.control}>
                 <NodeAttributeEditor
                   node={node}

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/NodeHud.tsx

@@ -11,14 +11,20 @@ import {
   RECTANGLE_EDGE_BOTTOM,
   RECTANGLE_EDGE_LEFT,
   RECTANGLE_EDGE_RIGHT,
+  RECTANGLE_EDGE_TOP,
 } from '../../../../utils/geometry';
+import { usePageEditorState } from '../PageEditorProvider';
 
 const HINT_POSITION_TOP = 'top';
 const HINT_POSITION_BOTTOM = 'bottom';
+const HINT_POSITION_BOTTOM_INNER = 'bottomInner';
 
 const HUD_HEIGHT = 30; // px
 
-type HintPosition = typeof HINT_POSITION_TOP | typeof HINT_POSITION_BOTTOM;
+type HintPosition =
+  | typeof HINT_POSITION_TOP
+  | typeof HINT_POSITION_BOTTOM
+  | typeof HINT_POSITION_BOTTOM_INNER;
 
 function stopPropagationHandler(event: React.SyntheticEvent) {
   event.stopPropagation();
@@ -84,7 +90,11 @@ const SelectionHintWrapper = styled('div', {
     zIndex: 1000,
     ...(hintPosition === HINT_POSITION_TOP
       ? { top: 0, transform: 'translate(0, -100%)' }
-      : { bottom: 0, transform: 'translate(0, 100%)' }),
+      : {
+          bottom: 0,
+          transform:
+            hintPosition === HINT_POSITION_BOTTOM_INNER ? 'translate(0, 0)' : 'translate(0, 100%)',
+        }),
   },
 }));
 
@@ -127,6 +137,15 @@ const DraggableEdge = styled('div', {
       width: '100%',
     };
   }
+  if (edge === RECTANGLE_EDGE_TOP) {
+    dynamicStyles = {
+      cursor: 'ns-resize',
+      top: -10,
+      height: 22,
+      left: 0,
+      width: '100%',
+    };
+  }
 
   return {
     ...dynamicStyles,
@@ -177,7 +196,18 @@ export default function NodeHud({
   isHoverable = true,
   isHovered = false,
 }: NodeHudProps) {
-  const hintPosition = rect.y > HUD_HEIGHT ? HINT_POSITION_TOP : HINT_POSITION_BOTTOM;
+  const { nodeId: pageNodeId, viewState } = usePageEditorState();
+
+  const { nodes: nodesInfo } = viewState;
+
+  const pageNodeRect = nodesInfo[pageNodeId]?.rect;
+
+  let hintPosition: HintPosition = HINT_POSITION_BOTTOM;
+  if (rect.y > HUD_HEIGHT) {
+    hintPosition = HINT_POSITION_TOP;
+  } else if (pageNodeRect && rect.y + rect.height + HUD_HEIGHT > pageNodeRect.height) {
+    hintPosition = HINT_POSITION_BOTTOM_INNER;
+  }
 
   const interactiveNodeClipPath = React.useMemo(
     () =>