Merge pull request #349 from contentstack/VE-5170-plus-configuration

feat(VE-5170): add plus button configuration

Author: sairaj-cs

src/visualBuilder/utils/__test__/getChildrenDirection.test.ts

@@ -25,6 +25,7 @@ describe("getChildrenDirection", () => {
 
         (getChildElements as any).mockReturnValue([null, null, vi.fn()]);
 
+        expect(parentElement.getAttribute("data-add-direction")).toBe(null);
         const result = getChildrenDirection(editableElement, "test");
         expect(result).toBe("none");
     });
@@ -67,6 +68,7 @@ describe("getChildrenDirection", () => {
             toJSON: () => ({}),
         });
 
+        expect(parentElement.getAttribute("data-add-direction")).toBe(null);
         const result = getChildrenDirection(editableElement, "test");
         expect(result).toBe("horizontal");
     });
@@ -84,6 +86,7 @@ describe("getChildrenDirection", () => {
             secondChildElement,
             vi.fn(),
         ]);
+        
 
         vi.spyOn(firstChildElement, "getBoundingClientRect").mockReturnValue({
             left: 0,
@@ -109,7 +112,82 @@ describe("getChildrenDirection", () => {
             toJSON: () => ({}),
         });
 
+        expect(parentElement.getAttribute("data-add-direction")).toBe(null);
         const result = getChildrenDirection(editableElement, "test");
         expect(result).toBe("vertical");
     });
-});
+
+    it("should return direction from parent's data-add-direction if it exists with valid value", () => {
+        const editableElement = document.createElement("div");
+        const parentElement = document.createElement("div");
+
+        vi.spyOn(editableElement, "closest").mockReturnValue(parentElement);
+
+        // Test vertical direction
+        parentElement.setAttribute("data-add-direction", "vertical");
+        const resultVertical = getChildrenDirection(editableElement, "test");
+        expect(resultVertical).toBe("vertical");
+
+        // Test horizontal direction
+        parentElement.setAttribute("data-add-direction", "horizontal");
+        const resultHorizontal = getChildrenDirection(editableElement, "test");
+        expect(resultHorizontal).toBe("horizontal");
+    });
+
+    it("should calculate direction when parent's data-add-direction has invalid value", () => {
+        const editableElement = document.createElement("div");
+        const parentElement = document.createElement("div");
+        const firstChildElement = document.createElement("div");
+        const secondChildElement = document.createElement("div");
+
+        vi.spyOn(editableElement, "closest").mockReturnValue(parentElement);
+        parentElement.setAttribute("data-add-direction", "invalid");
+
+        (getChildElements as any).mockReturnValue([
+            firstChildElement,
+            secondChildElement,
+            vi.fn(),
+        ]);
+
+        vi.spyOn(firstChildElement, "getBoundingClientRect").mockReturnValue({
+            left: 0, top: 0, right: 0, bottom: 0, width: 0, height: 0, x: 0, y: 0,
+            toJSON: () => ({})
+        });
+        vi.spyOn(secondChildElement, "getBoundingClientRect").mockReturnValue({
+            left: 10, top: 0, right: 10, bottom: 0, width: 0, height: 0, x: 10, y: 0,
+            toJSON: () => ({})
+        });
+
+        const result = getChildrenDirection(editableElement, "test");
+        expect(result).toBe("horizontal");
+    });
+
+    it("should calculate direction when parent's data-add-direction is empty string", () => {
+        const editableElement = document.createElement("div");
+        const parentElement = document.createElement("div");
+        const firstChildElement = document.createElement("div");
+        const secondChildElement = document.createElement("div");
+
+        vi.spyOn(editableElement, "closest").mockReturnValue(parentElement);
+        parentElement.setAttribute("data-add-direction", "");
+
+        (getChildElements as any).mockReturnValue([
+            firstChildElement,
+            secondChildElement,
+            vi.fn(),
+        ]);
+
+        vi.spyOn(firstChildElement, "getBoundingClientRect").mockReturnValue({
+            left: 0, top: 0, right: 0, bottom: 0, width: 0, height: 0, x: 0, y: 0,
+            toJSON: () => ({})
+        });
+        vi.spyOn(secondChildElement, "getBoundingClientRect").mockReturnValue({
+            left: 0, top: 10, right: 0, bottom: 10, width: 0, height: 0, x: 0, y: 10,
+            toJSON: () => ({})
+        });
+
+        const result = getChildrenDirection(editableElement, "test");
+        expect(result).toBe("vertical");
+    });
+
+});

src/visualBuilder/utils/getChildrenDirection.ts

@@ -1,9 +1,13 @@
 import getChildElements from "./getChildElements";
 
+
+const validPositions = ["vertical", "horizontal", "none"] as const;
+type ValidPositions = typeof validPositions[number];
+
 export default function getChildrenDirection(
     editableElement: Element,
     parentCslpValue: string
-): "none" | "horizontal" | "vertical" {
+): ValidPositions {
     if (!editableElement) {
         return "none";
     }
@@ -16,6 +20,17 @@ export default function getChildrenDirection(
         return "none";
     }
 
+    const directionFromParentElement =
+        parentElement.getAttribute("data-add-direction");
+
+    const isValidParentDirection = validPositions.includes(
+        directionFromParentElement as ValidPositions
+    );
+
+
+    if (directionFromParentElement && isValidParentDirection) {
+        return directionFromParentElement as ValidPositions;
+    }
     const [firstChildElement, secondChildElement, removeClone] =
         getChildElements(parentElement, parentCslpValue);