From 8b8604267d25b2b3c3cc5e72becbbcdfab74b3a5 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Thu, 23 Nov 2023 13:37:10 +0000
Subject: [PATCH] refactor

---
 .../_components/ScreenList/index.svelte       |  1 +
 .../_components/ScreenList/resizable.js       | 31 ++++++++++++-------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/index.svelte
index 5fb48aec7d..2e235754f2 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/index.svelte
@@ -119,6 +119,7 @@
   </div>
 
   <div
+    role="separator"
     disabled={searching}
     class="divider"
     class:disabled={searching}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/resizable.js b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/resizable.js
index 2c98c87977..e74b72c6e5 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/resizable.js
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/resizable.js
@@ -1,12 +1,11 @@
-
-export const getVerticalResizeActions = (initialValue, setValue = () => {}) => {
+const getResizeActions = (cssProperty, mouseMoveEventProperty, elementProperty, initialValue, setValue = () => {}) => {
   let element = null;
 
   const elementAction = (node) => {
     element = node;
 
     if (initialValue != null) {
-      element.style.height = `${initialValue}px`
+      element.style[cssProperty] = `${initialValue}px`
     }
 
     return {
@@ -17,19 +16,19 @@ export const getVerticalResizeActions = (initialValue, setValue = () => {}) => {
   }
 
   const dragHandleAction = (node) => {
-    let startHeight = null;
+    let startProperty = null;
     let startPosition = null;
 
     const handleMouseMove = (e) => {
-      const change = e.pageY - startPosition;
-      element.style.height = `${startHeight + change}px`
+      const change = e[mouseMoveEventProperty] - startPosition;
+      element.style[cssProperty] = `${startProperty + change}px`
     }
 
     const handleMouseUp = () => {
       window.removeEventListener("mousemove", handleMouseMove);
       window.removeEventListener("mouseup", handleMouseUp);
       element.style.removeProperty('transition'); // remove temporary transition override
-      setValue(element.clientHeight);
+      setValue(element[elementProperty]);
     }
 
     const handleMouseDown = (e) => {
@@ -47,16 +46,16 @@ export const getVerticalResizeActions = (initialValue, setValue = () => {}) => {
         return;
       }
 
-      element.style.transition = "height 0ms"; // temporarily override any height transitions
-      startHeight = element.clientHeight;
-      startPosition = e.pageY;
+      element.style.transition = `${cssProperty} 0ms`; // temporarily override any height transitions
+      startProperty = element[elementProperty];
+      startPosition = e[mouseMoveEventProperty];
 
       window.addEventListener("mousemove", handleMouseMove);
       window.addEventListener("mouseup", handleMouseUp);
     };
 
-    const handleDoubleClick = (e) => {
-      element.style.removeProperty("height");
+    const handleDoubleClick = () => {
+      element.style.removeProperty(cssProperty);
     }
 
     node.addEventListener("mousedown", handleMouseDown);
@@ -75,3 +74,11 @@ export const getVerticalResizeActions = (initialValue, setValue = () => {}) => {
     dragHandleAction
   ]
 };
+
+export const getVerticalResizeActions = (initialValue, setValue = () => {}) => {
+  return getResizeActions("height", "pageY", 'clientHeight', initialValue, setValue);
+};
+
+export const getHorizontalResizeActions = (initialValue, setValue = () => {}) => {
+  return getResizeActions("width", "pageX", 'clientWidth', initialValue, setValue);
+};