From 63ee6e984afd3b69a10ade6ff6dc0128890b4bd0 Mon Sep 17 00:00:00 2001
From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com>
Date: Thu, 26 May 2022 17:39:54 +0100
Subject: [PATCH] Use page editor context

---
 .../PageEditor/PageEditorProvider.tsx         |  4 +++
 .../AppEditor/PageEditor/RenderPanel.tsx      | 31 ++++++++-----------
 .../toolpad-app/src/runtime/ToolpadApp.tsx    |  4 +--
 3 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/packages/toolpad-app/src/components/AppEditor/PageEditor/PageEditorProvider.tsx b/packages/toolpad-app/src/components/AppEditor/PageEditor/PageEditorProvider.tsx
index 30ad1352fc8..b3d4a883549 100644
--- 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
index a8f31653caa..623d9b7bfd7 100644
--- 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,19 +280,15 @@ 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);
       }
     },
@@ -301,8 +296,8 @@ export default function RenderPanel({ className }: RenderPanelProps) {
       api,
       availableDropTargetIds,
       availableDropTargets,
-      dropPreviewNodeId,
       getViewCoordinates,
+      highlightedNodeId,
       nodesInfo,
     ],
   );
@@ -524,7 +519,7 @@ export default function RenderPanel({ className }: RenderPanelProps) {
               return null;
             }
 
-            const hasDropPreview = node.id === dropPreviewNodeId;
+            const isHighlighted = node.id === highlightedNodeId;
 
             return (
               appDom.isElement(node) && (
@@ -532,7 +527,7 @@ export default function RenderPanel({ className }: RenderPanelProps) {
                   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
index 5ef1f4bf8c8..38bda8e6b03 100644
--- 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';