[feat] Add page structure explorer

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

@@ -367,7 +367,6 @@ export function getApp(dom: AppDom): AppNode {
 
 export type NodeChildren<N extends AppDomNode = any> = ChildNodesOf<N>;
 
-// TODO: memoize the result of this function per dom in a WeakMap
 const childrenMemo = new WeakMap<AppDom, Map<NodeId, NodeChildren<any>>>();
 export function getChildNodes<N extends AppDomNode>(dom: AppDom, parent: N): NodeChildren<N> {
  let domChildrenMemo = childrenMemo.get(dom);

packages/toolpad-app/src/components/EditableText.tsx

@@ -18,6 +18,7 @@ interface EditableTextProps {
  onChange?: (newValue: string) => void;
  onSave?: (newValue: string) => void;
  onClose?: () => void;
+ onDoubleClick?: () => void;
  size?: 'small' | 'medium';
  sx?: SxProps;
  value?: string;
@@ -34,6 +35,7 @@ const EditableText = React.forwardRef<HTMLInputElement, EditableTextProps>(
  error,
  onChange,
  onClose,
+ onDoubleClick,
  onSave,
  size,
  sx,
@@ -113,17 +115,19 @@ const EditableText = React.forwardRef<HTMLInputElement, EditableTextProps>(
  error={error}
  helperText={helperText}
  ref={ref}
+ onDoubleClick={onDoubleClick}
  inputRef={appTitleInput}
  inputProps={{
- tabIndex: editable ? 0 : -1,
+ // tabIndex: editable ? 0 : -1,
  'aria-readonly': !editable,
  sx: (theme: Theme) => ({
  // Handle overflow
  textOverflow: 'ellipsis',
  overflow: 'hidden',
  whiteSpace: 'nowrap',
  fontSize: theme.typography[typographyVariant].fontSize,
- height: `1.1em`,
+ height: theme.typography.pxToRem(8),
+ cursor: 'pointer',
  }),
  }}
  onKeyUp={handleInput}

packages/toolpad-app/src/toolpad/AppEditor/HierarchyExplorer/index.tsx

@@ -2,8 +2,8 @@ import { TreeView } from '@mui/lab';
 import { Typography, styled, Box, IconButton } from '@mui/material';
 import * as React from 'react';
 import TreeItem, { treeItemClasses, TreeItemProps } from '@mui/lab/TreeItem';
-import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
-import ArrowRightIcon from '@mui/icons-material/ArrowRight';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import AddIcon from '@mui/icons-material/Add';
 import { NodeId } from '@mui/toolpad-core';
@@ -72,14 +72,14 @@ function HierarchyTreeItem(props: StyledTreeItemProps) {
  return (
  <StyledTreeItem
  label={
- <Box sx={{ display: 'flex', alignItems: 'center', p: 0.5, pr: 0 }}>
+ <Box sx={{ display: 'flex', alignItems: 'center', p: 0.1, pr: 0 }}>
  {labelIcon}
  <Typography variant="body2" sx={{ fontWeight: 'inherit', flexGrow: 1 }} noWrap>
  {labelText}
  </Typography>
  {onCreate ? (
- <IconButton aria-label={createLabelText} onClick={onCreate}>
- <AddIcon />
+ <IconButton aria-label={createLabelText} onClick={onCreate} size="small">
+ <AddIcon fontSize="inherit" />
  </IconButton>
  ) : null}
  {toolpadNodeId ? (
@@ -90,9 +90,10 @@ function HierarchyTreeItem(props: StyledTreeItemProps) {
  [classes.treeItemMenuOpen]: menuProps.open,
  })}
  aria-label="Open hierarchy menu"
+ size="small"
  {...buttonProps}
  >
- <MoreVertIcon />
+ <MoreVertIcon fontSize="inherit" />
  </IconButton>
  )}
  nodeId={toolpadNodeId}
@@ -251,8 +252,8 @@ export default function HierarchyExplorer({ className }: HierarchyExplorerProps)
  expanded={expanded}
  onNodeToggle={handleToggle}
  multiSelect
- defaultCollapseIcon={<ArrowDropDownIcon />}
- defaultExpandIcon={<ArrowRightIcon />}
+ defaultCollapseIcon={<ExpandMoreIcon sx={{ fontSize: '0.9rem', opacity: 0.5 }} />}
+ defaultExpandIcon={<ChevronRightIcon sx={{ fontSize: '0.9rem', opacity: 0.5 }} />}
  >
  <HierarchyTreeItem
  nodeId=":pages"

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

@@ -28,7 +28,9 @@ import PlaceIcon from '@mui/icons-material/Place';
 import ViewSidebarIcon from '@mui/icons-material/ViewSidebar';
 import MoodIcon from '@mui/icons-material/Mood';
 import HtmlIcon from '@mui/icons-material/Html';
-import { ButtonBase } from '@mui/material';
+import TableRowsIcon from '@mui/icons-material/TableRows';
+import ViewColumnIcon from '@mui/icons-material/ViewColumn';
+import { ButtonBase, SxProps } from '@mui/material';
 
 const iconMap = new Map<string, React.ComponentType<SvgIconProps>>([
  ['Autocomplete', ManageSearchIcon],
@@ -58,18 +60,21 @@ const iconMap = new Map<string, React.ComponentType<SvgIconProps>>([
  ['Drawer', ViewSidebarIcon],
  ['Icon', MoodIcon],
  ['Html', HtmlIcon],
+ ['PageRow', TableRowsIcon],
+ ['PageColumn', ViewColumnIcon],
 ]);
 
 type ComponentItemKind = 'future' | 'builtIn' | 'create' | 'custom';
 
 interface ComponentIconProps {
  id: string;
  kind?: ComponentItemKind;
+ sx?: SxProps;
 }
 
-function ComponentIcon({ id: componentId, kind }: ComponentIconProps) {
+export function ComponentIcon({ id: componentId, kind, sx }: ComponentIconProps) {
  const Icon = iconMap.get(kind === 'custom' ? 'CodeComponent' : componentId);
- return Icon ? <Icon fontSize="medium" opacity={kind === 'future' ? 0.75 : 1} /> : null;
+ return Icon ? <Icon sx={{ fontSize: 24, opacity: kind === 'future' ? 0.75 : 1, ...sx }} /> : null;
 }
 
 interface ComponentCatalogItemProps {

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

@@ -26,6 +26,7 @@ function stopPropagationHandler(event: React.SyntheticEvent) {
 
 const nodeHudClasses = {
  selected: 'NodeHud_Selected',
+ hovered: 'NodeHud_Hovered',
  selectionHint: 'NodeHud_SelectionHint',
 };
 
@@ -41,7 +42,7 @@ const NodeHudWrapper = styled('div', {
  userSelect: 'none',
  outline: `1px dotted ${isOutlineVisible ? theme.palette.primary[500] : 'transparent'}`,
  zIndex: 80,
- '&:hover': {
+ [`&:hover, &.${nodeHudClasses.hovered}`]: {
  outline: `2px dashed ${isHoverable ? theme.palette.primary[500] : 'transparent'}`,
  },
  [`.${nodeHudClasses.selected}`]: {
@@ -150,6 +151,7 @@ interface NodeHudProps {
  onDuplicate?: (event: React.MouseEvent) => void;
  isOutlineVisible?: boolean;
  isHoverable?: boolean;
+ isHovered?: boolean;
 }
 
 export default function NodeHud({
@@ -167,6 +169,7 @@ export default function NodeHud({
  onDuplicate,
  isOutlineVisible = false,
  isHoverable = true,
+ isHovered = false,
 }: NodeHudProps) {
  const hintPosition = rect.y > HUD_HEIGHT ? HINT_POSITION_TOP : HINT_POSITION_BOTTOM;
 
@@ -205,6 +208,7 @@ export default function NodeHud({
  }
  : {}),
  }}
+ className={isHovered ? nodeHudClasses.hovered : ''}
  isOutlineVisible={isOutlineVisible}
  isHoverable={isHoverable}
  >

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

@@ -141,7 +141,7 @@ function removeMaybeNode(dom: appDom.AppDom, nodeId: NodeId): appDom.AppDom {
  return dom;
 }
 
-function deleteOrphanedLayoutNodes(
+export function deleteOrphanedLayoutNodes(
  domBeforeChange: appDom.AppDom,
  domAfterChange: appDom.AppDom,
  movedOrDeletedNode: appDom.ElementNode,
@@ -276,6 +276,7 @@ export default function RenderOverlay({ bridge }: RenderOverlayProps) {
  const { dom } = useDom();
  const { currentView } = useAppState();
  const selectedNodeId = currentView.kind === 'page' ? currentView.selectedNodeId : null;
+ const hoveredNodeId = currentView.kind === 'page' ? currentView.hoveredNodeId : null;
 
  const domApi = useDomApi();
  const appStateApi = useAppStateApi();
@@ -1586,6 +1587,7 @@ export default function RenderOverlay({ bridge }: RenderOverlayProps) {
  const isPageColumnChild = parent ? appDom.isElement(parent) && isPageColumn(parent) : false;
 
  const isSelected = selectedNode && !newNode ? selectedNode.id === node.id : false;
+ const isHovered = hoveredNodeId === node.id;
 
  const isHorizontallyResizable = isSelected && (isPageRowChild || isPageColumnChild);
  const isVerticallyResizable =
@@ -1625,6 +1627,7 @@ export default function RenderOverlay({ bridge }: RenderOverlayProps) {
  onDelete={handleNodeDelete(node.id)}
  isResizing={isResizingNode}
  resizePreviewElementRef={resizePreviewElementRef}
+ isHovered={isHovered}
  isHoverable={!isResizing && !isDraggingOver}
  isOutlineVisible={isDraggingOver}
  />

packages/toolpad-app/src/toolpad/AppEditor/PagePanel.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { styled, SxProps, Box, Divider, Typography } from '@mui/material';
-import HierarchyExplorer from './HierarchyExplorer';
+import PagesHierarchyExplorer from './HierarchyExplorer';
+import PageStructureExplorer from './StructureExplorer';
+import SplitPane from '../../components/SplitPane';
 import { useDom } from '../AppState';
 import AppOptions from '../AppOptions';
 import config from '../../config';
@@ -36,7 +38,10 @@ export default function PagePanel({ className, sx }: ComponentPanelProps) {
  <AppOptions dom={dom} />
  </Box>
  <Divider />
- <HierarchyExplorer />
+ <SplitPane sx={{ flex: 1 }} split="horizontal" defaultSize={200} minSize={100} maxSize={400}>
+ <PagesHierarchyExplorer />
+ <PageStructureExplorer />
+ </SplitPane>
  </PagePanelRoot>
  );
 }