From dcabb56503da75aeffbe4298992a5ae8e4f5b414 Mon Sep 17 00:00:00 2001 From: Ashok Kumar M <35134347+marks0351@users.noreply.github.com> Date: Mon, 29 Jan 2024 19:23:15 +0530 Subject: [PATCH] fix: Anvil editor zone stretch fix in mobile mode (#30592) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit > Pull Request Template > > Use this template to quickly create a well written pull request. Delete all quotes before creating the pull request. > ## Description In this PR, we are making sure zones don't stretch to fill sections in low resolution screens exclusively on the Appsmith Anvil Editor. #### PR fixes following issue(s) Fixes # (issue number) > if no issue exists, please create an issue and ask the maintainers about this first > > #### Media > A video or a GIF is preferred. when using Loom, don’t embed because it looks like it’s a GIF. instead, just link to the video > > #### Type of change > Please delete options that are not relevant. - Bug fix (non-breaking change which fixes an issue) - New feature (non-breaking change which adds functionality) - Breaking change (fix or feature that would cause existing functionality to not work as expected) - Chore (housekeeping or task changes that don't impact user perception) - This change requires a documentation update > > > ## Testing > #### How Has This Been Tested? > Please describe the tests that you ran to verify your changes. Also list any relevant details for your test configuration. > Delete anything that is not relevant - [ ] Manual - [ ] JUnit - [ ] Jest - [ ] Cypress > > #### Test Plan > Add Testsmith test cases links that relate to this PR > > #### Issues raised during DP testing > Link issues raised during DP testing for better visiblity and tracking (copy link from comments dropped on this PR) > > > ## Checklist: #### Dev activity - [ ] My code follows the style guidelines of this project - [ ] I have performed a self-review of my own code - [ ] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [ ] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag #### QA activity: - [ ] [Speedbreak features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-) have been covered - [ ] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-) - [ ] Test plan has been peer reviewed by project stakeholders and other QA members - [ ] Manually tested functionality on DP - [ ] We had an implementation alignment call with stakeholders post QA Round 2 - [ ] Cypress test cases have been added and approved by SDET/manual QA - [ ] Added `Test Plan Approved` label after Cypress tests were reviewed - [ ] Added `Test Plan Approved` label after JUnit tests were reviewed ## Summary by CodeRabbit - **New Features** - Enhanced the canvas interaction experience in the Anvil layout system for better usability. - **Bug Fixes** - Fixed an issue with incorrect `minWidth` settings for widgets, improving responsiveness and layout accuracy on mobile devices. --- .../anvil/canvas/AnvilMainCanvas.tsx | 12 ++++++--- .../hooks/mainCanvas/useCanvasActivation.ts | 27 +++++++++++-------- .../ZoneWidget/widget/config/anvilConfig.ts | 14 +++++----- 3 files changed, 31 insertions(+), 22 deletions(-) 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", + }, }; }, };