More bug fixes

mui · Jun 8, 2022 · 61d1855 · 61d1855
1 parent 231326d
commit 61d1855
Showing 1 changed file with 50 additions and 27 deletions.
diff --git a/packages/toolpad-app/src/components/AppEditor/PageEditor/RenderPanel.tsx b/packages/toolpad-app/src/components/AppEditor/PageEditor/RenderPanel.tsx
@@ -346,7 +346,7 @@ export default function RenderPanel({ className }: RenderPanelProps) {
 
  // If dragging row, can place only inside page
  if (isPageRow(draggedNode)) {
- return [pageNode];
+ return [pageNode, ...pageNodes.filter((node) => appDom.isElement(node) && isPageRow(node))];
  }
 
  /**
@@ -367,11 +367,25 @@ export default function RenderPanel({ className }: RenderPanelProps) {
  );
 
  const availableDropZones = React.useMemo((): RectZone[] => {
+ const draggedNode = getCurrentlyDraggedNode();
  const dragOverNode = dragOverNodeId && appDom.getNode(dom, dragOverNodeId);
 
  const dragOverNodeParent = dragOverNode && appDom.getParent(dom, dragOverNode);
  const dragOverNodeParentInfo = dragOverNodeParent && nodesInfo[dragOverNodeParent.id];
 
+ if (draggedNode && dragOverNode && appDom.isElement(dragOverNode)) {
+ if (isPageRow(dragOverNode)) {
+ return [
+ RectZone.TOP,
+ RectZone.BOTTOM,
+ ...(isPageRow(draggedNode) ? [] : [RectZone.CENTER]),
+ ];
+ }
+ if (isPageColumn(dragOverNode)) {
+ return [RectZone.RIGHT, RectZone.LEFT, RectZone.CENTER];
+ }
+ }
+
  // For non-page layout containers, only highlight in the container direction
  if (
  dragOverNodeParentInfo &&
@@ -380,15 +394,15 @@ export default function RenderPanel({ className }: RenderPanelProps) {
  !isPageColumn(dragOverNodeParent)
  ) {
  if (hasHorizontalContainer(dragOverNodeParentInfo)) {
- return [RectZone.RIGHT, RectZone.LEFT];
+ return [RectZone.RIGHT, RectZone.LEFT, RectZone.CENTER];
  }
  if (hasVerticalContainer(dragOverNodeParentInfo)) {
- return [RectZone.TOP, RectZone.BOTTOM];
+ return [RectZone.TOP, RectZone.BOTTOM, RectZone.CENTER];
  }
  }
 
  return [RectZone.TOP, RectZone.RIGHT, RectZone.BOTTOM, RectZone.LEFT, RectZone.CENTER];
- }, [dom, dragOverNodeId, nodesInfo]);
+ }, [dom, dragOverNodeId, getCurrentlyDraggedNode, nodesInfo]);
 
  const handleDragOver = React.useCallback(
  (event: React.DragEvent<Element>) => {
@@ -472,6 +486,10 @@ export default function RenderPanel({ className }: RenderPanelProps) {
  const parent = appDom.getParent(dom, node);
  const parentNodeInfo = parent && nodesInfo[parent.id];
 
+ if (dragOverNodeZone && !availableDropZones.includes(dragOverNodeZone)) {
+ return null;
+ }
+
  if (dragOverNodeZone === RectZone.CENTER) {
  if (node.id !== dragOverNodeId) {
  // Is dragging over parent element center
@@ -494,11 +512,6 @@ export default function RenderPanel({ className }: RenderPanelProps) {
  return nodeChildren && nodeChildren.length === 0 ? RectZone.CENTER : null;
  }
 
- // For non-page layout containers, only highlight in the container direction
- if (dragOverNodeZone && !availableDropZones.includes(dragOverNodeZone)) {
- return null;
- }
-
  return node.id === dragOverNodeId ? dragOverNodeZone : null;
  },
  [availableDropZones, dom, dragOverNodeId, dragOverNodeZone, getNodeLastChild, nodesInfo],
@@ -573,22 +586,24 @@ export default function RenderPanel({ className }: RenderPanelProps) {
 
  const isDraggingOverPage = (dragOverNode && appDom.isPage(dragOverNode)) || false;
 
+ let addOrMoveNode = domApi.addNode;
+ if (selection) {
+ addOrMoveNode = domApi.moveNode;
+ }
+
  // Drop on page
  if (isDraggingOverPage) {
- if (!selection) {
+ if (!selection || !isPageRow(draggedNode)) {
  const container = appDom.createElement(dom, PAGE_ROW_COMPONENT_ID, {});
  domApi.addNode(container, dragOverNode, 'children');
- domApi.addNode(draggedNode, container, 'children');
+ parent = container;
+
+ addOrMoveNode(draggedNode, container, 'children');
  } else {
- domApi.moveNode(draggedNode, dragOverNode, 'children');
+ addOrMoveNode(draggedNode, dragOverNode, 'children');
  }
  }
 
- let addOrMoveNode = domApi.addNode;
- if (selection) {
- addOrMoveNode = domApi.moveNode;
- }
-
  if (parent && !appDom.isElement(parent) && !appDom.isPage(parent)) {
  return;
  }
@@ -600,6 +615,24 @@ export default function RenderPanel({ className }: RenderPanelProps) {
  throw new Error(`Invalid drop target "${parent.id}" of type "${parent.type}"`);
  }
 
+ // Ignore invalid drop zones
+ if (!availableDropZones.includes(dragOverNodeZone)) {
+ return;
+ }
+
+ // Drop on page rows (except page row center)
+ if (isOriginalParentPage && dragOverNodeZone && dragOverNodeZone !== RectZone.CENTER) {
+ const rowContainer = appDom.createElement(dom, PAGE_ROW_COMPONENT_ID, {});
+
+ const newParentIndex =
+ dragOverNodeZone === RectZone.TOP
+ ? appDom.getNewParentIndexBeforeNode(dom, dragOverNode, 'children')
+ : appDom.getNewParentIndexAfterNode(dom, dragOverNode, 'children');
+
+ domApi.addNode(rowContainer, parent, 'children', newParentIndex);
+ parent = rowContainer;
+ }
+
  const isDraggingOverColumn = appDom.isElement(dragOverNode) && isPageColumn(dragOverNode);
 
  if (dragOverNodeZone === RectZone.CENTER) {
@@ -614,11 +647,6 @@ export default function RenderPanel({ className }: RenderPanelProps) {
  : false;
 
  if ([RectZone.TOP, RectZone.BOTTOM].includes(dragOverNodeZone)) {
- // Ignore invalid drop zones
- if (!availableDropZones.includes(dragOverNodeZone)) {
- return;
- }
-
  if (isOriginalParentRow && !isDraggingOverColumn) {
  const columnContainer = appDom.createElement(dom, PAGE_COLUMN_COMPONENT_ID, {});
  domApi.addNode(
@@ -654,11 +682,6 @@ export default function RenderPanel({ className }: RenderPanelProps) {
  }
 
  if ([RectZone.RIGHT, RectZone.LEFT].includes(dragOverNodeZone)) {
- // Ignore invalid drop zones
- if (!availableDropZones.includes(dragOverNodeZone)) {
- return;
- }
-
  if (isOriginalParentColumn) {
  const stackContainer = appDom.createElement(dom, STACK_COMPONENT_ID, {});
  domApi.addNode(