diff --git a/example/src/Provider/Sidebar.js b/example/src/Provider/Sidebar.js
index 41dc0891..ab8def0d 100644
--- a/example/src/Provider/Sidebar.js
+++ b/example/src/Provider/Sidebar.js
@@ -17,7 +17,7 @@ export default () => {
Nodes
{nodes.map((node) => (
- 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)}
))}
diff --git a/src/additional-components/MiniMap/MiniMapNode.tsx b/src/additional-components/MiniMap/MiniMapNode.tsx
index 3f316df9..e85ba788 100644
--- a/src/additional-components/MiniMap/MiniMapNode.tsx
+++ b/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;
diff --git a/src/components/ConnectionLine/index.tsx b/src/components/ConnectionLine/index.tsx
index 9297562c..10db3023 100644
--- a/src/components/ConnectionLine/index.tsx
+++ b/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.__rg.handleBounds[connectionHandleType][0];
- const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : sourceNode.__rg.width / 2;
- const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : sourceNode.__rg.height;
- const sourceX = sourceNode.__rg.position.x + sourceHandleX;
- const sourceY = sourceNode.__rg.position.y + sourceHandleY;
+ ? sourceNode.__rf.handleBounds[connectionHandleType].find((d: HandleElement) => d.id === handleId)
+ : sourceNode.__rf.handleBounds[connectionHandleType][0];
+ const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : sourceNode.__rf.width / 2;
+ const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : sourceNode.__rf.height;
+ const sourceX = sourceNode.__rf.position.x + sourceHandleX;
+ const sourceY = sourceNode.__rf.position.y + sourceHandleY;
const targetX = (connectionPositionX - transform[0]) * (1 / transform[2]);
const targetY = (connectionPositionY - transform[1]) * (1 / transform[2]);
diff --git a/src/components/NodesSelection/index.tsx b/src/components/NodesSelection/index.tsx
index 8a707657..37ffbd5a 100644
--- a/src/components/NodesSelection/index.tsx
+++ b/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,
- y: node.__rg.position.y || node.position.y,
+ x: node.__rf.position.x || node.position.x,
+ y: node.__rf.position.y || node.position.y,
};
res[node.id] = startPosition;
diff --git a/src/container/EdgeRenderer/index.tsx b/src/container/EdgeRenderer/index.tsx
index 23db059a..44275a60 100644
--- a/src/container/EdgeRenderer/index.tsx
+++ b/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,
- y: node.__rg.height / 2,
+ x: node.__rf.width,
+ y: node.__rf.height / 2,
};
case Position.Bottom:
return {
- x: node.__rg.width / 2,
- y: node.__rg.height,
+ x: node.__rf.width / 2,
+ 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 sourceY = sourceNode.__rg.position.y + sourceHandlePos.y;
+ const sourceX = sourceNode.__rf.position.x + sourceHandlePos.x;
+ const sourceY = sourceNode.__rf.position.y + sourceHandlePos.y;
const targetHandlePos = getHandlePosition(targetPosition, targetNode, targetHandle);
- const targetX = targetNode.__rg.position.x + targetHandlePos.x;
- const targetY = targetNode.__rg.position.y + targetHandlePos.y;
+ const targetX = targetNode.__rf.position.x + targetHandlePos.x;
+ 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 targetHandle = getHandle(targetNode.__rg.handleBounds.target, targetHandleId);
+ const sourceHandle = getHandle(sourceNode.__rf.handleBounds.source, sourceHandleId);
+ const targetHandle = getHandle(targetNode.__rf.handleBounds.target, targetHandleId);
const sourcePosition = sourceHandle ? sourceHandle.position : Position.Bottom;
const targetPosition = targetHandle ? targetHandle.position : Position.Top;
diff --git a/src/container/NodeRenderer/index.tsx b/src/container/NodeRenderer/index.tsx
index 6c9d684b..df5e68e5 100644
--- a/src/container/NodeRenderer/index.tsx
+++ b/src/container/NodeRenderer/index.tsx
@@ -34,8 +34,8 @@ function renderNode(
id={node.id}
type={nodeType}
data={node.data}
- xPos={node.__rg.position.x}
- yPos={node.__rg.position.y}
+ xPos={node.__rf.position.x}
+ yPos={node.__rf.position.y}
onClick={props.onElementClick}
onNodeDragStart={props.onNodeDragStart}
onNodeDragStop={props.onNodeDragStop}
diff --git a/src/hooks/useElementUpdater.ts b/src/hooks/useElementUpdater.ts
index c8c6936d..51877d11 100644
--- a/src/hooks/useElementUpdater.ts
+++ b/src/hooks/useElementUpdater.ts
@@ -39,8 +39,8 @@ const useElementUpdater = (elements: Elements): void => {
};
if (positionChanged) {
- nodeProps.__rg = {
- ...existingNode.__rg,
+ nodeProps.__rf = {
+ ...existingNode.__rf,
position: propNode.position,
};
nodeProps.position = propNode.position;
diff --git a/src/store/index.ts b/src/store/index.ts
index 7588aa52..68250901 100644
--- a/src/store/index.ts
+++ b/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.__rg,
+ n.__rf = {
+ ...n.__rf,
...dimensions,
handleBounds,
};
@@ -227,8 +227,8 @@ export const storeModel: StoreModel = {
state.nodes.forEach((n) => {
if (n.id === id) {
- n.__rg = {
- ...n.__rg,
+ n.__rf = {
+ ...n.__rf,
position,
};
}
diff --git a/src/types/index.ts b/src/types/index.ts
index 74697a9b..050ad740 100644
--- a/src/types/index.ts
+++ b/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;
diff --git a/src/utils/graph.ts b/src/utils/graph.ts
index d81affd3..5d6f7f4c 100644
--- a/src/utils/graph.ts
+++ b/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 })),