alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(internals): rename __rg to __rf

Browse Source
This commit is contained in:
moklick
2020-06-05 00:17:28 +02:00
parent 5bfe72f225
commit 5a3adab3a0
10 changed files with 37 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/src/Provider/Sidebar.js
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+6 -6
View File
@@ -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]);
src/components/NodesSelection/index.tsx
+2 -2
View File
@@ -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;
src/container/EdgeRenderer/index.tsx
+13 -13
View File
@@ -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;
src/container/NodeRenderer/index.tsx
+2 -2
View File
@@ -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}
src/hooks/useElementUpdater.ts
+2 -2
View File
@@ -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;
src/store/index.ts
+5 -5
View File
@@ -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,
};
}
src/types/index.ts
+1 -1
View File
@@ -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
+4 -4
View File
@@ -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 })),