Merge branch 'next' into enhance-connection-more

packages/react/src/components/NodeWrapper/index.tsx

@@ -6,7 +6,6 @@ import {
   elementSelectionKeys,
   errorMessages,
   getNodeDimensions,
-  getPositionWithOrigin,
   isInputDOMNode,
   nodeHasDimensions,
 } from '@xyflow/system';
@@ -40,7 +39,6 @@ export function NodeWrapper<NodeType extends Node>({
   rfId,
   nodeTypes,
   nodeExtent,
-  nodeOrigin,
   onError,
 }: NodeWrapperProps<NodeType>) {
   const { node, internals, isParent } = useStore((s) => {
@@ -87,15 +85,11 @@ export function NodeWrapper<NodeType extends Node>({
 
   const nodeDimensions = getNodeDimensions(node);
   const inlineDimensions = getNodeInlineStyleDimensions(node);
+  // TODO: clamping should happen earlier
   const clampedPosition = nodeExtent
     ? clampPosition(internals.positionAbsolute, nodeExtent)
     : internals.positionAbsolute;
 
-  const positionWithOrigin = getPositionWithOrigin({
-    ...clampedPosition,
-    ...nodeDimensions,
-    origin: node.origin || nodeOrigin,
-  });
   const hasPointerEvents = isSelectable || isDraggable || onClick || onMouseEnter || onMouseMove || onMouseLeave;
 
   const onMouseEnterHandler = onMouseEnter
@@ -181,7 +175,7 @@ export function NodeWrapper<NodeType extends Node>({
       ref={nodeRef}
       style={{
         zIndex: internals.z,
-        transform: `translate(${positionWithOrigin.x}px,${positionWithOrigin.y}px)`,
+        transform: `translate(${clampedPosition.x}px,${clampedPosition.y}px)`,
         pointerEvents: hasPointerEvents ? 'all' : 'none',
         visibility: hasDimensions ? 'visible' : 'hidden',
         ...node.style,

packages/react/src/components/NodesSelection/index.tsx

@@ -21,7 +21,6 @@ export type NodesSelectionProps<NodeType> = {
 
 const selector = (s: ReactFlowState) => {
   const { width, height, x, y } = getInternalNodesBounds(s.nodeLookup, {
-    nodeOrigin: s.nodeOrigin,
     filter: (node) => !!node.selected,
   });
 

packages/react/src/components/ReactFlowProvider/index.tsx

@@ -4,6 +4,7 @@ import { Provider } from '../../contexts/StoreContext';
 import { createStore } from '../../store';
 import { BatchProvider } from '../BatchProvider';
 import type { Node, Edge } from '../../types';
+import { NodeOrigin } from '@xyflow/system';
 
 export type ReactFlowProviderProps = {
   initialNodes?: Node[];
@@ -13,6 +14,7 @@ export type ReactFlowProviderProps = {
   initialWidth?: number;
   initialHeight?: number;
   fitView?: boolean;
+  nodeOrigin?: NodeOrigin;
   children: ReactNode;
 };
 
@@ -24,6 +26,7 @@ export function ReactFlowProvider({
   initialWidth: width,
   initialHeight: height,
   fitView,
+  nodeOrigin,
   children,
 }: ReactFlowProviderProps) {
   const [store] = useState(() =>
@@ -35,6 +38,7 @@ export function ReactFlowProvider({
       width,
       height,
       fitView,
+      nodeOrigin,
     })
   );