From 7da85613390a2e2a755d4899acc5359904510af3 Mon Sep 17 00:00:00 2001 From: Abhinav Jha Date: Thu, 19 Oct 2023 20:44:10 +0530 Subject: [PATCH] fix: Misc. fixes for anvil (#28204) ## Description Fixes #28203 - Borders are added to widgets separately now, as there is no resizer in Anvil - Fix main container jump when hovering over the main container resizer - Add height 100% to themeprovider so that the layout preset for main canvas can render correctly - Stop widgets from focusing in preview mode - Prevent AutoHeight Sagas from running in Anvil - Prevent Auto Layout sagas from running in Anvil --- .../theming/src/theme/src/ThemeProvider.tsx | 4 +- .../anvil/common/AnvilFlexComponent.tsx | 4 ++ .../common/hooks/useWidgetBorderStyles.ts | 45 +++++++++++++++++++ .../common/draggable/DraggableComponent.tsx | 4 ++ .../MainContainerResizer.tsx | 1 - .../src/sagas/AutoLayoutUpdateSagas.tsx | 15 +++++++ app/client/src/sagas/autoHeightSagas/index.ts | 9 ++-- 7 files changed, 76 insertions(+), 6 deletions(-) create mode 100644 app/client/src/layoutSystems/anvil/common/hooks/useWidgetBorderStyles.ts diff --git a/app/client/packages/design-system/theming/src/theme/src/ThemeProvider.tsx b/app/client/packages/design-system/theming/src/theme/src/ThemeProvider.tsx index eb798ea4b0..d7c01357af 100644 --- a/app/client/packages/design-system/theming/src/theme/src/ThemeProvider.tsx +++ b/app/client/packages/design-system/theming/src/theme/src/ThemeProvider.tsx @@ -30,8 +30,8 @@ const providerCss = ({ fontFamily, typography, ...theme }: Theme) => css` `; export const ThemeProvider = (props: ThemeProviderProps) => { - const { children, className, style, theme } = props; - + const { children, className, style = {}, theme } = props; + style.height = "100%"; return (
{ return { position: "relative", "&:hover": { zIndex: onHoverZIndex, }, + ...borderStyles, }; }, [onHoverZIndex]); diff --git a/app/client/src/layoutSystems/anvil/common/hooks/useWidgetBorderStyles.ts b/app/client/src/layoutSystems/anvil/common/hooks/useWidgetBorderStyles.ts new file mode 100644 index 0000000000..4272185937 --- /dev/null +++ b/app/client/src/layoutSystems/anvil/common/hooks/useWidgetBorderStyles.ts @@ -0,0 +1,45 @@ +import type { AppState } from "@appsmith/reducers"; +import { Colors } from "constants/Colors"; +import { useSelector } from "react-redux"; +import { previewModeSelector } from "selectors/editorSelectors"; +import { + isCurrentWidgetFocused, + isWidgetSelected, +} from "selectors/widgetSelectors"; + +export function useWidgetBorderStyles(widgetId: string) { + const isFocused = useSelector(isCurrentWidgetFocused(widgetId)); + const isSelected = useSelector(isWidgetSelected(widgetId)); + const isDragging = useSelector( + (state: AppState) => state.ui.widgetDragResize.isDragging, + ); + const isCanvasResizing: boolean = useSelector( + (state: AppState) => state.ui.widgetDragResize.isAutoCanvasResizing, + ); + + const isPreviewMode = useSelector(previewModeSelector); + if (isPreviewMode) { + return {}; + } + + let borderColor = "transparent"; + if (isFocused) { + borderColor = Colors.WATUSI; + } + if (isSelected) { + borderColor = "#F86A2B"; + } + + return { + border: `1px solid ${ + isDragging || isCanvasResizing ? "transparent" : borderColor + }`, + outline: `1px solid ${ + !isDragging && (isFocused || isSelected) ? Colors.GREY_1 : "transparent" + }`, + borderRadius: "4px 0px 4px 4px", + boxShadow: `0px 0px 0px 1px ${ + isDragging || isCanvasResizing ? "transparent" : borderColor + }`, + }; +} diff --git a/app/client/src/layoutSystems/common/draggable/DraggableComponent.tsx b/app/client/src/layoutSystems/common/draggable/DraggableComponent.tsx index 604b04b3c7..8572ecbb1f 100644 --- a/app/client/src/layoutSystems/common/draggable/DraggableComponent.tsx +++ b/app/client/src/layoutSystems/common/draggable/DraggableComponent.tsx @@ -16,6 +16,7 @@ import { useWidgetDragResize, } from "utils/hooks/dragResizeHooks"; import { getShouldAllowDrag } from "selectors/widgetDragSelectors"; +import { previewModeSelector } from "selectors/editorSelectors"; const DraggableWrapper = styled.div` display: block; @@ -86,6 +87,8 @@ function DraggableComponent(props: DraggableComponentProps) { state.ui.widgetDragResize?.dragDetails?.draggedOn === props.parentId, ); + const isPreviewMode = useSelector(previewModeSelector); + // True when any widget is dragging or resizing, including this one const isResizingOrDragging = !!isResizing || !!isDragging; const isCurrentWidgetDragging = isDragging && isSelected; @@ -99,6 +102,7 @@ function DraggableComponent(props: DraggableComponentProps) { !isResizingOrDragging && !isFocused && !props.resizeDisabled && + !isPreviewMode && focusWidget(props.widgetId); e.stopPropagation(); }; diff --git a/app/client/src/layoutSystems/common/mainContainerResizer/MainContainerResizer.tsx b/app/client/src/layoutSystems/common/mainContainerResizer/MainContainerResizer.tsx index e427be9620..239c661a02 100644 --- a/app/client/src/layoutSystems/common/mainContainerResizer/MainContainerResizer.tsx +++ b/app/client/src/layoutSystems/common/mainContainerResizer/MainContainerResizer.tsx @@ -36,7 +36,6 @@ const AutoLayoutCanvasResizer = styled.div` } &:hover, &:active { - width: 3px; transition: width 300ms ease; background: #ff9b4e; transition: background 300ms ease; diff --git a/app/client/src/sagas/AutoLayoutUpdateSagas.tsx b/app/client/src/sagas/AutoLayoutUpdateSagas.tsx index 32a20323cc..d04fe8c7b4 100644 --- a/app/client/src/sagas/AutoLayoutUpdateSagas.tsx +++ b/app/client/src/sagas/AutoLayoutUpdateSagas.tsx @@ -65,6 +65,17 @@ import type { AppState } from "@appsmith/reducers"; import { nestDSL, flattenDSL } from "@shared/dsl"; import { getLayoutSystemType } from "selectors/layoutSystemSelectors"; +// Saga check : if layout system is not anvil, then run the saga +// An alternative implementation would be to re-use shouldRunSaga, +// however we will still have to check for individula action types. +// This seems cleaner +function* preventForAnvil(saga: any, action: ReduxAction) { + const layoutSystemType: LayoutSystemTypes = yield select(getLayoutSystemType); + if (layoutSystemType !== LayoutSystemTypes.ANVIL) { + yield call(shouldRunSaga, saga, action); + } +} + function* shouldRunSaga(saga: any, action: ReduxAction) { const isAutoLayout: boolean = yield select(getIsAutoLayout); if (isAutoLayout) { @@ -492,19 +503,23 @@ export default function* layoutUpdateSagas() { yield all([ takeLatest( ReduxActionTypes.RECALCULATE_COLUMNS, + preventForAnvil, updateLayoutForMobileCheckpoint, ), takeLatest( ReduxActionTypes.UPDATE_LAYOUT_SYSTEM_TYPE, + preventForAnvil, updateLayoutSystemTypeSaga, ), takeLatest( ReduxActionTypes.UPDATE_WIDGET_DIMENSIONS, + preventForAnvil, updateWidgetDimensionsSaga, ), debounce( 50, ReduxActionTypes.PROCESS_AUTO_LAYOUT_DIMENSION_UPDATES, + preventForAnvil, processAutoLayoutDimensionUpdatesSaga, ), takeLatest( diff --git a/app/client/src/sagas/autoHeightSagas/index.ts b/app/client/src/sagas/autoHeightSagas/index.ts index fc2a188a7b..92db85bdd5 100644 --- a/app/client/src/sagas/autoHeightSagas/index.ts +++ b/app/client/src/sagas/autoHeightSagas/index.ts @@ -15,11 +15,14 @@ import { import { dynamicallyUpdateContainersSaga } from "./containers"; import { generateTreeForAutoHeightComputations } from "./layoutTree"; import { updateWidgetAutoHeightSaga } from "./widgets"; -import { getIsAutoLayout } from "selectors/editorSelectors"; +import { LayoutSystemTypes } from "layoutSystems/types"; +import { getLayoutSystemType } from "selectors/layoutSystemSelectors"; +// Auto height actions must be computed only in FIXED layout +// We can avoid these types of checks once we change the architecture of layout specific sagas. function* shouldCallAutoHeight(saga: any, action: ReduxAction) { - const isAutoLayout: boolean = yield select(getIsAutoLayout); - if (!isAutoLayout) { + const layoutSystemType: LayoutSystemTypes = yield select(getLayoutSystemType); + if (layoutSystemType === LayoutSystemTypes.FIXED) { yield call(saga, action); } }