127 lines
4.5 KiB
TypeScript
127 lines
4.5 KiB
TypeScript
import React, { memo, useMemo, ComponentType, MouseEvent } from 'react';
|
|
|
|
import { useStore } from '../../store';
|
|
import { Node, NodeTypesType, ReactFlowState, Edge, WrapNodeProps } from '../../types';
|
|
interface NodeRendererProps {
|
|
nodeTypes: NodeTypesType;
|
|
selectNodesOnDrag: boolean;
|
|
onElementClick?: (event: MouseEvent, element: Node | Edge) => void;
|
|
onNodeDoubleClick?: (event: MouseEvent, element: Node) => void;
|
|
onNodeMouseEnter?: (event: MouseEvent, node: Node) => void;
|
|
onNodeMouseMove?: (event: MouseEvent, node: Node) => void;
|
|
onNodeMouseLeave?: (event: MouseEvent, node: Node) => void;
|
|
onNodeContextMenu?: (event: MouseEvent, node: Node) => void;
|
|
onNodeDragStart?: (event: MouseEvent, node: Node) => void;
|
|
onNodeDrag?: (event: MouseEvent, node: Node) => void;
|
|
onNodeDragStop?: (event: MouseEvent, node: Node) => void;
|
|
snapToGrid: boolean;
|
|
snapGrid: [number, number];
|
|
onlyRenderVisibleElements: boolean;
|
|
}
|
|
|
|
const selector = (s: ReactFlowState) => ({
|
|
transform: s.transform,
|
|
selectedElements: s.selectedElements,
|
|
nodesDraggable: s.nodesDraggable,
|
|
nodesConnectable: s.nodesConnectable,
|
|
elementsSelectable: s.elementsSelectable,
|
|
nodes: s.nodes,
|
|
updateNodeDimensions: s.updateNodeDimensions,
|
|
});
|
|
|
|
const NodeRenderer = (props: NodeRendererProps) => {
|
|
const {
|
|
transform,
|
|
selectedElements,
|
|
nodesDraggable,
|
|
nodesConnectable,
|
|
elementsSelectable,
|
|
nodes,
|
|
updateNodeDimensions,
|
|
} = useStore(selector);
|
|
|
|
// const visibleNodes = props.onlyRenderVisibleElements
|
|
// ? getNodesInside(nodes, { x: 0, y: 0, width, height }, transform, true)
|
|
// : nodes;
|
|
|
|
const transformStyle = useMemo(
|
|
() => ({
|
|
transform: `translate(${transform[0]}px,${transform[1]}px) scale(${transform[2]})`,
|
|
}),
|
|
[transform[0], transform[1], transform[2]]
|
|
);
|
|
|
|
const resizeObserver = useMemo(() => {
|
|
if (typeof ResizeObserver === 'undefined') {
|
|
return null;
|
|
}
|
|
|
|
return new ResizeObserver((entries: ResizeObserverEntry[]) => {
|
|
const updates = entries.map((entry: ResizeObserverEntry) => ({
|
|
id: entry.target.getAttribute('data-id') as string,
|
|
nodeElement: entry.target as HTMLDivElement,
|
|
}));
|
|
|
|
updateNodeDimensions(updates);
|
|
});
|
|
}, []);
|
|
|
|
return (
|
|
<div className="react-flow__nodes" style={transformStyle}>
|
|
{nodes.map((node) => {
|
|
const nodeType = node.type || 'default';
|
|
const NodeComponent = (props.nodeTypes[nodeType] || props.nodeTypes.default) as ComponentType<WrapNodeProps>;
|
|
|
|
if (!props.nodeTypes[nodeType]) {
|
|
console.warn(`Node type "${nodeType}" not found. Using fallback type "default".`);
|
|
}
|
|
|
|
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'));
|
|
|
|
return (
|
|
<NodeComponent
|
|
key={node.id}
|
|
id={node.id}
|
|
className={node.className}
|
|
style={node.style}
|
|
type={nodeType}
|
|
data={node.data}
|
|
sourcePosition={node.sourcePosition}
|
|
targetPosition={node.targetPosition}
|
|
isHidden={node.isHidden}
|
|
xPos={node.position.x}
|
|
yPos={node.position.y}
|
|
isDragging={node.isDragging}
|
|
isInitialized={node.width !== null && node.height !== null}
|
|
snapGrid={props.snapGrid}
|
|
snapToGrid={props.snapToGrid}
|
|
selectNodesOnDrag={props.selectNodesOnDrag}
|
|
onClick={props.onElementClick}
|
|
onMouseEnter={props.onNodeMouseEnter}
|
|
onMouseMove={props.onNodeMouseMove}
|
|
onMouseLeave={props.onNodeMouseLeave}
|
|
onContextMenu={props.onNodeContextMenu}
|
|
onNodeDoubleClick={props.onNodeDoubleClick}
|
|
onNodeDragStart={props.onNodeDragStart}
|
|
onNodeDrag={props.onNodeDrag}
|
|
onNodeDragStop={props.onNodeDragStop}
|
|
scale={transform[2]}
|
|
selected={selectedElements?.some(({ id }) => id === node.id) || false}
|
|
isDraggable={isDraggable}
|
|
isSelectable={isSelectable}
|
|
isConnectable={isConnectable}
|
|
resizeObserver={resizeObserver}
|
|
dragHandle={node.dragHandle}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
NodeRenderer.displayName = 'NodeRenderer';
|
|
|
|
export default memo(NodeRenderer);
|