Files
xyflow/src/NodeRenderer/index.js
T

43 lines
1.0 KiB
JavaScript
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import React, { PureComponent } from 'react';
import { Consumer } from '../GraphContext';
class NodeRenderer extends PureComponent {
renderNode(d, onElementClick) {
const nodeType = d.data.type || 'default';
if (!this.props.nodeTypes[nodeType]) {
console.warn(`No node type found for type "${nodeType}". Using fallback type "default".`);
}
const NodeComponent = this.props.nodeTypes[nodeType] || this.props.nodeTypes.default;
return (
<NodeComponent
key={d.data.id}
onClick={onElementClick}
{...d}
/>
);
}
render() {
return (
<Consumer>
{({ onElementClick, state }) => (
<div
className="react-graph__nodes"
style={{
transform: `translate(${state.transform[0]}px,${state.transform[1]}px) scale(${state.transform[2]})`
}}
>
{state.nodes.map(d => this.renderNode(d, onElementClick))}
</div>
)}
</Consumer>
);
}
}
export default NodeRenderer;