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

Split NodeRenderer into NodeRenderer and NodeComponentWrapper

Browse Source
This commit is contained in:
Ivan Akulov
2023-11-25 02:18:57 +01:00
parent 24390162e0
commit 99d945f33c
1 changed files with 113 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react/src/container/NodeRenderer/index.tsx
+62 -10
View File
@@ -76,19 +76,74 @@ const NodeRenderer = (props: NodeRendererProps) => {
return (
<div className="react-flow__nodes" style={containerStyle}>
{nodes.map((node) => {
return (
<NodeComponentWrapper
key={node.id}
id={node.id}
nodeTypes={props.nodeTypes}
nodeExtent={props.nodeExtent}
nodeOrigin={props.nodeOrigin}
onNodeClick={props.onNodeClick}
onNodeMouseEnter={props.onNodeMouseEnter}
onNodeMouseMove={props.onNodeMouseMove}
onNodeMouseLeave={props.onNodeMouseLeave}
onNodeContextMenu={props.onNodeContextMenu}
onNodeDoubleClick={props.onNodeDoubleClick}
noDragClassName={props.noDragClassName}
noPanClassName={props.noPanClassName}
rfId={props.rfId}
disableKeyboardA11y={props.disableKeyboardA11y}
resizeObserver={resizeObserver}
nodesDraggable={nodesDraggable}
nodesConnectable={nodesConnectable}
nodesFocusable={nodesFocusable}
elementsSelectable={elementsSelectable}
onError={onError}
/>
);
})}
</div>
);
};
const NodeComponentWrapper = memo(function NodeComponentWrapper(props: {
id: string;
nodeExtent: NodeRendererProps['nodeExtent'];
nodeTypes: NodeRendererProps['nodeTypes'];
nodeOrigin: NodeRendererProps['nodeOrigin'];
onNodeClick: NodeRendererProps['onNodeClick'];
onNodeMouseEnter: NodeRendererProps['onNodeMouseEnter'];
onNodeMouseMove: NodeRendererProps['onNodeMouseMove'];
onNodeMouseLeave: NodeRendererProps['onNodeMouseLeave'];
onNodeContextMenu: NodeRendererProps['onNodeContextMenu'];
onNodeDoubleClick: NodeRendererProps['onNodeDoubleClick'];
noDragClassName: NodeRendererProps['noDragClassName'];
noPanClassName: NodeRendererProps['noPanClassName'];
rfId: NodeRendererProps['rfId'];
disableKeyboardA11y: NodeRendererProps['disableKeyboardA11y'];
resizeObserver: ResizeObserver | null;
nodesDraggable: boolean;
nodesConnectable: boolean;
nodesFocusable: boolean;
elementsSelectable: boolean;
onError: ReactFlowState['onError'];
}) {
const node = useStore((s) => s.nodeLookup.get(props.id));
if (!node) return null;
let nodeType = node.type || 'default';
if (!props.nodeTypes[nodeType]) {
onError?.('003', errorMessages['error003'](nodeType));
props.onError?.('003', errorMessages['error003'](nodeType));
nodeType = 'default';
}
const NodeComponent = (props.nodeTypes[nodeType] || props.nodeTypes.default) as ComponentType<WrapNodeProps>;
const isDraggable = !!(node.draggable || (nodesDraggable && typeof node.draggable === 'undefined'));
const isSelectable = !!(node.selectable || (elementsSelectable && typeof node.selectable === 'undefined'));
const isConnectable = !!(node.connectable || (nodesConnectable && typeof node.connectable === 'undefined'));
const isFocusable = !!(node.focusable || (nodesFocusable && typeof node.focusable === 'undefined'));
const isDraggable = !!(node.draggable || (props.nodesDraggable && typeof node.draggable === 'undefined'));
const isSelectable = !!(node.selectable || (props.elementsSelectable && typeof node.selectable === 'undefined'));
const isConnectable = !!(node.connectable || (props.nodesConnectable && typeof node.connectable === 'undefined'));
const isFocusable = !!(node.focusable || (props.nodesFocusable && typeof node.focusable === 'undefined'));
const clampedPosition = props.nodeExtent
? clampPosition(node.computed?.positionAbsolute, props.nodeExtent)
@@ -134,7 +189,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
isSelectable={isSelectable}
isConnectable={isConnectable}
isFocusable={isFocusable}
resizeObserver={resizeObserver}
resizeObserver={props.resizeObserver}
dragHandle={node.dragHandle}
zIndex={node[internalsSymbol]?.z ?? 0}
isParent={!!node[internalsSymbol]?.isParent}
@@ -146,10 +201,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
ariaLabel={node.ariaLabel}
/>
);
})}
</div>
);
};
});
NodeRenderer.displayName = 'NodeRenderer';