From 63e313c1ce311941a9ecfc62025540adda7d1281 Mon Sep 17 00:00:00 2001 From: Niklas Kiefer Date: Thu, 30 Mar 2023 13:55:03 +0200 Subject: [PATCH] wip experimental dragula version --- package-lock.json | 36 ++++++++++--------- packages/form-js-editor/assets/index.scss | 2 +- packages/form-js-editor/package.json | 2 +- packages/form-js-editor/rollup.config.js | 2 +- .../src/features/dragging/Dragging.js | 17 ++++++--- .../src/render/components/FormEditor.js | 2 -- 6 files changed, 34 insertions(+), 27 deletions(-) diff --git a/package-lock.json b/package-lock.json index f4f531fb0..8f87b7300 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2110,6 +2110,15 @@ "url": "https://opencollective.com/preact" } }, + "node_modules/@bpmn-io/draggle": { + "version": "3.7.3", + "resolved": "git+ssh://git@github.com/bpmn-io/draggle.git#6b28ef93bb4f3f22c227d0a21689ed7fd2573ad8", + "license": "MIT", + "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": "github:bpmn-io/draggle#prepare-fork", "@bpmn-io/form-js-viewer": "^1.1.0", "@bpmn-io/properties-panel": "^3.0.0", "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,14 @@ } } }, + "@bpmn-io/draggle": { + "version": "git+ssh://git@github.com/bpmn-io/draggle.git#6b28ef93bb4f3f22c227d0a21689ed7fd2573ad8", + "from": "@bpmn-io/draggle@github:bpmn-io/draggle#prepare-fork", + "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 +21777,11 @@ "@bpmn-io/form-js-editor": { "version": "file:packages/form-js-editor", "requires": { + "@bpmn-io/draggle": "github:bpmn-io/draggle#prepare-fork", "@bpmn-io/form-js-viewer": "^1.1.0", "@bpmn-io/properties-panel": "^3.0.0", "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 +27164,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 aa47d96bc..ff3f1ecee 100644 --- 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 index 6b8665599..a7342b67f 100644 --- 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 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);