From 5a3adab3a0b21af2c0111d9fb16dfd059142d27c Mon Sep 17 00:00:00 2001 From: moklick Date: Fri, 5 Jun 2020 00:17:28 +0200 Subject: [PATCH] refactor(internals): rename __rg to __rf --- example/src/Provider/Sidebar.js | 2 +- .../MiniMap/MiniMapNode.tsx | 2 +- src/components/ConnectionLine/index.tsx | 12 ++++----- src/components/NodesSelection/index.tsx | 4 +-- src/container/EdgeRenderer/index.tsx | 26 +++++++++---------- src/container/NodeRenderer/index.tsx | 4 +-- src/hooks/useElementUpdater.ts | 4 +-- src/store/index.ts | 10 +++---- src/types/index.ts | 2 +- src/utils/graph.ts | 8 +++--- 10 files changed, 37 insertions(+), 37 deletions(-) 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 })),