From 5d3efa73a8819362193964f804ae59b71697863b Mon Sep 17 00:00:00 2001 From: peterkogo Date: Wed, 24 Jan 2024 12:25:39 +0100 Subject: [PATCH] refactored useUpdateNodePositions to useMoveSelectedNodes --- .../src/components/NodeWrapper/index.tsx | 11 +++++----- .../src/components/NodesSelection/index.tsx | 11 +++++----- ...dePositions.ts => useMoveSelectedNodes.ts} | 21 +++++++++---------- 3 files changed, 20 insertions(+), 23 deletions(-) rename packages/react/src/hooks/{useUpdateNodePositions.ts => useMoveSelectedNodes.ts} (70%) diff --git a/packages/react/src/components/NodeWrapper/index.tsx b/packages/react/src/components/NodeWrapper/index.tsx index 1e796de1..ebf65163 100644 --- a/packages/react/src/components/NodeWrapper/index.tsx +++ b/packages/react/src/components/NodeWrapper/index.tsx @@ -14,7 +14,7 @@ import { useStore, useStoreApi } from '../../hooks/useStore'; import { Provider } from '../../contexts/NodeIdContext'; import { ARIA_NODE_DESC_KEY } from '../A11yDescriptions'; import { useDrag } from '../../hooks/useDrag'; -import { useUpdateNodePositions } from '../../hooks/useUpdateNodePositions'; +import { useMoveSelectedNodes } from '../../hooks/useMoveSelectedNodes'; import { handleNodeClick } from '../Nodes/utils'; import { arrowKeyDiffs, builtinNodeTypes } from './utils'; import type { NodeWrapperProps } from '../../types'; @@ -79,7 +79,7 @@ export function NodeWrapper({ const prevTargetPosition = useRef(node.targetPosition); const prevType = useRef(nodeType); - const updatePositions = useUpdateNodePositions(); + const moveSelectedNodes = useMoveSelectedNodes(); useEffect(() => { if (nodeRef.current && !node.hidden) { @@ -188,10 +188,9 @@ export function NodeWrapper({ .toLowerCase()}. New position, x: ${~~positionAbsoluteX}, y: ${~~positionAbsoluteY}`, }); - updatePositions({ - x: arrowKeyDiffs[event.key].x, - y: arrowKeyDiffs[event.key].y, - isShiftPressed: event.shiftKey, + moveSelectedNodes({ + direction: arrowKeyDiffs[event.key], + factor: event.shiftKey ? 4 : 1, }); } }; diff --git a/packages/react/src/components/NodesSelection/index.tsx b/packages/react/src/components/NodesSelection/index.tsx index f8aeb77c..8f2e7602 100644 --- a/packages/react/src/components/NodesSelection/index.tsx +++ b/packages/react/src/components/NodesSelection/index.tsx @@ -10,7 +10,7 @@ import { getNodesBounds } from '@xyflow/system'; import { useStore, useStoreApi } from '../../hooks/useStore'; import { useDrag } from '../../hooks/useDrag'; -import { useUpdateNodePositions } from '../../hooks/useUpdateNodePositions'; +import { useMoveSelectedNodes } from '../../hooks/useMoveSelectedNodes'; import { arrowKeyDiffs } from '../NodeWrapper/utils'; import type { Node, ReactFlowState } from '../../types'; @@ -35,7 +35,7 @@ const selector = (s: ReactFlowState) => { export function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboardA11y }: NodesSelectionProps) { const store = useStoreApi(); const { width, height, transformString, userSelectionActive } = useStore(selector, shallow); - const updatePositions = useUpdateNodePositions(); + const moveSelectedNodes = useMoveSelectedNodes(); const nodeRef = useRef(null); @@ -64,10 +64,9 @@ export function NodesSelection({ onSelectionContextMenu, noPanClassName, disable const onKeyDown = (event: KeyboardEvent) => { if (Object.prototype.hasOwnProperty.call(arrowKeyDiffs, event.key)) { - updatePositions({ - x: arrowKeyDiffs[event.key].x, - y: arrowKeyDiffs[event.key].y, - isShiftPressed: event.shiftKey, + moveSelectedNodes({ + direction: arrowKeyDiffs[event.key], + factor: event.shiftKey ? 4 : 1, }); } }; diff --git a/packages/react/src/hooks/useUpdateNodePositions.ts b/packages/react/src/hooks/useMoveSelectedNodes.ts similarity index 70% rename from packages/react/src/hooks/useUpdateNodePositions.ts rename to packages/react/src/hooks/useMoveSelectedNodes.ts index 1ca0d4ee..5e54ef50 100644 --- a/packages/react/src/hooks/useUpdateNodePositions.ts +++ b/packages/react/src/hooks/useMoveSelectedNodes.ts @@ -1,32 +1,31 @@ import { useCallback } from 'react'; -import { calcNextPosition, snapPosition } from '@xyflow/system'; +import { XYPosition, calcNextPosition, snapPosition } from '@xyflow/system'; import { Node } from '../types'; -import { useStoreApi } from '../hooks/useStore'; +import { useStoreApi } from './useStore'; const selectedAndDraggable = (nodesDraggable: boolean) => (n: Node) => n.selected && (n.draggable || (nodesDraggable && typeof n.draggable === 'undefined')); /** - * Hook for updating node positions. + * Hook for updating node positions with keyboard presses * * @internal * @returns function for updating node positions */ -export function useUpdateNodePositions() { +export function useMoveSelectedNodes() { const store = useStoreApi(); - const updatePositions = useCallback((params: { x: number; y: number; isShiftPressed: boolean }) => { + const moveSelectedNodes = useCallback((params: { direction: XYPosition; factor: number }) => { const { nodeExtent, nodes, snapToGrid, snapGrid, nodesDraggable, onError, updateNodePositions } = 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. + // by default a node moves 5px on each key press + // if snap grid is enabled, we use that for the velocity const xVelo = snapToGrid ? snapGrid[0] : 5; const yVelo = snapToGrid ? snapGrid[1] : 5; - const factor = params.isShiftPressed ? 4 : 1; - const xDiff = params.x * xVelo * factor; - const yDiff = params.y * yVelo * factor; + const xDiff = params.direction.x * xVelo * params.factor; + const yDiff = params.direction.y * yVelo * params.factor; const nodeUpdates = selectedNodes.map((node) => { if (node.computed?.positionAbsolute) { @@ -61,5 +60,5 @@ export function useUpdateNodePositions() { updateNodePositions(nodeUpdates, true, false); }, []); - return updatePositions; + return moveSelectedNodes; }