From 32e266222d09d0c4c180299f26709907944ef972 Mon Sep 17 00:00:00 2001 From: Valera Melnikov Date: Tue, 2 Jul 2024 13:33:27 +0300 Subject: [PATCH] fix: anvil canvas highlight (#34553) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description Chang Anvil highlight behaviour: - Chang the behaviour for an empty canvas - Fix the behaviour inside the zone https://github.com/appsmithorg/appsmith/assets/11555074/9f4697ec-b84a-4d3c-a568-42cf2006528f Fixes #33443 ## Automation /ok-to-test tags="@tag.Anvil" ### :mag: Cypress test results > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: > Commit: 40f63c19a687e532f5698ceaabba69a281d5c2c8 > Cypress dashboard. > Tags: `@tag.Anvil` ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No ## Summary by CodeRabbit - **New Features** - Improved padding and dimension calculations for better highlight accuracy in the canvas editor. - **Bug Fixes** - Adjusted highlight width calculations for empty canvases. - Corrected compensators for widget alignment to ensure precise positioning. - **Tests** - Updated test cases to reflect changes in highlight width calculations and widget dragging behavior. - **Refactor** - Renamed variables and adjusted identifiers for clarity and consistency in highlight tests. --- .../editor/canvasArenas/AnvilDnDHighlight.tsx | 13 +-- .../canvasArenas/utils/dndCompensatorUtils.ts | 4 +- .../alignedColumnHighlights.test.ts | 4 +- .../highlights/alignedRowHighlights.ts | 6 ++ .../highlights/columnHighlights.test.ts | 87 ++++++++++++++++--- .../highlights/horizontalHighlights.ts | 3 +- 6 files changed, 94 insertions(+), 23 deletions(-) diff --git a/app/client/src/layoutSystems/anvil/editor/canvasArenas/AnvilDnDHighlight.tsx b/app/client/src/layoutSystems/anvil/editor/canvasArenas/AnvilDnDHighlight.tsx index ed5945e5af..7c9296b1e9 100644 --- a/app/client/src/layoutSystems/anvil/editor/canvasArenas/AnvilDnDHighlight.tsx +++ b/app/client/src/layoutSystems/anvil/editor/canvasArenas/AnvilDnDHighlight.tsx @@ -39,19 +39,22 @@ export const AnvilDnDHighlight = ({ }; } // Calculate padding based on highlight orientation - const horizontalPadding = highlightShown.isVertical - ? 0 - : PADDING_FOR_HORIZONTAL_HIGHLIGHT; const verticalPadding = highlightShown.isVertical ? PADDING_FOR_HORIZONTAL_HIGHLIGHT : 0; + // Reduce highlight width for empty canvas by compensator values. + const width = + highlightShown.canvasId === "0" + ? highlightShown.width + compensatorValues.left * 2 + : highlightShown.width; + // Calculate dimension styles based on highlight info return { height: highlightShown.height - verticalPadding * 2, - left: highlightShown.posX + horizontalPadding - compensatorValues.left, + left: highlightShown.posX - compensatorValues.left, top: highlightShown.posY + verticalPadding - compensatorValues.top, - width: highlightShown.width - horizontalPadding * 2, + width: width, }; }, [highlightShown]); diff --git a/app/client/src/layoutSystems/anvil/editor/canvasArenas/utils/dndCompensatorUtils.ts b/app/client/src/layoutSystems/anvil/editor/canvasArenas/utils/dndCompensatorUtils.ts index 69cf25f797..8ecc75611c 100644 --- a/app/client/src/layoutSystems/anvil/editor/canvasArenas/utils/dndCompensatorUtils.ts +++ b/app/client/src/layoutSystems/anvil/editor/canvasArenas/utils/dndCompensatorUtils.ts @@ -67,7 +67,7 @@ const getMainCanvasCompensators = ( mainCanvasSpacing: number, ) => { const widgetCompensatorValues = { - left: 0, + left: -mainCanvasSpacing, top: 0, }; const edgeCompensatorValues = { @@ -149,7 +149,7 @@ const getZoneCompensators = ( }; const edgeCompensatorValues = isElevatedWidget ? { - left: zoneSpacing, + left: 0, top: zoneSpacing, } : { diff --git a/app/client/src/layoutSystems/anvil/utils/layouts/highlights/alignedColumnHighlights.test.ts b/app/client/src/layoutSystems/anvil/utils/layouts/highlights/alignedColumnHighlights.test.ts index 7b88939224..a868b09c40 100644 --- a/app/client/src/layoutSystems/anvil/utils/layouts/highlights/alignedColumnHighlights.test.ts +++ b/app/client/src/layoutSystems/anvil/utils/layouts/highlights/alignedColumnHighlights.test.ts @@ -5,7 +5,6 @@ import { type WidgetLayoutProps, } from "../../anvilTypes"; import { deriveAlignedColumnHighlights } from "./alignedColumnHighlights"; -import { HIGHLIGHT_SIZE } from "layoutSystems/anvil/utils/constants"; import { ResponsiveBehavior } from "layoutSystems/common/utils/constants"; import type { LayoutElementPositions } from "layoutSystems/common/types"; import { registerLayoutComponents } from "../layoutUtils"; @@ -43,7 +42,8 @@ describe("AlignedColumnHighlights tests", () => { responsiveBehavior: ResponsiveBehavior.Hug, }, ]); - const highlightWidth: number = HIGHLIGHT_SIZE; + const highlightWidth: number = + positions[layout.layoutId].width / res.length; expect(res.length).toEqual(3); // Each highlight should be of equal width. expect(res[0].width).toEqual(highlightWidth); diff --git a/app/client/src/layoutSystems/anvil/utils/layouts/highlights/alignedRowHighlights.ts b/app/client/src/layoutSystems/anvil/utils/layouts/highlights/alignedRowHighlights.ts index 68ca5277a0..ba3ff80ed2 100644 --- a/app/client/src/layoutSystems/anvil/utils/layouts/highlights/alignedRowHighlights.ts +++ b/app/client/src/layoutSystems/anvil/utils/layouts/highlights/alignedRowHighlights.ts @@ -235,6 +235,12 @@ export function getHighlightsForWidgets( * then derive initial highlights for the alignment. */ if (!widgets.length) { + const isFillWidgetDragged = draggedWidgets.some( + (widget) => widget.responsiveBehavior === ResponsiveBehavior.Fill, + ); + + if (isFillWidgetDragged) return; + /** * If it is an empty Center alignment, * which is no longer in the center position due to the size of its siblings, diff --git a/app/client/src/layoutSystems/anvil/utils/layouts/highlights/columnHighlights.test.ts b/app/client/src/layoutSystems/anvil/utils/layouts/highlights/columnHighlights.test.ts index 9f2f740396..4752ee648c 100644 --- a/app/client/src/layoutSystems/anvil/utils/layouts/highlights/columnHighlights.test.ts +++ b/app/client/src/layoutSystems/anvil/utils/layouts/highlights/columnHighlights.test.ts @@ -18,13 +18,20 @@ import { deriveColumnHighlights } from "./columnHighlights"; import type { LayoutElementPositions } from "layoutSystems/common/types"; describe("columnHighlights", () => { - const draggedWidgets: DraggedWidget[] = [ + const draggedHugWidget: DraggedWidget[] = [ { widgetId: "1", type: "BUTTON_WIDGET", responsiveBehavior: ResponsiveBehavior.Hug, }, ]; + const draggedFillWidget: DraggedWidget[] = [ + { + widgetId: "2", + type: "INPUT_WIDGET", + responsiveBehavior: ResponsiveBehavior.Fill, + }, + ]; beforeAll(() => { registerLayoutComponents(); }); @@ -63,10 +70,10 @@ describe("columnHighlights", () => { }; const { highlights: res } = deriveColumnHighlights( layout, - "0", + "111", [], layout.layoutId, - )(positions, draggedWidgets); + )(positions, draggedHugWidget); expect(res.length).toEqual(3); // highlights should be horizontal. expect(res[0].width).toBeGreaterThan(res[0].height); @@ -120,11 +127,11 @@ describe("columnHighlights", () => { }; const { highlights: res } = deriveColumnHighlights( layout, - "0", + "111", [], layout.layoutId, )(positions, [ - ...draggedWidgets, + ...draggedHugWidget, { widgetId: buttonId, type: "BUTTON_WIDGET", @@ -145,7 +152,7 @@ describe("columnHighlights", () => { }); }); describe("initial highlights", () => { - it("should return a highlight with the correct dimensions", () => { + it("should return a correct highlight for empty canvas for hug widget", () => { const layout: LayoutComponentProps = generateLayoutComponentMock({ isDropTarget: true, layoutType: LayoutComponentTypes.WIDGET_COLUMN, @@ -166,7 +173,61 @@ describe("columnHighlights", () => { "0", [], layout.layoutId, - )(positions, draggedWidgets); + )(positions, draggedHugWidget); + + expect(res[0].height).toEqual(HIGHLIGHT_SIZE); + expect(res[0].alignment).toEqual(FlexLayerAlignment.Start); + expect(res[0].posY).toEqual(0); + }); + it("should return a correct highlight for empty canvas for fill widget", () => { + const layout: LayoutComponentProps = generateLayoutComponentMock({ + isDropTarget: true, + layoutType: LayoutComponentTypes.WIDGET_COLUMN, + layout: [], + }).layout as LayoutComponentProps; + const positions: LayoutElementPositions = { + [layout.layoutId]: { + height: 400, + left: 0, + top: 0, + width: 300, + offsetLeft: 0, + offsetTop: 0, + }, + }; + const { highlights: res } = deriveColumnHighlights( + layout, + "0", + [], + layout.layoutId, + )(positions, draggedFillWidget); + + expect(res[0].height).toEqual(HIGHLIGHT_SIZE); + expect(res[0].width).toEqual(positions[layout.layoutId].width); + expect(res[0].posY).toEqual(0); + }); + it("should return a highlight with the correct dimensions", () => { + const layout: LayoutComponentProps = generateLayoutComponentMock({ + isDropTarget: true, + layoutType: LayoutComponentTypes.WIDGET_COLUMN, + layout: [], + }).layout as LayoutComponentProps; + const positions: LayoutElementPositions = { + [layout.layoutId]: { + height: 400, + left: 0, + top: 0, + width: 300, + offsetLeft: 0, + offsetTop: 0, + }, + }; + const { highlights: res } = deriveColumnHighlights( + layout, + "111", + [], + layout.layoutId, + )(positions, draggedHugWidget); expect(res[0].height).toEqual(DEFAULT_VERTICAL_HIGHLIGHT_HEIGHT); expect(res[0].alignment).toEqual(FlexLayerAlignment.Start); @@ -193,10 +254,10 @@ describe("columnHighlights", () => { }; const { highlights: res } = deriveColumnHighlights( layout, - "0", + "111", [], layout.layoutId, - )(positions, draggedWidgets); + )(positions, draggedHugWidget); expect(res).toBeDefined(); expect(res[0].height).toEqual(DEFAULT_VERTICAL_HIGHLIGHT_HEIGHT); expect(res[0].posY).toEqual(0); @@ -222,10 +283,10 @@ describe("columnHighlights", () => { }; const { highlights: res } = deriveColumnHighlights( layout, - "0", + "111", [], layout.layoutId, - )(positions, draggedWidgets); + )(positions, draggedHugWidget); expect(res[0].width).toEqual(HIGHLIGHT_SIZE); expect(res[0].posY).toEqual(0); @@ -324,10 +385,10 @@ describe("columnHighlights", () => { */ const { highlights: res } = deriveColumnHighlights( column, - "0", + "111", [], column.layoutId, - )(dimensions, draggedWidgets); + )(dimensions, draggedHugWidget); /** * # of highlights: diff --git a/app/client/src/layoutSystems/anvil/utils/layouts/highlights/horizontalHighlights.ts b/app/client/src/layoutSystems/anvil/utils/layouts/highlights/horizontalHighlights.ts index 98664018b4..54587c0286 100644 --- a/app/client/src/layoutSystems/anvil/utils/layouts/highlights/horizontalHighlights.ts +++ b/app/client/src/layoutSystems/anvil/utils/layouts/highlights/horizontalHighlights.ts @@ -473,7 +473,8 @@ export function generateHighlights( left: width * index === 0, right: width * (index + 1) === layoutDimension.width, }, - ...(isCurrentLayoutEmpty && !hasFillWidget + // For consistency, the root highlight should be horizontal and use the usual settings + ...(baseHighlight.canvasId !== "0" && isCurrentLayoutEmpty && !hasFillWidget ? { isVertical: true, height: isInitialHighlight