refactor(internals): rename __rg to __rf

example/src/Provider/Sidebar.js

@@ -17,7 +17,7 @@ export default () => {
       <div className="title">Nodes</div>
       {nodes.map((node) => (
         <div key={node.id}>
-          Node {node.id} - x: {node.__rg.position.x.toFixed(2)}, y: {node.__rg.position.y.toFixed(2)}
+          Node {node.id} - x: {node.__rf.position.x.toFixed(2)}, y: {node.__rf.position.y.toFixed(2)}
         </div>
       ))}
     </aside>

src/additional-components/MiniMap/MiniMapNode.tsx

@@ -13,7 +13,7 @@ const MiniMapNode = ({ node, color, borderRadius }: MiniMapNodeProps) => {
     position: { x, y },
     width,
     height,
-  } = node.__rg;
+  } = node.__rf;
   const { background, backgroundColor } = node.style || {};
   const fill = (background || backgroundColor || color) as string;
 

src/components/ConnectionLine/index.tsx

@@ -46,12 +46,12 @@ export default ({
   const connectionLineClasses: string = cx('react-flow__connection', className);
 
   const sourceHandle = handleId
-    ? sourceNode.__rg.handleBounds[connectionHandleType].find((d: HandleElement) => d.id === handleId)
+    ? sourceNode.__rf.handleBounds[connectionHandleType].find((d: HandleElement) => d.id === handleId)
-    : sourceNode.__rg.handleBounds[connectionHandleType][0];
+    : sourceNode.__rf.handleBounds[connectionHandleType][0];
-  const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : sourceNode.__rg.width / 2;
+  const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : sourceNode.__rf.width / 2;
-  const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : sourceNode.__rg.height;
+  const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : sourceNode.__rf.height;
-  const sourceX = sourceNode.__rg.position.x + sourceHandleX;
+  const sourceX = sourceNode.__rf.position.x + sourceHandleX;
-  const sourceY = sourceNode.__rg.position.y + sourceHandleY;
+  const sourceY = sourceNode.__rf.position.y + sourceHandleY;
 
   const targetX = (connectionPositionX - transform[0]) * (1 / transform[2]);
   const targetY = (connectionPositionY - transform[1]) * (1 / transform[2]);

src/components/NodesSelection/index.tsx

@@ -17,8 +17,8 @@ function getStartPositions(nodes: Node[]): StartPositions {
 
   return nodes.reduce((res, node) => {
     const startPosition = {
-      x: node.__rg.position.x || node.position.x,
+      x: node.__rf.position.x || node.position.x,
-      y: node.__rg.position.y || node.position.y,
+      y: node.__rf.position.y || node.position.y,
     };
 
     res[node.id] = startPosition;

src/container/EdgeRenderer/index.tsx

@@ -26,23 +26,23 @@ function getHandlePosition(position: Position, node: Node, handle: any | null =
     switch (position) {
       case Position.Top:
         return {
-          x: node.__rg.width / 2,
+          x: node.__rf.width / 2,
           y: 0,
         };
       case Position.Right:
         return {
-          x: node.__rg.width,
+          x: node.__rf.width,
-          y: node.__rg.height / 2,
+          y: node.__rf.height / 2,
         };
       case Position.Bottom:
         return {
-          x: node.__rg.width / 2,
+          x: node.__rf.width / 2,
-          y: node.__rg.height,
+          y: node.__rf.height,
         };
       case Position.Left:
         return {
           x: 0,
-          y: node.__rg.height / 2,
+          y: node.__rf.height / 2,
         };
     }
   }
@@ -98,12 +98,12 @@ function getEdgePositions(
   targetPosition: Position
 ): EdgePositions {
   const sourceHandlePos = getHandlePosition(sourcePosition, sourceNode, sourceHandle);
-  const sourceX = sourceNode.__rg.position.x + sourceHandlePos.x;
+  const sourceX = sourceNode.__rf.position.x + sourceHandlePos.x;
-  const sourceY = sourceNode.__rg.position.y + sourceHandlePos.y;
+  const sourceY = sourceNode.__rf.position.y + sourceHandlePos.y;
 
   const targetHandlePos = getHandlePosition(targetPosition, targetNode, targetHandle);
-  const targetX = targetNode.__rg.position.x + targetHandlePos.x;
+  const targetX = targetNode.__rf.position.x + targetHandlePos.x;
-  const targetY = targetNode.__rg.position.y + targetHandlePos.y;
+  const targetY = targetNode.__rf.position.y + targetHandlePos.y;
 
   return {
     sourceX,
@@ -134,14 +134,14 @@ function renderEdge(
     throw new Error(`couldn't create edge for target id: ${targetId}`);
   }
 
-  if (!sourceNode.__rg.width || !sourceNode.__rg.height) {
+  if (!sourceNode.__rf.width || !sourceNode.__rf.height) {
     return null;
   }
 
   const edgeType = edge.type || 'default';
   const EdgeComponent = props.edgeTypes[edgeType] || props.edgeTypes.default;
-  const sourceHandle = getHandle(sourceNode.__rg.handleBounds.source, sourceHandleId);
+  const sourceHandle = getHandle(sourceNode.__rf.handleBounds.source, sourceHandleId);
-  const targetHandle = getHandle(targetNode.__rg.handleBounds.target, targetHandleId);
+  const targetHandle = getHandle(targetNode.__rf.handleBounds.target, targetHandleId);
   const sourcePosition = sourceHandle ? sourceHandle.position : Position.Bottom;
   const targetPosition = targetHandle ? targetHandle.position : Position.Top;
 

src/container/NodeRenderer/index.tsx

@@ -34,8 +34,8 @@ function renderNode(
       id={node.id}
       type={nodeType}
       data={node.data}
-      xPos={node.__rg.position.x}
+      xPos={node.__rf.position.x}
-      yPos={node.__rg.position.y}
+      yPos={node.__rf.position.y}
       onClick={props.onElementClick}
       onNodeDragStart={props.onNodeDragStart}
       onNodeDragStop={props.onNodeDragStop}

src/hooks/useElementUpdater.ts

@@ -39,8 +39,8 @@ const useElementUpdater = (elements: Elements): void => {
         };
 
         if (positionChanged) {
-          nodeProps.__rg = {
+          nodeProps.__rf = {
-            ...existingNode.__rg,
+            ...existingNode.__rf,
             position: propNode.position,
           };
           nodeProps.position = propNode.position;

src/store/index.ts

@@ -192,7 +192,7 @@ export const storeModel: StoreModel = {
     // only update when size change
     if (
       !matchingNode ||
-      (matchingNode.__rg.width === dimensions.width && matchingNode.__rg.height === dimensions.height)
+      (matchingNode.__rf.width === dimensions.width && matchingNode.__rf.height === dimensions.height)
     ) {
       return;
     }
@@ -204,8 +204,8 @@ export const storeModel: StoreModel = {
 
     state.nodes.forEach((n) => {
       if (n.id === id) {
-        n.__rg = {
+        n.__rf = {
-          ...n.__rg,
+          ...n.__rf,
           ...dimensions,
           handleBounds,
         };
@@ -227,8 +227,8 @@ export const storeModel: StoreModel = {
 
     state.nodes.forEach((n) => {
       if (n.id === id) {
-        n.__rg = {
+        n.__rf = {
-          ...n.__rg,
+          ...n.__rf,
           position,
         };
       }

src/types/index.ts

@@ -34,7 +34,7 @@ export interface Node {
   id: ElementId;
   position: XYPosition;
   type?: string;
-  __rg?: any;
+  __rf?: any;
   data?: any;
   style?: CSSProperties;
   className?: string;

src/utils/graph.ts

@@ -94,7 +94,7 @@ export const parseElement = (element: Node | Edge): Node | Edge => {
     ...element,
     id: element.id.toString(),
     type: element.type || 'default',
-    __rg: {
+    __rf: {
       position: element.position,
       width: null,
       height: null,
@@ -129,7 +129,7 @@ export const getBoundsofRects = (rect1: Rect, rect2: Rect): Rect =>
 
 export const getRectOfNodes = (nodes: Node[]): Rect => {
   const box = nodes.reduce(
-    (currBox, { __rg: { position, width, height } }) =>
+    (currBox, { __rf: { position, width, height } }) =>
       getBoundsOfBoxes(currBox, rectToBox({ ...position, width, height })),
     { x: Infinity, y: Infinity, x2: -Infinity, y2: -Infinity }
   );
@@ -155,7 +155,7 @@ export const getNodesInside = (
     height: rect.height / tScale,
   });
 
-  return nodes.filter(({ __rg: { position, width, height } }) => {
+  return nodes.filter(({ __rf: { position, width, height } }) => {
     const nBox = rectToBox({ ...position, width, height });
     const xOverlap = Math.max(0, Math.min(rBox.x2, nBox.x2) - Math.max(rBox.x, nBox.x));
     const yOverlap = Math.max(0, Math.min(rBox.y2, nBox.y2) - Math.max(rBox.y, nBox.y));
@@ -199,7 +199,7 @@ export const getElements = (): Elements => {
     ...nodes.map((node) => {
       const n = { ...node };
 
-      delete n.__rg;
+      delete n.__rf;
       return n;
     }),
     ...edges.map((e) => ({ ...e })),