diff --git a/packages/core/src/container/GraphView/index.tsx b/packages/core/src/container/GraphView/index.tsx index 70b2d326..e94698e7 100644 --- a/packages/core/src/container/GraphView/index.tsx +++ b/packages/core/src/container/GraphView/index.tsx @@ -99,6 +99,7 @@ const GraphView = ({ elevateEdgesOnSelect, disableKeyboardA11y, nodeOrigin, + nodeExtent, rfId, }: GraphViewProps) => { useOnInitHandler(onInit); @@ -175,6 +176,7 @@ const GraphView = ({ noDragClassName={noDragClassName} disableKeyboardA11y={disableKeyboardA11y} nodeOrigin={nodeOrigin} + nodeExtent={nodeExtent} rfId={rfId} /> diff --git a/packages/core/src/container/NodeRenderer/index.tsx b/packages/core/src/container/NodeRenderer/index.tsx index c94751d9..c9b4190f 100644 --- a/packages/core/src/container/NodeRenderer/index.tsx +++ b/packages/core/src/container/NodeRenderer/index.tsx @@ -3,7 +3,7 @@ import shallow from 'zustand/shallow'; import useVisibleNodes from '../../hooks/useVisibleNodes'; import { useStore } from '../../hooks/useStore'; -import { devWarn, internalsSymbol } from '../../utils'; +import { clampPosition, devWarn, internalsSymbol } from '../../utils'; import { containerStyle } from '../../styles'; import { GraphViewProps } from '../GraphView'; import { Position, ReactFlowState, WrapNodeProps } from '../../types'; @@ -25,6 +25,7 @@ type NodeRendererProps = Pick< | 'rfId' | 'disableKeyboardA11y' | 'nodeOrigin' + | 'nodeExtent' >; const selector = (s: ReactFlowState) => ({ @@ -81,8 +82,12 @@ const NodeRenderer = (props: NodeRendererProps) => { const isDraggable = !!(node.draggable || (nodesDraggable && typeof node.draggable === 'undefined')); const isSelectable = !!(node.selectable || (elementsSelectable && typeof node.selectable === 'undefined')); const isConnectable = !!(node.connectable || (nodesConnectable && typeof node.connectable === 'undefined')); - const posX = node.position?.x ?? 0; - const posY = node.position?.y ?? 0; + const clampedPosition = props.nodeExtent + ? clampPosition(node.positionAbsolute, props.nodeExtent) + : node.positionAbsolute; + + const posX = clampedPosition?.x ?? 0; + const posY = clampedPosition?.y ?? 0; const posOrigin = getPositionWithOrigin({ x: posX, y: posY, diff --git a/packages/core/src/container/ReactFlow/index.tsx b/packages/core/src/container/ReactFlow/index.tsx index 0285ba73..26dad727 100644 --- a/packages/core/src/container/ReactFlow/index.tsx +++ b/packages/core/src/container/ReactFlow/index.tsx @@ -225,6 +225,7 @@ const ReactFlow = forwardRef( rfId={rfId} disableKeyboardA11y={disableKeyboardA11y} nodeOrigin={nodeOrigin} + nodeExtent={nodeExtent} />