wip experimental dragula version

bpmn-io · Aug 1, 2023 · 63e313c · 63e313c
1 parent 6bfb194
commit 63e313c
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 27 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/form-js-editor/assets/index.scss b/packages/form-js-editor/assets/index.scss
@@ -1,3 +1,3 @@
 @use 'form-js-editor-base.css';
-@use 'dragula/dist/dragula.css';
+@use '@bpmn-io/draggle/dist/dragula.css';
 @use '@bpmn-io/properties-panel/assets/properties-panel.css';
diff --git a/packages/form-js-editor/package.json b/packages/form-js-editor/package.json
@@ -50,7 +50,7 @@
     "@bpmn-io/properties-panel": "^3.0.0",
     "array-move": "^3.0.1",
     "big.js": "^6.2.1",
-    "dragula": "^3.7.3",
+    "@bpmn-io/draggle": "github:bpmn-io/draggle#prepare-fork",
     "ids": "^1.0.0",
     "min-dash": "^4.0.0",
     "min-dom": "^4.0.0",

diff --git a/packages/form-js-editor/rollup.config.js b/packages/form-js-editor/rollup.config.js
@@ -62,7 +62,7 @@ export default [
       'preact/jsx-runtime',
       'preact/hooks',
       'preact/compat',
-      'dragula',
+      '@bpmn-o/dragula',
       '@bpmn-io/form-js-viewer'
     ],
     plugins: pgl([

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);