feat(core): support origin on node level closes #2874

examples/vite-app/src/examples/Subflow/index.tsx

@@ -29,12 +29,14 @@ const initialNodes: Node[] = [
     data: { label: 'Node 1' },
     position: { x: 250, y: 5 },
     className: 'light',
+    origin: [0.5, 0.5],
   },
   {
     id: '4',
     data: { label: 'Node 4' },
     position: { x: 100, y: 200 },
     className: 'light',
+    origin: [0.5, 0.5],
     style: {
       backgroundColor: 'rgba(255,50, 50, 0.5)',
       width: 500,
@@ -47,6 +49,8 @@ const initialNodes: Node[] = [
     position: { x: 15, y: 15 },
     className: 'light',
     parentNode: '4',
+    origin: [0.5, 0.5],
+
     extent: [
       [0, 0],
       [100, 100],

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

@@ -97,7 +97,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
           y: posY,
           width: node.width ?? 0,
           height: node.height ?? 0,
-          origin: props.nodeOrigin,
+          origin: node.origin || props.nodeOrigin,
         });
 
         return (

packages/core/src/hooks/useDrag/utils.ts

@@ -71,6 +71,7 @@ export function getDragItems(
       parentNode: n.parentNode,
       width: n.width,
       height: n.height,
+      origin: n.origin,
     }));
 }
 
@@ -87,14 +88,15 @@ export function calcNextPosition(
   if (node.extent === 'parent') {
     if (node.parentNode && node.width && node.height) {
       const parent = nodeInternals.get(node.parentNode);
-      const { x: parentX, y: parentY } = getNodePositionWithOrigin(parent, nodeOrigin).positionAbsolute;
+      const parentOrigin = parent?.origin || nodeOrigin;
+      const { x: parentX, y: parentY } = getNodePositionWithOrigin(parent, parentOrigin).positionAbsolute;
       currentExtent =
         parent && isNumeric(parentX) && isNumeric(parentY) && isNumeric(parent.width) && isNumeric(parent.height)
           ? [
-              [parentX + node.width * nodeOrigin[0], parentY + node.height * nodeOrigin[1]],
+              [parentX + node.width * parentOrigin[0], parentY + node.height * parentOrigin[1]],
               [
-                parentX + parent.width - node.width + node.width * nodeOrigin[0],
-                parentY + parent.height - node.height + node.height * nodeOrigin[1],
+                parentX + parent.width - node.width + node.width * parentOrigin[0],
+                parentY + parent.height - node.height + node.height * parentOrigin[1],
               ],
             ]
           : currentExtent;
@@ -105,7 +107,7 @@ export function calcNextPosition(
     }
   } else if (node.extent && node.parentNode) {
     const parent = nodeInternals.get(node.parentNode);
-    const { x: parentX, y: parentY } = getNodePositionWithOrigin(parent, nodeOrigin).positionAbsolute;
+    const { x: parentX, y: parentY } = getNodePositionWithOrigin(parent, parent?.origin || nodeOrigin).positionAbsolute;
     currentExtent = [
       [node.extent[0][0] + parentX, node.extent[0][1] + parentY],
       [node.extent[1][0] + parentX, node.extent[1][1] + parentY],
@@ -116,7 +118,7 @@ export function calcNextPosition(
 
   if (node.parentNode) {
     const parentNode = nodeInternals.get(node.parentNode);
-    parentPosition = getNodePositionWithOrigin(parentNode, nodeOrigin).positionAbsolute;
+    parentPosition = getNodePositionWithOrigin(parentNode, parentNode?.origin || nodeOrigin).positionAbsolute;
   }
 
   const positionAbsolute = currentExtent

packages/core/src/store/index.ts

@@ -92,8 +92,8 @@ const createRFStore = () =>
               [internalsSymbol]: {
                 ...node[internalsSymbol],
                 handleBounds: {
-                  source: getHandleBounds('.source', update.nodeElement, zoom, nodeOrigin),
-                  target: getHandleBounds('.target', update.nodeElement, zoom, nodeOrigin),
+                  source: getHandleBounds('.source', update.nodeElement, zoom, node.origin || nodeOrigin),
+                  target: getHandleBounds('.target', update.nodeElement, zoom, node.origin || nodeOrigin),
                 },
               },
               ...dimensions,

packages/core/src/store/utils.ts

@@ -16,7 +16,7 @@ function calculateXYZPosition(
     return result;
   }
   const parentNode = nodeInternals.get(node.parentNode)!;
-  const parentNodePosition = getNodePositionWithOrigin(parentNode, nodeOrigin);
+  const parentNodePosition = getNodePositionWithOrigin(parentNode, parentNode?.origin || nodeOrigin);
 
   return calculateXYZPosition(
     parentNode,
@@ -26,7 +26,7 @@ function calculateXYZPosition(
       y: (result.y ?? 0) + parentNodePosition.y,
       z: (parentNode[internalsSymbol]?.z ?? 0) > (result.z ?? 0) ? parentNode[internalsSymbol]?.z ?? 0 : result.z ?? 0,
     },
-    nodeOrigin
+    parentNode.origin || nodeOrigin
   );
 }
 
@@ -41,6 +41,7 @@ export function updateAbsoluteNodePositions(
     }
 
     if (node.parentNode || parentNodes?.[node.id]) {
+      const parentNode = node.parentNode ? nodeInternals.get(node.parentNode) : null;
       const { x, y, z } = calculateXYZPosition(
         node,
         nodeInternals,
@@ -48,7 +49,7 @@ export function updateAbsoluteNodePositions(
           ...node.position,
           z: node[internalsSymbol]?.z ?? 0,
         },
-        nodeOrigin
+        parentNode?.origin || nodeOrigin
       );
 
       node.positionAbsolute = {

packages/minimap/src/MiniMap.tsx

@@ -56,7 +56,7 @@ function MiniMap({
   nodeBorderRadius = 5,
   nodeStrokeWidth = 2,
   // We need to rename the prop to be `CapitalCase` so that JSX will render it as
-  // a component properly. 
+  // a component properly.
   nodeComponent: NodeComponent = MiniMapNode,
   maskColor = 'rgb(240, 240, 240, 0.6)',
   maskStrokeColor = 'none',
@@ -181,7 +181,7 @@ function MiniMap({
       >
         {ariaLabel && <title id={labelledBy}>{ariaLabel}</title>}
         {nodes.map((node) => {
-          const { x, y } = getNodePositionWithOrigin(node, nodeOrigin).positionAbsolute;
+          const { x, y } = getNodePositionWithOrigin(node, node.origin || nodeOrigin).positionAbsolute;
 
           return (
             <NodeComponent

packages/utils/src/graph.ts

@@ -216,7 +216,7 @@ export const getRectOfNodes = (nodes: BaseNode[], nodeOrigin: NodeOrigin = [0, 0
 
   const box = nodes.reduce(
     (currBox, node) => {
-      const { x, y } = getNodePositionWithOrigin(node, nodeOrigin).positionAbsolute;
+      const { x, y } = getNodePositionWithOrigin(node, node.origin || nodeOrigin).positionAbsolute;
       return getBoundsOfBoxes(
         currBox,
         rectToBox({
@@ -256,7 +256,7 @@ export const getNodesInside = <NodeType extends BaseNode>(
       return res;
     }
 
-    const { positionAbsolute } = getNodePositionWithOrigin(node, nodeOrigin);
+    const { positionAbsolute } = getNodePositionWithOrigin(node, node.origin || nodeOrigin);
 
     const nodeRect = {
       x: positionAbsolute.x,
@@ -316,7 +316,7 @@ export const getD3Transition = (selection: D3SelectionInstance, duration = 0) =>
 };
 
 export function fitView<Params extends FitViewParamsBase<BaseNode>, Options extends FitViewOptionsBase<BaseNode>>(
-  { nodes, width, height, d3Zoom, d3Selection, nodeOrigin, minZoom, maxZoom }: Params,
+  { nodes, width, height, d3Zoom, d3Selection, minZoom, maxZoom, nodeOrigin = [0, 0] }: Params,
   options?: Options
 ) {
   const filteredNodes = nodes.filter((n) => {

packages/utils/src/utils.ts

@@ -172,13 +172,13 @@ export const getPositionWithOrigin = ({
   y,
   width,
   height,
-  origin,
+  origin = [0, 0],
 }: {
   x: number;
   y: number;
   width: number;
   height: number;
-  origin: NodeOrigin;
+  origin?: NodeOrigin;
 }): XYPosition => {
   if (!width || !height) {
     return { x, y };