diff --git a/package.json b/package.json index 84903f40..8990277d 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ "lint": "yarn lint:js" }, "dependencies": { - "@braks/revue-draggable": "^0.1.10", + "@braks/revue-draggable": "^0.1.12", "@types/d3": "^7.0.0", "d3": "^7.0.0", "d3-selection": "^3.0.0", diff --git a/src/components/NodesSelection/index.tsx b/src/components/NodesSelection/index.tsx index 7cc8e644..0a67749e 100644 --- a/src/components/NodesSelection/index.tsx +++ b/src/components/NodesSelection/index.tsx @@ -70,10 +70,18 @@ const NodesSelection = defineComponent({ props.onSelectionDragStart?.(event, selectedNodes.value); }; - const onDrag: DraggableEventHandler = (event) => { + const onDrag: DraggableEventHandler = (event, data) => { if (props.onSelectionDrag) { props.onSelectionDrag(event, selectedNodes.value); } + + store.updateNodePosDiff({ + diff: { + x: data.deltaX, + y: data.deltaY + }, + isDragging: true + }); }; const onStop: DraggableEventHandler = (event: MouseEvent) => { diff --git a/src/components/UserSelection/index.tsx b/src/components/UserSelection/index.tsx index 8774c16e..8c4bd0b6 100644 --- a/src/components/UserSelection/index.tsx +++ b/src/components/UserSelection/index.tsx @@ -56,7 +56,6 @@ export default defineComponent({ return; } - console.log('mouseDown'); store?.setUserSelection(mousePos); }; @@ -69,13 +68,11 @@ export default defineComponent({ if (!mousePos) { return; } - console.log('mousemove'); store?.updateUserSelection(mousePos); }; const onMouseUp = () => { - console.log('mosueUp'); store?.unsetUserSelection(); }; diff --git a/src/container/RevueFlow/index.tsx b/src/container/RevueFlow/index.tsx index ea4e06b2..d614add0 100644 --- a/src/container/RevueFlow/index.tsx +++ b/src/container/RevueFlow/index.tsx @@ -1,4 +1,14 @@ -import { computed, CSSProperties, defineComponent, HTMLAttributes, onBeforeUnmount, PropType, provide, watchEffect } from 'vue'; +import { + computed, + CSSProperties, + defineComponent, + HTMLAttributes, + inject, + onBeforeUnmount, + PropType, + provide, + watchEffect +} from 'vue'; import GraphView from '../GraphView'; import DefaultNode from '../../components/Nodes/DefaultNode'; import InputNode from '../../components/Nodes/InputNode'; @@ -538,7 +548,7 @@ const RevueFlow = defineComponent({ */ }, setup(props, { slots }) { - const store = configureStore(initialState)(); + const store = typeof inject('store') !== 'undefined' ? inject('store')! : configureStore(initialState)(); provide('store', store); store.setElements(props.elements); diff --git a/yarn.lock b/yarn.lock index 31c062ff..eaca7675 100644 --- a/yarn.lock +++ b/yarn.lock @@ -262,10 +262,10 @@ "@babel/helper-validator-identifier" "^7.14.5" to-fast-properties "^2.0.0" -"@braks/revue-draggable@^0.1.10": - version "0.1.10" - resolved "https://registry.yarnpkg.com/@braks/revue-draggable/-/revue-draggable-0.1.10.tgz#d6c7de3de44f1fbce09b37ba35a80100418850ba" - integrity sha512-m8cXb1NADAYQxhNUqfrzIhlvRPacaBEy/J8FVemkQCZLhzd5lHUMaTv+5hiYRgljXcoRLWO21HF4NtqWZ1kQuw== +"@braks/revue-draggable@^0.1.12": + version "0.1.12" + resolved "https://registry.yarnpkg.com/@braks/revue-draggable/-/revue-draggable-0.1.12.tgz#6ccf57c1954f1bcc3e66e3956f7205dc57841deb" + integrity sha512-eq2uj6t3GKmIej5RcDBSun94ZKs1wmEDvMMx/uz+m7EzeffXYIDyo8Zk1Nkmb3MdOcvp4BHpnzuAxUbPnZnEMA== dependencies: vue-demi latest