diff --git a/package-lock.json b/package-lock.json index ba4d16dc5..fae7d71d3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2045,12 +2045,11 @@ } }, "node_modules/@bpmn-io/draggle": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/@bpmn-io/draggle/-/draggle-4.0.0.tgz", - "integrity": "sha512-tr2ANCOgR9hR6Gc3x1r6JiWSwiFflFHdF0ilN8Pl5P1Q9kzsWuoTnzwVLHLQt0Ly6CiiwHJ9x+LTkJ5Bd3b3qA==", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/@bpmn-io/draggle/-/draggle-4.1.0.tgz", + "integrity": "sha512-gHRjQGJEpEwVxspNwNhnqHHAt8cE1l1cObFEf5YSuSXVxTLZcNAQOgmEDJ+QMk1UPDKfnQwvbeDdv5ytCnksfw==", "dependencies": { - "contra": "^1.9.4", - "crossvent": "^1.5.5" + "contra": "^1.9.4" } }, "node_modules/@bpmn-io/feel-editor": { @@ -9112,13 +9111,6 @@ "node": ">= 8" } }, - "node_modules/crossvent": { - "version": "1.5.5", - "license": "MIT", - "dependencies": { - "custom-event": "^1.0.0" - } - }, "node_modules/css-color-keywords": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", @@ -9198,6 +9190,7 @@ }, "node_modules/custom-event": { "version": "1.0.1", + "dev": true, "license": "MIT" }, "node_modules/dargs": { @@ -23405,12 +23398,11 @@ } }, "@bpmn-io/draggle": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/@bpmn-io/draggle/-/draggle-4.0.0.tgz", - "integrity": "sha512-tr2ANCOgR9hR6Gc3x1r6JiWSwiFflFHdF0ilN8Pl5P1Q9kzsWuoTnzwVLHLQt0Ly6CiiwHJ9x+LTkJ5Bd3b3qA==", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/@bpmn-io/draggle/-/draggle-4.1.0.tgz", + "integrity": "sha512-gHRjQGJEpEwVxspNwNhnqHHAt8cE1l1cObFEf5YSuSXVxTLZcNAQOgmEDJ+QMk1UPDKfnQwvbeDdv5ytCnksfw==", "requires": { - "contra": "^1.9.4", - "crossvent": "^1.5.5" + "contra": "^1.9.4" } }, "@bpmn-io/feel-editor": { @@ -28544,12 +28536,6 @@ } } }, - "crossvent": { - "version": "1.5.5", - "requires": { - "custom-event": "^1.0.0" - } - }, "css-color-keywords": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", @@ -28603,7 +28589,8 @@ "dev": true }, "custom-event": { - "version": "1.0.1" + "version": "1.0.1", + "dev": true }, "dargs": { "version": "7.0.0", diff --git a/packages/form-js-editor/assets/index.scss b/packages/form-js-editor/assets/index.scss index 64ae0c5c1..d6a6cab43 100644 --- 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 '@bpmn-io/draggle/dist/dragula.css'; +@use '@bpmn-io/draggle/dist/draggle.css'; @use '@bpmn-io/properties-panel/dist/assets/properties-panel.css'; \ No newline at end of file diff --git a/packages/form-js-editor/package.json b/packages/form-js-editor/package.json index d6b10aad5..d18910e9d 100644 --- a/packages/form-js-editor/package.json +++ b/packages/form-js-editor/package.json @@ -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", diff --git a/packages/form-js-editor/rollup.config.js b/packages/form-js-editor/rollup.config.js index 0847d8abc..775184563 100644 --- a/packages/form-js-editor/rollup.config.js +++ b/packages/form-js-editor/rollup.config.js @@ -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' } ] }) diff --git a/packages/form-js-editor/src/features/dragging/Dragging.js b/packages/form-js-editor/src/features/dragging/Dragging.js index 3f1631bd1..0f13dbed9 100644 --- a/packages/form-js-editor/src/features/dragging/Dragging.js +++ b/packages/form-js-editor/src/features/dragging/Dragging.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 }; diff --git a/packages/form-js-editor/test/spec/FormEditor.spec.js b/packages/form-js-editor/test/spec/FormEditor.spec.js index 9c580fc77..2de2e975b 100644 --- a/packages/form-js-editor/test/spec/FormEditor.spec.js +++ b/packages/form-js-editor/test/spec/FormEditor.spec.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; diff --git a/packages/form-js/package.json b/packages/form-js/package.json index a12db8894..06a9092ab 100644 --- a/packages/form-js/package.json +++ b/packages/form-js/package.json @@ -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",