fix: improve drag preview alignment

Related to #596

Author: Skaiir

package-lock.json

@@ -1,3 +1,3 @@
 @use 'form-js-editor-base.css';
-@use '@bpmn-io/draggle/dist/dragula.css';
+@use '@bpmn-io/draggle/dist/draggle.css';
 @use '@bpmn-io/properties-panel/dist/assets/properties-panel.css';

packages/form-js-editor/assets/index.scss

@@ -9,7 +9,8 @@
     },
     "./dist/assets/form-js-editor.css": "./dist/assets/form-js-editor.css",
     "./dist/assets/form-js-editor-base.css": "./dist/assets/form-js-editor-base.css",
-    "./dist/assets/dragula.css": "./dist/assets/dragula.css",
+    "./dist/assets/draggle.css": "./dist/assets/draggle.css",
+    "./dist/assets/dragula.css": "./dist/assets/draggle.css",
     "./dist/assets/properties-panel.css": "./dist/assets/properties-panel.css",
     "./package.json": "./package.json"
   },
@@ -46,7 +47,7 @@
     "url": "https://github.com/bpmn-io"
   },
   "dependencies": {
-    "@bpmn-io/draggle": "^4.0.0",
+    "@bpmn-io/draggle": "^4.1.0",
     "@bpmn-io/form-js-viewer": "^1.7.3",
     "@bpmn-io/properties-panel": "^3.18.1",
     "array-move": "^3.0.1",

packages/form-js-editor/package.json

@@ -69,7 +69,7 @@ export default [
       copy({
         targets: [
           { src: 'assets/form-js-editor-base.css', dest: 'dist/assets' },
-          { src: '../../node_modules/@bpmn-io/draggle/dist/dragula.css', dest: 'dist/assets' },
+          { src: '../../node_modules/@bpmn-io/draggle/dist/draggle.css', dest: 'dist/assets' },
           { src: '../../node_modules/@bpmn-io/properties-panel/dist/assets/properties-panel.css', dest: 'dist/assets' }
         ]
       })

packages/form-js-editor/rollup.config.js

@@ -289,6 +289,41 @@ export class Dragging {
 
         return !target.classList.contains(DRAG_NO_DROP_CLS);
       },
+
+      transformOffset: (offset, event, element) => {
+
+        if (element.classList.contains(DRAG_ROW_MOVE_CLS)) {
+
+          const rowOffset = {
+            x: -5,
+            y: -60
+          };
+
+          return {
+            left: event.clientX + rowOffset.x,
+            top: event.clientY + rowOffset.y
+          };
+
+        }
+
+        if (element.classList.contains(DRAG_MOVE_CLS)) {
+
+          const iconOffset = {
+            x: -5,
+            y: -15
+          };
+
+          return {
+            left: event.clientX + iconOffset.x,
+            top: event.clientY + iconOffset.y
+          };
+
+        }
+
+        return offset;
+
+      },
+
       slideFactorX: 10,
       slideFactorY: 5
     };

packages/form-js-editor/src/features/dragging/Dragging.js

@@ -988,7 +988,7 @@ describe('FormEditor', function() {
     });
 
 
-    it('should create and select new form field', async function() {
+    it.only('should create and select new form field', async function() {
 
       // given
       let dragulaCreated = false;

packages/form-js-editor/test/spec/FormEditor.spec.js

@@ -18,7 +18,8 @@
     },
     "./dist/assets/form-js.css": "./dist/assets/form-js.css",
     "./dist/assets/form-js-base.css": "./dist/assets/form-js-base.css",
-    "./dist/assets/dragula.css": "./dist/assets/dragula.css",
+    "./dist/assets/draggle.css": "./dist/assets/draggle.css",
+    "./dist/assets/dragula.css": "./dist/assets/draggle.css",
     "./dist/assets/flatpickr/light.css": "./dist/assets/flatpickr/light.css",
     "./dist/assets/properties-panel.css": "./dist/assets/properties-panel.css",
     "./dist/assets/form-js-editor.css": "./dist/assets/form-js-editor.css",