Prevent resizing row child element completely over adjacent element (#…

…732) Prevent resizing row child element over adjacent element
mui · Aug 4, 2022 · 8fcc7e1 · 8fcc7e1
1 parent ef6ee80
commit 8fcc7e1
Showing 1 changed file with 17 additions and 2 deletions.
diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/RenderOverlay.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/RenderOverlay.tsx
@@ -1137,9 +1137,14 @@ export default function RenderOverlay({ canvasHostRef }: RenderOverlayProps) {
 
           const minGridColumnWidth = overlayGridRef.current.getMinColumnWidth();
 
+          const previousSibling = appDom.getSiblingBeforeNode(dom, draggedNode, 'children');
+          const previousSiblingInfo = previousSibling && nodesInfo[previousSibling.id];
+          const previousSiblingRect = previousSiblingInfo?.rect;
+
           if (
             draggedEdge === RECTANGLE_EDGE_LEFT &&
-            cursorPos.x > parentRect.x + minGridColumnWidth &&
+            cursorPos.x >
+              Math.max(parentRect.x, previousSiblingRect?.x || 0) + minGridColumnWidth &&
             cursorPos.x < draggedNodeRect.x + draggedNodeRect.width - minGridColumnWidth
           ) {
             const updatedTransformScale =
@@ -1148,10 +1153,20 @@ export default function RenderOverlay({ canvasHostRef }: RenderOverlayProps) {
             resizePreviewElement.style.transformOrigin = '100% 50%';
             resizePreviewElement.style.transform = `scaleX(${updatedTransformScale})`;
           }
+
+          const nextSibling = appDom.getSiblingAfterNode(dom, draggedNode, 'children');
+          const nextSiblingInfo = nextSibling && nodesInfo[nextSibling.id];
+          const nextSiblingRect = nextSiblingInfo?.rect;
+
           if (
             draggedEdge === RECTANGLE_EDGE_RIGHT &&
             cursorPos.x > draggedNodeRect.x + minGridColumnWidth &&
-            cursorPos.x < parentRect.x + parentRect.width - minGridColumnWidth
+            cursorPos.x <
+              Math.min(
+                parentRect.x + parentRect.width,
+                nextSiblingRect ? nextSiblingRect?.x + nextSiblingRect?.width : 0,
+              ) -
+                minGridColumnWidth
           ) {
             const updatedTransformScale = snappedToGridCursorRelativePosX / draggedNodeRect.width;