Use page editor context

mui · May 26, 2022 · 63ee6e9 · 63ee6e9
1 parent 39a7471
commit 63ee6e9
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 20 deletions.
diff --git a/packages/toolpad-app/src/components/AppEditor/PageEditor/PageEditorProvider.tsx b/packages/toolpad-app/src/components/AppEditor/PageEditor/PageEditorProvider.tsx
@@ -14,6 +14,7 @@ export interface PageEditorState {
  readonly componentPanelTab: ComponentPanelTab;
  readonly newNode: appDom.ElementNode | null;
  readonly highlightLayout: boolean;
+ readonly highlightedNodeId: NodeId | null;
  readonly viewState: PageViewState;
  readonly pageState: Record<string, unknown>;
  readonly bindings: LiveBindings;
@@ -68,6 +69,7 @@ export function createPageEditorState(appId: string, nodeId: NodeId): PageEditor
  componentPanelTab: 'component',
  newNode: null,
  highlightLayout: false,
+ highlightedNodeId: null,
  viewState: { nodes: {} },
  pageState: {},
  bindings: {},
@@ -109,10 +111,12 @@ export function pageEditorReducer(
  return update(state, {
  newNode: null,
  highlightLayout: false,
+ highlightedNodeId: null,
  });
  case 'PAGE_NODE_DRAG_OVER': {
  return update(state, {
  highlightLayout: true,
+ highlightedNodeId: action.nodeId,
  });
  }
  case 'PAGE_VIEW_STATE_UPDATE': {

diff --git a/packages/toolpad-app/src/components/AppEditor/PageEditor/RenderPanel.tsx b/packages/toolpad-app/src/components/AppEditor/PageEditor/RenderPanel.tsx
@@ -40,7 +40,7 @@ const RenderPanelRoot = styled('div')({
 const overlayClasses = {
  hud: 'Toolpad_Hud',
  nodeHud: 'Toolpad_NodeHud',
- dropPreview: 'Toolpad_DropPreview',
+ highlighted: 'Toolpad_Highlighted',
  selected: 'Toolpad_Selected',
  allowNodeInteraction: 'Toolpad_AllowNodeInteraction',
  layout: 'Toolpad_Layout',
@@ -87,7 +87,7 @@ const OverlayRoot = styled('div')({
  [`&.${overlayClasses.layout}`]: {
  borderColor: 'rgba(255,0,0,.125)',
  },
- [`&.${overlayClasses.dropPreview}`]: {
+ [`&.${overlayClasses.highlighted}`]: {
  border: '2px solid green',
  },
  [`&.${overlayClasses.selected}`]: {
@@ -128,7 +128,7 @@ function findNodeAt(
 interface SelectionHudProps {
  node: appDom.ElementNode;
  rect: Rectangle;
- hasDropPreview?: boolean;
+ isHighlighted?: boolean;
  selected?: boolean;
  allowInteraction?: boolean;
  onDragStart?: React.DragEventHandler<HTMLElement>;
@@ -137,7 +137,7 @@ interface SelectionHudProps {
 
 function NodeHud({
  node,
- hasDropPreview,
+ isHighlighted,
  selected,
  allowInteraction,
  rect,
@@ -160,7 +160,7 @@ function NodeHud({
  style={absolutePositionCss(rect)}
  className={clsx(overlayClasses.nodeHud, {
  [overlayClasses.layout]: isLayoutComponent,
- [overlayClasses.dropPreview]: hasDropPreview,
+ [overlayClasses.highlighted]: isHighlighted,
  [overlayClasses.selected]: selected,
  [overlayClasses.allowNodeInteraction]: allowInteraction,
  })}
@@ -191,6 +191,7 @@ export default function RenderPanel({ className }: RenderPanelProps) {
  viewState,
  nodeId: pageNodeId,
  highlightLayout,
+ highlightedNodeId,
  } = usePageEditorState();
 
  const { nodes: nodesInfo } = viewState;
@@ -259,8 +260,6 @@ export default function RenderPanel({ className }: RenderPanelProps) {
  return pageNodes.filter((n) => !excludedNodes.has(n));
  }, [dom, getCurrentlyDraggedNode, pageNodes, selectedNode]);
 
- const [dropPreviewNodeId, setDropPreviewNodeId] = React.useState<NodeId | null>(null);
-
  const availableDropTargetIds = React.useMemo(
  () => new Set(availableDropTargets.map((n) => n.id)),
  [availableDropTargets],
@@ -281,28 +280,24 @@ export default function RenderPanel({ className }: RenderPanelProps) {
  cursorPos.y,
  );
 
+ event.preventDefault();
+
  if (
  newActiveDropNodeId &&
- newActiveDropNodeId !== dropPreviewNodeId &&
+ newActiveDropNodeId !== highlightedNodeId &&
  availableDropTargetIds.has(newActiveDropNodeId)
  ) {
- setDropPreviewNodeId(newActiveDropNodeId);
- }
-
- event.preventDefault();
-
- if (newActiveDropNodeId) {
  api.nodeDragOver(newActiveDropNodeId);
- } else {
+ } else if (!newActiveDropNodeId && highlightedNodeId) {
  api.nodeDragOver(null);
  }
  },
  [
  api,
  availableDropTargetIds,
  availableDropTargets,
- dropPreviewNodeId,
  getViewCoordinates,
+ highlightedNodeId,
  nodesInfo,
  ],
  );
@@ -524,15 +519,15 @@ export default function RenderPanel({ className }: RenderPanelProps) {
  return null;
  }
 
- const hasDropPreview = node.id === dropPreviewNodeId;
+ const isHighlighted = node.id === highlightedNodeId;
 
  return (
  appDom.isElement(node) && (
  <NodeHud
  key={node.id}
  node={node}
  rect={nodeLayout.rect}
- hasDropPreview={hasDropPreview}
+ isHighlighted={isHighlighted}
  selected={selectedNode?.id === node.id}
  allowInteraction={nodesWithInteraction.has(node.id)}
  onDragStart={handleDragStart}

diff --git a/packages/toolpad-app/src/runtime/ToolpadApp.tsx b/packages/toolpad-app/src/runtime/ToolpadApp.tsx
@@ -15,6 +15,8 @@ import {
  ToolpadComponent,
  createComponent,
  TOOLPAD_COMPONENT,
+ Slots,
+ Placeholder,
  BindableAttrValues,
 } from '@mui/toolpad-core';
 import { QueryClient, QueryClientProvider } from 'react-query';
@@ -33,9 +35,7 @@ import {
  fireEvent,
  JsRuntimeProvider,
  NodeRuntimeWrapper,
- Placeholder,
  ResetNodeErrorsKeyProvider,
- Slots,
 } from '@mui/toolpad-core/runtime';
 import * as builtins from '@mui/toolpad-components';
 import * as appDom from '../appDom';