refactor(system): revise calcNextPosition

This commit is contained in:
moklick
2024-01-24 13:04:44 +01:00
parent 3688ec3e06
commit 009fb42017
6 changed files with 106 additions and 68 deletions
@@ -1,5 +1,5 @@
import { useCallback } from 'react';
import { calcNextPosition, snapPosition } from '@xyflow/system';
import { calculateNodePosition, snapPosition } from '@xyflow/system';
import { Node } from '../types';
import { useStoreApi } from '../hooks/useStore';
@@ -17,7 +17,17 @@ export function useUpdateNodePositions() {
const store = useStoreApi();
const updatePositions = useCallback((params: { x: number; y: number; isShiftPressed: boolean }) => {
const { nodeExtent, nodes, snapToGrid, snapGrid, nodesDraggable, onError, updateNodePositions } = store.getState();
const {
nodeExtent,
nodes,
snapToGrid,
snapGrid,
nodesDraggable,
onError,
updateNodePositions,
nodeLookup,
nodeOrigin,
} = store.getState();
const selectedNodes = nodes.filter(selectedAndDraggable(nodesDraggable));
// by default a node moves 5px on each key press, or 20px if shift is pressed
// if snap grid is enabled, we use that for the velocity.
@@ -31,27 +41,24 @@ export function useUpdateNodePositions() {
const nodeUpdates = selectedNodes.map((node) => {
if (node.computed?.positionAbsolute) {
let nextPosition = {
x: node.computed?.positionAbsolute.x + xDiff,
y: node.computed?.positionAbsolute.y + yDiff,
x: node.computed.positionAbsolute.x + xDiff,
y: node.computed.positionAbsolute.y + yDiff,
};
if (snapToGrid) {
nextPosition = snapPosition(nextPosition, snapGrid);
}
const { positionAbsolute, position } = calcNextPosition(
node,
const { position, positionAbsolute } = calculateNodePosition({
nodeId: node.id,
nextPosition,
nodes,
nodeLookup,
nodeExtent,
undefined,
onError
);
nodeOrigin,
onError,
});
node.position = position;
if (!node.computed) {
node.computed = {};
}
node.computed.positionAbsolute = positionAbsolute;
}
+2 -1
View File
@@ -6,6 +6,7 @@ import {
getViewportForBounds,
Transform,
updateConnectionLookup,
devWarn,
} from '@xyflow/system';
import type { Edge, Node, ReactFlowStore } from '../types';
@@ -100,7 +101,7 @@ const getInitialState = ({
autoPanOnConnect: true,
autoPanOnNodeDrag: true,
connectionRadius: 20,
onError: () => null,
onError: devWarn,
isValidConnection: undefined,
onSelectionChangeHandlers: [],