Merge branch 'next' into enhance-connection-more

This commit is contained in:
moklick
2024-06-27 17:14:17 +02:00
42 changed files with 383 additions and 370 deletions
@@ -25,12 +25,8 @@ const selector = (s: ReactFlowState) => {
return {
viewBB,
boundingRect:
s.nodeLookup.size > 0
? getBoundsOfRects(getInternalNodesBounds(s.nodeLookup, { nodeOrigin: s.nodeOrigin }), viewBB)
: viewBB,
boundingRect: s.nodeLookup.size > 0 ? getBoundsOfRects(getInternalNodesBounds(s.nodeLookup), viewBB) : viewBB,
rfId: s.rfId,
nodeOrigin: s.nodeOrigin,
panZoom: s.panZoom,
translateExtent: s.translateExtent,
flowWidth: s.width,
@@ -1,7 +1,7 @@
/* eslint-disable @typescript-eslint/ban-ts-comment */
/* eslint-disable @typescript-eslint/no-explicit-any */
import { ComponentType, memo } from 'react';
import { NodeOrigin, getNodeDimensions, getNodePositionWithOrigin, nodeHasDimensions } from '@xyflow/system';
import { getNodeDimensions, nodeHasDimensions } from '@xyflow/system';
import { shallow } from 'zustand/shallow';
import { useStore } from '../../hooks/useStore';
@@ -11,7 +11,6 @@ import type { MiniMapNodes as MiniMapNodesProps, GetMiniMapNodeAttribute, MiniMa
declare const window: any;
const selector = (s: ReactFlowState) => s.nodeOrigin;
const selectorNodeIds = (s: ReactFlowState) => s.nodes.map((node) => node.id);
const getAttrFunction = <NodeType extends Node>(func: any): GetMiniMapNodeAttribute<NodeType> =>
func instanceof Function ? func : () => func;
@@ -28,7 +27,6 @@ function MiniMapNodes<NodeType extends Node>({
onClick,
}: MiniMapNodesProps<NodeType>) {
const nodeIds = useStore(selectorNodeIds, shallow);
const nodeOrigin = useStore(selector);
const nodeColorFunc = getAttrFunction<NodeType>(nodeColor);
const nodeStrokeColorFunc = getAttrFunction<NodeType>(nodeStrokeColor);
const nodeClassNameFunc = getAttrFunction<NodeType>(nodeClassName);
@@ -46,7 +44,6 @@ function MiniMapNodes<NodeType extends Node>({
<NodeComponentWrapper<NodeType>
key={nodeId}
id={nodeId}
nodeOrigin={nodeOrigin}
nodeColorFunc={nodeColorFunc}
nodeStrokeColorFunc={nodeStrokeColorFunc}
nodeClassNameFunc={nodeClassNameFunc}
@@ -63,7 +60,6 @@ function MiniMapNodes<NodeType extends Node>({
function NodeComponentWrapperInner<NodeType extends Node>({
id,
nodeOrigin,
nodeColorFunc,
nodeStrokeColorFunc,
nodeClassNameFunc,
@@ -74,7 +70,6 @@ function NodeComponentWrapperInner<NodeType extends Node>({
onClick,
}: {
id: string;
nodeOrigin: NodeOrigin;
nodeColorFunc: GetMiniMapNodeAttribute<NodeType>;
nodeStrokeColorFunc: GetMiniMapNodeAttribute<NodeType>;
nodeClassNameFunc: GetMiniMapNodeAttribute<NodeType>;
@@ -86,7 +81,7 @@ function NodeComponentWrapperInner<NodeType extends Node>({
}) {
const { node, x, y } = useStore((s) => {
const node = s.nodeLookup.get(id) as InternalNode<NodeType>;
const { x, y } = getNodePositionWithOrigin(node, nodeOrigin).positionAbsolute;
const { x, y } = node.internals.positionAbsolute;
return {
node,
@@ -67,26 +67,30 @@ function ResizeControl({
},
onChange: (change: XYResizerChange, childChanges: XYResizerChildChange[]) => {
const { triggerNodeChanges, nodeLookup, parentLookup, nodeOrigin } = store.getState();
const changes: NodeChange[] = [];
const nextPosition = { x: change.x, y: change.y };
const node = nodeLookup.get(id);
if (node && node.expandParent && node.parentId) {
const origin = node.origin ?? nodeOrigin;
const width = change.width ?? node.measured.width!;
const height = change.height ?? node.measured.height!;
const child: ParentExpandChild = {
id: node.id,
parentId: node.parentId,
rect: {
width: change.width ?? node.measured.width!,
height: change.height ?? node.measured.height!,
width,
height,
...evaluateAbsolutePosition(
{
x: change.x ?? node.position.x,
y: change.y ?? node.position.y,
},
{ width, height },
node.parentId,
nodeLookup,
node.origin ?? nodeOrigin
origin
),
},
};
@@ -94,9 +98,10 @@ function ResizeControl({
const parentExpandChanges = handleExpandParent([child], nodeLookup, parentLookup, nodeOrigin);
changes.push(...parentExpandChanges);
// when the parent was expanded by the child node, its position will be clamped at 0,0
nextPosition.x = change.x ? Math.max(0, change.x) : undefined;
nextPosition.y = change.y ? Math.max(0, change.y) : undefined;
// when the parent was expanded by the child node, its position will be clamped at
// 0,0 when node origin is 0,0 and to width, height if it's 1,1
nextPosition.x = change.x ? Math.max(origin[0] * width, change.x) : undefined;
nextPosition.y = change.y ? Math.max(origin[1] * height, change.y) : undefined;
}
if (nextPosition.x !== undefined && nextPosition.y !== undefined) {
@@ -1,7 +1,7 @@
import { useCallback, CSSProperties } from 'react';
import cc from 'classcat';
import { shallow } from 'zustand/shallow';
import { Rect, Position, getNodeToolbarTransform, getNodesBounds } from '@xyflow/system';
import { Position, getNodeToolbarTransform, getInternalNodesBounds, NodeLookup } from '@xyflow/system';
import { InternalNode, ReactFlowState } from '../../types';
import { useStore } from '../../hooks/useStore';
@@ -17,21 +17,24 @@ const nodeEqualityFn = (a?: InternalNode, b?: InternalNode) =>
a?.selected !== b?.selected ||
a?.internals.z !== b?.internals.z;
const nodesEqualityFn = (a: InternalNode[], b: InternalNode[]) => {
if (a.length !== b.length) {
const nodesEqualityFn = (a: NodeLookup, b: NodeLookup) => {
if (a.size !== b.size) {
return false;
}
return !a.some((node, i) => nodeEqualityFn(node, b[i]));
for (const [key, node] of a) {
if (nodeEqualityFn(node, b.get(key))) {
return false;
}
}
return true;
};
const storeSelector = (state: ReactFlowState) => ({
viewport: {
x: state.transform[0],
y: state.transform[1],
zoom: state.transform[2],
},
nodeOrigin: state.nodeOrigin,
x: state.transform[0],
y: state.transform[1],
zoom: state.transform[2],
selectedNodesCount: state.nodes.filter((node) => node.selected).length,
});
@@ -49,36 +52,41 @@ export function NodeToolbar({
const contextNodeId = useNodeId();
const nodesSelector = useCallback(
(state: ReactFlowState): InternalNode[] => {
(state: ReactFlowState): NodeLookup => {
const nodeIds = Array.isArray(nodeId) ? nodeId : [nodeId || contextNodeId || ''];
return nodeIds.reduce<InternalNode[]>((acc, id) => {
const internalNodes = nodeIds.reduce<NodeLookup>((res, id) => {
const node = state.nodeLookup.get(id);
if (node) {
acc.push(node);
res.set(node.id, node);
}
return acc;
}, []);
return res;
}, new Map());
return internalNodes;
},
[nodeId, contextNodeId]
);
const nodes = useStore(nodesSelector, nodesEqualityFn);
const { viewport, nodeOrigin, selectedNodesCount } = useStore(storeSelector, shallow);
const { x, y, zoom, selectedNodesCount } = useStore(storeSelector, shallow);
// if isVisible is not set, we show the toolbar only if its node is selected and no other node is selected
const isActive =
typeof isVisible === 'boolean' ? isVisible : nodes.length === 1 && nodes[0].selected && selectedNodesCount === 1;
typeof isVisible === 'boolean'
? isVisible
: nodes.size === 1 && nodes.values().next().value.selected && selectedNodesCount === 1;
if (!isActive || !nodes.length) {
if (!isActive || !nodes.size) {
return null;
}
const nodeRect: Rect = getNodesBounds(nodes, { nodeOrigin });
const zIndex: number = Math.max(...nodes.map((node) => node.internals.z + 1));
const nodeRect = getInternalNodesBounds(nodes);
const nodesArray = Array.from(nodes.values());
const zIndex = Math.max(...nodesArray.map((node) => node.internals.z + 1));
const wrapperStyle: CSSProperties = {
position: 'absolute',
transform: getNodeToolbarTransform(nodeRect, viewport, position, offset, align),
transform: getNodeToolbarTransform(nodeRect, { x, y, zoom }, position, offset, align),
zIndex,
...style,
};
@@ -89,7 +97,8 @@ export function NodeToolbar({
style={wrapperStyle}
className={cc(['react-flow__node-toolbar', className])}
{...rest}
data-id={nodes.reduce((acc, node) => `${acc}${node.id} `, '').trim()}
// @todo: check if we could only do this for non-prod envs
data-id={nodesArray.reduce((acc, node) => `${acc}${node.id} `, '').trim()}
>
{children}
</div>
@@ -6,7 +6,6 @@ import {
elementSelectionKeys,
errorMessages,
getNodeDimensions,
getPositionWithOrigin,
isInputDOMNode,
nodeHasDimensions,
} from '@xyflow/system';
@@ -40,7 +39,6 @@ export function NodeWrapper<NodeType extends Node>({
rfId,
nodeTypes,
nodeExtent,
nodeOrigin,
onError,
}: NodeWrapperProps<NodeType>) {
const { node, internals, isParent } = useStore((s) => {
@@ -87,15 +85,11 @@ export function NodeWrapper<NodeType extends Node>({
const nodeDimensions = getNodeDimensions(node);
const inlineDimensions = getNodeInlineStyleDimensions(node);
// TODO: clamping should happen earlier
const clampedPosition = nodeExtent
? clampPosition(internals.positionAbsolute, nodeExtent)
: internals.positionAbsolute;
const positionWithOrigin = getPositionWithOrigin({
...clampedPosition,
...nodeDimensions,
origin: node.origin || nodeOrigin,
});
const hasPointerEvents = isSelectable || isDraggable || onClick || onMouseEnter || onMouseMove || onMouseLeave;
const onMouseEnterHandler = onMouseEnter
@@ -181,7 +175,7 @@ export function NodeWrapper<NodeType extends Node>({
ref={nodeRef}
style={{
zIndex: internals.z,
transform: `translate(${positionWithOrigin.x}px,${positionWithOrigin.y}px)`,
transform: `translate(${clampedPosition.x}px,${clampedPosition.y}px)`,
pointerEvents: hasPointerEvents ? 'all' : 'none',
visibility: hasDimensions ? 'visible' : 'hidden',
...node.style,
@@ -21,7 +21,6 @@ export type NodesSelectionProps<NodeType> = {
const selector = (s: ReactFlowState) => {
const { width, height, x, y } = getInternalNodesBounds(s.nodeLookup, {
nodeOrigin: s.nodeOrigin,
filter: (node) => !!node.selected,
});
@@ -4,6 +4,7 @@ import { Provider } from '../../contexts/StoreContext';
import { createStore } from '../../store';
import { BatchProvider } from '../BatchProvider';
import type { Node, Edge } from '../../types';
import { NodeOrigin } from '@xyflow/system';
export type ReactFlowProviderProps = {
initialNodes?: Node[];
@@ -13,6 +14,7 @@ export type ReactFlowProviderProps = {
initialWidth?: number;
initialHeight?: number;
fitView?: boolean;
nodeOrigin?: NodeOrigin;
children: ReactNode;
};
@@ -24,6 +26,7 @@ export function ReactFlowProvider({
initialWidth: width,
initialHeight: height,
fitView,
nodeOrigin,
children,
}: ReactFlowProviderProps) {
const [store] = useState(() =>
@@ -35,6 +38,7 @@ export function ReactFlowProvider({
width,
height,
fitView,
nodeOrigin,
})
);
@@ -22,7 +22,6 @@ export type FlowRendererProps<NodeType extends Node = Node> = Omit<
| 'selectNodesOnDrag'
| 'defaultMarkerColor'
| 'rfId'
| 'nodeOrigin'
> & {
isControlledViewport: boolean;
children: ReactNode;
@@ -32,7 +32,6 @@ export type GraphViewProps<NodeType extends Node = Node, EdgeType extends Edge =
| 'noPanClassName'
| 'defaultViewport'
| 'disableKeyboardA11y'
| 'nodeOrigin'
>
> & {
rfId: string;
@@ -97,7 +96,6 @@ function GraphViewComponent<NodeType extends Node = Node, EdgeType extends Edge
noWheelClassName,
noPanClassName,
disableKeyboardA11y,
nodeOrigin,
nodeExtent,
rfId,
viewport,
@@ -186,7 +184,6 @@ function GraphViewComponent<NodeType extends Node = Node, EdgeType extends Edge
noPanClassName={noPanClassName}
noDragClassName={noDragClassName}
disableKeyboardA11y={disableKeyboardA11y}
nodeOrigin={nodeOrigin}
nodeExtent={nodeExtent}
rfId={rfId}
/>
@@ -22,7 +22,6 @@ export type NodeRendererProps<NodeType extends Node> = Pick<
| 'noDragClassName'
| 'rfId'
| 'disableKeyboardA11y'
| 'nodeOrigin'
| 'nodeExtent'
| 'nodeTypes'
>;
@@ -72,7 +71,6 @@ function NodeRendererComponent<NodeType extends Node>(props: NodeRendererProps<N
id={nodeId}
nodeTypes={props.nodeTypes}
nodeExtent={props.nodeExtent}
nodeOrigin={props.nodeOrigin}
onClick={props.onNodeClick}
onMouseEnter={props.onNodeMouseEnter}
onMouseMove={props.onNodeMouseMove}
+2 -3
View File
@@ -155,7 +155,7 @@ export function Pane({
};
const onPointerMove = (event: ReactPointerEvent): void => {
const { userSelectionRect, edgeLookup, transform, nodeOrigin, nodeLookup, triggerNodeChanges, triggerEdgeChanges } =
const { userSelectionRect, edgeLookup, transform, nodeLookup, triggerNodeChanges, triggerEdgeChanges } =
store.getState();
if (!containerBounds.current || !userSelectionRect) {
@@ -181,8 +181,7 @@ export function Pane({
nextUserSelectRect,
transform,
selectionMode === SelectionMode.Partial,
true,
nodeOrigin
true
);
const selectedEdgeIds = new Set<string>();
@@ -3,6 +3,7 @@ import { useContext, type ReactNode } from 'react';
import StoreContext from '../../contexts/StoreContext';
import { ReactFlowProvider } from '../../components/ReactFlowProvider';
import type { Node, Edge } from '../../types';
import { NodeOrigin } from '@xyflow/system';
export function Wrapper({
children,
@@ -13,6 +14,7 @@ export function Wrapper({
width,
height,
fitView,
nodeOrigin,
}: {
children: ReactNode;
nodes?: Node[];
@@ -22,6 +24,7 @@ export function Wrapper({
width?: number;
height?: number;
fitView?: boolean;
nodeOrigin?: NodeOrigin;
}) {
const isWrapped = useContext(StoreContext);
@@ -40,6 +43,7 @@ export function Wrapper({
initialWidth={width}
initialHeight={height}
fitView={fitView}
nodeOrigin={nodeOrigin}
>
{children}
</ReactFlowProvider>
@@ -157,7 +157,7 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
data-testid="rf__wrapper"
id={id}
>
<Wrapper nodes={nodes} edges={edges} width={width} height={height} fitView={fitView}>
<Wrapper nodes={nodes} edges={edges} width={width} height={height} fitView={fitView} nodeOrigin={nodeOrigin}>
<GraphView<NodeType, EdgeType>
onInit={onInit}
onNodeClick={onNodeClick}
@@ -217,7 +217,6 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
noPanClassName={noPanClassName}
rfId={rfId}
disableKeyboardA11y={disableKeyboardA11y}
nodeOrigin={nodeOrigin}
nodeExtent={nodeExtent}
viewport={viewport}
onViewportChange={onViewportChange}
+1 -1
View File
@@ -50,7 +50,7 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
const nodeToUse = isNode<NodeType>(node) ? node : nodeLookup.get(node.id)!;
const position = nodeToUse.parentId
? evaluateAbsolutePosition(nodeToUse.position, nodeToUse.parentId, nodeLookup, nodeOrigin)
? evaluateAbsolutePosition(nodeToUse.position, nodeToUse.measured, nodeToUse.parentId, nodeLookup, nodeOrigin)
: nodeToUse.position;
const nodeWithPosition = {
+16 -15
View File
@@ -45,22 +45,23 @@ const useViewportHelper = (): ViewportHelperFunctions => {
return { x, y, zoom };
},
fitView: (options) => {
const { nodeLookup, width, height, nodeOrigin, minZoom, maxZoom, panZoom } = store.getState();
const { nodeLookup, width, height, minZoom, maxZoom, panZoom } = store.getState();
return panZoom
? fitView(
{
nodeLookup,
width,
height,
nodeOrigin,
minZoom,
maxZoom,
panZoom,
},
options
)
: false;
if (!panZoom) {
return false;
}
return fitView(
{
nodeLookup,
width,
height,
minZoom,
maxZoom,
panZoom,
},
options
);
},
setCenter: (x, y, options) => {
const { width, height, maxZoom, panZoom } = store.getState();
+8 -6
View File
@@ -13,6 +13,7 @@ import {
NodeSelectionChange,
ParentExpandChild,
initialConnection,
NodeOrigin,
} from '@xyflow/system';
import { applyEdgeChanges, applyNodeChanges, createSelectionChange, getSelectionChanges } from '../utils/changes';
@@ -27,6 +28,7 @@ const createStore = ({
width,
height,
fitView,
nodeOrigin,
}: {
nodes?: Node[];
edges?: Edge[];
@@ -35,10 +37,11 @@ const createStore = ({
width?: number;
height?: number;
fitView?: boolean;
nodeOrigin?: NodeOrigin;
}) =>
createWithEqualityFn<ReactFlowState>(
(set, get) => ({
...getInitialState({ nodes, edges, width, height, fitView, defaultNodes, defaultEdges }),
...getInitialState({ nodes, edges, width, height, fitView, nodeOrigin, defaultNodes, defaultEdges }),
setNodes: (nodes: Node[]) => {
const { nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect } = get();
// setNodes() is called exclusively in response to user actions:
@@ -99,7 +102,7 @@ const createStore = ({
return;
}
updateAbsolutePositions(nodeLookup, { nodeOrigin });
updateAbsolutePositions(nodeLookup, parentLookup, { nodeOrigin });
// we call fitView once initially after all dimensions are set
let nextFitViewDone = fitViewDone;
@@ -156,8 +159,8 @@ const createStore = ({
}
if (parentExpandChildren.length > 0) {
const { nodeLookup, parentLookup } = get();
const parentExpandChanges = handleExpandParent(parentExpandChildren, nodeLookup, parentLookup);
const { nodeLookup, parentLookup, nodeOrigin } = get();
const parentExpandChanges = handleExpandParent(parentExpandChildren, nodeLookup, parentLookup, nodeOrigin);
changes.push(...parentExpandChanges);
}
@@ -289,7 +292,7 @@ const createStore = ({
return panBySystem({ delta, panZoom, transform, translateExtent, width, height });
},
fitView: (options?: FitViewOptions): boolean => {
const { panZoom, width, height, minZoom, maxZoom, nodeOrigin, nodeLookup } = get();
const { panZoom, width, height, minZoom, maxZoom, nodeLookup } = get();
if (!panZoom) {
return false;
@@ -303,7 +306,6 @@ const createStore = ({
panZoom,
minZoom,
maxZoom,
nodeOrigin,
},
options
);
+7 -4
View File
@@ -7,6 +7,7 @@ import {
updateConnectionLookup,
devWarn,
getInternalNodesBounds,
NodeOrigin,
initialConnection,
} from '@xyflow/system';
@@ -20,6 +21,7 @@ const getInitialState = ({
width,
height,
fitView,
nodeOrigin,
}: {
nodes?: Node[];
edges?: Edge[];
@@ -28,6 +30,7 @@ const getInitialState = ({
width?: number;
height?: number;
fitView?: boolean;
nodeOrigin?: NodeOrigin;
} = {}): ReactFlowStore => {
const nodeLookup = new Map<string, InternalNode>();
const parentLookup = new Map();
@@ -35,21 +38,21 @@ const getInitialState = ({
const edgeLookup = new Map();
const storeEdges = defaultEdges ?? edges ?? [];
const storeNodes = defaultNodes ?? nodes ?? [];
const storeNodeOrigin = nodeOrigin ?? [0, 0];
updateConnectionLookup(connectionLookup, edgeLookup, storeEdges);
adoptUserNodes(storeNodes, nodeLookup, parentLookup, {
nodeOrigin: [0, 0],
nodeOrigin: storeNodeOrigin,
elevateNodesOnSelect: false,
});
let transform: Transform = [0, 0, 1];
if (fitView && width && height) {
// @todo users nodeOrigin should be used here
const bounds = getInternalNodesBounds(nodeLookup, {
nodeOrigin: [0, 0],
filter: (node) => !!((node.width || node.initialWidth) && (node.height || node.initialHeight)),
});
const { x, y, zoom } = getViewportForBounds(bounds, width, height, 0.5, 2, 0.1);
transform = [x, y, zoom];
}
@@ -81,7 +84,7 @@ const getInitialState = ({
domNode: null,
paneDragging: false,
noPanClassName: 'nopan',
nodeOrigin: [0, 0],
nodeOrigin: storeNodeOrigin,
nodeDragThreshold: 1,
snapGrid: [15, 15],
+1 -9
View File
@@ -1,12 +1,5 @@
import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
import type {
CoordinateExtent,
NodeBase,
NodeOrigin,
OnError,
NodeProps as NodePropsBase,
InternalNodeBase,
} from '@xyflow/system';
import type { CoordinateExtent, NodeBase, OnError, NodeProps as NodePropsBase, InternalNodeBase } from '@xyflow/system';
import { NodeTypes } from './general';
@@ -59,7 +52,6 @@ export type NodeWrapperProps<NodeType extends Node> = {
disableKeyboardA11y: boolean;
nodeTypes?: NodeTypes;
nodeExtent?: CoordinateExtent;
nodeOrigin: NodeOrigin;
onError?: OnError;
};
+2 -1
View File
@@ -26,6 +26,7 @@ import {
type NodeLookup,
type NodeChange,
type EdgeChange,
type ParentLookup,
} from '@xyflow/system';
import type {
@@ -53,7 +54,7 @@ export type ReactFlowStore<NodeType extends Node = Node, EdgeType extends Edge =
transform: Transform;
nodes: NodeType[];
nodeLookup: NodeLookup<InternalNode<NodeType>>;
parentLookup: Map<string, InternalNode<NodeType>[]>;
parentLookup: ParentLookup<InternalNode<NodeType>>;
edges: Edge[];
edgeLookup: EdgeLookup<EdgeType>;
connectionLookup: ConnectionLookup;