diff --git a/app/client/src/components/designSystems/appsmith/WidgetNameComponent.tsx b/app/client/src/components/designSystems/appsmith/WidgetNameComponent.tsx index 6b5beb15c9..757a615a21 100644 --- a/app/client/src/components/designSystems/appsmith/WidgetNameComponent.tsx +++ b/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 && diff --git a/app/client/src/components/editorComponents/DraggableComponent.tsx b/app/client/src/components/editorComponents/DraggableComponent.tsx index 147bc4a60f..1ab8fb923a 100644 --- a/app/client/src/components/editorComponents/DraggableComponent.tsx +++ b/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; -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 ( - + + { !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, }} > + {props.children} @@ -206,7 +225,7 @@ const DraggableComponent = (props: DraggableComponentProps) => { - + ); }; diff --git a/app/client/src/components/editorComponents/DropTargetComponent.tsx b/app/client/src/components/editorComponents/DropTargetComponent.tsx index 0be9097133..2743e1f56c 100644 --- a/app/client/src/components/editorComponents/DropTargetComponent.tsx +++ b/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] diff --git a/app/client/src/components/editorComponents/ResizableComponent.tsx b/app/client/src/components/editorComponents/ResizableComponent.tsx index c1d8cef898..fbb28ff8fd 100644 --- a/app/client/src/components/editorComponents/ResizableComponent.tsx +++ b/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, diff --git a/app/client/src/pages/Editor/Canvas.tsx b/app/client/src/pages/Editor/Canvas.tsx index f10536ae1a..e78d64133a 100644 --- a/app/client/src/pages/Editor/Canvas.tsx +++ b/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; @@ -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 ( - + { WidgetFactory.createWidget(props.dsl, RenderModes.CANVAS)} - + ); } catch (error) { console.log("Error rendering DSL", error); diff --git a/app/client/src/pages/Editor/CanvasContexts.ts b/app/client/src/pages/Editor/CanvasContexts.ts index 09c70956b9..24ebf23430 100644 --- a/app/client/src/pages/Editor/CanvasContexts.ts +++ b/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({});