diff --git a/packages/vue-flow/src/additional-components/MiniMap/MiniMap.vue b/packages/vue-flow/src/additional-components/MiniMap/MiniMap.vue index 0b25ae00..9d0dd7be 100644 --- a/packages/vue-flow/src/additional-components/MiniMap/MiniMap.vue +++ b/packages/vue-flow/src/additional-components/MiniMap/MiniMap.vue @@ -154,7 +154,6 @@ export default { :name="`node-${node.type}`" :parent-node="node.parentNode" :selected="node.selected" - :dragging="node.dragging" :position="node.computedPosition" :dimensions="node.dimensions" :style="node.style" diff --git a/packages/vue-flow/src/components/Nodes/NodeWrapper.vue b/packages/vue-flow/src/components/Nodes/NodeWrapper.vue index 0070da6e..b3644168 100644 --- a/packages/vue-flow/src/components/Nodes/NodeWrapper.vue +++ b/packages/vue-flow/src/components/Nodes/NodeWrapper.vue @@ -37,6 +37,8 @@ const { const nodeElement = ref() +let dragging = $ref(false) + useDrag({ id, el: nodeElement, @@ -66,26 +68,21 @@ useDrag({ emits.nodeDragStart({ event: event.sourceEvent, node, connectedEdges: getConnectedEdges([node], edges) }) }, onDrag(event, { dx, dy }) { - updateNodePosition({ id: node.id, diff: { x: dx, y: dy }, dragging: true }) + dragging = true + updateNodePosition({ id: node.id, diff: { x: dx, y: dy } }) emits.nodeDrag({ event: event.sourceEvent, node, connectedEdges: getConnectedEdges([node], edges) }) }, onStop(event) { - if (!node.dragging) { - if (selectable && !selectNodesOnDrag && !node.selected) { - addSelectedNodes([node]) - } - emits.nodeClick({ event: event.sourceEvent, node, connectedEdges: getConnectedEdges([node], edges) }) - return - } + dragging = false - updateNodePosition({ id: node.id, dragging: false }) + updateNodePosition({ id: node.id }) emits.nodeDragStop({ event: event.sourceEvent, node, connectedEdges: getConnectedEdges([node], edges) }) }, }) onBeforeMount(() => { - updateNodePosition({ id: node.id, diff: { x: 0, y: 0 }, dragging: false }) + updateNodePosition({ id: node.id, diff: { x: 0, y: 0 } }) }) onMounted(() => { @@ -110,7 +107,7 @@ onMounted(() => { ([pos, parent]) => { const xyzPos = { ...pos, - z: node.dragging || node.selected ? 1000 : 0, + z: node.computedPosition.z ? node.computedPosition.z : node.selected ? 1000 : 0, } const graphNode = getNode(id)! @@ -131,19 +128,19 @@ onUnmounted(() => { }) const onMouseEnter = (event: MouseEvent) => { - if (!node.dragging) { + if (!dragging) { emits.nodeMouseEnter({ event, node, connectedEdges: getConnectedEdges([node], edges) }) } } const onMouseMove = (event: MouseEvent) => { - if (!node.dragging) { + if (!dragging) { emits.nodeMouseMove({ event, node, connectedEdges: getConnectedEdges([node], edges) }) } } const onMouseLeave = (event: MouseEvent) => { - if (!node.dragging) { + if (!dragging) { emits.nodeMouseLeave({ event, node, connectedEdges: getConnectedEdges([node], edges) }) } } @@ -160,8 +157,8 @@ const onDoubleClick = (event: MouseEvent) => emits.nodeDoubleClick({ event, node, connectedEdges: getConnectedEdges([node], edges) }) const onSelectNode = (event: MouseEvent) => { - if (!draggable) { - if (selectable) { + if (!dragging) { + if (selectable && !selectNodesOnDrag && !node.selected) { setState({ nodesSelectionActive: false, }) @@ -179,7 +176,7 @@ const getClass = computed(() => { `vue-flow__node-${name}`, noPanClassName, { - dragging: node.dragging, + dragging, selected: node.selected, selectable, }, diff --git a/packages/vue-flow/src/components/NodesSelection/NodesSelection.vue b/packages/vue-flow/src/components/NodesSelection/NodesSelection.vue index cc54b5bb..c17fcb9e 100644 --- a/packages/vue-flow/src/components/NodesSelection/NodesSelection.vue +++ b/packages/vue-flow/src/components/NodesSelection/NodesSelection.vue @@ -13,11 +13,10 @@ useDrag({ }, onDrag(event, { dx, dy }) { emits.selectionDrag({ event: event.sourceEvent, nodes: getSelectedNodes }) - updateNodePosition({ diff: { x: dx, y: dy }, dragging: true }) + updateNodePosition({ diff: { x: dx, y: dy } }) }, onStop(event) { emits.selectionDragStop({ event: event.sourceEvent, nodes: getSelectedNodes }) - getSelectedNodes.forEach((node) => (node.dragging = false)) }, }) diff --git a/packages/vue-flow/src/store/actions.ts b/packages/vue-flow/src/store/actions.ts index 986fd2b0..c80508f9 100644 --- a/packages/vue-flow/src/store/actions.ts +++ b/packages/vue-flow/src/store/actions.ts @@ -117,18 +117,18 @@ const createGraphNodes = (nodes: Node[], getNode: Getters['getNode'], currGraphN } export default (state: State, getters: ComputedGetters): Actions => { - const updateNodePosition: Actions['updateNodePosition'] = ({ id, diff = { x: 0, y: 0 }, dragging }) => { + const updateNodePosition: Actions['updateNodePosition'] = ({ id, diff = { x: 0, y: 0 } }) => { const nodePosPromise = new Promise((resolve) => { const changes: NodePositionChange[] = [] const curr = id ? getters.getNode.value(id)! : undefined if (curr) { - changes.push(createPositionChange({ node: curr, diff, nodeExtent: state.nodeExtent, dragging }, getters.getNode.value)) + changes.push(createPositionChange({ node: curr, diff, nodeExtent: state.nodeExtent }, getters.getNode.value)) } else { getters.getSelectedNodes.value.forEach((node) => { if (!node.parentNode) { - changes.push(createPositionChange({ node, diff, nodeExtent: state.nodeExtent, dragging }, getters.getNode.value)) + changes.push(createPositionChange({ node, diff, nodeExtent: state.nodeExtent }, getters.getNode.value)) } else if (!isParentSelected(node, getters.getNode.value)) { - changes.push(createPositionChange({ node, diff, nodeExtent: state.nodeExtent, dragging }, getters.getNode.value)) + changes.push(createPositionChange({ node, diff, nodeExtent: state.nodeExtent }, getters.getNode.value)) } }) } diff --git a/packages/vue-flow/src/types/changes.ts b/packages/vue-flow/src/types/changes.ts index f4fda244..aede894a 100644 --- a/packages/vue-flow/src/types/changes.ts +++ b/packages/vue-flow/src/types/changes.ts @@ -13,7 +13,6 @@ export interface NodePositionChange { id: string type: 'position' position?: XYPosition - dragging?: boolean } export interface NodeSelectionChange { diff --git a/packages/vue-flow/src/types/node.ts b/packages/vue-flow/src/types/node.ts index ec99f633..7e5551ed 100644 --- a/packages/vue-flow/src/types/node.ts +++ b/packages/vue-flow/src/types/node.ts @@ -68,7 +68,6 @@ export interface GraphNode extends Node { dimensions: Dimensions isParent: boolean selected: boolean - dragging: boolean } /** these props are passed to node components */ diff --git a/packages/vue-flow/src/types/store.ts b/packages/vue-flow/src/types/store.ts index b40372fb..cd0a086d 100644 --- a/packages/vue-flow/src/types/store.ts +++ b/packages/vue-flow/src/types/store.ts @@ -25,11 +25,7 @@ export interface UpdateNodeDimensionsParams { forceUpdate?: boolean } -export interface UpdateNodePositionsParams { - id?: string - diff?: XYPosition - dragging?: boolean -} +export type UpdateNodePositionsParams = { id?: string; diff?: XYPosition } export interface State extends Omit { /** Event hooks, you can manipulate the triggers at your own peril */ @@ -130,7 +126,7 @@ export type SetState = ( | Partial> | ((state: State) => Partial>), ) => void -export type UpdateNodePosition = ({ id, diff, dragging }: UpdateNodePositionsParams) => void +export type UpdateNodePosition = (params: UpdateNodePositionsParams) => void export type UpdateNodeDimensions = (updates: UpdateNodeDimensionsParams[]) => void export interface Actions { diff --git a/packages/vue-flow/src/utils/changes.ts b/packages/vue-flow/src/utils/changes.ts index 1812db47..5519cc71 100644 --- a/packages/vue-flow/src/utils/changes.ts +++ b/packages/vue-flow/src/utils/changes.ts @@ -23,7 +23,6 @@ interface CreatePositionChangeParams { node: GraphNode nodeExtent: CoordinateExtent diff?: XYPosition - dragging?: boolean } function handleParentExpand(updateItem: GraphNode, parent: GraphNode) { @@ -115,7 +114,6 @@ export const applyChanges = < case 'position': if (isGraphNode(el)) { if (typeof change.position !== 'undefined') el.position = change.position - if (typeof change.dragging !== 'undefined') el.dragging = change.dragging if (el.expandParent && el.parentNode) { const parent = elements.find((parent) => parent.id === el.parentNode) @@ -159,14 +157,13 @@ export const createSelectionChange = (id: string, selected: boolean): NodeSelect }) export const createPositionChange = ( - { node, diff, dragging, nodeExtent }: CreatePositionChangeParams, + { node, diff, nodeExtent }: CreatePositionChangeParams, getNode: Getters['getNode'], ): NodePositionChange => { const parent = node.parentNode ? getNode(node.parentNode) : undefined const change: NodePositionChange = { id: node.id, type: 'position', - dragging: !!dragging, } if (diff) { diff --git a/packages/vue-flow/src/utils/graph.ts b/packages/vue-flow/src/utils/graph.ts index 44b80dc4..d34f1655 100644 --- a/packages/vue-flow/src/utils/graph.ts +++ b/packages/vue-flow/src/utils/graph.ts @@ -75,7 +75,6 @@ export const parseNode = (node: Node, nodeExtent: CoordinateExtent, defaults?: P x: 0, y: 0, }, - dragging: false, draggable: undefined, selectable: undefined, connectable: undefined, @@ -270,7 +269,7 @@ export const getNodesInside = ( return nodes.filter((node) => { if (!node || node.selectable === false) return false - const { computedPosition = { x: 0, y: 0 }, dimensions = { width: 0, height: 0 }, dragging = false } = node + const { computedPosition = { x: 0, y: 0 }, dimensions = { width: 0, height: 0 } } = node const nBox = rectToBox({ ...computedPosition, ...dimensions }) const xOverlap = Math.max(0, Math.min(rBox.x2, nBox.x2) - Math.max(rBox.x, nBox.x)) const yOverlap = Math.max(0, Math.min(rBox.y2, nBox.y2) - Math.max(rBox.y, nBox.y)) @@ -279,8 +278,7 @@ export const getNodesInside = ( typeof dimensions.width === 'undefined' || typeof dimensions.height === 'undefined' || dimensions.width === 0 || - dimensions.height === 0 || - dragging + dimensions.height === 0 const partiallyVisible = partially && overlappingArea > 0 const area = dimensions.width * dimensions.height