From 3476736615050a301ab240c54da6658f579593cd Mon Sep 17 00:00:00 2001
From: Niklas Kiefer <niklas.kiefer@camunda.com>
Date: Tue, 1 Aug 2023 13:28:43 +0200
Subject: [PATCH] chore(dragging): set flexible drop direction

---
 .../src/features/dragging/Dragging.js           | 17 ++++++++++++-----
 .../src/render/components/FormEditor.js         |  2 --
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/form-js-editor/src/features/dragging/Dragging.js b/packages/form-js-editor/src/features/dragging/Dragging.js
index 58a347724..71e4b842d 100644
--- a/packages/form-js-editor/src/features/dragging/Dragging.js
+++ b/packages/form-js-editor/src/features/dragging/Dragging.js
@@ -1,4 +1,4 @@
-import dragula from 'dragula';
+import dragula from '@bpmn-io/draggle';
 
 import { set as setCursor } from '../../render/util/Cursor';
 
@@ -200,12 +200,17 @@ export default class Dragging {
 
     const {
       container,
-      direction,
       mirrorContainer
     } = options || {};
 
-    const dragulaInstance = dragula({
-      direction,
+    let dragulaOptions = {
+      direction: function(el, target) {
+        if (isRow(target)) {
+          return 'horizontal';
+        }
+
+        return 'vertical';
+      },
       mirrorContainer,
       isContainer(el) {
         return container.some(cls => el.classList.contains(cls));
@@ -245,7 +250,9 @@ export default class Dragging {
       },
       slideFactorX: 10,
       slideFactorY: 5
-    });
+    };
+
+    const dragulaInstance = dragula(dragulaOptions);
 
     // bind life cycle events
     dragulaInstance.on('drag', (element, source) => {
diff --git a/packages/form-js-editor/src/render/components/FormEditor.js b/packages/form-js-editor/src/render/components/FormEditor.js
index a230bbc6a..c72b89a72 100644
--- a/packages/form-js-editor/src/render/components/FormEditor.js
+++ b/packages/form-js-editor/src/render/components/FormEditor.js
@@ -322,7 +322,6 @@ export default function FormEditor(props) {
         DROP_CONTAINER_VERTICAL_CLS,
         DROP_CONTAINER_HORIZONTAL_CLS
       ],
-      direction: 'vertical',
       mirrorContainer: formContainerRef.current
     });
 
@@ -345,7 +344,6 @@ export default function FormEditor(props) {
           DROP_CONTAINER_VERTICAL_CLS,
           DROP_CONTAINER_HORIZONTAL_CLS
         ],
-        direction: 'vertical',
         mirrorContainer: formContainerRef.current
       });
       setDrake(dragulaInstance);