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

Merge branch 'nested-nodes' of github.com:wbkd/react-flow into nested-nodes

Browse Source
This commit is contained in:
Christopher Möller
2021-10-21 11:53:56 +02:00
parent 9ad894d2df 8f23321bd0
commit 8d840b5820
6 changed files with 180 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Nodes/wrapNode.tsx
+2 -1
View File
@@ -48,6 +48,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
isDragging,
resizeObserver,
dragHandle,
zIndex,
}: WrapNodeProps) => {
const {
addSelectedElements,
@@ -63,7 +64,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
const nodeStyle: CSSProperties = useMemo(
() => ({
zIndex: isSelected ? 10 : 3,
zIndex: isSelected ? zIndex + 1 : zIndex,
transform: `translate(${xPos}px,${yPos}px)`,
pointerEvents:
isSelectable || isDraggable || onClick || onMouseEnter || onMouseMove || onMouseLeave ? 'all' : 'none',
src/container/EdgeRenderer/index.tsx
+3 -33
View File
@@ -4,7 +4,7 @@ import shallow from 'zustand/shallow';
import { useStore } from '../../store';
import ConnectionLine from '../../components/ConnectionLine/index';
import MarkerDefinitions from './MarkerDefinitions';
import { getEdgePositions, getHandle, getSourceTargetNodes, isEdgeVisible } from './utils';
import { getEdgePositions, getHandle, getSourceTargetNodes } from './utils';
import {
Position,
Edge,
@@ -16,6 +16,7 @@ import {
ReactFlowState,
NodeHandleBounds,
} from '../../types';
import useVisibleEdges from '../../hooks/useVisibleEdges';
interface EdgeRendererProps {
edgeTypes: any;
@@ -234,38 +235,7 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
nodes,
} = useStore(selector, shallow);
const edges = useStore(
useCallback(
(s: ReactFlowState) => {
if (!props.onlyRenderVisibleElements) {
return s.edges;
}
return s.edges.filter((e) => {
const { sourceNode, targetNode } = getSourceTargetNodes(e, s.nodes);
return (
sourceNode?.width &&
sourceNode?.height &&
targetNode?.width &&
targetNode?.height &&
isEdgeVisible({
sourcePos: sourceNode.position,
targetPos: targetNode.position,
sourceWidth: sourceNode.width,
sourceHeight: sourceNode.height,
targetWidth: targetNode.width,
targetHeight: targetNode.height,
width: s.width,
height: s.height,
transform: s.transform,
})
);
});
},
[props.onlyRenderVisibleElements]
)
);
const edges = useVisibleEdges(props.onlyRenderVisibleElements);
if (!width) {
return null;
src/container/NodeRenderer/index.tsx
+108 -115
View File
@@ -1,9 +1,10 @@
import React, { memo, useMemo, ComponentType, MouseEvent, useCallback, Fragment } from 'react';
import React, { memo, useMemo, ComponentType, MouseEvent, Fragment } from 'react';
import shallow from 'zustand/shallow';
import { useStore } from '../../store';
import { Node, NodeTypesType, ReactFlowState, WrapNodeProps, SnapGrid } from '../../types';
import { getNodesInside, getRectOfNodes } from '../../utils/graph';
import { getRectOfNodes } from '../../utils/graph';
import useVisibleNodes from '../../hooks/useVisibleNodes';
interface NodeRendererProps {
nodeTypes: NodeTypesType;
selectNodesOnDrag: boolean;
@@ -39,111 +40,112 @@ interface NodesProps extends NodeRendererProps {
nodesDraggable: boolean;
nodesConnectable: boolean;
elementsSelectable: boolean;
recursionDepth: number;
}
const Nodes = memo(
({
nodes = [],
isDraggable,
resizeObserver,
scale,
snapToGrid,
snapGrid,
nodesDraggable,
nodesConnectable,
elementsSelectable,
...props
}: NodesProps) => {
function Nodes({
nodes = [],
isDraggable,
resizeObserver,
scale,
snapToGrid,
snapGrid,
nodesDraggable,
nodesConnectable,
elementsSelectable,
recursionDepth,
...props
}: NodesProps): any {
return nodes.map((node) => {
const nodeType = node.type || 'default';
if (!props.nodeTypes[nodeType]) {
console.warn(`Node type "${nodeType}" not found. Using fallback type "default".`);
}
const NodeComponent = (props.nodeTypes[nodeType] || props.nodeTypes.default) as ComponentType<WrapNodeProps>;
const isNodeDraggable =
typeof isDraggable !== 'undefined'
? 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 isInitialized =
node.width !== null &&
node.height !== null &&
typeof node.width !== 'undefined' &&
typeof node.height !== 'undefined';
let childRect;
if (node.childNodes) {
childRect = getRectOfNodes(node.childNodes);
node.position = node.isDragging
? node.position
: { x: Math.round(childRect.x) - 10, y: Math.round(childRect.y) - 10 };
node.style = {
...node.style,
width: Math.round(childRect.width) + 20,
height: Math.round(childRect.height) + 20,
boxSizing: 'border-box',
};
}
return (
<>
{nodes.map((node) => {
const nodeType = node.type || 'default';
if (!props.nodeTypes[nodeType]) {
console.warn(`Node type "${nodeType}" not found. Using fallback type "default".`);
}
const NodeComponent = (props.nodeTypes[nodeType] || props.nodeTypes.default) as ComponentType<WrapNodeProps>;
const isNodeDraggable =
typeof isDraggable !== 'undefined'
? 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 isInitialized =
node.width !== null &&
node.height !== null &&
typeof node.width !== 'undefined' &&
typeof node.height !== 'undefined';
if (node.childNodes) {
const childRect = getRectOfNodes(node.childNodes);
node.position = node.isDragging
? node.position
: { x: Math.round(childRect.x) - 10, y: Math.round(childRect.y) - 10 };
node.style = {
...node.style,
width: Math.round(childRect.width) + 20,
height: Math.round(childRect.height) + 20,
boxSizing: 'border-box',
};
}
return (
<Fragment key={node.id}>
<NodeComponent
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={isInitialized}
snapGrid={snapGrid}
snapToGrid={snapToGrid}
selectNodesOnDrag={props.selectNodesOnDrag}
onClick={props.onNodeClick}
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={scale}
isSelected={!!node.isSelected}
isDraggable={isNodeDraggable}
isSelectable={isSelectable}
isConnectable={isConnectable}
resizeObserver={resizeObserver}
dragHandle={node.dragHandle}
/>
{node.childNodes && (
<Nodes
nodes={node.childNodes}
snapToGrid={snapToGrid}
snapGrid={snapGrid}
nodesDraggable={nodesDraggable}
nodesConnectable={nodesConnectable}
resizeObserver={resizeObserver}
elementsSelectable={elementsSelectable}
scale={scale}
{...props}
/>
)}
</Fragment>
);
})}
</>
<Fragment key={node.id}>
<NodeComponent
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={isInitialized}
snapGrid={snapGrid}
snapToGrid={snapToGrid}
selectNodesOnDrag={props.selectNodesOnDrag}
onClick={props.onNodeClick}
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={scale}
isSelected={!!node.isSelected}
isDraggable={isNodeDraggable}
isSelectable={isSelectable}
isConnectable={isConnectable}
resizeObserver={resizeObserver}
dragHandle={node.dragHandle}
zIndex={3 + recursionDepth}
/>
{node.childNodes && (
<MemoizedNodes
nodes={node.childNodes}
snapToGrid={snapToGrid}
snapGrid={snapGrid}
nodesDraggable={nodesDraggable}
nodesConnectable={nodesConnectable}
resizeObserver={resizeObserver}
elementsSelectable={elementsSelectable}
scale={scale}
recursionDepth={recursionDepth + 1}
{...props}
/>
)}
</Fragment>
);
}
);
});
}
const MemoizedNodes = memo(Nodes);
const NodeRenderer = (props: NodeRendererProps) => {
const {
@@ -155,17 +157,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
snapGrid,
snapToGrid,
} = useStore(selector, shallow);
const nodes = useStore(
useCallback(
(s: ReactFlowState) => {
return props.onlyRenderVisibleElements
? getNodesInside(s.nodes, { x: 0, y: 0, width: s.width, height: s.height }, s.transform, true)
: s.nodes;
},
[props.onlyRenderVisibleElements]
)
);
const nodes = useVisibleNodes(props.onlyRenderVisibleElements);
const transformStyle = useMemo(
() => ({
@@ -191,7 +183,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
return (
<div className="react-flow__nodes" style={transformStyle}>
<Nodes
<MemoizedNodes
nodes={nodes}
snapToGrid={snapToGrid}
snapGrid={snapGrid}
@@ -200,6 +192,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
resizeObserver={resizeObserver}
elementsSelectable={elementsSelectable}
scale={transform[2]}
recursionDepth={0}
{...props}
/>
</div>
src/hooks/useVisibleEdges.ts
+44
View File
@@ -0,0 +1,44 @@
import { useCallback } from 'react';
import { useStore } from '../store';
import { isEdgeVisible, getSourceTargetNodes } from '../container/EdgeRenderer/utils';
import { ReactFlowState } from '../types';
function useVisibleEdges(onlyRenderVisible: boolean) {
const edges = useStore(
useCallback(
(s: ReactFlowState) => {
if (!onlyRenderVisible) {
return s.edges;
}
return s.edges.filter((e) => {
const { sourceNode, targetNode } = getSourceTargetNodes(e, s.nodes);
return (
sourceNode?.width &&
sourceNode?.height &&
targetNode?.width &&
targetNode?.height &&
isEdgeVisible({
sourcePos: sourceNode.position,
targetPos: targetNode.position,
sourceWidth: sourceNode.width,
sourceHeight: sourceNode.height,
targetWidth: targetNode.width,
targetHeight: targetNode.height,
width: s.width,
height: s.height,
transform: s.transform,
})
);
});
},
[onlyRenderVisible]
)
);
return edges;
}
export default useVisibleEdges;
src/hooks/useVisibleNodes.ts
+22
View File
@@ -0,0 +1,22 @@
import { useCallback } from 'react';
import { useStore } from '../store';
import { getNodesInside } from '../utils/graph';
import { ReactFlowState } from '../types';
function useVisibleNodes(onlyRenderVisible: boolean) {
const nodes = useStore(
useCallback(
(s: ReactFlowState) => {
return onlyRenderVisible
? getNodesInside(s.nodes, { x: 0, y: 0, width: s.width, height: s.height }, s.transform, true)
: s.nodes;
},
[onlyRenderVisible]
)
);
return nodes;
}
export default useVisibleNodes;
src/types/index.ts
+1
View File
@@ -300,6 +300,7 @@ export interface WrapNodeProps<T = any> {
isDragging?: boolean;
resizeObserver: ResizeObserver | null;
dragHandle?: string;
zIndex: number;
}
export type FitViewParams = {