Merge branch 'fix/widget-boundaries' into 'release'

Widget boundaries

See merge request theappsmith/internal-tools-client!225

app/client/src/components/designSystems/appsmith/WidgetNameComponent.tsx

@@ -1,7 +1,6 @@
 import React, { useContext } from "react";
 import styled from "styled-components";
-import { FocusContext, ResizingContext } from "pages/Editor/CanvasContexts";
-import { DraggableComponentContext } from "components/editorComponents/DraggableComponent";
+import { FocusContext, DragResizeContext } from "pages/Editor/CanvasContexts";
 
 const PositionStyle = styled.div<{ selected?: boolean }>`
   position: absolute;
@@ -30,8 +29,8 @@ type WidgetNameComponentProps = {
 
 export const WidgetNameComponent = (props: WidgetNameComponentProps) => {
   const { focusedWidget, selectedWidget } = useContext(FocusContext);
-  const { isDragging } = useContext(DraggableComponentContext);
-  const { isResizing } = useContext(ResizingContext);
+  const { isResizing, isDragging } = useContext(DragResizeContext);
+
   const showWidgetName =
     (focusedWidget === props.widgetId || selectedWidget === props.widgetId) &&
     !isDragging &&

app/client/src/components/editorComponents/DraggableComponent.tsx

@@ -1,10 +1,10 @@
-import React, { useContext, createContext, Context } from "react";
+import React, { useContext } from "react";
 import styled from "styled-components";
 import { WidgetProps, WidgetOperations } from "widgets/BaseWidget";
 import { ContainerWidgetProps } from "widgets/ContainerWidget";
 import { useDrag, DragPreviewImage, DragSourceMonitor } from "react-dnd";
 import blankImage from "assets/images/blank.png";
-import { FocusContext, ResizingContext } from "pages/Editor/CanvasContexts";
+import { FocusContext, DragResizeContext } from "pages/Editor/CanvasContexts";
 import { EditorContext } from "components/editorComponents/EditorContextProvider";
 import { ControlIcons } from "icons/ControlIcons";
 import { Tooltip } from "@blueprintjs/core";
@@ -12,7 +12,7 @@ import { WIDGET_CLASSNAME_PREFIX } from "constants/WidgetConstants";
 import { useSelector } from "react-redux";
 import { PropertyPaneReduxState } from "reducers/uiReducers/propertyPaneReducer";
 import { AppState } from "reducers";
-import { theme } from "constants/DefaultTheme";
+import { theme, getColorWithOpacity } from "constants/DefaultTheme";
 import { Colors } from "constants/Colors";
 
 // FontSizes array in DefaultTheme.tsx
@@ -30,6 +30,17 @@ const DraggableWrapper = styled.div<{ show: boolean }>`
   cursor: grab;
 `;
 
+const WidgetBoundaries = styled.div`
+  left: 0;
+  right: 0;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  border: 1px dashed
+    ${props => getColorWithOpacity(props.theme.colors.textAnchor, 0.5)};
+  position: absolute;
+`;
+
 const DragHandle = styled.div`
   position: absolute;
   left: 0px;
@@ -69,9 +80,6 @@ const deleteControlIcon = ControlIcons.DELETE_CONTROL({
 
 type DraggableComponentProps = ContainerWidgetProps<WidgetProps>;
 
-export const DraggableComponentContext: Context<{
-  isDragging?: boolean;
-}> = createContext({});
 /* eslint-disable react/display-name */
 
 const DraggableComponent = (props: DraggableComponentProps) => {
@@ -104,7 +112,9 @@ const DraggableComponent = (props: DraggableComponentProps) => {
 
   const { updateWidget } = useContext(EditorContext);
 
-  const { isResizing } = useContext(ResizingContext);
+  const { isResizing, setIsDragging, isDragging } = useContext(
+    DragResizeContext,
+  );
 
   const deleteWidget = () => {
     showPropertyPane && showPropertyPane();
@@ -124,28 +134,34 @@ const DraggableComponent = (props: DraggableComponentProps) => {
     e.stopPropagation();
   };
 
-  const [{ isDragging }, drag, preview] = useDrag({
+  const [{ isCurrentWidgetDragging }, drag, preview] = useDrag({
     item: props as WidgetProps,
     collect: (monitor: DragSourceMonitor) => ({
-      isDragging: monitor.isDragging(),
+      isCurrentWidgetDragging: monitor.isDragging(),
     }),
     begin: () => {
       showPropertyPane && showPropertyPane(undefined, true);
       selectWidget && selectWidget(props.widgetId);
+      setIsDragging && setIsDragging(props.widgetId);
     },
     end: (widget, monitor) => {
       if (monitor.didDrop()) {
         showPropertyPane && showPropertyPane(props.widgetId, true);
       }
+      setIsDragging && setIsDragging(undefined);
     },
     canDrag: () => {
       return !isResizing;
     },
   });
 
+  const isResizingOrDragging =
+    selectedWidget !== props.widgetId && (!!isResizing || !!isDragging);
+
   return (
-    <DraggableComponentContext.Provider value={{ isDragging }}>
+    <React.Fragment>
       <DragPreviewImage connect={preview} src={blankImage} />
+
       <DraggableWrapper
         className={WIDGET_CLASSNAME_PREFIX + props.widgetId}
         ref={drag}
@@ -177,7 +193,7 @@ const DraggableComponent = (props: DraggableComponentProps) => {
           !isResizing
         }
         style={{
-          display: isDragging ? "none" : "flex",
+          display: isCurrentWidgetDragging ? "none" : "flex",
           flexDirection: "column",
           position: "absolute",
           left: 0,
@@ -189,6 +205,9 @@ const DraggableComponent = (props: DraggableComponentProps) => {
           zIndex: props.widgetId === selectedWidget ? 3 : 1,
         }}
       >
+        <WidgetBoundaries
+          style={{ display: isResizingOrDragging ? "block" : "none" }}
+        />
         {props.children}
         <DragHandle className="control" ref={drag}>
           <Tooltip content="Move" hoverOpenDelay={500}>
@@ -206,7 +225,7 @@ const DraggableComponent = (props: DraggableComponentProps) => {
           </Tooltip>
         </EditControl>
       </DraggableWrapper>
-    </DraggableComponentContext.Provider>
+    </React.Fragment>
   );
 };
 

app/client/src/components/editorComponents/DropTargetComponent.tsx

@@ -5,7 +5,7 @@ import { WidgetConfigProps } from "reducers/entityReducers/widgetConfigReducer";
 import WidgetFactory from "utils/WidgetFactory";
 import { widgetOperationParams, noCollision } from "utils/WidgetPropsUtils";
 import { EditorContext } from "components/editorComponents/EditorContextProvider";
-import { FocusContext, ResizingContext } from "pages/Editor/CanvasContexts";
+import { FocusContext, DragResizeContext } from "pages/Editor/CanvasContexts";
 
 import DragLayerComponent from "./DragLayerComponent";
 
@@ -27,7 +27,7 @@ export const DropTargetComponent = (props: DropTargetComponentProps) => {
   const [dropTargetOffset, setDropTargetOffset] = useState({ x: 0, y: 0 });
   const { updateWidget, occupiedSpaces } = useContext(EditorContext);
   const { selectWidget, showPropertyPane } = useContext(FocusContext);
-  const { isResizing } = useContext(ResizingContext);
+  const { isResizing } = useContext(DragResizeContext);
   const spacesOccupiedBySiblingWidgets =
     occupiedSpaces && occupiedSpaces[props.widgetId]
       ? occupiedSpaces[props.widgetId]

app/client/src/components/editorComponents/ResizableComponent.tsx

@@ -4,8 +4,7 @@ import { XYCoord } from "react-dnd";
 import { getAbsolutePixels } from "utils/helpers";
 import { WidgetOperations, WidgetRowCols } from "widgets/BaseWidget";
 import { EditorContext } from "components/editorComponents/EditorContextProvider";
-import { FocusContext, ResizingContext } from "pages/Editor/CanvasContexts";
-import { DraggableComponentContext } from "./DraggableComponent";
+import { FocusContext, DragResizeContext } from "pages/Editor/CanvasContexts";
 import { generateClassName } from "utils/generators";
 
 import ResizableContainer, {
@@ -23,8 +22,7 @@ import {
 /* eslint-disable react/display-name */
 export const ResizableComponent = memo((props: ResizableComponentProps) => {
   // Fetch information from the context
-  const { isDragging } = useContext(DraggableComponentContext);
-  const { setIsResizing } = useContext(ResizingContext);
+  const { isDragging, setIsResizing } = useContext(DragResizeContext);
   const { updateWidget, occupiedSpaces } = useContext(EditorContext);
   const {
     showPropertyPane,

app/client/src/pages/Editor/Canvas.tsx

@@ -5,7 +5,7 @@ import { ContainerWidgetProps } from "widgets/ContainerWidget";
 import { WidgetProps } from "widgets/BaseWidget";
 import PropertyPane from "./PropertyPane";
 import ArtBoard from "pages/common/ArtBoard";
-import { ResizingContext, FocusContext } from "./CanvasContexts";
+import { DragResizeContext, FocusContext } from "./CanvasContexts";
 
 interface CanvasProps {
   dsl: ContainerWidgetProps<WidgetProps>;
@@ -20,9 +20,12 @@ const Canvas = (props: CanvasProps) => {
   const [selectedWidget, selectWidget] = useState();
   const [focusedWidget, focusWidget] = useState();
   const [isResizing, setIsResizing] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
   try {
     return (
-      <ResizingContext.Provider value={{ isResizing, setIsResizing }}>
+      <DragResizeContext.Provider
+        value={{ isResizing, setIsResizing, isDragging, setIsDragging }}
+      >
         <FocusContext.Provider
           value={{
             selectedWidget,
@@ -38,7 +41,7 @@ const Canvas = (props: CanvasProps) => {
               WidgetFactory.createWidget(props.dsl, RenderModes.CANVAS)}
           </ArtBoard>
         </FocusContext.Provider>
-      </ResizingContext.Provider>
+      </DragResizeContext.Provider>
     );
   } catch (error) {
     console.log("Error rendering DSL", error);

app/client/src/pages/Editor/CanvasContexts.ts

@@ -8,7 +8,9 @@ export const FocusContext: Context<{
   showPropertyPane?: (widgetId?: string, toggle?: boolean) => void;
 }> = createContext({});
 
-export const ResizingContext: Context<{
+export const DragResizeContext: Context<{
   isResizing?: boolean;
   setIsResizing?: Function;
+  isDragging?: boolean;
+  setIsDragging?: Function;
 }> = createContext({});