From 38ba664221ace09fe9b0b0a81979682a4ecde12c Mon Sep 17 00:00:00 2001 From: Ashok Kumar M <35134347+marks0351@users.noreply.github.com> Date: Thu, 16 May 2024 12:45:26 +0530 Subject: [PATCH 1/6] fix: get evaluated values of elevateBackground via context instead of fetching all evaluated values. --- .../anvil/editor/canvas/AnvilEditorCanvas.tsx | 28 +++++----- .../hooks/useAnvilWidgetElevationSetter.ts | 15 +++++ .../AnvilWidgetElevationProvider.tsx | 56 +++++++++++++++++++ .../hooks/useAnvilDnDListenerStates.ts | 20 ++++--- app/client/src/widgets/anvil/Container.tsx | 2 + 5 files changed, 98 insertions(+), 23 deletions(-) create mode 100644 app/client/src/layoutSystems/anvil/editor/canvas/hooks/useAnvilWidgetElevationSetter.ts create mode 100644 app/client/src/layoutSystems/anvil/editor/canvas/providers/AnvilWidgetElevationProvider.tsx diff --git a/app/client/src/layoutSystems/anvil/editor/canvas/AnvilEditorCanvas.tsx b/app/client/src/layoutSystems/anvil/editor/canvas/AnvilEditorCanvas.tsx index 7d5afc3dc0be..67319c5c0976 100644 --- a/app/client/src/layoutSystems/anvil/editor/canvas/AnvilEditorCanvas.tsx +++ b/app/client/src/layoutSystems/anvil/editor/canvas/AnvilEditorCanvas.tsx @@ -3,16 +3,14 @@ import { AnvilViewerCanvas } from "layoutSystems/anvil/viewer/canvas/AnvilViewer import React, { useCallback, useEffect, useRef } from "react"; import { useSelectWidgetListener } from "./hooks/useSelectWidgetListener"; import { useClickToClearSelections } from "./hooks/useClickToClearSelections"; -import { - useAnvilGlobalDnDStates, - type AnvilGlobalDnDStates, -} from "./hooks/useAnvilGlobalDnDStates"; +import type { AnvilGlobalDnDStates } from "./hooks/useAnvilGlobalDnDStates"; +import { useAnvilGlobalDnDStates } from "./hooks/useAnvilGlobalDnDStates"; import { AnvilDragPreview } from "../canvasArenas/AnvilDragPreview"; +import { AnvilWidgetElevationProvider } from "./providers/AnvilWidgetElevationProvider"; export const AnvilDnDStatesContext = React.createContext< AnvilGlobalDnDStates | undefined >(undefined); - /** * Anvil Main Canvas is just a wrapper around AnvilCanvas. * Why do we need this? @@ -58,14 +56,16 @@ export const AnvilEditorCanvas = (props: BaseWidgetProps) => { // using AnvilDnDStatesContext to provide the states to the child AnvilDraggingArena const anvilGlobalDnDStates = useAnvilGlobalDnDStates(); return ( - - - - + + + + + + ); }; diff --git a/app/client/src/layoutSystems/anvil/editor/canvas/hooks/useAnvilWidgetElevationSetter.ts b/app/client/src/layoutSystems/anvil/editor/canvas/hooks/useAnvilWidgetElevationSetter.ts new file mode 100644 index 000000000000..1e44a37f8b1c --- /dev/null +++ b/app/client/src/layoutSystems/anvil/editor/canvas/hooks/useAnvilWidgetElevationSetter.ts @@ -0,0 +1,15 @@ +import { useEffect } from "react"; +import { useAnvilWidgetElevation } from "../providers/AnvilWidgetElevationProvider"; + +export const useAnvilWidgetElevationSetter = ( + widgetId: string, + elevatedBackground: boolean, +) => { + const anvilWidgetElevation = useAnvilWidgetElevation(); + const { setWidgetElevation } = anvilWidgetElevation || {}; + useEffect(() => { + if (setWidgetElevation) { + setWidgetElevation(widgetId, elevatedBackground); + } + }, [elevatedBackground, setWidgetElevation]); +}; diff --git a/app/client/src/layoutSystems/anvil/editor/canvas/providers/AnvilWidgetElevationProvider.tsx b/app/client/src/layoutSystems/anvil/editor/canvas/providers/AnvilWidgetElevationProvider.tsx new file mode 100644 index 000000000000..03a39d9b4bec --- /dev/null +++ b/app/client/src/layoutSystems/anvil/editor/canvas/providers/AnvilWidgetElevationProvider.tsx @@ -0,0 +1,56 @@ +import React, { + type ReactNode, + createContext, + useState, + useCallback, + useContext, +} from "react"; + +interface WidgetElevationObj { + [key: string]: boolean; +} + +interface AnvilWidgetElevationContextType { + elevatedWidgets: WidgetElevationObj; + setWidgetElevation: (widgetId: string, isElevated: boolean) => void; +} + +const AnvilWidgetElevationContext = createContext< + AnvilWidgetElevationContextType | undefined +>(undefined); + +export const useAnvilWidgetElevation = () => + useContext(AnvilWidgetElevationContext); + +export const AnvilWidgetElevationProvider = ({ + children, +}: { + children: ReactNode; +}) => { + const [elevatedWidgets, setElevatedWidgets] = useState( + {}, + ); + + const setWidgetElevation = useCallback( + (widgetId: string, isElevated: boolean) => { + setElevatedWidgets((prev) => { + return { + ...prev, + [widgetId]: isElevated, + }; + }); + }, + [setElevatedWidgets], + ); + + return ( + + {children} + + ); +}; diff --git a/app/client/src/layoutSystems/anvil/editor/canvasArenas/hooks/useAnvilDnDListenerStates.ts b/app/client/src/layoutSystems/anvil/editor/canvasArenas/hooks/useAnvilDnDListenerStates.ts index 45ef1bf44d08..bf9ff483d1e1 100644 --- a/app/client/src/layoutSystems/anvil/editor/canvasArenas/hooks/useAnvilDnDListenerStates.ts +++ b/app/client/src/layoutSystems/anvil/editor/canvasArenas/hooks/useAnvilDnDListenerStates.ts @@ -16,6 +16,7 @@ import type { AnvilGlobalDnDStates } from "../../canvas/hooks/useAnvilGlobalDnDS import { getWidgets } from "sagas/selectors"; import { useMemo } from "react"; import { ZoneWidget } from "widgets/anvil/ZoneWidget"; +import { useAnvilWidgetElevation } from "../../canvas/providers/AnvilWidgetElevationProvider"; interface AnvilDnDListenerStatesProps { anvilGlobalDragStates: AnvilGlobalDnDStates; @@ -96,6 +97,8 @@ export const useAnvilDnDListenerStates = ({ mainCanvasLayoutId, } = anvilGlobalDragStates; const allWidgets = useSelector(getWidgets); + const anvilWidgetElevation = useAnvilWidgetElevation(); + const elevatedWidgets = anvilWidgetElevation?.elevatedWidgets || {}; const widgetProps = allWidgets[widgetId]; const selectedWidgets = useSelector(getSelectedWidgets); /** @@ -133,22 +136,21 @@ export const useAnvilDnDListenerStates = ({ (each) => !allWidgets[each].detachFromLayout, ).length === 0; - const allSiblingsWidgets = useMemo(() => { - const allSiblings = - (widgetProps.parentId && allWidgets[widgetProps.parentId]?.children) || - []; - return allSiblings.map((each) => allWidgets[each]); + const allSiblingsWidgetIds = useMemo(() => { + return ( + (widgetProps.parentId && allWidgets[widgetProps.parentId]?.children) || [] + ); }, [widgetProps, allWidgets]); const isElevatedWidget = useMemo(() => { if (widgetProps.type === ZoneWidget.type) { - const isAnyZoneElevated = allSiblingsWidgets.some( - (each) => !!each.elevatedBackground, + const isAnyZoneElevated = allSiblingsWidgetIds.some( + (each) => !!elevatedWidgets[each], ); return isAnyZoneElevated; } - return !!widgetProps.elevatedBackground; - }, [widgetProps, allSiblingsWidgets]); + return !!elevatedWidgets[widgetId]; + }, [widgetProps, elevatedWidgets, allSiblingsWidgetIds]); const { edgeCompensatorValues, diff --git a/app/client/src/widgets/anvil/Container.tsx b/app/client/src/widgets/anvil/Container.tsx index 26d3a68cef63..30e28e35c3ed 100644 --- a/app/client/src/widgets/anvil/Container.tsx +++ b/app/client/src/widgets/anvil/Container.tsx @@ -3,6 +3,7 @@ import React from "react"; import styled from "styled-components"; import { generateClassName } from "utils/generators"; import type { Elevations } from "./constants"; +import { useAnvilWidgetElevationSetter } from "layoutSystems/anvil/editor/canvas/hooks/useAnvilWidgetElevationSetter"; /** * This container component wraps the Zone and Section widgets and allows Anvil to utilise tokens from the themes @@ -22,6 +23,7 @@ const StyledContainerComponent = styled.div< `; export function ContainerComponent(props: ContainerComponentProps) { + useAnvilWidgetElevationSetter(props.widgetId, props.elevatedBackground); return ( Date: Thu, 16 May 2024 18:51:22 +0530 Subject: [PATCH 2/6] feat: add ux to show zone border of background less zones. --- .../common/hooks/useWidgetBorderStyles.ts | 17 ++++++++--- .../anvil/editor/AnvilEditorFlexComponent.tsx | 1 + .../anvil/editor/AnvilEditorWidgetOnion.tsx | 1 + .../anvil/editor/AnvilWidgetName/selectors.ts | 9 ++++-- .../editor/hooks/useAnvilWidgetStyles.ts | 7 ++++- .../anvil/integrations/selectors.ts | 6 +++- .../anvil/sectionSpaceDistributor/actions.ts | 11 +++++++ .../useSpaceDistributionEvents.ts | 23 ++++++++------- .../src/layoutSystems/anvil/utils/types.ts | 1 + .../reducers/uiReducers/dragResizeReducer.ts | 29 ++++++++++++++++--- 10 files changed, 83 insertions(+), 22 deletions(-) create mode 100644 app/client/src/layoutSystems/anvil/sectionSpaceDistributor/actions.ts diff --git a/app/client/src/layoutSystems/anvil/common/hooks/useWidgetBorderStyles.ts b/app/client/src/layoutSystems/anvil/common/hooks/useWidgetBorderStyles.ts index 958153468b5f..84d356e65aa2 100644 --- a/app/client/src/layoutSystems/anvil/common/hooks/useWidgetBorderStyles.ts +++ b/app/client/src/layoutSystems/anvil/common/hooks/useWidgetBorderStyles.ts @@ -4,12 +4,17 @@ import { getWidgetErrorCount } from "layoutSystems/anvil/editor/AnvilWidgetName/ import { getAnvilHighlightShown, getAnvilSpaceDistributionStatus, + getWidgetsDistributingSpace, } from "layoutSystems/anvil/integrations/selectors"; import { useSelector } from "react-redux"; import { combinedPreviewModeSelector } from "selectors/editorSelectors"; import { isWidgetFocused, isWidgetSelected } from "selectors/widgetSelectors"; -export function useWidgetBorderStyles(widgetId: string, widgetType: string) { +export function useWidgetBorderStyles( + widgetId: string, + widgetType: string, + elevatedBackground?: boolean, +) { /** Selectors */ const isFocused = useSelector(isWidgetFocused(widgetId)); const isSelected = useSelector(isWidgetSelected(widgetId)); @@ -28,7 +33,9 @@ export function useWidgetBorderStyles(widgetId: string, widgetType: string) { const isDistributingSpace: boolean = useSelector( getAnvilSpaceDistributionStatus, ); - + const widgetsEffectedBySpaceDistribution = useSelector( + getWidgetsDistributingSpace, + ); const isPreviewMode = useSelector(combinedPreviewModeSelector); /** EO selectors */ @@ -37,11 +44,13 @@ export function useWidgetBorderStyles(widgetId: string, widgetType: string) { if (isPreviewMode) { return {}; } - + const isBorderLessZoneOfDistributingSection = + widgetsEffectedBySpaceDistribution.zones.includes(widgetId) && + !elevatedBackground; // Show the border if the widget has widgets being dragged or redistributed inside it const showDraggedOnBorder = (highlightShown && highlightShown.canvasId === widgetId) || - (isDistributingSpace && isSelected); + isBorderLessZoneOfDistributingSection; const onCanvasUI = WidgetFactory.getConfig(widgetType)?.onCanvasUI; diff --git a/app/client/src/layoutSystems/anvil/editor/AnvilEditorFlexComponent.tsx b/app/client/src/layoutSystems/anvil/editor/AnvilEditorFlexComponent.tsx index 9ec2bdf280cf..a8a08e5420e6 100644 --- a/app/client/src/layoutSystems/anvil/editor/AnvilEditorFlexComponent.tsx +++ b/app/client/src/layoutSystems/anvil/editor/AnvilEditorFlexComponent.tsx @@ -47,6 +47,7 @@ export const AnvilEditorFlexComponent = (props: AnvilFlexComponentProps) => { props.widgetName, props.isVisible, props.widgetType, + !!props.elevatedBackground, ref, ); useAnvilWidgetDrag(props.widgetId, props.widgetType, props.layoutId, ref); diff --git a/app/client/src/layoutSystems/anvil/editor/AnvilEditorWidgetOnion.tsx b/app/client/src/layoutSystems/anvil/editor/AnvilEditorWidgetOnion.tsx index c6dc09fd7963..6e2abcef1566 100644 --- a/app/client/src/layoutSystems/anvil/editor/AnvilEditorWidgetOnion.tsx +++ b/app/client/src/layoutSystems/anvil/editor/AnvilEditorWidgetOnion.tsx @@ -35,6 +35,7 @@ export const AnvilEditorWidgetOnion = (props: BaseWidgetProps) => { }, [isPreviewMode]); return ( { - const baseCondition = isEditorOpen && !isDragging; + const baseCondition = isEditorOpen && !isDragging && !isDistributingSpace; let onCanvasUIState: NameComponentStates = "none"; if (baseCondition) { if (isWidgetSelected) onCanvasUIState = "select"; diff --git a/app/client/src/layoutSystems/anvil/editor/hooks/useAnvilWidgetStyles.ts b/app/client/src/layoutSystems/anvil/editor/hooks/useAnvilWidgetStyles.ts index 54d3aee78dac..cc7b5204250e 100644 --- a/app/client/src/layoutSystems/anvil/editor/hooks/useAnvilWidgetStyles.ts +++ b/app/client/src/layoutSystems/anvil/editor/hooks/useAnvilWidgetStyles.ts @@ -10,6 +10,7 @@ export const useAnvilWidgetStyles = ( widgetName: string, isVisible = true, widgetType: string, + elevatedBackground: boolean, ref: React.RefObject, // Ref object to reference the AnvilFlexComponent ) => { // Selectors to determine whether the widget is selected or dragging @@ -18,7 +19,11 @@ export const useAnvilWidgetStyles = ( (state: AppState) => state.ui.widgetDragResize.isDragging, ); // Get widget border styles using useWidgetBorderStyles - const widgetBorderStyles = useWidgetBorderStyles(widgetId, widgetType); + const widgetBorderStyles = useWidgetBorderStyles( + widgetId, + widgetType, + elevatedBackground, + ); // Effect hook to apply widget border styles to the widget useEffect(() => { diff --git a/app/client/src/layoutSystems/anvil/integrations/selectors.ts b/app/client/src/layoutSystems/anvil/integrations/selectors.ts index 87f6249221d6..74a29723c04b 100644 --- a/app/client/src/layoutSystems/anvil/integrations/selectors.ts +++ b/app/client/src/layoutSystems/anvil/integrations/selectors.ts @@ -24,7 +24,11 @@ export function getDropTargetLayoutId(state: AppState, canvasId: string) { * Returns a boolean indicating if space distribution is in progress */ export function getAnvilSpaceDistributionStatus(state: AppState) { - return state.ui.widgetDragResize.anvil.isDistributingSpace; + return state.ui.widgetDragResize.anvil.spaceDistribution.isDistributingSpace; +} + +export function getWidgetsDistributingSpace(state: AppState) { + return state.ui.widgetDragResize.anvil.spaceDistribution.widgetsEffected; } /** diff --git a/app/client/src/layoutSystems/anvil/sectionSpaceDistributor/actions.ts b/app/client/src/layoutSystems/anvil/sectionSpaceDistributor/actions.ts new file mode 100644 index 000000000000..5f16f4a2dcdb --- /dev/null +++ b/app/client/src/layoutSystems/anvil/sectionSpaceDistributor/actions.ts @@ -0,0 +1,11 @@ +import { AnvilReduxActionTypes } from "../integrations/actions/actionTypes"; + +export const startAnvilSpaceDistribution = (payload: { + section: string; + zones: string[]; +}) => { + return { + type: AnvilReduxActionTypes.ANVIL_SPACE_DISTRIBUTION_START, + payload, + }; +}; diff --git a/app/client/src/layoutSystems/anvil/sectionSpaceDistributor/useSpaceDistributionEvents.ts b/app/client/src/layoutSystems/anvil/sectionSpaceDistributor/useSpaceDistributionEvents.ts index 6af8e575ae9e..4f2da2d99adc 100644 --- a/app/client/src/layoutSystems/anvil/sectionSpaceDistributor/useSpaceDistributionEvents.ts +++ b/app/client/src/layoutSystems/anvil/sectionSpaceDistributor/useSpaceDistributionEvents.ts @@ -21,6 +21,7 @@ import { updateWidgetCSSOnHandleMove, updateWidgetCSSOnMinimumLimit, } from "./utils/onMouseMoveUtils"; +import { startAnvilSpaceDistribution } from "./actions"; interface SpaceDistributionEventsProps { ref: React.RefObject; @@ -54,16 +55,19 @@ export const useSpaceDistributionEvents = ({ getMouseSpeedTrackingCallback(currentMouseSpeed); const selectedWidgets = useSelector(getSelectedWidgets); const { selectWidget } = useWidgetSelection(); + const onSpaceDistributionStart = useCallback(() => { + dispatch( + startAnvilSpaceDistribution({ + section: sectionWidgetId, + zones: zoneIds, + }), + ); + }, [sectionWidgetId, zoneIds]); const selectCorrespondingSectionWidget = useCallback(() => { - if ( - !( - selectedWidgets.includes(sectionWidgetId) || - zoneIds.some((each) => selectedWidgets.includes(each)) - ) - ) { + if (!selectedWidgets.includes(sectionWidgetId)) { selectWidget(SelectionRequestType.One, [sectionWidgetId]); } - }, [sectionWidgetId, selectedWidgets, zoneIds]); + }, [sectionWidgetId, selectedWidgets]); useEffect(() => { if (ref.current) { // Check if the ref to the DOM element exists @@ -196,9 +200,7 @@ export const useSpaceDistributionEvents = ({ e.preventDefault(); x = e.clientX; // Store the initial mouse position isCurrentHandleDistributingSpace.current = true; // Set distribution flag - dispatch({ - type: AnvilReduxActionTypes.ANVIL_SPACE_DISTRIBUTION_START, - }); + onSpaceDistributionStart(); addMouseMoveHandlers(); }; @@ -331,5 +333,6 @@ export const useSpaceDistributionEvents = ({ sectionWidgetId, spaceDistributed, spaceToWorkWith, + onSpaceDistributionStart, ]); }; diff --git a/app/client/src/layoutSystems/anvil/utils/types.ts b/app/client/src/layoutSystems/anvil/utils/types.ts index c467a876542e..240ee9c292b8 100644 --- a/app/client/src/layoutSystems/anvil/utils/types.ts +++ b/app/client/src/layoutSystems/anvil/utils/types.ts @@ -5,6 +5,7 @@ import type { WidgetType } from "WidgetProvider/factory"; export interface AnvilFlexComponentProps { children: ReactNode; className?: string; + elevatedBackground?: boolean; layoutId: string; parentId?: string; rowIndex: number; diff --git a/app/client/src/reducers/uiReducers/dragResizeReducer.ts b/app/client/src/reducers/uiReducers/dragResizeReducer.ts index 4303e711a819..5c5ddd21b7b1 100644 --- a/app/client/src/reducers/uiReducers/dragResizeReducer.ts +++ b/app/client/src/reducers/uiReducers/dragResizeReducer.ts @@ -19,7 +19,13 @@ const initialState: WidgetDragResizeState = { isAutoCanvasResizing: false, anvil: { highlightShown: undefined, - isDistributingSpace: false, + spaceDistribution: { + isDistributingSpace: false, + widgetsEffected: { + section: "", + zones: [], + }, + }, }, isDraggingDisabled: false, blockSelection: false, @@ -138,13 +144,22 @@ export const widgetDraggingReducer = createImmerReducer(initialState, { //space distribution redux [AnvilReduxActionTypes.ANVIL_SPACE_DISTRIBUTION_START]: ( state: WidgetDragResizeState, + action: ReduxAction<{ + section: string; + zones: string[]; + }>, ) => { - state.anvil.isDistributingSpace = true; + state.anvil.spaceDistribution.widgetsEffected.section = + action.payload.section; + state.anvil.spaceDistribution.widgetsEffected.zones = action.payload.zones; + state.anvil.spaceDistribution.isDistributingSpace = true; }, [AnvilReduxActionTypes.ANVIL_SPACE_DISTRIBUTION_STOP]: ( state: WidgetDragResizeState, ) => { - state.anvil.isDistributingSpace = false; + state.anvil.spaceDistribution.isDistributingSpace = false; + state.anvil.spaceDistribution.widgetsEffected.section = ""; + state.anvil.spaceDistribution.widgetsEffected.zones = []; }, [AnvilReduxActionTypes.ANVIL_SET_HIGHLIGHT_SHOWN]: ( state: WidgetDragResizeState, @@ -175,7 +190,13 @@ export interface WidgetDragResizeState { isResizing: boolean; anvil: { highlightShown?: AnvilHighlightInfo; - isDistributingSpace: boolean; + spaceDistribution: { + isDistributingSpace: boolean; + widgetsEffected: { + section: string; + zones: string[]; + }; + }; }; lastSelectedWidget?: string; focusedWidget?: string; From 71c0354ef89c9d9d3140ee9126af0d78f1441fe8 Mon Sep 17 00:00:00 2001 From: Ashok Kumar M <35134347+marks0351@users.noreply.github.com> Date: Thu, 16 May 2024 19:01:20 +0530 Subject: [PATCH 3/6] adding actions for stop and update. --- .../anvil/sectionSpaceDistributor/actions.ts | 23 ++++++++++++++- .../useSpaceDistributionEvents.ts | 29 +++++++++---------- 2 files changed, 35 insertions(+), 17 deletions(-) diff --git a/app/client/src/layoutSystems/anvil/sectionSpaceDistributor/actions.ts b/app/client/src/layoutSystems/anvil/sectionSpaceDistributor/actions.ts index 5f16f4a2dcdb..3e524f77439f 100644 --- a/app/client/src/layoutSystems/anvil/sectionSpaceDistributor/actions.ts +++ b/app/client/src/layoutSystems/anvil/sectionSpaceDistributor/actions.ts @@ -1,6 +1,6 @@ import { AnvilReduxActionTypes } from "../integrations/actions/actionTypes"; -export const startAnvilSpaceDistribution = (payload: { +export const startAnvilSpaceDistributionAction = (payload: { section: string; zones: string[]; }) => { @@ -9,3 +9,24 @@ export const startAnvilSpaceDistribution = (payload: { payload, }; }; + +export const stopAnvilSpaceDistributionAction = () => { + return { + type: AnvilReduxActionTypes.ANVIL_SPACE_DISTRIBUTION_STOP, + }; +}; + +export const updateSpaceDistributionAction = ( + sectionLayoutId: string, + zonesDistributed: { + [widgetId: string]: number; + }, +) => { + return { + type: AnvilReduxActionTypes.ANVIL_SPACE_DISTRIBUTION_UPDATE, + payload: { + zonesDistributed, + sectionLayoutId, + }, + }; +}; diff --git a/app/client/src/layoutSystems/anvil/sectionSpaceDistributor/useSpaceDistributionEvents.ts b/app/client/src/layoutSystems/anvil/sectionSpaceDistributor/useSpaceDistributionEvents.ts index 4f2da2d99adc..615ec6fd663d 100644 --- a/app/client/src/layoutSystems/anvil/sectionSpaceDistributor/useSpaceDistributionEvents.ts +++ b/app/client/src/layoutSystems/anvil/sectionSpaceDistributor/useSpaceDistributionEvents.ts @@ -1,7 +1,6 @@ import { getAnvilWidgetDOMId } from "layoutSystems/common/utils/LayoutElementPositionsObserver/utils"; import { useCallback, useEffect, useRef } from "react"; import { useDispatch, useSelector } from "react-redux"; -import { AnvilReduxActionTypes } from "../integrations/actions/actionTypes"; import { getMouseSpeedTrackingCallback, getPropertyPaneZoneId, @@ -21,7 +20,11 @@ import { updateWidgetCSSOnHandleMove, updateWidgetCSSOnMinimumLimit, } from "./utils/onMouseMoveUtils"; -import { startAnvilSpaceDistribution } from "./actions"; +import { + startAnvilSpaceDistributionAction, + stopAnvilSpaceDistributionAction, + updateSpaceDistributionAction, +} from "./actions"; interface SpaceDistributionEventsProps { ref: React.RefObject; @@ -57,7 +60,7 @@ export const useSpaceDistributionEvents = ({ const { selectWidget } = useWidgetSelection(); const onSpaceDistributionStart = useCallback(() => { dispatch( - startAnvilSpaceDistribution({ + startAnvilSpaceDistributionAction({ section: sectionWidgetId, zones: zoneIds, }), @@ -147,21 +150,15 @@ export const useSpaceDistributionEvents = ({ currentFlexGrow.rightZone !== currentGrowthFactor.rightZone ) { // Dispatch action to update space distribution - dispatch({ - type: AnvilReduxActionTypes.ANVIL_SPACE_DISTRIBUTION_UPDATE, - payload: { - zonesDistributed: { - [leftZone]: currentGrowthFactor.leftZone, - [rightZone]: currentGrowthFactor.rightZone, - }, - sectionLayoutId, - }, - }); + dispatch( + updateSpaceDistributionAction(sectionWidgetId, { + [leftZone]: currentGrowthFactor.leftZone, + [rightZone]: currentGrowthFactor.rightZone, + }), + ); } // Stop space distribution process - dispatch({ - type: AnvilReduxActionTypes.ANVIL_SPACE_DISTRIBUTION_STOP, - }); + dispatch(stopAnvilSpaceDistributionAction()); resetCSSOnZones(spaceDistributed); removeMouseMoveHandlers(); currentMouseSpeed.current = 0; From 8d36f30c9e5570dc5537f600b62b831dd3aa3432 Mon Sep 17 00:00:00 2001 From: Ashok Kumar M <35134347+marks0351@users.noreply.github.com> Date: Fri, 17 May 2024 14:40:07 +0530 Subject: [PATCH 4/6] chore: adding code comments --- .../providers/AnvilWidgetElevationProvider.tsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/app/client/src/layoutSystems/anvil/editor/canvas/providers/AnvilWidgetElevationProvider.tsx b/app/client/src/layoutSystems/anvil/editor/canvas/providers/AnvilWidgetElevationProvider.tsx index 03a39d9b4bec..a0fb060ce8e7 100644 --- a/app/client/src/layoutSystems/anvil/editor/canvas/providers/AnvilWidgetElevationProvider.tsx +++ b/app/client/src/layoutSystems/anvil/editor/canvas/providers/AnvilWidgetElevationProvider.tsx @@ -21,7 +21,19 @@ const AnvilWidgetElevationContext = createContext< export const useAnvilWidgetElevation = () => useContext(AnvilWidgetElevationContext); - +/** + * AnvilWidgetElevationProvider is a indexes all sections and zones and records their evaluated value of elevation(Visual Separation). + * + * Why not just use the evaluated values directly? + * Because we need to keep track of the elevation of each widget in the editor to apply the correct elevation styles. + * elevation being a bindable property, we need to keep track of the evaluated value of elevation of each sections and zones in the editor. + * + * When adding compensators to the dragged widgets(useAnvilDnDCompensators), we need to know the elevation of the zone widget as well as its corresponding siblings + * to decide if the zone has to treated as a elevated zone or not. + * + * In-order to skip iterating the data tree every time we need to know the elevation of a widget, we are storing the elevation of each widget in this context. + * This way we do not have dependency on the data tree to know the elevation of a widget. + */ export const AnvilWidgetElevationProvider = ({ children, }: { From 1ea92897121cd55123a41b1b9a70c63045ed5b93 Mon Sep 17 00:00:00 2001 From: Ashok Kumar M <35134347+marks0351@users.noreply.github.com> Date: Fri, 17 May 2024 15:33:11 +0530 Subject: [PATCH 5/6] chore: adding code comments --- .../anvil/common/hooks/useWidgetBorderStyles.ts | 9 +++++---- .../canvas/providers/AnvilWidgetElevationProvider.tsx | 10 ++++------ 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/app/client/src/layoutSystems/anvil/common/hooks/useWidgetBorderStyles.ts b/app/client/src/layoutSystems/anvil/common/hooks/useWidgetBorderStyles.ts index 84d356e65aa2..bc771ffd677b 100644 --- a/app/client/src/layoutSystems/anvil/common/hooks/useWidgetBorderStyles.ts +++ b/app/client/src/layoutSystems/anvil/common/hooks/useWidgetBorderStyles.ts @@ -44,13 +44,14 @@ export function useWidgetBorderStyles( if (isPreviewMode) { return {}; } - const isBorderLessZoneOfDistributingSection = - widgetsEffectedBySpaceDistribution.zones.includes(widgetId) && - !elevatedBackground; + const isZoneDistributingSpace = + widgetsEffectedBySpaceDistribution.zones.includes(widgetId); + // If the widget is a zone and is distributing space and has no elevated background + const isZoneNotElevated = isZoneDistributingSpace && !elevatedBackground; // Show the border if the widget has widgets being dragged or redistributed inside it const showDraggedOnBorder = (highlightShown && highlightShown.canvasId === widgetId) || - isBorderLessZoneOfDistributingSection; + isZoneNotElevated; const onCanvasUI = WidgetFactory.getConfig(widgetType)?.onCanvasUI; diff --git a/app/client/src/layoutSystems/anvil/editor/canvas/providers/AnvilWidgetElevationProvider.tsx b/app/client/src/layoutSystems/anvil/editor/canvas/providers/AnvilWidgetElevationProvider.tsx index a0fb060ce8e7..fc8252172153 100644 --- a/app/client/src/layoutSystems/anvil/editor/canvas/providers/AnvilWidgetElevationProvider.tsx +++ b/app/client/src/layoutSystems/anvil/editor/canvas/providers/AnvilWidgetElevationProvider.tsx @@ -6,12 +6,12 @@ import React, { useContext, } from "react"; -interface WidgetElevationObj { +interface WidgetElevation { [key: string]: boolean; } interface AnvilWidgetElevationContextType { - elevatedWidgets: WidgetElevationObj; + elevatedWidgets: WidgetElevation; setWidgetElevation: (widgetId: string, isElevated: boolean) => void; } @@ -22,7 +22,7 @@ const AnvilWidgetElevationContext = createContext< export const useAnvilWidgetElevation = () => useContext(AnvilWidgetElevationContext); /** - * AnvilWidgetElevationProvider is a indexes all sections and zones and records their evaluated value of elevation(Visual Separation). + * AnvilWidgetElevationProvider indexes all sections and zones and records their evaluated value of elevation(Visual Separation). * * Why not just use the evaluated values directly? * Because we need to keep track of the elevation of each widget in the editor to apply the correct elevation styles. @@ -39,9 +39,7 @@ export const AnvilWidgetElevationProvider = ({ }: { children: ReactNode; }) => { - const [elevatedWidgets, setElevatedWidgets] = useState( - {}, - ); + const [elevatedWidgets, setElevatedWidgets] = useState({}); const setWidgetElevation = useCallback( (widgetId: string, isElevated: boolean) => { From 40a6bcae2d45e9f7791730108b772b679ad610b0 Mon Sep 17 00:00:00 2001 From: Ashok Kumar M <35134347+marks0351@users.noreply.github.com> Date: Tue, 21 May 2024 15:16:33 +0530 Subject: [PATCH 6/6] fix: height css for empty modal wrapper. --- .../anvil/editor/canvasArenas/AnvilModalDropArena.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/client/src/layoutSystems/anvil/editor/canvasArenas/AnvilModalDropArena.tsx b/app/client/src/layoutSystems/anvil/editor/canvasArenas/AnvilModalDropArena.tsx index 62e2c1d5a216..c2f0ea988536 100644 --- a/app/client/src/layoutSystems/anvil/editor/canvasArenas/AnvilModalDropArena.tsx +++ b/app/client/src/layoutSystems/anvil/editor/canvasArenas/AnvilModalDropArena.tsx @@ -65,7 +65,7 @@ export const AnvilModalDropArena = ({ return (