196642b84b
## Description Issues: 1. Excess padding on right side on MainContainer and other container-like widgets. 2. End highlight not visible in deeply nested containers. 3. Modal widget takes up space on MainContainer. Causes: 1.a. Border around the MainContainer has been removed. However, the border width was still being deducted from the total width. 1.b. For parentColumnSpace calculation, CONTAINER_GRID_PADDING (= 6px) was used. However, on AutoLayout canvases, containers only account for 5px in padding, resulting in excess space of 2px on the right side. 2.a. End position highlight has negative drop zones causing it to be excluded from selection calculations. 2.b. container scrollbars are causing the drag on the canvas to not get triggered. 3.a. This happens when the modal widget is dropped in an existing flex layer. Check for `detachFromLayout` prop and move the widget to the bottom of flexLayers. Fixes # (issue) 1. https://github.com/appsmithorg/appsmith/issues/20705 2. https://github.com/appsmithorg/appsmith/issues/21311 3. https://github.com/appsmithorg/appsmith/issues/22423 4. https://github.com/appsmithorg/appsmith/issues/20111 5. https://github.com/appsmithorg/appsmith/issues/22655 Media https://user-images.githubusercontent.com/5424788/232890004-2f66b697-e84c-4625-966d-894cc63f70b7.mov ## Type of change - Bug fix (non-breaking change which fixes an issue) ## How Has This Been Tested? - Manual ## Checklist: ### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] 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
471 lines
14 KiB
TypeScript
471 lines
14 KiB
TypeScript
import { FLEXBOX_PADDING, RenderModes } from "constants/WidgetConstants";
|
|
import {
|
|
FlexLayerAlignment,
|
|
ResponsiveBehavior,
|
|
ROW_GAP,
|
|
} from "utils/autoLayout/constants";
|
|
import type { HighlightInfo } from "./autoLayoutTypes";
|
|
import { getWidgetHeight } from "./flexWidgetUtils";
|
|
import type { VerticalHighlightsPayload } from "./highlightUtils";
|
|
import {
|
|
deriveHighlightsFromLayers,
|
|
generateHighlightsForAlignment,
|
|
generateVerticalHighlights,
|
|
} from "./highlightUtils";
|
|
|
|
describe("test HighlightUtils methods", () => {
|
|
describe("test deriveHighlightsFromLayers method", () => {
|
|
it("should generate horizontal highlights for empty canvas", () => {
|
|
const widgets = {
|
|
"1": {
|
|
widgetId: "1",
|
|
leftColumn: 0,
|
|
rightColumn: 64,
|
|
alignment: FlexLayerAlignment.Start,
|
|
topRow: 0,
|
|
bottomRow: 70,
|
|
type: "CANVAS_WIDGET",
|
|
widgetName: "Canvas1",
|
|
renderMode: RenderModes.CANVAS,
|
|
version: 1,
|
|
parentColumnSpace: 1,
|
|
parentRowSpace: 1,
|
|
isLoading: false,
|
|
mobileTopRow: 0,
|
|
mobileBottomRow: 70,
|
|
mobileLeftColumn: 0,
|
|
mobileRightColumn: 640,
|
|
responsiveBehavior: ResponsiveBehavior.Fill,
|
|
parentId: "",
|
|
flexLayers: [],
|
|
children: [],
|
|
},
|
|
};
|
|
const highlights: HighlightInfo[] = deriveHighlightsFromLayers(
|
|
widgets,
|
|
"1",
|
|
9.875,
|
|
);
|
|
expect(highlights.length).toEqual(3);
|
|
expect(highlights[0].isVertical).toBeFalsy;
|
|
// width of each horizontal highlight = container width / 3 - padding.
|
|
expect(Math.round(highlights[0].width)).toEqual(211);
|
|
expect(highlights[0].height).toEqual(4);
|
|
// x position of each horizontal highlight = (container width / 3) * index + padding.
|
|
expect(Math.round(highlights[1].posX)).toEqual(215);
|
|
expect(Math.round(highlights[2].posX)).toEqual(425);
|
|
});
|
|
it("should add horizontal heights before every layer and below the last layer", () => {
|
|
const widgets = {
|
|
"1": {
|
|
widgetId: "1",
|
|
leftColumn: 0,
|
|
rightColumn: 64,
|
|
alignment: FlexLayerAlignment.Start,
|
|
topRow: 0,
|
|
bottomRow: 70,
|
|
type: "CANVAS_WIDGET",
|
|
widgetName: "Canvas1",
|
|
renderMode: RenderModes.CANVAS,
|
|
version: 1,
|
|
parentColumnSpace: 1,
|
|
parentRowSpace: 1,
|
|
isLoading: false,
|
|
mobileTopRow: 0,
|
|
mobileBottomRow: 70,
|
|
mobileLeftColumn: 0,
|
|
mobileRightColumn: 640,
|
|
responsiveBehavior: ResponsiveBehavior.Fill,
|
|
parentId: "",
|
|
flexLayers: [
|
|
{ children: [{ id: "2", align: FlexLayerAlignment.Start }] },
|
|
],
|
|
children: ["2"],
|
|
},
|
|
"2": {
|
|
widgetId: "2",
|
|
leftColumn: 0,
|
|
rightColumn: 16,
|
|
alignment: FlexLayerAlignment.Start,
|
|
topRow: 0,
|
|
bottomRow: 4,
|
|
type: "BUTTON_WIDGET",
|
|
widgetName: "Button1",
|
|
renderMode: RenderModes.CANVAS,
|
|
version: 1,
|
|
parentColumnSpace: 1.546875,
|
|
parentRowSpace: 10,
|
|
isLoading: false,
|
|
mobileTopRow: 0,
|
|
mobileBottomRow: 4,
|
|
mobileLeftColumn: 0,
|
|
mobileRightColumn: 16,
|
|
responsiveBehavior: ResponsiveBehavior.Hug,
|
|
parentId: "1",
|
|
},
|
|
};
|
|
const offsetTop = ROW_GAP;
|
|
const highlights: HighlightInfo[] = deriveHighlightsFromLayers(
|
|
widgets,
|
|
"1",
|
|
10,
|
|
);
|
|
expect(highlights.length).toEqual(10);
|
|
expect(
|
|
highlights[0].isVertical ||
|
|
highlights[1].isVertical ||
|
|
highlights[2].isVertical,
|
|
).toBeFalsy;
|
|
expect(
|
|
highlights[7].isVertical ||
|
|
highlights[8].isVertical ||
|
|
highlights[9].isVertical,
|
|
).toBeFalsy;
|
|
|
|
expect(highlights[0].posY).toEqual(FLEXBOX_PADDING);
|
|
expect(highlights[7].posY).toEqual(
|
|
highlights[0].posY +
|
|
(widgets["2"].bottomRow - widgets["2"].topRow) *
|
|
widgets["2"].parentRowSpace +
|
|
ROW_GAP -
|
|
offsetTop,
|
|
);
|
|
|
|
expect(highlights[0].layerIndex).toEqual(0);
|
|
expect(highlights[0].isNewLayer).toBeTruthy;
|
|
expect(highlights[7].layerIndex).toEqual(1);
|
|
expect(highlights[7].isNewLayer).toBeTruthy;
|
|
});
|
|
});
|
|
|
|
describe("test generateHighlightsForAlignment method", () => {
|
|
it("should add vertical highlights before every widget in the alignment, and at the end of the last widget", () => {
|
|
const children = [
|
|
{
|
|
widgetId: "2",
|
|
leftColumn: 0,
|
|
rightColumn: 16,
|
|
alignment: FlexLayerAlignment.Start,
|
|
topRow: 0,
|
|
bottomRow: 4,
|
|
type: "BUTTON_WIDGET",
|
|
widgetName: "Button1",
|
|
renderMode: RenderModes.CANVAS,
|
|
version: 1,
|
|
parentColumnSpace: 10,
|
|
parentRowSpace: 10,
|
|
isLoading: false,
|
|
mobileTopRow: 0,
|
|
mobileBottomRow: 4,
|
|
mobileLeftColumn: 0,
|
|
mobileRightColumn: 16,
|
|
responsiveBehavior: ResponsiveBehavior.Hug,
|
|
parentId: "1",
|
|
},
|
|
];
|
|
const result: HighlightInfo[] = generateHighlightsForAlignment({
|
|
arr: children,
|
|
childCount: 0,
|
|
layerIndex: 0,
|
|
alignment: FlexLayerAlignment.Start,
|
|
maxHeight: 40,
|
|
offsetTop: 4,
|
|
parentColumnSpace: 10,
|
|
avoidInitialHighlight: false,
|
|
isMobile: false,
|
|
startPosition: 0,
|
|
canvasId: "1",
|
|
});
|
|
expect(result.length).toEqual(2);
|
|
expect(result[0].posX).toEqual(2);
|
|
expect(result[0].posY).toEqual(4);
|
|
expect(result[0].width).toEqual(4);
|
|
expect(result[0].height).toEqual(
|
|
getWidgetHeight(children[0], false) * children[0].parentRowSpace,
|
|
);
|
|
|
|
expect(result[1].posX).toEqual(
|
|
children[0].rightColumn * children[0].parentColumnSpace +
|
|
FLEXBOX_PADDING / 2,
|
|
);
|
|
expect(result[1].isNewLayer).toBeFalsy;
|
|
expect(result[1].isVertical).toBeTruthy;
|
|
expect(result[1].layerIndex).toEqual(0);
|
|
});
|
|
it("should create vertical highlights as tall as the tallest child in the row", () => {
|
|
const children = [
|
|
{
|
|
widgetId: "2",
|
|
leftColumn: 0,
|
|
rightColumn: 16,
|
|
alignment: FlexLayerAlignment.Start,
|
|
topRow: 0,
|
|
bottomRow: 4,
|
|
type: "BUTTON_WIDGET",
|
|
widgetName: "Button1",
|
|
renderMode: RenderModes.CANVAS,
|
|
version: 1,
|
|
parentColumnSpace: 10,
|
|
parentRowSpace: 10,
|
|
isLoading: false,
|
|
mobileTopRow: 0,
|
|
mobileBottomRow: 4,
|
|
mobileLeftColumn: 0,
|
|
mobileRightColumn: 16,
|
|
responsiveBehavior: ResponsiveBehavior.Hug,
|
|
parentId: "1",
|
|
},
|
|
{
|
|
widgetId: "3",
|
|
leftColumn: 0,
|
|
rightColumn: 16,
|
|
alignment: FlexLayerAlignment.Start,
|
|
topRow: 0,
|
|
bottomRow: 6,
|
|
type: "BUTTON_WIDGET",
|
|
widgetName: "Button2",
|
|
renderMode: RenderModes.CANVAS,
|
|
version: 1,
|
|
parentColumnSpace: 10,
|
|
parentRowSpace: 10,
|
|
isLoading: false,
|
|
mobileTopRow: 0,
|
|
mobileBottomRow: 6,
|
|
mobileLeftColumn: 0,
|
|
mobileRightColumn: 16,
|
|
responsiveBehavior: ResponsiveBehavior.Hug,
|
|
parentId: "1",
|
|
},
|
|
];
|
|
const result: HighlightInfo[] = generateHighlightsForAlignment({
|
|
arr: children,
|
|
childCount: 0,
|
|
layerIndex: 0,
|
|
alignment: FlexLayerAlignment.Start,
|
|
maxHeight:
|
|
getWidgetHeight(children[1], false) * children[1].parentRowSpace,
|
|
offsetTop: 4,
|
|
parentColumnSpace: 10,
|
|
|
|
avoidInitialHighlight: false,
|
|
isMobile: false,
|
|
startPosition: 0,
|
|
canvasId: "1",
|
|
});
|
|
expect(result.length).toEqual(3);
|
|
expect(result[0].height).toEqual(
|
|
getWidgetHeight(children[1], false) * children[1].parentRowSpace,
|
|
);
|
|
});
|
|
it("should not render initial highlight is avoidInitialHighlight is true", () => {
|
|
const result: HighlightInfo[] = generateHighlightsForAlignment({
|
|
arr: [],
|
|
childCount: 0,
|
|
layerIndex: 0,
|
|
alignment: FlexLayerAlignment.Start,
|
|
maxHeight: 40,
|
|
offsetTop: 4,
|
|
parentColumnSpace: 10,
|
|
|
|
avoidInitialHighlight: true,
|
|
isMobile: false,
|
|
startPosition: 0,
|
|
canvasId: "1",
|
|
});
|
|
expect(result.length).toEqual(0);
|
|
});
|
|
});
|
|
|
|
describe("test generateVerticalHighlights method", () => {
|
|
it("should not render initial highlight for an empty center alignment if one of the other alignments are encroaching its space", () => {
|
|
const widgets = {
|
|
"1": {
|
|
widgetId: "1",
|
|
leftColumn: 0,
|
|
rightColumn: 64,
|
|
alignment: FlexLayerAlignment.Start,
|
|
topRow: 0,
|
|
bottomRow: 70,
|
|
type: "CANVAS_WIDGET",
|
|
widgetName: "Canvas1",
|
|
renderMode: RenderModes.CANVAS,
|
|
version: 1,
|
|
parentColumnSpace: 1,
|
|
parentRowSpace: 1,
|
|
isLoading: false,
|
|
mobileTopRow: 0,
|
|
mobileBottomRow: 70,
|
|
mobileLeftColumn: 0,
|
|
mobileRightColumn: 640,
|
|
responsiveBehavior: ResponsiveBehavior.Fill,
|
|
parentId: "",
|
|
flexLayers: [
|
|
{
|
|
children: [
|
|
{ id: "2", align: FlexLayerAlignment.Start },
|
|
{ id: "3", align: FlexLayerAlignment.Start },
|
|
],
|
|
},
|
|
],
|
|
children: ["2", "3"],
|
|
},
|
|
"2": {
|
|
widgetId: "2",
|
|
leftColumn: 0,
|
|
rightColumn: 16,
|
|
alignment: FlexLayerAlignment.Start,
|
|
topRow: 0,
|
|
bottomRow: 4,
|
|
type: "BUTTON_WIDGET",
|
|
widgetName: "Button1",
|
|
renderMode: RenderModes.CANVAS,
|
|
version: 1,
|
|
parentColumnSpace: 10,
|
|
parentRowSpace: 10,
|
|
isLoading: false,
|
|
mobileTopRow: 0,
|
|
mobileBottomRow: 4,
|
|
mobileLeftColumn: 0,
|
|
mobileRightColumn: 16,
|
|
responsiveBehavior: ResponsiveBehavior.Hug,
|
|
parentId: "1",
|
|
},
|
|
"3": {
|
|
widgetId: "3",
|
|
leftColumn: 16,
|
|
rightColumn: 26,
|
|
alignment: FlexLayerAlignment.Start,
|
|
topRow: 0,
|
|
bottomRow: 6,
|
|
type: "BUTTON_WIDGET",
|
|
widgetName: "Button2",
|
|
renderMode: RenderModes.CANVAS,
|
|
version: 1,
|
|
parentColumnSpace: 10,
|
|
parentRowSpace: 10,
|
|
isLoading: false,
|
|
mobileTopRow: 0,
|
|
mobileBottomRow: 6,
|
|
mobileLeftColumn: 16,
|
|
mobileRightColumn: 26,
|
|
responsiveBehavior: ResponsiveBehavior.Hug,
|
|
parentId: "1",
|
|
},
|
|
};
|
|
const result: VerticalHighlightsPayload = generateVerticalHighlights({
|
|
widgets,
|
|
layer: widgets["1"].flexLayers[0],
|
|
childCount: 0,
|
|
layerIndex: 0,
|
|
offsetTop: 4,
|
|
|
|
canvasId: "1",
|
|
columnSpace: 10,
|
|
draggedWidgets: [],
|
|
isMobile: false,
|
|
});
|
|
expect(result.highlights.length).toEqual(4);
|
|
expect(result.childCount).toEqual(2);
|
|
});
|
|
it("should not render highlights for flex wrapped alignments that span multiple rows", () => {
|
|
const widgets = {
|
|
"1": {
|
|
widgetId: "1",
|
|
leftColumn: 0,
|
|
rightColumn: 64,
|
|
alignment: FlexLayerAlignment.Start,
|
|
topRow: 0,
|
|
bottomRow: 70,
|
|
type: "CANVAS_WIDGET",
|
|
widgetName: "Canvas1",
|
|
renderMode: RenderModes.CANVAS,
|
|
version: 1,
|
|
parentColumnSpace: 1,
|
|
parentRowSpace: 1,
|
|
isLoading: false,
|
|
mobileTopRow: 0,
|
|
mobileBottomRow: 70,
|
|
mobileLeftColumn: 0,
|
|
mobileRightColumn: 640,
|
|
responsiveBehavior: ResponsiveBehavior.Fill,
|
|
parentId: "",
|
|
flexLayers: [
|
|
{
|
|
children: [
|
|
{ id: "2", align: FlexLayerAlignment.Start },
|
|
{ id: "3", align: FlexLayerAlignment.Start },
|
|
],
|
|
},
|
|
],
|
|
children: ["2", "3"],
|
|
},
|
|
"2": {
|
|
widgetId: "2",
|
|
leftColumn: 0,
|
|
rightColumn: 16,
|
|
alignment: FlexLayerAlignment.Start,
|
|
topRow: 0,
|
|
bottomRow: 4,
|
|
type: "BUTTON_WIDGET",
|
|
widgetName: "Button1",
|
|
renderMode: RenderModes.CANVAS,
|
|
version: 1,
|
|
parentColumnSpace: 10,
|
|
parentRowSpace: 10,
|
|
isLoading: false,
|
|
mobileTopRow: 0,
|
|
mobileBottomRow: 4,
|
|
mobileLeftColumn: 0,
|
|
mobileRightColumn: 16,
|
|
responsiveBehavior: ResponsiveBehavior.Hug,
|
|
parentId: "1",
|
|
},
|
|
"3": {
|
|
widgetId: "3",
|
|
leftColumn: 16,
|
|
rightColumn: 64,
|
|
alignment: FlexLayerAlignment.Start,
|
|
topRow: 0,
|
|
bottomRow: 6,
|
|
type: "INPUT_WIDGET",
|
|
widgetName: "Button2",
|
|
renderMode: RenderModes.CANVAS,
|
|
version: 1,
|
|
parentColumnSpace: 10,
|
|
parentRowSpace: 10,
|
|
isLoading: false,
|
|
mobileTopRow: 4,
|
|
mobileBottomRow: 10,
|
|
mobileLeftColumn: 0,
|
|
mobileRightColumn: 64,
|
|
responsiveBehavior: ResponsiveBehavior.Fill,
|
|
parentId: "1",
|
|
},
|
|
};
|
|
const result: VerticalHighlightsPayload = generateVerticalHighlights({
|
|
widgets,
|
|
layer: widgets["1"].flexLayers[0],
|
|
childCount: 0,
|
|
layerIndex: 0,
|
|
offsetTop: 4,
|
|
canvasId: "1",
|
|
columnSpace: 9.875,
|
|
draggedWidgets: [],
|
|
isMobile: true,
|
|
});
|
|
expect(result.highlights.length).toEqual(3);
|
|
expect(result.highlights[1].posY).toEqual(
|
|
widgets["3"].mobileTopRow * widgets["3"].parentRowSpace +
|
|
FLEXBOX_PADDING,
|
|
);
|
|
expect(result.highlights[1].height).toEqual(60);
|
|
expect(result.highlights[2].posX).toEqual(634);
|
|
expect(result.highlights[2].posY).toEqual(
|
|
widgets["3"].mobileTopRow * widgets["3"].parentRowSpace +
|
|
FLEXBOX_PADDING,
|
|
);
|
|
expect(result.childCount).toEqual(2);
|
|
});
|
|
});
|
|
});
|