chore(dragging): set flexible drop direction

bpmn-io · Aug 2, 2023 · 3476736 · 3476736
1 parent cb8918b
commit 3476736
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git 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
@@ -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);