diff --git a/app/client/src/layoutSystems/anvil/canvas/AnvilMainCanvas.tsx b/app/client/src/layoutSystems/anvil/canvas/AnvilMainCanvas.tsx index 0fdced3352..f436cd7c88 100644 --- a/app/client/src/layoutSystems/anvil/canvas/AnvilMainCanvas.tsx +++ b/app/client/src/layoutSystems/anvil/canvas/AnvilMainCanvas.tsx @@ -1,14 +1,18 @@ import type { BaseWidgetProps } from "widgets/BaseWidgetHOC/withBaseWidgetHOC"; import { AnvilCanvas } from "./AnvilCanvas"; import React from "react"; -import { useCanvasActivationStates } from "../canvasArenas/hooks/mainCanvas/useCanvasActivationStates"; import { useCanvasActivation } from "../canvasArenas/hooks/mainCanvas/useCanvasActivation"; import { useSelectWidgetListener } from "../common/hooks/useSelectWidgetListener"; -export const AnvilMainCanvas = (props: BaseWidgetProps) => { - const anvilCanvasActivationStates = useCanvasActivationStates(); - useCanvasActivation(anvilCanvasActivationStates); +/** + * Anvil Main Canvas is just a wrapper around AnvilCanvas. + * Why do we need this? + * Because we need to use useCanvasActivation hook which is only needed to be used once and it is also exclusive to edit mode. + * checkout useCanvasActivation for more details. + */ +export const AnvilMainCanvas = (props: BaseWidgetProps) => { + useCanvasActivation(); useSelectWidgetListener(); return ; }; diff --git a/app/client/src/layoutSystems/anvil/canvasArenas/hooks/mainCanvas/useCanvasActivation.ts b/app/client/src/layoutSystems/anvil/canvasArenas/hooks/mainCanvas/useCanvasActivation.ts index e6fd93dd87..49f815aa9b 100644 --- a/app/client/src/layoutSystems/anvil/canvasArenas/hooks/mainCanvas/useCanvasActivation.ts +++ b/app/client/src/layoutSystems/anvil/canvasArenas/hooks/mainCanvas/useCanvasActivation.ts @@ -7,7 +7,7 @@ import { getAnvilLayoutDOMId } from "layoutSystems/common/utils/LayoutElementPos import { debounce, uniq } from "lodash"; import { useEffect, useRef } from "react"; import { useWidgetDragResize } from "utils/hooks/dragResizeHooks"; -import type { AnvilCanvasActivationStates } from "./useCanvasActivationStates"; +import { useCanvasActivationStates } from "./useCanvasActivationStates"; import { canActivateCanvasForDraggedWidget } from "../utils"; import { LayoutComponentTypes } from "layoutSystems/anvil/utils/anvilTypes"; @@ -39,16 +39,21 @@ const checkIfMousePositionIsInsideBlock = ( const MAIN_CANVAS_BUFFER = 20; const SECTION_BUFFER = 20; -export const useCanvasActivation = ({ - activateOverlayWidgetDrop, - dragDetails, - draggedWidgetTypes, - isDragging, - isNewWidget, - layoutElementPositions, - mainCanvasLayoutId, - selectedWidgets, -}: AnvilCanvasActivationStates) => { +/** + * This hook handles the activation and deactivation of the canvas(Drop targets) while dragging. + */ + +export const useCanvasActivation = () => { + const { + activateOverlayWidgetDrop, + dragDetails, + draggedWidgetTypes, + isDragging, + isNewWidget, + layoutElementPositions, + mainCanvasLayoutId, + selectedWidgets, + } = useCanvasActivationStates(); // Getting the main canvas DOM node const mainContainerDOMNode = document.getElementById(CANVAS_ART_BOARD); diff --git a/app/client/src/widgets/anvil/ZoneWidget/widget/config/anvilConfig.ts b/app/client/src/widgets/anvil/ZoneWidget/widget/config/anvilConfig.ts index a95957db71..28d5374055 100644 --- a/app/client/src/widgets/anvil/ZoneWidget/widget/config/anvilConfig.ts +++ b/app/client/src/widgets/anvil/ZoneWidget/widget/config/anvilConfig.ts @@ -7,13 +7,13 @@ export const anvilConfig: AnvilConfig = { isLargeWidget: true, widgetSize: (props: WidgetProps, isPreviewMode: boolean): SizeConfig => { return { - minWidth: { - base: "100%", - [`${MOBILE_BREAKPOINT}px`]: - props?.renderMode === RenderModes.CANVAS && !isPreviewMode - ? "unset" - : "min-content", - }, + minWidth: + props?.renderMode === RenderModes.CANVAS && !isPreviewMode + ? {} + : { + base: "100%", + [`${MOBILE_BREAKPOINT}px`]: "min-content", + }, }; }, };