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