fix: anvil canvas highlight (#34553)

## 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" ### 🔍 Cypress test results  > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/9758888261> > Commit: 40f63c19a687e532f5698ceaabba69a281d5c2c8 > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9758888261&attempt=1" target="_blank">Cypress dashboard</a>. > 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.
2024-07-02 13:33:27 +03:00 · 2024-07-02 13:33:27 +03:00 · 32e266222d
commit 32e266222d
parent 3075803b95
6 changed files with 94 additions and 23 deletions
--- 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]);

--- 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,
      }
    : {
--- 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);
--- 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,
--- 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:
--- 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