feat(VE-5170): customize add button position

Author: sairajchouhan

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,22 +20,34 @@ export default function getChildrenDirection(
         return "none";
     }
 
-    const [firstChildElement, secondChildElement, removeClone] =
-        getChildElements(parentElement, parentCslpValue);
+    const directionFromParentElement =
+        parentElement.getAttribute("data-add-direction");
+
+    const isValidParentDirection = validPositions.includes(
+        directionFromParentElement as ValidPositions
+    );
 
-    if (!firstChildElement) return "none";
 
-    // get horizontal and vertical position differences
-    const firstChildBounds = firstChildElement.getBoundingClientRect();
-    const secondChildBounds = secondChildElement.getBoundingClientRect();
+    if (directionFromParentElement && isValidParentDirection) {
+        return directionFromParentElement as ValidPositions;
+    } else {
+        const [firstChildElement, secondChildElement, removeClone] =
+            getChildElements(parentElement, parentCslpValue);
 
-    const deltaX = Math.abs(firstChildBounds.left - secondChildBounds.left);
-    const deltaY = Math.abs(firstChildBounds.top - secondChildBounds.top);
+        if (!firstChildElement) return "none";
 
-    const dir = deltaX > deltaY ? "horizontal" : "vertical";
+        // get horizontal and vertical position differences
+        const firstChildBounds = firstChildElement.getBoundingClientRect();
+        const secondChildBounds = secondChildElement.getBoundingClientRect();
 
-    // remove the clone that was created in case there was only one child
-    removeClone();
+        const deltaX = Math.abs(firstChildBounds.left - secondChildBounds.left);
+        const deltaY = Math.abs(firstChildBounds.top - secondChildBounds.top);
 
-    return dir;
+        const dir = deltaX > deltaY ? "horizontal" : "vertical";
+
+        // remove the clone that was created in case there was only one child
+        removeClone();
+
+        return dir;
+    }
 }