Merge branch 'next' into enhance-connection-more
This commit is contained in:
@@ -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}
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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 = {
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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,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,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;
|
||||
};
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user