feat(nodes): add nodeOrigin prop

packages/core/src/container/FlowRenderer/index.tsx

@@ -24,6 +24,7 @@ export type FlowRendererProps = Omit<
   | 'selectNodesOnDrag'
   | 'defaultMarkerColor'
   | 'rfId'
+  | 'nodeOrigin'
 > & {
   children: ReactNode;
 };

packages/core/src/container/GraphView/index.tsx

@@ -13,6 +13,7 @@ import {
   ReactFlowProps,
   Viewport,
   CoordinateExtent,
+  NodeOrigin,
 } from '../../types';
 
 export interface GraphViewProps
@@ -35,6 +36,7 @@ export interface GraphViewProps
   defaultViewport: Viewport;
   rfId: string;
   disableKeyboardA11y: boolean;
+  nodeOrigin: NodeOrigin;
 }
 
 const GraphView = ({
@@ -96,6 +98,7 @@ const GraphView = ({
   noPanClassName,
   elevateEdgesOnSelect,
   disableKeyboardA11y,
+  nodeOrigin,
   rfId,
 }: GraphViewProps) => {
   useOnInitHandler(onInit);
@@ -171,6 +174,7 @@ const GraphView = ({
           noPanClassName={noPanClassName}
           noDragClassName={noDragClassName}
           disableKeyboardA11y={disableKeyboardA11y}
+          nodeOrigin={nodeOrigin}
           rfId={rfId}
         />
       </ViewportWrapper>

packages/core/src/container/NodeRenderer/index.tsx

@@ -7,6 +7,7 @@ import { internalsSymbol } from '../../utils';
 import { containerStyle } from '../../styles';
 import { GraphViewProps } from '../GraphView';
 import { Position, ReactFlowState, WrapNodeProps } from '../../types';
+import { getPositionWithOrigin } from './utils';
 
 type NodeRendererProps = Pick<
   GraphViewProps,
@@ -23,6 +24,7 @@ type NodeRendererProps = Pick<
   | 'noDragClassName'
   | 'rfId'
   | 'disableKeyboardA11y'
+  | 'nodeOrigin'
 >;
 
 const selector = (s: ReactFlowState) => ({
@@ -81,6 +83,15 @@ 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 posOrigin = getPositionWithOrigin({
+          x: posX,
+          y: posY,
+          width: node.width ?? 0,
+          height: node.height ?? 0,
+          origin: props.nodeOrigin,
+        });
 
         return (
           <NodeComponent
@@ -93,8 +104,10 @@ const NodeRenderer = (props: NodeRendererProps) => {
             sourcePosition={node.sourcePosition || Position.Bottom}
             targetPosition={node.targetPosition || Position.Top}
             hidden={node.hidden}
-            xPos={node.positionAbsolute?.x ?? 0}
-            yPos={node.positionAbsolute?.y ?? 0}
+            xPos={posX}
+            yPos={posY}
+            xPosOrigin={posOrigin.x}
+            yPosOrigin={posOrigin.y}
             selectNodesOnDrag={props.selectNodesOnDrag}
             onClick={props.onNodeClick}
             onMouseEnter={props.onNodeMouseEnter}

packages/core/src/container/NodeRenderer/utils.ts

@@ -5,7 +5,7 @@ import InputNode from '../../components/Nodes/InputNode';
 import OutputNode from '../../components/Nodes/OutputNode';
 import GroupNode from '../../components/Nodes/GroupNode';
 import wrapNode from '../../components/Nodes/wrapNode';
-import { NodeTypes, NodeProps, NodeTypesWrapped } from '../../types';
+import { NodeTypes, NodeProps, NodeTypesWrapped, NodeOrigin, XYPosition } from '../../types';
 
 export type CreateNodeTypes = (nodeTypes: NodeTypes) => NodeTypesWrapped;
 
@@ -31,3 +31,31 @@ export function createNodeTypes(nodeTypes: NodeTypes): NodeTypesWrapped {
     ...specialTypes,
   };
 }
+
+export const getPositionWithOrigin = ({
+  x,
+  y,
+  width,
+  height,
+  origin,
+}: {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  origin: NodeOrigin;
+}): XYPosition => {
+  if (!width || !height) {
+    return { x, y };
+  }
+
+  if (origin[0] < 0 || origin[1] < 0 || origin[0] > 1 || origin[1] > 1) {
+    console.warn('[ReactFlow]: nodeOrigin must be between 0 and 1');
+    return { x, y };
+  }
+
+  return {
+    x: x - width * origin[0],
+    y: y - height * origin[1],
+  };
+};

packages/core/src/container/ReactFlow/index.tsx

@@ -6,6 +6,7 @@ import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge }
 import DefaultNode from '../../components/Nodes/DefaultNode';
 import InputNode from '../../components/Nodes/InputNode';
 import OutputNode from '../../components/Nodes/OutputNode';
+import GroupNode from '../../components/Nodes/GroupNode';
 import SelectionListener from '../../components/SelectionListener';
 import StoreUpdater from '../../components/StoreUpdater';
 
@@ -14,6 +15,7 @@ import {
   ConnectionMode,
   EdgeTypes,
   EdgeTypesWrapped,
+  NodeOrigin,
   NodeTypes,
   NodeTypesWrapped,
   PanOnScrollMode,
@@ -33,6 +35,7 @@ const defaultNodeTypes: NodeTypes = {
   input: InputNode,
   default: DefaultNode,
   output: OutputNode,
+  group: GroupNode,
 };
 
 const defaultEdgeTypes: EdgeTypes = {
@@ -43,6 +46,7 @@ const defaultEdgeTypes: EdgeTypes = {
   simplebezier: SimpleBezierEdge,
 };
 
+const initNodeOrigin: NodeOrigin = [0, 0];
 const initSnapGrid: [number, number] = [15, 15];
 const initDefaultViewport: Viewport = { x: 0, y: 0, zoom: 1 };
 
@@ -104,6 +108,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
       selectNodesOnDrag = true,
       nodesDraggable,
       nodesConnectable,
+      nodeOrigin = initNodeOrigin,
       elementsSelectable,
       defaultViewport = initDefaultViewport,
       minZoom = 0.5,
@@ -219,6 +224,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             elevateEdgesOnSelect={elevateEdgesOnSelect}
             rfId={rfId}
             disableKeyboardA11y={disableKeyboardA11y}
+            nodeOrigin={nodeOrigin}
           />
           <StoreUpdater
             nodes={nodes}