Fix drag-and-drop when dragging outside components (#3177)

mui · Feb 8, 2024 · 730939f · 730939f
1 parent 033069a
commit 730939f
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 1 deletion.
diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/RenderOverlay.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/RenderOverlay.tsx
@@ -590,7 +590,8 @@ export default function RenderOverlay({ bridge }: RenderOverlayProps) {
             parentAwareBaseRect = {
               x: isPageChild ? 0 : baseRect.x,
               y: hasPositionGap ? baseRect.y : baseRect.y - parentGap,
-              width: isPageChild && parentRect ? parentRect.width : baseRect.width,
+              width:
+                isPageChild && parentRect ? parentRect.x * 2 + parentRect.width : baseRect.width,
               height: baseRect.height + gapCount * parentGap,
             };
           }

diff --git a/test/visual/components/index.spec.ts b/test/visual/components/index.spec.ts
@@ -102,6 +102,8 @@ test('showing drag-and-drop previews', async ({ page, argosScreenshot }) => {
     boundingBox.y + (2 / 3) * boundingBox.height,
   ];
 
+  // Check all direction previews when dragging over component
+
   const inputBoundingBox = await editorModel.appCanvas.locator('input').boundingBox();
 
   await editorModel.dragNewComponentToCanvas(
@@ -126,6 +128,37 @@ test('showing drag-and-drop previews', async ({ page, argosScreenshot }) => {
   });
   await argosScreenshot('drop-preview-bottom', screenshotConfig);
 
+  // Check top, left and right previews when dragging outside component
+
+  await page.mouse.move(
+    inputBoundingBox!.x + inputBoundingBox!.width / 2,
+    inputBoundingBox!.y - 12,
+    {
+      steps: 10,
+    },
+  );
+  await argosScreenshot('drop-preview-outside-top', screenshotConfig);
+
+  await page.mouse.move(
+    inputBoundingBox!.x - 12,
+    inputBoundingBox!.y + inputBoundingBox!.height / 2,
+    {
+      steps: 1,
+    },
+  );
+  await argosScreenshot('drop-preview-outside-left', screenshotConfig);
+
+  await page.mouse.move(
+    inputBoundingBox!.x + inputBoundingBox!.width + 12,
+    inputBoundingBox!.y + inputBoundingBox!.height / 2,
+    {
+      steps: 1,
+    },
+  );
+  await argosScreenshot('drop-preview-outside-right', screenshotConfig);
+
+  // Check preview when dragging inside empty container
+
   const containerDropAreaBoundingBox = await editorModel.appCanvas
     .getByText('Drop component here')
     .boundingBox();
@@ -139,6 +172,8 @@ test('showing drag-and-drop previews', async ({ page, argosScreenshot }) => {
   );
   await argosScreenshot('container-drop-preview-empty', screenshotConfig);
 
+  // Check all direction previews when dragging over component inside container
+
   const containerButtonBoundingBox = await editorModel.appCanvas
     .getByText('contained')
     .boundingBox();