From 523cc1ab64d4e3761418e2c8ab9559bffaeaf49f Mon Sep 17 00:00:00 2001 From: Niklas Kiefer Date: Tue, 1 Aug 2023 13:28:15 +0200 Subject: [PATCH 1/2] deps: replace dragula with draggle Related to https://github.com/camunda/team-hto/issues/313 --- package-lock.json | 37 ++++++++++++----------- packages/form-js-editor/assets/index.scss | 2 +- packages/form-js-editor/package.json | 2 +- packages/form-js-editor/rollup.config.js | 4 +-- 4 files changed, 24 insertions(+), 21 deletions(-) diff --git a/package-lock.json b/package-lock.json index b8b621a67..e636415af 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2110,6 +2110,15 @@ "url": "https://opencollective.com/preact" } }, + "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==", + "dependencies": { + "contra": "^1.9.4", + "crossvent": "^1.5.5" + } + }, "node_modules/@bpmn-io/feel-editor": { "version": "0.8.0", "resolved": "https://registry.npmjs.org/@bpmn-io/feel-editor/-/feel-editor-0.8.0.tgz", @@ -9864,14 +9873,6 @@ "react": ">=0.14.9" } }, - "node_modules/dragula": { - "version": "3.7.3", - "license": "MIT", - "dependencies": { - "contra": "1.9.4", - "crossvent": "1.5.5" - } - }, "node_modules/duplexer": { "version": "0.1.2", "dev": true, @@ -20159,11 +20160,11 @@ "version": "1.1.0", "license": "SEE LICENSE IN LICENSE", "dependencies": { + "@bpmn-io/draggle": "^4.0.0", "@bpmn-io/form-js-viewer": "^1.1.0", "@bpmn-io/properties-panel": "^3.2.1", "array-move": "^3.0.1", "big.js": "^6.2.1", - "dragula": "^3.7.3", "ids": "^1.0.0", "min-dash": "^4.0.0", "min-dom": "^4.0.0", @@ -21680,6 +21681,15 @@ } } }, + "@bpmn-io/draggle": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@bpmn-io/draggle/-/draggle-4.0.0.tgz", + "integrity": "sha512-tr2ANCOgR9hR6Gc3x1r6JiWSwiFflFHdF0ilN8Pl5P1Q9kzsWuoTnzwVLHLQt0Ly6CiiwHJ9x+LTkJ5Bd3b3qA==", + "requires": { + "contra": "^1.9.4", + "crossvent": "^1.5.5" + } + }, "@bpmn-io/feel-editor": { "version": "0.8.0", "resolved": "https://registry.npmjs.org/@bpmn-io/feel-editor/-/feel-editor-0.8.0.tgz", @@ -21768,11 +21778,11 @@ "@bpmn-io/form-js-editor": { "version": "file:packages/form-js-editor", "requires": { + "@bpmn-io/draggle": "^4.0.0", "@bpmn-io/form-js-viewer": "^1.1.0", "@bpmn-io/properties-panel": "^3.2.1", "array-move": "^3.0.1", "big.js": "^6.2.1", - "dragula": "^3.7.3", "ids": "^1.0.0", "min-dash": "^4.0.0", "min-dom": "^4.0.0", @@ -27155,13 +27165,6 @@ "react-is": "^16.13.1" } }, - "dragula": { - "version": "3.7.3", - "requires": { - "contra": "1.9.4", - "crossvent": "1.5.5" - } - }, "duplexer": { "version": "0.1.2", "dev": true diff --git a/packages/form-js-editor/assets/index.scss b/packages/form-js-editor/assets/index.scss index 0d8561bec..93add95b7 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 'dragula/dist/dragula.css'; +@use '@bpmn-io/draggle/dist/dragula.css'; @use '@bpmn-io/properties-panel/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 5f81f9cfe..2c81af234 100644 --- a/packages/form-js-editor/package.json +++ b/packages/form-js-editor/package.json @@ -46,11 +46,11 @@ "url": "https://github.com/bpmn-io" }, "dependencies": { + "@bpmn-io/draggle": "^4.0.0", "@bpmn-io/form-js-viewer": "^1.1.0", "@bpmn-io/properties-panel": "^3.2.1", "array-move": "^3.0.1", "big.js": "^6.2.1", - "dragula": "^3.7.3", "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 index 6b8665599..3914f205d 100644 --- a/packages/form-js-editor/rollup.config.js +++ b/packages/form-js-editor/rollup.config.js @@ -62,14 +62,14 @@ export default [ 'preact/jsx-runtime', 'preact/hooks', 'preact/compat', - 'dragula', + '@bpmn-o/draggle', '@bpmn-io/form-js-viewer' ], plugins: pgl([ copy({ targets: [ { src: 'assets/form-js-editor-base.css', dest: 'dist/assets' }, - { src: '../../node_modules/dragula/dist/dragula.css', dest: 'dist/assets' }, + { src: '../../node_modules/@bpmn-io/draggle/dist/dragula.css', dest: 'dist/assets' }, { src: '../../node_modules/@bpmn-io/properties-panel/assets/properties-panel.css', dest: 'dist/assets' } ] }) From da2921d48a7394b33f9dd0245b575218d88bf53c Mon Sep 17 00:00:00 2001 From: Niklas Kiefer Date: Tue, 1 Aug 2023 13:28:43 +0200 Subject: [PATCH 2/2] 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);