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

feat(nested-nodes): callback for parent node size change

Browse Source
This commit is contained in:
Christopher Möller
2021-10-22 15:13:14 +02:00
parent 8b95cd712f
commit dc36ebf31f
2 changed files with 139 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/container/NodeRenderer/index.tsx
+114 -60
View File
@@ -1,4 +1,4 @@
import React, { memo, useMemo, ComponentType, MouseEvent, Fragment } from 'react';
import React, { memo, useMemo, ComponentType, MouseEvent, Fragment, useEffect } from 'react';
import shallow from 'zustand/shallow';
import { useStore } from '../../store';
@@ -44,6 +44,107 @@ interface NodesProps extends NodeRendererProps {
parentId?: string;
}
interface NodeProps extends NodesProps {
nodes: Node[];
node: Node;
nodeType: string;
}
function Node({
nodes,
node,
nodeType,
isDraggable,
resizeObserver,
scale,
snapToGrid,
snapGrid,
nodesDraggable,
nodesConnectable,
elementsSelectable,
recursionDepth,
...props
}: NodeProps) {
const onNodesChange = useStore((s) => s.onNodesChange);
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';
const childNodes = useMemo(() => nodes.filter((n) => n.parentNode === node.id && !n.isHidden), [nodes, node.id]);
const childRect = useMemo(() => getRectOfNodes(childNodes), [childNodes]);
const isParentNode = !!childNodes.length;
node.style = useMemo(() => {
if (isParentNode) {
return {
...node.style,
width: Math.floor(childRect.width) + 20,
height: Math.floor(childRect.height) + 20,
boxSizing: 'border-box',
};
}
return node.style;
}, [childRect.width, childRect.height, isParentNode, node.style]);
useEffect(() => {
if (onNodesChange && isParentNode) {
onNodesChange([
{
type: 'position',
id: node.id,
position: { x: Math.floor(childRect.x) - 10, y: Math.floor(childRect.y) - 10 },
},
]);
}
}, [childRect.width, childRect.height, childRect.x, childRect.y, isParentNode]);
return (
<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}
/>
);
}
function Nodes({
nodes,
parentId,
@@ -70,69 +171,22 @@ function Nodes({
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';
const childNodes = nodes.filter((n) => n.parentNode === node.id && !n.isHidden);
if (childNodes.length) {
const childRect = getRectOfNodes(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}
<Node
node={node}
nodes={nodes}
nodeType={nodeType}
parentId={node.id}
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}
snapGrid={snapGrid}
nodesDraggable={nodesDraggable}
nodesConnectable={nodesConnectable}
resizeObserver={resizeObserver}
elementsSelectable={elementsSelectable}
scale={scale}
isSelected={!!node.isSelected}
isDraggable={isNodeDraggable}
isSelectable={isSelectable}
isConnectable={isConnectable}
resizeObserver={childNodes.length ? resizeObserver : null}
dragHandle={node.dragHandle}
zIndex={3 + recursionDepth}
recursionDepth={recursionDepth}
{...props}
/>
<MemoizedNodes
nodes={nodes}