From 85657c4363d2065691de7f84d3bacc2c0f228cc2 Mon Sep 17 00:00:00 2001
From: Jo du Plessis <jo@joduplessis.com>
Date: Thu, 3 Oct 2024 21:00:15 +0200
Subject: [PATCH] add horizontal drag support

---
 packages/core/src/drag/drag-element-area.tsx | 48 ++++++++++++--------
 packages/core/src/helpers/array.ts           |  8 ++--
 2 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/packages/core/src/drag/drag-element-area.tsx b/packages/core/src/drag/drag-element-area.tsx
index 7b0affa..0aa8cb9 100644
--- a/packages/core/src/drag/drag-element-area.tsx
+++ b/packages/core/src/drag/drag-element-area.tsx
@@ -19,7 +19,7 @@ export type DragElementAreaProps = {
     group?: string
     variant?: DragVariant
     targetVariant?: any
-    direction?: 'vertical'
+    direction?: 'vertical' | 'horizontal'
     startDelay?: number
     footer?: any
 } & CoreViewProps
@@ -75,29 +75,37 @@ export const DragElementArea = forwardRef((props: DragElementAreaProps, ref) =>
         const placeholder: any = {
             visible: (isAnimated || isLined || isLinedFocus) && isTargetArea && !isTargetFocus,
             className: isAnimated ? 'f-drag-area__placeholder' : 'f-drag-area__placeholder-lined',
-            marginLeft: indent ? (target.indent ? `calc(var(--f-drag-indent) * ${target.indent})` : 0) : 0,
-            width: target.indent ? `calc(100% - var(--f-drag-indent) * ${target.indent})` : '100%',
-            // this needs to be considered at some point:
-            // width: isVertical ? target.width || origin.width : origin.width,
+            marginLeft: isVertical  
+                ? indent 
+                    ? (target.indent ? `calc(var(--f-drag-indent) * ${target.indent})` : 0) 
+                    : 0
+                : 0,
+            width: isVertical 
+                ? target.indent 
+                    ? `calc(100% - var(--f-drag-indent) * ${target.indent})` 
+                    : '100%'
+                : (isLined || isLinedFocus ? '5px !important' : (target.width || origin.width)),
+            height: isVertical 
+                ? (isLined || isLinedFocus ? undefined : origin.height) 
+                : '100%',
             position: noChildren ? 'relative' : 'absolute',
-            height: isVertical ? (isLined || isLinedFocus ? undefined : origin.height) : target.height || origin.height,
             transform: noChildren
                 ? null
                 : isVertical
-                ? `translateY(${
-                      target.moveDirection == 'down'
-                          ? target.top + target.height
-                          : target.moveDirection == 'up'
-                          ? target.top
-                          : 0
-                  }px)`
-                : `translateX(${
-                      target.moveDirection == 'right'
-                          ? target.left + target.width
-                          : target.moveDirection == 'left'
-                          ? target.left
-                          : 0
-                  }px)`,
+                    ? `translateY(${
+                        target.moveDirection == 'down'
+                            ? target.top + target.height
+                            : target.moveDirection == 'up'
+                                ? target.top
+                                : 0
+                    }px)`
+                    : `translateX(${
+                        target.moveDirection == 'right'
+                            ? target.left + target.width
+                                : target.moveDirection == 'left'
+                                ? target.left
+                                    : 0
+                    }px)`,
         }
 
         return {
diff --git a/packages/core/src/helpers/array.ts b/packages/core/src/helpers/array.ts
index 28a1920..c98b998 100644
--- a/packages/core/src/helpers/array.ts
+++ b/packages/core/src/helpers/array.ts
@@ -15,9 +15,11 @@ export const getTargetIndex = (origin, target) => {
         ? target.index > origin.index
             ? target.index - 1
             : target.index
-        : target.index > origin.index
-        ? target.index - 1
-        : target.index
+        : target.moveDirection == 'down'
+            ? target.index > origin.index
+                ? target.index
+                : target.index - 1
+            : target.index
 }
 
 export const moveElementInArray = (array, origin, target) => {