Show grid when resizing

app/client/src/editorComponents/DragLayerComponent.tsx

@@ -27,6 +27,7 @@ type DragLayerProps = {
   isOver: boolean;
   parentRows?: number;
   parentCols?: number;
+  isResizing?: boolean;
 };
 
 const DragLayerComponent = (props: DragLayerProps) => {
@@ -55,7 +56,7 @@ const DragLayerComponent = (props: DragLayerProps) => {
       : widget.rightColumn - widget.leftColumn;
     widgetHeight = widget.rows ? widget.rows : widget.bottomRow - widget.topRow;
   }
-  if (!isDragging || !props.visible) {
+  if ((!isDragging || !props.visible) && !props.isResizing) {
     return null;
   }
   return (
@@ -64,7 +65,7 @@ const DragLayerComponent = (props: DragLayerProps) => {
         rowHeight={props.parentRowHeight}
         columnWidth={props.parentColumnWidth}
         setBounds={props.onBoundsUpdate}
-        showGrid={isDragging && props.isOver}
+        showGrid={(isDragging && props.isOver) || props.isResizing}
       />
       <DropZone
         {...props}

app/client/src/editorComponents/DraggableComponent.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, createContext, useState, Context } from "react";
+import React, { useContext, createContext, Context } from "react";
 import styled from "styled-components";
 import { WidgetProps, WidgetOperations } from "../widgets/BaseWidget";
 import { useDrag, DragPreviewImage, DragSourceMonitor } from "react-dnd";
@@ -8,6 +8,7 @@ import { FocusContext } from "../pages/Editor/Canvas";
 import { WidgetFunctionsContext } from "../pages/Editor";
 import { ControlIcons } from "../icons/ControlIcons";
 import { theme } from "../constants/DefaultTheme";
+import { ResizingContext } from "./DropTargetComponent";
 
 // FontSizes array in DefaultTheme.tsx
 // Change this to toggle the size of delete and move handles.
@@ -51,15 +52,15 @@ const deleteControlIcon = ControlIcons.DELETE_CONTROL({
 
 type DraggableComponentProps = WidgetProps & ContainerProps;
 
-export const RnDContext: Context<{
-  setIsResizing?: Function;
+export const DraggingContext: Context<{
   isDragging?: boolean;
 }> = createContext({});
 
 const DraggableComponent = (props: DraggableComponentProps) => {
   const { isFocused, setFocus } = useContext(FocusContext);
   const { updateWidget } = useContext(WidgetFunctionsContext);
-  const [isResizing, setIsResizing] = useState(false);
+  const { isResizing } = useContext(ResizingContext);
+
   const deleteWidget = () => {
     updateWidget &&
       updateWidget(WidgetOperations.DELETE, props.widgetId, {
@@ -77,7 +78,7 @@ const DraggableComponent = (props: DraggableComponentProps) => {
   });
 
   return (
-    <RnDContext.Provider value={{ setIsResizing, isDragging }}>
+    <DraggingContext.Provider value={{ isDragging }}>
       <DragPreviewImage src={blankImage} connect={preview} />
       <DraggableWrapper
         ref={drag}
@@ -112,7 +113,7 @@ const DraggableComponent = (props: DraggableComponentProps) => {
           {deleteControlIcon}
         </DeleteControl>
       </DraggableWrapper>
-    </RnDContext.Provider>
+    </DraggingContext.Provider>
   );
 };
 

app/client/src/editorComponents/DropTargetComponent.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useContext } from "react";
+import React, { useState, useContext, createContext, Context } from "react";
 import { WidgetProps } from "../widgets/BaseWidget";
 import { OccupiedSpaceContext } from "../widgets/ContainerWidget";
 import { WidgetConfigProps } from "../reducers/entityReducers/widgetConfigReducer";
@@ -25,9 +25,15 @@ type DropTargetBounds = {
   height: number;
 };
 
+export const ResizingContext: Context<{
+  isResizing?: boolean;
+  setIsResizing?: Function;
+}> = createContext({});
+
 export const DropTargetComponent = (props: DropTargetComponentProps) => {
   // Hook to keep the offset of the drop target container in state
   const [dropTargetOffset, setDropTargetOffset] = useState({ x: 0, y: 0 });
+  const [isResizing, setIsResizing] = useState(false);
   const { updateWidget } = useContext(WidgetFunctionsContext);
   const occupiedSpaces = useContext(OccupiedSpaceContext);
   const { setFocus } = useContext(FocusContext);
@@ -97,35 +103,38 @@ export const DropTargetComponent = (props: DropTargetComponentProps) => {
   };
 
   return (
-    <div
-      onClick={handleFocus}
-      ref={drop}
-      style={{
-        position: "relative",
-        left: 0,
-        height: props.isRoot
-          ? props.style.componentHeight + (props.style.heightUnit || "px")
-          : "100%",
-        width: props.isRoot
-          ? props.style.componentWidth + (props.style.widthUnit || "px")
-          : "100%",
-        top: 0,
-      }}
-    >
-      {props.children}
-      <DragLayerComponent
-        parentOffset={dropTargetOffset}
-        parentRowHeight={props.snapRowSpace}
-        parentColumnWidth={props.snapColumnSpace}
-        visible={isOver}
-        isOver={isExactlyOver}
-        dropTargetOffset={dropTargetOffset}
-        occupiedSpaces={occupiedSpaces}
-        onBoundsUpdate={handleBoundsUpdate}
-        parentRows={props.snapRows}
-        parentCols={props.snapColumns}
-      />
-    </div>
+    <ResizingContext.Provider value={{ isResizing, setIsResizing }}>
+      <div
+        onClick={handleFocus}
+        ref={drop}
+        style={{
+          position: "relative",
+          left: 0,
+          height: props.isRoot
+            ? props.style.componentHeight + (props.style.heightUnit || "px")
+            : "100%",
+          width: props.isRoot
+            ? props.style.componentWidth + (props.style.widthUnit || "px")
+            : "100%",
+          top: 0,
+        }}
+      >
+        {props.children}
+        <DragLayerComponent
+          parentOffset={dropTargetOffset}
+          parentRowHeight={props.snapRowSpace}
+          parentColumnWidth={props.snapColumnSpace}
+          visible={isOver || isResizing}
+          isOver={isExactlyOver}
+          dropTargetOffset={dropTargetOffset}
+          occupiedSpaces={occupiedSpaces}
+          onBoundsUpdate={handleBoundsUpdate}
+          parentRows={props.snapRows}
+          parentCols={props.snapColumns}
+          isResizing={isResizing}
+        />
+      </div>
+    </ResizingContext.Provider>
   );
 };
 

app/client/src/editorComponents/DropTargetMask.tsx

@@ -5,7 +5,7 @@ type DropTargetMaskProps = {
   rowHeight: number;
   columnWidth: number;
   setBounds?: Function;
-  showGrid: boolean;
+  showGrid?: boolean;
 };
 
 export const DropTargetMaskWrapper = styled.div<DropTargetMaskProps>`

app/client/src/editorComponents/ResizableComponent.tsx

@@ -7,8 +7,9 @@ import { OccupiedSpaceContext } from "../widgets/ContainerWidget";
 import { ContainerProps, ParentBoundsContext } from "./ContainerComponent";
 import { isDropZoneOccupied } from "../utils/WidgetPropsUtils";
 import { FocusContext } from "../pages/Editor/Canvas";
-import { RnDContext } from "./DraggableComponent";
+import { DraggingContext } from "./DraggableComponent";
 import { WidgetFunctionsContext } from "../pages/Editor";
+import { ResizingContext } from "./DropTargetComponent";
 import {
   theme,
   getColorWithOpacity,
@@ -87,11 +88,13 @@ const ResizableContainer = styled(Rnd)`
 `;
 
 export const ResizableComponent = (props: ResizableComponentProps) => {
-  const { setIsResizing, isDragging } = useContext(RnDContext);
+  const { isDragging } = useContext(DraggingContext);
+  const { setIsResizing } = useContext(ResizingContext);
   const { boundingParent } = useContext(ParentBoundsContext);
   const { updateWidget } = useContext(WidgetFunctionsContext);
   const { isFocused, setFocus } = useContext(FocusContext);
   const occupiedSpaces = useContext(OccupiedSpaceContext);
+
   const [isColliding, setIsColliding] = useState(false);
 
   let bounds = "body";
@@ -142,6 +145,7 @@ export const ResizableComponent = (props: ResizableComponentProps) => {
   ) => {
     setIsResizing && setIsResizing(false);
     setFocus && setFocus(props.widgetId);
+
     const leftColumn = props.leftColumn + position.x / props.parentColumnSpace;
     const topRow = props.topRow + position.y / props.parentRowSpace;
 
@@ -161,6 +165,8 @@ export const ResizableComponent = (props: ResizableComponentProps) => {
     }
     setIsColliding(false);
   };
+
+  const canResize = !isDragging && isFocused === props.widgetId;
   return (
     <ResizableContainer
       position={{
@@ -192,16 +198,15 @@ export const ResizableComponent = (props: ResizableComponentProps) => {
       resizeGrid={[props.parentColumnSpace, props.parentRowSpace]}
       bounds={bounds}
       resizeHandleStyles={handleStyles}
-      resizeHandleWrapperClass="top-of-stacking-context"
       enableResizing={{
-        top: true && !isDragging && isFocused === props.widgetId,
-        right: true && !isDragging && isFocused === props.widgetId,
-        bottom: true && !isDragging && isFocused === props.widgetId,
-        left: true && !isDragging && isFocused === props.widgetId,
-        topRight: true && !isDragging && isFocused === props.widgetId,
-        topLeft: true && !isDragging && isFocused === props.widgetId,
-        bottomRight: true && !isDragging && isFocused === props.widgetId,
-        bottomLeft: true && !isDragging && isFocused === props.widgetId,
+        top: canResize,
+        right: canResize,
+        bottom: canResize,
+        left: canResize,
+        topRight: canResize,
+        topLeft: canResize,
+        bottomRight: canResize,
+        bottomLeft: canResize,
       }}
     >
       {props.children}